Scribd
Upload
37 views

HTML Notes

Uploaded by

SweetShraddha Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

HTML Notes

Uploaded by

SweetShraddha Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML(Hyper Text Markup Language)

What is HTML?
HTML stands for Hyper Text Markup Language. 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. HTML elements tell the browser how to display the content.
To understand "HTML" from front to back, let's look at each word that makes up the
abbreviation:
Hypertext: Hypertext simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. Hypertext is a way to link two or more web pages (HTML documents) with
each other.
Markup Language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.
Hence, HTML is a markup language which is used for creating attractive web pages
with the help of styling, and which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML tag contains different content.
Example of basic structure of HTML:

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Description of HTML Example


<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!
DOCTYPE>.
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.

Brief History of HTML:


Tim Berners-Lee is known as the father of HTML. The first available description of HTML was
a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is
HTML5, which we will learn later in this tutorial.

HTML Versions:
HTML 1.0: it was released in1991.
HTML 2.0: it was released in 1995.
HTML 3.2: it was released in 1997.
HTML 4.01: it was released in 1999.
HTML5 : The first draft of this version was announced in January 2008.

HTML text Editors


->Text editors are the programs which allow editing in a written text, hence to create a web
page we need to write our code in some text editor.
->There are various types of text editors available which you can directly download, but for a
beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
->After learning the basics, you can easily use other professional text editors which are,
Notepad++, Sublime Text, Vim, etc.
HTML code with Notepad

Step 1: Open Notepad (Windows)

Step 2: Write code in HTML


Step 3: Save the HTML file with .htm or .html extension.

Step 4: Open the HTML page in your web browser.


The final output

Building blocks of HTML


An HTML document consist of its basic building blocks which are:

o Tags: An HTML tag surrounds the content and apply meaning to it. It is written between
< > brackets.
o Attribute: An attribute in HTML provides extra information about the element, and it is
applied within the start tag. An HTML attribute contains two fields: name & value.

o Elements: An HTML element is an individual component of an HTML file. In an HTML file,


everything written within tags are termed as HTML elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and
a simple content. HTML tags contain three main parts: opening tag, content and closing tag..

All HTML tags must be enclosed within < > these brackets.
If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags).
Syntax:
<tag> content </tag>
Pair Tags : Tags which are required to open and close called pair tags.
Example : <head> ………….</head>
<body>……………. </body> etc.
Empty Tag : These tags are not required closing tags.
Example: <br>, <hr> etc.
HTML Head
The HTML <head> element is used as a container for metadata (data about data). It is
used between <html> tag and <body> tag.
The head of an HTML document is a part whose content is not displayed in the browser
on page loading.
*Metadata defines the document title, character set, styles, links, scripts, and other
meta information.
Syntax:
<head> content </head>
HTML Title
HTML title tag is used to provide a title name for your webpage. It is necessary for Search
Engine Optimization (SEO).
It is used within the <head> section to define the title of the HTML document. It appears in
the browser tab or window and provides a brief description of the webpage’s content.
Syntax:
<title> home page </title>
HTML body
The <body> tag in HTML is used to define the main content present inside an HTML
page. It is always enclosed within <HTML> tag. The <body> tag is the last child of the
<html> tag.
Syntax:
<body> content </body>
The default characteristics of a page, such as background color, font size and font width
etc. can be specified as attributes of the <BODT> tag like:
BACKGROUND
BGCOLOR
LINK, ALINK AND VLINK
LEFT MARGIN
TOP MARGIN
HTML Headings
HTML Heading tag helps us to give headings to the content of a webpage. These tags
are mainly written inside the body tag. HTML provides six heading tags from <h1> to
<h6>. Every tag displays the heading in a different font size.
Syntax:
<h1>first heading</h1>
<h2>second heading</h2>
<h3>third heading</h3>
<h4>fourth heading</h4>
<h5>fifth heading</h5>
<h6> sixth heading</h6>
Example: This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML.
<!DOCTYPE html>
<html>

<head>
<title>HTML heading tag </title>
</head>

<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>

</html>
Output:
HTML Paragraph and Break
HTML <p> tags help us to write paragraph statements on a webpage. They start with the <p>
tag and end with </p>.
Syntax:

<p> Content... </p>


HTML <br> tag is used to insert a single line break. It does not have any closing tag.
Syntax:

<br>
*br is an empty tag so it is not needed to close.
Example: <p> tag with <br> tag:
<!DOCTYPE html>
<html>

<head>
<title>
Example of paragraph and break elements
</title>
</head>

<body>
<p>
HTML stands for HyperText Markup Language. <br>
It is used to design web pages using a markup
language. <br>HTML is a combination of Hypertext
and Markup language. <br>Hypertext defines the
link between web pages. <br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>

</html>

Output:
HTML Horizontal Line
HTML <hr> tag is used to break the page into various parts, creating horizontal margins with
the help of a horizontal line running from the left to right-hand side of the page. This is also
an empty tag and doesn’t take any additional statements.
Syntax:

<hr>
Example:
<!DOCTYPE html>
<html>
<head>
<title>HOME PAGE</title>
</head>
<body>
<h1>Hello Learners</h1>
<p>
<br>
This example illustrates the use of the <hr> tag for the horizontal line in HTML. <br>
This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br>
</p>
<hr>
<p>
This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br>
This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br>
This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br>
</p>
<hr>
</body>
</html>
Output:
HTML Images
The <image> tag is used to insert an image into our web page. The source of the image to be
inserted is put inside the <img src=”source_of_image“> tag. It is an empty tag.
Syntax:

