Advance HTML-5
Chapter 1

Basic html tags

1.1 html tag

<html></html> to see more

# Defines an HTML document

# Adding content on a web page.

# All contents of a web page written between <html></html> tag.

Tags between <html></html> tag.

Example

Result

---web page contents---

Example

Result

--- visible contents write here ---

1.2 head tag

<head></head> to see more

#Defines information about the document (all sensitive information) contents are not visible in browser

Tags between <head></head> tag.

Example

Result

1.3 title tag

<title></title>

#Defines a title for the document

#Adding a title to a web page

(Title: A title that appears in the title bar that runs across the very top of the web page)

Example

Result

1.4 body tag

<body></body> to see more

#Defines the document's body

#Adding content on a web page.

Example

Result

Hello world.

Tags between <body></body> tag.

<h1></h1>
<b></b>
<i></i>
<u></u>
<p></p>
<div></div>
etc.

Chapter 2

Make heading and subheading

2.1 heading tag

<h1></h1>

#Defines HTML heading

#If would you like to format the text into title on your web page

Example

Result

Heading 1

Example

Result

The Cow

Cow is a domestic animal. She gives us milk and calf.

2.2 sub-heading tags

<h2></h2> to <h6></h6>

#Defines HTML subheadings

#If would you like to format the text into subtitles on your web page

Example

Result

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Chapter 3

Some special tags and characters

3.1 line break tag

<br> or <br />

#Inserts a single line break

# <br> element known as 'empty' element

Details: The all-purpose <br> element forces a line break anytime you want without having to place the text within a block level element.

Example

Result

This is the first line.
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Expedita sit a consequuntur optio repudiandae magnam impedit quia. Maiores, illo saepe.

3.2 none breakable space

 

# Inserts non breakable space

# To create extra inter-word space

Details: As well as ignoring line breaks, web browsers also ignore all extra inter-word space that appears in the source code.

Example

Result

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, quaerat sed velit quidem aut officia iusto quae aperiam incidunt excepturi?

3.3 posible line-break

<wbr>

# Inserts possible line-break

# Defines a possible line-break. Sometime call word-break

Example

Result

HelloooooooooooooooooooooooooooooWorld!

3.4 comment tag

#Defines a comment. Not visible on browser.

Example

Result

Example

Result

The Cow

Cow is a domestic animal. She gives us milk and calf.

#Sometimes we use comment to hide some code

Example

Result

Cow is a domestic animal. She gives us milk and calf.

3.5 center tag

<center></center>

#Make charecters in center

Example

Result

Hello World

Chapter 4

Some font style (formatting) tags

4.1 bold tag

Example

Result

Hello world
Hello world

4.2 italic tag

Example

Result

Hello world
Hello world

4.3 underline tag

<u></u>

Example

Result

Hello world

4.4 strike-through tag

Example

Result

~~Hello world~~
~~Hello world~~

4.3 nesting tags (tags inside tag)

Example

Result

Hello world
Hello world
Hello world
Hello world
~~Hello world~~

4.5 teletype tag

Example

Result

Hello world
Hello world

4.6 subscript tag

Example

Result

The chemical name of water is H₂O

4.7 superscript tag

Example

Result

Mathematical formula: 5² = 25

4.3 A snapshot

#A snapshot of all of the above mentioned style as follows:

Example

Result

Bold text goes here.

italic text goes here.

Underlined text goes here.

~~Strike-through text goes here.~~

Teletype text goes here.

Chapter 5

font tag

font tag have many attributes

<font attribute="value"></font>

#attributes to give extra function

5.1 font face

# We can designate what typeface a browser will use to display the text on your web page.

Example

Result

This is Arial
This is Cambria
This is 'Century Gothic'

Multiple font face: If one font face absent in system then other font face will be applicable.

we can use multiple font face separated by comma (,)

font face: atlas ->

Example

Result

Hello world

5.2 font size

