Web Page Development: Information & Communication Technology - 2006

End Show
Web Page Development
Information & Communication Technology - 2006
Fundamentals of HTML
End Show
Hyper Text Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics). Also, in HTML a word, a block of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser.
Fundamentals of HTML ..
End Show
This is subset of Standard Generalized Markup Language (SGML), this language provides codes used to format hypertext documents. Individual codes are used to define the hierarchy and nature of various components of a document, as well as to specify hyperlinks.
Fundamentals of HTML ..
End Show
HTML documents are written in plain text, but with the addition of tags, which describe or define the text they enclose. For example, the ANCHOR <A> tag placed around the hyperlinked text defines a link. It specifies the URL of the 'linked to' document, eg <A HREF="http://www.
Fundamentals of XML
End Show
Extensible(X) Markup Language; defined by the World Wide Web Consortium (W3C) (2004b) as a class of data objects called XML documents and partially describes the behavior of computer programs which process them. XML documents are made up of storage units called entities, which contain either parsed or unparsed data. Parsed data is made up of characters, some of which form character data, and some of which form markup
Fundamentals of XML
End Show
It is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.
End Show
Creating a Simple Web Page

To create a web page there are two methods 1. Create web page using a text editor Eg: Note Pad Create web page using standard package Eg: Microsoft Front Page, Macromedia Dreamviewer and Adobe Fireworks
2.
Create a web page using a text editor

<html> <head> <title>New Page 1</title> </head> <body> My First Web Page </body> </html>
End Show
First you have to type the text on a text editor like Notepad.Then save it as first.html
Create a web page using a text editor..
End Show
You can watch it using a Web Browser like Internet Explorer.
Create web page using standard package
End Show
First you have to create what you want to have on the web page on normal view
Create web page using standard package..
End Show
Then preview of the desired web page on FrontPage
Create web page using standard package..
End Show
Finally View it using Web Browser
Creating and linking multiple Pages
End Show
This explains how to create a small web site with multiple pages that has links along with them. First you have to create a web page called index. Most of the time index means the home page of the site you are going to create.
Creating and linking multiple Pages

Create hyperlinks to primary and secondary pages from here.
End Show
Creating and linking multiple Pages..

Create hyperlink to index page from here
End Show

Create hyperlink to index page from here
End Show

<html> <head> <title>My First Web Page</title> </head> <body> <p align="center"><b><font size="5">My School</font></b></p> <p align="left"> </p> <p align="left"><font size="4"><b><a href="primary.htm">Primary Section</a></b></font></p> <p align="left"><font size="4"><b><a href="secondary.htm">Secondary Section</a></b></font></p> </body> </html>
HTML Code of index page
End Show

<html> <head> <title>Primary Section</title> </head> <body> <p align="center"><b><font size="5" color="#FF00FF">Primary Section</font></b></p>
End Show
<p align="left"><b><font size="4"><a href="index.htm">Back</a></font></b></p>

<p align="center"><img border="0" src="primary.jpg" width="180" height="204"></p> </body>
</html>
HTML Code of primary page

<html> <head> <title>Secondary Section</title> </head> <body> <p align="center"><b><font size="5" color="#0000FF">Secondary Section</font></b></p> <p align="left"><font size="4" color="#0000FF"><a href="index.htm">Back</a></font></p> <p align="center"><img border="0" src="secpic.wmf" width="193" height="165"></p> </body> </html>
HTML Code secondery page
End Show
What is an HTML File?
End Show
HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension better to use html extention. An HTML file can be created using a simple text editor
Any text editor can be used.
What is an HTML File?
End Show
HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension better to use html extention. An HTML file can be created using a simple text editor
Any text editor can be used.
What is an HTML File? Cont..
End Show
The first tag <html> tells the browser that this is the start and the last tag </html> tells that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font
HTML Tags
End Show
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two angle brackets < 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 The text between the start and end tags is the element content e.g <b> text applied bold </b> HTML tags are not case sensitive, <b> means the same as <B>
Basic HTML Tags

Tag Description <html>Defines an HTML document <body>Defines the document's body <h1> to <h6>Defines header 1 to header 6 <p>Defines a paragraph <br>Inserts a single line break <hr>Defines a horizontal rule 
HTML Text Formatting
End Show
HTML defines a lot of elements for formatting output, like bold, italic or font color etc. <b>This text is bold</b><br> <strong>This text is strong</strong> <big>This text is big</big>
HTML Character Entities
End Show
Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity. Character Entities If some special characters are to be displayed, insert character entities in the HTML source. A character entity has three parts: 1. An ampersand (&) 2. An entity name or a # and an entity number 3. And finally a semicolon (;) To display a less than sign in an HTML document write: < or <
Character Entities
End Show
If some special characters are to be displayed, insert character entities in the HTML source. A character entity has three parts: 1. An ampersand (&) 2. An entity name or a # and an entity number 3. And finally a semicolon (;) To display a less than sign in an HTML document write: < or <
Non-breaking Space
End Show
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the character entity.
The Most Common Character Entities

Result Description non-breaking space < > & less than greater than Ampersand Entity Name < > & < > &
End Show
Entity Number
"
'
quotation mark "

