Html

-
- By Varsha Kumari
Assistant Professor
CEA Department, GLA University Mathura

What is HTML ?
HTML History
HTMLTag
HTML attributes

HTML stands for
Hyper Text Markup Language
HTML is the standard markup language used
for creating web pages and describes the
structure of web pages.

It is a document layout and hyperlink specification language
that defines the syntax and placement of various media like
text, images etc. to be displayed by the browser.

Tim Berners-Lee invented HTML in 1991
The HTML specifications for standard are approved by an
international standard organization – World Wide Web
consortium. (W3C).
The most recent version of HTML is version 5.2

1. text editor like notepad++, notepad or
textedit used to create and html page
2. Write the html code
3. Then save the document as filename.html
4. View the document on the browser.

HTML tags are predefined elements that describes
the content of the document
 HTML tags normally come in pairs like <p> and
</p>
 The first tag in a pair is the start tag, the second tag
is the end tag

 Tags may be paired or singleton.
 Some of the paired tags are
<html> </html>, <body></body>, <title></title>,
<b></b>, <i></i>, <font></font>, etc.
 <br>, <img>, <hr>, <input>, etc. are singleton tags

 HTML attributes adds additional information about HTML
elements.
 Attributes are always specified in the opening tag
 Attributes are written in name/value pairs like: name=“value”
 Example:
<img src="logo.gif" alt="logo" />
Attribute alt with value "logo"

HTML Markup tags
Structure of HTML document-head,
body section

Web pages/ document are text files containing HTML
HTML – Hyper Text Markup Language
A notation for describing
document structure (semantic markup)
formatting (presentation markup)
The markup tags provide information about the page content structure:
<center><font><body><head>

<html>
</html>
<head>
<title>My First HTML page</title>
</head>
<body>
<h1> Welcome to my first web page...</h1>
<br>here text follows…..
</body>
HTML head section
HTML body section

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my first web
page...</h1>
<br>here text follows…..
</body>
</html>
HTML head section
HTML body section

The <head> Section contains metadata and specific information about
the web page that is not displayed to the user. <head> includes:
1. <Title> : title of the web page
2. <Meta> : additional information about the document
3. <Script> : contains script code
4. <Style> : contains CSS code
5. <noscript> : contain alternate text if script is disabled.

The <body> contains the data to be displayed on the web page.
Body section include
1. Text Styling and Formatting Tags
2. Hyperlinks: <a>, Hyperlinks and Sections
3. Images: <img>
4. Lists: <ol>, <ul> and <dl>
5. Table
6. Form
7. Other tags like <div> and <span>

Formating tags,
Other basic tags in HTML

<body
text="white"
bgcolor="black"
background="darkbg.gif"
link="red" vlink="maroon" alink="yellow“
leftmargin=“60px” topmargin=“60px”
>
Your document text goes here.
</body>

<html><head>
<style type="text/css">
a:link { color: red}
a:visited { color: maroon }
a:active { color: yellow }
body { color: white;
background-color: black;
background-image: url(darkbg.gif) }
</style>
</head>
<body>
Your document text goes here.
</body></html>

Formatting tags are:
• Bold
• Underline
• Italics
<b>GLA University</b> text will appear as bold
<u>GLA University</u> text will appear as underlined
<i>GLA University</i> text will appear as italicized

<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

 Heading Tags (<h1> -- <h6>)
 Paragraph Tag : <p>
 Sections: <div> Tag
<h1 align=“left”>Heading 1</h1>
<h2 align=“center”>Sub heading 2</h2>
<h3 align=“right”>Sub heading 3</h3>
<p align= “left”>This is my first paragraph</p>
<p align=“right”>This is my second paragraph</p>
<div align=“center”>This is a div </div>

 attributes of <h1> tag used in CSS is given below:
h1 {
text-align:right; // left/right/center
color:yellow;
text-transform:uppercase;
text-indent:30px;
margin:30px;
text-align:center;
font-size:12px;
font-weight: bold;
}

 The align attribute on <p> tags is obsolete and shouldn't be used. And
