Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
71 views

HTML Notes Final

HTML is a markup language used to structure and present content on the web. It uses tags to provide semantic meaning to text and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> to contain the visible page content, and other tags like <h1>-<h6> for headings, <p> for paragraphs, and <br> for line breaks. Attributes can be added to tags to provide additional information.

Uploaded by

Zᴅx GAMɪɴɢ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
71 views

HTML Notes Final

HTML is a markup language used to structure and present content on the web. It uses tags to provide semantic meaning to text and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> to contain the visible page content, and other tags like <h1>-<h6> for headings, <p> for paragraphs, and <br> for line breaks. Attributes can be added to tags to provide additional information.

Uploaded by

Zᴅx GAMɪɴɢ
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Introduction to HTML

HTML stands for Hypertext Markup Language. It is a markup language that describes the
structure of the web page. It allows us to create web pages that contain paragraphs, headings,
links and block quotes. The first version of HTML was written by Tim Berners-Lee in 1993.
Key features of HTML:

• It is a platform-independent language.
• It is not case-sensitive language.
• It is a very easy and simple language.
• It allows us to add a link on the web page.
• It provides a flexible way to design web pages along with text.

Hypertext: Hypertext is a piece of ordinary text that has special feature of


linking to other documents or web pages.
Markup Language: It is a language that uses special symbols called Tags to
mark up a text document and instructs the browser how to display the text.
Tools Needed: We require two basic tools for working with HTML:
• HTML editor for creating and saving the HTML documents.
• A web browser for viewing the HTML documents. A web browser is an
application software that allows us to access the web pages on our
computer. Example are Google chrome, Internet explorer etc.
Types of HTML editor: There are mainly two types of HTML editors named
WYSIWYG editor and text editor.
• WYSIWYG editor stands for What You See Is What You Get. This type of
editor allows the developer to see what the end result will look like when
the document is created. Examples of WYSIWYG editors are Adobe
Dreamweaver, Google web designer etc.
• Text editor: We can create HTML documents using normal text editors like
Notepad or wordpad. The user should have a proper knowledge of the
HTML commands to develop a web page.
Basic HTML Document
In its simplest form, following is an example of an HTML document:
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
A HTML page is divided into two sections called Head and Body.
• Head contains the information which is not to be shown on the web page.
• Body contains the information which is to be shown on the web page.

HTML Tags and Attributes: As we know that HTML is a markup language. It uses tags
to markup the content of the web pages. These tags also have their attributes. Let us
learn more about tags and attributes.
TAGS: Tags are the basic building blocks of a web page. They tell the browser how the
information is to be displayed on the web page. Tags do not appear in the browser window
but they affect the display of the text and non-text items in it. Each tag in HTML follows
specific rules and syntax, HTML tags are not case sensitive.
In HTML document, a tag name begins with an opening angular bracket (<) and ends with
closing angular bracket (>). For example, <Tag name> content </Tag name>
Both opening and closing tags are same. The only difference is that the closing tag contains a
forward slash in front of the tag name. Most of the tags in HTML have opening and closing
tags. A combination of opening tag, content, and closing tag is called an element. The HTML
tags can be categorised as:
• Container Tags: The tags that have both opening and closing tags are called Container
Tags. For example, <B>……</B>, <Head>……</Head>
• Empty Tags: Empty tags contains only opening tags. They do not have closing tags.
These tags do not enclose any data. For example, <BR>, <HR> etc.
HTML tags can also be further classified as:
• Block Level Tags: The block level tags take up the full width available and by default
begin on a new line. Some of the block level tags are Paragraph <P>, headings <H1>
to <H6>, Horizontal Rule <HR>, etc.
• Text Level Tags: The text level tags are used to mark-up parts of text. These tags do
not start with new line. Some of the text level tags are Bold <B>, Superscript <SUP>,
Italic <I>, Subscript <SUB>, etc.
Nesting of Tags: Nesting of tags means that you can start a new tag before closing the
previous tag. The only point to remember is that tags are nested on LIFO principle, that is,
Last in First Out. This means that the tag that has been opened last needs to be closed first.

