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>
<!--preliminary & other material goes here, including the -->
<title>Page Title Goes Here</title></head><body>
<!-- main visible content of the page goes here -->
</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!)
PopeCardinal 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 pathnamesIf 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 (top-level 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
Recommended
![Η γλʚσσα HTML - sch.gr1epal-trikal.tri.sch.gr/static/html/HTML.pdfημειώσεις HTML / JavaScript Μαρολαʗάκης Μάριος [1] Η γλʚσσα HTML HTML είναι](https://img.dokumen.tips/doc/110x75/5f0298e87e708231d4050e7a/-ff-html-schgr1epal-f-html-javascript-oe.jpg)
