ITCS373: Internet Technology HTML. What is HTML? HTML stands for HyperText Markup Language. HTML is...

ITCS373: Internet Technology

HTML

What is HTML?

HTML stands for HyperText Markup Language. HTML is a method of describing the format of

documents - it is a text presentation language. HTML is not : a programming language, data modelling

language, or complicated. HTML does not attempt to describe the structure of the

information within Web pages - this is done using higher-level notations such as XML.

HTML pages can be simple text or complex multimedia. An HTML file is a text document containing mark-up

tags. Content text is displayed; the formatting tags are not. These tags tell the Web browser how to display the

page. HTML files must have .htm or .html file extensions.

HTML Tags All commands that specify the layout of our Web pages are

provided in the form of elements, or tags, which are embedded between the textual parts of our HTML files.

HTML element names are surrounded by angle bracket characters ( < and > ).

HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag. The second tag is the end

tag . Within the angle brackets of the start tag might be extra

parameters [or attributes].For instance, <font size="12">.

HTML element names are not case sensitive. <b> means the same as <B>.

Comments may be included in a file, to aid human readability while it is being created or edited:

HTML is largely free-format; start tags and end tags may be scattered anywhere within the text, although they are most typically found at the beginning or ends of the rows of HTML.

Indentation also aids readability.

HTML Document Structure

Think of an HTML document as a collection of nested pieces of infor mation, rather

like the nested structure of a C program. Ever y HTML document comprises just a single outer element - the

<html> tag. This indicates that the content of this file is HTML. All the text and other HTML commands that make up this Web page

should go between the beginning and ending <html> tags :<html>

<head><title> Welcome to my homepage</title>

</head><body> This is my first attempt to create a Web page.</body>

</html>

The <head> tag indicates that the content between its opening and closing tags is the prologue to the rest of the text.

The <body> tag encapsulates the remainder of the HTML page:

The <title> tag may also be included in a simple prologue; it specifies the title of the HTML page. The title must be short and just contain plain text.

- The title must be placed between the <head> tags pair.

Text Formatting One of the main purposes of HTML is to for mat text. Many

different tags are provided to do this. Common ones include: Headings: <h1>, <h2>, <h3> through to <h6> Fonts:

<i> Italic<b> bold<u> Underline<big> Enlarged font<sub> Subscript<sup> Superscript

Font size: <font size="14">. Paragraphs: <p> Line breaks: <br>. The <nobr>...</nobr> element is the opposite of the <br>

tag. It is used to keep words or phrases together without word-wrap.

Basic Features

<body bgcolor=“00000000” bgsound=“ “

Background=“you can put an image in the background” >

<font face=“font type” color=“font color” size=“ size”>

<Body link=“ link color”>

<Body vlink=“ .. “> visited link color

<body alink= “ “>active link color

Another Example - 1

<html><head>

<title> Welcome to my homepage </title></head><body>

<h1> This is my first attempt to create a Web page.</h1><br><p><font size=4> This paragraph shows various styles: <b>bold</b>, <i>italic</i>,

<sup>superscript</sup>, <u>underlined.</u></font>

</body></html>

HTML Lists

Within an overall <ol>...</ol> or <ul>...</ul> tag pair, lists of items, surrounded by <li>...</li> may be supplied. These are listed with numbered or bulleted markers, respectively.

<html> <body><h1> This is another attempt to create a Web page. </h1><br> <br><h2> An ordered list </h2><ol> <li> Coffee </li> <li> Tea </li></ol><br><h2>An unordered list</h2><ul> <li> Milk </li> <li> Orange Juice </li></ul></body> </html>

Nested List Example <html> <body> <h1> Nested List Example </h1> <br> <br> <h2> An ordered list </h2> <ol type="i"> <li> Coffee <ul> <li> Milk </li> <li> Orange Juice </li> </ul> </li> <li> Tea <ol type="A"> <li> Milk </li> <li> Orange Juice <ul type="square"> <li> Milk </li> <li> Orange Juice </li> </ul> </li> </ol> </li> </ol> </body> </html>

Hyper text Links

Links may be embedded anywhere in an HTML document.

Links may contain a reference to :- a remote Web page, specified by a full

URL;- a local Web page, specified by its filename within directory of the current page;- a local Web page, specified by its filename relative to the directory of the current page;- a line within the current page (a anchor)

Hyper text Links - an example

<html> <body> <h1>This is another Web page.</h1> <br> <p>There are four main ways of referencingother documents : </p><ol> <li>Absolute : <a href="http://www.bbc.co.uk">This text </a>is a link to the BBC.</li><li>Relative : <a href="test.html">This text</a>is a link to a local HTML page.</li><li>Relative : <a href=“\var\test2.html">This text</a>is also a link to a local HTML page.</li><li><a href="#anchor">Go to anchor</a> </li></ol> <p>This is an anchor <a name="anchor"></a></body> </html>

