Add Html Layout Elements and Selectors
Selectors
- The Name Selector is the name of the element like body, article, nav, header and footer. It uses the name on the CSS sheet.
- Each id selector can be used on one element on the Html sheet. Like if your going to have one left column, you might use a id selector. You can use as many different name id selectors as you want.
- The class Selector can be used as many times as you want. Like on a paragraph you might have several different times. You can use one class selector for all the different paragraphs.
- To further clarify, On one html file, you can give a class selector a name and use that same name on the same page all you want. With the id selector, you can use the id selector all you want on the page but they have to all have different names. If you write a id selector, id="column" , you can only use it on the page once. You can make a whole new id selector and call it id="leftcolumn" . You can use it once on the page.
The Initial Layout
<!DOCTYPE html> <html lang="e"> <head> <title>Template</title> <meta charset="UTF-8"> <meta name="description" content="Description of your webpage."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="ourstyles.css" rel="stylesheet" type="text/css"> <link href="ourmobile.css" rel="stylesheet" media="screen and (max-width:999px)"> </head> <body> <div id="wrapper"> <!--Comment-This is the box used to control page width.It is called the WRAPPER--> <header> <h1>MYWEBSITE.COM</h1> <h2>Hot News Topics</h2> </header>
<div class="navbar"> </div>
<article> <h3>Welcome to my Homepage</h3> </article>
<div class="navbar"> </div>
<footer>Footer </footer>
</div> <!--Comment-End Wrapper--> </body> </html>
The initial layout explained
Now to explain everything I did:
- First thing, I filled in the title with Template. You want to make titles the search engines would like. Like for the first page I titled it something the website is about. When I Did the page on the box model, I titled it CSS Box Model.
- The first layout element is the <div id="wrapper">. This goes right after the opening <body> tag. The closing
</div> tag will go right before the closing </body> tag. All the content will go in between these 2 div tags. This uses the id
selector and that is how it is formatted. I can only use id="wrapper" once on each page
but I only have one wrapper per page so it is a perfect fit.We will make the
wrapper div 960 pixels wide which is how we control the width of the web page. When we get to the mobile CSS sheet, we will change it from 960 Pixels to 100%
so it fits the mobile screen exactly.
Note on id selector: I have several times had a problem after making a id selector. If you make a id selector and have problems, switch it to a class selector and see if it corrects the problem. - Right beside the wrapper div is a Html Comment. These are notes for the programmer and the person looking at the webpage does not see them. I used comments to mark the opening and closing wrapper divs so I know what there for and dont get them confused. The syntax for a Html comment is <!-- This is a comment --> CSS comments are formatted differently. I will cover that when we make our CSS sheet.
- Next is the <header></header> Element. This is the part at the top this is a few inches high and spans the width of the webpage. It often contains the name of your site, the purpose of your site and can contain a logo.
- Inside the <header></header> element, we have the <h1></h1> and <h2></h2> Elements. These are headings. There 6 of them being h1 to h6. h1 being the most important and larger one and h6 being the least important and the smallest one. These are used for titles and labels for different sections. Just remember h1 is the most important one. I have h1 and h2 in my header and h3 at the top of content area(article Section). I use h4 for titles of different areas on the web page. You can arrange yours as you see fit.
- Next is the <div class="navbar"></div>. You will notice I have that on the page twice. At the top it is inbetween the closing header tag and the opening article tag. At the bottom it is in between the closing article tag and the opening footer tag. This will contain our navigation menu which will be at the top and bottom of the page. Since we are using it twice, I used the class selector. The id selector would not work for this because I used it twice.
- Next is the <article></article> element. The article is where all the main content will go. All the paragraphs, pictures, lists and tables will go in here.
- Inside the article element, There is the <h3></h3> element. This will contain a title for the content on the page. The h2 element contained a title for the content on the whole site and the h1 has the url for the website. That is the way I arranged mine.
- Finally, the <footer></footer> element. It can contain contact information, links, copyright or anything else you might want to put there. It is always at the bottom of the page and is usually somewhere around 100 pixels high depending on your needs. you will notice that after the footer, there is the closing wrapper div. No content will go after the closing wrapper div nor will any content go before the opening wrapper div.
To see what it looks like so far Click Here(opens a new window)