0% found this document useful (0 votes)

22 views

Module1 HTML Doc

HTML Notes

Uploaded by

Lakshmana Rao Rowthu

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

22 views

Module1 HTML Doc

HTML Notes

Uploaded by

Lakshmana Rao Rowthu

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 192

HTML

Topics
• What is HTML
• HTML Element
• HTML Attributes
• HTML Headings
• HTML Paragraphs
• HTML Styles
• HTML Text Formatting
• HTML Quotations, Comments
• HTML Colors
• HTML-Styles-CSS
• HTML Tables, Forms, Frames
Markup language
• A markup language is a set of rules that defines how the layout and
presentation of text and images should appear in a digital document.
• It allows structuring documents, adding formatting, and specifying how
different elements should be displayed (or “rendered”) on webpages.
• An example of a markup language—and the one most people know—is
HTML. And it looks like this:

<b>Example of a Markup Language</b>

On a webpage, that’ll look like this:
Some other markup language examples include:

• XML
• SGML
• XHTML

markup languages are different from programming languages.

• Programming languages are used to create functional and dynamic web

applications.

• Markup languages focus primarily on the presentation and structure of

content. They are static and don’t use logic or algorithms.
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.
Example
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Html Page Structure

Note: The content inside the <body> section will be displayed in a browser. The
content inside the <title> element will be shown in the browser's title bar or in the
page's tab.
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
Tree Structure
HTML syntax
• HTML syntax is the order in which elements
and attributes are arranged to create well-
formed documents.
• It's the grammar and spelling of the language,
and syntax rules ensure that the language can
be read and interpreted by a computer.
• If syntax rules aren't followed, errors can
occur and web pages can break.
HTML syntax:
1. Tags: HTML uses tags to define the meaning and structure of content. Tags
are written in angle brackets (< and >). There are two types of tags:

• Opening Tag: This marks the beginning of an element. It includes the element
name enclosed in angle brackets (e.g., <p> for paragraph).
• Closing Tag: This marks the end of an element. It's similar to the opening tag
but includes a forward slash before the element name (e.g., </p>).

2. Elements: An element consists of an opening tag, its content, and a

closing tag. The content defines what the element represents, like text, headings,
images, etc.

Example:

HTML
<h1>This is a heading</h1> <p>This is a paragraph.</p>
Use code with caution.
3. Basic Structure: A basic HTML document has a specific
structure:

DOCTYPE Declaration: This line specifies the document type as HTML.

It's the first line in most HTML documents. (e.g., <!DOCTYPE html>)
** <html> Tag:** This is the root element of the document and
contains all other elements.
** <head> Tag:** This section contains meta information about the
document, like the title and character encoding. (e.g., <title>My
Webpage</title>)
** <body> Tag:** This section contains the visible content of the web
page, like headings, paragraphs, images, etc.
4. Attributes: Some tags can have additional information called
attributes. These are specified within the opening tag using
name="value" format. For example, the <img> tag can have a src
attribute to specify the image source.

Example:

HTML
<img src="image.jpg" alt="My Image">
Use code with caution.

5. Case Sensitivity: HTML tags are not case-sensitive. So, <P> and
<p> are treated the same. However, for consistency, it's
recommended to use lowercase tags.
6. Comments

• HTML comments are not displayed in the browser, but

they can help document your HTML source code.

• syntax:

there is an exclamation point (!) in the start tag, but not in
the end tag.
HTML Basics
Documents
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration

• The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
• It must only appear once, at the top of the page (before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
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:
Ex.1) <h1>My First Heading</h1>
Ex.2)<p>My first paragraph.</p>
An HTML element is everything from the start tag to the end tag. The content
between the start tag and end tag is also part of the same element
HTML Elements
• 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:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>

Empty HTML Elements:

• HTML elements with no content are called empty elements.

• Example: The <br> tag defines a line break, and is an empty element
without a closing tag:
HTML Attributes
• HTML attributes provide additional information about HTML
elements.
• All Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• HTML elements can have attributes
attributes
All HTML elements can have attributes

• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be
displayed
• The width and height attributes of <img> provide size information for
images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color,
font, size, and more
• The lang attribute of the <html> tag declares the language of the
Web page
• The title attribute defines some extra information about an element
1. 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.cutmap.ac.in">Visit CUTMAP</a>

2. 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">

3.The width and height Attributes: The <img> tag should also contain
the width and height attributes, which specifies the width and height of the image (in
pixels):
Example: <img src="img_girl.jpg" width="500" height="600">

4. The alt Attribute: The required alt attribute for the <img> tag specifies an alternate
text for an image, if the image for some reason cannot be displayed. This can be due
to slow connection, or an error in the src attribute, or if the user uses a screen reader.
Example:<img src="img_girl.jpg" alt="Girl with a jacket">
5. The style Attribute:
The style attribute is used to add styles to an element, such as color, font, size, and
more.
Example <p style="color:red;">This is a red paragraph.</p>

6. The lang Attribute:

always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
7. The title Attribute:
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the
element:
Example:<p title="I'm a tooltip">This is a paragraph.</p>
Headings
• HTML headings are titles or subtitles that you want to display on a
webpage.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.

• Example:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-
size property:
Example: <h1 style="font-size:60px;">Heading 1</h1>
Headings Global Attributes

• Style: Specifies an inline CSS style for an element

• Tabindex: Specifies the tabbing order of an element
• Title: Specifies extra information about an element
• Translate: Specifies whether the content of an element
should be translated or not
• Id: An identifier for the element
• Class: A class for the element
• Lang: The language of the element's content
HTML Paragraphs
• A paragraph always starts on a new line, and is usually a block of
text.
• 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>

• Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
1.<P>
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>

2. <hr>
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal
rule.
The <hr> element is used to separate content (or define a change) in an HTML page:<hr>

3.<br>
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example: <p>This is<br>a paragraph<br>with line breaks.</p>

4. <pre>
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 line breaks
Example: <pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
</pre>
HTML Styles
• The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
• The HTML style attribute has the following syntax:
<tagname style="property: value;">
Properties:
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
Style attributes
1. Background Color: The CSS background-color property defines
the background color for an HTML element.
Ex:<body style="background-color:powderblue;">
<p>This is a paragraph.</p></body
Ex2:<p style="background-color:tomato;">This is a paragraph.</p>
2. Text Color: The CSS color property defines the text color for an
HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
3. Fonts: The CSS font-family property defines the font to be used
for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<p align="justify" style="font-family:impact;
background-color:powderblue";>
4. Text Size: The CSS font-size property defines the text size for
an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

5. Text Alignment: The CSS text-align property defines the

horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
• HTML contains several elements for defining text with a special
meaning.
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
1. <b>This text is bold</b>
2. <strong>This text is important!</strong>
3. <i>This text is italic</i>
4. <em>This text is emphasized</em>
5. <small>This is some smaller text.</small>
6. <p>Do not forget to
buy <mark>milk</mark> today.</p>
7. <p>My favorite color is <del>blue</del> red.</p>
8. <p>My favorite color
is <del>blue</del> <ins>red</ins>.</p>
9. <p>This is <sub>subscripted</sub> text.</p>
10. <p>This is <sup>superscripted</sup> text.</p>
Quotations

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
1. <blockquote> element defines a section that is quoted from
another source.<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
--------------</blockquote>
2. <q> tag defines a short quotation.
Ex:<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
3.<abbr> for Abbreviations:
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
4. <address> for Contact Information
<address>--------------</address>
5. <cite> tag defines the title of a creative work
• <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML Comments
• HTML comments are not displayed in the browser,
but they can help document your HTML source code.

• HTML Comment Tags: You can add comments to

your HTML source by using the following syntax:

there is an exclamation point (!) in the start tag, but not
in the end tag.
Example1

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

Example2:

HTML Colors
• HTML colors are specified with predefined color names, or
with RGB, HEX, HSL, RGBA, or HSLA values.
• Color Names : In HTML, a color can be specified by using a
color name:

1)Background Color:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
2)Text Color:
<h1 style="color:Tomato;">Hello World</h1>
3)Border Color:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
• Color Values: colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values.

Ex:<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

NOTE: rgba(red,green, blue, alpha) The alpha

parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):
Color Values: colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

Example:

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>

<p>In addition to the predefined color names, colors can be specified using RGB,
HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
HSL Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage value. 0% is black, and 100% is white.

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-
255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two
(green and blue) are set to 00.

 RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the
opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

HTML Styles - CSS
• CSS stands for Cascading Style Sheets. It can
control the layout of multiple web pages all at
once.
• Cascading Style Sheets (CSS) is used to format
the layout of a webpage.
• With CSS, you can control the color, font, the
size of text, the spacing between elements, how
elements are positioned and laid out, what
background images or background colors to be
used, different displays for different devices and
screen sizes, and much more!
• CSS can be added to HTML documents in 3
ways:
• Inline - by using the style attribute inside
HTML elements
• Internal - by using a <style> element in
the <head> section
• External - by using a <link> element to link to
an external CSS file
1)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.
Ex:<h1 style="color:blue;">A Blue Heading</h1>
2) 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.
Inline css Example:
• <!DOCTYPE html>
<html>
<head>
<style>
body { background-color: powderblue;}
h1 { color: blue;}
p { color: red;}
</style>
</head>
<body>

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

</body>
</html>
3) External CSS: An external style sheet is used to define the style for many HTML pages.
• Example
<!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>
another external css file "styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Html Tables
• HTML tables allow web developers to arrange data into rows and
columns.

Define an HTML Table

• The <table> tag defines an HTML table.

• Each table row is defined with a <tr> tag. Each table header is
defined with a <th> tag. Each table data/cell is defined with
a <td> tag.
• By default, the text in <th> elements are bold and centered.
• By default, the text in <td> elements are regular and left-aligned.
Tables
• HTML <table> element to define a table
• HTML <tr> element to define a table row
• HTML <td> element to define a table data
• HTML <th> element to define a table heading
• HTML <caption> element to define a table caption
• CSS border property to define a border
• CSS border-collapse property to collapse cell borders
• CSS padding property to add padding to cells
• CSS text-align property to align cell text
• CSS border-spacing property to set the spacing between cells
• colspan attribute to make a cell span many columns
• rowspan attribute to make a cell span many rows
• id attribute to uniquely define one table
Example

<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<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>
</body>
</html>
Tables
1.Add border: To add a border to a table, use the CSS border property:
Ex: table, th, td {
border: 1px solid black;
}
2. Collapsed Borders: To let the borders collapse into one border, add the CSS
border-collapse property:
Ex: table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
3. Add Cell Padding: Cell padding specifies the space between the cell content and its
borders. To set the padding, use the CSS padding property:
Ex:th, td {
padding: 15px;
}
4. Left-align Headings: By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
Ex: th {
text-align: left;
}
5. Add Border Spacing: Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Ex: table {
border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.

6. colspan: To make a cell span more than one column, use the colspan attribute:
Ex:<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>

7.rowspan: To make a cell span more than one row, use the rowspan attribute:
Ex:<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>

8. Add a Caption: To add a caption to a table, use the <caption> tag:

Ex:
<table style="width:100%">
<caption>Monthly savings</caption>
9.A Special Style for One Table: To define a special style for one particular table, add an id attribute to
the table:
Ex:<!DOCTYPE html>
<html><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style></head>
<body> <table id="t01">
<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>

</body></html>
Links
HTML Links
• Links allow users to click their way from page to page.
• HTML Links – 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.
• The HTML <a> tag defines a hyperlink. It has the following syntax:

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

• The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL
address.
• Ex:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
• Use the <a> element to define a link
• Use the href attribute to define the link
address
• Use the target attribute to define where to
open the linked document
• Use the <img> element (inside <a>) to use an
image as a link
• Use the mailto: scheme inside
the href attribute to create a link that opens
the user's email program
1. HTML Links - The target Attribute
• By default, the linked page will be displayed in the current
browser window. To change this, you must specify another
target for the link.
• The target attribute specifies “where to open the linked
document”.
• The target attribute can have one of the following values:
_self - Default. Opens the document in the same
window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Ex:
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
Absolute URLs vs. Relative URLs

• absolute URL (a full web address) in the href attribute.

• A local link (a link to a page within the same website) is
specified with a relative URL (without the "https://www"
part):
Ex:<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
2. HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside
the <a> tag:
Example
• <a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
3. Link to an Email Address
• Use mailto: inside the href attribute to create a link that
opens the user's email program (to let them send a new
email):
Example
• <a href="mailto:someone@example.com">mail me</a>
4. Button as a Link
• To use an HTML button as a link, you have to add some JavaScript code.
• JavaScript allows you to specify what happens at certain events, such
as a click of a button:
Example:
<button
onclick="document.location='https://www.google.com/'">clickit</button
>