size: (font-size) minimum value = 1 and maximum value = 7

Example

Result

Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world

5.2 font color

Example

Result

Hello world
Hello world
Hello world
Hello world
Hello world
Hello world

we can also use hexadecimal color code in place of color-name

Example

Result

Hello world
Hello world
Hello world
Hello world
Hello world
Hello world

5.2 multi-attributes

Example

Result

Hello world

Chapter 6

Some other font style (formatting) tags

6.1 date tag

Example

Result

Today is 14-09-2022

Chapter 7

Create Paragraph

7.1 Paragraph tag

<p></p> to see more

#Defines a paragraph

# Render text into paragraphs with a blank line in between each.

Details: Creating paragraphs using html is accomplished by placing the text which rendered as a paragraph in between the p p tag. The end /p tag terminates the paragraph while a new start p tag beings a new paragraph.

Example

Result

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In ea, nisi veniam cum natus repellendus nam distinctio aspernatur accusantium at.

7.2 div tag (generic division)

<div></div> to see more

#Defines a section in a document

# Renders text into generic division with no blank line in between each

Details: The div element differs from the p element in that the /div end tag only breaks the flow of text to the next line. No blank line will appear between it and the succeeding text.

Example

Result

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In ea, nisi veniam cum natus repellendus nam distinctio aspernatur accusantium at.

7.0 Difference between p and div

Example#p

Result

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus vitae nisi veniam doloribus doloremque.

Et ipsam asperiores repellat quos explicabo placeat vitae soluta cupiditate repudiandae accusamus obcaecati ut accusantium laboriosam itaque officia aspernatur aliquam deleniti eligendi, dignissimos a nam? Nisi?

Example#div

Result

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus vitae nisi veniam doloribus doloremque.

7.3 blockquote tag

<blockquote></blockquote> to see more

# This element can be used to indent an entire block of text.

Details: This is typically used to indicate that the text is quoted from another source although it can also be used simply to offset the text for aesthetic reasions. To display text as such, place it within the blockquote tags.

Example

Result

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum, veniam cumque quis illum beatae sapiente, minus ipsam atque libero id iure quam deserunt eum odio voluptates expedita quidem? Aspernatur, alias!

Chapter 8

Paragraph

8.1 Paragraph tag

<p></p>

#Defines a paragraph

paragraph tag and its attributes

8.1 align (alignment)

<p align="position"> ... </p>

position: left, center, right, justify

Example

<body>
<p align="left">Left alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga tenetur velit deleniti, explicabo nisi obcaecati inventore ipsa numquam rerum ab eius? Corporis quaerat velit natus, quod aperiam ipsum, repellat beatae possimus placeat numquam, provident pariatur suscipit consectetur. Neque id recusandae labore ratione doloremque eveniet! Consequuntur explicabo dignissimos quo quidem doloremque!</p>

<p align="center">Center alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ad saepe earum sequi sunt recusandae excepturi cum expedita repudiandae in modi? Quis quaerat eaque, harum fuga minus reprehenderit, suscipit qui deleniti sapiente laborum, hic dicta rem autem obcaecati voluptas nisi sed voluptatum amet ex. Voluptates facilis accusantium culpa ipsum sit.</p>

<p align="right">Right alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, debitis perferendis unde incidunt facilis velit molestias voluptatum dignissimos sunt laudantium pariatur facere iure eaque nam eius corrupti! Quam nam voluptatem tempore? Corporis soluta, consequatur blanditiis optio aliquid quod sit, nisi, explicabo sequi quidem enim debitis animi placeat porro iusto. Unde.</p>

<p align="justify">Justify alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem obcaecati iusto odio quisquam libero inventore, impedit tenetur temporibus dolor qui minima ullam voluptas, rerum, aspernatur nam blanditiis ratione nulla illum ducimus? Tempore animi consectetur quos dignissimos laborum ab officiis earum, reiciendis aliquid molestias, nesciunt maiores illum, quia est nemo alias.</p>
</body>
</html>

