16. Tags
<p>This paragraph has some <strong>bold
information</strong> in it.</p>
In the browser, this markup will look like:
This paragraph has some bold information in it.
18. Nested tags
<div id="content">
<p>This paragraph has some <strong>bold
information</strong> in it.</p>
</div>
• Tags take a hierarchical, parent-child
structure
19. The DOM
• Document Object Model
• Represents the nested structure of an
HTML document
• Tree structure -- think family tree
body
h1 ul div
p
strong
33. Set-up
• Put the HTML into a text file using Text
Wrangler, or the text editor of your
choice.
• In Firefox, choose "File > Open File" and
open your HTML page.
40. Exercise
Create an outline in your HTML using headings and
paragraph tags.
Examples:
•Table of Contents
•Proposal
•Presentation Notes
41. Links
• <a>
• The most important tag!
Link Text
href URL
What the link looks
Hyperlink Reference Name of file to link to
like in the browser
42. Links
• <a>
• The most important tag!
<a href="page.html">Go to page</a>
Link Text
href URL
What the link looks
Hyperlink Reference Name of file to link to
like in the browser
50. Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
<img src="cats.jpg" />
<p class="highlight">My paragraph.</p>
51. Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
<img src="cats.jpg" />
<p class="highlight">My paragraph.</p>
<div id="navigation">My navigation</div>
52. Inline vs. Block
Elements
• Block-level elements begin a new line in the
flow of a page.
• Inline elements stay in the current flow of
the page without breaking a line.
Block Inline
<p> <img>
<h1> <strong>
<table> <em>
<div> <span>
53. Lists
• <ol> : Ordered list, usually with numbers
• <ul> : Unordered list, with bullets
• <li> : List item -- each item in list
• <ul> or <ol> tags wrap a set of <li> tags
61. The <div> tag
• Used to group elements semantically, by
topic
• Useful for layout with CSS
• Will usually have an id or class attribute to
identify it
62. Using <div>
Divs identify
sections of the
document
63. The <span> tag
• Like div, helps organize code
• Inline element
• Used for smaller pieces of code than div
64. The <span> tag
• Like div, helps organize code
• Inline element
• Used for smaller pieces of code than div
<p>Some of <span class="highlight">this
text</span> is not like the other</p>