5. 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
<a href="mailto:someone@example.com"><img src="C:\Users\
laxman\Desktop\download.jpg"></a>
HTML Images
• Images can improve the design and the appearance of a web
page.
• Example:<img src="pic_trulli.jpg" alt="Italian Trulli">
HTML Images Syntax:
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding space
for the referenced image.
• The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
• The <img> tag has two required attributes:
a)src - Specifies the path to the image
b)alt - Specifies an alternate text for the image
Image Size - Width and Height
• You can use the style attribute to specify the
width and height of an image.
• Example:<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Or
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
Animated Images
• HTML allows animated GIFs:
• Example:<img src="programming.gif" alt="Compu
ter Man" style="width:48px;height:48px;">
Image Floating
• Use the CSS float property to let the image float to the right or
to the left of a text:
• <p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

.apng
GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert .jpg, .jpeg, .jfif, .pjpeg, .pjp
Group image
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
HTML Lists
• HTML lists allow web developers to group a
set of related items in lists.
• <ul> Defines an unordered list
• <ol> Defines an ordered list
• <li> Defines a list item
• <dl> Defines a description list
• <dt> Defines a term in a description list
• <dd> Describes the term in a description list
1) 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>
2)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>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
3)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
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Unordered HTML List - Choose List Item Marker
• The CSS list-style-type property is used to define the style of the
list item marker. It can have one of the following:
values:disc,circle,square,none
Nested HTML Lists
• Lists can be nested (list inside list):
Example:
• <ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered HTML List - The Type Attribute
the type attribute of the <ol> tag, defines the type of the list item
marker:
type="1“, type=“A“, type=“a“, type=“I“, type=“i“
Ex:<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• 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:
• <ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Unordered list attribute type:

type: Sets the bullet style for the list, with values
such as circle, disc, square, or triangle
HTML Forms
HTML Forms
• An HTML form is used to collect user input. The user
input can then be sent to a server for processing.
• The <form> Element is used to create an HTML form for
user input:
<form>
.
form elements
.
</form>

• Form elements are different types of input elements,

like: text fields, checkboxes, radio buttons, submit
buttons, and more.
• An HTML form is a section of a document which contains controls
such as text fields, password fields, checkboxes, radio buttons, submit
button, menus etc.

• An HTML form facilitates the user to enter data that is to be sent to

the server for processing such as name, email address, password,
phone number, etc.

Why use HTML Form

• HTML forms are required if you want to collect some data from of the
site visitor.

• For example: If a user want to purchase some items on internet,

he/she must fill the form such as shipping address and credit/debit
card details so that item can be sent to the given address.
 HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton,

button

</form>
HTML Form Tags
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML form attributes
These are define the behavior and properties of a form
element.
• They include attributes like action for specifying where
form data is sent,
• a method for the HTTP method used,
• and autocomplete for browser input suggestions,
among others.

In HTML there are various attributes available for

<form> element which are given below:
List of All <form> Attributes

• accept-charset Specifies the character encodings used for form

submission
• Action Specifies where to send the form-data when a form is
submitted
• Autocomplete Specifies whether a form should have autocomplete on or
off
• Enctype Specifies how the form-data should be encoded when
submitting it to the server (only for method="post")
• Method Specifies the HTTP method to use when sending form-data
• name Specifies the name of the form
• Novalidate Specifies that the form should not be validated when submitted
• rel Specifies the relationship between a linked resource and the current
document
• Target Specifies where to display the response that is received after
submitting the form
1. HTML action attribute

• The action attribute of <form> element defines the process to be performed

on form when form is submitted, or it is a URI to process the form information.
• The action attribute value defines the web page where information proceed. It
can be .php, .jsp, .asp, etc. or any URL where you want to process your form.
• Note: If action attribute value is blank then form will be processed to the same
page.
Example:

<form action="action.html" method="post">

<label>User Name:</label><br>
<input type="text" name="name"><br><br>
<label>User Password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit">
</form>
2. HTML method attribute
It defines the HTTP method which browser used to submit the form.
The possible values of method attribute can be:

a. post: We can use the post value of method attribute when we want
to process the sensitive data as it does not display the submitted data
in URL.
Example: <form action="action.html" method="post">
b. get: The get value of method attribute is default value while
submitting the form. But this is not secure as it displays data in URL
after submitting the form.
Example: <form action="action.html" method="get">

When submitting the data, it will display the entered data in the form
of:

file:///D:/HTML/action.html?name=RAJU&pass=123
3. HTML target attribute:
The target attribute defines where to open the response after
submitting the form. The following are the keywords used with the
target attribute.

 _self: If we use _self as an attribute value, then the response will

display in current page only.
Example:

<form action="action.html" method="get" target="_self">

 _blank:
If we use _blank as an attribute it will load the response in a new page.
Example:

<form action="action.html" method="get" target="_blank">

4. HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5

which enables an input field to complete automatically. It can have two
values "on" and "off" which enables autocomplete either ON or OFF. The
default value of autocomplete attribute is "on".

Example:

<form action="action.html" method="get" autocomplete="on">

Example:

<form action="action.html" method="get" autocomplete="off">

Note: it can be used with <form> element and <input> element both.
5. HTML enctype attribute
It defines the encoding type of form-content while submitting the form to
the server. The possible values of enctype can be:

• application/x-www-form-urlencoded: It is default encoding type if the

enctype attribute is not included in the form. All characters are encoded
before submitting the form.
Example:
<form action="action.html" method="post" enctype="application/x-www-
form-urlencoded" >
• multipart/form-data: It does not encode any character. It is used when our
form contains file-upload controls.
Example:
<form action="action.html" method="post" enctype="multipart/form-data">
• text/plain (HTML5): In this encoding type only space are encoded into +
symbol and no any other special character encoded.
Example:
<form action="action.html" method="post" enctype="text/plain" >
6. HTML novalidate attribute HTML5

The novalidate attribute is newly added Boolean attribute of HTML5. If we

apply this attribute in form then it does not perform any type of validation
and submit the form.

Example:

<form action = "action.html" method = "get" novalidate>

7. HTML <input> element attribute:
a. HTML name attribute
The HTML name attribute defines the name of an input element. The name and
value attribute are included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP
request includes both name-value pair and if name is not available it will not process
that input field.

Example:
<form action = "action.html" method = "get">
Enter name:<br><input type="name" name="uname"><br>
Enter age:<br><input type="number" name="age"><br>
Enter email:<br><input type="email"><br>
<input type="submit" value="Submit">
</form>
b. HTML value attribute
The HTML value attribute defines the initial value or default value of
an input field.

Example:

<form>
<label>Enter your Name</label><br>
<input type="text" name="uname" value="Enter Name"><br><br>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" value="Enter email"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
</form>
c. HTML required attribute HTML5
HTML required is a Boolean attribute which specifies that user must fill
that filed before submitting the form.