Result

Left alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias debitis atque animi aliquid sequi commodi, dolor inventore assumenda, sapiente voluptates veritatis vero odit cupiditate error. Eaque qui odio error, temporibus dolorem reiciendis harum distinctio fuga esse sapiente porro nihil consequatur consequuntur delectus ab maiores est repudiandae. Minima quod molestias quia.

Center alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea dolores blanditiis dicta architecto quasi animi ab molestias, ipsam delectus sit at similique sequi atque sapiente modi quas totam doloremque ut saepe ad! Rerum nostrum reprehenderit sed eum veritatis magni maiores fuga! In tenetur earum voluptatem non blanditiis ex? Perspiciatis!

Right alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur nulla molestias laborum natus laboriosam recusandae quasi sunt aliquam totam incidunt illum minima voluptatibus quam aspernatur facilis quod nihil odit harum eaque perferendis perspiciatis, rem saepe accusantium. Tenetur officia eveniet quas expedita at officiis porro, voluptatibus ipsum esse, odit aut maiores.

Justify alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel hic libero quae incidunt maxime, repudiandae dolorem ratione nobis expedita consectetur architecto quia tempora corrupti saepe. Dolor error totam aspernatur hic repellendus consectetur ducimus, repudiandae adipisci minus quisquam sed aperiam officiis eveniet molestiae repellat et? Ea voluptatem exercitationem temporibus maxime dolorum.

Example

Result

Example 1:
This is an example
displaying the use of
the attribute align left.

Example 2:
This is an example
displaying the use of
the attribute align center.

Example 3:
This is an example
displaying the use of
the attribute align right.

Chapter 9

Create div

9.1 div tag

<div></div>

#Defines a section in a document

div tag and its attributes

9.1 align (alignment)

<div align="position"> ... <div>

position: left, center, right, justify

Example

<body>
<div align="left">Left alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga tenetur velit deleniti, explicabo nisi obcaecati inventore ipsa numquam rerum ab eius? Corporis quaerat velit natus, quod aperiam ipsum, repellat beatae possimus placeat numquam, provident pariatur suscipit consectetur. Neque id recusandae labore ratione doloremque eveniet! Consequuntur explicabo dignissimos quo quidem doloremque!</div>
<br>
<div align="center">Center alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ad saepe earum sequi sunt recusandae excepturi cum expedita repudiandae in modi? Quis quaerat eaque, harum fuga minus reprehenderit, suscipit qui deleniti sapiente laborum, hic dicta rem autem obcaecati voluptas nisi sed voluptatum amet ex. Voluptates facilis accusantium culpa ipsum sit.</div>
<br>
<div align="right">Right alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, debitis perferendis unde incidunt facilis velit molestias voluptatum dignissimos sunt laudantium pariatur facere iure eaque nam eius corrupti! Quam nam voluptatem tempore? Corporis soluta, consequatur blanditiis optio aliquid quod sit, nisi, explicabo sequi quidem enim debitis animi placeat porro iusto. Unde.</div>
<br>
<div align="justify">Justify alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem obcaecati iusto odio quisquam libero inventore, impedit tenetur temporibus dolor qui minima ullam voluptas, rerum, aspernatur nam blanditiis ratione nulla illum ducimus? Tempore animi consectetur quos dignissimos laborum ab officiis earum, reiciendis aliquid molestias, nesciunt maiores illum, quia est nemo alias.</div>
</body>
</html>

Result

Chapter 10

Create blockquote

10.1 blockquote tag

<blockquote></blockquote> to see more

#Defines block

blockquote tag and its attributes

10.1 align (alignment)

<blockquote align="position"> ... </blockquote>

position: left, center, right, justify

Example

