Lab Two HTML Basics

Lab Two – HTML Basics

What is an HTML File?

HTML stands for Hyper Text Markup Language
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor like Notepad.

HTML Tags

HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
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
The text between the start and end tags is the element content
Open Notepad
start > All Programs > Accessories > Notepad
HTML Elements

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.
Here are explanations of a few of the most basic HTML tags:

<html>
</html>

Defines the text file as being in HTML format. This is found on the beginning and end of each web page.

<head>
</head>

The heading area of a the page. The space between these two tags is used for special commands that does not have any connection to the actual formatting of the page.

<title>
</title> / Defines the title displayed at the title bar of the browser window.
<body>
</body> / Found after the <head> tag and is used to define the area of the file which formats the way the web page is seen.
<b>
</b> / Makes text Bold

Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">.

Colors

Colors are displayed combining RED, GREEN, and BLUE light sources.

Color Values

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 The highest value is 255.

Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.

bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

The lines above all set the web page background-color to black; the first line has the same effect as second line, so you can use one of them to set the background-color to black.

The line above set the web page background-color to the following color:

background

The background attribute specifies a background-image for an HTML page. The value of this attribute is the file name of the image you want to use.If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

Note: The image must be in the same folder with HTML file, or you must use the image path.

Note: If you want to use a background image, you should keep in mind:

Will the background image increase the loading time too much?

Will the background image look good with other images on the page?

Will the background image look good with the text colors on the page?

Will the background image look good when it is repeated on the page?

Will the background image take away the focus from the text?

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Activity 2.1 create HTML file to display the following web page:

Ahamd Othman

Personal Information

Address:Sohar

Occupation

College:Sur Applied science
HTML file
<html>
<body bgcolor = "gold">
<h1>Ahamd Othman</h1>
<h3>Personal Information</h3>
<b>Address:</b>Sohar
<h3>Occupation</h3>
<b>College:</b>Sur Applied science
</body>
</html>

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Alignment

The align attribute specifies paragraph alignment. The value of this attribute can be one of the following (left, right, centre or justify).

p align="justify">This is a paragraph</p>
<p align=" right ">This is another paragraph</p>

Activity 2.2 create HTML file to display the following web page:

Sultanate Of Oman
Ministry of higher education
Global College of Engineering and Technology
HTML file
<html>
<body>
<p align = "center">Sultanate Of Oman</p>
<p align = "center">Ministry of higher education</p>
<p align = "center">Global College of Engineering and Technology</p>
</body>
</html>

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

You can rewrite HTML file In previous example using <br> tag:

HTML file
<html>
<body>
<p align = "center">Sultanate Of Oman<br> Ministry of higher education<br>Global College of Engineering and Technology</p>
</body>
</html>

The result is

Sultanate Of Oman
Ministry of higher education
Global College of Engineering and Technology

HTML <hr> tag

The <hr> tag inserts a horizontal rule.

Marquee

Marquee is a moving text in you web site.
Marquee makes your site more attractive.

Activity 2.3 insert marquee into web page

The following marquee is moving to left .

marquee width=200 height=50 direction=left bgcolor=yellow> Hi There </marquee>

The following marquee is moving to right with a delay of 400 ms.

marquee width=200 height=50
direction=right behavior=alternate scrolldelay=400 bgcolor=red>
this is marquee </marquee>

For more information of about HTML tags and attributes

Go to

Lab Three – HTML( text Formatting)

Activity 3.1 try the following formatting Tags

<html>

<body>

<strong>This text is strong</strong<br>

<em>This text is emphasized</em<br>

<i>This text is italic</i<br>

<small>This text is small</small<br>

This text contains

<sub>subscript</sub<br>

This text contains

<sup>superscript</sup>

</body>

</html>

Activity 3.2 create HTML file to display the following web page:

consider the followingimportantequation: X = Y2+ W4
HTML file
<html>
<body>
<p>consider the following<i> important</i<b<u> equation:</b</u</p>
<p align = "center"> X = Y<sub>2</sub>+ W<sup>4</sup</p>
</body>
</html>

The HTML <font> Tag: With HTML code like this, you can specify both the size and the type of the browser output :

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

Activity 3.3 create HTML file to display the following web page

Sultanate Of Oman
Ministry of higher education
Global College of Engineering and Technology
HTML file
<html>
<body>
<p align = "center"> <font size = "7" color = "red"> Sultanate Of Oman<br>
<font size = "5" face = "Courier New" color = "gold"> Ministry of higher education<br>
<font face = "Arial Black" size = "3" color = "brown">Global College of Engineering and Technology</p>
</body>
</html>

Font Attributes

Attribute / Example / Purpose
size="number" / size="2" / Defines the font size
size="+number" / size="+1" / Increases the font size
size="-number" / size="-1" / Decreases the font size
face="face-name" / face="Times" / Defines the font-name
color="color-value" / color="#eeff00" / Defines the font color
color="color-name" / color="red" / Defines the font color

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tagis empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on " has the URL:

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

Activity 3.4 create HTML file to display the following web page

HTML file
<html>
<body>
<p align = "center"> <font size = "6"> Red Sun Shine </font> </p>
<img src = "sunset.jpg">
<p> <b>Do you like this natural view ?</b</p>
</body>
</html>

