HTML
First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.
HTML is a markup language used for structuring and presenting content on the World Wide Web.
HTML is used to create electronic documents (called web pages) that are displayed on the World Wide Web.
Each web page contains a series of connections to other pages called hyperlinks.
HTML is definitely not a programming language but a mark-up language.
HTML5 was the fifth and last major version of HTML that is a World Wide Web Consortium recommendation.
It was released on 28th October 2014.
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 are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
HTML page structure:
The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
HTML Tags/Elements
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name
The start tag is also called the opening tag, and the end tag the closing tag.
Tags tells the browser about content display property. If a tag is not closed then browser applies that effect till end of page.
<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code. The <html> tag represents the root of an HTML document.
It is the container for all other HTML elements, which are enclosed in <html> ………. </html>
<head>: The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.
All the HTML elements that can be used inside the <head> element are:
- <title>
- <style>
- <title>
- <base>
- <noscript>
- <script>
- <meta>
- <link>
The <title> element: defines a title to web page which is displayed in the title bar of the Browser window.
It provides a title for the page when it is added to favorites
It displays a title for the page in search-engine results
<body>:
The <body> tag defines the document's body. This is the section which is displayed on the web page.
Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
which are enclosed in <body> …… </body>
HTML page can be created using any text editor (notepad).
Then save that file using .htm or .html extension and
open that file in a Web browser E.g. Chrome, Mozilla Firefox, Opera, Edge, Internet Explorer, etc.
Note: HTML is not case sensitive. You can write tags in small or capital letters or in combination
Example No. 1
Type the following html code in notepad and save it with firstpage.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>
<BODY bgcolor=cyan text=blue>
This is my first web page. <BR> I love HTML.
</BODY>
</HTML>
In the above example <BR> tag is used to give a line break.
Attributes of <body> tag:
background – contains the source URL of image file to be displayed in the background.
bgcolor – specifies the color name or color code for the background color of the web page.
text – specifies the color for the text in the web page.
link – specifies the color for the links in the web page.
alink - specifies the color of an active link in the web page.
vlink - specifies the color of an visited link in the web page.
The attributes link, alink and vlink will be used when we have hyperlinks in the web page.
Example No. 2
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My School </TITLE>
</HEAD>
<BODY background="school.jpg" text=blue>
<H1> St. Judes High School </H1>
<P>
Started in 1995, <B>St. Jude's High School</B>
is a Roman Catholic, Co-ed school having till ISC Class 12.
The school is administered by <I>St. Dominic Savio
Educational Society </I>which is committed to providing
<U>quality education</U> to children.
</P>
</BODY>
</HTML>
In above example background attribute used in <body> tag to specify the background picture. Copy picture file in the same folder where you will be saving the html file.
Some formatting tags are used like <b>, <i> and <u>
Formatting Tags
(All the tags will have a close tag)
<b> ….. </b> – Displays the text in bold style.
<i> ….. </i> – Displays the text in italics style.
<u> ….. </u> – Underlines the text.
<tt> ….. </tt> – Displays text in mono spaced font style.
<strong> ….. </strong> – Displays text bold style.
<em> ….. </em> – Defines emphasized text.(browsers displays in italics style).
<mark> ….. </mark> – Displays marked or highlighted text
<del> ….. </del> – Displays deleted or removed text.
<ins> ….. </ins> – Defines inserted(added) text.
<sub> ….. </sub> – Defines subscripted text.
<sup> ….. </sup> – Defines superscripted text.
<small> ….. </small> – Reduces the font size of text by 1 unit.
<big>….. </big> – Increases the font size of text by 1 unit.
<font> ….. </font> – Changes the font of the text.
Attributes of <font> tag:
Face – specifies the name of the font
Size – specifies the size of the letters values: 1 to 7
Color – specifies the color name or color code
Example No. 3
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Formatting tag example </TITLE>
</HEAD>
<BODY bgcolor=cyan text=blue>
<h1> Formatting in HTML </h1>
<strong> The different programming languages are: </strong>
<br>
<tt> Java </tt> <br>
<small> Python </small> <br>
<del> Ruby </del> <br>
<big> React </big> <br>
<mark> JavaScript </mark> <br>
<br>
<hr color="green" width="50%" size=3>
Example of sup and sub tags : <br>
a<sup>2</sup> + b<sup>2</sup> <br> <br>
H<sub>2</sub>SO<sub>4</sub>
</BODY>
</HTML>
First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language.
HTML is a markup language used for structuring and presenting content on the World Wide Web.
HTML is used to create electronic documents (called web pages) that are displayed on the World Wide Web.
Each web page contains a series of connections to other pages called hyperlinks.
HTML is definitely not a programming language but a mark-up language.
HTML5 was the fifth and last major version of HTML that is a World Wide Web Consortium recommendation.
It was released on 28th October 2014.
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 are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page
HTML page structure:
The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
HTML Tags/Elements
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name
The start tag is also called the opening tag, and the end tag the closing tag.
Tags tells the browser about content display property. If a tag is not closed then browser applies that effect till end of page.
<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code. The <html> tag represents the root of an HTML document.
It is the container for all other HTML elements, which are enclosed in <html> ………. </html>
<head>: The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.
All the HTML elements that can be used inside the <head> element are:
- <title>
- <style>
- <title>
- <base>
- <noscript>
- <script>
- <meta>
- <link>
The <title> element: defines a title to web page which is displayed in the title bar of the Browser window.
It provides a title for the page when it is added to favorites
It displays a title for the page in search-engine results
<body>:
The <body> tag defines the document's body. This is the section which is displayed on the web page.
Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
which are enclosed in <body> …… </body>
HTML page can be created using any text editor (notepad).
Then save that file using .htm or .html extension and
open that file in a Web browser E.g. Chrome, Mozilla Firefox, Opera, Edge, Internet Explorer, etc.
Note: HTML is not case sensitive. You can write tags in small or capital letters or in combination
Example No. 1
Type the following html code in notepad and save it with firstpage.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>
</HEAD>
<BODY bgcolor=cyan text=blue>
This is my first web page. <BR> I love HTML.
</BODY>
</HTML>
In the above example <BR> tag is used to give a line break.
Attributes of <body> tag:
background – contains the source URL of image file to be displayed in the background.
bgcolor – specifies the color name or color code for the background color of the web page.
text – specifies the color for the text in the web page.
link – specifies the color for the links in the web page.
alink - specifies the color of an active link in the web page.
vlink - specifies the color of an visited link in the web page.
The attributes link, alink and vlink will be used when we have hyperlinks in the web page.
Example No. 2
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> My School </TITLE>
</HEAD>
<BODY background="school.jpg" text=blue>
<H1> St. Judes High School </H1>
<P>
Started in 1995, <B>St. Jude's High School</B>
is a Roman Catholic, Co-ed school having till ISC Class 12.
The school is administered by <I>St. Dominic Savio
Educational Society </I>which is committed to providing
<U>quality education</U> to children.
</P>
</BODY>
</HTML>
In above example background attribute used in <body> tag to specify the background picture. Copy picture file in the same folder where you will be saving the html file.
Some formatting tags are used like <b>, <i> and <u>
Formatting Tags
(All the tags will have a close tag)
<b> ….. </b> – Displays the text in bold style.
<i> ….. </i> – Displays the text in italics style.
<u> ….. </u> – Underlines the text.
<tt> ….. </tt> – Displays text in mono spaced font style.
<strong> ….. </strong> – Displays text bold style.
<em> ….. </em> – Defines emphasized text.(browsers displays in italics style).
<mark> ….. </mark> – Displays marked or highlighted text
<del> ….. </del> – Displays deleted or removed text.
<ins> ….. </ins> – Defines inserted(added) text.
<sub> ….. </sub> – Defines subscripted text.
<sup> ….. </sup> – Defines superscripted text.
<small> ….. </small> – Reduces the font size of text by 1 unit.
<big>….. </big> – Increases the font size of text by 1 unit.
<font> ….. </font> – Changes the font of the text.
Attributes of <font> tag:
Face – specifies the name of the font
Size – specifies the size of the letters values: 1 to 7
Color – specifies the color name or color code
Example No. 3
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Formatting tag example </TITLE>
</HEAD>
<BODY bgcolor=cyan text=blue>
<h1> Formatting in HTML </h1>
<strong> The different programming languages are: </strong>
<br>
<tt> Java </tt> <br>
<small> Python </small> <br>
<del> Ruby </del> <br>
<big> React </big> <br>
<mark> JavaScript </mark> <br>
<br>
<hr color="green" width="50%" size=3>
Example of sup and sub tags : <br>
a<sup>2</sup> + b<sup>2</sup> <br> <br>
H<sub>2</sub>SO<sub>4</sub>
</BODY>
</HTML>
Attributes of an html element
- An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag.
- An element's start tag may contain any number of space separated attribute/value pairs.
- An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag.
- An element's start tag may contain any number of space separated attribute/value pairs.
<hr> tag
It is used to display horizontal ruled line. The attributes of <hr> are:
color – sets the color for the ruled line.
width – specifies the length of line in % or pixels
size – sets the thickness of the line.
Example: <hr color=blue width=“50%” size=4>
It is used to display horizontal ruled line. The attributes of <hr> are:
color – sets the color for the ruled line.
width – specifies the length of line in % or pixels
size – sets the thickness of the line.
color – sets the color for the ruled line.
width – specifies the length of line in % or pixels
size – sets the thickness of the line.
Example: <hr color=blue width=“50%” size=4>
Headings in HTML
HTML provides six level of heading tags.
The range is from 1 to 6.
Header tags will display text in bold and large size.
<H1> is largest level heading.
HTML provides an additional blank line before and after a heading in a web page.
Align attribute is used to specify horizontal alignment. (left, center and right)
Examples
<H1> Advanced Web Designing</H1>
<H2 align=“center”>HTML Forms</H2>
HTML provides six level of heading tags.
The range is from 1 to 6.
Header tags will display text in bold and large size.
Header tags will display text in bold and large size.
<H1> is largest level heading.
HTML provides an additional blank line before and after a heading in a web page.
Align attribute is used to specify horizontal alignment. (left, center and right)
Align attribute is used to specify horizontal alignment. (left, center and right)
Examples
<H1> Advanced Web Designing</H1>
<H2 align=“center”>HTML Forms</H2>
<H1> Advanced Web Designing</H1>
<H2 align=“center”>HTML Forms</H2>
Paragraphs in HTML
<p> tag is used to start a paragraph in HTML
Align attribute is used to set the alignment of the paragraph with respect to web page
The paragraph ends with </p>
Example:
<p>The Internet is a powerful media to transmit information. The pages of information displayed on the internet are referred to as webpages.</p>
Example :
Output:
<p> tag is used to start a paragraph in HTML
Align attribute is used to set the alignment of the paragraph with respect to web page
The paragraph ends with </p>
Align attribute is used to set the alignment of the paragraph with respect to web page
The paragraph ends with </p>
Example:
<p>The Internet is a powerful media to transmit information. The pages of information displayed on the internet are referred to as webpages.</p>
Example :
Output:
Text Formatting Elements
<strong> – Displays text bold style.
<mark> – Displays marked or highlighted text
<del> – Displays deleted or removed text.
<ins> – Defines inserted(added) text.
<sup> – Displays text in superscript form.
<sub> – Displays text in subscript form.
<code> – To represent program code text.
<strong> – Displays text bold style.
<mark> – Displays marked or highlighted text
<del> – Displays deleted or removed text.
<ins> – Defines inserted(added) text.
<sup> – Displays text in superscript form.
<sub> – Displays text in subscript form.
<code> – To represent program code text.
<mark> – Displays marked or highlighted text
<del> – Displays deleted or removed text.
<ins> – Defines inserted(added) text.
<sup> – Displays text in superscript form.
<sub> – Displays text in subscript form.
<code> – To represent program code text.
<font> tag
<font> – Specify the font size, font face and color of text.
Attributes :
color - specifies the color of the text
face - specifies the font of the text
size - specifies the font size (Range 1 to 7)
Output:
<font> – Specify the font size, font face and color of text.
Attributes :
color - specifies the color of the text
face - specifies the font of the text
size - specifies the font size (Range 1 to 7)
Attributes :
color - specifies the color of the text
face - specifies the font of the text
size - specifies the font size (Range 1 to 7)
Output:
Inserting Images in HTML
<img> tag is used to insert an image within a web page. It is an empty tag.
<img> tag is used to insert an image within a web page. It is an empty tag.
Attributes of <img> tag:
Attribute
Value
Description
src
URL
Specifies the URL of an image
Align
top
bottom
middle
left
right
Specifies the alignment of an image according to surrounding elements
height
pixels
Specifies the height of an image
width
pixels
Specifies the width of an image
alt
text
Specifies an alternate text for an image
border
pixels
Specifies the width of the border around an image
Attribute
|
Value
|
Description
|
src
|
URL
|
Specifies the URL of an image
|
Align
|
top
bottom middle left right |
Specifies the alignment of an image according to surrounding elements
|
height
|
pixels
|
Specifies the height of an image
|
width
|
pixels
|
Specifies the width of an image
|
alt
|
text
|
Specifies an alternate text for an image
|
border
|
pixels
|
Specifies the width of the border around an image
|
Types of Images:Image Format Types
File Extension
WebP (Web Picture)
.webp
JPEG (Joint Photographic Experts Group)
.jpg or .jpeg
PNG (Portable Network Graphics)
.png
GIF (Graphics Interchange Format)
.gif
BMP (Bitmap)
.bmp
TIFF(Tagged Image File Format)
.tiff
File Extension
| |
WebP (Web Picture)
|
.webp
|
JPEG (Joint Photographic Experts Group)
|
.jpg or .jpeg
|
PNG (Portable Network Graphics)
|
.png
|
GIF (Graphics Interchange Format)
|
.gif
|
BMP (Bitmap)
|
.bmp
|
TIFF(Tagged Image File Format)
|
.tiff
|
Example:
Output:
HTML Symbols
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.
What is HTML Entity?
Entities are used to display reserved characters and symbols in HTML.
A character entity looks like this:
&entity_name;
or
&#entity_number;
Entities are used to display reserved characters and symbols in HTML.
A character entity looks like this:
&entity_name;
or
&#entity_number;
A character entity looks like this:
&entity_name;
or
&#entity_number;
Some of the Mathematical Symbols supported in HTML
Currency and other symbols :
To insert non breaking space in HTML web page
HTML Colors
Color values in HTML can be given in three ways:
A) Color Name E.g. Orange, Tomato
B) Hex Color Code E.g. #ff6347
C) RGB Code E.g. RGB(255, 99, 71)
HTML supports 140 standard color names.
Color values in HTML can be given in three ways:
A) Color Name E.g. Orange, Tomato
B) Hex Color Code E.g. #ff6347
C) RGB Code E.g. RGB(255, 99, 71)
HTML supports 140 standard color names.
A) Color Name E.g. Orange, Tomato
B) Hex Color Code E.g. #ff6347
C) RGB Code E.g. RGB(255, 99, 71)
HTML supports 140 standard color names.
Example:
<body bgcolor=“LawnGreen”>
<body bgcolor=“#7CFC00”>
<body bgcolor=“rgb(124, 252, 0)”>
<body bgcolor=“#7CFC00”>
<body bgcolor=“rgb(124, 252, 0)”>
For HTML Symbols & Color Names
https://www.rapidtables.com/web/html/html-codes.html
https://www.w3schools.com/html/html_symbols.asp
https://www.rapidtables.com/web/html/html-codes.html
https://www.w3schools.com/html/html_symbols.asp
https://www.w3schools.com/html/html_symbols.asp
For HTML Color Names and Codes
https://www.rapidtables.com/web/color/html-color-codes.html
https://www.w3schools.com/colors/colors_names.asp
https://www.w3schools.com/colors/colors_names.asp
No comments:
Post a Comment