SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
17.
Tags
<p>Lorem <strong><em>ipsum dolor</em></strong>
sit amet, consectetur elit.</p>
• Tags that open must close
• First one in, last one out
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
20.
The Skeletal System
Every page should have these tags:
• <html>
• <head>
• <title>
• <body>
29.
Doctype
• Tells the browser which version of HTML to
use.
• In HTML 5, the doctype line is short:
<!DOCTYPE HTML>
30.
Head
• Provides information that isn't displayed in
the body
• CSS and Javascript instructions are included
here
31.
Title
• Inside the <head> tag
• Titles the browser window
32.
Body
• Everything to be displayed in the browser
• Most of the HTML goes here
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
43.
Exercise
Create a new HTML page and link to it from your first
page.
44.
Images
<img>
Closing Slash
src URL
Tag opens and closes
Image Source Name of image file
in the same tag
45.
Images
<img>
<img src="cats.jpg" />
Closing Slash
src URL
Tag opens and closes
Image Source Name of image file
in the same tag
47.
Attributes
Extra information inside a tag, as in <a> and <img>
48.
Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
49.
Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
<img src="cats.jpg" />
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>
65.
Exercise
Add sections to your HTML document using div tags
with id attributes