Post on 27-Dec-2015
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 markup
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: <!-- This is comment text -->
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
information, rather like the nested structure of a C program. Every 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 format 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.
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>
Backgrounds The background may be a background image or a background colour.
The two background settings are attributes in the <body> tag.
The attribute, background= points to the URL of an image to use for the document background.
The attribute, bgcolor= defines the colour of the document’s background. <body background="Image name"> <body bgcolor="Colour">
<body bgcolor= "Silver" bgsound= “a.wav" >
<body bgcolor= "#ff0000"> <!-- red background -->
<body bgcolor="rgb(0, 0, 255)" > <!-- blue background -->
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>
Hyperlinks
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)
<body link= “red" > <body vlink= “blue" > visited link color <body alink= “yellow" >active link color
Hyperlinks - 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>
External Images External images are stored separately from the page and are linked from
that page in much the same way that other HTML pages are. A web page loads quickly with a small inline image (a thumbnail image)
linked to a larger, more detailed external image. This way, if readers want to see more, they can choose to load the image themselves.
Tables in HTML
Multi-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).cellspacing=n specifies the width of the lines that divide table entries (in pixels).
cellpadding=n specifies the amount of space between the edges of the cells and the content of a cell. By default, many browsers draw tables with a cell padding of 1 pixel.
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>
<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>
<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><th>Age</th></tr><tr>
<td rowspan="2" colspan="2" valign="bottom" align="right"> Nick </td> <td> A </td></tr><tr>
<td align="right">D</td></tr><tr>
<td colspan="2"> F</td><td align="center">M</td></tr><tr>
<td bgcolor="green"> Helen </td> <td colspan="2"> 165cm </td></tr><tr>
<td colspan="3"> Mickey Mouse </td></tr> </table> <center><h2> TABLE Example</h2></center> </body></html>
HTML Forms
Forms provide the means for gathering information from users who visit a Web page.
Applications include user feedback, queries, E-commerce. Simple feedback and queries normally require the form data
to be emailed to a specific email address. Information may be extracted from this email automatically.
E-commerce involves "Submitting" the for m to activate a server-side program that processes the form’s data. Most server programs involve databases.
HTML Forms - 2 As usual, a new range of HTML tags is required to
control the forms. The <form> tag defines a new HTML form. It must contain a
closing tag. No nesting of forms allowed. The main <form> attributes are : action= and method=.
action= specifies how the form data should be processed (i.e. which program will be activated when the form is submitted) The action= attribute specifies an absolute or relative URL.
The URL is usually a program, running on the Web server machine.
The URL may alter natively be a ‘‘mailto’’ address; this must always be used with the POST method (see below).
Action="mailto:faisal@hotmail.com" Method="POST" method= specifies how the form data is to be sent to
the script defined by the action attribute.
Sending Form Data
There are two possible values of the method= attribute:GET Data is sent to the program as par t of the URL. Use it only if a small volume of data is to be transmitted and
there is no sensitive information (i.e. a password) embedded.<form action="http://www.amazon.com/order.cgi"method="GET"></form>
POST Data is sent as standard input to the program, and is thus hidden from the user. This is more efficient for bulk data.Note: Just because the data is hidden, don’t assume that this method is secure.
<form action="http://www.amazon.com/order.cgi"method="POST"></form>
Form Elements
An HTML form supports a rich variety of user input elements.
Input elements are added by using the tag <input>.This has no closing tag.For each input we need to specify :
The name of the input element (unique in each for m). This name is used in the message sent back to the browser.
The type of input - to tell the browser what to display and what to expect as input data.
The size (if the element takes text values)
Examples of Form Elements
For all input field types, the type= and name= fields must be specified.Text input fields : These allow a row of text to be typed by the user. You
may specifythe field width and the maximum length of the text to be input.<input type="text" name="mytext1" size="15“ maxlength="20"
value="Enter your Username"/>
Password controls : These are the same as text controls, but asterisks are displayed to mask user’s input :
<input type="password" ... />Check boxes : Any number of these may be clicked.<input type="checkbox" ... />Radio buttons : Just one of these may be clicked. Group radio buttons by
using the same name= attribute.<input type="radio" ... />
Examples of Form Elements - 2
Submit button : Send data to program for processing.<input type="submit" value="send form data" />
Reset button : Clear all current data from for m.<input type="reset" value="clear" />
Filenames may be looked up (using a browser pop-up menu) and included in areturned form.<input type="file" value="myfile.doc" ... />
Hidden fields may be returned, containing information originally embedded in the page by the Web page designer (or the server). Beware that the user may change these values in the HTML or in the GET data submitted - hidden does not imply secure!<input type="hidden" name="orderno“ value="1000" />
Examples of Form Elements - 3
Text Areas enable the user to enter text messages. rows= and cols= must define the text area. A helpful message can appear in the text area as an
initial value.<p>Please comment on our customer service.<textarea name="question1" rows="10" cols="60">Enter your answer here</textarea> </p>
Examples of Form Elements - 4
Menus allow us to select from a number of alternatives. <select> enables the user to choose from a set of options. Its main attributes are name= and size=. name= This identifies the returned item; size= This sets the number of lines in the selection menu:
size == 1 The selection is done using a pull-down menu; size <#options The selection is done using a scrolling menu; size == #options The selection is done using a fixed menu.
The optional values are listed using the <option> tag; one of these may have the attribute selected.
<select name="courses"><option value="cs153">Web Publishing </option><option value="cs381">Web Technologies </option><option value="cs161" selected> Programming Foundations </option></select>
Example
<body><html><form action=mailto:faisal@hotmail.com method="post"><br><p> Your name :<input type="text" name="in1" size="19" maxlength="19" /><br></p><p>Password :<input type="password" name="in2" size="8" maxlength="8" ><br></p><p>Do you want to buy books :<input type="checkbox" name="in3" >or magazines<input type="checkbox" name="in4" ><br></p><p>Credit card Number :<input type="text" name="in5" size="19“ maxlength="15"/><br></p>
<p>Expiry Date :<input type="text" name="in6" size="2" > /<input type="text" name="in7" size="2" > /<input type="text" name="in8" size="4" ><br></p><input type="submit" value="send form data" ><input type="reset" value="clear form" ></form></body></html>
Filling this in and submitting it yieldsin1=Roger+Peel&in2=13324234&in3=on& in5=1234+5678+9012&in6=11&in7=11&in8=2001Notice that this form is emailed by the browser.
<html><body><h1 align="center">ITCS 373</h1><form method="POST"><table border="0" width="100%"> <tr><td width="100%" colspan="3"><p align="center">This is my Form</td> </tr> <tr><td width="30%"><p>Name: <input size=20 /></td> <td width="50%"><p>Attachment: <input type="file" size=20 /></td> <td width="20%" rowspan="2" valign="top" align="center"> <p align="center">Transportation: <br />
<select size="2"><option>Airplane</option><option>Boat</option><option>Car</option></select></td>
</tr> <tr>
<td><textarea rows="3" name="S1" cols="20">Welcome to my Web Page</textarea></td>
<td><p align="left">Gender: <br /> Male<input type="radio" value="M" checked name="Gen"><br /> Female<input type="radio" name="Gen" value="F"></td> </tr></table> <hr /> <p align="center"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="reset“ name="B1“></p></form></body></html>
HTML Frames Frames are an HTML concept that support the viewing of multiple
pages in a single window. Frames are very popular, and are used in many commercial web
pages.
Frames : Example 1
<html><frameset rows="50%,50%"><frame src="html_frame_a.html"><frameset cols="25%,75%"><frame src="html_frame_b.html"><frame src="html_frame_c.html"></frameset></frameset></html>
Frames are used to split the browser window into various parts and to specify for each of the parts an HTML file to be displayed. A framed page is introduced by the <frameset> tag This tag may have the attributes rows=, cols= When frames are used, no HTML <body> may be present. Frames split the screen into rows or columns. Any or all of
these parts can be further split into rows or columns. Every split must specify how many rows or columns are to
be created and what their sizes are. After the splitting process, which HTML page is displayed
on each part of the screen must be specified, using the <frame> tag and its src= attribute.
Scroll-bars are used to enable the user to browse a frame that is too big for the fraction of the window specified.
Frames : Example 2
<html><frameset rows="50%,50%" cols="40%,20%,40%">
<frame src="html_frame_a.html"><frame src="html_frame_b.html"><frame src="html_frame_c.html"><frame src="html_frame_d.html"><frame src="html_frame_e.html"><frameset cols="25%,75%">
<frame src="html_frame_f.html"><frame src="html_frame_g.html">
</frameset></frameset></html>
Interlinked Frames
Frames can be linked with each other. When a link is followed then we can specify where the new web
page will be displayed. To do this, we use the attribute target= within the definition of
the link. The target frame is named - so we have to give the frames names, too.
<frame src="a.html" name="a"> After frames have been assigned names, then we can
reference them from links in other frames.<a href="http://www.msn.co.uk" target="a">This link will display the result inframe "a"</a>
Thus, certain frames may remain constant, and others can be used to display their results (i.e. new Web pages)
Reading
Chapter 4 Introduction to XHTML Note: At this stage, Ignore the XHTML
tags/attributes (i.e. xml, doctype, xmlns) and use it as HTML