HTML Artwork Page

-
Here I have made a simple HTML page layout using a mixture of deprecated tags and new existing tags. I was able to layout a header, menu (navigation), footer, and main content area.
At the top of the page is the header, to the left is a navigation menu, the centre is where the main content is implemented, and at the bottom is the footer (not seen in image).

Within the red box is the HTML code for the page, and within the purple box is the CSS (styling) a specific section of the page; in this case, the main content. The styling controls the text, positioning, size, and general properties for that exact block; div tags create a block, which can then be manipulated using CSS.

Within the red box, I have highlighted a block, this block is colour coded; orange is for margin, green is for padding, yellow is for border (there is no border present in this image), and blue is the block itself. Inside the purple box shows a box model, which represents the properties previously stated.

In this image, I show (using the box model) where an artwork has been placed within the block, and the red box surrounding the HTML code displays how it was implemented/the line of code which controls what is placed within the block. Things within the main content block will be changed and added to in future.

CODE: HTML

<!doctype html>
<html lang="en">
<html>

<head> 
<title> Hello World</title> 
<link rel="stylesheet" href="CreativeCSS.css">
<script src=""></script>
</head>

<body>
<header>
<div>
<h1>Home</h1>

</div>
</header>

</body>

<div id="maincontent">

<div class= "container">

<div class="text">
<p><b><u> Hello World! </u></b></p>
</div>

</div>
<div class="container2">
<menu>
<dir>
<li><a href="">Home</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">About</a></li>
</dir>
</menu>
</div>

<div class="container3">
<p>Hello World Hello World Hello World</p>
<br>
<img src="theeye.jpg" alt="Eye Art" style="width:350px;height:300px;">

</div>

</div>

<div id="footer">
<div class="container1">

</div>
</div>

</html>

CODE: CSS

*{
padding: 0;
margin: 0;
}

p{
color:white;
}
h1 {
    color: white;
    font-family: verdana;
    font-size: 28px;
    text-align: center;
    border: 2px solid white;
    border-width: 20px;
    border-radius: 50px;
}
body {
font-family: Arial, Verdana, Sans-serif;

}
header{
clear: left;
text-align: center;
background-color: rgba(89,77,77,1);
}

menu {
    max-width: 160px;
    margin: 0;
    padding: 1em;
    height:100%;
    transition: width 2s;
    border:2px solid black;
    border-width: 20px;
    border-radius: 30px;

}
menu:hover {
    width: 200px;
    transition-timing-function: ease-in-out;
}
menu dir {
    list-style-type: none;
    padding: 0;
}

#maincontent{
height: 800px;
width: 100%;
font-family: verdana;
font-size: 18px;
text-align: center;
padding-bottom: 25px;
background-image:url("Wallpaper.png");
background-color: white;
background-size: 100%;
}
#footer{
height: 130px;
width: 100%;
background-color: rgba(89,77,77,1);
font-size: 10px; 
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;

}
.container{
width: 50%;
margin-left:25%;
margin-right: 25%;
padding-top: 10px;
float: middle;
position: absolute;
}
.container1{
width: 100%;
height: 50px;
padding-top: 25px;
margin-left: auto;

}
.container2{
float: left;
position: static;
width:160px;
height:749px;
margin-right:100px;
margin-left: auto;
margin-bottom: 50px;

text-align: center;
}
.container3{
width: 800px;
height: 775px;
position: absolute;
margin-left: 250px;
margin-right: 300px;
text-align: left;
padding-top: 50px;

}

Comments

Post a Comment

Popular posts from this blog

Pure Data: GEM

-
Image
Here I will be presenting my final project in Pure Data using GEM, and what I have learned from the experience of using pure data to create motion graphics. The code will be sectioned into separate processes and explain in the order 1 through 7 as shown in the figure below. Figure 1 Step 1: Created [gemwin] object and connected it to three messages; [create] creating a window to draw graphics to, [destroy] to terminate the window, [lighting] which would initiate the world lighting. A toggle were added to [gemwin] to start and pause graphics, and another toggle to lighting to switch on or off. Step 2: Next I created a [gemhead] to begin drawing graphics to the empty window, I start off by creating a 3D object; a cube, and defining some properties; its XYZ rotation, XYZ translation, and colour. Two messages; draw fill and draw line, were connected to the cube, which would either fill the render into a solid shape, or draw the rendered shape with out-lines. Step 3 & S...
Read more

Purr Data: GEM

-
Using the information provided by the source given that explained what GEM is and what it is used for in Pure Data, I now have a clear understanding on how GEM is used to create media visuals; images, videos, and 3D Shapes. What is GEM? GEM is based on a large part of OpenGL. GEM is apart of pure data, and it is used to create motion graphics, this includes videos or still images, draw 2D or 3D shapes, and transform objects and shapes. Visuals can also be made to react to sounds. [gemwin] [gemwin] is what represents the window a graphic is drawn into - it creates a window which displays the graphics created. Using frame-rate, it schedules when frames should be drawn to the screen, by default, it clears the window and sets a background colour using RGB values. [gemhead] [gemhead] is the start of a chain of graphics operations connected by patch cords, that should be executed ever frame. Drawing operations cascade from the top down - adding to each other, flowing downwards ...
Read more

The Enduring Ephemeral, or the Future Is a Memory

-
Written by Wendy Hui Kyong Chun The Enduring Ephemeral, or the Future Is a Memory This read discusses how new media, like computer technology, is constantly evolving yet simultaneously back-peddling towards what would be know as a "bleeding edge of obsolesce". Normally, I questioned "what is new media?", yet the author suggests more appropriate questions such as "what was new media?" and "what will new media become?"... The "new" in "new media" suggests that what is new will one day become old, however, this is not the case with new media; as new media is almost the same yesterday as it is today, as stated by the author. This leads me to assume, due to the constant  storing and evolution of new media, it could not possibly become old despite the age of any such media; as "old" media found today is rediscovered as "new" media, which is a constant cycle of repetition. I found this interesting, as archi...
Read more