MARKING UP WITH HTML

Post on 03-Jan-2016

38 views 2 download

Tags:

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

MARKING UP WITH HTMLMARKING UP WITH HTML

A Hypertext Markup Language A Hypertext Markup Language PrimerPrimer

chapter4

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

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

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

HTML source for HTML source for paradoxes.htmlparadoxes.html

Completed version of Completed version of paradoxes.htmlparadoxes.html

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

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

The HTML for the Thoreau The HTML for the Thoreau pagepage

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

The HTML The HTML for the for the Steinbeck Steinbeck pagepage

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