Module 1
HTML
● HTML stands for HyperText Markup Language.
● It is not a programming language, but a markup language used to create the structure and
content of a webpage.
○ HyperText: Refers to the "links" that connect web pages, allowing you to navigate the
internet.
○ Markup Language: Refers to the use of "tags" (like <h1> or <p>) to define the layout
and elements of your content.
● It is the standard language used to create and structure content on the web.
● It tells the web browser how to display text, links, images, and other forms of multimedia on a
webpage.
● HTML sets up the basic structure of a website, and then CSS and JavaScript add style and
interactivity to make it look and function better.
Why is Learning HTML Essential?
Learning HTML is the first and most critical skill for anyone interested in making a career in
web development or Designing.
● Build Websites: It is the fundamental building block of all websites. You can't build a
house without a foundation; similarly, you can't build a website without HTML.
● Launch a Web Development or Design Career: A deep understanding of HTML is
essential for roles such as Front-End Developer, Web Designer, Full-Stack
Developer, and even Email Developer.
● To Understand Other Languages: Knowing HTML makes it significantly easier to
learn its companion technologies: CSS (for styling) and JavaScript (for functionality).
Learn to Build Your First HTML Page
Let's move from theory to practice. Here's how to create and view your very first webpage.
What You Need
● A Text Editor: Any simple text editor will work (e.g., Notepad on Windows, TextEdit on Mac, or more advanced
editors like VS Code).
● A Web Browser: Google Chrome, Firefox, or any modern browser to view your page.
Basic HTML Document Example
● Open your text editor.
● Copy and paste the code below into the editor.
● Save the file with a .html extension, for example: my.html.
● To see your work, find the file on your computer and double-click it. It will open in your default web browser.
Elements of Basic HTML Structure
<!DOCTYPE html>
This declaration defines that the document is an HTML5 document. It must always be the very first line of your code.
<html>...</html>
This is the root element of the page. All other elements are nested inside it.
<head>...</head>
The <head> section contains meta-information that isn't displayed directly on the page, like the page title or links to CSS
stylesheets.
<title>...</title>
The <title> tag sets the title of the webpage. This is what you see in the browser tab and what search engines use as the main
title in search results.
<body>...</body>
The <body> tag contains all the visible content of your webpage—headings, paragraphs, images, links, etc.
What is an HTML Element?
An HTML element is a basic building block to create a webpage, and It is created by a start tag, content, and end tag. In
an HTML element, the content is placed between a start and end tag.
The basic syntax of an HTML element is −
<tag_name>content</tag_name>
Consider the following example demonstrates an HTML element −
<h1>It is top-level heading</h1>
Here,
● <h1> is the start tag.
● "It is top-level heading" is the content, which is placed inside the start and end tags.
● </h1> is the closing tag.
HTML Page Structure
Basic Structure
HTML page structure (or, HTML basic structure) consists of the essential elements that are required to create an HTML document that
can be displayed on the browser.
The following image shows the page structure of an HTML document
HTML Page Structure
HTML page structure contains <!DOCTYPE html>, <html>, <head>, <title>, <body>, and other tags
that will be shown on the homepage.
Where,
● <!DOCTYPE html> − It defines the document type as HTML.
● <html> − It is a root element for an HTML document. All elements are placed inside this
element.
● <head> − The head tag may contain scripts and styles that are useful page functionalities.
Meta tags are also placed inside this tag.
● <title> − It defines the webpage's title.
● <body> − It defines the body of the webpage, all elements that are used to display content
on the browser placed inside the body tag.
● <h1> and <p> − The h1 tag defines page heading, and p tag defines paragraph.
Web Browser Role
The role of a web browser is to read HTML documents from the given path
(either from the server or from a local device) and display it on the webpages.
All web browsers, such as Google Chrome, Safari, Firefox, etc., are
compatible with reading HTML documents. You can use any of the web
browsers to display your HTML document in web format.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the
version of the HTML used in the document. The current version of HTML is 5 and
it makes use of the following declaration −
<!DOCTYPE html>
There are many other declaration types that can be used in HTML documents,
depending on what version of HTML is being used. We will see more details on
this while discussing the <!DOCTYPE...> tag along with other HTML tags.
HTML Tags Vs. Elements Vs. Attributes
HTML tags are the keywords that can be used for a specific purpose to display and format the content on the webpage.
HTML elements are the basic building blocks that are made with the help of tags and content. An HTML element is created with a start
tag, a content, and an end tag.
And, HTML attributes provide additional information about HTML elements; in order to define or change their behavior. Attributes are
used with an opening tag.
HTML Tags Case Sensitivity
HTML tags are not case-sensitive. They can be written in uppercase or in lowercase. But the World Wide Web Consortium (W3C)
recommends using lowercase tags starting from HTML 4.
Importance of HTML
HTML is the fundamental building blocks of the World Wide Web. Any page that you visit on the web
contains HTML tags. HTML is important for the various reasons −
● HTML defines webpage structure and helps to design websites.
● With the help of CSS and JavaScript, HTML helps to create beautiful and interactive websites.
● HTML helps in search engine optimization by optimizing the tags based on the targeted keywords.
● HTML helps to navigate (or browse) different pages and websites from anywhere on the internet.
● HTML supports user input and forms; you can easily get information from anywhere in the world (you
may need background database support for it).
● HTML follows an open standard by W3C. Thus, HTML supports all browsers on any type of device.
You do not need to change the HTML for the different browsers or devices.
HTML Elements
An HTML element is a fundamental component of an HTML document that can contain data to display on the
webpage, such as text, image, link, or sometimes nothing. An HTML element includes an opening tag, content,
and a closing tag, where the opening tag may also include attributes.
An HTML element includes:
● Opening Tag: An opening tag specifies the beginning of the element and may include multiple attributes.
● Content: The content part includes the information to be displayed or processed within an element.
● Closing Tag: A closing tag marks the end of the element (A closing tag may be optional for some elements).
Example of HTML Elements
Some of the examples of HTML elements are as follows:
<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
So here <p>...</p> is an HTML element, <h1>...</h1> is another HTML element.
HTML Elements Vs. Tags
HTML elements are created using the HTML tags. An HTML element is defined by a pair of starting and closing tags having content
between them, which defines the content and structure of the webpage. Whereas, HTML tags are like keywords and part of HTML elements
enclosed in angle brackets (<>).For example, <p> is the starting tag of a paragraph, and </p> is the closing tag of the same paragraph, but
<p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
HTML allows nesting of elements. The nested elements are created by placing one or more HTML elements inside
an HTML element.
● Every opening tag must have a corresponding closing tag.
● The closing tag of the parent element must come after the closing tag of the child element.
● The nested elements must be valid HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
HTML Void Elements
S.N Elements & Description
o
HTML void elements are those
1 <img />
elements that don't require closing
tags. These tags don't have any Used for inserting images within HTML documents.
content model and even don't allow
2 <hr />
nesting of elements. The void
elements are also known as empty or It displays a horizontal rule.
self-closing elements. <br />
3
Some of the void elements are such It is used to provide a line break.
as <img />, <hr />, and <br />
4 <source />
elements.
It is used for embedding media resources like audio and video.
What are HTML Attributes?
HTML attributes are special words that provide additional information to an HTML element. Attributes are placed inside the element's
opening tag, and they are used to configure or adjust the element's behavior. All attributes are made up of two parts: a name and a
value −
● Name: The attribute name is the keyword, also known as the attribute identifier, which defines a specific characteristic for the
element in which it is using. For example, the paragraph <p> element (in the below-given example) has an attribute "align",
which defines the alignment of the paragraph on the page.
● Value: The attribute value is the data or information that defines the value to be set for that attribute. The value is assigned
within the double quotes. For example, "left", "center", or "right" can be assigned to the "align" attribute with the paragraph tag
(as shown in the below example).
Below is the syntax of an element HTML having attribute −
<tag_name attribute="Value">...</tag_name>
HTML Headings
HTML headings define the hierarchy (levels) and structure of content on a webpage. They create a visual hierarchy, with the
highest-level heading, which is h1, indicating the most important content or the main heading, and lower-level headings like h2, h3, h4,
etc. for subtopics.
<!DOCTYPE html>
Output :
<html>
<body>
<h1>This is Heading 1 (H1 Tag)</h1> This is Heading 1 (H1 Tag)
<h2>This is Heading 2 (H2 Tag)</h2>
<h3>This is Heading 3 (H3 Tag)</h3>
<h4>This is Heading 4 (H4 Tag)</h4> This is Heading 2 (H2 Tag)
<h5>This is Heading 5 (H5 Tag)</h5>
<h6>This is Heading 6 (H6 Tag)</h6> This is Heading 3 (H3 Tag)
</body>
</html> This is Heading 4 (H4 Tag)
This is Heading 5 (H5 Tag)
This is Heading 6 (H6 Tag)
HTML - Comments
HTML comments are non-executable lines of code that do not display on the webpage and are used to add notes or explanations. It is a good
practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document and any other notes to
anyone looking at the code.
HTML comments are completely ignored by web browsers, so they don't affect how your page looks or works.
HTML comments help you and others understand your code and increase code readability and are placed in between <!-- ... --> tags. So, any
content placed with <!--... --> tags will be treated as a comment and will be completely ignored by the browser.
Example of HTML Comments
<!DOCTYPE html>
<html>
<head>
<!-- Document Header Starts -->
<title>This is document title</title>
</head>
<!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
HTML - Images
HTML images provide visual content for web pages, enhancing user experiences and conveying information. They can be photographs, graphics,
icons, or illustrations.
HTML offers various elements for embedding, manipulating, and controlling images, contributing to the aesthetics and functionality of websites.
Understanding image tags, attributes, and responsive design principles is essential for effective web development.
HTML Image Syntax
The following is the basic syntax for HTML images:
<img src="image_path" alt="Alternate text for the image" width="200px" height="150px" />
Here,
● src: The src attribute defines the path of the image (image URL).
● alt: The alt attribute defines the alternate text; if there is a broken link to the image path, the alternate text displays on the webpage.
● width and height: The width and height attribute define the height and width for the image.
HTML - Colors
HTML colors are a way of specifying the appearance of web elements. They are very important aspects of web design, as they not
only enhance the visual appeal but also influence user behavior. They are also used to evoke emotions and highlight important content.
In HTML, colors are generally defined for backgrounds, borders, and texts. To specify the colors, the style attribute of HTML elements
is used.
HTML Color Coding Methods
The following three methods are used to set colors in a web page −
● Color names − We can specify color names directly, like green, blue, or red.
● Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the color.
● Color decimal or percentage values − This value is specified using the rgb() property.
HTML - Tables
HTML tables represent data, such as text, images, etc. in a structured format with rows and columns.
HTML tables offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.
Creating an HTML Table
Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>,
<tr>, <td>, and <th>.
● HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within it.
● HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.
● HTML <td> Tag: Represents "table data" and is used to create standard cells within a row.
● HTML <th> Tag: Represents "table header" and is used to create header cells within a row.
Example
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Electronics</td>
<td>$800</td>
</tr>
<tr>
<td>Bookshelf</td>
<td>Furniture</td>
<td>$150</td>
</tr>
<tr>
<td>Coffee Maker</td>
<td>Appliances</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Rowspan and Colspan
<!DOCTYPE html>
<html>
<head> In HTML, the rowspan attribute defines
<title>HTML Table Background Color</title> the number of rows a table cell should
</head> span vertically, while the colspan
<body>
attribute determines how many
<table border="1" bordercolor="green" bgcolor="yellow" background="/images/test.png">
<tr> columns a cell should span
<th>Column 1</th> horizontally.
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Headers and Captions
Headers and captions are used inside tables to organize and present data in a structured format.
The table heading is an essential part of a table, providing labels for columns. The <th> (table header) element is used to define table
headings.
Captions are used in the tables to provide a title or explanation for the table. The <caption> element is placed immediately after the
opening table tag.
Syntax to Create Table's Header and Caption
<table>
<caption>Description of table</caption>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</table>
HTML - Lists
HTML lists are group or collection of items. These items can be both organized and unorganized depending on the requirement. They
help in organizing, structuring, and presenting information to make it more user-friendly, readable, and accessible. Sample lists are
shown below. −
Using Lists in HTML
To display a list of information in HTML, we use various list tags like <ul>, <ol>, and <ll>. HTML offers web developers three ways
for specifying lists of information, namely ordered, unordered, and definition lists. All lists must contain one or more list elements. In
addition to the mentioned types of lists, there are some other important list-related elements and concepts that also contribute to
effective document structuring.
Unordered lists
Unordered lists display lists of items that are not in a specific order. The unordered lists are marked with bullet points. To create an
unordered list, the <ul> tag is used along with the <li> tag. Here, the <li> tag specifies the list items.
Example
<!DOCTYPE html>
<html> OUTPUT:
<head>
<title>HTML List</title> Example of HTML List
</head>
<body> ● HTML
<h2>Example of HTML List</h2> ● CSS
<ul> ● JavaScript
● Java
<li>HTML</li>
● JavaFX
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ul>
</body>
</html>
Ordered Lists
Ordered lists are lists of items that are in a specific order. The ordered lists are marked with numbers by default; you can change the
numbers into alphabets, roman numbers, etc. by using the type attribute or the CSS list-style-type property.
To create an ordered list, the <ol> tag is used along with the <li> tag, where <li> specifies the list items.
Example
<!DOCTYPE html>
<html> OUTPUT:
<head>
<title>HTML List</title>
</head> Example of HTML List
<body> 1. HTML
<h2>Example of HTML List</h2> 2. CSS
<ol> 3. JavaScript
<li>HTML</li> 4. Java
<li>CSS</li> 5. JavaFX
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ol>
</body>
</html>
Definition Lists
Definition lists are lists of items with their corresponding descriptions. The definition lists are created by using the <dl>, <dt>, and
<dd> tags. Where the <dl> tag specifies the "definition list", the <dt> tag specifies the "definition term", and the <dd> tag
specifies the "definition description".
Example
<!DOCTYPE html>
<html> OUTPUT:
<head>
<title>HTML List</title>
</head> Example of HTML List
<body> HTML
<h2>Example of HTML List</h2> HyperText markup languague
<dl> CSS
<dt>HTML</dt> Cascading Style Sheet
<dd>HyperText markup languague</dd> JS
<dt>CSS</dt> JavaScript
<dd>Cascading Style Sheet</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>
Nested Lists
A list created within another list is known as a nested list. HTML also allows nesting of lists within one another to generate complex
document structures.
<!DOCTYPE html>
<html> OUTPUT:
<head>
<title>HTML List</title>
</head> Example of HTML Nested List
<body>
<h2>Example of HTML Nested List</h2> 1. Item One
<ol> 2. Item Two
<li>Item One</li>
○ Subitem A
<li>Item Two
<ul> ○ Subitem B
<li>Subitem A</li> 3. Item Three
<li>Subitem B</li>
</ul>
</li>
<li>Item Three</li>
</ol>
</body>
</html>
HTML - Text Links
HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked.
A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create
hyperlinks using text or images available on a webpage. A hyperlink is created using the HTML Anchor Tag (</a>).
<a href="URL" target="_target_type">Link Text</a>
_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.
Use of Base Path in Hyperlinks
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you
use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given
relative path to this base path and will make a complete URL.
HTML - Email Links
HTML email links allow users to click on a link and automatically open their default email client with a new message composed to the specified email address. This is
done using the mailto: protocol in the href attribute of an <a> (anchor) tag.
<!DOCTYPE html>
<html>
<body>
<p>
Creating an HTML Email Link OUTPUT :
</p>
<a href= "mailto: [email protected]">
Click to Send Mail
</a>
</body>
</html>
HTML - Forms
HTML forms are collections of interactive controls and various input types, such as text, numbers, email, password, radio buttons,
checkboxes, buttons, etc., that collect user information. HTML forms are created by using the HTML <form> tag. All user input-related
tags are placed inside the <form> tag.
<form action="url" method="method_type" target="target_value"
enctype="enctype_value">
<!-- Form elements-->
</form>
Creating an HTML Form
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>HTML Form Example</h1>
<form>
<!-- Text Input -->
<label for="name"><strong>Name:</strong></label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<br/><br/>
<!-- Radio Buttons -->
<label><strong>Gender:</strong></label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br/><br/>
<!-- Checkboxes -->
<label><strong>Hobbies:</strong></label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label>
<br/><br/>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
</body>
</html>
Form Elements
1. The <form> Element
HTML <form> tag is used to create the <form> element. This element is the container for all other form elements. The form element does
not create the form; it's the container that holds the other form elements.
<form>.....</form>
2. The <input> Element
HTML <input> tag is an essential element of form control for gathering user input from websites. We can use this tag to create an input
element.
<input type = ".."/>
3. The <label> Element
HTML <label> tag is used to create a label element that represents a caption for an item in a UI (user interface), or to add labels to a form
control like text, textarea, checkbox, radio button, etc.
<label>.......</label>
Form Elements
4. The <legend> Element
HTML <legend> tag is the element's first child and specifies the caption or title for the <fieldset> tag.
<legend>.......</legend>
5. HTML <select> Element
HTML <select> tag is used to create the dropdown in HTML forms. We can use this tag to create a dropdown anywhere we want.
<select>....</select>
6. The <button> Element
HTML <button> tag is an interactive element used to create a button in HTML.
<button>Button</button>
Form Elements
7. The <fieldset> Element
HTML <fieldset> tag is used to group several controls within a web form. By using the <fieldset> tag and <legend> tag, a form can be much
easier for users to understand.
<fieldset>....</fieldset>
8. The <datalist> Element
HTML <datalist> tag contains a set of <option> elements that represent recommended options available to choose from among others.
<datalist>....</datalist>
9. The <output> Element
HTML <output> tag is a flexible and underused component that enables programmers to dynamically show the outcomes of calculations or scripts
inside the content.
<output> Results... </output>
Form Elements
10. The <option> Element
HTML <option> tag defines either the elements of the data list for autocomplete, specified by the <datalist> tag, or the items of a drop-down list, defined by the <select>
tag.
<option>.....</option>
11. The <optgroup> Element
HTML <optgroup> tag is used in the <select> element to group together relevant <option> elements.
<optgroup>
<option>..</option>
</optgroup>
12. The <textarea> Element
HTML <textarea> tag is used to represent a multiline plain-text editing control.
<textarea>.......</textarea>
Form Attributes
HTML form attributes provide specific functionalities, such as redirection to other web pages, auto-completion of text, etc.
Attribute Description
action It is used to specify a URL that processes the form submission.
method It is used to define which HTTP method to use when submitting the form.
target It is used to specify where to open the linked document.
autocom It allows you to set whether the autocomplete for the form should be on or off.
plete
enctype It is used to specify how the form input data should be encoded before sending it to the
server.
novalid It defines that while submitting the form, the form data should not be validated in an HTML
ate
document.