<img src=”source_of_image“>
Example:
<!DOCTYPE html>
<html>

<head>
<title>HTML img tag</title>
</head>
<body>
<h1> example of img src tag </h1> source of image
<br>
<img src="https://media.tenor.com/QkGyKMgZGKEAAAAj/blooming-flower-sticker.gif">
</body>
</html>
Output:
alt Attribute:
it provides alternative text for an image if the image cannot be displayed.
Example:
<!DOCTYPE html>
<html>

<head>
<title>HTML img tag</title>
</head>

<body>
<h1> example of img src tag </h1>

<br>
<br>
<br> source is incorrect.
<img src="ttps://media.tenor.com/QkGyKMgZGKEAAAAj/blooming-flower-sticker."
alt="flower image">
</body>
</html>
width and height Attribute:
The width and height Attribute is used to adjust the width and height of an image (in pixels).
Example:
<!DOCTYPE html>
<html>

<head>
<title>HTML img tag</title>
</head>
<body>
<h1> example of img src tag </h1>
<h2> with adjustment of 200x200</h2>
<br>
<br>
<br>
<img src="https://st5.depositphotos.com/35914836/64906/i/450/depositphotos_649066108-stock-photo-
pink-flowers-park-spring-bloosom.jpg" alt="flower image" height="200" width="200">
</body>

</html>
without adjustment:

HTML title Attribute:


The title attribute is used to explain an element by hovering the mouse over it. The behavior differs with
various elements but generally, the value is displayed while loading or hovering the mouse pointer over it.
* hovering dk vFkZ gS dlZj dks fdlh element ij ys tkuk A
Example: output
<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello Learners!">Hover to see the effect</h3>
</body>
</html>

href Attribute:
The href attribute in HTML, used with the <a> tag(anchor), specifies a link destination.
Clicking the linked text navigates to this address.
Example:
<!DOCTYPE html>
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<h1> example to show the link </h1>
<br>
<a href="https://nielit.gov.in/lucknow/index.php/">
Click to visit the site</a>
<br>
</body>
</html>
Absolute URLs:
An absolute URL provides the complete address of a webpage or file on the internet,
including the protocol “http:// or https://” domain, and path to the resource.
Example: https://www.example.com/images/logo.png
Relative URLs:
A relative URL specifies the path to a resource about the current document’s path or the base
URL of the website, without the domain name and protocol.
Example: If the current URL is “https://www.example.com/about/team.html”, a relative URL
to another page in the same directory like contact.html would simply be contact.html.
The target attribute:
The target attribute specifies where to open the linked document.
Options Description
_blank opens the linked document in a new window or tab
_self opens the linked document in the same frame
_parent opens the linked document in the parent frame
_top opens the linked document in the full body of the
window
Targetframe opens the linked document in a named targetframe

Creating image links:


To add an image as a link-
Syntax:

<a><img src=”source_of_image“ alt=”image” width=”200” height=”200”>


</a>

HTML Text Formatting:


HTML Text Formatting provides various tags for text formatting to enhance the visual
presentation of content on a webpage. You can make your text bold, italic, etc. by using some
HTML tags.
Text Formatting can be categorized into 2 techniques, i.e., the logical tag where the tags
denote the logical or semantic value of the text, and the Physical tag, which denotes the
visual appearance of the text.
Tags Descriptions
<i> Showcases italicized text.
<small> Renders text in a smaller font size.
<ins> Highlights added or inserted text.
<sub> Creates subscript text.
<strong> Emphasizes text with importance, often in bold.
<b> Displays text in a bold format.
<mark> Accentuates text with a background highlight.
<del> Strikes through text to signify deletion.
<em> Adds emphasis to text, commonly styled as italic.
<sup> Formats text as superscript.
Preserve Formatting:
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In those cases, you can use the preformatted tad <pre>.
Syntax:

<pre>
This is pre tag……..
This is pre tag…………
This is pre tag………..
This is pre tag .
</pre>

What is HTML Tables?


An HTML Table is an arrangement of data in rows and columns in tabular format.
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A
table header is defined with the “th” tag. By default, table headings are bold and centered. A
table data/cell is defined with the “td” tag.
Table Cells:
Table Cell are the building blocks for defining the Table.
Syntax:
</td> Content...</td>
Table Rows:
The rows can be formed with the help of combination of Table Cells.

Syntax:
</tr> Content...</tr>
Table Headers
The Headers are generally use to provide the Heading. The Table Headers can also be used to
add the heading to the Table.
Syntax:
</th> Content...</th>
Example:
<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

</html>

Output
Col span:
Col span
<table> Output
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

Row span:
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Lists:
HTML lists allow web developers to group a set of related items in lists.

An unordered html list:


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

An ordered list:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

HTML Description Lists:


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

output

A Description List
Coffee
- black hot drink
Milk
- white cold drink

The <form> Element


Syntax:
<form>
.
form elements
.
</form>

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of


many choices)

<input Displays a checkbox (for selecting zero or


type="checkbox"> more of many choices)

<input Displays a submit button (for submitting the


type="submit"> form)

<input Displays a clickable button


type="button">

You might also like