attributes of <p> tag used in CSS is given below:
p {
display: block;
color:yellow;
text-indent:30px;
margin:30px;
text-align:center;
background-color:gray;
}

 Attributes of <div> tag used in CSS is given below:
div {
border:5px solid red;
color:yellow;
text-align: center;
font-size:25px
margin:30px;
float:right;
background-color:gray;
}

 Inserting line break
 Inserting Horizontal line
 <Center> tag:
Hello <br> Welcome to my first web page
Hello <hr color=“red”> Welcome to my first web page
<center>Welcome to my first web page</center>

 Attributes of <hr> tag used in CSS is given below:
hr {
display: block;
color:yellow;
margin:30px;
border-width:5px
}

 <font> tag:
 Range of font size varies from 1-7 . If we want font size greater than 7
then we use the CSS
<font size=“14” color=“red” face=“algerian”> Hello</font>
<head>
<style type="text/css">
h1 {font-size:800%;}
h2 {font-size:200%;}
b {font-family: Constantia; color: blue; font-size:200%;}
</style>
</head>

 Inserting comment
 Inserting <title>
 <Pre> tag:
 <marquee> tag:
<!- -Comment Text-- >
<title>My home page</title>
<PRE>
<b> NAME AGE</b>
dip 27
raju 16 </PRE>
<marquee direction = "up/down/left/right">GLA University</marquee>

 Inserting sound
 Inserting movie
<audio controls>
<source src="a.wav" type="audio/wav">
</audio>
<video width="320" height="240" controls>
<source src="b.mp4" type="video/mp4">
</video>

££British Pound
€€Euro
""Quotation Mark
¥¥Japanese Yen
——Em Dash
 Non-breaking Space
&&Ampersand
>>Greater Than
<<Less Than
™™Trademark Sign
®®Registered Trademark Sign
©©Copyright Sign
SymbolHTML EntitySymbol Name

Hyperlink : anchor tag
Anchor tag attributes
Image tag
Image attributes

A hyperlink can be created by using anchor tag
Anchor tag is denoted by <a>….</a>
<a href = “URL_webpage” target="_blank|_self|_parent|_top|framename">
Anchor tag attributes
1. href: denotes the URL of the linked web page
2. target: denotes where to open the link on same window or new
window

Every hyperlink Appears in blue color and
underlined
To change these link colors, there are three
attributes with the <BODY > tag:
•Link: changes default color of the hyperlink
•Alink: changes color of the hyperlink when it is
active.
•Vlink: changes color of the hyperlink after
visiting it.

<html>
<head>
<title>Anchor Example</title>
</head>
<body>
<a href=“http://gla.ac.in “
target=“_Blank” >
GLA University
</a>
</body>
</html>

 Link to the document a1.html present on the same folder:
 Link to the document a1.html present on the different folder:
 Link to the document to an external website:
 Link to the document to an email:
<a href=“a1.html">click for a1 web page</a>
<a href=“/C:/Users/PC/Desktop/capture/a1.html”> click for a1
web page</a>
<a href="http://www.facebook.com" target= "_blank">click</a>
<a href="mailto:abc@gmail.com”>Email</a>

A bookmark is a hypertext which when clicked, instead of opening
a new document, jumps to another portion of the same document.
Step 1: Mark the location to be jumped using name or id attribute.
syntax: <A name= “location_name”>
Step 2 : create hypelink for this location using specified name .
syntax: <A href= “filename.html#location_name”>……..</A>
OR : < A href= “#location_name”>………………</A>
For external document reference
For internal document reference

A bookmark is a hypertext which when clicked, instead of opening
a new document, jumps to another portion of the same document.
<body><h1>Table of Contents</h1>
<p><a href="#section1">Web Introduction</a><br>
<a href="#section2"> Web history</A><br><br>
<h2 name="section1"> Web Introduction</h2>
... Section 1 Introduction to web follows here ...
<h2 name="section2">Web history</h2>
... Section 2 web history follows here …</body>