<body>
<blockquote align="left">Left alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga tenetur velit deleniti, explicabo nisi obcaecati inventore ipsa numquam rerum ab eius? Corporis quaerat velit natus, quod aperiam ipsum, repellat beatae possimus placeat numquam, provident pariatur suscipit consectetur. Neque id recusandae labore ratione doloremque eveniet! Consequuntur explicabo dignissimos quo quidem doloremque!</blockquote>

<blockquote align="center">Center alignment: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ad saepe earum sequi sunt recusandae excepturi cum expedita repudiandae in modi? Quis quaerat eaque, harum fuga minus reprehenderit, suscipit qui deleniti sapiente laborum, hic dicta rem autem obcaecati voluptas nisi sed voluptatum amet ex. Voluptates facilis accusantium culpa ipsum sit.</blockquote>

<blockquote align="right">Right alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, debitis perferendis unde incidunt facilis velit molestias voluptatum dignissimos sunt laudantium pariatur facere iure eaque nam eius corrupti! Quam nam voluptatem tempore? Corporis soluta, consequatur blanditiis optio aliquid quod sit, nisi, explicabo sequi quidem enim debitis animi placeat porro iusto. Unde.</blockquote>

<blockquote align="justify">Justify alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem obcaecati iusto odio quisquam libero inventore, impedit tenetur temporibus dolor qui minima ullam voluptas, rerum, aspernatur nam blanditiis ratione nulla illum ducimus? Tempore animi consectetur quos dignissimos laborum ab officiis earum, reiciendis aliquid molestias, nesciunt maiores illum, quia est nemo alias.</blockquote>
</body>
</html>

Result

Left alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias debitis atque animi aliquid sequi commodi, dolor inventore assumenda, sapiente voluptates veritatis vero odit cupiditate error. Eaque qui odio error, temporibus dolorem reiciendis harum distinctio fuga esse sapiente porro nihil consequatur consequuntur delectus ab maiores est repudiandae. Minima quod molestias quia.

Center alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea dolores blanditiis dicta architecto quasi animi ab molestias, ipsam delectus sit at similique sequi atque sapiente modi quas totam doloremque ut saepe ad! Rerum nostrum reprehenderit sed eum veritatis magni maiores fuga! In tenetur earum voluptatem non blanditiis ex? Perspiciatis!

Right alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur nulla molestias laborum natus laboriosam recusandae quasi sunt aliquam totam incidunt illum minima voluptatibus quam aspernatur facilis quod nihil odit harum eaque perferendis perspiciatis, rem saepe accusantium. Tenetur officia eveniet quas expedita at officiis porro, voluptatibus ipsum esse, odit aut maiores.

Justify alignment: Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel hic libero quae incidunt maxime, repudiandae dolorem ratione nobis expedita consectetur architecto quia tempora corrupti saepe. Dolor error totam aspernatur hic repellendus consectetur ducimus, repudiandae adipisci minus quisquam sed aperiam officiis eveniet molestiae repellat et? Ea voluptatem exercitationem temporibus maxime dolorum.

Chapter 11

Graphics

11.1 image tag

<img>

image tag and its attributes

11.1 src: (source of image file)

# Image tag have many attributes. Without any attributes img tag have no effect.

<img src="graphic file name">

<img src="filename.ext">

# Where filename.ext is the full name (including file extention) of the graphic or image you wish to display

File formats: Web graphics are generally served up in one of two formats: GIF or JPEG. Hence GIFs carry the .gif file extension and JPEGs carry the .jpeg or .jpg file extension.

Example

Result

11.1 width and height

<img src="graphic file name" width="..." height="...">

width: (width of image)

height: (height of image)

Example

Result

11.1 alt (alternate)

<img src="graphic file name" alt="...">

Example# without alt attribute

Result

Example# with alt attribute

Result

11.1 title

title:

<img src="graphic file name" title="...">

# To see the result point the cursor on image

Example

Result

11.1 border

<img src="graphic file name" border="...">

Example

Result

Chapter 12

