Laying out a website using CSS and HTML Digital Design Class
Lets Put in the HTML SHELL <!DOCTYPE html> <html> <head> <title>Web Page Layout</title> </head> <body> </body> </html>
Now, lets add the rest of our html code ~ LOOK AT YOUR HANDOUT PAGE 1 AND SAVE AS LAYOUT.HMTL
LETS LOOK AT SOME OF THE TAGS AND WHAT THEY DO <DIV class=“container”> The Div tag defines a division or section of an HTML document, it is used together with CSS, to layout a webpage <header> This element represents a container for introductory content or a set of links <nav> This tag defines a set of navigation links <article> This tag is used for a self-contained content such as Forum Post, Blog Post, News Story, Comment, etc… <footer> This tag defines a footer for a document, usually contains copyright information, contact information, etc..
This is what your page should look like before INLINE css
Now, lets add the rest of our inline CSS to our code, see page 2 of handout ADD YOUR <STYLE> TAG AND CSS IN YOUR <HEAD> SECTION.
LETS LOOK AT SOME OF THE CSS YOU MIGHT NOT KNOW Padding is the space around the element’s content 1em – it is a unit of horizontal spacing (1 is lowest) Clear – specifies on which sides of an element are not allowed to float Float – is used for positioning and layout on web pages, it can be left, right, none, or inherit (element inherits the float value of parent element) List-style-type – specifies the type of list-item marker in a list, could be circle, square, disc Text-decoration – allows you to add decoration to text, could be none, overline, underline, line-through, etc… Overthrow – specifies what should happen if content overflows an element’s box.
This is what your page should look like AFTER INLINE css