Class 1 HTML Tags

HTML Notes Page No.
HTML
HTML stands for Hyper Text Markup Language
With HTML you can create your own Website.
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>LBS CENTRE</title>
</head>
<body>
<h1>LIST OF COMPUTER COURSES</h1>
<p>PGDCA</p>
<p>DCA</p>
</body>
</html>
OUTPUT
LIST OF COMPUTER COURSES
PGDCA
DCA
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc. It has a start tag <body> and
an end tag </body>.
 The <h1> element defines a large heading. It has a start tag <h1> and an end tag </h1>.
HTML Notes Page No.2
 The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<html>
<head>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
OUTPUT
This is heading 1
This is heading 2
This is heading 3
Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph. <br>And this paragraph is displayed in two
lines</p>
Empty HTML Elements – br tag and hr tag
Elements with no content or end tag.
Line break br tag
Br tag is used to insert a line break. (ie. To move to the next line ).
<p>This is a <br> paragraph with a line break.</p>
Horizontal Rules
The <hr> tag defines a horizontal ruler (line).

Formatting Elements
Formatting elements were designed to display special types of text:
 <b> - Bold text
 <i> - Italic text
 <sub> - Subscript text
 <sup> - Superscript text
Example –HTML program which use the tags - hr, br, b, i and u.
<html>
<head>
</head>
<body>
<h1> HTML program </h1>
<h2> Use of Bold (b tag), Italics (i tag), Underline (u tag), Horizontal Ruler (hr tag) and Break
tags (br tag) </h2>
<hr align=left width=200>
<b>LBS CENTRE</b>
<br>
<i>LBS CENTRE</i>
<br>
<u>LBS CENTRE</u>
<br>
</body>
</html>
HyperLinks
<a> tag : HTML links are defined with the <a> tag.
Example
<a href="http://www.lbscentre.kerala.gov.in">This is a link</a>
href attribute : The link's destination (URL – Uniform Resource Locator) is specified in
the href attribute.
Images
<img> tag : HTML images are defined with the <img> tag.
src attribute : specifies the path to the image to be displayed.
Example
<img src="flowers.jpg" alt="Unable to load Picture file" width="104" height="142">
alt Attribute : Specifies an alternate text for an image, if the image for some reason cannot be
displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a
screen reader.
width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies the width and
height of the image (in pixels).
HTML Comment Tags

HTML comments are not displayed in the browser. We can write the details about the program
like, name of the person who wrote the program, date, purpose of the program, etc. as comments,
so that a person who opens the HTML program gets an idea about the program.
You can add comments to your HTML source by using the following syntax:
<! Write your comments here >
Example Use of that tags UL, OL, MARQUEE
<html>
<body bgcolor=aqua>
<! This Program was written by Amal. This program displays the details of courses>
<h1>
LBS CENTRE FOR SCIIENCE AND TECHNOLOGY
</h1>
<h3 align=center>
<b><u>LIST OF COURSES</b></u>
</h3>
<ol>
<li> PGDCA </li>
<li> DCA </li>
<li>HARDWARE </li>
</ol>
<h3 align=center>
<b><u>CLASS TIMING</b></u>
</h3>
<ul>
<li> 10:00 AM TO 12:00 NOON </li>
<li> 02:00 PM TO 04:00 PM </li>
<li>05:30 PM TO 07:30 PM </li>
</ul>
<hr size=15px color=red>
<p align=center>
On-line classes from 8.00 am to 9.00 pm
</p>
<marquee>
Courses starts from July.
</marquee>
<! Comments are not displayed in the browser >
</body>
</html>How to View HTML Source (HTML Program)?
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in
Edge), or similar in other browsers. This will open a window containing the HTML source code
of the page.

Class 1 HTML Tags

Uploaded by

Copyright:

Available Formats

You might also like

Class 1 HTML Tags

Uploaded by

Document Information

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

Class 1 HTML Tags

Uploaded by

Copyright:

Available Formats

HTML Notes Page No.

LIST OF COMPUTER COURSES

The <hr> tag defines a horizontal ruler (line).

HTML Comment Tags

You might also like