Html

Transcript Html

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
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-3
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-4
4-5
A Basic HTML Web Page
Begins with <html> and ends with </html>
<html>
<head>

<title> Starter Page </title>
</head>
<body>

<p> Hello, World! </p>
</body>
</html>
4-6
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-7
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-8
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
4-9
4-10
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-11
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-12
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-13
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.w3schools.com/tags/ref_entities.asp
4-14
4-15
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-16
4-17
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-18
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-19
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.h
tml">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-20
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-21
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-22

Html

Transcript Html

Directory