Scribd
Upload
83 views

Ob b59f54 Introduction-To-Html PDF

Uploaded by

edouard dude
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Ob b59f54 Introduction-To-Html PDF

Uploaded by

edouard dude
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Ministry of Secondary Education Republic of Cameroon

Progressive
*
Comprehensive High School Peace – Work – Fatherland
PCHS Mankon – Bamenda SCHOOL YEAR 2013/2014
Department of Computer Studies

INTRODUCTION TO HTML
Subject: Comp. Sc Level: A/L By: DZEUGANG PLACIDE

Welcome to HTML Basics. This lesson leads you through the basics of Hyper Text Markup
Language (HTML). HTML is the building block for web pages. You will learn to use HTML to
author an HTML page to display in a web browser.

Objectives
By the end of this topic, you will be able to:

→ Use a text editor to author an HTML document.


→ Be able to use basic tags to denote paragraphs, emphasis or special type.
→ Create hyperlinks to other documents.
→ Create an email link.
→ Add images to your document.
→ Use a table for layout.
→ Apply colors to your HTML document.
Prerequisites:
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or
Netscape.

Table of Contents
Objectives..................................................................................................................................................... 1
I. INTRODUCTION............................................................................................................................... 2
II. CREATING, SAVING AND VIEWING A HTML DOCUMENT............................................. 2
III. FORMATTING A WEB PAGE .................................................................................................... 5
IV. CHARACTER FORMATTING TAGS ........................................................................................ 8
V. HTML LIST ...................................................................................................................................... 11
VI. HTML IMAGE ............................................................................................................................. 12
VII. HTML LINK ................................................................................................................................. 15
VIII. HTML TABLE .......................................................................................................................... 17

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 1 of 19


Introduction to HTML language . By: DZEUGANG Placide

I. INTRODUCTION
HTML (Hypertext Markup Language) is used to create document on the World Wide Web. It is
simply a collection of certain keywords called „Tags‟ that are helpful in writing the document to
be displayed using a browser on Internet.
It is a platform independent language that can be used on any platform such as Windows, Linux,
Macintosh, and so on. To display a document in web it is essential to mark-up the different
elements (headings, paragraphs, tables, and so on) of the document with the HTML tags. To
view a mark-up document, user has to open the document in a browser. A browser understands
and interpret the HTML tags, identifies the structure of the document (which part are which) and
makes decision about presentation (how the parts look) of the document.
HTML also provides tags to make the document look attractive using graphics, font size and
colors. User can make a link to the other document or the different section of the same document
by creating Hypertext Links also known as Hyperlinks.

II. CREATING, SAVING AND VIEWING A HTML DOCUMENT

II.1- What is a Tag?


HTML markup tags are usually called HTML tags. HTML tags are keywords (tag names)
surrounded by angle brackets like <html>.
HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag
also called opening tags, the second tag is the end tag also called closing tags.The end tag is
written like the start tag, with a forward slash before the tag name
There are two types of tags:

- Container Tags which have both the opening and closing i.e. <TAG> and </TAG>.
They hold the text and other HTML tags in between the tags. The <HTML>, <HEAD>,
<TITLE> and <BODY> tags are all container tags.
- Empty Tags, which have only opening and no ending, The <HR>, which is used to draw
Horizontal, rule across the width of the document, and line break <BR> tags are empty
tags.

HTML tags are not case sensitive. <B>means the same as <b>. But the World Wide Web
Consortium (W3C), the group responsible for developing web standards, recommends lowercase
tags

II.2- Basic structure of an HTML document


The essential tags that are required to create a HTML document are:

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 2 of 19


Introduction to HTML language . By: DZEUGANG Placide

→ <html>.............</html>
→ <head>.............</head>
→ <body>.............</body>
Any HTML document then has the following structure
<HTML>
<HEAD>
.............
.............
.............
</HEAD>
<BODY>
.............
.............
All visible
.............
content
</BODY>
goes here
</HTML>

a) HTML Tag <HTML>


