Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS.
22
Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS
-
date post
19-Dec-2015 -
Category
Documents
-
view
219 -
download
2
Transcript of Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS.
Beginning Web Site Creation: Dreamweaver CS4
Noreen Brown
XHTML CODING -- TAGS
They come in matching pairs (mostly)
Open Close<html> </html><head> </head><body> </body><title> </title><br /><hr />
<html><head>Put header information
here</head><body>Put the contents of
your web page here</body></html>
XHTML = Tags
Like this
A few rules . . . XHTMLAll lowercaseMost of them are “paired”
<p> </p>Empty tags need a space and a /
Good = XHTML <br />Bad = html <br>
Attributes need “ “Good = XHTML <p alignment = “center”>Bad = html <p alignment = center>
Doctype declaration
Behind the scenes
Let’s get started
Center stage!
Behind the scenes
Add more text
It all squishes together!
Behind the scenes
Divide it up
Better
<p> </p> Paragraph
Behind the scenes
Better still
Better
<br /> Line break
SPECIAL CHARACTERS
What if you want <body> or <p> to show up on your web page?
• <body>• <p>
Behind the scenes
Alignment?
Center stage!
<p align=“right”> </p> alignment goes into the first <p> tag.
Behind the scenes
One more thing
Better
<hr /> Horizontal line
Behind the scenes
Fun with Headings!
OK, this is annoying . . .
Behind the scenes
Fun with Headings!
Much better!
Ooops, no such thing as H7!
Behind the scenes
Ordered lists
Center stage!
Behind the scenes
Unordered lists
Center stage!
Behind the scenes
Definition lists
Center stage!
Behind the scenes
Format Text - Logical
Center stage!
<strong> </strong><em> </em>
Behind the scenes
Format Text - Nested
Center stage!
Format Text - NestedGood
<strong><em>HELP!</em></strong>
Bad<strong><em>HELP! </strong></em>
Behind the scenes
Links - Absolute
Center stage!
Anchor tag <a> </a>
Anchor tag with a web address <a “href=http://www.pcc.edu”> </a>
Behind the scenes
Links - Relative
Center stage!
Anchor tag <a> </a>
Anchor tag with a file name <a href="http://www.pcc.edu/"> pcc </a>
Behind the scenes
Sort of like a relative link . . . Images
Center stage!
Image tag <img />
Image tag with a file name <img src="coffee-art.jpg" />
Behind the scenes
Alt Text
Center stage!
Alt text
<img src="coffee-art.jpg" alt="Lovely coffee!" />
