ITCS373: Internet Technology Week 2: Web Design Using HTML Dr. Faisal Al-Qaed.

ITCS373: Internet Technology

Week 2: Web Design Using HTML

Dr. Faisal Al-Qaed

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: 

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"> 

<body bgcolor="rgb(0, 0, 255)" >

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:[email protected]" 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" />


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>


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 - A Simple Form

Example

<body><html><form action=mailto:[email protected] 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.

Another Example: Form using Table

<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)

More Examples

Frames with no borders and spacing

Frames with mixed borders and spacing

Border and Spacing

Inherited Spacing and no border

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

You just learned the basics of HTML and should now be able to create and design a basic website.

Visit http://www.w3schools.com (HTML Section) for more HTML examples and tutorials.

And you may use google search engine to search for “HTML Tutorials”.

ITCS373: Internet Technology Week 2: Web Design Using HTML Dr. Faisal Al-Qaed.

Documents

Transcript of ITCS373: Internet Technology Week 2: Web Design Using HTML Dr. Faisal Al-Qaed.