Scribd
Upload
12 views

HTML Ebook

Uploaded by

Davide D'Agostino
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML Ebook

Uploaded by

Davide D'Agostino
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 80

HTML

Introduction to HTML
HTML stands for Hypertext Markup Language. It is the standard markup language used
for creating web pages and web applications. HTML is a combination of text, images,
and other multimedia resources that are used to create a web page.
HTML is based on a set of tags that are used to define the different elements of a web
page, such as headings, paragraphs, links, images, tables, and forms. These tags are
enclosed in angle brackets (< >) and are placed within the content of the web page.

HTML is a client-side language, which means that it is processed by the web browser
on the user's computer. This allows for a great deal of flexibility in the design and layout
of web pages, as well as the ability to create interactive elements such as forms and
animations.
HTML is the foundation of any web page and is an essential skill for anyone interested
in web development. By learning HTML, you will be able to create and design your own
web pages and have a better understanding of how the internet works.
In conclusion, HTML is a powerful and versatile tool for web development and is an
essential skill for anyone interested in building web applications. By mastering the
basics of HTML, you will be able to create web pages that are both functional.

HTML 1
HTML is constantly evolving, and new versions of HTML continue to be developed to
improve the functionality and capabilities of the language. The most recent version of
HTML is HTML5, which introduced new features such as video and audio elements,
semantic tags, and improved support for mobile devices.
One of the strengths of HTML is its ability to work in conjunction with other web
development languages, such as CSS and JavaScript. CSS is used to style and format
the content of a web page, while JavaScript is used to add interactivity and dynamic
functionality to the page.
When creating a web page, it's important to consider factors such as accessibility,
search engine optimization, and usability. By using proper HTML markup and adhering
to web standards, you can ensure that your web pages are accessible to a wide range
of users and are optimized for search engines.
Overall, HTML is a foundational skill for anyone interested in web development and is
an essential tool for creating high-quality, interactive web pages. With its flexibility and
versatility, HTML allows you to create web pages that are both functional and visually
appealing and is a key component of modern web development.

A Simple Definition of HTML


HTML is a special code that tells a computer how to make a website look. It's like a
recipe that helps the computer put all the pictures, text, and buttons in the right place.
Just like how a recipe helps you bake a cake, HTML helps you make a website!
When you look at a website on your computer or phone, you see pictures, words, and
buttons. HTML is the code that makes all of those things show up in the right place.

Think of it like building with blocks. HTML has different kinds of blocks, and each block
has a different job. Some blocks make words, some blocks make pictures, and some
blocks make buttons. When you put all the blocks together in the right way, you get a
website!

So, when you use HTML, you're like a builder building a really cool website with blocks.
It's kind of like a puzzle, and the more you learn about HTML, the better you'll be at
building awesome websites!

HTML 2
Getting Started with HTML
Welcome to the world of HTML! In this chapter, we will learn the basics of HTML and get
started with creating our first web pages. HTML stands for Hypertext Markup Language,
and it is the foundation of every web page on the Internet. With HTML, you can create
and structure the content of your web pages, and add text, images, links, and more.

2.1 Basic Document Structure:


Every HTML document follows a basic structure. Let's start by creating our first HTML
document. Open a text editor (like Notepad) and type the following code:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Getting Started with HTML 1


Save the file with a .html extension (e.g., index.html ). Now, open the saved file in a
web browser. You will see your first web page displayed with a heading and a
paragraph.
Explanation:

<!DOCTYPE html> : This is the doctype declaration that tells the browser we are using
HTML5.

<html> : The <html> element is the root element of an HTML document.

<head> : The <head> element contains metadata about the document, such as the
title.

<title>: The <title> element sets the title of the web page displayed in the
browser's title bar or tab.

<body> : The <body> element represents the content of the web page.

<h1> : The <h1> element represents the main heading or title of the page.

<p> : The <p> element represents a paragraph of text.

2.2 Adding Content to the Page:


HTML allows us to add various types of content to our web pages. Let's add some more
content to our web page example:

<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a paragraph of text.</p>

<h2>About Me</h2>
<p>Hi, my name is John. I love playing video games and learning about new technologie
s.</p>

<h3>My Favorite Games</h3>


<ul>
<li>Minecraft</li>
<li>Roblox</li>

Getting Started with HTML 2


<li>Fortnite</li>
</ul>

<h3>My Hobbies</h3>
<ol>
<li>Playing soccer</li>
<li>Drawing</li>
<li>Reading books</li>
</ol>
</body>

Save the changes and refresh your web page in the browser. You will now see
additional headings, paragraphs, and lists on your web page.
Explanation:

<h2> : The <h2> element represents a subheading.

<h3> : The <h3> element represents a subheading of a lower level.

<ul> : The <ul> element creates an unordered list.

<ol> : The <ol> element creates an ordered (numbered) list.

<li> : The <li> element represents a list item within <ul> or <ol> .

2.3 Formatting Text:

Getting Started with HTML 3


HTML provides various tags to format and style text. Let's add some formatted text to
our web page example:

<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a <strong>paragraph</strong> of <em>text

</em>.</p>

<h2>About Me</h2>
<p>Hi, my name is <u>John</u>. I love playing video games and learning about new techn
ologies.</p>

<h3>My Favorite Games</h3>


<ul>
<li><strong>Minecraft</strong></li>
<li><em>Roblox</em></li>
<li><u>Fortnite</u></li>
</ul>
</body>

Save the changes and refresh your web page. You will see the text formatted with bold,
italic, and underlined styles.

Explanation:

<strong>: The <strong> element represents important or emphasized text (typically


rendered in bold).

<em> : The <em> element represents text emphasized or styled in italics.

Getting Started with HTML 4


<u> : The <u> element represents underlined text.

2.4 Creating Links:


One of the key features of HTML is the ability to create links between web pages. Links
allow users to navigate between different pages on the Internet. Let's learn how to
create links in HTML:

<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is a paragraph of text. Click the link below to visit my favorite website:</p>

<a href="<https://www.example.com>">My Favorite Website</a>


</body>

Save the changes and refresh your web page. You will now see a link that says "My
Favorite Website." When clicked, it will take you to the specified URL (in this case,
"https://www.example.com").
Explanation:

<a> : The <a> element is used to create links in HTML.

href="..." : The attribute specifies the URL or destination of the link. Replace
href

"<https://www.example.com>" with the desired URL.

You can also create links to other pages within your website. Let's say you have another
HTML file called "about.html" in the same directory as your current page. You can
create a link to that page using a relative URL:

<a href="about.html">About Me</a>

Getting Started with HTML 5


Save the changes and create a new HTML file called "about.html" in the same directory
as your first page. Add some content to the "about.html" file, such as a heading and a
paragraph.

Now, when you click the "About Me" link, it will take you to the "about.html" page.

That's it! You have learned how to create links in HTML. Links play a crucial role in
connecting web pages and allowing users to navigate through the vast web. In the next
chapter, we will explore more HTML features.

Encourage the young readers to experiment with creating different links, such as linking
to specific sections within a page using anchor tags, or creating links that open in a new
window using the target="_blank" attribute. This will help them grasp the versatility and
power of HTML links.

Congratulations! You have learned the basics of creating an HTML document, adding
content, formatting text, and Creating Links. In the next chapter, we will explore more
exciting features of HTML.

Getting Started with HTML 6


Task: Create Your Personal Web
Page
1. Open a text editor (like VS code) and create a new HTML file. Save it with a .html

extension (e.g., mypage.html ).

2. Set up the basic structure of the HTML document with the doctype declaration,
<html> , <head> , and <body> tags.

