Scribd
Upload
6 views

HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages using HTML tags. It covers essential elements such as HTML editors, tags, attributes, and the structure of an HTML document, along with examples of various tags for formatting text, creating links, and inserting images. Additionally, it discusses the significance of attributes and the use of headings and paragraphs in HTML documents.

Uploaded by

Buddhima Shaindi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages using HTML tags. It covers essential elements such as HTML editors, tags, attributes, and the structure of an HTML document, along with examples of various tags for formatting text, creating links, and inserting images. Additionally, it discusses the significance of attributes and the use of headings and paragraphs in HTML documents.

Uploaded by

Buddhima Shaindi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

Lesson 8

Introduction to HTML
HTML
HTML stands for Hyper Text Markup Language.
Markup Language is a way of writing style and layout information
within a text document.
HTML is a simple scripting language, mainly used for developing
web pages.
HTML document is a plain text file that contains text and HTML tags.
This document when viewed in a browser displays a web page.
• HTML is not a programming language but a markup language.
• It creates simple text files using any HTML editor.
• It consists of markup tags.
• It is saved with the extension of .htm or .html.
• It is not case sensitive, that is, <HTML>,<html>or< HTml>are the
same.
HTML Editor
HTML editor is a software application required to write HTML tags to
create web page.

WYSIWYG Editor
WYSIWYG stands for ‘What You See Is What You Get’.
The content displayed onscreen during editing phase closely resembles
the final web page.
Test Editor
To work with a text editor, you must know how to write HTML tags that
are used for creating a web page.
1. Click on the Start button All Programs Accessories
Notepad.
2. The Notepad window appears. Type the HTML code (Fig. 8.1) page
number 97.
3. Click on the File menu Save As option.
4. Save As dialog box appears. Save the file with any name and ‘.html’
or ‘.htm’ extension.
Viewing an HTML Document Using a Web
Browser

1. Open File Explorer on your computer and go to the location where


you have saved your .htm or .html file.
2. Select the file and right-click on it. From the menu that appears
select Open with and then select Internet Explorer. You will be able
to see your web page (Fig. 8.2).
HTML Tags
These denote the various elements in an HTML document. HTML tags
are keywords enclosed in a pair of angular brackets, that is, <and>.