Example:

<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>
d. HTML autofocus attribute HTML5
The autofocus is a Boolean attribute which enables a field
automatically focused when a webpage loads.

Example:

<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" autofocus><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>
e. HTML placeholder attribute HTML5
The placeholder attribute specifies a text within an input field which informs the user
about the expected input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.

Example:

<form>
<label>Enter your name</label><br>
<input type="text" name="uname" placeholder="Your name"><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="example@gmail.com"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>
f. HTML disabled attribute
The HTML disabled attribute when applied then it disable that input
field. The disabled field does not allow the user to interact with that
field.

The disabled input filed does not receive click events, and these input
value will not be sent to the server when submitting the form.

Example:

<input type="text" name="uname" disabled><br><br>

g. HTML size attribute
The size attribute controls the size of the input field in typed
characters.

Example:
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<label>Account number</label><br>
<input type="text" name="an" size="30" required><br><br>
<label>CVV</label><br>
<input type="text" name="cvv" size="1" required><br><br>
Form tags
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML Form Elements
The <form> element can contain one or more of the following form
elements:

• <label>
• <input>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
1)The <input> Element

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

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

• Example:

<!DOCTYPE>
<html>
<body>
<form>
<label for="fname">Enter your name :<?label>
<input type="text" id="fname" name="username">
</form>
</body>
</html>

If the type attribute is omitted, the input field gets the default type: "text".
2. 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 is focused
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.
3. 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>
<option value="audi">Audi</option>
</select>
• 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:
Example
• <option value="fiat" selected>Fiat</option>
Visible Values:
• Use the size attribute to specify the number of visible values:
Example:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Allow Multiple Selections:
• Use the multiple attribute to allow the user to select more than one value:
Example:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
4. 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 rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.

• You can also define the size of the text area by using CSS:

Example:

• <textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.
</textarea>
5. The <button> Element
• The <button> element defines a
clickable button:

Example

• <button type="button" onclick="alert('Hello

World!')">Click Me!</button>
6. The <fieldset> and <legend> Elements
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset> element.

Example:

<form action="/action_page.php">
<fieldset>
<legend>Signin</legend>
<label for="fname">Username:</label>
<input type="text" id="fname"><br>
<label for="pass">Password:</label>
<input type="password" id="pass"><br>
<input type="submit">

</fieldset>
</form>
7. 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="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
8. The <output> Element
• The <output> element represents the result of a calculation
(like one performed by a script).
Example
• Perform a calculation and show the result in
an <output> element:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
• <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
• <datalist> Specifies a list of pre-defined options for input
controls
• <output> Defines the result of a calculation
HTML Input Types
• <input type="button"> • <input type="password">
• <input type="checkbox"> • <input type="radio">
• <input type="color"> • <input type="range">
• <input type="date"> • <input type="reset">
• <input type="datetime- • <input type="search">
local"> • <input type="submit">
• <input type="email"> • <input type="tel">
• <input type="file"> • <input type="text">
• <input type="hidden"> • <input type="time">
• <input type="image"> • <input type="url">
• <input type="month"> • <input type="week">
• <input type="number">
1. 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>
2. 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>
3. 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>
4. 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">
</form>
5. 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
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
6. 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>
7. Input Type Button
<input type="button">
defines a button:

Example

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

8. Input Type Color

• is used for input fields that should contain a color.

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

Example

<form>
<label for="favcolor">select color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
9. 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>

You can also use the min and max attributes to add restrictions to dates:

<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
10. 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>
11. 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>
12. 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>
13. Input Type Month

• The <input type="month"> allows the user to select a month and year.
• Depending on browser support, a date picker can show up in the input
field.

Example

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
14. 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>
15. Input Type Range

• The <input type="range"> defines a control for entering a number whose exact
value is not important (like a slider control). Default range is 0 to 100. However,
you can set restrictions on what numbers are accepted with the min, max,
and step attributes:

Example

<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
16. Input Type Tel
• The <input type="tel"> is used for input fields that should contain a
telephone number.

Example

<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
17. Input Type Search
• The <input type="search"> is used for search fields (a search field behaves
like a regular text field).

Example

<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
18. Input Type Time
• The <input type="time"> allows the user to select a time (no time zone).
• Depending on browser support, a time picker can show up in the input
field.

Example

<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
19. Input Type Url

• The <input type="url"> is used for input fields that should contain a URL address.
• Depending on browser support, the url field can be automatically validated when submitted.
• Some smartphones recognize the url type, and adds ".com" to the keyboard to match url
input.

Example

<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
20. Input Type Week

• The <input type="week"> allows the user to select a week and year.
• Depending on browser support, a date picker can show up in the input field.

Example

<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Input Attributes
1. The value Attribute
• The input value attribute specifies an initial value for an input field:

Example

• Input fields with initial (default) values:

<form>
<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">
</form>
2. The readonly Attribute
• The input readonly attribute specifies that an input field is read-only.
• A read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).
• The value of a read-only input field will be sent when submitting the form!

Example
• A read-only input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
3. The disabled Attribute
• The input disabled attribute specifies that an input field should be disabled.
• A disabled input field is unusable and un-clickable.
• The value of a disabled input field will not be sent when submitting the form!

Example
• A disabled input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
4. The size Attribute
• The input size attribute specifies the visible width, in characters, of an input field.
• The default value for size is 20.
• Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Example
• Set a width for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
5. The maxlength Attribute
• The input maxlength attribute specifies the maximum number of characters
allowed in an input field.
• Note: When a maxlength is set, the input field will not accept more than the
specified number of characters. However, this attribute does not provide any
feedback. So, if you want to alert the user, you must write JavaScript code.

Example
• Set a maximum length for an input field:

• The input min and max attributes specify the minimum and maximum values for an input field.
• The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.
• Tip: Use the max and min attributes together to create a range of legal values.
Example
• Set a max date, a min date, and a range of legal values:

<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label>

<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
7. The multiple Attribute
• The input multiple attribute specifies that the user is allowed to enter more than one
value in an input field.
• The multiple attribute works with the following input types: email, and file.

Example

• A file upload field that accepts multiple values:

<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
8. The pattern Attribute
• The input pattern attribute specifies a regular expression that the input field's value is
checked against, when the form is submitted.
• The pattern attribute works with the following input types: text, date, search, url, tel,
email, and password.
• Tip: Use the global title attribute to describe the pattern to help the user.
• Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
• An input field that can contain only three letters (no numbers or special characters):

<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
9. The placeholder Attribute
• The input placeholder attribute specifies short a hint that describes the expected value of an input field (a
sample value or a short description of the expected format).
• The short hint is displayed in the input field before the user enters a value.
• The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example
• An input field with a placeholder text:

