Unit-1
PART-1
HTML
Outline
1. Introduction to HTML – List
• What is a Web Page? – Anchor
• My First HTML Page – Image
• HTML Code Formatting 3. HTML Tables
2. Basic HTML Tags 4. HTML Forms
• Heading 5. XHTML
• Paragraph 6. Introduction to HTML 5
• Color
• Font
What is a Web Page?
• Web page is text file 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
Creating HTML Pages
• An HTML file must have an .htm or .html
file extension
• HTML files can be created with text editors:
– NotePad, NotePad ++, PSPad
• Or HTML editors (WYSIWYG Editors):
– Microsoft FrontPage
– Macromedia Dreamweaver
– Netscape Composer
– Visual Studio
First HTML Page
[Link]
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML Structure
• HTML is comprised of “elements” and “tags”
– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body>
</html>
• Tags <img
have attributes:
src="[Link]" alt="logo" />
• HTML describes structure using two main
sections: <head> and <body>
HTML Code Formatting
• The HTML source code should be formatted to
increase readability and facilitate debugging.
– Every block element should start on a new line.
– Every nested (block) element should be indented.
– Browsers ignore multiple whitespaces in the page source,
so formatting is harmless.
• For performance reasons, formatting can be
sacrificed
First HTML Page: Tags
<!DOCTYPE HTML>
Opening tag
<html>
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content inside.
First HTML Page: Header
HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Body
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
First HTML Page
[Link]
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Basic HTML Tags
1. Headings
2. Paragraph
3. Colors
4. Fonts
5. List
6. Anchor Tag
7. Image
8. Table
9. Form
1) Headings
Headings are important because search engines use
the headings to index the structure and content of
your web pages.
<h1> text </h1> -- largest of the six
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> -- smallest of the six
align="position" --left (default), center or right
2) <p> paragraph
<p> defines a paragraph
Add align="position" (left, center, right)
Multiple <p>'s do not create blank lines
Use <br> for blank line
Fully-specified text uses <p> and </p>, but </p> is
optional
3) Colors
Values for bgcolor and color
• many are predefined (red, blue, green, ...)
• all colors can be specified as a six character hexadecimal
value: #RRGGBB
• #FF0000 – red
• #888888 – gray
• #00FF00 –green
• #000000 – black
4) Fonts
The <font> tag specifies the font face, font size, and
color of text.
The <font> tag is not supported in HTML5.
<font color="red" size="2" face="Times Roman">
This is the text of line one </font>
<font color="green" size="4" face="Arial">
Line two contains this text </font>
<font color="#FF9933" size="6" face="Courier“>
The third line has this additional text </font>
5) List
Ordered List
1. Block-A a) Block-A A. Block-A i. Block-A I. Block-A
2. Block-B b) Block-B B. Block-B ii. Block-B II. Block-B
c) Block-C C. Block-C iii. Block-C III. Block-C
3. Block-C
d) Block-D D. Block-D iv. Block-D IV. Block-D
4. Block-D
Unordered o Block-A Block-A
List o Block-B Block-B
– Block-A o Block-C Block-C
– Block-B o Block-D Block-D
– Block-C
– Block-D
5.1) Ordered List
<ol>
<li> Item one </li>
Types:
<li> Item two </li>
<ol type="I" > Type = 1 (default)
<li> Sublist item one </li> Type = a
<li> Sublist item two </li> Type = A
<ol type="i"> Type = I
<li> Sub-sub list item one </li> Type = i
<li> Sub-sub list item two </li>
</ol> Output
</ol>
</ol>
5.2) Unordered List
<ul>
<li> One </li>
Types:
<li> Two </li>
<ul type="circle"> Type = disc (default)
<li> Three </li> Type = circle
<li> Four </li> Type = square
<ul type="square">
<li> Five </li>
<li> Six </li>
</ul> Output
</ul>
</ul>
6) <a> Anchor Tag (Hyperlinks)
The <a> tag defines a hyperlink, which is used to link from one
page to another.
Link to an absolute URL:
If you get spam, contact <a href="[Link]
Microsoft </a> to report the problem.
Link to a relative URL:
See these <a href=“./[Link]"> references </a>
concerning our fine products.
Link to a section within a URL:
<a href=“#reference">
Reference Section. </a>
7) Images
Syntax :
<img src=“PathToImage”/>
src is required
alt will specify the text to display if the Image not found
width, height may be in units of pixels or percentage of page
or frame
• width="357"
• height="50%“
Images (cont.)
<img src="[Link]" align="left" width="150" height="150"
alt="dolphin jump!">
align=position Image/Text Placement
Left Image on left edge; text flows to right of image
Right Image on right edge; text flows to left
Top Image is left; words align with top of image
Bottom Image is left; words align with bottom of image
Middle Words align with middle of image
Image (cont.) => align=“bottom”
Image (cont.) => align=“right”
8) Table
<table> table tag
<caption> optional table title
<table border=1> <tr> table row
<caption>Table Caption</caption> <th> table column header
<tr> <td> table data element
<th>Heading1</th>
<th>Heading2</th>
</tr>
<tr>
<td>Row1 Col1 Data</td>
<td>Row1 Col2 Data</td>
</tr>
<tr>
<td>Row2 Col1 Data</td>
<td>Row2 Col2 Data</td>
</tr>
</table>
Table Element Attributes
align=position -- left, center, right for table
border=number -- width in pixels of border (default 0)
cellspacing=number -- spacing in pixels between cells, default
about 3
cellpadding=number -- space in pixels between cell border and
table element, default about 1
width=number[%]-- width in pixels or percentage of page/frame
width
Table Row <tr> Attributes
Valid for the table row:
align -- left, center, right
valign -- top, middle, bottom
bgcolor -- background color
<table align="center" width="300" height="200">
<tr align="left" valign="top" bgcolor="red">
<td>One</td>
<td>Two</td>
</tr>
<tr align="center" valign="middle" bgcolor="lightblue">
<td>Three</td>
<td>Four</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td>Five</td>
<td>Six</td>
</tr>
</table>
Irregular Table
Valid for the table cell:
colspan b c
- how many columns this cell occupies
a
rowspan
- how many rows this cell occupies d
<table align="center" width="300" height="200" border="1">
<tr>
<td colspan="1" rowspan="2">a</td>
<td colspan="1" rowspan="1">b</td>
<td colspan="1" rowspan="1" >c</td>
</tr>
<tr>
<td colspan=“2" rowspan="1">d</td>
</tr>
</table>
9) HTML Form
<form> is just another kind of HTML tag
HTML forms are used to create GUIs on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio buttons,
drop-down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in
the form elements to the server
• The form’s parameters tell browser how to send the information to
the server (there are two different ways it could be sent)
The <form> Tag
The <form arguments> ... </form> tag encloses form
elements (and probably other HTML as well)
The arguments to form tell what to do with the user input
• action="url" (required)
• Specifies where to send the data when the Submit button is clicked
• method="get" (default)
• Form data is sent as a URL with ?form_data info appended to the
end
• Can be used only if data is all ASCII and not more than 100 characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
Input tags
• Text field
– Example: <input type=“text” name=“inputname”/>
• Password field
– Example: <input type=“password” name=“inputname”/>
• Radio buttons
– Example:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
• Check boxes
– Example:
<input type="checkbox" name="Roll1"> Roll No 1 <br/>
<input type="checkbox" name="Roll2"> Roll No 2 <br/>
<input type="checkbox" name="Roll3"> Roll No 3 <br/>
Input tags (cont.)
• Dropdown list
– <select> tag is used to create a drop-down list in HTML.
– <option> tags inside the <select> tag define the available options in
the list.
– Example:
<select>
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select>
– Example (multiple select):
<select multiple="multiple">
<option value=“1”>Rajkot</option>
<option value=“2”>Ahemdabad</option>
<option value=“3”>Surat</option>
</select>
Input tags (cont.)
• Text area
– <textarea> tag defines a multi-line text
input control.
– Example :
<textarea rows=“8” cols=“30”>
Darshan Institute of Engineering & Technology is a leading
institute ….
</textarea>
• Submit Button
– Submit button is used to submit the data
to the form action url.
• Example :
<input type=“submit” value=“Add City”>
REVISION ON HTML TAGS
Unit-1 HTML Basics
1. Evolution of HTML
2. Tags & Attributes
3. XHTML Structure
4. Text Formatting
Tags
5. Inserting Images
6. Creating
Hyperlinks
7. Generating Lists
8. Creating Tables
9. Creating Forms
10. Creating Frames
1. Evolution of Html
● Defined at CERN Laboratory in 1990’s using
SGML Notation.
● SGML - an ISO’s standard for describing text-
formatting languages
○ SGML - A meta-markup language
● Major focus is on presentation of content
○ Font-style,sizing,coloring,alignment,positioning,scrolling,image display etc.
● To make compatible to variety of computers on
different platforms on different computers
1. Evolution of Html - Versions of
Html,XHTML
● 1991 - Tim Berners Lee created www and Html 1
● 1993 - Mosaic and IE ran web contents with their own non-
standard html versions.
○ Leads to huge incompatibility with different platforms and other versions and
browsers
● 1994 - Tim-Berners Lee came up with W3C to build standards for
Html.
● W3C Releases of Html Standard versions
○ 1995 - Html 2.0
○ 1997 - Html 3.2
○ 1999 - Html 4.1
○ 2000 - XHTML 1.0 ,supported features of Html 4.1
○ 2001 - XHTML 2.0, deprecated Html 4.1
● 2004 - WHATWG - drafted HTML5
● 2008 - W3C recommended Html5
● 2017 -Html 5.2
1. Evolution of Html - Html vs
XHTML
HTML XHTML
Do not enforce strict Enforce strict syntactic rules
syntactic rules
Developers have flexibility Developers need to follow
to design their web pages syntactic rules to support
as per their own the web pages by all
perspective (which may not browsers
supportive for all browsers)
Lack of consistency and More consistency and strict
more freedom for
developer syntax rules
Errors are unidentified Errors can be validated
by developers before through XML processors
they post on website and validation tools
No provision for conversion Have provision to convert
from XHTML to HTML legacy Html docs to XHTML
docs.
2. Tags & Attributes
● Tags
○ Specify the behaviour of the content that could interpret on
web browser
○ Start tag <tagname>
○ End </tagname>
○ Example
■ <p> This is a paragraph tag </p>
○ Element
● Attributes
○ Specify additional meaning/behaviour to the applied tag
● Comments
● Note
○ Web browsers will allow text without using tags (nut not
recommended)
○ HTML is CASE INSENSITIVE.
3. XHTML Structure
4. Text Formatting Tags
● Paragraph tag <p>
● Line breaks
○ <br> - single tag
○ <hr> - single tag
● Preformatted text tag <pre>
○ Preserve white spaces and line breaks
● Headings
○ From <h1> to <h6> tags
● Other tags
○ <b> , <strong>, <i>, <em>, <u>, <del>, <mark>, <code>,
<sup>, <sub>
5. Inserting Images
● <img> tag
● To embed image(s) in browser
● To set as background wall paper to browser
● Syntax
○ <img src=“Image URL” alt=“some text” width=“Number in %/Number in pixel” height=“Number in
%/Number in pixel” />
6. Creating Hyperlinks
● <a> tag (Anchor)
● To link an internal/external document
● To download a document from web server
● Can beText link / Image link
● Syntax
○ <a href=“Internal/External Document link”>
Text/Image </a>
● Attributes
○ Target
■ _blank , _parent , _top, _self, framename
○ download
7. Creating Lists
● To generate list of items
with corresponding serial ←
Exampl
number
e
● Types
● Numbered/Ordered
● <ol> & <li> tags
● Unordered
● <ul> & <li> tags
● Description
● <dl>,<dt><dd> tags
● Attributes
○ Type - specify type of serial number
○ Start - specify list number position
to start
8. Creating Tables
● To generate table to insert data in
rows & columns ● <th> & <td> attributes
● ○ Rowspan -- merges two or more
Syntax
● <table att=val> rows in a column
■ Value: in pixels
<tr>
○ Colspan -- merges two or more
<td> some data
</td> columns in a row
■ Value: in pixels
</tr>
○ Align -- horizontal data alignment in
….
a cell
</table>
■ Value: left,center,right
● Table Attributes ○ Valign -- vertical data alignment in a
● Border -- table thickness cell
● Value: in pixels ■ Value: top ,bottom
● Cellspacing -- distance between
cells
● Value: in pixels
● Cellpadding -- distance between cell
data and cell border
● Value: in pixels
8. Creating Tables
← Sample
Code
8. Creating Tables -- rowspan,colspan,align,valign
Example
9. Creating Forms -- <form> tag
● Used to collect input from user/client browser in different ways
● Input Data will be submitted to server for further
processing/computation
● <input> tag
○ A nested tag inside form to collect Exampl
user’s input e:
● Syntax
■ <form att=val>
● <input type=”input type” att=val />
● ...
■ </form>
● Attributes
○ Action -- specifies the form-handler to receive form
○ Method -- type of method data to submit
● <label> -- a text to convey the purpose of input
element
9. Creating Forms -- Type of <input> elements
[Link] Input element Description
1 Text ,password -- <input 1 line alphanumeric /
type=”text” /> password text
2 Radio , checkbox -- <input Multiple / single choice
type=”radio” /> selection
3 File -- <input type=”file” /> To upload a File
4 Color -- <input type=”color” /> To pick a color
5 Date , week , time -- <input Select date/week/time
type=”date” />
6 Number , tel ,range -- <input Only numeric text with max,
type=”tel” /> min
7 Email , url -- <input Input emails and valid urls
type=”email” />
8 Submit, reset , button -- <input Buttons used to perform
type=”submit” /> action
A <textarea rows=”5” Multiple line alphanumeric
9. Creating Forms - An Example
form
10. Creating Frames
10. Creating Frames - Sample
code,output
10. Creating Frames - Using
●
<iframe>
To embed content from another
html source/media into current html
document
● Syntax:
○ <iframe att=val></iframe>
● Attributes
← Before
○ Src -- url/path to embed the click
content
○ Srcdoc -- allows to write html text
○ Name -- to give a name to iframe
○ Width & height -- in
pixels/percentage
○ Marginwidth & marginheight -- in
pixels
○ Frameborder -- Values : 0,1
-- yes,no,auto
○ Scrolling
-- apply
○ Sandbox restrictions to
block/embed the source content (for
malicious content) ← After
click