Chapter 4

Transcript Chapter 4

Chapter 6
Marking Up With (X)HTML:
A Hypertext Markup Language Primer
HTML is HyperText Markup Language
XHTML is EXtensible Hypertext Markup Language
Notation (encoding) for specifying Web page content
and formatting
Web Pages
• Web pages are created, stored, and sent in
encoded form
• A browser converts them to what we see on
the screen
• Hypertext Markup Language (HTML) is the
main language used to define how a Web
page should look
• Features like background color, font, and
layout are specified in HTML
Marking Up with (X)HTML
• Tags describe the parts of a web page and
how it should look
• Formatting with Tags:
– Words or abbreviations enclosed in
angle brackets
< >
– Typically come in pairs (beginning and end):
• <title>
</title>
– HTML Tags not case-sensitive, XHTML tags are
– The actual text between tags displays used case
• Remember: View-->Source or Page Source
HTML ELEMENTS
• <title> is an example of a start or open tag
• </title> is an example of an end or close tag
• The first “word” or token in between the
brackets is usually called an element.
• Elements define the tag – that is they
indicate the basic purpose of the tag.
• Elements can be followed by attributes.
• Attributes specify various details or
properties of the tag – they change the effect
or display of the tag and its contents.
Basic (X)HTML Web Page File
Four Required Structural tags and comments:
<html xmlns=“http://www.w3.org/1999/xhtml” >
<head>

<title>Page Title Goes Here</title>
</head>
<body>