Graphics

# Draw graphics

12.1 canvas tag

# canvas is raster based and composed of pixel.

<canvas></canvas>

12.1 svg tag

# scalable vactor graphics

<svg></svg>

12.1 ractangle

<svg><rect width="..." height="..."></rect></svg>

Example

Result

12.2 circle

<svg><circle cx="..." cy="..." r="..."></circle></svg>

<svg><circle cx="..." cy="..." r="..." stroke="..." stroke-width="..." fill="..."></circle></svg>

Example

Result

12.2 polygon

<svg><polygon points="..., ..., ..."></polygon></svg>

<svg><polygon points="..., ..., ..." stroke="..." stroke-width="..." fill="..."></polygon></svg>

Example

Result

Chapter 13

Horizontal line

12.2 hr tag (Horizontal rules)

<hr> or <hr />

#Horizontal rule. Typically introduces a thematic change in the content

Example

Result

hr tag and its attributes

12.2 width:

<hr width="pixel or precentage">

Example

Result

12.2 size:

<hr size="...">

Example

Result

12.2 noshade:

<hr noshade>

Example

Result

12.2 align:

<hr align="position">

position: left, center, right

Example

Result

12.2 color:

<hr color="...">

Example

Result

Example

Result

Example

Result

Example

Result

Chapter 14

meter

meter (scalar measurement)

<meter></meter>

<meter>alternate</meter>

#alternate: internet explorer web browser not supported meter tag so, alternate value will appair.

#Defines a scalar measurement within a known range (a gauge)

Example

Result

Temprature:

Temprature: 0C

meter tag and its attributes

value:

<meter value="..."></meter>

#Default Value: minimum value=0, maximum value=1

Example

Result

Temprature: 0C

Temprature: 20C

Temprature: 40C

Temprature: 60C

Temprature: 80C

Temprature: 100C

min: max:

<meter min="..." max="..." value="..."></meter>

#We can take minimum value=0, maximum value=100

Example

Result

Temprature: 10C

Temprature: 25C

Temprature: 55C

Temprature: 75C

Temprature: 95C

low: high:

<meter min="..." max="..." low="..." high="..." value="..."></meter>

#We can take low and high value

Example

Result

Temprature: 5C

Temprature: 29C

Temprature: 30C

Temprature: 45C

Temprature: 70C

Temprature: 71C

Temprature: 90C

Temprature: 55C

Chapter 15

progress

progress tag

<progress></progress>

#Represents the progress of a task

Example

Result

Downloading:

Chapter 16

Creating Hyperlinks

Anchor tag

<a> </a>

# The most powerful and widely used of all html elements.

Anchor tag and its attributes

12.2 href:

<a href="valid web address"></a>

# Where valid web addresss equals any existing URL (Uniform Resource Locator)

Example

Result

Welcome to Shahid Study

12.2 Graphics as Hyperlinks:

#link img

<a href="..."> <img src="..."> </a>

<a href="valid web address"> <img src="graphic file name"> </a>

Example

Result

12.2 target:

<a href="..." target="..."><a>

target: _blank, _self

Example#_blank

Result

Shahid Study

Example#_self

Result

Shahid Study

12.2 image with target

<a href="valid web address" target="_blank"> <img src="..."> <a>

Example

Result

Chapter 17

Sending e-mail

12.2 mailto:

<a href="mailto:..."></a>

<a href="mailto:valid e-mail id"></a>

Example

Result

Mail to Shahid Study

12.2 Graphics as email links

Example

Result

Chapter 18

Animation

12.2 marquee

Example

Result

Welcome

marquee tag and its attributes

12.2 direction

direction: right, left

Example

Result

Welcome Welcome

12.2 behavior

behavior: scroll, slide, alternate

Example

Result

Welcome Welcome Welcome

Example

Result

Hello World!

Example

Result

Shahid Study

Chapter 19

body

body tag and its attributes

