Unit II - HTML5 and Web
Page Structuring
Web
Technology
• The methods by which computers communicate with each
other through the use of markup languages and multimedia
packages is known as web technology.
Web
Technologies
HTML
SQL
XHTML
ASP
CSS
ADO
XML
PHP
JavaScript
.NET
VBSCRIPT
SMIL
DOM
SVG
DHTML
FLASH
AJAX
Java applets
E4X
Java servlets
WMLScrip
Java Server
t Page
How to choose a
Technology?
• Depends on:
• What is the type of content?
• Who is your audience?
• Who will modify your content?
• What are your Future Plans?
• Availability of technology?
• Your previous experience?
• Portability and Data sharing
What is
HTML?
• HTML stands for Hyper Text Markup Language.
• This is the language in which we write web pages for any
Website.
• This is a subset of Standard Generalized Mark-Up Language
(SGML) for electronic publishing, the specific standard used
for the World Wide Web.
What is
Hyperlink?
• A hyperlink or simply a link is a selectable element in an
electronic document that serves as an access point to other
electronic resources.
• Typically, you click the hyperlink to access the linked
resource.
• Familiar hyperlinks include buttons, icons, image maps, and
clickable text links.
HTML
Basics
Text, Images, Tables, Forms
What is
HTML?
• HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using
markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• Browsers do not display the HTML tags, but use them to
render the content of the page
A Simple HTML
Document Explanation
Example
<html> • The <html> element is the root element
<head> of an HTML page
<title>Page Title</title> • The <head> element contains meta
</head> information about the document
<body>
• The <title> element specifies a title for
the document
<h1>My First Heading</h1>
<p>My first paragraph.</p> • The <body> element contains the
visible
</body> page content
</html> • The <h1> element defines a large
heading
• The <p> element defines a paragraph
HTML
Tags
• HTML tags are element names surrounded by angle brackets:
• <tagname>content goes here...</tagname>
• 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
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name
HTML Page
Structure
HTML
Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Creating HTML
Page
Write HTML Using Notepad or TextEdit
Save the file on your computer using .html or
.htm extension and set the encoding to UTF-8
View the HTML Page in Your Browser
First HTML
[Link] Page
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML
33
Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page:
Header
<!DOCTYPE
HTML header
HTML>
<html>
<head>
35
<title>My First HTML
Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page:
Body
<!DOCTYPE HTML>
<html>
<head>
36
<title>My First HTML
Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
HTML Headings-
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading:
HTML Code Output
Headings and
Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
38
• Paragraph Tags
<p>This is my first
paragraph</p>
<p>This is my second
paragraph</p>
<div style="background:
• Sections: div and spanThis is a
skyblue;">
div</div>
Text Formatting Tags
• Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<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></ Quoted text block
blockquote>
<del></del> Deleted text – strike through
3
Text Formatting
Example
HTML Code Output
Hyperlinks: <a>
Tag
• Link to a document called [Link] on the same server in the
same directory:
<a href="[Link]">Fill Our Form</a>
• Link to a document called [Link] on the same server in
41
the parent directory:
<a href="../[Link]">Parent</a>
• Link to a document called [Link] on the same server in
the subdirectory stuff:
<a href="stuff/[Link]">Catalog</a>
• Link to an external Web site:
<a href="[Link]
target="_blank">BASD</a>
Images:
<img> tag
⬥ Inserting an image with <img>
tag:
<img src="/img/basd-
[Link]">
src Location of image file (relative or absolute)
⬥ Image
alt attributes:
Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
⬥ Example:
<img src="./[Link]" alt="PHP
Logo" /> 4
Ordered Lists:
•<ol> Tag
Create an Ordered List using
<ol></ol>:
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</
44
li>
</ol>
•Attribute values for type are 1, A, a, I,
[Link] Apple
i i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit [Link]
C. Grapefruit III. Grapefruit
Unordered Lists:
<ul> Tag
• Create an Unordered List using
<ul></ul>:
<ul type="disk" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
45
</ul>
• Attribute values for type are:
• disc, circle or square
• Apple o Apple Apple
• Orange o Orange Orange
• Pear o Pear Pear
Definition lists:
<dl> tag
• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt>
tag, definition in <dd> tag
46
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renders without bullets
• Definition is indented
Lists –
Example
<ol type="1">
[Link]
<li>Apple</li> ml
<li>Orange</li>
<li>Grapefruit</li>
</ol>
47
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup
lang…</dd>
</dl>
HTML
Tables
HTML Table
Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
Specifies a group of one or more columns in a table for
<colgroup> formatting
Specifies column properties for each column within a
<col> <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Tables
(2)
• Start and end of a table
<table> ... </table>
• Start and end of a row
50
<tr> ... </tr>
• Start and end of a cell in a row
<td> ... </td>
Simple HTML Tables –
Example
<html>
<body>
<table width=100% border = "1" bgcolor = "yellow">
<tr>
<th>Firstname</th>
51
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Simple HTML Tables –
Example
<html>
<body>
<table width=50% border = "1" >
<tr>
<th colspan=2>Firstname</th>
52
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
Column and Row
Span
• Table cells have two important attributes:
⬥ colspan ⬥ rowspan
colspan="1" colspan="1" rowspan="2"
53
rowspan="1"
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
⬥ Defines how ⬥ Defines how
many columns many rows the
the cell occupies cell occupies
HTML Tables – colspan
Example
<html>
<body>
<table width=50% border = "1" >
<tr>
<th colspan=2>Firstname</th>
54
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
HTML Tables – rowspan
Example
<h2 align=center> Cell that spans two rows: </h2>
<table style="width:50%“ border=“1” align=center>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
55
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
HTML Tables –
rowspan Example
with <style>
Complete HTML
Tables
• Table rows split into three semantic sections: header, body
and footer
• <thead> denotes table header and contains <th>
elements, instead of <td> elements
57
• <tbody> denotes collection of table rows that contain the
very data
• <tfoot> denotes table footer but comes BEFORE the
<tbody>
tag
• <colgroup> and <col> define columns (most often used
to set column widths)
HTML
Forms
Entering User Data from a Web Page
HTML
Form
• The <form> Element
• The HTML <form> element defines a form that is used to
collect user input:
• Syntax
<form>
form elements
</form>
• Form elements are different types of input elements, like
• text fields,
• checkboxes,
• radio buttons,
• submit buttons, and more.
The <input>
Element
• The <input> element is the most • HTML5 Input Types
• HTML5 added several new input
important form element.
types
• Here are some examples: • color
• Input Type Text • date
• datetime-local
• Input Type Password
• email
• Input Type Submit • month
• Input Type Radio • number
• range
• Input Type Reset
• search
• Input Type Checkbox • tel
• Input Type Button …etc • time
• url
• week
Input Type
Text
• <input type="text"> • This is how the HTML
defines a one-line text code above will be
input field: displayed in a browser:
• Example
Input Type
Password
• <input type="password"> • This is how the HTML
• defines a password field: code above will be
displayed in a browser:
• Example
Input Type
Submit
• defines a button for submitting form data to a form-handler.
• The form-handler is specified in the form's action attribute:
• Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Last name:<br>
<input type="text" name="lastname"
value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Input Type
Reset
• <input type="reset"> defines a reset button that will reset all
form values to their default values:
• click the "Reset" button, the form-data will be reset.
• Example
Input Type
Button
• <input type="button"> defines a button:
• Example
• <input type="button" onclick="alert('Hello World!')"
value="Click Me!">
• After clicking above button it shows output as below:
Input Type
Radio
• <input type="radio"> defines a radio button.
• Radio buttons let a user select ONLY ONE of a limited number of
choices:
• <form>
<input type="radio" name="gender" value="male" checked>
Male<br>
<input type="radio" name="gender" value="female">
Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
• This is how the HTML code above will be displayed in a
browser:
Input Type
Checkbox
• <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a
bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a
car
</form>
• This is how the HTML code above will be displayed in a
browser:
HTML Input
Attributes
• The value Attribute
• The readonly Attribute
• The disabled Attribute
• The size Attribute
• The maxlength Attribute
The <select>
Element
(Dropdown menus)
• The <select> element defines a drop-down list:
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <select> Element
with
multiple selection
• <select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea>
Element
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a
text area.
• The cols attribute specifies the visible width of a text area.
HTML Forms –
Example
[Link]
<form method="post" action="[Link]">
<input name="subject" type="hidden"
value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
72
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of
Science</option>
<option value="MBA"
selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<label
<input for="fname">First Name</label>
type="password" name="studentid" />
<input type="text" name="fname"
</fieldset> />
id="fname"
<fieldset><legend>Personal Details</legend>
<br />
<label for="lname">Last Name</label>
HTML Forms – Example
(2)
[Link]
(continued)
• Gender
<br
<br
/>
/>
•:<input
<labelname="gender"
for="email">Email</label>
type="radio" value="m" />
•<label
<input type="text" name="email"
id="gm"
for="gm">Male</label>
id="email" />
73
• </fieldset>
<input name="gender" type="radio" value="f" />
<p> id="gf"
• <label for="gf">Female</label>
• <textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
• </p>
• <p>
• <input type="submit" name="submit" value="Send Form" />
• <input type="reset" value="Clear Form" />
• </p>
•</form>
HTML Forms – Example
(3)
[Link] (continued)
74