ATTRIBUTES: An attribute is a property that provides some additional information about a


tag. It enhances the functionality of a tag. It always specified inside the opening tag. All
attributes consist of two parts - a name and a value.
The 'name' is the property that you want to set.
The ‘value’ is what that you want for the respective property. For example,
<BODY BGCOLOR="yellow"> :The BGCOLOR attribute of the <BODY> tag is used to
add a background colour to the body of the web page.
<HR WIDTH="501"> :The WIDTH is the attribute of the <HR> tag which specifies the
width of the horizontal line in pixels or percentage. By default, the width is 100%.

Rules for writing HTML codes:


1. Container tags should always be closed properly.
2. Values given to the attributes should be enclosed within the double quotes.
3. Tag name should not contain spaces.
4. There should be no spaces between < and > in a tag.
5. Tags must be nested correctly.

Creating and Saving an HTML Document


Follow the steps to create HTML document.
• Open a text editor Notepad.
• Write your HTML code into Notepad.
• Save the file with .html extension.
• Run the file.

Basic HTML Tags


HTML provides various tags such as <HTML>, <HEAD>, <TITLE>, <BODY> etc.

The <HTML> Tag: The <HTML tag tells the web browser that the text contained between
<HTML and </HTML> is a web page and can be viewed using a web browser. Every web
page coding must starts with the <HTML> tag and ends with the </HTML> tag.
The <HEAD> Tag: The <HEAD> tag defines header area of your web page. The
information given in <HEAD> tag Tells the computer that this information is not to be shown
on the web page. The <HEAD> is a container tag used in pair as <HEAD> and </HEAD>.
Every web page coding must have its header tag.

The <TITLE> Tag: The <TITLE> tag tells the web browser that the text contained between
<TITLE> and </TITLE> does not form part of the web page. It will be shown on the Title
Bar of your web browser. The use of <TITLE> tag is not mandatory. If you do not want to
give title to your web page, you can skip it. Your web browser will show file name and its
path as title of your web page.

The <BODY> Tag: The <BODY> tag tells the web browser that the text contained between
<BODY> and </BODY> tags is to be shown on the web page. It is a container tag. The
<BODY> tag has the following attributes:
• BGCOLOR: This attribute defines a colour to the background of your web page. It can
be used as <BODY BGCOLOR="red">
• TEXT: This attribute defines a colour to the text of your web page. It can be used as
<BODY TEXT="blue">
• BACKGROUND: This inserts the image as the background of the web page:
<BODY BACKGROUND="image.jpg">
Different attributes can be used simultaneously like this:
<BODY BGCOLOR="red" TEXT="white">

The <Hn> Tag: Every chapter in a book has various headings and sub-headings. These are
known as levels of headings. The heading tags are used to give similar effect to your web
page. These are container tags with a start tag and an end tag. HTML can define up to 6
levels of headings from hi to h6. The h1 is the first level of heading and the h6 is the last
level of heading/ sub-heading. For example,
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Heading tags have ALIGN attribute. The ALIGN attribute allows you to align your heading
to left side, centre or right side of your web page. It can be used as:
<h1 align="left"> aligns towards left of webpage </h1>
<h2 align="center"> aligns towards center of webpage </h2>
<h3 align="right"> aligns towards sight of webpage </h3>
The <p> Tag: The Paragraph tag is written as <P> This tag defines start and end of a
paragraph in the text. It is both a container as well as an empty tag. Whenever you want to
start a new paragraph, you can start the paragraph tag using <P> without closing the previous
paragraph tag. In order to avoid confusion, it is advised to use this tag as a container tag
starting with the <P> tag and ending with the </P> tag. The paragraph tag automatically
inserts a blank line between two paragraphs.
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

The <P> tag use the ALIGN attribute. The ALIGN attribute can take three values:
• Left: It aligns the text to the left of the web page. For example,
<p align="left"> Animation </p>
• Right: It aligns the text to the right of the web page. For example,
<p align="right"> Animation </p>
• Center: It aligns the text to the center of the web page. For example,
<p align=" center "> Animation </p>