12.2 bgcolor:

<body bgcolor="color-name"><body>

#background color

Example

Result

Hello World

12.2 background:

<body background="image file name"><body>

# background image

Example

Result

Hello World

Chapter 20

Making lists

#There is two catogary of list

1. Unordered list

2. Ordered list

3. Definition List

Unordered list

Example

Result

List of some fruits

Mango
Orange

Ordered list

Example

Result

List of some fruits

Mango
Orange

Definition List

dl: Definition lists

dt: Definition term

dd: Definition data

Structure

<dl>
	<dt></dt>
	<dd></dd>
</dl>

Example

Result

Text Editor: Program that comes with the default installation of most computer operating systems that permits the user to save text to file stripped of any formatting.
Html Editor: Basically a text editor on steroids facilitating the writing of Html source code by providing a graphical user interface containing buttons and drop-down menus that allow one to insert commonly used snippets of code.

Chapter 20a

Unordered list

12.2 ul tag

Structure

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

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

# Here </li> end tag is optional

Example#without li end tag

Result

List of some fruits

Mango
Orange

Example#with li end tag

Result

List of some colors

Red
Green

12.2 Nesting Lists

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

Example

Result

Primary color
- Red
- Green
- Blue
Secondary color
- White
- Orange
- Yellow

Unordered list and its attributes

12.2 type:

<ul type="...">

type: bullet, disc, circle, square

Example

Result

Mango
Orange

Mango
Orange

Mango
Orange

Mango
Orange

Chapter 20b

Ordered list

12.2 ol tag

Structure

<ol>
	<li>
	<li>
</ol>

<ol>
	<li></li>
	<li></li>
</ol>

# Here also </li> end tag is optional

Example#without li end tag

Result

List of some fruits

Mango
Orange

Example#with li end tag

Result

List of some colors

Red
Green

12.2 Nesting Lists (ordered list with unordered list)

Structure

<ol>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li>
		<ul>
			<li></li>
			<li></li>
		</ul>
	</li>
</ol>

Example

Result

Primary color
- Red
- Green
- Blue
Secondary color
- White
- Orange
- Yellow

Ordered list and its attributes

12.2 type:

<ol type="...">

type: 1, i, I, a, A

Example

Result

Mango
Orange

Mango
Orange

Mango
Orange

Mango
Orange

Mango
Orange

12.2 Nesting Lists

Example

Result

Primary color
1. Red
2. Green
3. Blue
Secondary color
1. White
2. Orange
3. Yellow

Chapter 21

Creating Table

12.2 table tag

tr: (table row) tr create table row

td: (table data) td create table column

Structure

<table>
	<tr> <td></td> <td></td> </tr>
	<tr> <td></td> <td></td> </tr>
</table>

Example

Result

items	color
rose	red
milk	white

table tag and its attributes

border:

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

bordercolor:

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

bordercolorlight:

bordercolordark:

#To see effect open with internet Explorer

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

bgcolor:

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

width:

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

row1 column1	row1 column2
row2 column1	row2 column2

height:

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

align:

align: left, center, right

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

cellspacing: (space between table cells)

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

cellpadding: (padding arround cell content)

Example

Result

row1 column1	row1 column2
row2 column1	row2 column2

th: table head

Example

Result

heading1	heading2
row1 column1	row1 column2
row2 column1	row2 column2

thead, tbody

Example

Result

heading1	heading2
row1 column1	row1 column2
row2 column1	row2 column2

colspan

Example

Result

Table
row1 column1	row1 column2
row2 column1	row2 column2

Example

Result

Comprative rate chart
Product	2021	2022
Milk	40.00	50.00
Rice	30.00	40.00

rowspan

Example

Result

District	Blocks
Katihar	Azamnagar
	Barsoi
	Kadwa

Example

Result

Class Routine
Day	Time
Day	10to12	12to1	1to3
Sun	Eng	Launch	Math
Mon	Eng		Math
Tue	Eng		Math

