HyperText Markup Language. Web Hosting Creating a web site (on a site like iPage) –Buy domain name...
22
HyperText Markup Language
-
Upload
jonah-spencer -
Category
Documents
-
view
224 -
download
0
Transcript of HyperText Markup Language. Web Hosting Creating a web site (on a site like iPage) –Buy domain name...
HyperText Markup Language
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
4-3
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
4-4
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
4-5
4-6
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>
4-7
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
4-8
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
4-9
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:
PopeCardinal Archbishop
4-10
4-11
HTML Format vs. Display Format
• Browser ignores how we format the HTML source
• We usually use an indented form though
<h1>Pope</h1>
<h2>Cardinal</h2>
<h3>Archbishop</h3>
4-12
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
4-13
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>
4-14
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
4-15
4-16
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
4-17
4-18
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>
4-19
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.displays as
See the manual please.
4-20
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
4-21
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
4-22
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