The <BR> Tag: The Line Break tag is written as <BR>. This tag is used when you want to
start a new line, but do not want to start a new paragraph. This means that you want your text
to come in next line without leaving a blank line in between. This tag forces a line break
wherever you will place it. It is an empty tag. It is used as under:
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>

The <HR> Tag: The Horizontal ruler tag is written as <HR>. This tag is used when you
want to divide your web page into different sections. It is also used when you want to draw a
line between two paragraphs. It is an empty tag. It gives a horizontal ruler (line) on the page
and then the next element will be shown in a new line after the ruler.
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>

The HR tag has following attributes:


• WIDTH: It displays the horizontal ruler of the specified width in pixels or in
percentage. <hr width="550"s or chr width-"HORS
• SIZE: It controls the height or the thickness of the horizontal ruler. <hr size="4">
• COLOR: It is used to apply the background color. <hr color "pink">
• ALIGN: It is used to align the horizontal ruler left, right and center.
<hr align="right">

The <B> Tag: The Bold tag is written as <B>, This tag is used to give bold effect to your
text. You need to tell the web browser when to start using the bold effect and where to stop
using the bold effect. It is a container tag and used in pair as <B> and </B>.

The <I> Tag: The Italic tag is written as <I>. This tag is used to give italic effect to your
text. You need to tell the web browser when to start using the italic effect and where to stop
using the italic effect. It is also a container tag and used in pair as <I> and </I>.

The <U> Tag: The Underline tag is written as <U>. This tag is used to underline your text.
You need to tell the web browser when to start underlining and where to stop underlining the
text. It is a container tag and used in pair as <U> and </U>.

The <SUP> Tag: The superscript tag is written as <SUP>. This tag is used to turn the
enclosed text into a superscript. For example, E=mc² is coded as E=mc<sup>2</sup>

The <SUB> Tag: The subscript tag is written as <SUB>. This tag is used to turn the
enclosed text into a subscript. For example, H₂O is coded as H<sub>2</sub>0
The <FONT> Tag: HTML provides the <FONT> tag to change the certain properties such
as font size, face and colour of a block of text on a web page. To do this, the <FONT> tag
provides three attributes which you can use in the following way:
• FACE: It allows you to set the font family such as Times New Roman, Verdana. <font
face="Times New Roman"> Animation </p>
• SIZE: It allows you to set the font size.
<font size="4"> Animation </p>
• COLOR: It allows you to set the font color.
<font color="green"> Animation </p>
The <CENTER> Tag:
Earlier we have used the ALIGN attribute to align the text to center. HTML also provide the
<CENTER> tag which allows us to align the text in center. The <CENTER> does not have
any attribute.We can use the <CENTER> tag in the following way:
<center> text to be align in center </center>

Type the following HTML code in the notepad window and save the file with the name Environment.html

<html>
<head>
<title> Note on Environment </title>
</head>
<body bgcolor="yellow">
<font face="Ebrima" size="6" color="red">
<u> <b><p align="center">Web page on Environment </p></b></u>
</font>
<h2> Environment</h2>
<font face="ms sans serif" color="black">
<b>Environment</b> is everything that is <i>around us</i>. It can be living
(<u>biotic</u>) or non-living (<u>abiotic</u>) things. It includes physical,chemical and
other natural forces. <br>Living things live in their environment.They constantly interact
with it and adapt themselves to conditions in their environment. </font>
<hr>
<h5 align="right"> This web page has been created by </h5>
<p align="right"> <b> Enter Your Name here </b> </p>
</body>
</html>