Images can be displayed on a webpage using
the <img> tag
The source of the image to be displayed is
specified in the src attribute.
<img>

<html>
<head>
<title> Image Example</title>
</head>
<body>
<img
src="/C:/Users/PC/Desktop/capture/a2.jpg"
height=“100” width=“250”
alt=“Computer”>
</body>
</html>
<img src= “http://planningcommission.nic.in/ images/planimg.jpg”>
Image is taken from Website

Img tag attributes
1. src : Location of image file
2. Alt: Alternate text for display
3. height : Number of pixels of the height
4. width: Number of pixels of the width
5. border : Size of border, 0 for no border
6. Align : alignment of text around the image
(left/right/top/bottom/middle)
<img src=“/C:/Users/PC/Desktop/capture/a2.jpg” height=“100”
width=“250” alt=“My Computer” border=“0”>
Image is taken from computer hard disk

<html>
<head>
<title> Image Example</title>
</head>
<body>
<img
src="/C:/Users/PC/Desktop/capture/a
2.jpg" height=“100” width=“250”
alt=“Computer”
align=“bottom”>This is my computer
</body>
</html>

Lists
Ordered List
Unordered List
Definition List

 Lists are used to display the text on a
web page in the form of listings.
Lists are of three types:
1. Unordered List (No specific Order)
2. Ordered List (Specific Order)
3. Definition List (Some data followed by
its definition)

An “unordered list” means that the items are rendered
with a leading symbol that implies no specific order of
items other than by virtue of location within the list.
Example:
container for an unordered list of items
Contains the Content for each list item

An “ordered list” means that the items are rendered
with a leading sequence of numbers or letters.
Example:
Contains the Content for each list item
container for an ordered list of items

An “Definition list” means a list of items with a description or
definition of each item.
Example:
Definition List
Definition term
data definition

 For ordered list, we use <ol> </ol> tags.
 For unordered list, we use <ul> </ul> tags.
 For data definition list, we use <dl> </dl> tags.
 The items are listed within the <li> tag in the case of ordered
and unordered list.
 For data definition list, the data term is listed using <dt> </dt>
tag, and the definition is listed using <dd> </dd> tag.

 Type attribute of ordered list :
type=A(uppercase)/a(lowercase)/1(numbers)/I(uppercase
roman number)/i(lowercase roman number)
 Start attribute in ordered List is used to start counting from a
specified number , By default, an ordered list will start
counting from 1
 Type of unordered list : disc/circle/square/none

 Type of unordered list :
 Type of ordered list:

TableTag
Table attributes
rowspan
colspan

Table is used in Web pages for the systematic arrangement of information in
tabular format.
It is a two dimensional matrixes, consisting of rows and columns.
All table related tags are included between the <table>….</table> tag
Each row is described between <tr>…</tr> tag
And each column is described between <td>..</td> tag or <th>… </th> tag
Table heading can be written between <caption> ………</caption> tags.

Table row can be of two types:
Header Rows: A table header row
is defined using <th> … </th> tag.
The content of a table header row is
automatically centered and appear in
bold face.
Data Rows: individual data cells
are placed in between <td> … </td>
tag and left justified by default.

<html>
<head>
<title> Table Example</title>
</head>
<body>
<table border="1">
<tr> <th> Fruits</th><th> Color</th></tr>
<tr> <td bgcolor="red"> Apple</td><td>
Red</td></tr>
<tr> <td bgcolor="yellow"> Mango</td><td>
Yellow</td></tr>
<tr> <td bgcolor="Green"> Guava</td><td>
Green</td></tr>
</table>
</body>
</html>

1. border: The border attribute specifies the border
of the table in pixels
2. bgcolor: The bgcolor attribute specifies the
background color of the table row, or table data,
or the table as a whole.
3. Cellspacing: denote the empty space between
cells
4. Cellpadding: denotes the empty space around
the cell content

 ALIGN : specifies Horizontal alignment. Its value can be left/right /
