Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download PowerPt Slides
Document related concepts
no text concepts found
Transcript
c h a p t e r
4
A Hypertext Markup Language
Primer
lawrence snyder
Marking Up with HTML
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Marking Up with XHTML
• XHTML is Extensible Hypertext Markup Language
– Notation for specifying Web page content and formatting
• Hidden tags describe how words on a page should
look
– Called the ―mark up‖, gives font, size, color, bold,
indenting, etc.
• Formatting with Tags:
– Words or abbreviations enclosed in angle brackets < >
– Come in pairs (beginning and end):
• <title> </title>
– Tags are case-sensitive, but the actual text between tags is
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-2
According to The Web Standards Project website:
http://www.webstandards.org/learn/articles/askw3c/oct2003/
“XML syntax rules are far more rigorous than HTML. As a
result, XHTML makes authors work more precisely, having to
address issues such as:
•all elements and attribute names must be in lower case
•all attribute values must be quoted
•non-Empty Elements require a closing tag
•empty elements are terminated using a space and a
trailing slash
•no attribute minimization is allowed
•in strict XHTML, all inline elements must be contained in a
block element”
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Tags for Bold, Italic, and Underline
• Bold:
<b>
</b>
• Italic:
<i>
</i>
• Underline: <u>
</u>
– Tag pair surrounds the text to be formatted
• You can apply more than one kind of formatting at a
time
• <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici!
– Tags can be in any order, but have to be nested correctly
• Some tags do not surround anything, so they don't have
an ending form. Closing angle bracket is replaced by />
– <hr /> inserts a horizontal rule (line)
– <br /> inserts a line break
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-4
A Basic XHTML Web Page
Begins with <html> and ends with </html>
<html xmlns=―http://www.w3.org/1999/xhtml‖>
<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>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-5
Gather Your Tools
• For making Web pages you need two tools
– Web browser (like FireFox)
– Simple text editor (like NotePad)
• We will write XHTML as plain ASCII text (not in
Word or some document processor that
adds information to the content)
• Now use the text editor to make a file
containing the basic XHTML Web page
source (shown previously, you can cut and
paste, or type it)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-6
Displaying the XHTML Source File
• Save this text in a file named something like
―starterPage.html‖
• Open your web browser and have it load in
the file ―starterPage.html‖ and you will see
the basic web page displayed
– ―.html‖ file name extension means you can
double-click the file and it will open in a browser
• Save this basic page as a template, or a
model
– you can use it to start all your future web pages
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-7
Structuring Documents
• Markup language describes how a
document's parts (paragraphs, headings,
etc.) fit together
• Headings:
– Choice of eight levels of heading tags to
produce headings, subheadings, etc.
– Headings display material in large font on a new
line
<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>
produces:
Pope
Cardinal
Archbishop
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-8
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-9
XHTML Format vs. Display Format
• XHTML text was run together on one line, but
displayed on separate lines in the browser
• XHTML source tells the browser how to produce the
formatted image based on the meaning of the tags,
not on how the XHTML source looks
• But XHTML is usually written in a structured (indented)
form to make it easier to understand
<h1>Pope</h1>
<h2>Cardinal</h2>
<h3>Archbishop</h3>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-10
White Space
• White space is inserted in XHTML for
readability
– spaces, tabs, new lines
• Browser turns any white space sequence in
the XHTML source into a single space before
processing the mark up tags
– Exception: Preformatted information between
<pre> and </pre> tags is displayed as it appears
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-11
Brackets in XHTML: The Escape
Symbol
• What if our web page needed to show a math
relationship like
0 < p > r
• The browser would interpret < p > as a paragraph
tag, and would not display it
• To show angle brackets, use escape symbol ( & ),
then an abbreviation, then a semicolon ( ; )
<
>
&
displays as
displays as
displays as
<
>
&
• So the XHTML would be <i>0<p>r</i>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-12
Accent Marks in HTML
• Letters with accent marks use the escape symbol
• Ampersand, then letter, then the name of the
accent mark, then semicolon
&eactue;
ñ
displays as é
displays as ñ
• Other useful special symbols
&mdash
(non-breaking space)
– (em dash)
• Full list: http://www.w3.org/TR/REC-html40/sgml/entities.html
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-13
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-14
Putting it All Together
• With just these few tags we can make an
interesting Web page (see following)
– Title is shown in the browser title bar
– Russell’s paradox is in bold face
– In the XHTML source, the paragraphs are indented
more than the <h2> headers to make them
readable
– The 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
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-15
(Aside) Growing Good XHTML
• Before we go further, let’s discuss getting
your XHTML source files written correctly
(good syntax) and well (good style)
• The slow-n-steady construction strategy
– Start with a good page (like the template we
saved), add tags and content in small amounts,
then save and test (check it in a browser) early
and often
• Grow the code… don’t try to write a
monolith
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-16
(Aside) Markup Validation Service
• To ensures your Web page ―works‖ in all browsers submit
your XHTML file to the W3C Validation Service at
http://validator.w3.org
• Upload the XHTML file, get a report of any errors found
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-17
Marking Links With Anchor Tags
There are two sides of a hyperlink:
•
•
Anchor text (the highlighted text in the current
document… the part you click on)
Hyperlink reference (the URL address of a Web
page the link ―goes to‖, the target of the link)
Begin with <a followed by a space
Give the link reference using href="filename"
Close the start anchor tag with >
Text to be visibly displayed for this link
End anchor tag with </a>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
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.
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
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://www.aw.com/snyder/index.html">FIT</
a>
• Full URL is needed because the page is
remote and the web server needs to be told
exactly where to find it in the file system
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-20
Anchor Tags (cont'd)
• Relative pathnames: Reference pages stored in the
same directory (give only the name of the file) or in a
directory organized near the current
Read <a href="./filename">this file</a>.
• Relative pathnames are more flexible — we 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, then down
.. Parent directory (one level up)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
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 (directories)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-22
Showing Pictures: The Image Tags
• Image Tag Format:
<img src="filename" alt=―description" />
– src short for source
– alt gives text to print when image can’t be
shown (can be used by assistive tools like
audio screen readers too)
– Absolute and relative pathname rules apply
• This tag will cause an image simply to be
displayed on the Web page
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-23
―Clickable‖ Pictures
• Pictures can be used as links by combining
<img> tag with an anchor tag
<a href="fullsize.jpg">
<img src="thumbnail.jpg" /> </a>
• Here, the <img …> picture becomes the
―hot spot‖ for the anchor tag (rather than
text)
– The browser will display the picture
“thumbnail.jpg‖ then allow the user to click on
the picture as a link to the file ―fullsize.jpg‖
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-24
Including Pictures With Image Tags
• GIF and JPEG Images
– GIF: Graphic Interchange Format
• 8 bits (256 colors or levels of gray)
• PNG is a newer form
– JPEG: Joint Photographic Experts Group
• 24 bits (millions of colors, compression levels)
– Tell browser which format image has
using filename extension (.gif, .png, .jpg,
.jpeg)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-25
Attributes in XHTML
• Properties such as text alignment require more
information than we have so far given
– For justification, we specify left, right, or center
• Attributes appear inside the angle brackets of
start tag, after tag word, with equal sign, value in
double quotes.
<p align="center"> (default justification is
left)
• Horizontal rule attributes: width and size
(thickness) can be specified or left to default
<hr width="50%" size="3" />
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-26
Style Attribute
• Perhaps the most useful attribute, controls long list of
properties about the look of a Web page
• Place style attribute inside the tag for the content
you wish to modify
• Style is one attribute, its value (in quotes) can have
many properties in a list (semi-colon separated)
<body style=“background-color: black; color: green>
sets page back color, and text color for the entire body
<h1 style=text-align: center; color: yellow; font-family:
arial”>
affects the h1 header only, sets font, color, justification
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-27
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-28
Attributes for Image Tags
• Displayed image size can be adjusted (no
matter the actual size of the raw image)
<img src=“puffer.jpg” width=“200” height=“200”
/>
Will make an image 200x200 pixels, even if the
file ―puffer.jpg‖ is 2400x2400 pixels (for
example)
• If you leave out one dimension attribute the
browser will display the missing one to match
the same proportions as the original image
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-29
Attributes for Image Tags
Browser will do as told, even to the point of
distorting images (original is 2400x2400 square)
<img src=“puffer.jpg” width=“200” height=“200” />
<img src=“puffer.jpg” width=“200” height=“100” />
<img src=“puffer.jpg” width=“100” height=“200” />
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-30
Positioning the Image on the Page
• Text is laid out from left to right, top to bottom
• By default, images are inserted on a page at the
point in the text layout where the <img> tag is
specified in the HTML, and text lines up with the
bottom of the image
• To make text flow around an image, use the style
attribute in the <img> tag, with value ―float:left‖ or
―float:right‖
• To put image on a separate line, enclose it within
<p> … </p> paragraph tags
• <span> … </span> tags can be used to apply styles
where there is no other tag available
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-31
Applying Style to Improve our Page
• Add links with local path names to our own bios
• Special background and text colors
• Color change on the ―This sentence is false‖
text
• New color styling for the headings
• The horizontal line has been shortened to 75
percent of the browser window width, centered
• Added an image, put it to the right side, and
flowed text around it to the left
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-32
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-33
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-34
Handling Lists
• Unnumbered (bulleted) list:
– <ul> and </ul> tags begin and end the list
– <li> and </il> tags begin and end the items within the list
• Ordered (numbered) list:
– <ol> and </ol> tags begin and end the list
– Uses the same <li> tags
• Sublists: Insert lists within lists (between <li> </li> tags)
• Definitional list:
– <dl> and </dl> tags begin and end the list
– <dt> and </dt> surround the terms to be defined
– <dd> and </dd> surround the definitions (indented)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-35
Example (Nested Lists)
<ol> <li> Hydrogen, H, 1.008, 1 </li>
<li> Helium, He, 4.003, 2 </li>
<ul> <li> good for balloons </li>
<li> makes you talk funny </li> </ul>
<li> Lithium, Li, 6.941, 2 1 </li>
<li> Beryllium, Be, 9.012, 2 2 </li>
</ol>
Gets rendered as (browser indents each list some)
1. Hydrogen, H, 1.008, 1
2. Helium, He, 4.003, 2
• Good for balloons
• Makes you talk funny
3. Lithium, Li, 6.941, 2 1
4. Beryllium, Be, 9.012, 2 2
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-36
Handling Tables
• Tables begin, end with <table>… </table> tags
• Rows enclosed in table row tags, <tr> and </tr>
• Cells of each row are surrounded by table data
tags, <td> and </td>
• Create a caption centered at the top of the table
with <caption> and </caption> tags
• Column headings are created as first row of table
by using <th> and </th> tags instead of table
data tags
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-37
Example Simple Table
<table>
<tr><th>A</th><th>B</th><th>C</th></tr>
<tr><td>Dan</td><td>Jen</td><td>Pat</td></tr>
<tr><td>Mary</td><td>Tim</td><td>Bob</td></tr>
</table>
Will display as:
A
B
C
Dan Jen Pat
Mary Tim Bob
See text for more complex example, with cell
borders
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-38
Controlling Text with Tables
• Tables can control arrangement of
information on a page
• e.g., a series of links listed across the top of
the page could be placed in a one-row
table to keep them together
– Use no borders, you get alignment and order
– If the window is too small to display all the links,
table keeps them in a row and a scroll bar is
added
– If the tags are not in a table, the links will wrap to
the next line instead
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-39
Break – next week continue with CSS
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Cascading Style Sheets (CSS)
• Cascading Style Sheets allow more systematic,
uniform, and general use of the style attribute
throughout a collection of Web pages
• Can define a theme, or common look, for a site
• Suppose we have 25 level-2 headings and we want
them all to be styled like this:
<h2 style=“color:red; font-family:arial”>
• Don’t want to repeat this in all 25 of the <h2 …>
tags, we would rather make a ―global‖ style for
<h2> headers
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-41
Setting Global Style
• Inside <head> tags, make a style that applies to the
whole page, using <style> … </style> tags
<style type=“text/css”>
h2 { color: red; font-family: arial }
</style>
• Another example: tables and elements
<style type=“text/css”>
table{outline-style: solid; outline-color: violet}
th {background-color: purple; font-family: courier}
td {background-color: fuchsia; font-family: arial;
color: white; text-align: center}
</style>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-42
Overriding Style Sheets
• What if we want to have one table cell with
background color ―tan‖ (instead of the global
―fuchsia‖)
• Can still put style attributes in body tags
<td style=“background-color: tan”> Bob </td>
• In style, closest wins
– This ―local‖ style blocks, or hides, the global style and
makes the one cell tan; the others stay fuchsia
colored (as defined globally)
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-43
Adding Class to Style
We can create different style collections, called classes
(here are ―sum‖ and ―fall‖ styles with different colors)
<style type=“text/css”>
table.sum {outline-style: solid; outline-color: lime}
th.sum {background-color: lightgreen; font-family:
courier; color: green}
td.sum {background-color: green; font-family: arial;
color: white; text-align: center}
table.fall {outline-style: solid; outline-color: red}
th.fall {background-color: tan; font-family: courier}
td.fall {background-color: brown; font-family: arial;
color: white; text-align: center}
</style>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-44
Using Style Classes
Now put class names in tags to apply the style selectively
<table class=“sum”>
<tr><th class=“sum”> … etc.
<tr><th class=“fall”> … etc.
Define style class for spanning tag to cut typing
<style type=“text/css”>
table.fall {outline-style: solid; outline-color: red}
tbody.fall {background-color: brown; font-family: arial;
color: white; text-align: center}
th.fall {background-color: orange; font-family: courier}
</style>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-45
Style Files: One Style, Many Pages
• Take the style information out of the page
<head> and make a separate style file
– Create a .css file, like myStyle.css
– Use only the specifications from between the
<style>…</style> tags (and not these tags) and
put these in the style file
– Put a <link> tag to this style file back into the
<head> section of any page needing this style
<link rel=“stylesheet” type=“text/css”
href=“myStyle.css”>
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-46
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-47
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-48
Cascading the Style Sheets
• Five levels of style information, with
precedence
– Default, given by browser settings
– External, from a style file
– Global, in the <head> of one page
– Range, given in an enclosing <tag>
– Site, given by style attribute at one location
• Closest style wins
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-49
Wrap Up: Web Page Authoring
• You have seen the basics of XHTML
• There are other Web notations and fancier
features but they are all <tag> based
• We have seen that we can write XHTML and
CSS files directly, get basic simple pages
• Most Web content is written indirectly with
tools
– WYSIWYG interface, allows building complex
pages, author sees the layout and page look on
the screen
– XHTML for the layout is generated automatically
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-50
Summary
• Web pages are stored and transmitted in an
encoded form before a browser turns them into
screen images; HTML is the most widely used
encoding notation
• We covered a working set of XHTML tags for
creating a basic Web page
• Links are denoted with anchor tags
• Pathnames to denote files are either absolute or
relative; relative pathnames refer to files deeper or
higher (than the file containing the tag) in the
directory hierarchy
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-51
Summary
• The two most common image formatting schemes
are GIF and JPEG; we saw how to specify image
placement on a Web page
• We saw tags for designating tables and lists
• We studied Cascading Style Sheets (CSS), a general
system for specifying a unified formatting style for
Web documents
• WYSIWYG Web authoring tools are programs that
automatically create the XHTML encoding when
the Web page has been laid out visually, in a GUI.
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
4-52