The <HTML> tag encloses all other HTML tags and associated text within your document. It is
an optional tag. You can create an HTML document that omits these tags, and your browser can
still read it and display it. But it is always a good form to include the start and stop tags.
b) HEAD Tag <HEAD>
HEAD tag comes after the HTML start tag. The text between the <head>tag and the </head>tag
is header information. Header information is not displayed in the browser window. It contains
TITLE tag to give the document a title that displays on the browsers title bar at the top.
The Format is:
<head>
<title>
your title goes here
</title>
</head>
c) BODY Tag <BODY>
The BODY tag contains all the text and graphics of the document with all the HTML tags that
are used for control and formatting of the page.
The Format is:
<BODY>
Your Document goes here
</BODY>

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 3 of 19


Introduction to HTML language . By: DZEUGANG Placide

II.3- Creating an HTML document


An HTML document, web page can be created using a text editor, Notepad or WordPad. All
the HTML documents should have the extension .htm or .html. It require a web browser like
Internet Explorer, Netscape Navigator or Mozilla Firefox to view the document.
Step 1: Open text editor Notepad (click on Start →All Programs→Accessories→Notepad)
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
Step-3: Save the file as myfirstpage.html(go to File-Save As-give File name: myfirstpage.html-
choose save as type:All Files-click save)
Step-4: Viewing document in web browser (open Internet Explorer-click on File-Open-Browse-
select the file myfirstpage.html-click open-click ok)

Fig: Viewing HTML document myfirstpage.html in browser


Remark: Some peculiarities about the web browser on viewing HTML document text:
 Browsers ignore extra space within HTML document Browsers ignore any additional
space you type, and compress the text as if the space did not exist. For Example:

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 4 of 19


Introduction to HTML language . By: DZEUGANG Placide

This code Would display


“My First Page” “My Fist Page”
 Browsers ignore your extra line and paragraph breaks. Generally you press enter when
you want to create line and paragraph breaks, but they won‟t show up when you view the
document in browser.

III. FORMATTING A WEB PAGE


III.1- Tag attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page. The <tag>tells the browser to do something, while the attribute tells the
browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that
the background color of your page should be blue, like this: <body bgcolor="blue">.
Attributes always come in name/value pairs like this: name="value". Attributes are always
added to the start tag of an HTML element and the value is surrounded by quotes. Double style
quotes are the most common, but single style quotes are also allowed. In some rare situations,
like when the attribute value itself contains quotes, it is necessary to use single quotes:
name='George "machine Gun" Kelly'

III.2- Basic HTML Tags


The most important tags in HTML are tags that define headings, paragraphs and line breaks.

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
<!--> Defines a comment

a) Heading <H1>.............<H6>

HTML has six header tags <H1>, <H2>...........<H6> used to specify section headings. Text with
header tags is displayed in larger and bolder fonts than the normal body text by a web browser.
Every header leaves a blank line above and below it when displayed in browser. For example,
the following code

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 5 of 19


Introduction to HTML language . By: DZEUGANG Placide

<HTML>
<HEAD>

<TITLE>

Section Heading

</TITLE>

</HEAD>

<BODY>

<H1> This is Section Heading 1 </H1>

<H2> This is Section Heading 2 </H2>

<H3> This is Section Heading 3 </H3>

<H4> This is Section Heading 4 </H4>

<H5> This is Section Heading 5 </H5>

<H6> This is Section Heading 6 </H6>

</BODY>
</HTML>
Would display

Fig: Viewing HTML document headings.html in browser

A useful heading attribute is align.

This code
<h5 align="left">I can align headings </h5>
<h5 align="center">This is a centered heading </h5>
<h5 align="right">This is a heading aligned to the right </h5>
Would display

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 6 of 19


Introduction to HTML language . By: DZEUGANG Placide

I can align headings


This is a centered heading
This is a heading aligned to the right

b) Paragraphs:
This tag <P> indicates a paragraph, used to separate two paragraphs with a blank line. Think of a
paragraph as a block of text. You can use the align attribute with a paragraph tag as well.
This code
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>
Would display
This is a paragraph
this is another paragraph

c) Line Breaks
The empty tag <BR> is used, where the text needs to start from a new line and not continue on
the same line. To get every sentence on a new line, it is necessary to use a line break.
This Code Would Display
<p>This <br> is a para<br> graph with This
line breaks</p> is a para
graph with line breaks

d) Horizontal Rule

The <hr>element is used for horizontal rules that act as dividers between sections, like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width.
<HR> accepts following attributes:
 SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel
value.
 WIDTH: Specifies an exact width of HR in pixels, or a relative width as percentage of
