Scribd
Upload
199 views11 pages

STD 7 - HTML

HTML stands for Hypertext Markup Language. It uses tags to define the structure and layout of web pages. Some key points: 1. HTML is used to design web pages and is made up of text, graphics, audio and video wrapped in markup tags. 2. Tags like <p> and <br> are used to structure text content, while the <html>, <head> and <body> tags form the basic skeleton of any HTML document. 3. The <title> tag specifies the title of the document displayed in the browser's title bar or tab.

Uploaded by

Puja Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
199 views11 pages

STD 7 - HTML

HTML stands for Hypertext Markup Language. It uses tags to define the structure and layout of web pages. Some key points: 1. HTML is used to design web pages and is made up of text, graphics, audio and video wrapped in markup tags. 2. Tags like <p> and <br> are used to structure text content, while the <html>, <head> and <body> tags form the basic skeleton of any HTML document. 3. The <title> tag specifies the title of the document displayed in the browser's title bar or tab.

Uploaded by

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

Introduction to HTML

HTML– It stand for Hypertext Markup Language.

 Hypertext – It is collection of text, graphics, audio, video data and


hyperlinks.
 Markup Language – It is a way to instruct others using standard words how
to present data.
About HTML
1. HTML is used to design web pages.
2. Web pages are collection of hypertext.
3. In HTML document, we write textual data and reference of graphics,
audio and video data in plain text form.
4. These data are put inside markup codes.
5. When we open this HTML document with the help of browser, browser
uses the markup(HTML) codes to arrange and display data.
6. This browser’s view of HTML document is called Web Page
STD VII HTML R. PATHAK
Example
1. Watch given HTML document. It is
plain text document created using a
text editor application – Notepad.
2. All markup codes are in < >angle
bracket.
3. Rest are data.
4. Document has been stored as
first.html
1. Same first.html when opened using
browser, see how it looks.
2. All markup codes in < > are not
visible. They change position and
appearance of data.
3. This is what we call Web page.

STD VII HTML R. PATHAK


HTML
1. So, HTML is system to design the layout of web document/page.
2. Please note, even if Language word is part of HTML, it is not a programming language.
Rather , it is a tool to design web pages.
3. Markup codes used in HTML are known as Tags.

Tags : - Tags are HTML codes that tell browser how to display data. They are always
written inside < > angle brackets. A tag when opened is written like <title> and when
closed is written with a / sign like </title>.
Ex - <title>My First Web Page </Title>.
Remember HTML tags are not case sensitive.(Uppercase or Lowercase does not matter)
Tags are of two types:
Container Tags : - These tags need to be opened and closed. For Example <u>St.
Michael’s</u>. If closing tag is missed, browser may assume the tag is closed in the
end of document and there may be no difference in result. But for your level, closing
of container tag is mandatory. Failing which you may loose marks for the simple
reason – “Examiners are not browsers”.
Empty Tags : - These tags need to be opened but not closed. For Example <HR>. They
just carry out their job and continues.
STD VII HTML R. PATHAK
HTML Tags
Attributes : - Attributes are supporting parameters of tags. They enhance the impact
of tag. They are used along with the opening tag inside < >.
For Example : <Font size=5 color=red> St. Michael’s</Font>.
Here, Font is a container tag. Size and Color are its attributes. 5 and red are the value
of attributes respectively. So, more than one attribute separated by space can be used.

Structure of HTML Document


Each HTML Document will have following arrangement.
<HTML>
<HEAD>
--- This part will contain header part of the web page with relevant tag and
data ---
</HEAD>
<BODY>
--- This part will contain main body content of the web page with relevant
tag and data ---
</BODY>
</HTML>
STD VII HTML R. PATHAK
HTML Precautions
1. Each HTML document begins and ends with <HTML> and </HTML> tag.
2. It must have HEAD and BODY blocks as shown.
3. HTML document must be saved with .html extension.
4. While nesting tags(one inside other), make sure it follows the rules of
mathematical brackets i.e. Tags opened first must close in the last.
Overlapping of tags are not allowed

<HTML> <HTML>
<HEAD> <HEAD>
--- --- --- Correct --- --- ---
</HEAD> <BODY>
<BODY> </HEAD>
Incorrect
--- ----- --- --- ----- ---
(Overlapping)
</BODY> </BODY>
</HTML> </HTML>
STD VII HTML R. PATHAK
Steps to Create HTML Document
1. Open Notepad. Notepad is a text editing application.
 Start-> Program -> Accessories ->Notepad <HTML>
2. Type the HTML code given . <HEAD>
3. Save the document –
<Title>
 Click File-> Save As
Welcome</Title>
 Select Desktop as Folder Name on top
 Change Save as Type in bottom from Text Documents to </HEAD>
All Files. <BODY>
 Type First.html in File Name
<P> Welcome</P>
 Click Save.
<P> To</P>
Steps to View and edit document. <P> HTML</P>
1. If you have done it correctly, you should get file on desktop in </BODY>
the name of First with browser’s icon. If you are not getting,
recheck and redo the saving part. </HTML>
2. Now you have a document First.html on desktop .
3. Double Click the document. It is opened by browser giving you
the web page.
4. The same document if you Right Click and select Open with
Notepad opens in text editing mode .
5. To make changes open the document in Notepad, make
changes, save the document and reopen in browser to see the
effect.
STD VII HTML R. PATHAK
HTML Tags & Attributes
HTML tag : It is a Container Tag & Root Tag. It marks the beginning and end of a
html document. It is also a root element. All other elements of the html document
will be used inside this tag. Though it has many attributes, to configure document to
a global environment, we learn given ones only.
Attribute Value Description