center.
VALIGN: specifies vertical alignment of cell contents. it accepts the
values TOP, MIDDLE or BOTTOM.
WIDTH: specifies the width to a specific number of pixels or to a
percentage of the available screen width. By default adjusted based on
the cell data value.
COLSPAN: instructs the browser to take up more than one column as
specified.
ROWSPAN: instructs the browser to take up more than one row as
specified.

<html>
<head>
</head>
<body>
<table border="1">
<tr> <th colspan=2> Fruits and
Color</th></tr>
Red</td></tr>
<tr> <td bgcolor="yellow"> Mango</td><td>
Yellow</td></tr>
<tr> <td bgcolor="Green"> Guava</td><td>
Green</td></tr>
</table>
</body>
</html>
colspan denotes the number of columns a
cell should span.

<html>
<head>
</head>
<body>
<table border="1">
<tr> <th> Fruits </th> <th> Color</th></tr>
Red</td></tr>
<tr> <td bgcolor="Green"> Grapes</td><td
rowspan=2> Green</td></tr>
<tr> <td bgcolor="Green"> Guava</td></tr>
</table>
</body>
</html>
Rowspan denotes the number of rows a
cell should span.

formTag
form attributes
Form control elements

Form is used to input data from the user and
send the data to the server, Data is entered into a
form using control elements
All elements in the form must be defined
between the <FORM> and </FORM> tags.
the form may contain other elements such as
headings, paragraphs, tables, and so on.
All the input data is sent to server on clicking the
“submit” button

 A form is created by the form tag:
 It’s attributes are: Name, Method(Get/Post), Action, target
<form> …Form control Elements…….. </form>
<form name="myForm" method="post” action=“a.php“>
…
…
</form>

 A form is created by the tag:
<Form> attributes are: Name, Method(Get/Post),Action, target
<form> …Form control Elements…….. </form>
<form name="myForm" method="post” action=“a.php“>
…
…
</form>
Specifies how the form data should
be sent – via GET or POST request
Specifies where the form data should be
sent
Specifies name of the form

Textfield
password
Radio Buttons
Check Boxes
Drop down Boxes
Textarea
Submit Buttons
Reset, etc.

 Textfield: specifies single line textual data
<input type = “text” size= 20 maxlength =50 name =“t1”>
< form>
First name:< input type="text" name="firstname" /> <br>
Last name:< input type="text" name="lastname" />
< /form>

default width of a text field is 20 characters.
< form>
First name:< input type="text" name="firstname" /> <br>
Last name:< input type="text" name="lastname" />
< /form>

 Password: specifies the password data input. The characters in
a password field are masked (shown as asterisks or circles).
 example
<input type=“password” name=“t2”>
< form>
Password:< input type="password" name="p1" >
< /form>

<input type = "radio" name = "cpu" checked> CPU<br>
<input type = "radio" name = "cpu"> RAM<br>
<input type = "radio" name = "cpu"> DISK<br>
Radio button : are used to choose one of the multiple options. The value
of name attribute will be same for all the options.

 Checkbox: The checkboxes are used to specify true/false options by
clicking with mouse pointer.
< form>
< input type="checkbox" name="vehicle" value="Bike" > I have a bike<br >
< input type="checkbox" name="vehicle" value="Car" > I have a car
< /form>

 Textarea: defines a multi-line text input control.
 A text area can hold an unlimited number of characters, and size of a text
area is specified by the cols and rows attributes
<textarea rows="4" cols="50 ">
This tag is supported in all major browsers.
hi...i am text area control....you can write here in multiple
line...but remember do not exceed the limit
</textarea>

 Select/Dropdown box : Allows the user to select items from a pull-down
men
<select multiple>
<option selected>CPU</option>
<option>RAM </option>
<option>Disk </option>
<option>Monitor </option>
</select>

 Reset button: all the elements in the form are reset to their default
values.
 Submit: all the information entered by user is send to server
 Ordinary button
<input type = “reset” value= “clear form”>
<input type = “submit” value= “Done”>
<input type = “button” value= “logout”>

 File upload button: all the elements in the form are reset to their default
values.
 Hidden button: all the information entered by user is send to server
 image button
