JavaScript



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 and

• 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 [pic]

• start >> All Programs >> Accessories >> Notepad

•

• HTML Elements

•

| |

| |

|Title of page |

| |

| |

|This is my first homepage. This text is bold |

| |

| |

•

• This is an HTML element:

|This text is bold |

• The HTML element starts with a start tag:

The content of the HTML element is: This text is bold

The HTML element ends with an end tag:

• The purpose of the tag is to define an HTML element that should be displayed as bold.

• This is also an HTML element:

| |

|This is my first homepage. This text is bold |

| |

• This HTML element starts with the start tag , and ends with the end tag .

• The purpose of the 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:

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

| | |

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

| |Defines the title displayed at the title bar of the browser window. |

| | |

| |Found after the tag and is used to define the area of the file which formats the way the web page|

| |is seen. |

| |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: . With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: .

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 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 to tags. defines the largest heading. defines the smallest heading.

|This is a heading |

|This is a heading |

|This is a heading |

|This is a heading |

|This is a heading |

|This is a heading |

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 |

| |

| |

|Ahamd Othman |

|Personal Information |

|Address:Sohar |

|Occupation |

|College:Sur Applied science |

| |

| |

Paragraphs

Paragraphs are defined with the tag.

|This is a paragraph |

|This is another paragraph |

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

|This is a paragraph |

|This is another paragraph |

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 |

| |

| |

|Sultanate Of Oman |

|Ministry of higher education |

| Global College of Engineering and Technology |

| |

| |

Line Breaks

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

|This is a paragraph with line breaks |

The tag is an empty tag. It has no closing tag.

You can rewrite HTML file In previous example using tag:

|HTML file |

| |

| |

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

| |

| |

The result is

|Sultanate Of Oman |

|Ministry of higher education |

|Global College of Engineering and Technology |

HTML tag

The 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 .

[pic]

| Hi There |

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

[pic]

| |

|this is 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

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains

subscript

This text contains

superscript

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

|consider the following important equation: X = Y2+ W4 |

|HTML file |

| |

| |

|consider the following important equation: |

| X = Y2+ W4 |

| |

| |

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

| |

| |

|This is a paragraph. |

| |

| |

| |

| |

|This is another paragraph. |

| |

| |

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 |

| |

| |

| Sultanate Of Oman |

| Ministry of higher education |

| Global College of Engineering and Technology |

| |

| |

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 tag. 

• The tag is 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 |

| |

| |

| Red Sun Shine |

| |

| Do you like this natural view ? |

| |

| |

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

Activity 3.5 add Alt 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 |

| |

| |

| Red Sun Shine |

| |

| Do you like this natural view ? |

| |

| |

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:

[pic]

|HTML file |

| |

| |

| Red Sun Shine |

| |

| Do you like this natural view ? |

| |

| |

Activity 3.7 using special folder for pictures

Suppose you have a 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.

[pic]

|HTML file |

| |

| |

| Red Sun Shine |

| |

| Do you like this natural view ? |

| |

| |

Activity 3.8 The Anchor Tag and the Href Attribute