<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
10. The required Attribute
• The input required attribute specifies that an input field must be filled
out before submitting the form.
• The required attribute works with the following input types: text, search,
url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
• A required input field:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
11. The step Attribute
• The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

• Tip: This attribute can be used together with the max and min attributes to create a range of legal values.
• The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Example
• An input field with a specified legal number intervals:

<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
12. The autofocus Attribute
• The input autofocus attribute specifies that an input field should automatically get
focus when the page loads.
Example
• Let the "First name" input field automatically get focus when the page loads:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
13. The height and width Attributes
• The input height and width attributes specify the height and width of
an <input type="image"> element.
Example
• Define an image as the submit button, with height and width attributes:

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
14. The list Attribute
• The input list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.

Example
• An <input> element with pre-defined values in a <datalist>:

<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
15. The autocomplete Attribute
• The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or
off.
• Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser
should display options to fill in the field, based on earlier typed values.
• The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email,
password, datepickers, range, and color.

Example
• An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Frames

The <frame> tag is no longer recommended as it

is not supported by HTML5. Instead of using this
tag, we can use the <iframe> or <div> with CSS
to achieve the similar effects.
Frames
HTML frames are a way to divide a web page into
multiple sections, or frames, that can each display
a different HTML document.
• This allows authors to present documents in
multiple views, such as independent windows or
subwindows, within the same browser window.
• For example, one frame could display a banner,
another a navigation menu, and a third the
main document
Understanding Frames

Developers depend on frames in HTML to build webpages that display various sections.

• Each of the sections of the browser window is known as a frame and is displayed within
a <frameset> or an inline frame (<iframe>) element.
• Each section highlights separate documents or content.
• Frames in HTML are organized by structuring them in rows and columns within the
<frameset> element.
• The <frameset> element establishes the web page’s structure.
• The <frame >and <iframe> elements create the individual frames.
• The <frame> element is used to create a single frame within a frameset. The attributes
cols and rows are used to define the proportion in percentage or an absolute size value
like pixels.
• The <iframe> element can be used to embed external content within a webpage. It
requires the ‘src’ attribute to specify the URL of the external content. The width and
height attributes define the dimensions of the iframe.
• Each frame has its source URL, which allows for displaying content independently.
• A <frameset> element is mainly used to create multi-frame layouts within a single page.
Advantages of Using Frames
• Frames in HTML have several advantages, such as achieving layout flexibility, creating
navigation menus and sidebars, and more. Let’s take a look at these advantages in
detail.
• Achieving Layout Flexibility: Developers can utilize frames to create intricate layouts
by dividing a webpage into various sections. This level of flexibility empowers the
design of websites that feature responsive navigation menus, sidebars, and
autonomous content panes. By utilizing framesets, it becomes simpler to uphold a
consistent layout throughout multiple pages.
• Creating Navigation Menus and Sidebars: Frame tag in HTML is often used to develop
fixed navigation menus or sidebars that remain visible while the remaining content on
the page undergoes alterations. Such a method guarantees effortless navigation and
provides a user-friendly means of accessing significant information or functions across
the entirety of the website.
• Displaying Content from Multiple Sources: iframes provide a seamless method of
incorporating external content, such as videos, maps, or social media feeds directly
into a webpage. This allows developers to effortlessly integrate dynamic content from
various sources without compromising the website’s overall design or performance.
• Enhancing User Experience: Frames in HTML can greatly improve the user experience
by enabling interactive content to load separately within a designated part of the
webpage. For example, iframes can be used to incorporate a chat widget or a real-time
data display, ensuring that these HTML elements update smoothly without having to
refresh the entire page.
Syntax of Frames
In HTML, there is no end tag for the <frame> tag. When we use frames in a
webpage, we use <frameset> tag instead of a <body> tag. Using <frameset> is
how we instruct the webpage to divide it into frames The <frame> tag defines
which HTML document should open as frame.

• The attribute cols take the value in pixels, and they help at specifying the
number and size of columns in a frameset.

<cols ="10%,80%,10%">
• Similarly, as we saw above, the attribute rows take the value in pixels, and
they help at specifying the number and size of rows in a frameset.

<rows ="10%,80%,10%">
However, it should be duly noted that the <frame> tag has deprecated in
HTML5 and it is no longer used.
Types of Frame Tag
Following are the different types of frame tags:

The <frameset> Tag

The <frame> Tag
The <iframe> Tag
1. The <frameset> Tag Attribute

There are five important attributes of the

<frameset>, and we discuss them here :
1. Col: The col attribute gives the vertical frames. The width, however,
can be specified in 4 ways:

Pixels: absolute values can be mentioned in pixels. If we have to

create three vertical frames, we can give the value: cols=”100,50,100”.
Percentage: The percentage of the browser window can be
mentioned. If we have to create three vertical frames, we can give the
value: cols=”40%,20%,40%.”
We can also make use of the wildcard here (*) and let the wildcard
take the remaining of the window, which remains un-mentioned.

cols=”30%,*,30%”
2. Rows: The row attribute gives the horizontal frames. It
specifies the rows in a frameset. If we have to create three
horizontal frames we use:
• Eg: Rows=”10%,80%,10%’.
• We can also set the height of each row as we had done in
the case of columns previously
3. Border: It specifies the width of the border of each frame in pixels.

E.g., border=”4”. If border=”0”, it means there is no border.

4. Frameborder: If a three-dimensional border needs to be displayed

between frames, then we use this attribute. The value which the
attribute takes is either 1 or 0 ( Yes or No).

E.g.: frameborder=”0” means no border.

5. Framespacing: This attribute specifies the amount of space between

frames in a frameset. Any integer value can be given here for this
attribute.

E.g., framespacing=”12” means between the frames, there should be

the spacing of 12 pixels.
b. The <frame> Tag Attribute
There are 8 attributes that can be listed here in this section.

1. src: We provide the file name to this attribute that is supposed to be loaded into the frame.
The value of this attribute can be any URL.

Eg: src= www.facebook.com

2. name: This attribute provides a name to the frame. It defines which frame a document
should be loaded into. If you have multiple links in one frame that loads into another frame,
we use this attribute. Then the second frame needs a name to identify itself as the target of
the link.

E.g., name=”abc.htm.”

3. frameborder: This attribute is specified to show if the borders are to be shown or not. The
value takes up is 1 or 0 (Yes or No).

4. marginwidth: The attribute is helpful at specifying the width of the space between the left
and right of the frame’s border and also the content of the frame. The value is given in pixel.

