Post on 25-Feb-2016
description
Beginning Web Site Creation: Dreamweaver CS4Noreen 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 = TagsLike 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 startedCenter stage!
Behind the scenes
Add more textIt all squishes together!
Behind the scenes
Divide it upBetter
<p> </p> Paragraph
Behind the scenes
Better stillBetter
<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 thingBetter
<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 listsCenter stage!
Behind the scenes
Unordered listsCenter stage!
Behind the scenes
Definition listsCenter stage!
Behind the scenes
Format Text - LogicalCenter stage!
<strong> </strong><em> </em>
Behind the scenes
Format Text - NestedCenter stage!
Format Text - NestedGood
<strong><em>HELP!</em></strong>
Bad<strong><em>HELP! </strong></em>
Behind the scenes
Links - AbsoluteCenter stage!
Anchor tag <a> </a>
Anchor tag with a web address <a “href=http://www.pcc.edu”> </a>
Behind the scenes
Links - RelativeCenter 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 . . . ImagesCenter stage!
Image tag <img />
Image tag with a file name <img src="coffee-art.jpg" />
Behind the scenes
Alt TextCenter stage!
Alt text
<img src="coffee-art.jpg" alt="Lovely coffee!" />