3. Inside the <body> tag, create a heading using <h1> to introduce yourself (e.g., "Meet
[Your Name]"). Add a paragraph below the heading to provide a brief description of
yourself.

4. Add an image of yourself using the <img> tag. You can use an image of your choice
or even create your own simple drawing to represent yourself.

5. Create a section titled "My Interests" using an appropriate heading tag. Within this
section, create an unordered list <ul> or an ordered list <ol> with at least three
items that represent your interests (e.g., sports, art, music, etc.). Feel free to add
images or icons next to each list item to make it visually appealing.

6. Include a section titled "My Favorite Quote" using an appropriate heading tag.
Inside this section, add a blockquote <blockquote> with your favorite quote and cite
its source using the <cite> tag.

Task: Create Your Personal Web Page 1


7. Experiment with formatting text within your web page. Use <strong> , <em> , and <u>

tags to emphasize certain words or phrases in your description or quote.

8. Save your changes and open the HTML file in a web browser to see your personal
web page in action. Make adjustments as needed and continue experimenting with
different tags and styles to customize your page further.

9. Bonus: Challenge yourself by exploring more HTML tags and features. Try adding
links to your favorite websites, embedding videos or music, or creating a form for
visitors to leave comments or feedback.

Remember to have fun and let your creativity shine while building your personal web
page. Experiment, modify, and make it uniquely yours!
By completing this task, you will gain practical experience in creating web pages,
understanding HTML tags, and exploring different ways to express yourself online.

NOTE:
Don't worry if you feel overwhelmed or if you're not ready to complete this task right
away. It can be challenging to create a web page immediately after learning a few tags.
Remember, we are here to guide you through each step of your learning journey.
In the upcoming chapters, we will explain each HTML tag in detail, providing examples
and further explanations to help you understand its purpose and usage. We believe in
building a strong foundation of knowledge, and that takes time and practice.
So, if you're not ready to complete this task yet, that's absolutely fine! Take your time to
absorb the information, experiment with the examples provided, and gradually build
your understanding. Learning HTML is a process, and we will be there to support you
every step of the way.
Feel free to revisit this task once you have familiarized yourself with more HTML
tags and concepts.

Remember, practice makes perfect, and the more you experiment and create, the
better you will become at designing and building your own web pages.
Keep up the enthusiasm and curiosity. The next chapter will dive deeper into HTML,
expanding your knowledge and empowering you to tackle exciting challenges.
Enjoy your learning journey, and remember, we are here to help you succeed!

Task: Create Your Personal Web Page 2


Working with Images
Visual elements, such as images, play a vital role in web design. In this chapter, we will
learn how to add images to our web pages using HTML. Images can enhance the
appearance of a website and make it more engaging and visually appealing.

3.1 Adding Images to a Web Page:


To add an image to a web page, we use the \<img> tag. The \<img> tag is self-closing,
meaning it doesn't require a closing tag. Let's see how to add an image to our web
page:

<body>
<h1>Welcome to My Web Page!</h1>
<p>This is a paragraph of text. Check out the image below:</p>

<img src="image.jpg" alt="A beautiful sunset">

<p>Isn't the sunset amazing?</p>


</body>

Working with Images 1


OR

Save the changes and make sure you have an image file named "image.jpg" in the
same directory as your HTML file. Refresh the web page, and you will see the image
displayed on the page.

Explanation:

<img>: The <img> tag is used to embed images in an HTML document.

src attribute: The src attribute specifies the source (URL or file path) of the image.

alt attribute: The alt attribute provides alternative text for the image, which is
displayed if the image cannot be loaded or for accessibility purposes.

Working with Images 2


3.2 Controlling Image Size:
You can control the size of an image by using the width and height attributes. Let's
resize the image in our example:

<img src="image.jpg" alt="A beautiful sunset" width="300" height="200">

Save the changes and refresh the page. The image will now be displayed with a width
of 300 pixels and a height of 200 pixels. Adjust the values according to your preference.

3.3 Image Accessibility:


It's essential to provide alternative text for images, especially for users who may have
visual impairments or when the image cannot be loaded. The alt attribute serves this
purpose. Let's update our previous example with descriptive alt text:

<img src="image.jpg" alt=" A beautiful sunset over the ocean">

Always strive to provide meaningful alt text that accurately describes the image's
content or purpose.

3.4 Image File Formats:

Working with Images 3


Different image file formats are supported in web development. The most commonly
used formats are JPEG, PNG, and GIF. Consider the following when choosing an image
format:

JPEG (JPG): Ideal for photographs and complex images with many colors.

PNG: Suitable for images with transparency or sharp lines, such as logos.

GIF: Suitable for simple animations or images with limited colors.

When creating or choosing images for your web page, ensure you optimize them for
web use to reduce file size and improve page loading speed.

Experiment with adding different images and adjusting their size and alt text. Images
can greatly enhance the visual appeal of a website and convey information effectively.

In the next chapter, we will learn about structuring content with lists.

Working with Images 4


Structuring Content with Lists
In web development, lists are essential for organizing and structuring content. In this
chapter, we will explore how to create lists in HTML. Lists allow us to present
information in an organized and hierarchical manner, making it easier for users to read
and understand.

4.1 Unordered Lists:


Unordered lists are used to represent a collection of items in no particular order. Each
item is represented by a bullet point. Let's create an unordered list:

<body>
<h1>Welcome to My Web Page!</h1>
<h2>My Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>

Structuring Content with Lists 1


Save the changes and refresh the web page. You will see a list of favorite fruits
displayed as bullet points.
Explanation:

<ul>: The <ul> tag represents an unordered list.

<li>: The <li> tag represents a list item within the <ul> or <ol> element.

4.2 Ordered Lists:


Ordered lists are used when the order of items is significant. Each item is represented
by a number. Let's create an ordered list:

<body>
<h1>Welcome to My Web Page!</h1>
<h2>Steps to Make a Sandwich</h2>
<ol>
<li>Spread butter on bread slices.</li>
<li>Add cheese, lettuce, and tomato.</li>
<li>Place another bread slice on top.</li>
</ol>
</body>

Save the changes and refresh the web page. You will now see a numbered list
representing the steps to make a sandwich.

Structuring Content with Lists 2


Explanation:

<ol>: The <ol> tag represents an ordered list.

<li>: The <li> tag represents a list item within the <ol> or <ul> element.

4.3 Nested Lists:


Lists can be nested within other lists to create a hierarchical structure. Let's create a
nested list example:

<body>
<h1>Welcome to My Web Page!</h1>
<h2>My Favorite Foods</h2>
<ul>
<li>Pizza</li>
<li>Burger
<ul>
<li>Cheeseburger</li>
<li>Chicken Burger</li>
<li>Veggie Burger</li>
</ul>
</li>
<li>Ice Cream</li>
</ul>
</body>

Save the changes and refresh the web page. You will see a list of favorite foods, with
"Burger" having a nested list of different burger types.

Explanation:

Structuring Content with Lists 3


By placing a <ul> or <ol> element inside an <li> element, we create a nested list.

Experiment with creating different types of lists and nesting them to create a structured
content hierarchy. Lists are versatile and can be used in various contexts to organize
information effectively.

In the next chapter, we will explore tables and how they can be used to represent data.

Structuring Content with Lists 4


Tables and Data Representation
Tables are a powerful tool for representing structured data in HTML. In this chapter, we
will learn how to create tables and display data in a tabular format. Tables provide a
visual and organized way to present information, making it easier for users to interpret
and analyze data.

5.1 Creating a Basic Table:


To create a table, we use the <table> element along with other related elements. Let's
create a basic table to display some data:

<body>
<h1>Welcome to My Web Page!</h1>

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>

Tables and Data Representation 1


<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</table>
</body>

Save the changes and refresh the web page. You will see a table with three columns
(Name, Age, and City) and two rows of data.
Explanation:

<table>: The <table> tag represents the table itself.

<tr>: The <tr> tag represents a table row.

<th>: The <th> tag represents a table header cell.

<td>: The <td> tag represents a table data cell.

5.2 Table Headers and Data Cells:


In a table, the first row can be designated as the table header using the <th> element.
Let's update our example to include table headers:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>

Tables and Data Representation 2


<td>30</td>
<td>London</td>
</tr>
</table>

Save the changes and refresh the web page. The first row will now be rendered as table
headers, visually distinguishing them from the data rows.

5.3 Table Rowspan and Colspan:


Sometimes, a cell may need to span multiple rows or columns. We can achieve this
using the rowspan and colspan attributes.

Let's update our table to include a cell spanning multiple columns:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td rowspan="2">123 Main St</td>
<td rowspan="2">New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
</tr>
</table>

Tables and Data Representation 3


Save the changes and refresh the web page. The "Address" cell will span two columns,
and the address data will span two rows.
Explanation:

colspan: The colspan attribute specifies the number of columns a cell should span.

rowspan: The rowspan attribute specifies the number of rows a cell should span.

Tables offer great flexibility in representing various data structures.


Experiment with different table layouts, including merging cells, adding more columns or
rows, and applying CSS styles to enhance the table's appearance.

In the next chapter, we will explore forms, which allow users to input data and interact
with web pages.

Tables and Data Representation 4


Building Forms for User Input
Forms are a fundamental element of interactive web pages, allowing users to input and
submit data. In this chapter, we will learn how to create forms using HTML. Forms
enable various types of user interactions, such as submitting feedback, making
purchases, or registering for events.

6.1 Creating a Basic Form:


To create a form, we use the <form> element and include different types of input fields.
Let's create a basic form that collects user information:

<body>
<h1>Welcome to My Web Page!</h1>

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

<input type="submit" value="Submit">

Building Forms for User Input 1


</form>
</body>

Save the changes and refresh the web page. You will see a form with three input fields
(Name, Email, and Message) and a Submit button.
Explanation:

<form>: The <form> tag represents a form element that contains input fields.

<label>: The <label> tag provides a label or description for an input field.

<input>: The <input> tag creates different types of input fields, such as text, email,
password, and more.

<textarea>: The <textarea> tag creates a multi-line text input field.

required attribute: The required attribute ensures that the field must be filled in
before submitting the form.

6.2 Form Submission:


When a user submits a form, the data is typically sent to a server for processing. We
can specify the action and method attributes of the form element to control how the data
is handled. Let's update our form with the necessary attributes:

<form action="submit.php" method="post">


<!-- Input fields here -->
<input type="submit" value="Submit">
</form>

In this example, the form data will be sent to a file named "submit.php" on the server
using the HTTP POST method.

Building Forms for User Input 2


Note: For form submission to work, you would need to set up a server-side script (such
as PHP, Node.js, or others) to handle the submitted data.

6.3 Other Input Field Types:


HTML offers various input field types to accommodate different data types and provide
better user experiences. Here are a few examples:

<input type="email">: For collecting email addresses.

<input type="password">: For collecting passwords (displays the input as masked


characters).

<input type="checkbox">: For selecting one or more options from a list.

<input type="radio">: For selecting a single option from a list.

Explore these input field types and experiment with their usage within the form.

Forms are a powerful tool for collecting user input and enabling interactions on web
pages. With HTML forms, you can create a wide range of user experiences and gather
data for further processing.

Building Forms for User Input 3


HTML Page Structure
A basic HTML page structure mainly consists of 4 HTML tags:

<!DOCTYPE html>: This is the Document Type Declaration that informs the web
browser about the type and version of HTML used on a web page.

<html> : A Web page begins & end with HTML tag

<head> : It includes the page title, scripts, styles & meta-information about website

<body> : It will contain the main content of the web page.

Example of HTML Page Structure

<!DOCTYPE html>
<html>
<head>
<title>This is a sample page title</title>
</head>
<body>

<h1>This is a heading.</h1>
<p>This is a sample paragraph content.</p>

</body>
</html>

Document Type Declaration:


A document type declaration (DTD), <!DOCTYPE html> is an instruction to the browser
about the type of document. The DTD specifies the rules for the markup language so

HTML Page Structure 1


that the browsers render the content correctly. It is always good to add a declaration to
your HTML documents for proper standards.
Html
HTML starting tag <html> indicates to the browser that it is an HTML document begins
and the HTML closing tag </html> tells the browser that the HTML document is
completed.
Header
The header section does not output text inside the browser, it is used to specify
information about the web page. It is used to display the page title, scripts, and style for
the web page.
Body
This is the main part of the HTML document. The content which we want to display on
the browser will be written inside body tags. The HTML body contains different types of
content and tags. For example, we have used <h1> heading and <p> paragraph tags
inside the body.
We will read more about the other tags in the next chapters.

HTML Page Structure 2


HTML Head
HTML Head element mainly contains metadata (data about data) about the HTML
Page.
You can place the HTML page title, scripts, styles, and other meta information in the
head element. This information is helpful for search engines and provides additional
data for HTML pages.
Type of data in HTML Head element:

Title: HTML Head element contains the title of the page that is displayed in the
browser title bar.

Scripts: All client-side scripts such as JavaScript often included in this Head
section

Styles: Internal & External Style rules also included inside the Head element

Meta: A few meta tags such as descriptions & keywords about HTML pages are
included inside the head section. These are useful for Search Engines.

The above data in the head is never directly visible in the main browser window. Some
of the head metadata is helpful for search engines like Google for better document
understanding. At the same time, styles are used to extend page formatting. Scripts are
internally used to enhance HTML web page functionality & event handling.

Example of HTML Head Element data

<!DOCTYPE html>
<html>

<head>
<title> HTML Head Tutorial - xyz.com </title>
<meta charset="UTF-8">
<meta name="description" content=" This website provides free online tutorials">
<meta name="keywords" content="HTML, CSS, PHP, SEO">
<meta name="author" content="xyz.com">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
alert("Simple JavaScript Alert");
</script>
</head>

HTML Head 1
<body>
This is sample content.
</body>

</html>

You can see following example, where different kinds of meta-information are included
in the Head element.
When you run the above example, you can see some titles in the Browser title bar as
defined in the title tag in the head. Search engines use meta keywords, descriptions &
author information.

You can read in detail about styles & scripts in later chapters.

HTML Head 2
HTML Elements and Tags
A Website page is made up of multiple HTML elements and an HTML element is made
of HTML tags.

HTML Tags
HTML tags are like labels or keywords to define a web page. These tags tell the
browser about the format or structure of the content.
Most of the tags come in pair. One is called the opening tag and the other is the closing
tag. Tags begin with a less-than sign “<" and end with a greater-than sign ">“ . For
example: <p></p> tags create paragraph content. While <h1></h1> tags are used to
create headings.

HTML Element
An element in HTML generally consists of an opening tag, content, and a closing tag.
We can see the HTML element as an individual web page component.

Start/Opening Tag
HTML elements start with opening tags. For example: <p><b><h1> etc.

End/Closing Tag
HTML elements end with closing tags. For example: </p></b></h1> etc.

Content
We place content between the opening and closing tags. For example: <p> This is
sample content. </p>

Nested HTML Elements


HTML elements can be nested. This means that the HTML element can contain many
other elements inside.

HTML Elements and Tags 1


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My sample paragraph content.</p>

</body>
</html>

HTML Empty Elements


HTML elements with no content are called empty elements. There are many empty
elements that do not have a closing tag.
For example: <br> is an empty element without a closing tag. It is used to create line
breaks.
It is good to close every tag. Empty elements can be “closed” in the same Opening tag.
For example: <br />

HTML5 does not require empty elements to be closed. But if you want strict validation,
or if you need to make your document readable by XML parser, you must close all
HTML elements properly.

HTML5 does not require empty elements to be closed. But if you want strict validation,
or if you need to make your document readable by XML parser, you must close all
HTML elements properly.

Tips while using HTML Tags:


Always close HTML tags to validate your webpage against W3C Validation
Standard.

HTML5 standard does not require lowercase tags but W3C recommends to use
lowercase in HTML

HTML Elements and Tags 2


HTML Attributes
HTML Attributes are part of the HTML Tags & elements. These attributes specify some
additional style or special information about the HTML tags.
Most of the time attributes are specified as pairs. For example: attribute="value"

Syntax of HTML Attributes


Attributes are always specified within a start tag. First, we need to specify the name of
the attribute and then, we assign a value to it (name=” value”)
Example: <h1 title="My Title"> My Heading </h1> tag.

The title Attribute


Each HTML Tag allows some specific attributes. Some HTML Attributes are used by
many different elements. For example, the Title attribute can be used in almost every
HTML element.

HTML Title attribute is used to display some titles to users when they mouse over that
element. For example: Example: <h1 title="My Title"> My Heading </h1> tag.
In the above example, when the user will take his mouse to "My Heading" text a Title (like
tooltip) "My Title" will be visible to the user.

The lang Attribute


The HTML lang attribute is used to declare the language of HTML page content. This
attribute is very helpful for screen readers and search engines.
Example: <html lang="en-US"></h1> tag.

The align Attributes


HTML align attribute can be used in paragraphs, images, and a few other tags for
horizontal alignment. This align attribute can have 3 main values (left, right, and center).
By using those values you can align a paragraph's content to left, right, or center in the
browser window.

HTML Attributes 1
<p align="left">This content is left aligned</p>
<p align="center">This content is aligned center</p>
<p align="right">This text is right aligned</p>

HTML width & height Attributes


You can set HTML images’ height & width using these HTML attributes. Images are
defined using HTML images are defined with the
tag. There is another attribute called “src” in this tag. It is used to specify the path of the
image.
Example: <img src="xyz-logo.jpg" width="200" height="300">

The style Attribute


The HTML style attribute is one of the most used attributes to specify the style rules for
different HTML elements. Using style attributes, we can set border, color, font size,
background color, and many other styles.
Example: <p style="color:red;"> This is Tutorials Class</p>

HTML Example with Various Attributes

<!DOCTYPE html>
<html>
<body>

<h1 title="My Title"> My Heading </h1>


<p align="center">This content is aligned center</p>
<p style="color:red;"> This is Tutorials Class's red content</p>
<img src="xyz.jpg" width="300" height="200" alt="Alternate Text" title="Tutorials" />
<a href="http://xyz.com"> Go to Tutorials Class Website </a>

</body>
</html>

HTML Attributes 2
You can read about more HTML attributes for various HTML Elements in each chapter.
For example, anchor tag use "href" attribute for links. Image tag use "alt" attribute for
alternate text.

HTML Attributes 3
HTML Headings
HTML specifies six levels of headings. All heading element has their own font size and
spacing before and after the heading.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important (highest level) heading. <h6> defines the least
important heading.

Example of All HTML Headings Levels:

<h1>Heading level 1</h1>


<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Why HTML Headings Are Important?


HTML Heading tags are important for users as well as Search Engines.

Heading tags helps users to pay attention to the main headings.

Search engines (such as Google) also use your headings to understand the
important components of your website.

We should use HTML headings to define headings content only. It should not be
used just to make text big or bold.

HTML Headings 1
Complete HTML Example with Headings

<!DOCTYPE html>
<html>

<head>
<title>HTML Headings Example</title>
</head>

<body>
<h1>First Heading</h1>
This is a simple content

<h2>Second Heading</h2>
This is a simple content
</body>

</html>

HTML Headings 2
HTML Paragraphs
HTML paragraph tags are used to define the text paragraphs.
When we create any document, we divide text content into multiple paragraphs.
Similarly, HTML documents can be divided into HTML paragraphs.
HTML <p> The tag defines a paragraph. This Paragraph tag automatically adds some
margin (white space) before and after a paragraph.
Simple Example:

<p>This is a sample paragraph.</p>

HTML Paragraphs – Complete HTML Program Example


You can use multiple paragraphs in an HTML program. The following example consists
of three <p> tags.

<html>
<head> </head>
<body>

<p>This is the first paragraph. You can add any kind of text here. </p>
<p>This is the second paragraph. This is some sample text. </p>
<p>This is another paragraph. You can add multiple lines of text in this paragraph. </p>

</body>
</html>

HTML Paragraphs 1
HTML Styles
HTML is primarily used to define the structure of the web page While Cascaded style
sheets (CSS) are a language that is used for the presentation of HTML Pages.
Using CSS in HTML, we can change colors, fonts, and other kinds of formatting on a
web page. There are many different ways to include CSS in an HTML page. We will see
a simple way to apply CSS Rules in the HTML Document.

Syntax
You can use style attributes to apply CSS to any HTML page.
style="property: value;"

HTML Background Color


We can set background colors for various HTML Elements.
The background-color property is used to define the background color.

Example of HTML Styles – Background Color

<body style="background-color:lightblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

HTML Text Color


We can change the color of the text using color properties in any HTML element.

Example of HTML Text color

HTML Styles 1
<h1 style="color:black;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts
The font-family property is used to define the font types for an HTML element.

Example of HTML Font

<h1 style="font-family:arial;">This is a heading</h1>


<p style="font-family:Times New Roman;">This is a paragraph.</p>

HTML Text Size


The font-size property defines the text size for an HTML element.

Example of HTML Text Size

<h1 style="font-size:15px;">This is a heading</h1>


<p style="font-size:20px;">This is a paragraph.</p>

HTML Text Alignment

HTML Styles 2
The text-align property is used to set a horizontal text alignment for an HTML element.

Example of HTML Text Alignment

<h1 style="text-align:right;">right heading</h1><p style="text-align:center;">This is a pa


ragraph.</p>

HTML Styles 3
HTML Formatting
HTML Formatting tags are used to format the appearance of the text on your web page.
When you use MS Word processor, you format text as bold, italic, or underlined.
Similarly, HTML Formatting tags help you to format text in different ways.

HTML Formatting Tags List


Formatting Tags Example & Syntax

Bold & Strong Tag <b> Sample Text </b> <strong> Sample Text </strong>

Italic & Emphasized


<i> Sample Text </i> <em> Sample Text </em>
Tag
Small Tag <small> Sample Text </small>

Big Tag <big> Sample Text </big>

Marked (Highlighted)
<mark> Sample Text </mark>
Tag
Deleted (Removed)
<del> Sample Text </del>
Tag
Inserted (Added) Tag <ins> Sample Text </ins>

Subscript Tag <sub> Sample Text </sub>

Superscript Tag <sup> Sample Text </sup>

Next, we will cover these HTML Text formatting tags in detail below.

HTML Bold & Strong Text Formatting


HTML Bold Tag: The HTML <b> element defines bold text, without any extra
importance.

Here the text is normal.


<b>Here the text is bold.</b>

HTML Formatting 1
HTML Strong Tag: The HTML <strong> element defines strong text, with added
semantic “strong” importance.

Here the text is normal.


<strong>Here text is strong</strong>

HTML Italic and Emphasized Text Formatting


HTML Italic Tag: The HTML <i> element defines italic text, without any extra
importance.

This text is normal.


<i>Text is italic</i>
The text is normal.
<i>Text is italic</i>

HTML Emphasised Tag: The HTML <em> element defines the emphasized text, with
added semantic importance.

The text is normal.


<em>Text is emphasized</em>

HTML Small Text Formatting

HTML Formatting 2
The HTML <small> element defines small text.

This is normal text


<small>This is Small Text</small>

HTML Big Text Formatting


The HTML <small> element defines bigger text. All text placed between this tag will
have bigger text as compared to normal.

This is normal text


<big>This is Big Text</big>

Note: Note: The big element is not supported in HTML5.

HTML Marked Text Formatting


The HTML <mark> element defines marked text. All content placed inside this tag will be
marked (highlighted).

This is normal text


<mark>This is Marked or Highlighted Text</mark>

HTML Formatting 3
HTML Deleted Text Formatting
The HTML <del> element defines deleted (removed) text.

This is normal text


<del>This is Deleted or Removed Text</del>

HTML Inserted Text Formatting


The HTML <ins> element defines inserted (added) text.

This is normal text


<ins>This is Inserted or Added Text</ins>

HTML Subscript Text Formatting


The HTML <sub> element defines sub-scripted text.

This is normal but this is text


This is <sub> sub-scripted Text</sub>

HTML Superscript Text Formatting


The HTML <sup> element defines super-scripted text.

This is normal but this is text


This is <sup> super-scripted Text</sup>

HTML Formatting 4
HTML Comments
HTML Comment tags are used to insert some useful comments in the HTML document.
Anything you write inside Comment tags will be ignored by the web browser and it will
not show any output to the user. Comments are very helpful for programmers. Using
HTML Comments, you can add some useful descriptions of some code. They help you
understand your code and increase code readability later.
Example of Comment tag: <!-- This is a sample comment -->

<!-- Add any comment about the following paragraph -->


<p>This is a first paragraph.</p>

<!-- This comment will tell something about the following paragraph -->
<p>This is another paragraph for testing.</p>

Complete HTML Program with Multi-line HTML Comments


You can simply use multiple lines to add large comments using the same tags. See the
multi-line comment example below:

<html>
<head>
<title>Multiline Comments Testing</title>
</head>
<body>
<!--
This is a multiline comment and you can
add some description about the following
code so that it will be helpful to others.
-->
<p>This is some sample text.</p>
</body>
</html>

HTML Comments 1
Conditional Comments
Conditional comments define HTML tags to be executed by Internet Explorer only.

<!--[if IE 8]>
.... some HTML or code here only for Internet Explorer...
<![endif]-->

HTML Comments 2
HTML Links
Links are used to connect multiple HTML pages.
A Website is a collection of web pages and these web pages are connected with each
other using HTML links. Users can visit one page to another HTML web page by
clicking on the links.

More Information About Links:


HTML links are also called Hyperlinks.

Link can be in the form of text as well as images or other media

You can provide a link to any section of the same page, any other page within a
website or any external website as well.

HTML Links Syntax


We can create HTML links using the anchor <a> tag.
For example: <a href="http://www.xyz.com"> Tutorials Class </a>

The href attribute is used to specify the link address of the web page. The text between
the anchor tags “Tutorials Class” is visible to the user. Users can click on this and it will
take them to another page.
Example of HTML Link using anchor tag:

<html>
<body>

<a href="http://xyz.com" target="_blank">Go to Tutorials Class</a>

</body>
</html>

HTML Links 1
Type of Link URLs:
Absolute URLs: These are full addresses to the destination page/link.
Example of Absolute URL is: <a href="http://www.xyz.com/page1.html"> Page 1 Link </a>

Relative URLs: A relative URL links to a file in relation to the present directory.
For example, if you want to create a link from “page1.html” to “page2.html” and both
files are in the same folder, you can simply provide the file name in href. It is called the
relative URL.
Example of Relative URL: <a href="page2.html"> Page 2 Link </a>

HTML Links Target:


We can set HTML Links Target to open into the new window or the same window. The
target attribute is used with one of the following values:
Example of HTML Target Attribute: <a href="page2.html" target="_top"> Link with New
Window </a>

HTML Target Attribute Values List


Target Value Purpose

_blank It opens the linked page in a new window or tab

It opens the linked page in the same window/tab in which we clicked on the
_self
link. (This is the default link target)
_parent It opens the linked page in the parent frame

_top It opens the linked page in the full body of the window

framename It opens the linked page in a named frame

Complete Example of HTML Links


Let us create two files “page1.html” & “page2.html” . We will create a link between these
two files using a relative URL. We will also test a link using an absolute url as well.
Create an HTML file “page1.html” and write the following code:

HTML Links 2
<html>
<body>

<a href="page2.html" >Example of Relative Link</a>

<a href="http://xyz.com" target="_blank">Example of Absolute Link</a>

</body>
</html>

Create an HTML file “page2.html” and write the following code:

<html>
<body>

<a href="page1.html">Example of Relative Link</a>

<a href="http://google.com" target="_blank">Example of Absolute Link</a>

</body>
</html>

HTML Links 3
HTML Images
You can insert HTML images on a web page.
Images play an important part to make a web page attractive and beautiful. You can add
multiple images with a variety of sizes to the HTML page. Some of the most used image
formats and extensions are .jpg, .png, .jpeg & .gif.
Till now, we have used text along with different formatting options. Now we will see how
to add images, graphics, and even icons on our web page.

How to Insert HTML Images:


Images can be inserted with the <img> tag in HTML.
The source (src) attribute specifies the image URL (address). The <img> tag is an
empty tag, so it does not have any closing tag. However, you can optionally close it like
this: <img />
Example to simply include “photo.jpg”: <img src="photo.jpg">

Example using Relative Image URL:


A relative URL specifies a path that is relative to the current folder/page. When you
have an image in the same or nearby folder, you need not specify the full domain or
path of the image. You can only specify the image name in the source if the image
exists in the same folder.

<img src="myimage.jpg">

If an image is in any sub-folder, you can mention the folder name with the slash “/” and
then the image name. Suppose image “myphoto.jpg” is available in the “pictures” folder,
We can include it as given in the following example:

<img src="pictures/myphoto.jpg">

Example using Absolute Image URL:

HTML Images 1
Absolute URL refers to the full Image URL/Path for the image location. You can include
images from external websites using absolute URLs in the source. See the example
below:

<img src="http://xyz.com/wp-content/uploads/2016/04/xyz-logo1.png">

Image Alternate Text Attribute


The alt attribute is used to specify an alternate text for an image. This text will be
displayed if the image is not found at a given location. You can test it by using the wrong
image URL in the source. Use the example below:

<img src="test.png" alt="Test Photo Alternate Text">

Image Title Attribute


The title attribute is used to specify the title of an image. This title is visible when you
point your mouse over any image. Use the example below:

<img src="http://xyz.com/wp-content/uploads/2016/04/xyz-logo1.png" title="This is Tutorial


s Logo Title">

Image Size (Width & Height Attribute)


Width and Height attributes are available to specify the image width and height. The
values for Height and Width attributes are specified in pixels (px) by default.

<img src="www.xyz.com/photo.jpg" height="300" width="500" >

Image Border Attribute


You can set a border around the image using “border” attribute. By default border
thickness will be measured in pixels (px) and images will have 0 or no border if not
specified.

HTML Images 2
<img src="www.xyz.com/photo.jpg" border="5px" >

Image Alignment Attribute


You can align the image horizontally using the “align” attribute of “img” tag. Images are
aligned left by default. To test image alignment in a better way, you can add some text
or paragraphs as well.

Commonly used align properties are given below:

Set Image Alignment Left: align="left"

Set Image Alignment Right: align="right “

Set Image Alignment Center: align="center"

This is a sample text. <img src="www.xyz.com/photo.jpg" align="right" >


This is another text.

Complete Example using all Image Attributes


You can use multiple images on any webpage. Different attributes can be used together
for any image as well. Use the following example to test various image properties.
Please change the Image name & URL as per your image.

<html>
<head>
<title>Example of Image Tag & Attribute - Tutorials Class</title>
</head>
<body>
<p>This is a test paragraph.</p>
<img src="sample-picture.jpg" alt="Sample Image Text" border="5" align="right" />
<p>This is sample text. We will add an image in html page.</p>
<img src="test-photo.jpg" height="300" width="400" title="Sample title" />
</body>
</html>

HTML Images 3
HTML Lists
HTML List Tags are used to specify information in the form of a list.
HTML Lists are very useful to group related information together. Often List items looks
well-structured and they are easy to read for users. A list can contain one or more list
elements.

HTML Lists Type


HTML offers three types of lists. Following Table will give you a brief description of them.

List Type Description Tags used

Unordered List used to group a set of items without any order. <ul>,<li>

Ordered List used to group a set of items, in a specific order. <ol>,<li>

used to display some definition term (dt) &


Definition List <dl>,<dt>,<dd>
definition’s description (dd)

Unordered lists
Unordered lists are used to list a set of items when they have no special order or
sequence. It is also called a bulleted list.
An unordered list is created using HTML <ul> tag. Each item in the list starts with
the <li> tag

Example of Unordered List

<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

List Tags
<li> tag is used to display list elements and it is used in ordered and unordered lists.

HTML Lists 1
The above example will list items with bullets (small black circles) by default. There are
different list styles available such as a bullet, circle, etc.

Unordered List Style Type Attribute


HTML offers three types of lists. Following Table will give you a brief description of them.

HTML Unordered List Types


List Style Type Description Example & Syntax

disc Starts a list using discs type bullets (default) <ul type="disc">

circle Starts a list using circle-type bullets <ul type="circle">

square Starts a list using square-type bullets <ul type="square">

none Starts a list without bullets <ul type="type:none">

Example of Unordered List with Different List Styles

<html>
<title> Unordered List Example Test - Tutorials Class </title>
<body>

<h2>Unordered List of Fruits with Disc Bullets</h2>


<ul type="disc">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>

<h2>Unordered List of Colors with Circle Bullets</h2>


<ul type="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<h2>Unordered List of Fruits with Square Bullets</h2>


<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>

<h2>Unordered List of Colors without bullets</h2>


<ul type="none">

HTML Lists 2
<li>Black</li>
<li>Green</li>
<li>Blue</li>
</ul>

</body>
</html>

List style type can be set using CSS as well, for example: <ul type="square">. You can
read about them in CSS List Style Tutorial.

Ordered lists
An ordered list is used to list related items in a numbered or other specific order. This is
useful when you want to show counts of items in some way.
The ordered list is created using HTML <ol> tag. Each item in the list starts with
the <li> tag

Example of Ordered List

<ul>
<li>Red</li>
<li>Green</li>

HTML Lists 3
<li>Blue</li>
</ul>

The above example will list colored items with numbers by default. There are different
list styles available for an ordered list such as numbers, letters, etc.

Ordered List Style Type Attribute


HTML offers three types of lists. Following Table will give you a brief description of them.

HTML Ordered List Style Type Attribute


List Style Type Description Example and Syntax

Numbers Starts a list using numbers (default) <ol type="1">

Uppercase letters Starts a list using uppercase letters <ol type="A">

Lowercase letters Starts a list using lowercase letters <ol type="a">

Uppercase roman Starts a list using uppercase Roman


<ol type="I">
numbers numbers

Lowercase roman Starts a list using lowercase Roman


<ol type="i">
numbers numbers

Example of Ordered List with Different List Styles

<html>
<title> Ordered List Example - Tutorials Class </title>
<body>

<h2>Ordered List of Fruits with Numbers </h2>


<ol type="1">
<li>Banana</li>
<li>Apple</li>
<li>Grapes</li>
</ol>

<h2>Ordered List of Fruits with Uppercase letters</h2>


<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ol>

<h2>Ordered List of Colors with Lowercase letters</h2>

HTML Lists 4
<ol type="a">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

<h2>Ordered List of Colors with Uppercase Roman numbers</h2>


<ol type="I">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

<h2>Ordered List of Colors with Lowercase Roman numbers</h2>


<ol type="i">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

</body>
</html>

Definition Lists
A definition list is used to list items along with a description of each item.

HTML Lists 5
An ordered list is created using HTML <dl> tag. Between <dl> tag, we use <dt> to
define the terms and <dd> to describe that term.

Example of Definition Lists

<dl>
<dt>Computer</dt>
<dd>Computer is an electronic device that is designed to work with Information.</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language (HTML) is the standard markup language for creating web
pages and web applications.</dd>
</dl>

Nested HTML Lists


When we used a list inside the list, it is called Nested List. We will see an example that
will have different lists including the Nested list as well.

Example of a Complete HTML program using different Lists:

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>


<ul>
<li>Red</li>
<li>Black
<ul>
<li>Light Black</li>
<li>Dark Black</li>
</ul>
</li>
<li>Blue</li>
<li>Green</li>
</ul>

<h2>Unordered List</h2>
<ul type="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

<h2>Numbered Ordered List </h2>


<ol type="1">

HTML Lists 6
<li>Bannana</li>
<li>Apple</li>
<li>Grapes</li>
</ol>

<h2>Uppercase Ordered List</h2>


<ol type="A">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>

<h2>Definition List</h2>
<dl>
<dt>Computer</dt>
<dd>Computer is an electronic device that is designed to work with Information.</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language (HTML) is the standard markup language for creating web
pages and web applications.</dd>
</dl>

</body>
</html>

HTML Lists 7
HTML Iframes
An HTML Iframe is used to include and display one web page within another web page.
The iframe is also called Inline Frame. Using HTML Iframes, you can embed one or
more external HTML documents or web pages into your web page.

Iframe Syntax

<iframe src="http://xyz.com/"></iframe>

HTML <iframe> tag is used to create Iframe in the webpage. The src attribute specifies
the webpage address which you want to display in a frame.

Iframe – Attributes List


There are many Iframe Tag Attributes available to use for different purposes. We have
set the Iframe source using The src attribute in the previous example. You can also
use attributes to set Iframe height and width as well. See more attributes in the following
table:

Attribute Description Syntax & Example

used to give the webpage URL that needs to


Source (src) src="page.html"
load in the frame.

Height used to set the height of the frame. height="400"

Width used to set the width of the frame width="500"

used to enable or disable resizing of frames by


No Resize noresize="noresize"
users

Frame Border used to define the border of the frame frameborder="1"

Scrolling used to enable or disable scrolling scrolling="yes"

Iframe – Height and Width

HTML Iframes 1
Iframe height and width attributes are used to specify the size of the iframe. By default,
the value of these attributes is specified in pixels, but you can specify in percentage as
well.
Complete the HTML Iframe program with Height and Width:

<!DOCTYPE html>
<html>
<body>

<iframe src="http://xyz.com" height="400" width="500"></iframe>

</body>
</html>

Iframe – Border
You can set border width using frameborder attribute. iframe always has a border by
default, but we can remove it by setting frameborder="0"

You can set and remove borders using CSS attributes as well. We can read about that
in the CSS border tutorial.

<iframe src="http://google.com" frameborder="4"></iframe>


<iframe src="http://xyz.com" frameborder="0"></iframe>

Iframe as a Target for a Link


An HTML iframe can be used as the target frame for an HTML link. This works in two
simple steps:

1. Assign a name to the Iframe using the name attribute.

2. Create an HTML Link using the anchor tag and give the above Iframe name to this
link’s target attribute.

This way, when the user will click on the above link, its reference page will be opened in
the target Iframe.

<!DOCTYPE html>
<html>

HTML Iframes 2
<body>

<iframe height="50%" width="60%" src="page1.html" name="tc_frame"></iframe>

<p><a href="http://xyz.com" target="tc_frame">Tutorials Class</a></p>

<p> When the user will click on the above link, its reference page will be loaded in the t
arget Iframe.</p>

</body>
</html>

HTML Iframes 3
HTML Forms
HTML Forms are used to collect some data from users on a webpage.
Forms contain special control elements like input text box, checkboxes, radio-button
and submit buttons. Using form elements, you can take different types of data from
users. This data can be used for different purposes.
Example of HTML Forms:
You must have seen different kinds of forms on websites. For example, the User
Registration form is used to collect user data to store in a database. The simple Contact
form allows users to send messages or contact website owners. HTML works with
Server side programming languages (like PHP or ASP) to send this form into the
database or in email.

Form Element
HTML <form> tag is used to define an HTML form. All other form elements are defined
inside this tag. Different types of form elements include input text elements,
checkboxes, radio buttons, submit buttons, and many more.
Example of Simple Form Element

<form><input type="text" /></form>

Form – Attributes List


Attributes Description Syntax & Example

defines the URL of the program or page


action where the action will be performed on form action="page2.php"

data.
specify the HTTP method to send form
method method="get"
data.

target specify the target window or frame target="_blank"

enctype="multipart/form-data"
enctype specify the encoding of form data (for

HTML Forms 1
media files)

Action Attribute
The action attributes specify the action to be performed after form submission. Mostly,
we pass a page URL into the action.
That action page is usually created with some server-side programming that can
perform some action on form data. Action can be related to inserting form data into a
database or sending that data into some email. For Example: <form action="page2.php">
Method Attribute

The method attribute tells which HTTP method to use for submitting form data. You can
use the GET & POST method.

The GET method sends data along with the page URL. For
Example: <form method="GET">

The POST method transfers information via HTTP headers. For


Example: <form method="POST">

Target Attribute
The target attribute works in a similar way as in the anchor tag. After form submission,
action will be directed to another page. This action page can be opened in the same
window, a new window, or some frame. Example: <form target="_blank">

_blank will open a new page after the form is submitted.

_self will open the action page in the same window.

_parent will open the action page in the parent frame.

Enctype Attribute

The enctype attribute is used to specify how the browser encodes the form data after
submission. An example of an Enctype attribute using default values
is: <form enctype="application/x-www-form-urlencoded">
When you need to send/upload some media file such as pdf or image, set enctype as a
multipart. For example: <form enctype="multipart/form-data">

Example of Form with different attributes:

HTML Forms 2
<html>
<head>
</head>
<body>
<form action="page2.php" method="POST" enctype="multipart/form-data" target="_blank" >
<input type="text">
</form>
</body>

Form – Input Elements


The input element is the most commonly used element in the form. Input elements are
defined by <input> tag. There are many input-type elements available in the form.
Depending upon the type attribute different input elements can be displayed. Some
examples of input elements are text, buttons, check-box, and radio-button.

Form – Input type element


Attribute Description Syntax & Example

used to define a text box that allows users to


Text Box input type="text"
enter some text.

defines a radio button that allows users to select


Radio Button input type="radio"
any one option or choice
defines a checkbox that allows users to select
Checkbox input type="checkbox"
multiple options or choices
Button defines normal buttons for users for some action input type="button"

defines a button that resets form data when the


Reset Button input type="submit"
user clicks on it.
defines a Form submission button that submits
Submit Button input type="reset"
form data when the user clicks on it

Form – Input Text Field & Attributes


Input Text field defines a single line input field for users. Example: <input type="text">

Attributes: You can use the following attributes with the text field:

type=” text” defines the text box/field where the user can enter some text.

HTML Forms 3
the name defines a unique name for every form element to get their data after
submission.

the value specifies the default or initial value in the text field. Users can change it.

<html>
<head> </head>
<body>
<form>
User Name: <input type="text" name="username" value="Enter your Name" ><br>
Mobile: <input type="text" name="mobile">
</form>
</body>
</html>

Radio Button
Radio Button defines a radio button where the user can select one option from multiple
choices in forms. Example: <input type="radio">

Attributes: You can use the following attributes with the text field:

type="radio" defines the Form’s input element as a radio button

name that defines a unique name for every radio button element to get their data
after submission.

value The value that will be transferred as data after submission if the radio box is
selected.

checked It will set the current checkbox checked by default.

<html>
<head> </head>
<body>
<form>
<input type="radio" name="nationality" value="India"> India
<br/>
<input type="radio" name="nationality" checked value="Australia"> Australia
</form>
</body>
</html>

Checkbox Input

HTML Forms 4
Check Boxes are used when you want to allow the selection of more than one option by
the user. Example: <input type="check">

Attributes: You can use the following attributes with checkboxes:

type="radio" defines the Form’s input element as a radio button

name defines a unique name for every radio button element to get their data after
submission.

The value that will be transferred as data after submission if the radio box is
value

selected.

checked It will set the current checkbox checked by default.

<html>
<head>
<title>Form Checkbox Example - xyz.com</title>
</head>
Select your hobbies:
<body>
<form>
<input type="checkbox" name="hobbies" value="singing"> Singing
<br/>
<input type="checkbox" name="hobbies" value="dancing"> Dancing
<br/>
<input type="checkbox" name="hobbies" value="book-reading" checked> Book Reading
<br/>
</form>
</body>
</html>

Form – Submit & Reset Button


You can create buttons in Form. Depending upon the type of button, it performs some
action on form data.

Type of buttons: There are 3 commonly used buttons in Form:

A simple button defines the regular button with no action. We can add some
specific actions later using JavaScript. Example: <input type="button">

Submit button defines the submit button. When the user clicks on submit button, it
will submit the form to transfer data. Example: <input type="submit">

HTML Forms 5
The reset button is used to create a reset button. When the user clicks on the reset
button, all form data will reset to default values. Example: <input type="reset">

Attributes

value specifies the button value.

name defines a unique name for every button to identify later.

<form action="page2.html">
Name:<br>
<input type="text" name="username" value="Robin"><br>
<input type="button" value="Button">
<input type="reset" value="Reset Form">
<input type="submit" value="Submit">
</form

Form – Select Menu


Select Element is used to create a drop-down list. Users can select any item from the
list. All list items are specified using the option tag.

Select Attributes

the name defines a unique name for every select menu to identify later get its list
data

size scrolling list box

multiple attributes allow users to select multiple items from the list at the same
time.

Option Attributes

the value specifies the value of the list item. After submission, this value will be
sent if the user selected an item.

the name defines a unique name for every button to identify later.

the selected attribute in any option set itself as a default selected item in the drop-
down list.

<html>
<body>

HTML Forms 6
<form>
<select name="dropdown">
<option value="" selected>Select your favorite city</option>
<option value="newdelhi" selected>New Delhi</option>
<option value="newyork">New York</option>
<option value="paris">Paris</option>
</select>
</form>
</body>
</html>

HTML Forms Element – Complete Example


Here is an example of various HTML Form elements. Most HTML Forms use more than
one HTML form element.

<html>
<head>
<title>HTML Forms Element Example - xyz.com </title>
</head>
<body>
<form action="page2.php" method="POST" enctype="multipart/form-data" target="_blank" >
User Name: <input type="text" name="username" value="Enter your Name" >
<br><br/>
Mobile: <input type="text" name="mobile">
<br/><br/>
Select Your Country:
<input type="radio" name="nationality" value="India"> India
<input type="radio" name="nationality" checked value="Australia"> Australia
<br/><br/>
Select Your Hobby:
<input type="checkbox" name="hobbies" value="singing"> Singing
<input type="checkbox" name="hobbies" value="dancing"> Dancing
<input type="checkbox" name="hobbies" value="book-reading" checked> Book Reading
<br/><br/>
Select Your City:
<select name="dropdown">
<option value="" selected>Select your favorite city</option>
<option value="New Delhi" selected>New Delhi</option>
<option value="NewYork">New York</option>
<option value="Paris">Paris</option>
</select>
<br/><br/><br/>
<input type="button" value="Button">
<input type="reset" value="Reset Form">
<input type="submit" value="Submit">
</form>

HTML Forms 7
</body>
</html>

This HTML program will create a Form with different elements. Users can fill in the
information using these form elements. After the user submits a form, all data can be
passed to another page. This form of data can be processed by some server-side
programming languages such as PHP, ASP, or JSP.

HTML Forms 8
HTML Tables
HTML Tables are used to organise information into rows and columns.
In HTML tables you can arrange data such as text, images, or links. Using Tables you
can get better formatting of data.

List of Table Tags


Attribute Description Syntax & Example

Used to define a table. All other table tags and data are
Table Tag <table></table>
placed within the Table tag.
Used to define table heading row. Mostly used for the first
Table Heading <th></th>
table row.
Table Row Used to define each table row. <tr></tr>

Table Data Used to define table data in cells <td></td>

Example of Simple HTML Table:


HTML Table is created using <table> tag. All other table tags are placed under this tag.
The first row often contains heading in tables. A row starts with <tr> tag and then each
heading is created using <th> tag for each column.
Then we create another row for data. Again, A new row starts with <tr> tag while data
is created using <td> tag for each column.

<html>
<body>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Subject</th>
</tr>
<tr>
<th>101</th>
<th>Robin</th>
<th>Maths</th>
</tr>

HTML Tables 1
<tr>
<th>102</th>
<th>John</th>
<th>English</th>
</tr>
</table>
</body>
</html>

HTML Table Tag & Attributes


You can make some changes in Table styles using the given attributes.
For example, the above simple html table program has a border attribute that draws a
border around the table. Here, is the list of common table attributes.

HTML Table Attributes


Attribute Description Syntax & Example

Border used to specify borders around the table & cells border="2"

specify the amount of spacing between the cell border


Cell Padding cellpadding="5"
and cell content.
specify the amount of spacing between two adjacent
Cell Spacing cellspacing="3"
cells.
Width used to set the width of the table. width="80%"

align used to set the alignment of the table horizontally. align="center"

bgcolor used to set the background color of the table. bgcolor="blue"

background used to set the image in the table background. background="image.jpg"

HTML Tables 2
Example using Table Attributes
Here is a simple example using various table attributes.

<!DOCTYPE html>
<html>
<head>
<title> Table Attributes - xyz.com </title>
</head>
<body>

<table width="80%" border="2" bgcolor="skyblue" align="center" cellspacing="3" cellpadding


="5">
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Robin</td>
<td>Delhi</td>
<td>9876459089</td>
</tr>
<tr>
<td>Rocky</td>
<td>New York</td>
<td>9876459089</td>
</tr>
</table>
</body>
</html>

Basic HTML Page layout using table tag


A web page layout is often divided into multiple columns. Then these columns are
treated as different sections of data.
There are two most popular ways to create those columns in html page. One way is
using <div> tag and another way is using HTML <table> tag.

HTML Tables 3
Most of the website layout has one common header area where we place the website
logo or tagline (and sometimes the menu as well). Then we have the main content
section divided into two or three columns.

The bottom of the webpage contains a common footer section, where we can place a
logo, copyright statement, menu, or some other content.

In two columns we have one left or right sidebar area and one content area. In three
columns page design, we have a left sidebar area, a main content area, and then one
right sidebar area.

Creating an HTML page layout using table tags


Let us create a two-column layout along with the header and footer area using an HTML
table.

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Layout using Tables</title>
</head>
<body>
<table width="90%" border="1" align="center">
<tr>
<td colspan="2" bgcolor="green">
<h1>Website Title or Tagline</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="lightblue" width="30%">
<b>Fruit Menu</b>
Orange<br />
Banana<br />
Apple<br />
Grapes
</td>
<td bgcolor="orange" width="60%" height="200">
This is the main content area.
</td>
</tr>
<tr>
<td colspan="2" bgcolor="sky blue" align="center">
Copyright © 2023 xyz.com
</td>

HTML Tables 4
</tr>
</table>
</body>
</html>

HTML Tables 5
HTML Frames
HTML Frames are used to divide a browser window into multiple rectangular sections or
frames, where each frame can load and display separate HTML documents.
Warning: Do not use body tags when using frames. Use <frameset> instead of <body> ,
not inside of <body> . Similarly, No other tags like paragraphs, etc can be used along
with frames except inside <noframes> tag.

HTML Frames Tags and Element List


<frameset>Attribute List
Syntax &
Attribute Description
Example
used to define the number of rows in the frameset and
rows rows="20%,60%,20%"
the size of each row.
used to define the number of columns in the frameset
cols cols="25%,50%,25%"
and the size of each column.

border used to define the border width of the frameset. border="5"

bordercolor used to set the color of the border between frames bordercolor="blue"

<frame> Attribute
List
Syntax &
Attribute Description
Example

used to give the file or page URL that should be loaded


src src="page1.html"
in the frame.
used to give a name to a frame. It is useful to identify a
name name="left-frame"
frame to load a document using the link’s target.

noresize used to disable frame window resize noresize="noresize"

Frame Set
All frames are defined under the frameset. To use frameset, use the <frameset> tag and
avoid the <body> tag. We can set the rows and columns attributes for this frameset to

HTML Frames 1
define the layout.
Example of Frameset: <frameset rows="70%,30%" border="3">

The above example will create two vertical sections. The first will take 70% of the
browser window and the second will take 30%.

Frame
Each frame section is defined using a frame tag along with the page or file source that
you want to load in that frame. You can set a name for each frame. It will help when you
want to load a page into a certain frame when click on some link.
Example of Frameset: <frame name="left-frame" src="left-section.html">

<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="page1.htm">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</html>

No Frame
Some old browsers do not support frames. We can use <noframes> tag along with
frames. The browser will load <noframes> content if frames are not supported. Thus, we
can add body text and some messages if the frame is not loaded.

Complete Example of Frameset

<HTML>
<HEAD>
<TITLE>A Complete HTML Frameset Example | xyz.com</TITLE>
</HEAD>
<frameset cols="30%, 70%" bordercolor="blue" noresize="noresize">
<frameset rows="100, 200" bordercolor="red">
<frame name="first-frame" src="page1.html">
<frame name="second-frame" src="page2.html">
</frameset>
<frame name="third-frame" src="page3.html">
<noframes>
<p> This document contains frame content. Your browser does not support it. </p>
</noframes>

HTML Frames 2
</frameset>
</HTML>

The above example will first create two frame sections, 30%, and 70%. Now the first
frame is again divided into two frames 50% and 50%. You can see each frame having a
source HTML page to load for example: page1.html, page2.html & page3.html.

HTML Frames 3
CodeWithRandom: 500+ Html,Css and
JavaScript Project with Source Code
🌟 Welcome to a world of coding wonders! Dive into the magic of web development with our
collection of 500+ projects in HTML, CSS, and JavaScript. Each project comes with its source

✨🚀
code, making learning a breeze and turning coding into an enchanting journey. Let's explore,
create, and make your coding dreams come true together!

https://www.codewithrandom.com/
CodeWithRandom: Your Heartwarming Journey
into HTML and Coding Joy
🌟 Bravo on reaching the final pages of this HTML eBook and hand-written notes journey with
CodeWithRandom! 🎉 Your dedication to learning HTML warms our hearts and fuels our
passion for making coding an enjoyable experience. 🚀

🌈 As you step into the world of coding, think of CodeWithRandom as your friendly guide, here
to support and inspire you. 🌟 You're not just a learner; you're a cherished member of our
coding family! 🤗

🧠 Remember, coding is not just about symbols and rules; it's a canvas for your creativity to
blossom. 🌸 Let your coding journey be filled with joy, discovery, and the satisfaction of bringing
your ideas to life. 🚀

💖 Thank you for choosing CodeWithRandom as your companion. Your enthusiasm makes our
coding community shine brighter! 🌟 Happy coding, and may your coding adventures be as
delightful as the stories you've just explored. 💻🚀 #CodeWithRandom #HappyCoding

You might also like