Downloadable files for demonstration purposes.
Download zip file with the sample page.
Useful Links
Firebug is a plugin for firefox that allows you to examine a website and shows the relationship of styles to the HTML tags.
Text Wrangler is a usfule text editor for Mac.
Notepad++ is a useful text editor for Windows.
w3schools is a great place to learn about html.
Definitions
HTML- hyper text markup language.
HTML tag- HTML tags are keywords surrounded by angle brackets like <html>
Element- An HTML element is everything from the start tag to the end tag.
CSS - cascading style sheet. Used to define style rules for htm elements.
CSS Box model - The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
Style
Outline
About the seminar
Programs: I will use. Text editor, firebug, firefox
What is HTML,
Creating a page. file extension
Basic structure- Tag, element, attributes,
Style, inline, in head, style sheet. attatching a style sheet.
cascade.
css class- can be used multiple times within a document
css id- Identifies a specific element that is only used one time in the document
Explanaiton of the sample document
line 1: doctype declaration- tells the browser what verion of html the page was written in. more about doctype here.
line 2: html tag - starts the html document. This tag is closed on line 120
line 3: head tag - anything within this tag is not displayed in the browser.
line 4: meta tag
line 5: link tag - this link tag tells the browser what the fav icon is.
line 8: the title tag tells the browser what to display in the tile of the page at the top of the browser. Important in serch engines and favorites.
line 10: this link tag links to the style sheet associated with the document. All of the styles in this page are defined in the external style sheet called "layout.css"
line 12: the head tag is closed and the body element begins. The body is the displayed part of the document.
line 13: Here is the first div tag. THe div is a container for other information. This div is given an id of wrapper so that it can be styled with an external style rule. This tag is not closed until line 119. Everything between this tag is nested. This means a tag within a tag. THe properties of this tag will apply to all nested tags
line 14: this starts another div with the id of page banner. This is used in the layout of the page it defines the very top banner on the page.
line 15: this starts the tag for h1. This is the largest heading tag. The h1 content is everything between the h1 tag. THe actual text here is hidden.
lines 16,17, and 18: these are all layout element in the page. they make up the graphic portions of the top banner.
lines 16 and 17: have images set as their background with css. These divs are also links and are therefore enclosed in the a tag. Notice the syntax for creating a hyperlink to another page. These links are styled in the style sheet so that they do not use the default link formatting of the browser.
line 18: includes an img tag in the div. Notice the syntax within the img tag.
line 19: the span tag is used. It is only a container and on its own does not change anything visually on the page. This span is styled so that it does not normally show up.
line 20: closes the h1 tag
line 21: the page banner div is closed. This line is commented to show it is closed. This helps to keep track of the what closing tag creesponds to the opening tag.
line 22: This line starts the div that encloses the top tool bar. It is part of the layout that is styled in the style sheet.
line 23: Here is the opening tag for an unorderd list. This list includes the items in the menu top tool bar.
line 24- 26: Here is the list item tag (li). Each item in a list has its own tag. Each item in this list is a link so the text is enclosed in the "a" tag.
line 27: closes the unorderd list
line 28: closes the top toolbar div as noted by the comment.
line 29: The innerwrapper div is started. If you use firebug you can see that this div is used for formatting the layout of the page. It encloses several other layout divs.
line 30: columnone div is another layout feature of this page. It is named after what it is, the first column.
line 31: This div is used for the navigation section in column one. Style rules applied to this div help to style the navigation links at the right.
line 32 - 48: Line 32 is the start of another list that is used to create a menu. This list contains the main navigation links. It is closed on line 48.
line 49: this line is a mistake, however it is a good exmple that the html doesn't see "enter." You can use this to your advantage to layout the html document so that it is easy to follow without affecting the display of the page in the browser.
lines 50- 59: This section is enclosed in a div that contains all of the elements of the search bar in the left navigation area. Most of these elements are part of a form and are more advanced than the scope of this class. However they really are not as complicated as they seem. You can read about form elements.
lines 60 - 61: closing more layout divs as noted
line 62: maincontent div is started. This is another container for the layout.
line 63: This is basic image tag to display the banner image at the top of the content area. notice the attributes: title, alt, width, and height.
lines 64 - 73: The first paragraph in the document. It uses the paragraph tag. Notic the special character "&" that allows the display of an ampersand in the browser.
lines 73 - 92: More paragraphs. Notice the "p" tag is opened and closed for each paragraph.
lines 74 -75: These lines contain a link within the paragraph. Notice the sytax and how it looks in the browser. This is used to make words within the paragraph clickable links.
lines 93 - 94: Closing more divs
line 95: div with a class of clear float. THis is used to keep elements from floating. YOu can find more of an explanation of float here.
line 96: The div for the layout of the footer begins.
lines 97 - 105: This is the list that makes up the footer menu bar. Notice that each list item has its own class. This is used to layout the elements with the style sheet.
line 106: THe footer div is closed
lines 107 - 118: These lines are all within the copyright div. This is the last layout element on the page. There is one last list within this div.
All of the divs are closed by the end of the document
line 120: includes the closing tag for the body and html. At this point the documnet is complete.