E.g., marginwidth=”10”.
5. marginheight: The attribute is helpful at specifying the height of the space between
the top and the bottom of the frame’s border and also the content of the frame. The
value is given in pixel.

E.g., marginheight=”10”.

6. noresize: This attribute basically prevents the user from making any changes to the
already present frames. In the absence of this attribute, any frame can be resized.

E.g., noresize=”noresize.”

7. scrolling: This attribute takes control of the appearance of the scroll bars, which are
present on the frame. The value either a ‘yes, ‘no’, or ‘auto’.

E.g., scrolling=” no” means it should not have scroll bars.

8. longdesc: This attribute lets you provide a link to another page containing a long
description of the content of the frame.

E.g., longdesc=”framedesc.htm.”
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.
The Difference Between Frames and Iframes

• When you use frameset you split the visual real estate of a
browser window into multiple frames. Each frame has it’s own
contents and the content in one don’t spill into the next.

• An iframe, on the other hand, embeds a frame directly inline

with the other elements of a webpage.

• While both frames and iframes perform a similar function –

embedding a resource into a webpage – they are fundamentally
different.

 Frames are layout-defining elements.

 Iframes are a content-adding elements.
Frames have been deemed obsolete by the W3C in HTML5. The reasoning
given for this is that frames create usability and accessibility issues
The Problem with Frames
• Usability challenges: With the rise in popularity of mobile devices and
tablets with small displays it’s more important than ever that websites offer
multiple views which change based on the size of the device viewport. While
frames can be manipulated to provide a certain degree of responsiveness,
they are simply not well-suited to creating responsive websites.
• Accessibility challenges: Screen readers and other assistive technologies
have a very hard time understanding and communicating websites that use
frames.
In addition to the accessibility and usability issues created by frames, the trend
within web design is to separate the content of a webpage from its
presentation.
 Content should be added and defined by markup such as HTML.
 Presentation should be manipulated with languages like CSS and JavaScript.
Using frames is primarily about creating a specific look and layout, a
presentation task that should really be handled with CSS.
Create Frames
• Use the frameset element in place of the body
element in an HTML document.
• Use the frame element to create frames for
the content of the web page.
• Use the src attribute to identify the resource
that should be loaded inside each frame.
• Create a different file with the contents for
each frame.
create four different HTML documents. Here’s what the first will contain:

<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>

The first document we’ll save as frame_1.html. The other three documents
will have similar contents and follow the same naming sequence.
Creating Vertical Columns
• To create a set of four vertical columns, we need to
use the frameset element with the cols attribute.

• The cols attribute is used to define the number and

size of columns the frameset will contain. In our case,
we have four files to display, so we need four frames.
To create four frames we need to assign four comma-
separated values to the cols attribute.

• To make things simple we’re going to assign the value

* to each of the frames, this will cause them to be
automatically sized to fill the available space.
<!DOCTYPE html>
<html>
<frameset cols="*,*,*,*">
<frame src="../file_path/frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>
Creating Horizontal Rows
Rows of frames can be created by using the rows attribute rather than the
cols attribute as shown in the HTML below.

<!DOCTYPE html>
<html>
<frameset rows="*,*,*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</html>

By making that one change, the frames now load as four rows stacked up
on top of eachother.
Mixing Columns and Rows
Columns and rows of frames can both appear on the same webpage by nesting one
frameset inside of another. To do this, we first create a frameset and then nest a
child frameset within the parent element. Here’s an example of how we could nest
two rows within a set of three columns.

<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">
</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
The nested frameset takes the place of the first frame within the parent
element. The nested element can be placed in any position. For example, if
we wanted the nested element to appear in the center position we would
just rearrange the elements like this.

That code creates a set of two equally sized

columns. We then split the second column into
two rows. Finally, we split the second row into two
columns.
One more way to create a combination of rows and columns is to
define a grid of columns and rows in a single frameset. For example,
if you wanted a grid of four equally sized frames, you could use the
following code.

<frameset rows="," cols=",">

<frame src="frame_1.html">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
Element
Attributes Notes
Name
The <noframes> element was used within a
parent <frameset> to provide fallback content
for users whose browsers did not support
noframes
<frame> content. Frames have been
deprecated, so the <noframes> element should
not be in use on modern websites.
Sandbox,scrolling,
name,align,
frameborder, The <iframe> creates an inline frame, which
iframe longdesc, embeds an independent HTML document into
marginwidth,src, the current document.
vspace,width

The <frameset> element was used to create a

Frameborder,cols,
group of frames which could be styled and
frameset bordercolor
controlled as a unit. Frames have been
deprecated and should no longer be used.
Src,name,
The <frame> element was used to break a
marginwidth
single browser window into multiple
scrolling,noresize,
frame independent browsing contexts. Frames have
frameborder,
been deprecated and should not used by
bordercolor
modern websites.
Style Frames
When styling the presentation of a webpage that uses
frames, there are two different types of styling to consider:

1. Styling within each frame.

2. Styling the frameset

The presentation of each frame must be defined within the

source document. The presentation of the frameset must be
defined within the parent document containing the frameset.
Styling Frame Source Documents
with any webpage, the contents of each frame can be styled
with CSS. In order to style the contents of each frame, the
styles must be added to the source document itself either by
linking to an external stylesheet within the source document
or by adding internal or inline styles to the source document.

Considering our four source documents, CSS styles have to be

applied to each document individually. Applying CSS styles to
the webpage that contains the frameset will not cause those
styles to apply to each individual document.

If we want to style frame_1.html we need to add styles directly

to the document itself either by linking to an external style
sheet or by typing them directly into the document.
<!DOCTYPE html>
<html>
<head>
<style>
body {background: gray;}
h1 {color: blue;}
p {margin: 20px;}
</style>
</head>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
</body>
</html>
If we go back to our original example with four equally-sized columns and load the frameset after making these
changes to frame_1.html, we get this:
Styling & Formatting the Frameset
There are a few things you can do to affect the presentation
of a frameset beyond styling the documents themselves.

1. The size of each frame can be specified and locked.

2. The margin between frames can be changed.
3. The border around frames can be formatted.

These changes aren’t made with CSS. Instead, they are made
by adding attributes and values to the frame elements.
1. Sizing Frames
Frames can be sized either in pixels or percentages, or they can be set to
automatically adjust in size based on the available space. To specify the
size of a frame, insert the desired value in the cols or rows attribute.

By default, unless the attribute noresize is added to a frame, website

