1. HTML
Hyper Text Markup Language- Developed by Tim Berners Lee in
1980.
Main purpose was to share information over network.
HTML standards are controlled by World Wide Web
Consortium(W3C)- org founded in 1994.
It defines a set of commands for creation of hypertext documents.
It is mainly used for creation of Web pages.
HTML pages are saved as plain text documents.
The file must be saved with ‘.htm’ or ‘.html’ estension
2. TAGS AND ATTRIBUTES
Tags are commands for defining HTML documents.
Purposes of Tags are:
create overall structure
text formatting
give hyperlinks
Display graphics
Create tables, lists, input forms etc
There are 2 types of tags- Container & Empty tags.
Container tags have starting & ending tags, while Empty tags have no ending tags.
Attributes are parameters for providing additional information within a tag.
For attributes we can specify values.
Attribute values specify certain characteristics of the tags.
For e.g.:- <Body bgcolor =“red”>. Here body is a tag, bgcolor is its attribute & red is
the value for the attribute.
3. Different types
of Tags
A. Structure tags
B. Common tags
C. Text formatting tags
D. Tags for listing
E. Tags for table
F. Tags for forms and
frames
A. Structure tags
1. <html>
Beginning of html document
Indicates that document follows HTML
format
Container tag:- <html> </html>
2. <head>
Defines head section
Includes document title
Container tag:- <head> </head>
3. <title>
Enclose document title
It displayed in the title bar of the browser
window
Container tag:- <title> xxx </title>
4. 4. <Body>
This section contain the content displayed in the browser window
Container tags <body> </body>
Main attributes are:- bgcolor and background.
Bgcolor is used to change the background color of webpage. The
default color is white.
Background is used to inserting image as background.
Note:- we should specify the complete path of the image file as
value for background attribute. To get complete path, Right click on
the picture→ properties→copy the full address given in the
location→paste in the notepad.
E.g.:<body background=“C:UsersPublicPicturesSample
Picturesname of the picture.jpg/.png”>
Other than html, head and title tags all other tags like <p>, <font>,
<li> etc, are contained within body tag.
5. B. Common tags
1. Paragraph - <p> tag:-
Indicates paragraph separation.
container tag <p> </p>
Every paragraph should enclosed within opening <p> and closing</p>
Its attribute is Align, values are Left, Right & Center
eg:- <p align = “center”> xxxxx </p>
2. Break <br> tag:-
It creats line break btwn 1 line & another.
It is empty tag
Eg:- <body> name <br> DOB <br> address
6. 3. Horizontal lines <hr> tag:-
Used to draw horizontal lines.
Empty tag.
Attributes are Size, Width & Color
Size specifies the line thickness in pixels.
Width determines line length in pixels or %
Color specifies line color
Eg:- <body> Kottayam <hr width = “50%” size = “10” color = “red”>
</body>
7. 4. <img> tag:-
Used to insert images in webpage.
Attribute is Src, Width & Height.
Src takes image file ( path & file name) as value
It is an empty tag. But also used as container tag.
Note:- we should specify the complete path & name of the image file as value. To get
complete path, Right click on the picture→ properties→copy the full address given in the
location→paste in the notepad & also give file name . Jpg/.png
E.g.:<body > <img src =“C:UsersPublicPicturesSample Picturesname of the
picture.jpg/.png” width = “150” height = “100”> </body>
8. 5. Audio & video files
Audio file are saved in formats like .wav, .mp3.
Like image we have to specify complete path.
Tag for audio is <bg sound>.
Attribute is Src.
Tag for Video file is also <img>.
Attribute is dynsrc.
9. C. Text formatting tags
1. <center> tag:-
It is used to centralize the text.
Text, table, image etc can be centralized.
Container tag.
E.g.:- <body> <center> kottayam </center> </body>
2. Heading tags <h1>:-
Used to give headings in six size.
It ranges from <h1> to <h6>
<h1> produces the largest heading & <h6> produces the smallest heading.
Attribute is Align & values are Left, Right & Center.
10. 3. Bold<b>, italics<i> & underline<u> tags:-
<b> tag display the content enclosed in bold face.
<i> display the text enclosed in italics.
<u> underlines the content enclosed.
These are container tags.
4. Font tags <font>:-
It defines the font characteristics of the text.
Attributes are face, size & color.
Container tag
Eg:- <body> <font face = “arial” size = “3” color = “red”> kottayam
</font> </body>
11. 5. Superscript <sup> & subscript <sub> tags:-
Superscript is the small letter / number above a particular letter / number.
Eg:- superscript is 25. The number 5 above the number 2 is an example of superscript.
The tag used for superscript is <sup>
Subscript is the text which a small letter/number is written after a particular
letter/number. It hangs below its letter or number. It is used when writing chemical
compounds.
Eg:- subscript is N2, H2O
The tag used for subscript is <sub>.
These are container tags.
Eg:- <body> class: 12 <sup> th </sup> std <br> mail: jsree <sub>-</sub>
8@gmail.com</body>C:UsersBJSJSJMDesktopMY.HTM
6. <Marquee> tag:-
By using these tags we can see the characters moving from one side to another.
Attribute is ‘Direction’.
Values are Left & Right.
Eg:- <body> <marquee direction = “right”> welcome </marquee> </body>
C:UsersBJSJSJMDesktopMY1.HTM
12. D.Tags for listing
1. Unordered List <ul>:-
It is used to arrange the items with bullet marks.
It is container tag. Unordered list is created btw <ul> & </ul>.
Attributes is Type.
Values are Square, Circle or Disc. Default type is disc.
2. Ordered list <ol>:-
It is also known as numbered lists.
In this the list items are numbered in sequence.
It is also container tag.
Attributes are Type & Start.
Type indicates the type of ordering in ordered list. Default is Arabic number (1,2,3)
Value for type attributes are 1, A, a, I,i.
Start specifies the starting number for the list items.
13. 3. List <li>:-
It is used to specify list items.
Each item in the list is given along with <li> tag.
Empty tag.
4. Nesting list:-
It means we can nest a list inside another list
Each nested list will be numbered seperately
14. <BODY> <B> <I> <U> <FONT FACE=" ARIAL BLACK" SIZE = "10" COLOR
= "RED">
<MARQUEE DIRECTION = "LEFT"> PRODUCT MIX OF
CADBURY</MARQUEE> </FONT> </U> </I> </B>
<CENTER> <IMG SRC="POPUP.JPG" WIDTH = "350" HEIGHT = "300">
</CENTER>
<UL TYPE = "SQUARE"> <FONT FACE ="ARIAL" SIZE = "5" COLOR =
"GREEN"> <LI> CHOCLATE </FONT>
<FONT FACE = "ELEPHANT" SIZE = "3" COLOR = BLUE>
<OL TYPE = "A"> <LI> DAIRY MILK <LI> CADBURY SILK <LI> 5 STAR
<LI> GEMS </OL> </FONT>
<FONT FACE ="ARIAL" SIZE = "5" COLOR ="GREEN"> <LI> BISCUITS
</FONT> <FONT FACE = "ELEPHANT" SIZE = "3" COLOR = BLUE>
<OL TYPE = "A"> <LI> OREO </OL> </FONT>
<FONT FACE ="ARIAL" SIZE = "5" COLOR="GREEN"> <LI> CANDY
</FONT>
<FONT FACE = "ELEPHANT" SIZE = "3" COLOR = BLUE> <OL TYPE = "A">
<LI> HALLS <LI> CHOCLAIRS </OL> </FONT> </BODY>
15. links
Links are elements in a webpage which can be selected by clicking on it.
It generally appear as underlined texts or icons.
When we click on a link we are transferred to another html page, sound, video
or internet.
For linking another page we use Anchor tag <A> </A>
HREF is the attribute which specifies the link’s destination
For eg:- <body> <a href =“my.html”> click here to go to my.html</a> <br>
<a href = https://www.google.co.in/>google </a> </body>
16. tables
A table is made up of Rows and colums (Cells).
Tags used for creating a table are :- <table>, <tr>, <th>,<td>.
<Table> :- used to tell the browser that “this is a table”. Attributes are, Border, cell
padding and cell spacing
<tr> :- table row defines a horizontal row of <td> (table data) cells.
<td> :- Specifies an individual block or cell in a table row.
<th> :- it specifies the row heading. Text will be in Bold letters
Common attributes are Size, Width, Height, bgcolor.
CELLSPACING controls the space between table cells. Although there is no official
default, browsers usually use a default of 2.
For eg:- <table border="1" cellspacing="5"> <tr> <td>cell 1</td> </tr> <tr> <td>cell2</td> </tr> </table>
CELLPADDING sets the amount of space between the contents of the cell and the cell
wall. The default is 1. CELLPADDING is usually more effective than CELLSPACING
for spreading out the contents of the table.
For eg:- <table border="1" cellpadding="10"> <tr> <td> cell 3</td> </tr> <tr> <td>cell 4</td> </tr> </table>
17. Both col span and row span are attributes of the two table-cell elements,
<th> and <td>.
They provide the same functionality as "merge cell" in spreadsheet programs like Exce
The rowspan attribute specifies the number of rows a cell should span
The colspan attribute defines the number of columns a cell should
span.
<table border="1">
<tr> <th rowspan="2">State Bank of India</th>
<th colspan="3"> Rate of Interest</th></tr>
<tr>
<td>Less than Rs.50,000</td>
<td>Between Rs.50,000 and 1 Lakh</td>
<td>Above 1 Lakh</td>
</tr>
<tr> <td>Less than 5Years</td> <td>8</td>
<td>8.5</td> <td>9</td></tr>
<tr> <td>Between 5 & 10years</td> <td>8.5</td>
<td>9</td> <td>9.5</td> </tr>
<tr> <td>Above 10years</td><td>9</td>
<td>9.5</td> <td>10</td> </tr>
18. Style tag
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in
a browser.
Each HTML document can contain multiple <style> tags.
It is container tag
Attribute Value Description
media
media_
query
Specifies what media/device the
media resource is optimized for
type text/css
Specifies the media type of the
<style> tag
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
19. 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.
This example sets the text color of the <h1> element to blue:
Example:- <h1 style="color:blue;">This is a Blue Heading</h1>
2. Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style>
element:
Example:- <!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.
With an external style sheet, you can change the look of an entire web site, by
changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:
21. forms
A form is the result of increased desire to collect information from users.
There are two basic purposes as to why a form is created:
1. Gather data.
2. Pass that data to a script where something can be done with it.
The basic construction of a HTML form is as follows:-
<form> - begin a form
<input> - type of input desired whether its text or password etc.
</form> - end a form
The attributes of <form> tags are Action and Method
Action – URL - Specifies a URI/URL of the back-end script that will process the form
Method – get or post - Specifies the HTTP method to use when the form is submitted.
The order forms, guest books, feedback forms etc that we see in websites are essentially
HTML forms.
<Input> tag is used to create a number of input controls such as textbox, checkbox, radio
button, select box etc.
22. Input Type = “Text "and “Password”
The most common type of form
<input> is text.
Every input needs a name and
value for that name.
Eg:- <html> <form><input type = “text”
name = “name” value = “name”>
</form> form.html
We can specify the size of the text
input box.
Default size is 20
If we want we can specify how
many characters a user can input.
For eg:- <html> <form> <input
type=“text” name = “name” size =
“30” maxlength = “10”> </form>
form2.html
The another type of form <input>
is password.
It displays **** instead of the
actual input.
Eg:- <html><form> <input
type=“password”
name=“password”> </form>
form1.html
23. Input type = “Radio” and “Check Box”
Radio Buttons
o It allow the user to choose one of
several options.
o Like text and password, here we
give, <input type=“radio”>
o Attribute is checked
Eg:- <form> <input type="radio"
name="select your option"
value="1"> debit card <br>
<input type="radio" name="select
your option" value="2"> credit
card<br>
<input type="radio" name="select
your option" value="3"> net
banking </form> form4.html
Check Box
o It allow the user to choose one or more
or all several options.
o <input type =“checkbox”>
o Attribute is checked
Eg:- <form action="form.html"> select
which one you have <br>
<input type="checkbox"
name="vehicle" value="yes"> I have a
bike<br>
<input type="checkbox"
name="vehicle" value="yes"> I have a
car<br>
<input type="checkbox"
name="vehicle" value="yes"> no
vehicle <br>
<input type="submit" value="Submit">
</form> cb.html
24. Pull down list (Select Box)
Next type of input is pull down list.
For this we use <select> tag instead of <input tag>
<select> tag is a container tag
We have to add <option> tag and should give a value for each option.
Eg:- <select> select your country
<option value="Brazil"> Brazil
<option value="China"> China
<option value="India"> India
<option value="US">US
</select> sb.html
25. Submit and Reset Button
Buttons are defined by changing the input element’s type attribute.
There is two different kinds of buttons – the submit button and the
reset button.
The submit button is used whenever you want to submit a form.
The reset button is used to clear al inputs by the user.
Eg:- <form action="https://mail.google.com" method="post">
email: <input type="text" name="e-mail id"> <br>
password: <input type="password" name="password"
maxlength="10"><br>
<input type="reset" value="Clear form">
<input type="submit" value="Submit now">
</form>button.html
26. Frames
It allows us to divide the page into several rectangular areas and to display a separate document in
each rectangle.
The <frame> tag defines one particular window (frame) within a <frameset>.
The <frameset> tag defines a frameset.
The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a
separate document.
The <frameset> element specifies HOW MANY columns or rows there will be in the frameset,
and HOW MUCH percentage/pixels of space will occupy each of them.
Attributes of <frameset> is Cols and Rows.
Cols determines vertical frames
Rows determines horiontal frames
Attribute of <frame> is Src, It specify the path
<frameset> tag is a container tag
<frame> tag is empty tag
Eg:- <frameset cols="25%,50%,25%">
<frame src="form.html">
<frame src="table.html">
<frame src="button.html">
27. Attribute Value Description
frameborder
0
1
Not supported in HTML5.
Specifies whether or not to display a border around a
frame
longdesc URL
Not supported in HTML5.
Specifies a page that contains a long description of the
content of a frame
marginheight pixels
Not supported in HTML5.
Specifies the top and bottom margins of a frame
marginwidth pixels
Not supported in HTML5.
Specifies the left and right margins of a frame
name text
Not supported in HTML5.
Specifies the name of a frame
noresize noresize
Not supported in HTML5.
Specifies that a frame is not resizable
scrolling
yes
no
auto
Not supported in HTML5.
Specifies whether or not to display scrollbars in a frame
src URL
Not supported in HTML5.
Specifies the URL of the document to show in a frame
Optional Attributes
