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
WMLScript Java Server 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
Example Explanation
<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
page content
</body> • The <h1> element defines a large heading
</html> • 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 Page
[Link]
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
33
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Header
<!DOCTYPE HTML>
HTML header
<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-
HTMLheadingsaredefined withthe <h1>to<h6>tags.<h1>defines the
mostimportantheading. <h6>defines theleastimportantheading:
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>
• Sections: div and span
<div style="background: skyblue;">
This is a 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></blockquote> Quoted text block
<del></del> Deleted text – strike through
39
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 the
41
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/[Link]">
⬥Image attributes:
src Location of image file (relative or absolute)
alt 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" />
43
Ordered Lists: <ol> Tag
• Create an Ordered List using <ol></ol>:
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
44
</ol>
• Attribute values for type are 1, A, a, I, or i
1. Apple 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>
</ul>
45
• 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>
<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>
51
<th>Firstname</th>
<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>
52
<th colspan=2>Firstname</th>
<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" rowspan="1"
53
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>
54
<th colspan=2>Firstname</th>
<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>
55
</tr>
<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
important form element. • HTML5 added several new input
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">
<option value="BA">Bachelor of Art</option>
72
<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>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
HTML Forms – Example (2)
[Link] (continued)
<br />
• Gender:
<br />
•<input
<label name="gender" type="radio" id="gm" value="m" />
for="email">Email</label>
<label for="gm">Male</label>
•<input
<input type="text"
name="gender" name="email"
type="radio" id="gf"id="email" />
value="f" />
73
<label for="gf">Female</label>
• </fieldset>
• <p>
• <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