Note: according to the above example HTML file and image file must be in same folder.

Activity 3.5 addAlt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Add alt attribute and use incorrect file name for your image to see alternate text.

HTML file
<html>
<body>
<p align = "center"> <font size = "6"> Red Sun Shine </font> </p>
<img src = "sunset.jpg" alt = "Sun Rise Picture">
<p> <b>Do you like this natural view ?</b</p>
</body>
</html>

How it looks in a browser:

Activity 3.6 Controlling Image dimension and size

There are two attributes used to control the image dimension:

The width attribute determine the width of picture in web page

The height attribute determine the height of picture in web page.

Change size of image in previous activate to look as following:

HTML file
<html>
<body>
<p align = "center"> <font size = "6"> Red Sun Shine </font> </p>
<img src = "sunset.jpg" alt = "Sun Rise Picture" width = "120" height = "100">
<p> <b>Do you like this natural view ?</b</p>
</body>
</html>

Activity 3.7 using special folder for pictures

Suppose youhavea separate folder for pictures as below.

The HTML file "SunWepPage.htm" is in "MyWebSite" folder , where you want to insert the picture "Sunsset.jpg" from “Pic” folder

Rewrite HTML code in previous example to access the image in its new position.

HTML file
html>
<body>
<p align = "center"> <font size = "6"> Red Sun Shine </font> </p>
<img src = "Pic\sunset.jpg" alt = "Sun Rise Picture" width = "120" height = "100">
<p> <b>Do you like this natural view ?</b</p>
</body>
</html>

Activity 3.8 The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

Create HTML file contains a hyperlink to msn.com web site.

HTML file
<html>
<body>
<a href=" Microsoft Web Site</a>
</body>
</html>

The HTML file above will look like this in a browser:

Visit Microsoft Web Site

Add a new Hyperlink to visit yahoo.com web site.

HTML file
html>
<body>
<a href=" Microsoft Web Site</a>
<br> <br> <br>
<a href=" yahoo Web Site</a>
</body>
</html>

The HTML file above will look like this in a browser:

Visit Microsoft Web Site
Visit yahoo Web Site

Activity 3.9use an image as a link

You can use image as link by define an <img> tag inside <a> element.

Use the picture "muscatpict.jpg", as hyperlink to open web page for Muscat city named "muscat.htm"

HTML file
<html>
<body>
<p>
You can also use an image as a link:
<a href="muscat.htm">
<img border="0" src="muscatpict.jpg" width="65" height="38">
</a>
</p>
</body>
</html>

Lab Four – HTML Lists and Tables

Activity 4.1 HTML supports ordered, unordered.

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

Coffee

Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Activity 4.2 more lists

Create HTML file to display the following web page using unordered list:

Global College of Engineering and Technology

Applied Science

Information Technology
Communication
Design

Education

Mathematic
English
Science

HTML file
<html>
<body bgcolor = rgb(12,252,161)>
<h1> Global College of Engineering and Technology</h1>
<h3>Applied Science</h3>
<ul>
<li>Information Technology</li>
<li>Communication</li>
<li>Design</li>
</ul>
<h3>Education</h3>
<ul>
<li>Mathematic</li>
<li>English</li>
<li>Science</li>
</ul>
</body>
</html>

Try to create the same pervious page but use ordered list

Activity 4.3 Tables , and Table properties

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell cancontain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Create HTML file to display the following table in a web page:

Name / Address
Ahmad / Sur
Salem / Sohar
HTML file
<html>
<body>
<table border = "1">
<tr<td>Name</td> <td>Address</td</tr>
<tr<td>Ahmad</td> <td>Sur</td</tr>
<tr<td>Salem</td> <td>Sohar</td</tr>
</table>
</body>
</html>

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

If you eliminate the border attribute from tag <table border = "1"> in example3 and the tag will be <table>, the table will display in the browser as you see below:

NameAddress

AhmadSur

SalemSohar

Headings in a Table

Headings in a table are defined with the <th> tag, the text in heading cell is bold and centred by default.

create HTML file to display the following table in a web page, consider the first two cells are heading cell:

Name / Address
Ahmad / Sur
Salem / Sohar
HTML file
<html>
<body>
<table border = "1">
<tr<th>Name</th> <th>Address</th</tr>
<tr<td>Ahmad</td> <td>Sur</td</tr>
<tr<td>Salem</td> <td>Sohar</td</tr>
</table>
</body>
</html>

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

Delete the word ‘sur’ from pervious table

HTML file
<html>
<body>
<table border = "1">
<tr<th>Name</th> <th>Address</th</tr>
<tr<td>Ahmad</td> <td</td> </tr>
<tr<td>Salem</td> <td>Sohar</td</tr>
</table>
</body>
</html>

How it looks in a browser:

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:

HTML file
<html>
<body>
<table border = "1">
<tr<th>Name</th> <th>Address</th</tr>
<tr<td>Ahmad</td> <td&nbsp</td</tr>
<tr<td>Salem</td> <td>Sohar</td</tr>
</table>
</body>
</html>

How it looks in a browser:

Name / Address
Ahmad
Salem / Sohar

Table caption