© 2004, robert k. moniot chapter 4 introduction to html

© 2004, Robert K. Moniot

Chapter 4

Introduction to HTML


HTML

• Hyper-Text Markup Language: the foundation of the World-Wide Web

• Design goals:– Platform independence: pages can be viewed using a variety of

different computers and browsers.– Universality: servers can store information in their own data

formats, but convert it to HTML for access by browsers.– Convenient linking from one page to another (hypertext).– HTML conveys the structure of the document, not its precise

appearance.

• Openness (not proprietary) was key to the adoption of HTML and growth of the Web


Basic form of HTML

• An HTML document is all plain text (no binary formatting codes). The contents can be divided into two categories:– Content: material which the user sees when visiting the page– Meta-information: information about the document: its structure,

formatting, etc.

• Meta-information is distinguished from content by using tags. A tag is a tag-name enclosed in angle brackets. Tags usually come in pairs: an opening tag and a closing tag, which is the same tag-name preceded by a slash.

<tag-name>Content affected by tag</tag-name>


Nesting of tags

• Opening and closing tags define regions affected by the tags. These regions must nest, not overlap.

Yes:

<tag1>Some text <tag2>more text</tag2> and more.</tag1>

No:

<tag1>Some text <tag2>more text</tag1> and more.</tag2>


Rules about Tags

• Not all tags need closing tag – For some tags, a closing tag is optional:

<P> paragraph. Implies closing of previous paragraph tag.– For some tags, a closing tag is never used:

<BR> line break. Marks a location, not a region.• Tag names are case-insensitive

<br> and <BR> and <Br> are all equivalent

• Unknown tags are ignored. This rule allows new tags to be introduced without causing problems for older browsers. But it also means you need to be careful to spell tag names correctly!


Tags with attributes

• Some tags can be qualified by attributes that provide needed additional information or change the default properties of the tag.

• Attributes are specified within the angle brackets following the opening tag name. (Attributes are never listed in a closing tag.)

<tag-name attribute="value" attribute="value">Content text </tag-name>


Tags for Document Structure

• Some tags specify the overall structure of the document

<html> ... </html> encloses the entire document

<head> ... </head> encloses the head portion of the document. Everything in the head portion is meta-information, not content.

<body> ... </body> encloses the body portion of the document. The body portion contains the document's content.

Example 1 (ignore the other tags for now)


Tags for Document Head

<title>Document title</title> - Specifies the title that appears in the title-bar of the browser (not in the content area). This tag is optional but should always be included to assist the user in navigating the browser's history list.

<meta name="keywords" content="word, phrase, etc"> - Specifies keywords to assist indexing of the page by search engines.

Other head tags will be discussed later.


Tags for Document Body

• Heading tags<h1>Main heading</h1> - Formats the enclosed text as a

prominent large, bold heading.

<h2>Sub-heading</h2> - Formats the enclosed text as a large, bold heading but not as prominent as for <h1>.

<h3>Sub-sub heading</h3> - Formats the enclosed text as an even less prominent heading.

... (levels 4 and 5 of decreasing prominence)

<h6>Minor heading</h6> - Formats the enclosed text as a minor heading, only slightly more prominent than ordinary text.

Example 1


Tags for Style

• Explicit style tags<b>Boldfaced text</b><i>Italicized text</i><u>Underlined text</u><tt>Typewriter-font text</tt>

• Logical style tags<strong>Prominent text</strong> - usually bold

<em>Emphasized text</em> - usually italics

<cite>Cited text</cite> - usually italicized

<code>Computer code</code> - usually in typewriter font

Example 2


Tags for Style

• The <font> tag.– In the early days of web design, this tag was introduced to allow

the web programmer to control the font family, typeface, color, etc.

– This tag is now deprecated. Style sheets provide much better control over style and compatibility. However, many web pages still use this tag for simple effects such as text size and color.

Example:

<font size="+1" color="red">Large, red text</font>


Special characters

• Some characters such as angle brackets are reserved for special meanings in HTML. Others are not available on many keyboards. These characters can be put into content using codes between ampersand and semicolon:< - the less-than symbol < (left angle bracket)

> - the greater-than symbol > (right angle bracket)

& - the ampersand sign &© - the copyright symbol ©

• Many more are defined. Note that unlike tags, these codes are case-sensitive.


Organizational Tags• Paragraphs and Layout

<p> - start of a new paragraph. The closing </p> tag is optional but recommended, especially if the tag contains attributes.

<br> - line break. Use this where the extra line spacing of a paragraph tag is not desirable, as in an address. Never takes a closing tag.

<center>Centered text</center> - changes the justification of the enclosed text (normally left-justified) to centered.

<blockquote>Quoted text</blockquote> - for large blocks of quoted material.

<pre>Preformatted text</pre> - use this to present a block of text exactly as typed in the document, for instance to show an interactive session with a computer.