Editing an existing HTML document: To edit a web page, you need to follow a special
procedure. Follow these steps to edit a HTML document:
1. Locate your file.
2. Right click on the file icon to open right click menu.
3. Hover mouse pointer over open with option to open a sub-menu.
4. Click on Notepad. This will open your HTML document in Notepad so that you can
make changes in the file. After making required changes, you need to save the file by
pressing the Ctrl+S keys.
If your web-page is already open in web browser, you need to press the F5 key to see the
changes you have done.
Inserting Images
Images and other graphical elements such as drawings, paintings and charts are considered as
image in the web page. HTML allows us to insert images inside the web pages through the
<IMG> tag. The <IMG> tag is an empty tag and has various attributes. The attributes of the
<IMG> tag are:
➢ SRC: It specifies the source or URL of the image that has to be inserted in the web
page. For example, <IMG SRC= “C:/Mydocuments/panda.jpg”>
➢ WIDTH: It specifies the width of the image in the web page. For example, <IMG
SRC= “C:/Mydocuments/panda.jpg” WIDTH= “50%”>
➢ HEIGHT: It specifies the height of the image in the web page. For example, <IMG
SRC= “C:/Mydocuments/panda.jpg” HEIGHT= “50%”>
➢ ALIGN: It aligns the image with respect to the text placed adjacent to the image.
Image can be aligned left, right, middle, bottom and top. For example, <IMG SRC=
“C:/Mydocuments/panda.jpg” ALIGN= “Right”>
➢ BORDER: It specifies the thickness of the border surrounding the image. For example,
<IMG SRC= “C:/Mydocuments/panda.jpg” BORDER = “4”>
Use the <img> tag to insert an image on the web page in the following way:
<html>
<head><title> Inserting Image</title>
</head>
<body>
<b>Inserting image on the web page</b>
<img src= “C:/Mydocuments/panda.jpg” width = “50%” height= “50%” align= “right”
border= “3”>
</body>
</html>

Note:Some of the image formats supported by HTML are Joint Photographic Experts Group
(JPEG), Graphics Interchange Format(GIF) and Portable Network Graphics (PNG).

Creating Marquee
HTML allows you to move your objects left, right, up and down by using the <MARQUEE>
tag. The <MARQUEE> tag is a container tag. It takes the text or image between the opening
<MARQUEE> and the closing </MARQUEE> tags. For example,
<MARQUEE> Hello! I am a moving text </MARQUEE>
Similarly, the image can also be added to this moving part or section.
< MARQUEE >< img src= “C:/Mydocuments/panda.jpg”></ MARQUEE >
The <MARQUEE> tag has the following attributes:
• Behaviour: It can have three values, which are SLIDE, SCROLL and ALTERNATE
➢ < MARQUEE BEHAVIOR= “SLIDE”>
➢ < MARQUEE BEHAVIOR= “SCROLL”>
➢ < MARQUEE BEHAVIOR= “ALTERNATE”>
• Direction: It allows you to set the direction in which the object will move.
➢ < MARQUEE DIRECTION= “UP”>
➢ < MARQUEE DIRECTION= “DOWN”>
➢ < MARQUEE DIRECTION= “RIGHT”>
➢ < MARQUEE DIRECTION= “LEFT”>
• Scroll Amount: It indicates the speed of the moving object.
➢ < MARQUEE SCROLLAMOUNT= “1”>
➢ < MARQUEE SCROLLAMOUNT= “10”>
➢ < MARQUEE SCROLLAMOUNT= “20”>
Note: The SCROLLAMOUNT = 1 means the slowest moving object.

Changing background image using BACKGROUND: The BACKGROUND attribute of


the BODY tag is used to add an image as a background for the webpage.

Short Answer type questions.


a. What is HTML?
HTML stands for Hypertext Markup Language. It is a markup language that describes the
structure of the web page. It allows us to create web web pages that contain paragraphs,
heading, links and block quotes.
b. Define container tags.
The tags that include both opening and closing tags are called Container Tags. For
example, <B>….</B>
c. How many level are used for heading in HTML?
The heading tags are used to give a similar effect to your web page. These are container
tags with a start tag and an end tag. HTML has six levels of headings such as h1, h2, h3,
h4, h5 and h6. The h1 is the first level of heading and the h6 is the last level of
heading/sub-heading.
d. What is the use of BORDER attribute in the <IMG> tag?
BORDER specifies the thickness of the border surrounding the image.

Long Answer type questions.


