Download presentation
Presentation is loading. Please wait.
1
Laying out a website using CSS and HTML
Digital Design Class
2
Lets Put in the HTML SHELL
<!DOCTYPE html> <html> <head> <title>Web Page Layout</title> </head> <body> </body> </html>
3
Now, lets add the rest of our html code ~ LOOK AT YOUR HANDOUT PAGE 1 AND SAVE AS LAYOUT.HMTL
4
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..
5
This is what your page should look like before INLINE css
6
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.
7
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.
8
This is what your page should look like AFTER INLINE css
Similar presentations
