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
HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
HTML Versions
Version Year
HTML 1991
HTML2.0 1995
HTML 3.2 1997
HTML 4.0.1 1999
XHTML 2000
HTML5 2014
Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5
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.
The <h1> element defines a large heading
The <p> element defines a paragraph
simple text editor is all you need to learn HTML.
Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML
editors.
However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
We believe that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or
TextEdit.
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files
correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files
as HTML code instead of formatted text".
Then open a new document to place the code.
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:
Program-1
Programe name (title)
<!DOCTYPE html>
<html>
<body>
|<title></title>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "[Link]" @"[Link]" and set the encoding to UTF-
8 (which is the preferred encoding for HTML files).
Program-2
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Program-3
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
(same element )
HTML <b> and <strong> Elements
HTML <i> and <em> Elements
Background Image on an HTML element
To add a background image on an HTML element, use the
Example
Add a background image on a HTML element:
<body background=”[Link]”>
Background color
Example
Add a background image on a HTML element:
<body bgcolor=red>
HTML <marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect within a
webpage. It allows content to move horizontally or vertically across the
screen, providing a simple way to add dynamic movement to elements.
Although this tag is deprecated in HTML5, it is still useful to understand its
functionality for legacy projects
Example 1: Left to Right Scrolling
Example 1: Right to Left Scrolling (by default )
Example 2: Bottom to Top Scrolling
Example 3: Up to Bottom Scrolling
Program-1
Programe name (Marquee)
<marquee bgcolor=red direction=left > marquee programe
</marquee>
HTML <font> Tag
Not Supported in HTML5.
The <font> tag was used in HTML 4 to specify the font face, font size, and color
of text.
Example
Set the color of text (with CSS):
<font color=red >This is a paragraph.</p>
Example
Set the font of text (with CSS):
< font-family:verdana">This is a paragraph.</p>
Set the size of text (with CSS):
< font Size=20px">This is a paragraph.</p>
HTML Quotation and Citation
Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner
of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another
source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Example
1.)<bdo dir="rtl">This text will be written from right to left</bdo>
2.)<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
3.)<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
4.) <p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML Comment
Example
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
ANCHOR TAG
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Exp:-<a href=[Link]>home</a>
:-<a href=[Link]>home</a>
HTML LINK TARGET
Attribute Values
Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was
clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the
window
framename Opens the linked document in the named iframe
Programe:-
<<a target="_blank|_self|_parent|_top|framename">
<<a target="_blank|_blank|_parent|_top|framename">
<a target="_blank|_top|_parent|_top|framename">
<a target="_blank|_ framename |_parent|_top|framename">
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
<table>
tr stands for table row.
Each table row starts with a <tr> and ends with a </tr> tag.
td stands for table data.
Everything between <td> and </td> is the content of a table cell.
Programe:- Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>