visitors can use their mouse to drag the border between two frames to
resize the frames. If this is undesirable, the attribute noresize can be
applied to a frame element to
<frameset rows="150px,*">
<frame noresize src="frame_1.html">
<frameset cols="20%,*,20%">
<frame src="frame_2.html">
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>
</frameset>
2. Formatting Frame Margins & Borders
we can increase or decrease the margin between the frames and also
remove the border between the frames if we wish to do so.
<frameset rows="150px,*">
<frame noresize src="frame_1.html" marginheight="15">
<frameset cols="20%,*,20%">
<frame src="frame_2.html" frameborder="0">
<frame src="frame_3.html" frameborder="0">
<frame src="frame_4.html" frameborder="0">
</frameset>
</frameset>

The marginheight attribute applied to the first frame will add 15px of
margin above and below the content loaded in the first frame. The
frameborder value of 0 removes the borders from around the three
bottom frames.
Targeting Frames with Links
One of the most common uses of frames is to build sticky
navigation into a frame that is always visible regardless of the
position of the contents of the other frames. When properly
implemented, navigation links will cause new resources to
load in one frame while the other frames remain static.

Anchors can be formatted to target specific frames by

assigning a name attribute to a targeted frame element, and
using the target attributed within the a element to load the
href in the targeted frame.
<frameset rows="150px,*">
<frame noresize src="frame_1.html" <!DOCTYPE html>
marginheight="15"> <html>
<frameset cols="20%,*,20%"> <body>
<frame src="frame_2.html" <h1>Frame 2</h1>
frameborder="0"> <p>Contents of Frame 2</p>
<frame src="frame_3.html" <ul>
name="mid_col" frameborder="0"> <li><a href="frame_1.html"
<frame src="frame_4.html" target="mid_col">Load frame_1.html</a></li>
frameborder="0"> <li><a href="frame_2.html" target="mid_col">Load
</frameset> frame_2.html</a></li>
</frameset> <li><a href="frame_3.html" target="mid_col">Load
frame_3.html</a></li>
<li><a href="frame_4.html"
target="mid_col">Load frame_4.html</a></li>
</ul>
</body>
</html>
iframes
• HTML Iframe is used to display a nested webpage (a webpage
within a webpage). The HTML <iframe> tag defines an inline
frame, hence it is also called as an Inline frame.

• An HTML iframe embeds another document within the current

HTML document in the rectangular region.

• The webpage content and iframe contents can interact with each
other using JavaScript.
• The src attribute specifies the URL of the document you want to
embed.
• Iframes can include videos, maps, or entire web pages from other
sources.
Iframe Syntax
An HTML iframe is defined with the <iframe>
tag:
<iframe src="URL"></iframe>
Here, "src" attribute specifies the web address
(URL) of the inline frame page.
iframe attributes
Attributes Description
Specifies a set of extra restrictions on the content that can be loaded in
allow
an <iframe>.

allowfullscreen Indicates whether the <iframe> can be displayed in fullscreen mode.

allowpaymentr
Enables payment requests for content inside the <iframe>.
equest

height Sets the height of the <iframe> element.

width Sets the width of the <iframe> element.

loading Specifies how the content of the <iframe> should be loaded.

scrolling Controls whether or not the <iframe> should have scrollbars.

Specifies the name of the <iframe> for targeting its content or for
name
referencing it in JavaScript.

referrerpolicy Sets the referrer policy for the <iframe> content.

sandbox Specifies an extra set of restrictions for the content in the <iframe>.

src Specifies the URL of the document to embed in the <iframe>.

1. Set Width and Height of iframe
You can set the width and height of iframe by using "width" and "height"
attributes. By default, the attributes values are specified in pixels but you
can also set them in percent. i.e. 50%, 60% etc.

Example: (Pixels)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the
iframe:</p>
<iframe src="https://www.google.com/" height="300"
width="400"></iframe>
</body>
</html>
2. Remove the border of iframe
By default, an iframe contains a border around it. You can remove the
border by using <style> attribute and CSS border property.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>This iframe example doesn't have any border</p>
<iframe src="https://www.javatpoint.com/"
style="border:none;"></iframe>
</body>
</html>
3. Iframe Target for a link
You can set a target frame for a link by using iframe. Your specified target
attribute of the link must refer to the name attribute of the iframe.
Example:

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>

p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the ifarme click on link to open new iframe. </p>
</body>
</html>
<!DOCTYPE html>
<html>

<body>

<h2 >Iframe - Target for a Link</h2>

<iframe width="560" height="315" src="https://www.youtube.com/embed/mnULGqkVONI?si=YP1JApRWs6eTfr-x"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>
Div Tag
The <div> tag defines a division or a section in an HTML
document.

The <div> tag is used as a container for HTML elements -

which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id

attribute.

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

</body>
</html>
nav
• The <nav> tag defines a set of navigation links.

• Notice that NOT all links of a document should be

inside a <nav> element. The <nav> element is
intended only for major blocks of navigation links.

• Browsers, such as screen readers for disabled

users, can use this element to determine whether
to omit the initial rendering of this content.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
span
The <span> tag is an inline container used to mark up
a part of a text, or a part of a document.

The <span> tag is easily styled by CSS or manipulated

with JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but

<div> is a block-level element and <span> is an inline
element.
<p>My mother has <span
style="color:blue">blue</span> eyes.</p>
HTML Audio Tag
HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file format for HTML 5 audio tag.

mp3,wav,ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.

HTML Audio Tag Example

<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
Attributes of HTML Audio Tag

Attribute Description
controls It defines the audio controls which is displayed with
play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it
is ready.
loop It specifies that the audio file will start over again, every
time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when
the page loads.
src It specifies the source URL of the audio file.
HTML Video Tag
HTML 5 supports <video> tag also. The HTML video tag is
used for streaming video files such as a movie clip, song
clip on the web page.

Currently, there are three video formats supported for

HTML video tag:

• mp4
• webM
• ogg
Example1:

<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

Example2:

<video width="320" height="240" controls autoplay loop>

<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is
not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is
completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.
https://www.dezven.com/project/how-to-
design-simple-college-website-using-html-and-
css