1. Container Tags: These tags have a start and an end tag to an HTML
element. (Eg: <B>…</B>, <BODY>…</BODY>, etc.
2. Empty Tags: These tags have only an opening or a start tag and no
closing tag to an HTML element. (Eg: <LI>, <IMG> <HR>,etc.
HTML Elements
The content typed along with the start tag and the end tag is called the
HTML elements.
HTML Tag Attributes
Attributes of a tag provides additional information about the HTML
elements.
Attributes appear as an attribute name followed by an ‘=’ sign and then
the attribute value. (Eg: <IMG align=“left”>
Structure of an HTML Document
All HTML documents contain standard HTML tags that are
executed in a web browser.

Root Element
This contains the HTML tag. It is a container tag. It is used to detect the
document as an HTML document.
Head Element

This element contains information about the document.


Eg: <HTML>

<HEAD>
<TITLE>
Click Start- Learning HTML
</TITLE>
</HEAD>
</HTML>
Body Element
This element defines the document’s body.
(Fig. 8.4)
<HTML>
<HEAD>
<TITLE>
Click Start – Learning HTML
<BODY>
</TITLE>
</HEAD>
</BODY>
</HTML>
The followings are some important attributes of the <BODY> tag:

1. Text: This attribute specifies the color of the text of the entire
document. The value can be the name of the color within quotes.
2. Bgcolor: This attribute specifies the color of the background of the
web page.
3. Leftmargin: This attribute sets the left margin of the web page. The
value can be given as a number or in percentage.
4. Topmargin: This attribute sets the margin at the top of the web
page. The value van be given as a number or in percentage.
5. Background: This attribute will make an image as the background
of the web page.
Some Important Points
• The space between the tags does not matter. (Eg: <U>Underline
text</U> is same as <U>Underline text </U>)
• There should not be any space between letters of the tag names. (Eg:
<HTML> is correct; <HTML>, <HTML>, <HTML> are correct.
• Attributes are always specified with the tag they belong to.
• Attribute name is not case sensitive.
HTML Document Heading
Heading tags are used to display a text slightly bigger & bolder than
normal body text. HTML has six levels of headings, numbered 1 to 6,
with 1 being the main heading and largest in size.
Fig. 8.6
<HTML>
<HEAD>
<TITLE>Heading Tags</TITLE>
</HEAD>
<BODY>
<H1> First level heading </H1>
<H2> Second level heading </H2>
<H3> Third level heading </H3>
<H4> Fourth level heading </H4>
<H5> Fifth level heading </H5>
<H6> Sixth level heading </H6>
</BODY>
</HTML>
HTML Paragraph Tag
While writing an HTML document, all kinds of spaces are ignored
including blank lines and the Entry key.
Fig. 8.7
<P> Paragraph 1 </P>
<P> Paragraph 2 </p>, so on
<HTML>
<TITLE> words of wisdom
</TITLE>
<BODY>
<P> Wisdom is only found in truth. </P>
<P> Good health is above wealth. </P>
</BODY>
</HTML>

Attribute of <P> Tag


1. To left align the paragraph text: <P align=“left”>
2. To right align the paragraph text: <P align=“right”>
3. To center align the paragraph text: <P align=“center”>
4. To justify the paragraph text: <P align=“justify”>
<HTML>
<TITLE> Paragraph Alignment </TITLE>
<BODY>
<P align = “left”> An apple a day keeps the doctor away <P>
<P align = “center”> An apple a day keeps the doctor away </P>
<P align = “right”> An apple a day keeps the doctor away </P>
</BODY>
</HTML>
Line Break Tag <BR>
The <BR> tag is used to give a single line break. It is an empty element.
<BR> … Text …
Fig. 8.9
<HTML>
<BODY>
This is an example<BR>to display line break.
</BODY>
<HTML>
No Break Tag <NOBR>
The opposite of <BR> tag. It is used to prevent any line breaks in the
text enclosed between the tags. (Fig. 8.10)
<HTML>
<BODY>
<NOBR> This is a long piece of text which explains the concept of no
line breaks in a paragraph.
</NOBR>
</BODY>
</HTML>
Formatting Tag
Used to give formatting effects to the text in a web page.
Bold Tag
It helps to display the text in bold. It is a container element.
Fig. 8.11
<HTML>
<BODY>
<B>Click Start</B> is an interesting series of books for students.
</Body>
</HTML>
Italic Tag <I>
It helps to display the text in italics.
Fig. 8.12
<HTML>
<BODY>
<I>Truth</I> gives a short answer; lies go round about.
</BODY>
</HTML>
Underline Tag <U>
It helps to underline the text.
<HTML>
<BODY>
<U>If at first you don’t succeed, try, try, try again.
</U>
</BODY>
</HTML>
Strikethrough Tag <STRIKE>
This is used to strike a line through the middle of the text.
<HTML>
<BODY>
HTML is <STRIKE>
Not</STRIKE>
a markup language
</BODY>
</HTML>
Superscript Tag <SUP>
It is used to display the text in the superscript format.
Fig. 8.15
<HTML>
<BODY>
X<SUP>2</SUP>+ Y <SUP>2
</SUP>
</BODY>
</HTML>
Subscript Tag <SUB>
Used to display the text in the subscript format.
<HTML>
<BODY>
<P> The chemical formula of water is H<SUB>2</SUB>0
</P>
</BODY>
</HTML>
Center Tag <CENTER>
It displays the text or an image in the center of the web page.
<HTML>
<BODY>
<CENTER>Center text
</CENTER>
</BODY>
</HTML>
Horizontal Rule Tag <HR>
This is used to create a horizontal rule or a line on your HTML
document.
1. For thickness of the line: size=“”
2. For line color: color=“”
3. For length of the line: width=“”
4. For alignment of line: align=“”
5. To make a solid line: noshade
<HTML>
<BODY>
<H1>This is an example of the horizontal line.</H1>
<BR>
<HR size=“4” width=“50%” align=“center” noshade>
</BODY>
</HTML>
Comment Tag
Used to insert comments in the HTML code that you use. It is a
container tag. Fig. 8.19
<HTML>
<BODY>
<H1><CENTER>Click Start</CENTER><H1>
<!—This is the headline tag 
<BR>
<HR size=“4” width=“50%” align=“center” noshade>
<!—This is to draw a horizontal line>
</BODY>
</HTML>
Inserting Images
You can also insert images in a web page using HTML tags.
<IMG scr=“image name”>
1. Scr: It stands for source.
2. Align: This attribute specifies the position of the image on the web
page.
3. Height: This attribute specifies the width of the image.
4. Border: It is a numeric value which sets the width of the border around
the image.
5. Alt: This attribute assigns an alternative text to be displayed if the
image is not available.
Hyperlinks in HTML
Linking is the most powerful tool in HTML. The tags used to produce
links is called the Anchor tag, or <A> tag.
1. Href: This attribute is actually responsible for creating links.
<A href=“URL”>Link text</A>
2. Name: This attribute is used to name a portion of a same document
or another document.
<A name=“A1”>
3. Title: This attribute gives additional information that pops up when
the mouse moves over it.
<A href=http://cambridgeindia.org>
4. Target: This attribute is used to specify where the linked document
will open.
<A href= “http://cambridgeindia.org” target=“blank”> Target
Anchor</A>
External Linking
When you link 2 different documents then it is known as external
linking. You can also link to just a portion of another document instead
of the whole document by naming a portion by using name attribute of
<A> tag.
Define Colors for All Links on the Web Page
1. Link: Standard link or the unvisited link is when you are yet to visit
the web page. Its default color is blue -#0000FF.
2. Vlink: Visited link is when you visit a link and then come back to
the web page where the hyperlink is created. Its default color is
purple -# 800080.
3. Alink: Active link is when you place the mouse on the hyperlink
before you click to visit it. Its default color is red -# FF000.

You might also like