Example 3


Hypertext Links

• Hypertext links connect one document to another. A link has two components: the link text, which the user sees to click on, and the link target, which is the location to which the browser is directed when the link is clicked.

• Form of a hypertext link:

<a href="target.html">link text</a>


Hypertext Links

• The link target, or href (hypertext reference) is in the form of a URL: Uniform Resource Locator.

• A URL has 3 components, not all of which need to be supplied in every reference:– A protocol– An Internet address (either name or IP number)– A file path

Example:

http://www.fordham.edu/current/index.html


URL protocol

• The protocol portion of a URL specifies the way that the web browser will interact with the server to obtain the resource. Protocols supported by most browsers include:http - Hypertext Transport Protocol (the default)

https - Secure HTTP (used to exchange confidential information such as credit card numbers)

ftp - File Transfer Protocol, used on some servers that host downloadable materials

file - for URLs that are files on the same computer where the browser is running


URL address

• The Internet address portion of a URL can be either a name, e.g. www.fordham.edu, or a number, e.g. 150.108.13.113

• If omitted, the address of the URL in the href is taken to be the same as the address in the URL of the document containing the link. Thus if the address is omitted from a link in a web page, the link refers to a document on the same server that served that page.

• A URL without an address portion can be either absolute or relative, as explained next.

http://www.fordham.edu/

http://150.108.13.113/


URL file path

• The file path portion of a URL optionally specifies the chain of directories (folders) in which the document is located, and the name of the file itself. The directory names in the chain are separated by slash characters.

• If the file name portion of the path is omitted, then it defaults to a value that is defined by the server, typically index.html.

Example: the URL

http://www.myplace.com/shopping/fruit/

lacks a file name, and so it might be equivalent to

http://www.myplace.com/shopping/fruit/index.html


Relative URLs

• If a URL omits the Internet address portion, then the file path portion can be either relative or absolute.

• An absolute file path begins with a slash; a relative one does not.

• In both cases, the Internet address portion is supplied by that of the referencing document.

• For a relative reference, the chain of directories is also supplied by that of the referencing document.

<a href="/somepage.html">Absolute link</a>

<a href="somepage.html">Relative link</a>


Relative URLs

• A relative file path can also specify directories. In this case the chain starts in the same directory as the referencing page.

• Use ../ to indicate the parent directory.

Link referencing a file in a subdirectory of the current page's directory

<a href="assets/somepage.html">Relative link</a>

Link referencing a file in a sibling directory of the current page's directory

<a href="../assets/somepage.html">Relative link</a>


Absolute URLs

• In an absolute file path, the chain of directories starts at the top of the “URL space” of the server.

Absolute link referencing a file in the shopping directory of the top level of the web server containing the referencing page

<a href="/shopping/somepage.html">Absolute link</a>

Absolute link referencing the top-level home page of a specified server

<a href=http://www.somehost.com/>Absolute link</a>


Images

• Use the <img> tag to include an image in a page. This tag allows some attributes that specify the size of the image, and alternative text that can be used in place of the image.

• The tag must include a src attribute specifying a URL that gives the location of the image.

Example:

<img src="myface.jpg" height="256" width="300" alt="Picture of me">


Images

• The image size specification via length and width attributes of the <img> tag can be used to resize the image, but this is not recommended. Rather, the best use of these attributes is to tell the browser how big the image is, so that it can allow the right amount of space in the rendering of the page before it has downloaded the image.

• The alternative text given by alt can be displayed by the browser while the image is loading or by browsers that suppress images. Some browsers will pop up a balloon with this text when the mouse hovers over the image. This text can also be read aloud by browsers designed for the blind.


Lists• List types:

– <ol> - Ordered list: each item is numbered. Use the type attribute to obtain letters or roman numerals: the value of the attribute is simply what the item label should look like. Possibilities for type are 1, a, A, i, I

– <ul> - Unordered list: each item is marked with a bullet.– <dl> - Definition list: the head of each item is a word or phrase,

and the rest is a description.

• For <ol> and <ul>, list items are started by <li> (closing tag optional).

• For <dl>, the head word is marked by <dt> and the description by <dd> (closing tags optional).

Example 4

Other HTML tags

• Superscripts and subscripts: enclose text in <sup>...</sup> or <sub>...</sub> tags.

• Horizontal rule (line): use <hr>. It always appears on a line by itself. This tag takes an optional attribute width such as <hr width="50%"> to control how far across the page it extends.

• Strikethrough text: enclose in <del>...</del> tags.• Comments: these consist of any text enclosed within . Their purpose is to enlighten the web programmer reading the HTML. They do not appear in the rendered page. Example 5

© 2004, robert k. moniot chapter 4 introduction to html

Documents

moniot tags

tag slide

head tags

closing tag

new tags

moniot nesting of tags

opening tag

html document