Horizontal Lines (or Rules) The <hr> tag creates a horizontal line on the

page. It has no HTML closing tag. Its attributes include: The size=n attribute indicates the thickness of

the rule line, in pixels (default=2); The width=n attribute indicates the horizontal

width of the rule line. This can be specified either in pixels or as a percentage of the screen width.

<hr size="6" width="400"> <hr size="6" width="50%">

The HTML Character Set

All text in an HTML file, but outside of a tag start / end pair, is displayed as text within a Web browser. Only standard ASCII text may be used in an HTML file, so how do we display special characters?

Named entities begin with an ampersand (&) and end with a semicolon (;). The names are case sensitive.

® yields ® © yields © & yields & " yields ‘‘

how do we display the ‘‘<’’ and ‘‘>’’ characters? < yields < > yields >

Numbered entities also begin with an ampersand and end with semicolon, but rather than a name they contain a hash sign (#) and a number. The numbers correspond to character positions in the ISO-Latin1 (ISO-8859-1) character set.

õ

See :http://www.w3.org/MarkUp/html-spec/html-

pec_13.html for a full list of these special characters.

Images on the Web

Including pictures into your HTML document is as easy as incorporating any other tag.

Images are usually held in either GIF, JPEG or PNG formats.

The <img> tag is used to include the image, no matter what type of file it is.

The source can be either a relative or absolute URL. This information must be provided otherwise the browser will not have anything to display.

The <img> tag and its attributes

The <img> tag allows one to insert an image on the web page.It has many attributes:

src= Filename or URL of the image (GIF or JP[E]G)width= Width of the image in pixels (allows rescaling)height= Height of the image in pixels (allows rescaling)border= Width of the image border in pixelsAlt= A textual description of the file, displayed when the image cannot be.

examples:<img src="url_source" alt="name" width=n height=n

border=n>

<img src="source" alt="name" align="left">

Image Links

A graphical link is similar to a text link. Graphical links are not underlined or displayed

in a different colour, but can be displayed with a border.

Making an image as a link is done by simply placing the <img> tag in the <href> tag.

<a href="url"> <img src="Image name" border=0> </a>

Tables in HTMLMulti-column tabular for mats cannot be created using lists. Instead, we have a general table-building mechanism:The <table> tag surrounds the whole of our table. It has a number of attributes, and tags, including:border=n specifies the width of the lines surrounding the table

elements (in pixels).width=n specifies the width of a table or of a field within a table

(<th> or <td>) (in pixels or percentage of the screen width).bgcolor=n specifies the background colour of a table or a table

item. The colour may be specified by name, or by RGB components in hexadecimal, e.g.

bgcolor="#ffffff".Table rows Within a table, the <tr> tag surrounds each row of a

table.Table headings Within a row, the <th> tag surrounds each heading

element.Table items Within a row, the <td> tag surrounds each data

element.

Tables in HTML - 2

Word-wrap is used within an element if too much text is specified to fit on one line. The <br> element may be used within a cell of a table to add a line break.

Alignment The align= attribute defines whether the data in a table element is aligned with the left cell margin, the right, or centered within the cell.The valign= defines whether the data is flush with the top, bottom or middle.e.g. <td align="left" valign="top">

Spanned Text Text may be spanned across rows or columns with the rowspan or colspan attribute of the <th> or <td>

elements.e.g. <th colspan="2"> Multi-column heading </th>e.g. <th rowspan="4"> Spanned over rows </th>

Tables in HTML - Example<html> <head> <title> Table example </title> </head><body bgcolor="#c0c0c0"><table border="20" width=500 bgcolor="#4080c0" ><caption>

Statistics </caption><tr>

<th> Name </th> <th> Height </th></tr><tr>

<td> Nick </td> <td> 171cm </td></tr><tr>

<td bgcolor="green"> Helen </td> <td align="right"> 165cm </td>

</tr><tr>

<td bgcolor="#FF8000"> Donald <br> Duck </td><td> 30cm </td>

</tr><tr>

<td colspan="2"> Mickey Mouse </td></tr> </table></body></html>

<html> <head> <title> Table example </title> </head><body bgcolor="#c0c0c0"><table border="20" align="center" width=500 cellspacing=10

cellpadding=5 bgcolor="#4080c0" ><caption> Statistics </caption><tr>

<th> Name </th> <th> Height </th></tr><tr>

<td rowspan="3"> Nick </td> <td> A </td></tr><tr>

<td>D</td></tr><tr>

<td> F</td></tr><tr>

<td bgcolor="green"> Helen </td> <td> 165cm </td></tr><tr>

<td colspan="2"> Mickey Mouse </td></tr> </table> <center><h2> TABLE Example</h2></center>

</body></html>

ITCS373: Internet Technology HTML. What is HTML? HTML stands for HyperText Markup Language. HTML is...

Documents

Transcript of ITCS373: Internet Technology HTML. What is HTML? HTML stands for HyperText Markup Language. HTML is...