- HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It describes the structure of a web page semantically through elements like headings, paragraphs, lists, links, etc.
- The basic structure of an HTML document includes a head section for metadata, and a body section that contains the visible page content. Common elements in the body are headings, paragraphs, links, images, lists, tables, and forms.
- HTML uses tags enclosed in angle brackets to define and structure different parts of a web page like <html>, <head>, <body>, <p>, <img>, etc. Attributes provide additional information about tags.
The code for an ordered list is:<ol><li>Item 1</li> <li>Item 2</li><li>Item 3</li></ol
1.
2. -
- By Varsha Kumari
Assistant Professor
CEA Department, GLA University Mathura
3. What is HTML ?
HTML History
HTMLTag
HTML attributes
4. 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.
5. 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.
6. 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
7. 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.
8. 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
9. 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
10. 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"
12. 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>
13. <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
14. <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
15. 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.
16. 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>
20. 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
21. <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
22. 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>
23. 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;
}
24. 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-transform:uppercase;
text-indent:30px;
margin:30px;
text-align:center;
background-color:gray;
}
25. Attributes of <div> tag used in CSS is given below:
div {
border:5px solid red;
color:yellow;
text-transform:uppercase;
text-align: center;
font-size:25px
margin:30px;
float:right;
background-color:gray;
}
26. 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>
27. Attributes of <hr> tag used in CSS is given below:
hr {
display: block;
color:yellow;
margin:30px;
border-width:5px
}
28. <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>
33. 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
34. 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.
36. 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>
37. 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
38. 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>
39. 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>
41. 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
44. 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)
45. 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
46. 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
47. An “Definition list” means a list of items with a description or
definition of each item.
Example:
Definition List
Definition term
data definition
48. 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.
49. 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
50. Type of unordered list :
Type of ordered list:
54. 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.
55. 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.
57. 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
58. 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.
59. <html>
<head>
<title> Table Example</title>
</head>
<body>
<table border="1">
<tr> <th colspan=2> Fruits and
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>
colspan denotes the number of columns a
cell should span.
60. <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="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.
62. 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
63. 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>
64. 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
66. 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>
67. 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>
68. 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>
69. <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.
70. 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>
71. 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>
72. 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>
73. 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”>
74. 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”>
75. 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”>
79. 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.
80. 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
82. 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.
89. 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>
93. 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
94. 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.
95.
96. 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.
98. 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.