Chapter 22

forms

1.1 form tag

Example

Result

Form tag and its child tags

There is many tags inside the form tag

input

<input>

Example

Result

textarea

Example

Result

select

option

Example

Result

button

Example

Result

form tag and its attributes

action:

<form action="..."></form>

action= get or post

get: non-secure data

Example

Result

post: secure data

Example

Result

input tag and its attributes

name:

input name="..."

Example

Result

type:

input type="..."
type: text

Example

Result

type & size:

input type="..." size="..."
type: text size="..."

# size= size(length) of input box

Example

Result

type & maxlength:

input type="..." maxlength="..."
type: text maxlength="..."

Example

Result

type:

input type="..."
type: password

Example

Result

type:

input type="..."
type: button

Example

Result

type:

input type="..."
type: submit

Example

Result

type:

input type="..."
type: reset

Example

Result

type:

input type="..."
type: checkbox

Example

Result

type:

input type="..."
type: radio

Example

Result

type and value:

input type="..." value="..."

Example

Result

type and value:

input type="..." value="..."

Example

Result

type and value:

input type="..." value="..."

Example

Result

type, name and value:

input type="..." name="..."value="..."

Example

Result

type, title and value:

input type="..." title="..."value="..."

Example

Result

textarea and its attributes

name:

textarea name="..."

Example

Result

cols:

textarea cols="..."

Example

Result

rows:

textarea rows="..."

Example

Result

cols, rows and name:

textarea cols="..." rows="..." name="text"

Example

Result

default text:

textarea.../textarea

Example

Result

wrap:

textarea wrap="value" value= soft (virtual), hard (physical)

#Effect on database

soft: enter have no effect

hard: enter force to line break

Example

Result

Chapter 23 iframe

#Display other website or page Content

iframe and its attributes

src: source

Example

Result

Example

Result

width:, height:

Example

Result

title:

Example

Result

frameborder:

Example

Result

allowfullscreen

Example

Result

allow:

Example

Result

multi attributes

Example

Result

noembed

Example

Result

Your browser doesn't support <img src="yourfile.jpg" style="width: 90%; height: 200px"> <bgsound src="yourfile.mid" loop="1">

Chapter 24 embed

#Display other website or page Content

embed and its attributes

src: source

Example

Result

type="video/mp4

Example

Result

Chapter 24

audio sound

Audio tag and its attributes

src: (source) and type:

#supported file format: .mp3, .wav, .ogg

Example

Result

Example

Result

Chapter 25

video

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Chapter 26

frameset

fremset does not have a body tag

Example

Result

* means rest space

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Example

Result

Chapter 27 some other tags related to frame/structure header, nav, main, aside, footer, section, etc

Example

Result

The Cow

The cow is domestic animal. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem dolores eaque ipsam fugit amet libero rerum repellat reiciendis harum ducimus!

She gives us milk. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur sit veritatis tempora, rerum vitae nesciunt.

Chapter 28

SEO

html tag and its attributes

lang: (Language)

<html lang="language-code"> ... <html>

code: en = english

Example

Result

Hello World

Chapter 29

Some other tags

details tag

#Default attribute of details is close. not support in ie

Example

Result

Computer

Computer is an electronic machine that accept data process data and give out resut

Computer

Computer is an electronic machine that accept data process data and give out resut

dialog tag

#Default property of dialog is close. So, no any output

Example

Result

article tag

Example

Result

Introduction to HTML

HTML is a Hyper Text Markup Language helps to make a website.

section

section => Big data divided in to small sections

Example

Result

section_first

Introduction

This document provides a guide to help with the important task of choosing the correct Apple.

section_second

Criteria

There are many different criteria to be considered when choosing an Apple — size, color, firmness,

span

span is an inline tag. Without any attribute it has no effect

Example

Result

Lorem ipsum adipisicing elit.

Chapter 30