Lecture 5 A Hypertext Markup Language Primer

Lecture 5 A Hypertext Markup Language Primer

Aside on Conversions •

Light Speed •

Web Hosting • Creating a web site (on a site like i. Page) – Buy domain name (www. mybiz. com) – i. Page has registrar (e. g. , Fast. Domain Inc. ) register domain name • Must provide ANSs for domain (e. g. , ns 1. ipage. com) – Upload content into your home directory • E. g. , /home/users/jdoe – Point domain name to your home directory

Marking Up with HTML • HTML is Hypertext Markup Language – Notation for specifying Web page content and formatting • Hidden tags (mark up) describe how words on a page should look • Formatting with Tags – Words or abbreviations enclosed in angle brackets < > – Come in pairs (beginning and end): • – Tags are not case-sensitive 4 -5

Tags for Bold, Italic, and Underline • Bold: • Italic: • Underline: • Veni, Vidi, Vici! produces: Veni, Vidi, Vici! – Note nesting • Some tags do not surround anything, so they don't have an ending form –

4 -7

A Basic HTML Web Page Begins with and ends with

Hello, World!

Gather Your Tools • For making Web pages you need two tools – Web browser (like Fire. Fox) – Simple text editor (like Note. Pad) • HTML is plain text • Create file with contents from last slide 4 -9

Displaying the HTML Source File • Save text in a file like “my. Page. html” • Open your web browser and use “Open File…” to display “my. Page. html” – Can also double-click file • Use this page as a template 4 -10

Structuring Documents • Markup language describes how a document's parts fit together • Headings – Eight levels of heading tags – Headings display material in large font on a new line Pope Cardinal Archbishop produces: Pope Cardinal Archbishop 4 -11

4 -12

HTML Format vs. Display Format • Browser ignores how we format the HTML source • We usu. use an indented form though Pope Cardinal Archbishop 4 -13

White Space • We use white space in HTML for readability – spaces, tabs, new lines • Browser turns any white space sequence in the HTML source into a single space – Exception: Preformatted information between

 and 

Brackets in HTML: The Escape Symbol • What if our web page needed to show a math relationship like 0 < p > r • Browser would interpret < p > as a paragraph tag • Need an escape symbol ( & ) < > & displays as < displays as > displays as & • So the HTML would be 0 < p > r 4 -15

Accent Marks in HTML • Letters with accent marks use the escape symbol &eactue; ñ displays as é displays as ñ • Other useful special symbols   &mdash (non-breaking space) – (em dash) • Lists on sites like http: //www. w 3 schools. com/tags/ref_entities. asp 4 -16

4 -17

Putting it All Together • With just these few tags we can make an interesting Web page – Title is shown in the browser title bar – Russell’s paradox is in bold face – In HTML source, the paragraphs are indented more than the headers to make them readable – Horizontal line between the two paragraphs spans the width of the browser window – An acute accent appears in Magritte’s first name – French phrase is in italics, as is the word picture 4 -18

4 -19

Marking Links With Anchor Tags There are two sides of a hyperlink • Anchor text (highlighted, clickable text in the current document) • Hyperlink reference (the target URL address) Anchor Text 4 -20

Examples of Anchor Tags Bertrand Russell displays as Bertrand Russell See the manual please. displays as See the manual please. 4 -21

Anchor Tags (cont'd) • Absolute pathnames: Reference pages at other web sites using complete URLs http: //server/directory_path/filename 101 Course Page • Full URL is needed because the page is remote and the web server needs to be told where to find it in the file system 4 -22

Anchor Tags (cont'd) • Relative pathnames: Reference pages stored in directory relative to current directory Read this file. • Relative pathnames are more flexible – Can move web files around as a group • Relative pathnames can also specify a path deeper or higher in the directory structure. /subdir/filename . Current directory. . Parent directory 4 -23

If we are at file bios/sci/russell. html then the source file for Magritte can be designated with relative path. . /art/magritte. html The “. . /” part say to go up two levels 4 -24