Scribd
Upload
4 views28 pages

HTML

Uploaded by

hafsasoomrosoomro43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views28 pages

HTML

Uploaded by

hafsasoomrosoomro43
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Chapter # 01 HTML INTRODUCTION

 HTML is the standard markup language for creating Web pages

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

A Simple HTML Structure


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

1 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


<h1>My First Heading</h1>
<p>My first paragraph.</p>

Note: Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!

HTML Attributes
HTML attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:

Example
<img src="img_girl.jpg">

The width and height Attributes


The <img> tag should also contain the width and height attributes, which specify the
width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">

2 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 2 Heading & Paragraphs
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

3 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 3 Styling
Background Color
The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

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

</body>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML element:

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

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

4 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 4 Html Text Formatting
HTML Formatting Elements
Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements


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

Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.

Example
<strong>This text is important!</strong>

HTML <i> and <em> Elements


The HTML <i> element defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.
Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed
in italic.
Example
<em>This text is emphasized</em>

5 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


HTML <small> Element
The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML <mark> Element


The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element


The HTML <del> element defines text that has been deleted from a document. Browsers
will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element


The HTML <ins> element defines a text that has been inserted into a document. Browsers
will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element


The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O:
Example
<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element


The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font. Superscript
text can be used for footnotes, like WWW[1]:
Example
<p>This is <sup>superscripted</sup> text.</p>

6 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 5 Quotation and Citation
Elements
HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,
and <bdo> HTML elements.

Example

Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we
collaborate with people around the world to develop and deliver innovative solutions that
protect communities, wildlife, and the places in which they live.

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in which
they live.
</blockquote>

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
7 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296
Marking abbreviations can give useful information to browsers, translation systems and
search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym
when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the author/owner of a
document or an article.

The contact information can be an email address, URL, physical address, phone number,
social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a
line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title


The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a
movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.


Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override


BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>

8 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 6 HTML Colors
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA,
or HSLA values.

Background Color
You can set the background color for HTML elements:

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
You can set the color of text:

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color
You can set the color of borders:

Hello World

Hello World

Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

9 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 7 HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">

HTML Background Images


A background image can be specified for almost any HTML element

Background Image on a HTML element


To add a background image on an HTML element, use the HTML style attribute and the
CSS background-image property:

Example

Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">

Background Image on a Page


If you want the entire page to have a background image, you must specify the
background image on the <body> element:

Example

Add a background image for the entire page:

<style>
body {
background-image: url('img_girl.jpg');
}
</style>

10 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 8 Html List
HTML Lists
HTML lists allow web developers to group a set of related items in lists.

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
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>s
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

11 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 9 HTML Div Element
The <div> element is used as a container for other HTML elements.

The <div> Element


The <div> element is by default a block element, meaning that it takes all available width,
and comes with line breaks before and after.

Example

A <div> element takes up all available width:

Lorem Ipsum <div>I am a div</div> dolor sit amet.

Result
Lorem Ipsum

I am a div

dolor sit amet.

The <div> element has no required attributes, but style, class and id are common.

<div> as a container
The <div> element is often used to group sections of a web page together.

Example

A <div> element with HTML elements:

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

Result
London

London is the capital city of England.

London has over 13 million inhabitants.

12 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 10 HTML Iframes
An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax


The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width


Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

13 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 11 HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

14 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 12 HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.

The <form> Element


The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter:

The <input> Element


The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many


choices)

<input Displays a checkbox (for selecting zero or more of many


type="checkbox"> choices)

15 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

All the different input types are covered in this chapter:

Text Fields
The <input type="text"> defines a single-line input field for text input.

Example

A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <label> Element


Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

16 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Example

A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

HTML
CSS
JavaScript

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

17 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example

A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

18 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 13 HTML Form Attributes
This chapter describes the different attributes for the HTML <form> element.

The Action Attribute


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

Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

In the example below, the form data is sent to a file called "action_page.php". This file
contains a server-side script that handles the form data:

Example

On submit, send form data to "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute


The target attribute specifies where to display the response that is received after
submitting the form.

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

19 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window.

Example

Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">

The Method Attribute


The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example

This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example

This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

20 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 14HTML Form Elements
This chapter describes all the different HTML form elements.

The HTML <form> Elements


The HTML <form> element can contain one or more of the following form elements:

The <input> Element


One of the most used form elements is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

All the different values of the type attribute are covered in the next chapter: HTML Input
Types.

The <label> Element


The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

The <select> Element


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

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>

21 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


<option value="audi">Audi</option>
</select>

The <option> element 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:

Example
<option value="fiat" selected>Fiat</option>

The <textarea> Element


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

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The <button> Element


The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

22 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 15 HTML Input Types
This chapter describes the different types for the HTML <input> element.

Input Type Text


<input type="text"> defines a single-line text input field:

Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Input Type Password


<input type="password"> defines a password field:

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Input Type Submit


<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

23 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default
values:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Input Type Radio


<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Input Type Checkbox


<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

24 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Input Type Button
<input type="button"> defines a button:

Example
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Input Type Date


The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

Input Type Datetime-local


The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email


The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when
submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to match
email input.

Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

25 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Input Type File
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Input Type Number


The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1
to 5:

Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

26 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 16 HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table


A table in HTML consists of table cells inside rows and columns.
Example

A simple HTML table:


<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
Set the width of the table to 100%:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

27 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296


Chapter # 17 HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or
see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

HTML Video
The HTML <video> element is used to show a video on a web page.

The HTML <video> Element


To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element


To play an audio file in HTML, use the <audio> element:

Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

28 |COMPOSE BY SIR RAHEEL MUGHAL Contact # 03153732296

You might also like