HTML uses the (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: 

|Text to be displayed |

The 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 web site.

|HTML file |

| |

| |

|Visit Microsoft Web Site |

| |

| |

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

Visit Microsoft Web Site

Add a new Hyperlink to visit web site.

|HTML file |

| |

| |

|Visit Microsoft Web Site |

| |

|Visit yahoo Web Site |

| |

| |

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

Visit Microsoft Web Site

Visit yahoo Web Site

Activity 3.9 use an image as a link

You can use image as link by define an tag inside element.

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

|HTML file |

| |

| |

| |

|You can also use an image as a link: |

| |

| |

| |

| |

| |

| |

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 tag. Each list item starts with the tag.

| |

|Coffee |

|Milk |

| |

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 tag. Each list item starts with the tag.

| |

|Coffee |

|Milk |

| |

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 |

| |

| |

| Global College of Engineering and Technology |

|Applied Science |

| |

|Information Technology |

|Communication |

|Design |

| |

|Education |

| |

|Mathematic |

|English |

|Science |

| |

| |

| |

Try to create the same pervious page but use ordered list

Activity 4.3 Tables , and Table properties

Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain 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 |

| |

| |

| |

|Name Address |

|Ahmad Sur |

|Salem Sohar |

| |

| |

| |

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 in example3 and the tag will be , the table will display in the browser as you see below:

Name Address

Ahmad Sur

Salem Sohar

Headings in a Table

Headings in a table are defined with the 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 |

| |

| |

| |

|Name Address |

|Ahmad Sur |

|Salem Sohar |

| |

| |

| |

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 |

| |

| |

| |

|Name Address |

|Ahmad |

|Salem Sohar |

| |

| |

| |

How it looks in a browser:

[pic]

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 |

| |

| |

| |

|Name Address |

|Ahmad   |

|Salem Sohar |

| |

| |

| |

How it looks in a browser:

|Name |Address |

|Ahmad |  |

|Salem |Sohar |

Table caption

Table caption is defined with tag.

Add the caption “Student Name” to the table.

[pic]

|HTML file |

| |

| |

| |

|Student Name |

|Name Address |

|Ahmad Sur |

|Salem Sohar |

| |

| |

| |

Lab Five – Forms and Frames

Activity 5.1 create a Form

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the tag.

| |

| |

| |

| |

Input tag

The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

Create HTML file to display data form contains two text fields first name and last name

|HTML file |

| |

| |

| |

| Please insert the following information |

| |

|First name: |

| |

| |

|Last name: |

| |

| |

| |

| |

How it looks in a browser:

|Please insert the following information |

| |

|First name: [pic] |

|Last name: [pic] |

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default, you can use size attribute of tag to change the default size:

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

Add two radio buttons to the form

|HTML file |

| |

| |

| |

| Please insert the following information |

| |

|First name: |

| |

|Last name: |

| |

| Male |

| |

| Female |

| |

| |

| |

How it looks in a browser:

|Please insert the following information |

|First name: [pic] |

|Last name: [pic] |

| |

|[pic]Male |

|[pic]Female |

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

Add three check boxes to the form:

|HTML file |

| |

| |

| |

| Please insert the following information |

| |

|First name: |

| |

| |

|Last name: |

| |

| |

| Male |

| |

| Female |

| |

|I have a bike: |

| |

| |

|I have a car: |

| |

| |

|I have an airplane: |

| |

| |

| |

| |

How it looks in a browser:

|Top of Form |

|Please insert the following information |

| |

|First name: [pic] |

|Last name: [pic] |

| |

|[pic]Male |

|[pic]Female |

| |

|I have a bike: [pic] |

|I have a car: [pic] |

|I have an airplane: [pic] |

|Bottom of Form |

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

Method attribute specifies the method used to submit the form data, the default value is "get", and this attribute takes two values:

|Value |description |

|get |The form data is appended to the URL specified in the action attribute |

|post |The form data is sent to the server as separate message |

Add submit button to the form, when you click on this button the information well send to web page "html_form_action.asp"

|HTML file |

| |

| |

| |

| Please insert the following information |

| |

|First name: |

| |

| |

|Last name: |

| |

| |

| Male |

| |

| Female |

| |

|I have a bike: |

| |

| |

|I have a car: |

| |

| |

|I have an airplane: |

| |

| |

| |

| |

| |

| |

How it looks in a browser:

[pic]

If you click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input, but now you well show error message because you don't have this page in your web site.

Activity 5.2 using Frames in you web page

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

• The disadvantages of using frames are:

• The web developer must keep track of more HTML documents

• It is difficult to print the entire page

[pic]

The Frameset Tag

• The tag defines how to divide the window into frames

• Each frameset defines a set of rows or columns

• The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

The tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

| |

|   |

|   |

| |

Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").

[pic]

Basic Notes - Useful Tips

If a frame has visible borders, the user can resize it by dragging the borderAdd the tag for browsers that do not support frames.

Important: You cannot use the tags together with the

Note: Check (student files) folder for different frames examples.

You need to create three html files for the following

activity

First file : Index.html

|HTML file |

| |

| |

| |

| Frames Example I |

| |

| |

| |

| |

| This is an example file for demonstrating frames. |

|Why are you looking at it in a frame disabled browser? |

| |

| |

| |

| |

Second file: bannerBasic.html

|HTML file |

| |

| |

| |

|Basic banner. |

| |

| |

| |

| |

|Basic banner |

| |

| |

| |

| |

Third file: contentBasic.html

|HTML file |

| |

| |

| |

| Basic content |

| |

| |

| Basic content |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| A huge number of paragraphs here to illustrate scrolling. |

| |

| |

The result is

-----------------------

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains subscript

This text contains superscript

MyWebSite

Pic

Index.html

contentBasic.html

bannerBasic.html

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download