dir ltr, rtl Sets the direction of page Left to Right/Right to Left

lang en, hn, sp, fr etc. Code of language for the page

Ltr is default value for dir and en is default for lang. Default means, if we don’t use these attributes, browser
assumes default value. So, <HTML> or <HTML dir=ltr lang=en>, both will have same effect on browser.
HEAD Tag: It is a Container Tag , used inside HTML tag and outside BODY tag. This  element is
the container of a set of elements that is used to give heading and title text to a web page. Other data
may be used inside HEAD tag. But we will avoid. Head tag does not have any attribute.
BODY Tag : It is a Container Tag , used inside HTML tag and outside HEAD tag. The
body element is the container for all aspects of a document that we want the users/visitor of the
page to see. It contains all other tags, data and hyperlinks of the page. It has following attributes
Attribute Value Description
text Any colour code Sets the default colour for regular text inside the tag.
bgcolor Any colour code Sets the default colour for background of the page.

 Ex 1- <BODY bgcolor=red text=green>


 Colour code can be given as the colour name. Look spelling of COLOR (American) in tags and attributes.
STD VII HTML R. PATHAK
HTML Tags & Attributes
P (Paragraph) Tag: It is a Container Tag, used inside BODY tag. The HTML <P> element
defines a paragraph. Remember, here paragraph is not only group of text. Rather, it may be
a collection of text, graphics, hyperlinks etc . Attributes of P tag:-
Attribute Value Description

align Left, right, center and justify Marks the paragraph.

<p> …….. </p> marks a paragraph. Not the enter key.


All browser ignore three non printing characters. They are multiple spaces, Tab key and Enter
key(browser converts them to one space).
Title Tag : It is a Container Tag, used inside HEAD tag. The content of this tag is displayed in the
title bar of browser’s window. If we don’t use this tag, then browser uses name of the HTML
document as title bar text. Title Text can not exceed 256 characters. It does not have any attribute.
BR Tag- Stands for Break. It is an empty tag. It is an element that creates a line break/change in
line (Carriage return) in text within an document. Remember, it is not to change paragraph. One
paragraph may have many line breaks as usually in case of a poem or an address. It simply sends
the text after it to next line. It does not give vertical spacing. It has no attributes.
HTML Code: Browser’s View:
O’er all the hilltops
<p> O’er all the hilltops<br>Is quiet now,<br> Is quiet now,
In all the treetops <br> Hearest thou <br> In all the treetops
Hardly a breath; <br> The birds are asleep in Hearest thou
Hardly a breath;
the trees: <br> Wait, soon like these The birds are asleep in the trees:
<br>Thou too shalt rest.</p> Wait, soon like these
Thou too shalt rest.
STD VII HTML R. PATHAK
HTML Tags & Attributes
HR Tag – Stands for Horizontal Rule(Line). It is an empty tag. It is an element that inserts a
horizontal rule or a thematic break to separate text or to divide section of document.
Attribute Value Description
Align Left, right, center Aligns the line.
Noshade Either the attribute is there or not. It does If used, removes the shading (3D) effect.
not have any value.
Size Pixel or % Sets the vertical height .
Width Pixel or % Sets the horizontal width
Color Color code/name Set colour for line

Highlighting Tags: These container tags are used to highlight/emphasize contents. They are
usually used inside <p> tag.
Tag Description HTML Code Output

<B> Boldfaces contents <P> St. <B>Michael’s</B> High School </P> St. Michael’s High School

<I> Italics contents <P> St. <I>Michael’s</I> High School </P> St. Michael’s High School

<U> Underlines contents <P> St. <U>Michael’s</U> High School </P> St. Michael’s High School

<SUP> Superscript <P>A<SUP>2</SUP>+B<SUP>2</SUP></P> A2+B2


<SUB> Subscript <P>2H<SUB>2</SUB>+O<SUB>2</SUB>=2H<SUB>2</ 2H2+O2=2H20
SUB>O</P>
Nesting of tag <P> St. <B><U><I>Michael’s</I></U></B> High School </P> St. Michael’s High School

STD VII HTML R. PATHAK


HTML Tags & Attributes
Font Tag: This is a container tag used to give selected fontface, colour and size to text. It has three attributes
Attribute Value Description

Face Any font name. Default is browser’s font face Sets face for the given text.

Color Any colour’s name or hexadecimal code. Default is browser’s font Sets the colour for the text.
color (Usually black)
Size Any value between 1 -7. Default is browser’s font size usually size 3. Set the font size for the text

HTML allows only seven font sizes i.e. 1(smallest),2,3,4,5,6,7(largest).


Default font size given by browser is 3.
It can be used like <Font size=4>SMHS</Font>
Remember, Size=8 will also mean Size=7 and Size=-2 will mean Size=1

Heading Tags :There are 6 container tags H1,H2, H3, H4, H5, H6 used inside body tag to give Headings
to web page. They are actually combination of P and Font tag. Content of these tags will behave as a
paragraph. H1 will give Font size 7, H2 - Font size 6, H3 - Font size 5, H4 - Font size 4, H5 - Font size 3
and H6 will give Font size 2. All of them have only one attribute.

Attribute Value Description


Align Left, Center, Right, Justify. Aligns text.

STD VII HTML R. PATHAK


Instructions
Dear Students,
Hope you are learning HTML.
Use all these tags with all their attributes.
The more you use them the more you will learn
Please note down all tags and their attributes in your
copy. It will be checked.

Thank You.
STD VII HTML R. PATHAK

You might also like