the document width.
 ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is applicable if
it is not equal to width of the page.
 NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal
rule should not be shaded at all.
 COLOR: Set the color of the Horizontal rule.
Example
This Code Would Display
<hr align="center" width="50%"
size="3" noshade color="blue">

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 7 of 19


Introduction to HTML language . By: DZEUGANG Placide

e) Comments <!--……..-->
The comment tag is used to insert a comment in the HTML source code. A comment can be
placed anywhere in the document and the browser will ignore everything inside the brackets.
You can use comments to write notes to yourself, or write a helpful message to someone looking
at your source code.
Notice you don't see the text between the tags <!--and -->. If you look at the source code, you
would see the comment. To view the source code for this page, in your browser window, select
View and then select Source.
Note: You need an exclamation point after the opening bracket <!--but not before the closing bracket -->.

This Code Would Display


<p> This html comment would <!-- This
This HTML comment would be displayed like
is a comment --> be displayed like
this.</p> this.

f) Preformatted Text: <PRE>

<PRE> tag can be used, where it requires total control over spacing and line breaks such as
typing a poem. Browser preserves your space and line break in the text written inside the tag.
Example:

This Code Would Display


<PRE>
National Institute of Open Schooling
National Institute of Open Schooling
B-31B, Kailash Colony B-31B, Kailash Colony
New Delhi-110048
</PRE> New Delhi-110048

IV. CHARACTER FORMATTING TAGS

The character formatting tags are used to specify how a particular text should be displayed on the
screen to distinguish certain characters within the document.
The most common character formatting tags are:

Format Tag Action


Bold <b>…..</b> displays text in BOLD
Italics <i>…..</i> displays text in Italic
Underline <u>…..</u> underline the text
Subscript <sub>…..</sub> displays text in Subscript
Superscript <sup>…..</sup> displays text in Superscript
Small <small>…..</small> displays text in smaller font as compared to
normal font
Big <big>…..</big> displays text in larger font as compared to
normal font

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 8 of 19


Introduction to HTML language . By: DZEUGANG Placide

Font Colours and Size <font> …..</font> specify the colors and/or size of the text.

Attributes of <font> are:

• color: Sets the color of the text that will appear on the screen.
• size: Sets the size of the text, takes value between 1 and 7, default is 3. Size can also be
set relative to default size. For example; size=+X, where X is any integer value and it
will add with the default size.
• face: Sets the normal font type, provided it is installed on the user‟s machine.
Example:<FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>

EXAMPLE: application of the above character formatting tag

This Code Would Display


Welcome to the <B> Internet World </B> <br> Welcome to the Internet World
Welcome to the <I> Internet World </I><br> Welcome to the Internet World
Welcome to the <u> Internet World </u><br> Welcome to the Internet World
Welcome to the <sub> Internet World </sub><br> Welcome to the Internet World
Welcome to the <sup> Internet World </sup><br> Welcome to the Internet World
Welcome to the <small> Internet World </small><br> Welcome to the Internet World
Welcome to the <big> Internet World </big><br> Welcome to the Internet World
Welcome to the <font color="red"> Internet World </font><br> Welcome to the Internet World
Welcome to the <font size=5> Internet World </font><br> Welcome to the Internet World
Welcome to the <font size=+3> Internet World </font><br> Welcome to the Internet World
Welcome to the <font face="arial"> Internet World </font><br> Welcome to the Internet World

HTML Colors 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 (hex #00). The
highest value is 255 (hex #FF). This table shows the result of combining red, green, and blue: A
collection of color names is also supported by most browsers.

Color Color HEX Color RGB Name


#000000 rgb(0,0,0) black
#FF0000 rgb(255,0,0) Red
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255) blue
#FFFF00 rgb(255,255,0) yellow
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 9 of 19


Introduction to HTML language . By: DZEUGANG Placide

#FFFFFF rgb(255,255,255) white


#F0F8FF AliceBlue
#FAEBD7 AntiqueWhite
#7FFFD4 Aquamarine
#8A2BE2 BlueViolet
#A52A2A Brown

HTML 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:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background-color to black.

 Background: The background attribute can also specify a background-image for an


HTML page. The value of this attribute is the URL 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.

<body background="clouds.gif">
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second
line above).

Special character

