Basic html tags
Adv HTML
1.1 html tag
<html></html># 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.
<head></head><body></body>
1.2 head tag
<head></head>#Defines information about the document (all sensitive information) contents are not visible in browser
Tags between <head></head> tag.
<title></title><meta>
<link href=”…”>
<style></style>
<script src=”…”></script>
<script></script>
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)
1.4 body tag
<body></body>#Defines the document’s body
#Adding content on a web page.
Tags between <body></body> tag.
<h1></h1><b></b>
<i></i>
<u></u>
<p></p>
<div></div>
etc.
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
Heading 1
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
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
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.
3.3 posible line-break
<wbr># Inserts possible line-break
# Defines a possible line-break. Sometime call word-break
HelloooooooooooooooooooooooooooooWorld!
Hellooooooooooooooooooooooooooooo
Hellooooooooooooooooooooooooooooo
3.4 comment tag
<!– –>#Defines a comment. Not visible on browser.
The Cow
Cow is a domestic animal. She gives us milk and calf.#Sometimes we use comment to hide some code
3.5 center tag
<center></center>#Make charecters in center
Some font style (formatting) tags
4.1 bold tag
<b></b><strong></strong>
Hello world
4.2 italic tag
<i></i><em></em>
Hello world
4.3 underline tag
<u></u>4.4 strike-through tag
<s></s><strike></strike>
Hello world
4.3 nesting tags (tags inside tag)
<b> <i> </i> </b><i> <b> </b> </i>
<b> <u> </u> </b>
<b> <i> <u> </u> </i> </b>
<b> <i> <s> </s> </i> </b>
Hello world
Hello world
Hello world
4.5 teletype tag
<tt></tt><code></code>
Hello world4.6 subscript tag
<sub></sub>4.7 superscript tag
<sup></sup>4.3 A snapshot
#A snapshot of all of the above mentioned style as follows:
italic text goes here.
Underlined text goes here.
Teletype text goes here.
font tag
<font></font>font tag have many attributes
<font attribute=”value”></font>#attributes to give extra function
5.1 font face
<font face=”…”></font># We can designate what typeface a browser will use to display the text on your web page.
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 -> 
5.2 font size
<font size=”…”></font>size: (font-size) minimum value = 1 and maximum value = 7
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
5.2 font color
<font color=”color-name”></font>Hello world
Hello world
Hello world
Hello world
Hello world
we can also use hexadecimal color code in place of color-name
<font color=”hexadecimal-color-code”></font>Hello world
Hello world
Hello world
Hello world
Hello world
5.2 multi-attributes
<font face=”…” size=”…” color=”…”></font>Some other font style (formatting) tags
6.1 date tag
<date></date>Create Paragraph
7.1 Paragraph tag
<p></p>#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.
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>#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.
7.0 Difference between p and div
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?
7.3 blockquote tag
<blockquote></blockquote># 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.
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!
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
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 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.
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
Create blockquote
10.1 blockquote tag
<blockquote></blockquote>#Defines block
blockquote tag and its attributes
10.1 align (alignment)
<blockquote align=”position”> … </blockquote>
position: left, center, right, justify
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.
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”>
or<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.
11.1 width and height
<img src=”graphic file name” width=”…” height=”…”>
width: (width of image)
height: (height of image)
11.1 alt (alternate)
<img src=”graphic file name” alt=”…”>
11.1 title
title:
<img src=”graphic file name” title=”…”>
# To see the result point the cursor on image
11.1 border
<img src=”graphic file name” border=”…”>
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>
12.2 circle
<svg><circle cx=”…” cy=”…” r=”…”></circle></svg>
<svg><circle cx=”…” cy=”…” r=”…” stroke=”…” stroke-width=”…” fill=”…”></circle></svg>
12.2 polygon
<svg><polygon points=”…, …, …”></polygon></svg>
<svg><polygon points=”…, …, …” stroke=”…” stroke-width=”…” fill=”…”></polygon></svg>
Horizontal line
12.2 hr tag (Horizontal rules)
<hr> or <hr />#Horizontal rule. Typically introduces a thematic change in the content
hr tag and its attributes
12.2 width:
<hr width=”pixel or precentage”>
12.2 size:
<hr size=”…”>
12.2 noshade:
<hr noshade>
12.2 align:
<hr align=”position”>
position: left, center, right
12.2 color:
<hr color=”…”>
meter
meter (scalar measurement)
<meter></meter>
or<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)
meter tag and its attributes
value:
<meter value=”…”></meter>
#Default Value: minimum value=0, maximum value=1
min: max:
<meter min=”…” max=”…” value=”…”></meter>
#We can take minimum value=0, maximum value=100
low: high:
<meter min=”…” max=”…” low=”…” high=”…” value=”…”></meter>
#We can take low and high value
progress
progress tag
<progress></progress>
#Represents the progress of a task
Downloading:
Downloading:
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)
12.2 Graphics as Hyperlinks:
#link img<a href=”…”> <img src=”…”> </a>
or<a href=”valid web address”> <img src=”graphic file name”> </a>
12.2 target:
<a href=”…” target=”…”><a>
target: _blank, _self
12.2 image with target
<a href=”valid web address” target=”_blank”> <img src=”…”> <a>
Sending e-mail
12.2 mailto:
<a href=”mailto:…”></a>
or<a href=”mailto:valid e-mail id”></a>
12.2 Graphics as email links
Animation
12.2 marquee
<marquee></marquee>marquee tag and its attributes
12.2 direction
<marquee direction=”…”></marquee>direction: right, left
12.2 behavior
<marquee behavior=”…”></marquee>behavior: scroll, slide, alternate
Hello World!
body
<body></body>body tag and its attributes
12.2 bgcolor:
<body bgcolor=”color-name”><body>
#background color
12.2 background:
<body background=”image file name”><body>
# background image
Making lists
#There is two catogary of list
1. Unordered list
2. Ordered list
3. Definition List
Unordered list
List of some fruits
- Mango
- Orange
Ordered list
List of some fruits
- Mango
- Orange
Definition List
dl: Definition lists
dt: Definition term
dd: Definition data
Structure
- 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.
Unordered list
12.2 ul tag
<ul><li></li></ul>Structure
Or
# Here </li> end tag is optional
List of some fruits
- Mango
- Orange
List of some colors
- Red
- Green
12.2 Nesting Lists
- 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
- Mango
- Orange
- Mango
- Orange
- Mango
- Orange
- Mango
- Orange
Ordered list
12.2 ol tag
<ol><li></li></ol>Structure
Or
# Here also </li> end tag is optional
List of some fruits
- Mango
- Orange
List of some colors
- Red
- Green
12.2 Nesting Lists (ordered list with unordered list)
Structure
- 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
- Mango
- Orange
- Mango
- Orange
- Mango
- Orange
- Mango
- Orange
- Mango
- Orange
12.2 Nesting Lists
- Primary color
- Red
- Green
- Blue
- Secondary color
- White
- Orange
- Yellow
Creating Table
12.2 table tag
<table></table>or
<table><tr><td></td></tr></table>
tr: (table row) tr create table row
td: (table data) td create table column
Structure
| items | color |
| rose | red |
| milk | white |
table tag and its attributes
border:
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
bordercolor:
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
bordercolorlight:
bordercolordark:
#To see effect open with internet Explorer
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
bgcolor:
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
width:
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
height:
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
align:
align: left, center, right
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
cellspacing: (space between table cells)
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
cellpadding: (padding arround cell content)
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
th: table head
| heading1 | heading2 |
|---|---|
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
thead, tbody
| heading1 | heading2 |
|---|---|
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
colspan
| Table | |
|---|---|
| row1 column1 | row1 column2 |
| row2 column1 | row2 column2 |
| Comprative rate chart | ||
|---|---|---|
| Product | 2021 | 2022 |
| Milk | 40.00 | 50.00 |
| Rice | 30.00 | 40.00 |
rowspan
| District | Blocks |
|---|---|
| Katihar | Azamnagar |
| Barsoi | |
| Kadwa |
| Class Routine | |||
|---|---|---|---|
| Day | Time | ||
| 10to12 | 12to1 | 1to3 | |
| Sun | Eng | Launch | Math |
| Mon | Eng | Math | |
| Tue | Eng | Math | |
forms
1.1 form tag
<form></form>Form tag and its child tags
There is many tags inside the form tag
input
<input>textarea
<textarea></textarea>select
option
<select><option></option></select>button
<button></button>form tag and its attributes
action:
<form action=”…”></form>action= get or post
get: non-secure data
post: secure data
input tag and its attributes
name:
input name=”…”type:
input type=”…”type: text
type & size:
input type=”…” size=”…”type: text size=”…”
# size= size(length) of input box
type & maxlength:
input type=”…” maxlength=”…”type: text maxlength=”…”
type:
input type=”…”type: password
type:
input type=”…”type: button
type:
input type=”…”type: submit
type:
input type=”…”type: reset
type:
input type=”…”type: checkbox
type:
input type=”…”type: radio
type and value:
input type=”…” value=”…”type and value:
input type=”…” value=”…”type and value:
input type=”…” value=”…”type, name and value:
input type=”…” name=”…”value=”…”type, title and value:
input type=”…” title=”…”value=”…”textarea and its attributes
name:
textarea name=”…”cols:
textarea cols=”…”rows:
textarea rows=”…”cols, rows and name:
textarea cols=”…” rows=”…” name=”text”default text:
textarea…/textareawrap:
textarea wrap=”value” value= soft (virtual), hard (physical)#Effect on database
soft: enter have no effect
hard: enter force to line break
#Display other website or page Content
iframe and its attributes
src: source
width:, height:
title:
frameborder:
allowfullscreen
allow:
multi attributes:
#Display other website or page Content
embed and its attributes
src: source
type=”video/mp4
noembed
audio sound
<audio></audio>Audio tag and its attributes
src: (source) and type:
<audio src=”abc.mp3″ type=”audio/mp3″></audio>#supported file format: .mp3, .wav, .ogg
video
videoframeset
framesetfremset does not have a body tag
* means rest space
The Cow
SEO
html tag and its attributes
lang: (Language)
<html lang=”language-code”> … <html>
code: en = english