Scribd
Upload
24 views

Html class notes

Full html notes

Uploaded by

bakwaskaam1173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Html class notes

Full html notes

Uploaded by

bakwaskaam1173
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 124

What is Web Page?

A Web Page is a document composed basically of text and special codes called Tags
which make the display of the document on the World Wide Web possible. Besides text
information, this document can contain images, sound, animation, GIF, and even videos.
The page can also contain links to other pages stored on your system or anywhere on the
internet.
How do you access a web page?
 Access to a Web Page is made through a special type of program called a
Browser. There are several programs in this category available in the
market. The most common in them are: Microsoft Internet Explorer, Google
Chrome, Firefox Browser, Netscape Navigator and many more.
 The purpose of a web browser is to read HTML documents and display
them. The browser does not display the HTML tags, but uses them to
determine how to display the document
How Do You Create a Web Page?

 A Web Page is composed of text and HTML tags. HTML is a


Markup language. This language is quiet simple. Its
basic purpose is to format the text displayed and create
links between Web Pages, thus creating hypertext
documents.
 The programmer has to write the source code according to
the syntax of the language in any of the simplest Text
Editors. This source code is then interpreted by the
browser and displays the content. The most practical and
productive method of writing a Web Page is to use an
HTML Editor.
What is HTML?

 HTML is the specialized standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language

 HTML describes the structure of a Web page


 HTML consists of a series of elements
 HTML elements tell the browser how to display the content

 HTML elements are represented by tags


 HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on
 Browsers do not display the HTML tags, but use them to render the content of the
page
 With HTML, you can create your own website
HTML Tags

 Tags are identified by the <> or</> symbols.


 HTML tags are element names surrounded by angle brackets:
<tag name>content goes here...</tag name>
 HTML tags normally come in pair like <p> and </p>.
 The first tag in a pair is called Start Tag, the second tag is the End Tag.
 The end tag is written like a start tag, but with a forward slash(/) instead
before the tag name.
 Start tag is also called Opening Tag and end tag is called the Closing Tag.
HTML Page Structure
 Below is the visualisation of an HTML page structure:

<html>

<head>
<title> Page title </title>
</head>

<body>
𝐴𝑐𝑡𝑢𝑎𝑙 𝑐𝑜𝑛𝑡𝑒𝑛𝑡
<h1> This is heading </h1> 𝑑𝑖𝑠𝑝𝑙𝑎𝑦𝑒𝑑 𝑏𝑦 𝑏𝑟𝑜𝑤𝑠𝑒𝑟
𝑖𝑠 𝑖𝑛𝑠𝑖𝑑𝑒 𝑡ℎ𝑒 < 𝑏𝑜𝑑𝑦 >
<p> This is a paragraph </p> 𝑡𝑎𝑔
</body>
</html>
A Simple HTML Page
 <!DOCTYPE html> OUTPUT:
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
 An HTML document begin with <html> tag and end with
<html> tag.
 Content written in <body> and </body> is displayed by the
browser.
 HTML is not a case sensitive language.
 The <!DOCTYPE> declaration declares the document type.
It is used for browser to display the information correctly.
Program will run without doctype declaration but in bigger
programs, some display error may occur
 In HTML, declaration syntax is: <!Doctype html>
HTML Headings
 HTML headings are defined as <h1> to <h6>
 <h1> defines the most important heading whereas, <h6> defines
the least important heading.

 <h1> is largest heading and <h6> is smallest heading in text size.
 EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
OUTPUT:
HTML Paragraphs
 HTML paragraphs are defined with the <p> tag: OUTPUT:
 EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
<html>
<head>
<title> My HTML page </title>
<body>
<h1>Example for paragraphs and pressing enter.</h1>
The HTML ignores the pressing of
enter key at the end of the line.

<p>While typing this, I pressed enter before ‘line’ of the previous sentence.</p>

When browser will display this page, the first two sentences will be in a single paragraph.

<p>You can not use enter to change the line.</p>