There are certain special characters that can be used while creating document.
Following are some special character
Symbols Entity
©, ® &copy, &reg
¼, ½, ¾ &frac14, &frac12, &frac34
†; ˂; ˃; ≤; ≥ &divide, &lt, &gt, &le, &ge
& &amp
♣♠♥ &spades, &clubs, &hearts All these special character must

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 10 of 19


Introduction to HTML language . By: DZEUGANG Placide

be ended with a semicolon;

V. HTML LIST
HTML Supports several ways of arranging items in lists. The most commonly used are:

• Ordered List (Numbered List)


• Unordered List (Bulleted List)

V.1- Ordered list

Ordered list also called as Numbered list, is used to present a numbered list of item in the order
of importance or the item (paragraph) is marked with a number.

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

This Code Would Display


<H3><U> Various Terms Used In Internet</U></H3> Various Terms Used In Internet
<OL>
<LI> WWW-World Wide Web 1. WWW-World Wide Web
<LI> URL-Uniform Resource Locator 2. URL-Uniform Resource Locator
<LI> HTTP-Hypertext Transfer Protocol 3. HTTP-Hypertext Transfer Protocol
<LI> FTP-File Transfer Protocol 4. FTP-File Transfer Protocol
<LI> HTML-Hypertext Markup Language 5. HTML-Hypertext Markup Language
</OL>

Attributes of <OL> tag are:

 compact: render a list in compact form.


 type : allows marking list items with different types. By default the list Item markers are
set to numbers 1,2,3… so on. Other values of TYPE attribute are:

Attribute Description
Type = A Capital letter eg. A, B, C………

Type = a Small letter eg. a, b, c,………

Type = I Uppercase Roman Numbers eg. I, II, III……


Type = i Lowercase Roman Numbers eg. i, ii, iii……

Type = 1 eg. 1, 2, 3………….

 Start: used for lists that need to start at values other than 1. start always specified in
default numbers, and is completed based on TYPE before display, For example, If
start =5 it would display either an „E‟, „e‟, „V‟, „v‟, or „5‟ based an TYPE attribute.

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 11 of 19


Introduction to HTML language . By: DZEUGANG Placide

V.2- Unordered list

An unordered list is a list of items marked with bullets (typically small black circles). An
unordered list starts with the <ul>tag. Each list item starts with the <li>tag.

This Code Would Display


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

VI. HTML IMAGE


The <img> 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. There are
many image formats available today, but the most widely used among them are gif and jpeg .

It is an empty tag(only start tag, no end tag) and is written as: <IMG SRC = image_URL>

SRC is the Source of the image file and image_URL represents the image file with its location.

Example: <img src="graphics/chef.gif">

Not only does the source attribute specify what image to use, but where the image is located. The
above image, graphics/chef.gif, means that the browser will look for the image name chef.gif in
a graphics folder in the same folder as the html document itself.

src="chef.gif" means that the image is in the


same folder as the html document calling for it.

src="images/chef.gif" means that the image is


one folder down from the html document that
called for it. This can go on down as many layers
as necessary.

src="../chef.gif" means that the image is in


one folder up from the html document that called
for it.

src="../../chef.gif" means that the image is


two folders up from the html document that called
for it.

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 12 of 19


Introduction to HTML language . By: DZEUGANG Placide

src="../images/chef.gif" means that the image


is one folder up and then another folder down in
the images directory.

src="../../../other/images/chef.gif" means
this goes multiple layers up.

This SRC attribute is mandatory for the <IMG> tag. Other attributes used with <IMG> are:

- Align
- Height and width
- Vspace and hspace
- Alt
- Border

a) ALIGN:

used to set the alignment of the text adjacent to the image. It takes the following values:

• ALIGN = LEFT - Displays image on left side and the subsequent text flows around
the right hand side of that image
• ALIGN = RIGHT - Displays the image on the right side and the subsequent text
flows around the left hand side of that image
• ALIGN = TOP - Aligns the text with the top of the image
• ALIGN = MIDDLE - Aligns the text with the middle of the image
• ALIGN=BOTTOM - Aligns the text with the bottom of the image

By default, the text is aligned with the bottom of the image

b) height and width:

Height and Width of an image can be controlled by using the height and width attributes in the
<IMG> tag as follows:

