Module 1
Hypertext Markup
Language(HTML)
• HTML stands for Hyper Text Markup Language
• It is a standard markup language used to design the documents
displayed in the browsers as a web page.
• HTML describes the structure of a Web page
• Consists of a series of elements
• HTML elements tell the browser how to display the content
• Hypertext comes from the Hyperlink which means
connections between several pages.
• Markup means the defined elements will be the page layout and
elements within the page.
• The language combines both the feature and makes
it Hypertext Markup Language.
HTML History
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 HTML5
2016 HTML 5.1
2017 HTML5.1 2nd Edition
2017 HTML5.2
Characteristics of HTML:
• Easy to understand: It is the most straightforward language you can
say, very easy to grasp this language and easy to develop.
• Flexibility: This language is so much flexible that you can create
whatever you want, a flexible way to design web pages along with the
text.
• Linkable: You can make linkable text like users can connect from one
page to another page or website through these characteristics.
• Limitless features: You can add videos, GIFs, pictures, or sound
anything you want that will make the website more attractive and
understandable.
• Support: You can use this language to display the documents
on any platform like Windows, Linux, or Mac.
• Not a Programming Language: HTML is not a programming
language as it is only concerned with presenting the
information on the web. It is not used to program any logic but
to give structure and semantically meaning to our website.
• Language Support: HTML can support various other
languages like JavaScript, Ruby, PHP, Perl, and many more.
You can also able to run embedded python during the runtime.
Advantages of HTML
• HTML is easy to learn, easy to apply and it’s totally free you will just
need a text editor and a browser.
• HTML is supported by all the browsers and it is the most friendly search
engine.
• HTML can easily integrate with other languages and is easy to develop.
• It is the basic of all programming languages and the lightest language
ever.
• In HTML, the display changes frequently depending on the window size
or the device size making it comfortable to read by the user.
HTML Tags
1. HTML uses specified tags and attributes to instruct browsers on how to display
text, which includes what format, style, font size, and pictures to display. HTML is a
case-insensitive language.
2. In HTML, tags are classified into two types:
Paired tags: These tags come in pairs. They have both opening(< >) and closing(</
>) tags. For eg, <p> ...</p>
Empty tags: These tags do not come in pairs and contain no information. For eg,
<img src="" alt="">
Basic Structure of HTML
• An HTML document's basic structure consists of5 elements:
<!DOCTYPE>
<html>
<head>
<title>
<body>
<!DOCTYPE>
• The tag in HTML is used to inform the browser about the HTML version used in
the web page. It is referred as the document type declaration (DTD). It is not
really a tag/element but rather an instruction to the browser regarding the
document type. It is a null element that does not have a closing tag and must not
contain any content.
• <!DOCTYPE html>
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[Link]
<html>
The <html> tag in HTML is used to specify the root of HTML and XHTML pages.
The <html> tag informs the browser that this is an HTML document. It is the second
outer container for everything in an HTML document, followed by the tag. The
<html> tag requires a beginning and ending tag.
• Syntax of the <html> Tag
<!DOCTYPE html>
<html>
...
</html>
<head>
• The <head> tag in HTML is used to contain metadata (data about data). It is used
between the<html> and <body> tags.
• The head of an HTML document is a section of the document whose content is not
displayed in the browser when the page loads. It only contains HTML document
metadata, which specifies information about the HTML document.
• The document title, character set, styles, links, scripts, and other meta information are
defined by metadata.
Syntax of the <head> Tag:
<!DOCTYPE html>
<html>
<head>
...
</head>
</html>
The following is a list of metadata tags:
<title>
<style>
<meta>
<link>
<script>
<base>
<body>
• The <body> tag in HTML specifies the main content of an HTML
document that appears on the browser.
• It can contain headings, text, paragraphs, photos, tables, links,
videos, etc.
• The <body> tag must come after the <head> tag, or it must be
inserted between the </head> and </html> tags.
• This tag is essential for all HTML documents and should only be
used once throughout the document.
• Syntax of <body> tag:
<!DOCTYPE HTML>
<html>
<head>
<title>Body tag</title>
</head>
<body>
<h1>----</h1>
<p>------</p>
</body>
</html>
<font> tag
• The font tag is used to change the color, size, and style of a text.
• The base font tag is used to set all the text to the same size, color and
face.
Syntax:
<font attribute = "value"> Content </font>
<font> Example
<!DOCTYPE html>
<html>
<body>
<h2>Welcome</h2>
<!--Normal paragraph tag--
>
<p>Hello All!.</p>
<!--font tag-->
<font size="5">
Welcome</font>
</body>
<font> Size attribute
• This attribute is used to adjust the size of the text in the
HTML document using a font tag with the size attribute.
• The range of size of the font in HTML is from 1 to 7 and
the default size is 3.
<font> size attribute - Example
<font size="1">Hello
World</font>
<font> type attribute
• Font type can be set by using face attribute with font
tag in HTML document.
• But the fonts used by the user need to be installed in
the system first.
<font> Type attribute - Example
<font face="font_family">Hello
World</font>
<font> color attribute
• The HTML <font> color Attribute is used to specify the text color inside the <font>
element.
• Syntax:
<font color="color_name|hex_number|rgb_number">
Attribute Values:
• color_name: It sets the text color by using color name.
For example: “red”.
• hex_number: It sets the text color by using color hex code.
For example: “#0000ff”.
• rgb_number: It sets the text color by using rgb code.
<font> color attribute - Example
<font size="6“ face="verdana color="green"> Hello World! </font>
<font size="6“ face="arial“ color="#008000"> Hello World! </font>
<font size="6“ face="arial“ color="rgb(128, 128, 0)"> Hello World! </font>
Meta data
• Metadata is data (information) about data.
• The <meta> tag defines metadata about an HTML document.
• <meta> tags always go inside the <head> element, and are typically used to
specify character set, page description, keywords, author of the document, and
viewport settings.
• Metadata will not be displayed on the page, but is machine parsable.
• Metadata is used by browsers (how to display content or reload page), search
engines (keywords), and other web services.
• There is a method to let web designers take control over the viewport (the user's
visible area of a web page), through the <meta> tag (See "Setting The Viewport"
example below).
Meta data - Example
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<blockquote> tag
• The <blockquote> tag specifies a section that is quoted from another source.
• The <blockquote> tag in HTML is used to display long
quotations (a section that is quoted from another source).
• It changes the alignment to make it unique from others.
• It contains both opening and closing tags.
• In blockquote tags, we can use elements like headings, lists,
paragraphs, etc.
Syntax:
<blockquote> Contents... </blockquote>
Attributes:
Attribute Value Description
cite URL Specifies the source of the quotation
Blockquote - Example
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by 1.2
million members in the United States and close to 5 million globally.
</blockquote>
</body>
</html>
Hyperlinks
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• It is a connection from one web resource to another.
• A link has two ends, An anchor and direction.
• The link starts at the “source” anchor and points to the “destination”
anchor, which may be any Web resource such as an image, a video clip, a
sound bite, a program, an HTML document or an element within an
HTML document.
HTML Link Syntax
<a href="url">Text link</a>
<a> : anchor tag that defines the hyperlink
href : The href attribute is used to specify the destination address of the link
used. "href" stands for Hypertext reference.
Text link : The text link is the visible part of the link. It is what the viewer clicks on.
Example:
<a href="[Link] Gallery</a>
Hyperlink - Example
<html>
<body>
<h3>Example Of Adding a link</h3>
<p>Click on the following link</p>
<a href="[Link] here for animal images</a>
</body>
</html>
Comments in HTML
• The comment tag ( <!-- Comment--> ) is used to insert
comments in the HTML code.
• It is a good practice of coding, so that coder and the reader can
get help to understand the code.
• It is a simple piece of code that is wiped off (ignore) by web
browsers i.e. , not displayed by the browser.
• It helps the coder and reader to understand the piece of code
used for especially in complex source code.
1. Single-line comment
• Single line comment is given inside the ( <!– comment –> )
tag.
Example:
<html>
<body>
<!--This is heading Tag, It wont be displayed by the browser -->
<h1>Hello World</h1>
</body>
</html>
2. Multi-line comment
• Multiple lines can be given by the syntax (<!– –>).
• Basically it’s the same as we used in single line comment.
• Difference is half part of the comment (” –> “) is appended
where the intended comment line ends.
• Syntax:
<!-- Comments here -->
Types of HTML Comments:
There are three types of comments in HTML which are:
1. Single-line comment
2. Multi-lines comment
3. Using <comment> tag
Example:
<html>
<body>
<!-- This is
heading tag -->
<h1>Hello World</h1>
<!-- This is a
multi-line
comment -->
<h2>This is multi-line comment</h2>
</body>
3. Using <comment> tag
• <comment> tag was used in HTML.
• But currently it is not supported by any modern browser.
Example:
<html>
<body>
<comment>This is heading tag</comment>
<h1>Welcome to HTML</h1>
<comment>This is multi-line
comment
</comment>
<h2>This is a comment using comment tag</h2>
</body>
HTML <hr> Tag – Horizontal Ruler
• The <hr> tag is used to define thematic changes in the
content.
• The <hr> element is most often displayed as a
horizontal rule that is used to separate content (or
define a change) in an HTML page.
Example:
<hr style="width:50%;text-align:left;margin-left:0">
HTML <img> Tag – Image tag
• The <img> tag is used to embed an image in an HTML page.
• Images are not technically inserted into a web page; images are linked
to web pages. The <img> tag creates a holding space for the
referenced image.
• The <img> tag has two required attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
• Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Attributes of <img> tag
Attribute Value Description
alt text Specifies an alternate text for an image
crossorigin anonymous Allow images from third-party sites that allow cross-origin access to be used with canvas
use-credentials
height pixels Specifies the height of an image
ismap ismap Specifies an image as a server-side image map
loading eager Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
lazy
longdesc URL Specifies a URL to a detailed description of an image
referrerpolicy no-referrer Specifies which referrer information to use when fetching an image
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
sizes sizes Specifies image sizes for different page layouts
src URL Specifies the path to the image
srcset URL-list Specifies a list of image files to use in different situations
usemap #mapname Specifies an image as a client-side image map
width pixels Specifies the width of an image
Unordered HTML List
• Lists are used to store data or information in web pages
in ordered or unordered form.
• An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.
• The list items will be marked with bullets (small black circles) by default:
List Item tag
• List item tag is used to define each item of a list.
• Once we define list items with the <li> tag, the list appears in Web
browsers in the bulleted form (by default).
• It is used inside both ordered and unordered lists.
Syntax:
<li> content </li>
• Example:-
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1>Example of unordered list in default</h1>
<ul>
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ul>
</body>
</html>
HTML Ordered Lists
• An ordered list defines a list of items in which the order of the items are matters.
• An ordered list is also called a number list.
• The ordering is given by a numbering scheme.
• The HTML <ol> tag defines an ordered list.
• An ordered list can be numerical or alphabetical.
• Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• Example:
<html >
<head>
<title>inline style attribute</title>
</head>
<body>
<ol>
<li value="51">English</li>
<li>Hindi</li>
<li>Maths</li>
<li>Science</li>
<li>social science</li>
</ol>
</body>
</html>
<Frame> Tag
• HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately.
• A frameset tag is the collection of frames in the browser window.
• Creating Frames: Instead of using body tag, use frameset tag in HTML to use
frames in web browser.
• The frameset tag is used to define how to divide the browser.
• Each frame is indicated by frame tag and it basically defines which HTML
document shall open into the frame.
• To define the horizontal frames use row attribute of frame tag in HTML
document.
• To define the vertical frames use col attribute of frame tag in HTML document.
• <frame> tag Example:-
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "C:/Users/dharam/Desktop/[Link]" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/[Link]" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
</frameset>
Attributes of Frame Tag
1. name: This attribute is used to give names to the frame. It differentiate
one frame from another. It is also used to indicate which frame a
document should loaded into.
• Example:
<frame name = "top" src = "C:/Users/dharam/Desktop/[Link]" />
2. src: This attribute in frame tag is basically used to define the source
file that should be loaded into the [Link] value of src can be any url.
• Example:
<frame name = "left" src = "/html/[Link]" />
3. marginwidth: This attribute in frame tag is used to specify width of the
spaces in pixels between the border and contents of left and right frame.
Example:
<frame marginwidth="20">
4. marginheight: This attribute in frame tag is used to specify height of the
spaces in pixels between the border and contents of top and bottom frame.
Example:
<frame marginheight="20">
5. scrollbar: To control the appearance of scroll bar in frame use scrollbar
attribute in frame tag. The value of this attribute can be yes, no, auto.
Example:
Advantages and Disadvantages of frame tag
• Advantages:
• It allows the user to view multiple documents within a single Web page.
• It load pages from different servers in a single frameset.
• Disadvantages: Due to some of its disadvantage it is rarely used
in web browser.
• Frames can make the production of website complicated.
• A user is unable to bookmark any of the Web pages viewed within a frame.
• The browser’s back button might not work as the user hopes.
• The use of too many frames can put a high workload on the server.
• Many old web browser doesn’t support frames.
HTML frameset Tag
• The <frameset> tag in HTML is used to define the frameset.
• The <frameset> element contains one or more frame elements.
• It is used to specify the number of rows and columns in frameset with
their pixel of spaces.
• Each element can hold a separate document.
• Syntax:
<frameset cols = "pixels">
Attributes of <frameset> tag
• cols: The cols attribute is used to create vertical frames
in a web browser.
• rows: The rows attribute is used to create horizontal
frames in the web browser.
• border: This attribute of frameset tag defines the width
of the border of each frame in pixels.
<form> element
• <form> is an HTML element to collect input data containing
interactive controls.
• It provides facilities to input text, number, values, email,
password, and control fields such as checkboxes, radio buttons,
submit buttons, etc.
• Form is a container that contains input elements like text, email,
number, radio buttons, checkboxes, submit buttons, etc.
• Forms are generally used when you want to collect data from the
user.
• Syntax:
<form>
<!--form elements-->
</form>
Form elements
These are the following HTML <form> elements:
• <label>: It defines label for <form> elements.
• <input>: It is used to get input data from the form in
various types such as text, password, email, etc by
changing its type.
• <button>: It defines a clickable button to control other
elements or execute a functionality.
• <textarea>: It is used to get input long text content.
• <fieldset>: It is used to draw a box around other form
elements and group the related data.
• <legend>: It defines a caption for fieldset elements.
• <datalist>: It is used to specify pre-defined list options for
input controls.
• <output>: It displays the output of performed calculations.
• <option>: It is used to define options in a drop-down list.
• <optgroup>: It is used to define group-related options in a
drop-down list.
<table> tag
• 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.
<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>
</table>
</body>
</html>
HTML Paragraphs Formatting
• The <p> tag in HTML defines a paragraph.
• These have both opening and closing tags.
• So anything mentioned within <p> and </p> is treated as a
paragraph.
• Syntax: <p> Content </p>
• Example:
<!DOCTYPE html>
<html>
<body>
<h2>Welcome All</h2>
<!-- Use of <p> tag -->
<p>A computer science portal for HTML</p>
</body>
White spaces in HTML
• The HTML <spacer> tag is used to create some white-space.
• It supports the following additional attributes.
• Syntax: <spacer type="" size="">
• Attributes:
1. type: This attribute holds the value for the type of
space horizontal, vertical or block.
2. size: This attribute holds a number of pixels for the horizontal
or vertical type of spacer.
3. height: This attribute holds the pixel number for block type
spacer.
4. width: This attribute holds the pixel number for block type
spacer.
5. align: This attribute holds the alignment of the block of
white-space.
• Example:
<html>
<head>
<title>HTML <spacer> Tag</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>HTML <spacer> tag</h2>
<p>A Computer Science Portal
<spacer type="block" width="50" /> for All</p>
</center>
</body>
Attributes
Attribute Value Description
type vertical The type attribute is used to specify whether the spacer will be horizontal, vertical, or block.
horizontal
block
size number Specifies the number of pixels tall or wide the spacer will be This attribute is only used if the spacer type is
"horizontal" or "vertical." If the spacer type is "block," then the width attribute is used.
width number The width attribute is used when the spacer type = "block". Between the quotes specify a pixel value for the
width of the block.
height number The height attribute is used when the spacer type = "block". Between the quotes specify a pixel value for the
height of the block.
align Left, right, The align tag is used to specify the alignment of the block of white space. Valid alignments are left, right, and
center center.