Aside on Conversions
Light Speed
Web Hosting Creating a web site (on a site like iPage) Buy domain name (www.mybiz.com) iPage has registrar (e.g., FastDomain Inc.) register domain name Must provide ANSs for domain (e.g., ns1.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): <title> </title> Tags are not case-sensitive
Tags for Bold, Italic, and Underline Bold: <b> </b> Italic: <i> </i> Underline: <u> </u> <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici! Note nesting Some tags do not surround anything, so they don't have an ending form <hr /> inserts a horizontal rule (line) <br /> inserts a line break
A Basic HTML Web Page Begins with <html> and ends with </html> <html> <head> <!-- Preliminaries go here, including title --> <title> Starter Page </title> </head> <body> <!-- Main visible content of the page goes here --> <p> Hello, World! </p> </body> </html>
Gather Your Tools For making Web pages you need two tools Web browser (like FireFox) Simple text editor (like NotePad) HTML is plain text Create file with contents from last slide
Displaying the HTML Source File Save text in a file like “myPage.html” Open your web browser and use “Open File…” to display “myPage.html” Can also double-click file Use this page as a template
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 <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3> produces: Pope Cardinal Archbishop
HTML Format vs. Display Format Browser ignores how we format the HTML source We usu. use an indented form though <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>
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 <pre> and </pre> tags is displayed as it appears
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 <i> 0 < p > r </i>
Accent Marks in HTML Letters with accent marks use the escape symbol &eactue; displays as é ñ displays as ñ Other useful special symbols (non-breaking space) &mdash – (em dash) Lists on sites like http://www.w3schools.com/tags/ref_entities.asp
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 <h2> 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
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) <a href=“URL”>Anchor Text</a>
Examples of Anchor Tags Bertrand <a href=“http://www.bioz.com/bios/sci/russell.html”> Russell</a> displays as Bertrand Russell See <a href=“http://help.bigCo.com/manual.html”> the manual</a> please. See the manual please.
Anchor Tags (cont'd) Absolute pathnames: Reference pages at other web sites using complete URLs http://server/directory_path/filename <a href="http://cs.millersville.edu/~zoppetti/101/index.html">101 Course Page</a> 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
Anchor Tags (cont'd) Relative pathnames: Reference pages stored in directory relative to current directory Read <a href="./filename">this file</a>. 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 ../subdir/filename . Current directory .. Parent directory
The “../../” part say to go up two levels 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