</body>
</html>
Gather Your Tools
• For making Web pages you need 2 tools:
– Web browser (like IE, Safari, or FireFox)
– Simple text editor (like TextPad or NotePad)
• We will write (X)HTML as plain ASCII text (not
in Word or other word-processor!)
• Make a file with the basic (X)HTML Web page
source shown previously. Test it!
• Save this text in a file named something like
“SkeletonPage.html”
• This basic page is a template, or a model: you
can use it to start future web pages.
Growing Good XHTML
• How to get your (X)HTML source files written
correctly (good syntax) and well (good style)?
• The slow-n-steady construction strategy:
– Start with a good, working page (like the template
we saved), add tags and content in small amounts,
then save and test (check in a browser) early and
often.
• Compose-and-Check. Error? Check recent changes.
• Use Editor and Browser: Save, Check, Repeat.
• Use <!– Comments --> liberally!
• Online Validation Service (currently optional)
4-9
Tags for Bold and Italic
• Bold:
<b>
</b>
• Italic:
<i>
</i>
• 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. In HTML they may
work without a separate closing tag. XHTML self-closes.
– <hr> inserts horizontal line Use XHTML version: <hr />
– <br> inserts a line break
Use XHTML version: <br />
Singleton Tags
• A few tags are not paired
• They do not have a matching ending tag
• For those tags, the closing angle bracket >
of the singleton tag is replaced by />
• Examples:
<hr /> produces a horizontal line
<br /> “breaks” the text to the next line
• Many more tags: book, labs, lookup online.
• www.w3schools.com/tags/default.asp
Structuring Documents
• Markup language describes how a
document's parts fit together
• Headings (look and meaning):
– Choice of six levels of heading tags to produce
headings, subheadings, etc. (A hierarchy!)
– Headings display material in a large font on a
new line. (X) HTML like the following:
<h1>Pope</h1><h2>Cardinal</h2><h3>Archbishop</h3>
produces: (A hierarchy!)
Pope
Cardinal
Archbishop
(X)HTML Code vs. Display Format
• (X)HTML text was run together on one line, but
displayed formatted on separate lines
• (X)HTML source tells the browser how to produce
the formatted page based on the meaning of the
tags, not on how the source code looks
• But (X)HTML should still be written in a structured
(indented) way to make it easier for people to read,
understand, and edit. Use spacing and indenting.
<h1>Pope</h1>
<h2>Cardinal</h2>
<h3>Archbishop</h3>
White Space
• Space that has been inserted for readability
– Spaces
– Tabs
– New lines ([Return], [Enter] key, etc.)
• Browser turns any sequence of white space
characters into a single space before
processing the (X)HTML source
– Exception: Preformatted information
between <pre> and </pre> tags is
displayed as it appears in the source
Brackets in (X)HTML: 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
— ampersand (&) — then an abbreviation (or
numeric code), then a semicolon (;)
< displays as
<
Special Characters
• <
<
• >
>
• &
&
•  
(non-breaking space)
• &mdash
– (em dash)
•
and many more.
• Full list at:
http://www.w3.org/TR/REC-html40/sgml/entities.html
16
Accent Marks in (X)HTML
• Letters with accent marks use the escape
symbol as well. Case matters!
• Ampersand, then letter, then the name of the
accent mark (or code), then a semicolon:
é
ñ
displays as é
displays as ñ
• Full list at
http://www.w3.org/TR/REC-html40/sgml/entities.html
Example Accent Marks in (X)HTML
Putting it All Together
• With just these few tags we can make an interesting
Web page (see following slide)
– Title is shown in the browser title bar
– Russell’s paradox is in bold face
– In the (X)HTML source, paragraphs are indented
more than <h2> headers for readability
– 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
Attributes in (X)HTML
• Properties such as text alignment require more
information than so far given. For example:
– Justification, can specify left, right, or center
• Attributes appear inside the angle brackets of a start
tag (after the element word), followed by an equal
sign, and a value in double quotes:
<p align="center"> (default justification is left)
• Another example: Horizontal rule attributes width and
size (thickness) can be specified or left to default:
<hr width="50%" size="3" />
Marking Links With Anchor Tags
•
There are two sides of a hyperlink:
1. Anchor text (the text in the current document
that is highlighted. What you click.)
2. Hyperlink reference (the location, address or
URL of the other Web page)
•
Begin with <a followed by a space
•
Give the link reference using href="filename"
•
Close the start anchor tag with >
–
•
Then type the text to be displayed for this link
End the hyperlink with </a> tag
Anchor Tags: Path to files
• Absolute pathnames: Reference pages at
other web sites using complete URLs:
http://server/directory_path/filename
• Relative pathnames: Reference pages
stored in same directory (then only the name
of the file), or in the local directory structure.
– Relative pathnames are more flexible:
we can move web files around as a group
– Relative pathnames can specify a path
deeper or higher in the directory structure:
File directories and relative pathnames
If we are at file bios/sci/russell.html
then the source file for Magritte can be designated with the relative
path :
../../art/magritte.html
./subdir/filename
../subdir/filename
.
..
Current directory
Parent directory
More Details
During Lab!
Including Pictures With Image Tags
• Image Tag Format:
<img src="filename" alt= "description" />
– src stands for source. -- alt is alternate text
– Absolute and relative pathname rules apply
• alt value specifies an alternate text description
• GIF and JPEG Images
– GIF:
Graphic Interchange Format
– JPEG: Joint Photographic Experts Group
– PNG:
Portable Network Graphics
– Tell browser which format image is in using
filename extension (.gif, .jpg or .jpeg, .png)
“Clickable” Pictures
• Pictures can be used as links by combining the
<img> tag with an anchor tag
<a href="fullsize.jpg">
<img src="thumbnail.jpg" /> </a>
• Here, the <img …> picture becomes the
clickable “hot spot” for the anchor tag (instead
of 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”
Attributes for Image Tags
• The displayed image size can be adjusted (despite the
actual size of the raw image)
<img src=“puffer.jpg” width=“200” height=“200” />
Will make an image 200 x 200 pixels, even if the file
“puffer.jpg” is 2400 x 2400 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. (Algebra! Or test and check.)
• However, the Browser will do as told, even to the point of
distorting images. Some more examples:
<img src=“puffer.jpg” width=“200” height=“100” />
<img src=“puffer.jpg” width=“100” height=“200” />
Browser will do as told, even to the point of
distorting images (original is 2400x2400 square):
Positioning an Image in the Document
• Text is laid out from left to right, top to bottom
• By default, images are inserted at the point in the text
layout where the <img> tag is specified in the HTML,
and the text lines up with the bottom of the image
• In (X)HTML to make text flow around an image, use
the style attribute in the <img> tag, with the value
“float:left” or “float:right” (Compare with WP)
• HTML : Align attribute can line up image with top of
line of text, middle, or bottom. Align left, center, or
right attribute puts the image on the side of the
browser window, and text flows around it.
• To put image on separate line, enclose it within <p> …
</p> paragraph tags
Style Attribute
• Perhaps the most useful attribute, controls long list of
properties about the look of a Web page
• Place style= inside the tag for content to modify
• <span> … </span> tags can be used to apply styles
where no other tag is appropriate.
• 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
Handling Color (HTML)
• Color is used for both background and text
– NOTE: Purple is a tricky choice for background
color - visited links may then be hidden!
• bgcolor attribute (deprecated) of body tag
gives solid background color. Use style.
– Use hexadecimal color numbers or
– Use predefined color terms
• color attribute can be used with body text, link,
or font tags. Better – use style attribute.
• http://en.wikipedia.org/wiki/HTML_colors
Applying Style to Improve our Page
• Add links with (local) path names to local 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
• Advanced style: Use Cascading Style Sheets
– To be covered if there is time.
– See book, online, CS Web courses and Minor
Handling Lists
• Unnumbered (bulleted) list:
– <ul> and </ul> tags begin and end the list
– <li> and </li> 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> tag
• 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
Handling Tables
• Table begins and ends with <table> and
</table> tags. Has a border attribute.
• A “2-dimensional” list
• Rows are enclosed in table row tags, <tr> and </tr>
• Cells of each row are surrounded by table data tags,
<td> and </td>. The browser aligns cells to form
columns.
• 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
How Is Information Organized?
• Hierarchical classification. Intuitive (?)
– Example: Family Tree
• Information is grouped into a small number of
categories, each of which is easily described (toplevel classification)
• Information in each category is divided into
subcategories (second-level classifications), then
third-level classifications, and so on
• Eventually the classifications become small
enough for you to look through the whole category
to find the information you need
Design of Hierarchies
• General rules for design and terminology of
hierarchies:
– Root is usually at the top
– "Going up in the hierarchy" means classifications
becomes more inclusive or general
– "Going down in the hierarchy" means the
classifications become more specific
– The greater-than (>) symbol is a common
way to show going down through levels
of classification. Straight lines used in diagrams.
– Example Path: Home > Music > Browse Artists >
C > Cave Singers
Levels in a Hierarchy
• A one-level hierarchy has only one level of
"branching"—no subdirectories
• To count levels, remember
– There is always a root
– There are always "leaves"— the items themselves
– The root and leaves usually do not count as levels
• Groupings may overlap (one item can appear in
more than one category), or be partitioned (every
category appears only once)
• Number of levels may differ by category, even in the
same hierarchical tree
How Are Web Sites Organized?
• Homepage is the top-level classification for the
whole Web site (index.html)
• Can a web site have multiple home pages?
• Classifications are the roots of hierarchies that
organize large volumes of similar types of
information
• Topic clusters are sets of related links (for
example: navigation links)
• Single links connect to very specialized pages

Chapter 4

Transcript Chapter 4

Directory