HTML Short Notes

HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a
text document with tags that tell a Web browser how to structure it to display.
HTML is being widely used to format web pages with the help of different tags available in HTML
language.
HTML Tags
HTML is a markup language and makes use of various tags to format the content. These tags are enclosed
within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags.
For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc.
Tag Description
<html> This tag encloses the complete HTML document and mainly comprises of document
header which is represented by <head>...</head> and document body which is
represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
HTML Document Structure

A typical HTML document will have the following structure:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
HTML – BASIC TAGS
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before and one line after that heading.
Example
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag.
Example
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag

Whenever we use the <br /> element, anything following it starts from the next line. This tag is an example
of an empty element, where we do not need opening and closing tags.
Example
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
All of You </p>
</body>
</html>
Centering Content
The use of <center> tag is to put any content in the center of the page or any table cell.
Example
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.
Example
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML – ELEMENTS
An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing
tag, where the element name is preceded by a forward slash as shown below with few tags:
Start Tag Content End Tag

<p> This is a paragraph content. </p>
<h1> This is a heading content. </h1>
HTML – ATTRIBUTES
An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts: a name and a value.
➢ The name is the property that a user want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the alignment of
paragraph on the page.
➢ The value is what a user want the value of the property to be set and always put within quotations.
The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive.
Example
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
The title Attribute

The title attribute gives a suggested title for the element.
Example
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text should flow.
Value Meaning
Ltr Left to right
Rtl Right to left
Example
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how right-to-left directed text.
</body>
</html>
Generic Attributes
Attribute Options Function
Align Right,left,center Horizontally align tags
Valign Top,middle,bottom Vertically align tags within an HTML element
Bgcolor numeric, hexidecimal, RGB values Places a background color behind an element
background URL Places a background image behind an element
width Numeric Value Specifies the width of tables, images, or table cells.
Height Numeric Value Specifies the height of tables, images, or table cells.
HTML-FORMATTING
It is used to indicate how text can appear in HTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Italic Text
Anything that appears within <i>...</i> element, is displayed in italicized as shown below:
Example
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italic</i> typeface.</p>
</body>
</html>
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below:
Example
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
HTML - Comments
Comment is a piece of code which is ignored by any web browser. HTML comments are placed in between
 tags. So, any content placed with-in  tags will be treated as comment and will be
completely ignored by the browser.
Example
<html>
<head> 

<title>This is document title</title>
</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html>
HTML - Images
Insert Image
Any image can be inserted in the web page by using <img> tag.
Syntax:- To use this tag:-
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag i.e. it can contain only list of attributes and it has no closing tag.
Example
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<img src="/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg">
</body>
</html>
Set Image Width/Height
The image width and height of an image can be set based on your requirement using width and height
attributes. We can specify width and height of the image in terms of either pixels or percentage of its actual
size.
Example
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of pixels using
border attribute. A thickness of 0 means, no border around the picture.
Example
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute to set it in the center
or right.
Example
html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
HTML – Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and
<td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.
Example
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border, then you can use border = "0".
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by
default.
Example
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in
your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the
distance between cell borders and the content within a cell.
Example
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or more rows.
Example
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Tables Backgrounds
You can set table background using one of the following two ways −
• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.
Example
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Height and Width
You can set a table width and height using width and height attributes. You can specify table width or
height in terms of pixels or in terms of percentage of available screen area.
Example
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This
tag is deprecated in newer version of HTML/XHTML.
Example
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
HTML - Lists
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more
list elements. Lists may contain −
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictiona
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created
by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options −
<ul type = "square">

<ul type = "disc">
<ul type = "circle">
Example
<html>
<head>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Example
Following is an example where we used <ul type = "disc"> −
<html>
<head>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Example
<html>
<head>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be
used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
Example
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number.
Following are the possible options −
<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type = "1">
<html>
<head>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Example
<html>
<head>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

HTML Short Notes

Uploaded by

Copyright:

Available Formats

HTML Short Notes

Uploaded by

Document Information

Original Description:

Original Title

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

HTML Short Notes

Uploaded by

Copyright:

Available Formats

HTML

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

HTML Document Structure

Line Break Tag

Start Tag Content End Tag

The title Attribute

background URL Places a background image behind an element

It is used to indicate how text can appear in HTML.

<head>

Syntax:- To use this tag:-

<img src = "Image URL" ... attributes-list/>

Set Image Width/Height

Set Image Alignment

<ul type = "square">

Following is an example where we used <ul type = "disc"> −

<ol type = "1"> - Default-Case Numerals.

Following is an example where we used <ol type = "1">

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.