Download Html

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Document related concepts

Cascading Style Sheets wikipedia, lookup

URL shortening wikipedia, lookup

URL redirection wikipedia, lookup

Transcript
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>
<!-- 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-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 ( & )
&lt;
&gt;
&amp;
displays as
displays as
displays as
<
>
&
• So the HTML would be
<i> 0 &lt; p &gt; r
</i>
4-13
Accent Marks in HTML
• Letters with accent marks use the escape symbol
&eactue;
&ntilde;
displays as é
displays as ñ
• Other useful special symbols
&nbsp;
&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