Example: <img src= NOSlogo.GIF height=320 WIDTH=240>

c) hspace and vspace:

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 13 of 19


Introduction to HTML language . By: DZEUGANG Placide

White space around an image can be provided by using hspace (Horizontal Space) and vspace
(Vertical Space) attributes of the <IMG> tag. These attributes provide the space in pixels.

Example:<img src=NOSlogo.GIF vspace=30 HSPACE=25>

d) ALT (Alternative Text)

This attribute is used to give alternative text that can be displayed in place of the image. This is
required when the user needs to stop display of images while retrieving a document in order to
make the retrieval faster, or when the browser does not support graphics. It is also used a tool
tips – displaying description of the image when the mouse is over the image.

Example:<IMG SRC=NOSlogo.GIF ALT = "NOSLogo">

e) BORDER

Border around the image can be controlled by using BORDER attribute of <IMG> tag. By
default image displays with a thin border. To change the thickness or turn the border off, the
value in pixels should set to BORDER attribute. E.g.<IMG SRC=NOSlogo.GIF BORDER=0>

Example
<html>
<head>
<title> use of img tag with its align attribute</title>
</head>
<body>
<p>
<img src="placide/profile.jpg" align=top> aligns the text with the top
of the image
</p>
<p>
<img src="placide/profile.jpg" align=middle> aligns the text with the
middle of the image
</p>
<p>
<img src="placide/profile.jpg" align=left> displays image on left side
and the subsequent text flows around the right hand side of that
image. displays image
on left side and the subsequent text flows around the right hand side
of that image. displays image on left side and the subsequent text
flows around the right hand side of that image.
</p>
<p>
<img src="placide/profile.jpg" align=right> displays image on right
side and the subsequent text flows around the left hand side of that
image. displays image on right side and the subsequent text flows
around the left hand side of that image.
</p>
</body>
</html>

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 14 of 19


Introduction to HTML language . By: DZEUGANG Placide

Fig. : Displaying Image with its attributes in browser

VII. HTML LINK


Web pages are linked to one another through Hypertext Links. Section of text or image in the
HTML document can be linked to an external document or to a specific place within the same
document. The text or image that provides such linkage is known as Hypertext or Hotspot.
HTML provides <A>Anchor Tag to create links. The format of using anchor tag is as follows:
<a href ="url"> Make Me The Link </a>

HREF (Hyper Link Reference) is a mandatory attribute used to refer the URL of the resource.
URL (Uniform Resource Locator) is an address tells the browser about the file to link to. It
identifies file locations (Addresses) on the web or on the local hard drive. These addresses can be
those of HTML documents or elements such as images, scripts, applets and other files. It is
always enclosed in quotes.

VII.1- Linking a text to a web site / an external document


Example: <a HREF ="http://www.google.com">follow me to Google</a> display a link to the
website http://www.google.com.

<a HREF ="page2.htm">next page</a> create a link to a webpage in the same folder

VII.2- Linking (jumping) to a specific place within the same document


Sometimes, it is required to jump different sections in the same document. For this it needs two
steps, first; identify section with a name and or second; use jumps to the location using the name
used. The syntax is:

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 15 of 19


Introduction to HTML language . By: DZEUGANG Placide

1. <A HREF="#section_name"> link to another section of the same document </A> This
link text jumps to the section named with HREF on click. The #symbol before the section
name is must.
2. <A NAME="section_name"> Beginning of the section </A> The NAME attribute is
used to identify a section with a name. It is a unique identifier within the document for
the anchor. One can also jump to a specific section of different document specifying the
path on HREF attribute.

Example:

- Within the same document:<A HREF="#section_name">


- Same folder, but different document:<AHREF="document.html#section_name">
- Different folder, different document:<A HREF="folder/document. html#section_name">
- A different server:<A HREF="http://www.nios.ac.in/foldername/ document.html
#section_name>

VII.3- Email Links


To create an email link, you will use mailto: plus your email address. Here is an example
<a href="mailto:[email protected]">Email Help Desk</a>