</body>
</html>
OUTPUT:
<br> and <hr> tags
<br> and <hr> tags do not have closing tag.
So they are called empty tags.
<br> tag is used to break a line and continue writing.
<hr> tag inserts a horizontal line.
EXAMPLE: OUTPUT:
<!doctype html>
<html>
<head>
<title> My HTML page </title>
</head>
<body>
<h1>Example for br and hr tags.</h1>
<p>
hello everyone!!
<br>
how are you?
<hr>
Text after using hr tag
</p>
</body>
</html>
HTML <head> element
The html <head> element is the container for metadata. HTML metadata is data about the HTML docum
Metadata is not displayed.The head element is placed between <html> tag and <body> tag.
Metadata typically define the document title, character set, styles, scripts, and other meta informat
Browser do not display the content written in <head> element.
Example:
<!Doctype html>
<html>
<head>
<title> MY HTML PAGE </title>
</head>
<body>
Hello!
</body>
</html>
The Poem Problem
This poem will display on a single line:

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p> OUTPUT:
<p> My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Solution to the poem problem:
The html <pre> element
The html <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and l
EXAMPLE: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both
spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
HTML Text Styles
The main text style commands are:
Command Syntax Function

Bold <b> text </b> Applies the bold style


Italic <i> text </i> Applies the italic style
Underlined <u> text </u> Underlines text
Strong <strong> text </strong> Similar to bold
Typewriter <tt> text </tt> Puts text in a typewriter style
font with fixed spacing
Big <big> text </big> Increases the font and applies
bold
Small <small> text </small> Reduces the font
Superscript <sup> text </sup> Raises and reduces the text
Subscript <sub> text </sub> Lowers and reduces the text
Blinking Define a class head tag Makes the text blink
Inserted text <ins> text </ins> Makes the text inserted
Marked <mark> text </mark> Makes the text
marked/highlighted
Deleted <del> text </del> Makes the text deleted
Example to show these text styles:
<!DOCTYPE html>
<html>
<body>
This text is in <b>bold.</b> <br>
This text is in <i>italics</i> <br>
This text is <u> underlined</u> <br>
This text is <strong>strong </strong>which is
similar to <b> bold </b> <br>
This text is written in <tt>typewriter </tt> style <br>
This text is <big>big </big> text <br>
This is <small>small </small> text <br>
This is the example of <sup>superscripted </sup>text <br>
This text is <sub> subscripted</sub> <br>
This text is written using <ins>ins </ins>tag <br>
This is <mark>marked </mark>text <br>
</body>
</html>
OUTPUT:
HTML style attribute
Setting the style of an HTML element, can be done with the style attribute.
The html style attribute has following syntax:
<tagname style="property:value;"> OUTPUT

Background color:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Note: In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
values:
Background Colors
Example: OUTPUT:
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
</p>
</body>
</html>
Text Color
The CSS color property defines the color of the text

EXAMPLE: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts
The CSS font-family property defines the font to be used for
an HTML element:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>

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


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

</body>
</html>
Border Color
You can add color to borders of elements
Example: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello
World</h1>
<h2 style="border: 2px solid DodgerBlue;">Hello
World</h2>
<p style="border: 2px solid Violet;">Hello World</p>
</body>
</html>
Text Size
The CSS font-size property defines the text size for an HTML
element:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading with normal size text <h1>
<h1 style="font-size:300%;">This is a heading after changing
size</h1>
<p>This is a paragraph with normal size text </p>
<p style="font-size:160%;">This is a paragraph after changing
size</p>

</body>
</html>
Font Size
<!doctype html>
<html>
<body bgcolor="yellow">
<font size=7 color="green">H</font>
<font size=6 color="blue">E</font>
<font size=5 color="red">L</font>
<font size=4 color="brown">L</font>
<font size=3 color="pink">O </font>
<font size=3 color="pink">W</font>
<font size=4 color="brown">O</font>
<font size=5 color="red">R</font>
<font size=6 color="blue">L</font>
<font size=7 color="green">D</font>
</body>
</html>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:left;">Left aligned Heading</h1>
<p style="text-align:left;">Left aligned paragraph.</p>
<h1 style="text-align:center;">Center align Heading</h1>
<p style="text-align:center;">Center aligned paragraph.</p>
<h1 style="text-align:right;">Right aligned Heading</h1>
<p style="text-align:right;">Right aligned paragraph.</p>

</body>
</html>
OUTPUT:
NOTE: Default alignment is left
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a document or an article.
The <address> element is usually displayed in italics
Example:
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact
information (author/owner) of a document or article.</p> OUTPUT:
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an
acronym.
Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p> <br> <br>
<p>Marking up abbreviations can give useful information to
browsers, translation systems and search-engines.</p>

</body>
</html>

Note: When we move cursor on the abbreviation,its full form


is displayed
HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional


override. The <bdo> element is used to override
the current text direction
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override
(bdo), the next line will be written from right to
left (rtl):</p>
<bdo dir="rtl">This line will be written from right
to left</bdo> <br>
The original line is: This line will be written from
right to left
</body>
</html>
HTML Comment tag
Comment tags are used to insert comments in the HTML source code.
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Note: Comments are not displayed by the browser, but they can help document your HTML source code
EXAMPLE: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
HTML Lists
Lists are of two types:
1) Unordered List
2) Ordered List

Unordered List
Type Description
Disc Sets the list item marker to a bullet (default)
Circle Sets the list item marker to a circle
Square Sets the list item marker to a square
None The list items will not be marked

Ordered List
Type Description
1 The list items will be numbered with numbers (default)
A The list items will be numbered with uppercase letters
A The list items will be numbered with lowercase letters
I The list items will be numbered with uppercase roman numbers
i The list items will be numbered with lowercase roman numbers
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
Example: Output:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<!DOCTYPE html> <h2>Unordered List with Square Bullets</h2>
<html>
<body> <ul style="list-style-type:square;">
<li>Coffee</li>
<h2>Unordered List with Disc Bullets</h2> <li>Tea</li>
<li>Milk</li>
<ul style="list-style-type:disc;"> </ul>
<li>Coffee</li> <h2>Unordered List without Bullets</h2>
<li>Tea</li> <ul style="list-style-type:none;">
<li>Milk</li> <li>Coffee</li>
</ul> <li>Tea</li>
<h2>Unordered List with Circle Bullets</h2> <li>Milk</li>
</ul>
<ul style="list-style-type:circle;"> </body>
<li>Coffee</li> </html>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag
Example:
<h2>Ordered List with Letters</h2>
<!DOCTYPE html>
<ol type="A">
<html>
<li>Coffee</li>
<body>
<li>Tea</li>
<h2>Ordered List with Numbers</h2>
<li>Milk</li>
<ol type="1"> </ol>
<li>Coffee</li> <h2>Ordered List with Lowercase Letters</h2>
<li>Tea</li> <ol type="a">
<li>Milk</li> <li>Coffee</li>
</ol> <li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

NOTE:Default ordered list type is numbers


Output:
Nested HTML Lists
List can be nested (lists inside lists): OUTPUT:
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
HTML Description Lists
 HTML also supports description lists.

 A description list is a list of terms, with a description of each term.


 The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term

 EXAMPLE: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use
the start attribute.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Styling HTML with CSS
CSS stands for Cascading Style She
CSS describes how HTML elements are to be displayed on screen, paper, or in other media etc.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Internal - by using a <style> element in the <head> section.
 External - by using an external CSS file
The most common way to add CSS, is to keep the styles
in separate CSS files.
 CSS is mainly used for styling and coloring the web page.
 CSS decides the layout of the web page.
Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.

 An inline CSS uses the style attribute of an HTML element.


 EXAMPLE: OUTPUT:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>

Note:The above example give the heading color blue.


Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a <style>
 element.

 Example: Output:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: yellow;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
 An external style sheet is used to define the style for many HTML pages.
 With an external style sheet, you can change the look of an entire web site, by changing one
file!
 To use an external style sheet, add a link to it in the <head> section of the HTML page.
 An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a ‘.css’ extension.
 Here is how the "styles.css" looks:
 body {
background-color: red;
}
h1 {
color: blue;
}
p{
color: red;
}
Example of External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>
CSS Fonts
 The CSS color property defines the
text color to be used.
 The CSS font-family property defines
the font to be used.
 The CSS font-size defines the text size