a. Explain the purpose of <HTML> and <BODY> tags.
The tag tells the web browser that the text contained between <HTML> and </HTML>is a
web page and can be viewed using a web browser. The <BODY> tag tells the web browser
that the text contained between <BODY> and </BODY> tags is to be shown on the web
page.

b. What are the rules required for writing HTML tags?


The rules for writing HTML tags are:
➢ Container tags should always be closed properly.
➢ Values given to the attributes should be enclosed within the double quotes.
➢ Tag name should not contain spaces.
➢ There should be no spaces between < and > in a tag.
➢ Tags must be nested correctly.
c. What is the difference between <BR> and <HR> tags?
<BR> tag is used when you want to start a new line, but do not want to start a new
paragraph. This means that you want your text to come in next line without leaving a blank
line in between. This tag forces a line break wherever you will place it.
<HR >tag is used when you want to divide your web page into different sections. It is also
used when you want to draw a horizontal line between two paragraphs.

d. Explain the purpose of the following attributes in HTML.


i. SRC ii. ALT
i. The SRC attribute specifies the source or URL of the image that has to be inserted in the
webpage.
ii. The ALT attribute specifies the alternate text to be displayed in the web browser, if the
provided image is not found.
e. Define any four attributes used with the <IMG> tag.
Different Attributes used with <IMG> tag are SRC, WIDTH, HEIGHT, ALIGN, BORDER
and ALT.
i. ALIGN: It aligns the image with respect to the text placed adjacent to the image. Image can
be aligned left, right, bottom and top.
ii. BORDER: It specifies the thickness of the border surrounding the image.
iii. ALT: It specifies the alternate text to be displayed in the web browser, if the provided
image is not found.
iv. SRC: It specifies the source or URL of the image that has to be inserted in the web page.
HTML Codes: (Assignment)
1. Create a webpage on the topic “Harmful effects of Plastic on Environment”. Use the
suitable image to make the web page attractive. The webpage should look like this:

2. Create a web page by using the given specifications and use the appropriate HTML
Tags.(use the image given below for reference)
• The title of the web page should be EARTH DAY.
• The background colour of the page should be ‘Cyan’.
• Bold and underline the text EARTH DAY.
• The font face, font size, and font colour of the text EARTH DAY should be MS Sans
Serif, 7, and red, respectively.
• The colour, font face, and size of the other text should be 'Black, Ebrima, and 4,
respectively.
A Sample Web page
<html>
<head>
<title>My School</title>
</head>
<body bgcolor="Mahroon" text="white">
<fontface="stencil"size="7"color="orange">
<center>MY SCHOOL</center></font>
<hr size= "10" color="white">
<img src="C:\Users\user\Desktop\download (1).png" align="right" width="15%"
height="18%">
<h1 align = "center"><b><u>Introduction</u>
</b></h1>
<center>
<font face="harrington"size="4">
The name of my School is<br><b><i> Montfort School</b></i><br>
It is situated in Roorkee city<br>
</center></font>
<hr size= "10" color="white">
<h1 align="center"><b>Vision and Mission</b></h1>
<hr size= "2" color="blue">
<h2>Vision:</h2>
<p align="center"> The Montfortian mission is to help the young develop into upright,
creative and loyal citizens imbued with love and concern for others, spiritual sensitivity
and a sense of personal freedom, liberty of thought, expression, belief, faith and
Worship, equality of status and of opportunity and fraternity assuring the dignity of the
individual and the unity and integrity of nations.</p>
<p align="center">It envisions enabling the young to develop into a holistic personality
and earn a living; and contributing to the economic, social, political and cultural
progress of the nation.</p>
<hr size= "10" color="white">
<h2>Mission:</h2>
<p align="center"> Apart from the vision of Christian schools, Montfortian education,
in particular, aims to prepare the student for a life that is worth living. As individuals
and members of the society the students need to be helped to develop qualities of the
mind and heart as well as basic skills and attitudes. To achieve this the Montfortian
education system is designed as person-oriented, social or the other oriented,
professional or work oriented, national or citizen oriented and universal brotherhood
and international understanding oriented.</p>
<p align="center">*****************</p>
</body>
</html>
OUTPUT:

You might also like