Example
<HTML>
<HEAD>
<TITLE> Use of Anchor Tag</TITLE>
</HEAD>
<BODY>
<H2 align="center"><U><FONT COLOR="BLUE">National Institute of Open
Schooling</FONT> </U></H2>
<A HREF="http://placide.blog4ever.com"><IMG SRC="placide/profile.jpg"
alt="Jesus is love" align="left"></A>
The success of open learning and distance education very much depends on
the harnessing of the new and latest technology. The emerging Internet and
Web Technology helps in effective dissemination of information. The web
site isa demand source of latest information. One can access NIOS website
by clicking on <A HREF="http://www.placide.blog4ever.com" >Blog de
planette</A> OR on Clicking on my picture.
You can also contact me by clicking here <a
href="mailto:[email protected]">Contact me by mail</a>
<p></p><p></p><p></p><p></p>
<p><b><i><u>Internet and Web Technology</u></i></b></p>
<p><FONT COLOR="BLUE">Various Terms used in Internet are:</FONT><br>
<ol type = "i">
<li><A HREF="#HTML"> HTML(Hypertext Markup Language) <br>
<li><A HREF="#WWW">WWW(World Wide Web)<br>
<li><A HREF="#site">Web site</A>(Linking within the document)<br>
</P>
<P></P><P></P><P></P>
<A NAME="HTML">HTML (Hypertext Markup Language)<a> <hr align="left"
width="24%" noshade> HTML (Hypertext Markup Language), Language used to
create document on the World Wide Web. It is simply a collection of certain
key words called Tags

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 16 of 19


Introduction to HTML language . By: DZEUGANG Placide

that helps to write the document. <p><strong>click<a


href="http://en.wikipedia.org/wiki/Html">
http://en.wikipedia.org/wiki/Html</a> to read
more</strong> </p><p></p>
<A NAME="WWW">WWW(World Wide Web<a><hr align="left"width="17%" noshade>
<p>The <B>World Wide Web</B> (''<B>WWW</B>'' or
simply the "<B>Web</B>") is an information space in which the items of
interest, referred to as resources, are identified by global identifiers
called
Uniform Resource Identifiers (URIs). The term is often mistakenly used as a
synonym for the Internet, but the Web is actually a service that operates
<I>over</I> the Internet.</p>
<p><strong>click</strong><a href="http://en.wikipedia.org/wiki/Www">
<strong>http://en.wikipedia.org/wiki/Www</strong></a><strong> to read
more</strong>
</p><p></p><p></p>
Web site <hr align="left" width="6%" noshade>
<A NAME="site">A website, web siteor WWW site</A>(often shortened to
just site)is a collection of web pages, typically common to a particular
domain name or sub-domain on the World Wide Web on the Internet.
</BODY>
</HTML>

Fig. : Displaying link with its attributes in browser

VIII. HTML TABLE


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 can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 17 of 19


Introduction to HTML language . By: DZEUGANG Placide

This Code Would Display


<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td> row 1, cell 1 row 1, cell 2
</tr>
<tr> row 2, cell 1 row 2, cell 2
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Some attribute of the table are


Attribute Values Description
border 1, 2, 3, … To display a table with borders
cellspacing 1, 2, 3, … the pixel width between the individual data
cells in the table (The thickness of the lines
making the table grid). The default is zero.
Cellpadding 1, 2, 3, … the pixel space between the cell contents and
the cell border. The default for this property
is also zero.
width Value in pixel or in define the width of your table.
percentage

Table tags are:


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

Example
<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table border = "5" width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="placide/profile.jpg"
width="100" height="100"></td>
<td valign="top"><h1 align="right">Placide DZEUGANG</h1>
<h3 align="right">Computer Scientist</h3></td>
</tr>
<tr>
<td width="200">
<h3>Menu</h3>

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 18 of 19


Introduction to HTML language . By: DZEUGANG Placide

<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.placide.blog4ever.com">My Blog</a>
</li>
</ul>
</td>
<td valign="top">
<h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the
assistance of a
webpage editor. Just my little text editor and a keen understanding
of html.</p>
<p>Look around. Notice I'm able to use paragraphs, lists and
headings. You may not
be able to tell, but the layout is done with a table. I'm very
clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have
been more specific.</p>
<cite>Lily Tomlin </cite> </blockquote>
</td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Placide DZEUGANG<br>
Computer Scientist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:[email protected]">[email protected]</a>
</p>
</body>
</html>

Fig. : Displaying table with its attributes in browser

Visit www.placide.blog4ever.com to download further notes in Computer Science Page 19 of 19

You might also like