to be used.
EXAMPLE: font-family: fantasy;
<!DOCTYPE html> font-size: 160%;}
<html> </style>
<head> </head>
<style> <body>
h1 {color: blue; <h1>This is a heading</h1>
font-family: WeddingText BT; <p>This is a paragraph.</p>
font-size: 300%;} </body>
p {color: red; </html>
Output
CSS Borders
The CSS border property defines a border around an HTML element.
Example: Output:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px dotted black;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
Example: Output:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
CSS Margin
The CSS margin property defines the margin (space) outside the border.
Example: Output:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2.5px solid brown;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
CSS font-size
This property changes the absolute or relative size of the
font. For absolute values, points (pt), centimeters
(cm),millimetres (mm), pixels (px), or picas(pc) may be
used. For relative values, use a percentage in relation to
the base font (%).
Example:
<html> <body bgcolor=“#FFFFF”>
<head> <h1> text in h1</h1>
<title>font-size </title> <h2> text in h2</h2>
<style> <h3> text in h3</h3>
body{font-size:30 px;} <br>
H1{font-size:150%;} Body text
H2{font-size:140%;} </body>
H3{font-size:80%} </html>
</style>
</head>
Output:
The id Attribute
 To define a specific style for one special element, add an id attribute to the element then define a style for
element with the specificid
 The id of an element should be unique within a page, so the id selector is used to select one unique
 elemen
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different paragraph.</p>
</body>
</html>
The class Attribute
To define a style for special types of elements, add a class attribute to the element then define a style for the elements with the
specific class.
<!DOCTYPE html> OUTPUT:
<html>
<head>
<style>
p.abc{
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="abc">I am different.</p>
<p>This is a paragraph.</p>
<p class="abc">I am different too.</p>
</body>
</html>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
 HTML links are hyperlinks.

 You can click on a link and jump to another document.


 When you move the mouse over a link, the mouse arrow will turn into a little
 hand.

 A link does not have to be text. It can be an image or any other HTML element.

SYNTAX:
Hyperlinks are defined with html <a> element which is called anchor tag.

<a href="url">link text</a>


 The href attribute specifies the destination address of the
 link.

 The link text is visible part to be clicked.


 Clicking on the link text will send you to the specified address.

HTML Link Colors
By default, a link will appear like this (in all
browsers):
a:hover {
 An unvisited link is underlined and blue
color: red;
 A visited link is underlined and purple
background-color: transparent;
 An active link is underlined and red
text-decoration: underline;
 You can change the default colors, by using CSS:
}
<!DOCTYPE html>
a:active {
<html>
color: yellow;
<head>
background-color: transparent;
<style>
text-decoration: underline;
a:link {
}
color: green;
</style>
background-color: transparent;
</head>
text-decoration: none;
<body>
}
<h2>Link Colors</h2>
a:visited {
<p>You can change the default colors of links</p>
color: pink;
<a href="computer.jpg" target="_blank">Computer Image</a>
background-color: transparent;
</body>
text-decoration: none;
</html>
}
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.


The target attribute can have one of the following values:
•_blank - Opens the linked document in a new window or tab
•_self - Opens the linked document in the same window/tab as it was clicked (this is
default)
•_parent - Opens the linked document in the parent frame
•_top - Opens the linked document in the full body of the window
•framename - Opens the linked document in a named frame
Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element.

Example:
<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element.</p>
<a href="https://www.google.com/" title="google.com">Visit to Google search</a>

</body>
</html>
Output:
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.

EXAMPLE:
<!DOCTYPE html> <h2 id="C4">Chapter 4</h2> <!--id attribute is
<html> used> <-->
<p>This chapter explains ba bla bla</p>
<body>
<h2>Chapter 5</h2>
<p><a href="#C4">Jump to Chapter
4</a></p> <p>This chapter explains ba bla bla</p>
<p><a href="#C10">Jump to Chapter <h2>Chapter 6</h2>
10</a></p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 1</h2> <h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p> <p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2> <h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p> <p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2> <h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p> <p>This chapter explains ba bla bla</p>
<a name="C10"> <!--name attribute of <h2>Chapter 18</h2>
<a> tg is used>
<-->
<p>This chapter explains ba bla bla</p>
<h2 >Chapter 10</h2>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
</body>
<p>This chapter explains ba bla bla</p>
</html>
<h2>Chapter 16</h2>
<p>This chapter
<h2>Chapter 17</h2>
NOTE: Both, id attribute and
<a name> has same work
<p>This chapter explains ba bla bla</p>
explains ba bla bla</p>
OUTPUT:
External Linking
Linking Files from Other Directories
<!DOCTYPE html>
<html>
<body>
<h2>External Paths</h2>
<p>This example links to a page located in
the different folder on the system:</p>
<p><a href="C:\Users\Phulender\Documents\
Priyanshi\links.html">HTML tutorial</a></p>
</body>
</html>
HTML Images
Images may improve the design and appearance of a web page.
SYNTAX:
 In HTML, images are defined with the <img> tag.
 The <img> tag is empty, it contains only attributes, and does not have any closing tag.
 The <src> attribute specifies the URL(web address)/source/destination of the image
 <img src=“url”>
The alt attribute
The alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
For a good impression, the value of alt should describe the image.
If a browser cannot find an image, it will display the value of the alt attribute
Examples:

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body> <body>
<h2>Alternative text</h2>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the
<p>The alt attribute should reflect the
image content.</p>
image content.</p>
<img src="mountains.jpg"
<img src="mountain.jpg"
alt="mountains" >
alt="mountains" >
</body>
</body>
</html>
</html>
Outputs:
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
.
Alternatively, you can use the width and height attributes

Using style attribute: Using width and height attribute


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h2>Image Size</h2> <h2>Image Size</h2>
<p>In this example, we specify the width and <p>In this example, we specify the width and heigh
height of an image with the width and height an image with the width and height attributes:</p>
attributes:</p>
<img src="tea.jpg" alt="A cup of tea"
<img src="tea.jpg" alt="A cup of tea" width="200" style="width:250px; height:100px">
height="100"> </body>
</body>
</html>
</html>
OUTPUTS:
Images in another folder Images on another server
If not specified, the browser expects to find the  Some web sites store their images on image ser
image in the same folder as the web page.
 Actually, you can access images from any web
However, it is common to store images in a sub-folder. address in the world:
You must then include the folder name in the src
<!DOCTYPE html>
attribute:
<html>
<!DOCTYPE html>
<body>
<html>
<h2>Images on Another Server</h2>
<body>
<img src="https://images.unsplash.com/photo-
<h2>Images in Another Folder</h2>
1472213984618-c79aaec7fef0?ixlib=rb-
<p>You must include the folder name in the src 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&
attribute:</p> rop&w=500&q=60" alt="nature">
<img src="C:\Users\Phulender\Pictures\nature.jpg" </body>
alt="Nature" style="width:200px;height:150px;">
</html>
</body>
</html>
Outputs:
Image on another folder Image on another server
HTML Links - Image as Link
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="headings.html">
<img src="computer.jpg" alt="Computer" style="width:150px;height:100px;border:0">
</a>
</body>
</html>
Image Floating
Use CSS float property to let the image float to the right or to the left of a text
<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="computer.jpg" alt="computer"
style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating
image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="computer.jpg" alt="computer"
style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating
image. A paragraph with a floating image.
</p>
</body>
</html>
Background Image
To add a background image on an HTML element,
use the CSS property background-image.

  To add a background image on a paragraph, spe


To add a background image on a web page, specify
the background-image property on the BODY the background-image property on the P elemen
element:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body >
<body style="background-image:url('computer.jpg');
<h2>Background Image</h2>
color:brown" >
<p style="background-image:url('computer.jpg');
<h2>Background Image</h2> color:brown" ;>By default the background image will
<p>By default the background image will repeat itself if repeat itself if it is smaller than the element where it
it is smaller than the element where it is specified, in is specified, in this case the BODY element.
this case the BODY element.</p> <br><br><br><br><br><br><br></p>
</body> </body>
</html> </html>
Outputs:
Image alignment with the text
The inserted image can aligned as top, bottom, center with respect to the text by using align=”value”
attribute.
Example:
<!Doctype html>
<html>
<body>
<h1> Image alignment</h1>
This image <img align="middle" src="computer.jpg" style="height:80px;width:80px;" > is middle
aligned.<br>
This image <img align="top" src="computer.jpg" style="height:80px;width:80px;" > is top aligned.<br>
This image <img align="bottom" src="computer.jpg" style="height:80px;width:80px;" > is bottom aligned.

</body>
</html>
HTML Tables
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
The <td> elements are the data containers of the table. They can contain all sorts of HTML
elements: text, images, lists, other tables, etc.
<tr>
<!DOCTYPE html>
<td>Eve</td>
<html> <td>Jackson</td>
<body> <td>94</td>

<h2>Basic HTML Table</h2> </tr>


<tr>
<table style="width:100%">
<td>John</td>
<tr> <td>Doe</td>
<th>Firstname</th> <td>80</td>

<th>Lastname</th> </tr>
</table>
<th>Age</th>
</body>
</tr> </html>
<tr>
Output:
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property.
Example: <tr>
<!DOCTYPE html>
<td>Jill</td>
<html>
<td>Smith</td>
<head>
<td>50</td>
<style>
</tr>
table, th, td {
<tr>
border: 1px solid black;
<td>Eve</td>
}
<td>Jackson</td>
</style>
<td>94</td>
</head>
</tr>
<body>
<tr>
<h2>Bordered Table</h2>
<td>John</td>
<p>Use the CSS border property to add a border to the table.</p>
<td>Doe</td>
<table style="width:100%">
<td>80</td>
<tr>
</tr>
<th>Firstname</th>
</table>
<th>Lastname</th>
</body>
<th>Age</th>
</html>
</tr>
Output:
HTML Table - Collapsed Borders
<!DOCTYPE html>
<html> <tr>
<head> <td>Jill</td>
<style> <td>Smith</td>
table, th, td { <td>50</td>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Eve</td>
</style> <td>Jackson</td>
</head> <td>94</td>
<body> </tr>
<h2>Collapsed Borders</h2> <tr>
<p>If you want the borders to collapse into one border, add the <td>John</td>
CSS border-collapse property.</p> <td>Doe</td>
<table style="width:100%"> <td>80</td>
<tr> </tr>
<th>Firstname</th> </table>
<th>Lastname</th> </body>
<th>Age</th> </html>
</tr>
Output:
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
<!DOCTYPE html> <tr>
<html> <td>Jill</td>
<head> <td>Smith</td>
<style> <td>50</td>
table, th, td {border: 1px solid black; </tr>
border-collapse: collapse;} <tr>
th, td {padding: 15px;} <td>Eve</td>
</style> <td>Jackson</td>
</head> <td>94</td>
<body> </tr>
<h2>Cellpadding</h2> <tr>
<p>Cell padding specifies the space between the cell content and its borders.</p> <td>John</td>
<table style="width:100%"> <td>Doe</td>
<tr> <td>80</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th> <p>Try to change the padding to 5px.</p>
</tr> </body>
</html>
Output:
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property
<!DOCTYPE html> <th>Firstname</th>
<html> </tr>
<head> <tr>
<style> <td>Jill</td>
table, th, td { <td>Smith</td>
border: 1px solid black; <td>50</td>
border-collapse: collapse;} </tr>
th, td { <tr>
padding: 5px;} <td>Eve</td>
th { <td>Jackson</td>
text-align: left;} <td>94</td>
</style> </tr>
</head> <tr>
<body> <td>John</td>
<h2>Left-align Headings</h2> <td>Doe</td>
<p>To left-align the table headings, use the CSS text-align property.</p> <td>80</td>
<table style="width:100%"> </tr>
<tr> </table>
<th>Lastname</th> </body>
<th>Age</th> </html>
Output:
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
<!DOCTYPE html> <tr>
<html> <td>Jill</td>
<head> <td>Smith</td>
<style> <td>50</td>

table, th, td {border: 1px solid black; </tr>

padding: 5px;} <tr>

table {border-spacing: 15px;}


<td>Eve</td>

</style>
<td>Jackson</td>
<td>94</td>
</head>
</tr>
<body>
<tr>
<h2>Border Spacing</h2>
<td>John</td>
<p>Border spacing specifies the space between the cells.</p>
<td>Doe</td>
<table style="width:100%">
<td>80</td>
<tr>
</tr>
<th>Firstname</th>
</table>
<th>Lastname</th>
</body>
<th>Age</th>
</html>
</tr>
Output:
HTML Table - Adding a Caption
<!DOCTYPE html> <table style="width:100%">
<html> <caption>Monthly savings</caption>
<head> <tr>
<style> <th>Month</th>
table, th, td { <th>Savings</th>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>January</td>
th, td { <td>$100</td>
padding: 5px; </tr>
text-align: left; <tr>
} <td>February</td>
</style> <td>$50</td>
</head> </tr>
<body> </table>
<h2>Table Caption</h2> </body>
<p>To add a caption to a table, use the caption tag.</p> </html>
Output:
HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html> <p>To make a cell span more than one column, use the colspan
attribute.</p>
<html>
<table style="width:100%">
<head>
<tr>
<style>
<th>Name</th>
table, th, td {
<th colspan="2">Telephone</th>
border: 1px solid black;
</tr>
border-collapse: collapse;
<tr>
}
<td>Bill Gates</td>
th, td {
<td>55577854</td>
padding: 5px;
<td>55577855</td>
text-align: left;
</tr>
}
</table>
</style>
</body>
</head>
</html>
<body>
<h2>Cell that spans two columns</h2>
Output:
Output
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html> <table style="width:100%">
<html> <tr>
<head> <th>Name:</th>
<style> <td>Bill Gates</td>
table, th, td { </tr>
border: 1px solid black; <tr>
border-collapse: collapse; <th rowspan="2">Telephone:</th>
} <td>55577854</td>
th, td { </tr>
padding: 5px; <tr>
text-align: left; <td>55577855</td>
} </tr>
</style> </table>
</head> </body>
<body> </html>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan
attribute.</p>
Output:
A Special Style for One Table
To define a special style for a special table, add an id attribute
<!DOCTYPE html> <body>
<html> <h2>Styling Tables</h2>
<head> <table style="width:100%">
<style> <tr>
table, th, td { <th>Firstname</th>
border: 1px solid black; <th>Lastname</th>
border-collapse: collapse; <th>Age</th>
} </tr>
th, td { <tr>
padding: 15px; <td>Jill</td>
text-align: left; <td>Smith</td>
} <td>50</td>
table#t01 { </tr>
width: 100%; <tr>
background-color: pink; <td>Eve</td>
} <td>Jackson</td>
</style> <td>94</td>
</head> </tr>
<tr> <tr>
<td>John</td> <td>Eve</td>
<td>Doe</td> <td>Jackson</td>
<td>80</td> <td>94</td>
</tr> </tr>
</table> <tr>
<br> <td>John</td>
<table id="t01"> <td>Doe</td>
<tr> <td>80</td>
<th>Firstname</th> </tr>
<th>Lastname</th> </table>
<th>Age</th> </body>
</tr> </html>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
Output:
Table Background
<html>
<head>
<title>Colors in the tables</title>
</head>
<body bgcolor="pink">
<h2>Background image in table</h2>
<table border=5 background="mountain.jpg">
<caption align=bottom>Single background for whole table</caption>
<tr>
<td>row1 column1</td>
<td>row1 column2</td>
</tr>
<tr>
<td>row2 column1</td>
<td>row2 column2</td>
</tr>
<tr>
<td>row3 column1</td>
<td>row3 column2</td>
</tr>
</table>
</body>
</html>
Inserting image to specific cell
<!DOCTYPE html>
<html> <table style="width:100%">

<head> <tr>
<style> <th>Name:</th>
table, th, td { <td>Bill Gates</td>

border: 1px solid black; </tr>

border-collapse: collapse; <tr>

} <th rowspan="2"
background="mountain.jpg">Telephone:</th>
th, td {
<td>55577854</td>
padding: 5px;
</tr>
text-align: left;
<tr>
}
<td>55577855</td>
</style>
</tr>
</head>
</table>
<body>
</body>
<h2>Background image to specific cell</h
</html>
Output:
HTML Frames
HTML frames are used to divide your browser window into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser window is known as a frameset. The window is
divided into frames in a similar way the tables are organized into rows and columns.

Disadvantages of Frames
 There are few drawbacks with using frames, so it's never recommended to use frames in your webpages −

 Some smaller devices cannot cope with frames often because their screen is not big enough to be divided
up.
 Sometimes your page will be displayed differently on different computers due to different screen
resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to
divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.
Attributes of Frameset tag
 cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically used
to define the no of columns and its size inside the frameset
 tag.

The size or width of the column is set in the frameset in the following ways:
1. Use absolute value in pixel <frameset cols = "300, 400, 300">

2. Use percentage value <frameset cols = "30%, 40%, 30%">

3. Use wild card values <frameset cols = "30%, *, 30%">

In the above example * will take the remaining percentage for creating vertical frame.
 rows: The rows attribute is used to create horizontal frames in web browser. This attribute is used to
define no of rows and its size inside the frameset tag.
The size of rows or height of each row use the following ways:
1. Use absolute value in pixel <frameset rows = "300, 400, 300">

2. Use percentage value <frameset rows = "30%, 40%, 30%">

3. Use wild card values <frameset rows = "30%, *, 30%">

 border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero value 
is used for no border. <frameset border="4" frameset>
 frameborder: This attribute of frameset tag is used to specify whether the three-dimensional border
should be displayed between the frames or not for this use two values 0 and 1, where 0 defines for no
border and value 1 signifies for yes there will be border. 
 framespacing: This attribute of frameset tag is used to specify the amount of spacing between the
frames in a frameset. This can take any integer value as an parameter which basically denotes the value
in pixel. 
<framespacing="20"> It means there will be 20 pixel spacing between the frames

Attributes of Frame Tag


 name: This attribute is used to give names to the frame. It differentiate one frame from another. It is
also used to indicate which frame a document should loaded into. 
 src: This attribute in frame tag is basically used to define the source file that should be loaded into the
frame.The value of src can be any url. 

  marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between the
border and contents of left and right frame. <frame marginwidth="20">

  marginheight: This attribute in frame tag is used to specify height of the spaces in pixels between the
border and contents of top and bottom frame. <frame marginheight="20">

  scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is
basically used to control the appearance of scrollbar. The value of this attribute can be yes, no, auto.
Where the value no denotes there will be no appearance of scroll bar. <frame scrollbar="no">
Example:
cssStyles.html
<!Doctype html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<title>Frames</title>
<style>
</head>
p.abc{
<frameset cols=*,*,*>
color: green;
<frame src=cssStyles.html>
}
<frame src=table.html>
</style>
<frame src=links.html>
</head>
</frameset></html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="abc">I am different.</p>
<p>This is a paragraph.</p>
<p class="abc">I am different too.</p>
</body>
</html>
<!DOCTYPE html>
<html> Links.html
<head>
<!DOCTYPE html>
<style>
table, th, td {border: 1px solid black; <html lang="en-US">
border-collapse: collapse;} <body>
th, td {padding: 5px;
text-align: left; }
</style>
<h2>Link Titles</h2>
</head> <p>The title attribute specifies extra information about an
<body>
element. The information is most often shown as a tooltip text
when the mouse moves over the element.</p>
<h2>Background image to specific cell</h2>
<table style="width:100%"> <a href="https://www.google.com/" title="google.com">Visit to
<tr>
Google search</a>
<th>Name:</th>
<td>Bill Gates</td> </body>
</tr>
</html>
<tr>
<th rowspan="2" background="mountain.jpg">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Output:
Nested col and row attributes:
<!Doctype html>
<html>
<head>
<title>Frames</title>
</head><frameset cols=*,*,*>
<frameset rows=*,*>
<frame src=cssStyling.html>
<frame src=table.html>
</frameset>
<frame src=practical1.html>
<frame src=practical4.html>
</frameset>
</html>
Opening link in different frame of same tab:

<!doctype html> Code of frame


<html> <!doctype html>
<head> <html>
<base target="texts"> <head>
</head> <title> frames</title>
<body> </head>
<h1>Menu</h1> <frameset cols="30%,70%">
<a href="CSSstyling.html"> Link1 <frame src="myframes.html">
</a><br>
<frame name="texts"
<a href="table.html">Link2</a><br> src="CSSstyling.html">
<a href="new 1.html">Link3</a><br>
Output:
Output:
HTML Forms: Input element
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting
one of many choices)
<input type="submit"> Defines a submit button (for submitting
the form)

Radio Button Input:


<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:

The Submit Button


<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.

The Action Attribute


The action attribute defines the action to be performed when the form is submitted.

The Name Attribute


Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
HTML Forms:
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form action="file:///home/generic/Desktop/zo-743/Extra/extra1.html">First name:<br>
<input type="text" name="firstname" value=“abc"><br>Last name:<br>
<input type="text" name="lastname" value=“pqr">
<input type="submit" value="Work Done">
</form>
<h2>Radio Buttons</h2>
<form action="file:///home/generic/Desktop/zo-743/Extra/extra1.html">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<h2>HTML Forms</h2>First name:<br>
<input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>

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


</form>
</body>
</html>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the
legend element defines a caption for the fieldset element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
HTML Form Elements
The <input> Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

The <select> Element


The <select> element defines a drop-down list:

The <option> elements defines an option that can be selected.


By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option

Allow Multiple Selections:


Use the multiple attribute to allow the user to select more than one value:

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):

The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.

The <button> Element


The <button> element defines a clickable button
Example:
<!DOCTYPE html> <option value="fiat" selected>Fiat</option>
<html> <option value="audi">Audi</option>
<body> </select><br><br><br><br><br><br>
<h2>The select Element</h2> <select name="cars" size="4" multiple>
<p>The select element defines a drop-down list:</p> <option value="volvo">Volvo</option>
<form action="/action_page.php"> <option value="saab">Saab</option>
Enter your name: <option value="fiat">Fiat</option>
<input name="firstname" type="text"> <option value="audi">Audi</option>
<br><br> </select>
<select name="cars"> <br><br>
<option value="volvo">Volvo</option> <textarea name="message" rows="10" cols="30">
<option value="saab">Saab</option> The cat was playing in the garden.
<option value="fiat">Fiat</option> </textarea>
<option value="audi">Audi</option> <br>
</select> <button type="button" onclick="alert('Hello World!')">Click
Me!</button><br>
<br><br><br><br><br>
<input type="submit">
<select name="cars">
</form>
<option value="volvo">Volvo</option>
</body>
<option value="saab">Saab</option>
</html>
Output:
Summary:
Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button


HTML Input Types
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
THE END

You might also like