MARKING UP WITH HTML

12
MARKING UP WITH HTML MARKING UP WITH HTML A Hypertext Markup A Hypertext Markup Language Primer Language Primer chapter4

description

chapter 4. MARKING UP WITH HTML. A Hypertext Markup Language Primer. HTML Summary. HTML tag’s meaning, not their form give the form of Web pages, … white space is ignored Tags mostly come in pairs; use lower case. Start tag End tag Meaning - PowerPoint PPT Presentation

Transcript of MARKING UP WITH HTML

Page 1: MARKING UP WITH HTML

MARKING UP WITH HTMLMARKING UP WITH HTML

A Hypertext Markup Language A Hypertext Markup Language PrimerPrimer

chapter4

Page 2: MARKING UP WITH HTML

HTML SummaryHTML Summary HTML tag’s meaning, not their form give HTML tag’s meaning, not their form give

the form of Web pages, … white space the form of Web pages, … white space is ignoredis ignored

Tags mostly come in pairs; use lower Tags mostly come in pairs; use lower casecase Start tag End tag Meaning

<html> </html> Surround document<title> </title> Contents of title bar<head> </head> Preliminary material<body> </body> Surrounds main content<p> </p> Surrounds paragraphs<h1>… </h1>… Headings up to 8<b> </b> Bold<i> </i> Italic<a href='fn'> </a> Anchor reference for link<img src='fn'> Image source reference<br> Break

Page 3: MARKING UP WITH HTML

The Web page resulting from The Web page resulting from interpreting the file interpreting the file paradoxes.htmlparadoxes.html by a by a browserbrowser

Page 4: MARKING UP WITH HTML

Pathnames for Anchor and Image Pathnames for Anchor and Image TagsTags

Two kinds of pathsTwo kinds of paths– Absolute: <a Absolute: <a

href='http://www.moma.org/index.htm'>href='http://www.moma.org/index.htm'>– Relative: <a href='magrittebio.html'>Relative: <a href='magrittebio.html'>

Path names can refer to files atPath names can refer to files at– Same level, <a href='mirobio.html'>Same level, <a href='mirobio.html'>– Deeper levels, <a Deeper levels, <a

href='artists/20thC/mirobio.html'>href='artists/20thC/mirobio.html'>– Higher levels, <a href='../../catalog.html'>Higher levels, <a href='../../catalog.html'>

Use relative paths for files on same site as the pageUse relative paths for files on same site as the page

Page 5: MARKING UP WITH HTML

HTML source for HTML source for paradoxes.htmlparadoxes.html

Page 6: MARKING UP WITH HTML

Completed version of Completed version of paradoxes.htmlparadoxes.html

Page 7: MARKING UP WITH HTML

The HTML The HTML source for the source for the completed Web completed Web pagepage

Page 8: MARKING UP WITH HTML

A Web page with links as textA Web page with links as text

Page 9: MARKING UP WITH HTML

The HTML for the Thoreau The HTML for the Thoreau pagepage

Page 10: MARKING UP WITH HTML

A page with the links organized as a A page with the links organized as a tabletable

Page 11: MARKING UP WITH HTML

The HTML The HTML for the for the Steinbeck Steinbeck pagepage

Page 12: MARKING UP WITH HTML

A comparison of the Thoreau and Steinbeck A comparison of the Thoreau and Steinbeck pagespages