<input type = “file” name = “file1”>
<input type = “hidden” name = “userid ”value= “xyz”>
<input type = “image” src=“a.jpg” height = “20” width = “20”>

<html>
<head></head>
<body>
<h3>Log in Form</h3>
<form name="f1" method="post" action="a.jsp">
Username <input type="text" name="t1">
<br>
Password <input type="password" name="t2">
<br><br>
<input type="submit" value="OK">
</form>
</body>
</html>

frameset
frame attributes
Frames-row-wise and column-wise
iframe

A browser screen can be divided into two or
more HTML recognizable unique regions using
<FRAMESET> …..</FRAMESET> tags
Each unique region is called a frame. Each
frame is defined by <frame> tag.
Frame differs from the normal HTML file here
the BODY tag is replaced by the FRAMESET tag.

ROWS
divides the screen into multiple rows. Its values can be :
 A number of pixels
 Expressed as a percentage of the screen resolution
 The symbol * which indicates the remaining space
COLS
divides the screen into multiple columns. Its values can be :
 A number of pixels
 Expressed as a percentage of the screen resolution
 The symbol * which indicates the remaining space

SRC= “url” Indicate the URL of the document to be loaded in
to the frame
MARGINHEIGHT= “n” Specifies the amount of white space to be left at the
top and the bottom of the frame.
MARGINWIDTH= “n” Specifies the amount of white space to be left along
the side of the frame.
NAME= “name”
Gives a unique name to the frame so it can be
targeted by other documents.
NOSIZE Disables the frame resizing capability.
SCROLLING
Controls the appearance of horizontal and vertical
scrollbars in a frame. Its values : YES/NO/AUTO.

<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
Frame.html

<html>
<frameset rows=“500px,*">
<frame src=“top.html" />
<frame src=“bottom.html" />
</frameset>
</html>
Frame.html

<html>
<frameset rows="60%,*">
<frame src="a2.html" name="a">
<frameset Cols="50%,*">
<frame src="a2.html" name="b">
<frame src="second.html" name= "c">
</frameset>
</frameset>
</html>
Frame.html

The frame in which the HTML file is to be opened needs to be
named.
And the document from which the new document was navigated to
open in different frame is given by hyperlink
<frame name = “main”>
<A HREF= “ index.html” TARGET= “Main”> Visit US</A>

<html>
<body>
<iframe src="http://www.w3schools.com">
<p> Welcome to iframe </p>
</iframe>
</body>
</html>
Frame.html
The <iframe> creates an inline frame, which
embeds an independent HTML document into the
current document.

DOM
DOM example
BOM
BOM example

Document : any html page
Object: Elements and attributes that
can be written on html document. Eg
<html>, <head>, <body>, <form>,
<a>… etc
Model: Tree Representation of html
document
Image is taken from the source :
https://en.wikipedia.org/wiki/Document_Object_Mode
l#/media/File:DOM-model.svg

Entire document is a document node.
Each element in html page is the element node.
All text of the document is text node.
Each attributes of element in html page are attribute nodes.
Comments in html page are comment node
With the help of these nodes we can create node relationship.

The components of web pages are represented by objects that are
organized in hierarchical structure(parent-child relationship), called DOM
These objects have properties and methods that can be used to work
with web pages.
For a script to communicate one of the objects it must know the path
through the hierarchy to reach the object, so it can call one of the methods
or set one of its property values.

Ex
document.form1.firstname.value
Document.bgcolor=“lightgreen”
Document.title=“new title is my second web page”
Document.write(“<h1>hello</h1>”);

The browser object model (BOM) is a hierarchy of browser objects that
are used to manipulate methods and properties associated with the Web
browser itself.
BOM include the window object, navigator object, screen object,
history, location object, and the document object.
Root node of the object hierarchy is the windows object.
The Document Object consists of objects that are used to manipulate
methods and properties of the document or Web page loaded in the
browser window.

Html

More Related Content

What's hot

Similar to Html

More from VARSHAKUMARI49

Recently uploaded

Html