API Testing Complete Notes
No ratings yet
API Testing Complete Notes
31 pages
Ultra HTML Reference
From Everand
Ultra HTML Reference
Mike Abelar
2/5 (1)
HTML Material
No ratings yet
HTML Material
5 pages
HTML SYlABUS
No ratings yet
HTML SYlABUS
50 pages
HTML Css Js
No ratings yet
HTML Css Js
491 pages
What Is HTML
No ratings yet
What Is HTML
66 pages
HyperText Markup Language New Lesson
No ratings yet
HyperText Markup Language New Lesson
169 pages
Introduction To HTML
No ratings yet
Introduction To HTML
4 pages
HTML Tags: Tagname /tagname
No ratings yet
HTML Tags: Tagname /tagname
14 pages
HTML 1
No ratings yet
HTML 1
43 pages
ppt 1
No ratings yet
ppt 1
61 pages
HTML
No ratings yet
HTML
14 pages
HTML Intro
No ratings yet
HTML Intro
29 pages
Bachelore of Computer Applications ST - Xavier'S College - Krupa Shah
No ratings yet
Bachelore of Computer Applications ST - Xavier'S College - Krupa Shah
75 pages
Com 225
No ratings yet
Com 225
9 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
11 pages
What is HTML
No ratings yet
What is HTML
4 pages
html fnl
No ratings yet
html fnl
89 pages
HTML&CSS Bells
No ratings yet
HTML&CSS Bells
230 pages
ppt html 1
No ratings yet
ppt html 1
33 pages
HTML Introduction
No ratings yet
HTML Introduction
6 pages
HTML Notes
No ratings yet
HTML Notes
23 pages
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
No ratings yet
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
80 pages
HTML2
No ratings yet
HTML2
154 pages
Topic 7: Understanding The Functionality of HTML What Is HTML?
No ratings yet
Topic 7: Understanding The Functionality of HTML What Is HTML?
9 pages
HTML Notes
No ratings yet
HTML Notes
30 pages
HTML5 Basic Notes
No ratings yet
HTML5 Basic Notes
96 pages
HTML
100% (4)
HTML
108 pages
HTML Tutorial
No ratings yet
HTML Tutorial
49 pages
html_css
No ratings yet
html_css
40 pages
Unit - 1 HTML
No ratings yet
Unit - 1 HTML
110 pages
inbound8817341847772851356
No ratings yet
inbound8817341847772851356
29 pages
HTML Basic in Single Word File
No ratings yet
HTML Basic in Single Word File
21 pages
HTML NOTE.
No ratings yet
HTML NOTE.
26 pages
HTML
No ratings yet
HTML
110 pages
HTML
No ratings yet
HTML
45 pages
HTML
No ratings yet
HTML
47 pages
HTML-Chapter 1 - 4
No ratings yet
HTML-Chapter 1 - 4
111 pages
HTML-Chapter 1 - 4
100% (1)
HTML-Chapter 1 - 4
126 pages
HTML1
No ratings yet
HTML1
76 pages
What Is HTML
No ratings yet
What Is HTML
14 pages
My HTML Lessons
No ratings yet
My HTML Lessons
3 pages
HTML Notes
No ratings yet
HTML Notes
21 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
HTML
No ratings yet
HTML
58 pages
HTML Document1
No ratings yet
HTML Document1
37 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
WD Unit 1
No ratings yet
WD Unit 1
7 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML and Java Script
No ratings yet
HTML and Java Script
115 pages
Practical File - Vikas
No ratings yet
Practical File - Vikas
13 pages
HTML Notes-1
No ratings yet
HTML Notes-1
7 pages
CPC06 Advance Web Development2
No ratings yet
CPC06 Advance Web Development2
36 pages
What is HTML
No ratings yet
What is HTML
63 pages
01 HTML (1)
No ratings yet
01 HTML (1)
96 pages
Chapter 2 - Introduction to HTML
No ratings yet
Chapter 2 - Introduction to HTML
59 pages
HTML DHTML JAVA CSS
No ratings yet
HTML DHTML JAVA CSS
44 pages
HTML Notes
No ratings yet
HTML Notes
96 pages
Design-G10-Part 1
No ratings yet
Design-G10-Part 1
26 pages
HTML Unleashed: The Complete Guide
From Everand
HTML Unleashed: The Complete Guide
Pen Hur
No ratings yet
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Class 10 Computer Application Sample Paper Set 12
No ratings yet
Class 10 Computer Application Sample Paper Set 12
7 pages
4.2 React Foundation
No ratings yet
4.2 React Foundation
24 pages
Seositecheckup Report
No ratings yet
Seositecheckup Report
10 pages
Servlet
No ratings yet
Servlet
104 pages
Moosy Presentation
No ratings yet
Moosy Presentation
26 pages
Lecture 3 Jquery & JSON
0% (1)
Lecture 3 Jquery & JSON
21 pages
OJET Student Guide
No ratings yet
OJET Student Guide
93 pages
Burp Scanner Report
No ratings yet
Burp Scanner Report
3 pages
Anshul Bhardwaj: Education Projects
No ratings yet
Anshul Bhardwaj: Education Projects
1 page
First Long Test Grade 9
100% (1)
First Long Test Grade 9
2 pages
JQuery Succinctly
No ratings yet
JQuery Succinctly
27 pages
Annamalai University: Distance Education / Open University (Including Lateral Entry / Double Degree) PROGRAMMES
No ratings yet
Annamalai University: Distance Education / Open University (Including Lateral Entry / Double Degree) PROGRAMMES
15 pages
Log
No ratings yet
Log
504 pages
NM Full Stack Django
No ratings yet
NM Full Stack Django
99 pages
Fundamentals Curriculum Intensive
No ratings yet
Fundamentals Curriculum Intensive
9 pages
A Look at Server-Sent Events
No ratings yet
A Look at Server-Sent Events
11 pages
Nightwatch Respuestas
100% (2)
Nightwatch Respuestas
5 pages
Zippyshare Rapidleech Plugin
No ratings yet
Zippyshare Rapidleech Plugin
3 pages
Html5 Audio
No ratings yet
Html5 Audio
15 pages
How To Set Up A Multilanguage Website in 10 Steps & Ideas, Setups and Tips
No ratings yet
How To Set Up A Multilanguage Website in 10 Steps & Ideas, Setups and Tips
73 pages
PHP Course Details
No ratings yet
PHP Course Details
4 pages
HTML E COMMERCE Assignment
No ratings yet
HTML E COMMERCE Assignment
12 pages
Netcraft
No ratings yet
Netcraft
9 pages
1.01. - Introduction To Web Designing
No ratings yet
1.01. - Introduction To Web Designing
31 pages
UTD Web Programming
No ratings yet
UTD Web Programming
2 pages
ALKA
No ratings yet
ALKA
1 page
Learn To Code HTML and CSS Develop Style Websites PDF
100% (2)
Learn To Code HTML and CSS Develop Style Websites PDF
595 pages
Web Development Using Python Flask
No ratings yet
Web Development Using Python Flask
16 pages
Day 1.5 John Johnston PDF
No ratings yet
Day 1.5 John Johnston PDF
22 pages