apostrophe ' (does not work in IE)
"
'
HTML Links
End Show
Hyperlink is used to link to another document on the Web. HTML uses the <a> (anchor) and the Href Attribute tag to create a link to another document. The syntax of creating an anchor: <a href="url">Text to be displayed</a>
The Target Attribute
End Show
With the target attribute, you can define where the linked document will be opened.
<a href="http://www.doenets.lk/"target="_blank">Visit Department of Examination!</a>
The Anchor Tag and the Name Attribute
End Show
The name attribute is used to jump directly into a specific section on a page without scrolling. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a>
HTML Frames
Frames
End Show
With frames, more than one HTML document can be displayed 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
The Frameset Tag
End Show
The <frameset> 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
Frame Tags
End Show
The <frame> tag defines what HTML document to put into each frame Tag <frameset> <frame> <noframes> <iframe> Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames Defines an inline sub window (frame)
Frameset with two columns End Show

The first column is set to 25% of the width and the second column is set to 75% of the width of the browser window.
<frameset cols="25%,75%">
<frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
Frame borders
End Show
By dragging the border user can resize frames. Adding noresize="noresize" to the <frame> tag prevent resizing. Add the <noframes> tag to avoid frames. Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!
Navigation frame
End Show
This contains a list of links with the second frame as the target. The file called "Frames.html" contains three links. The source code of the links: 1. <a href ="frame_a.htm" target ="showframe">Frame a</a><br> 2. <a href ="frame_b.htm" target ="showframe">Frame b</a><br> 3. <a href ="frame_c.htm" target ="showframe">Frame c</a> The second frame will show the linked document.
The Image Tag and the Src Attribute
End Show
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. Use the src attribute to display an image on a page. Src stands for "source". The value of the src attribute is the URL of the image. The syntax of defining an image: e.g <img src="url"> URL = C:/mydocuments/images/boat.gif
The Alt Attribute
End Show
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat"> 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.
Image Tags
End Show
Tag <img> <map> <area>
Description Defines an image Defines an image map Defines a clickable area inside an image map
HTML Backgrounds
End Show
Backgrounds A good background can make a Web site look really great. The <body> tag has two attributes where you can specify backgrounds using color or an image. Bgcolor The bgcolor attribute specifies a background-color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: e.g <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> All above set the background-color to black.
HTML Lists
End Show
Unordered Lists The list items are marked with bullets starts with the <ul> tag. Each list item starts with the <li> tag. <ul><li>Coffee</li><li>Milk</li></ul> Coffee Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Ordered Lists Are marked with numbers. Starts with the <ol> tag. Each list item starts with the <li> tag. <ol><li>Coffee</li><li>Milk</li></ol> Coffee Milk
HTML Lists Cont
End Show
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
List Tags
End Show
Tag Description <ol> Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <dl> Defines a definition list <dt> Defines a definition term <dd>Defines a definition description <dir> Deprecated. Use <ul> instead <menu> Deprecated. Use <ul> instead
HTML Tables
End Show
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), 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 can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Defining a table with 2 columns and 2 rows. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
End Show
Tables and the Border Attribute

To display a table with borders, use the border attribute: <table border="1"> <tr> <td>Row 1, cell 1 </td> <td>Row 1, cell 2</td> </tr> </table>
End Show
Headings in a Table
End Show
Headings in a table are defined with the <th> tag. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> </table>
Empty Cells in a Table
End Show
Table cells with no content are not displayed very well in most browsers. <table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>
Table Tags
Tag Description <table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer
End Show
HTML Colors
End Show
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 given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).
Color combination
Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
End Show
Continued
Continued
Color combination Cont
End Show
Color HEX Color Name #F0F8FF AliceBlue #FAEBD7 AntiqueWhite #7FFFD4 Aquamarine #000000 Black #0000FF Blue #8A2BE2 BlueViolet #A52A2A Brown
End Show
I wish you all the best for you're future
Prepared by : Ruvan Abeysekara

Web Page Development: Information & Communication Technology - 2006

Uploaded by

Copyright:

Available Formats

Web Page Development: Information & Communication Technology - 2006

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Page Development: Information & Communication Technology - 2006

Uploaded by

Copyright:

Available Formats

End Show

Web Page Development

Information & Communication Technology - 2006

Creating a Simple Web Page

Create a web page using a text editor

Create a web page using a text editor..

You can watch it using a Web Browser like Internet Explorer.

Create web page using standard package

Create web page using standard package..

Then preview of the desired web page on FrontPage

Create web page using standard package..

Finally View it using Web Browser

Creating and linking multiple Pages

Creating and linking multiple Pages

Creating and linking multiple Pages..

Creating and linking multiple Pages..

Creating and linking multiple Pages..

Creating and linking multiple Pages..

<p align="left"><b><font size="4"><a href="index.htm">Back</a></font></b></p>

HTML Code of primary page

Creating and linking multiple Pages..

What is an HTML File?

What is an HTML File?

What is an HTML File? Cont..

Basic HTML Tags

This is also an HTML element

Quote Styles, "red" or 'red'?

HTML Text Formatting

HTML Character Entities

The Most Common Character Entities

quotation mark &quot;

The Target Attribute

<a href="http://www.doenets.lk/"target="_blank">Visit Department of Examination!</a>

The Anchor Tag and the Name Attribute

The Frameset Tag

Frameset with two columns End Show

<frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

The Image Tag and the Src Attribute

The Alt Attribute

Tag <img> <map> <area>

HTML Lists Cont

Tables and the Border Attribute

Empty Cells in a Table

Color combination Cont

I wish you all the best for you're future

Prepared by : Ruvan Abeysekara

You might also like

quotation mark "