Holy Spirit University of Kaslik

(USEK)

Faculty of Arts and Sciences

CSC360 – Internet Technology

Spring 2023-2024
Chapter 1:
HTML5
 Outline
• Introduction
• Definitions
• Creating a Web Page
• Features

USEK CSC360 3
 Introduction
• Internet is defined as an Information super
Highway, to access information over the web.
• However, It can be defined in many ways as
follows:
– Internet is a world-wide global system of
interconnected computer networks.
– Internet uses the standard Internet Protocol
(TCP/IP).

USEK CSC360 4
 Introduction
• Network:
Two or more computers connected together for the
purpose of communicating and sharing resources.

USEK CSC360 5
 Introduction
• Client/Server Model:
Client/Server can describe a relationship between two
computer programs the "Client" and the "Server".
o Client: requests some type of service from the server.
o Server: fulfills the request and transmits the results to
the client over a network.

USEK CSC360 6
 Introduction
• Client/Server Model:
• Connected to the Internet when
needed
• Usually runs web browser (client)
software (such as Internet
Explorer or Firefox)
• Uses HTTP (Hypertext Transfer
Protocol)
• Requests web pages from server
• Receives web pages and files from
server
USEK CSC360 7
 Introduction
• Client/Server Model:
• Continually connected to the
Internet
• Runs web server software (such as
Apache or Internet Information
Server)
• Uses HTTP (Hypertext Transfer
Protocol)
• Receives request for the web page
• Responds to request and transmits
web page, and associated files

USEK CSC360 8
 Introduction
• Every computer in internet is identified by a unique IP
address.
• IP address is a unique set of numbers (such as
110.22.33.114) which identifies a computer location.
• A special computer DNS (Domain Name Server) is used
to give name to the IP Address so that user can locate
a computer by a name.
For example, a DNS server will resolve a name
http://www.usek.edu.lb to a particular IP address to
uniquely identify the computer on which this website is
hosted.
USEK CSC360 9
 Introduction
• The concept of Internet was originated in
1969 and has undergone several technological
& Infrastructural changes as discussed below:
– The origin of Internet devised from the concept
of Advanced Research Project Agency Network
(ARPANET).
– ARPANET was developed by United States
Department of Defense.
– Basic purpose of ARPANET was to provide
communication among the various bodies of
government.
USEK CSC360 10
 Introduction
– Initially, there were only four nodes, formally
called Hosts.
– In 1972, the ARPANET spread over the globe with
23 nodes located at different countries and thus
became known as Internet.
– By the time, with invention of new technologies
such as TCP/IP protocols, DNS, WWW, browsers,
scripting languages etc, Internet provided a
medium to publish and access information over
the web.

USEK CSC360 11
 Introduction
• HTML stands for HyperText Markup Language.
• HTML was originally developed in 1990.
• In 1996, the World Wide Web Consortium (W3C)
became the authority to maintain the HTML
specifications.
• HTML also became an international standard
(ISO) in 2000.
• HTML5 is the latest version of HTML.
• HTML5 provides a faster and more robust
approach to web development.
USEK CSC360 12
 Introduction
• The latest versions of Apple Safari, Google
Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer
9.0 will also have support for some HTML5
functionality.

• The mobile web browsers that come pre-

installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.

USEK CSC360 13
 Definitions
• HTML stands for Hypertext Markup Language.
A markup language is a set of commands that
tell a computer how to format your document.
HTML tags tell a browser such as Firefox, or
Internet Explorer how to structure your Web
page.
• An HTML file must have an htm or html file
extension.
• An HTML file can be created using a simple
text editor such as Notepad.
USEK CSC360 14
 Definitions
• HTML is composed of tags. HTML tags are always enclosed
in angle-brackets (<>) and are case-insensitive; that is, it
doesn't matter whether you type them in upper or lower
case.
• Most tags work in pairs; in most cases, both beginning and
ending tags are needed.
• An ending tag contains the same word as the beginning tag,
but it includes a slash before the word.
<tag> ... </tag>
For example, <b> is the beginning tag and </b> is the
ending tag for bold text.
• There are a few exceptions that do not need ending tags
(such as <br> for line break). Most tags need to be closed.
USEK CSC360 15
 Definitions
HTML basic document Tags: are the tags which
divide up a Web page into its basic sections
(Structure), such as the header information and
the part of the page which contains the
displayed text and graphics.
– HTML: The first and last tags in a document
should always be the HTML tags.

– HEAD: The HEAD tags contain all of the

document's header information like the document
title and so on.
USEK CSC360 16
 Definitions
– TITLE: This container is placed within the HEAD
structure. Text placed between the TITLE tags, will
appear at the top of the browser's title bar, the
history list, and the bookmark file.

– BODY: comes after the HEAD structure. Between

the BODY tags, you find all of the items that gets
displayed in the browser window. All of the text,
the graphics, links…

USEK CSC360 17
 Definitions

USEK CSC360 18
 Definitions
• The DOCTYPE:
HTML 5 authors would use simple syntax to
specify DOCTYPE as follows:

The above syntax is case-insensitive.

USEK CSC360 19
 Creating a Web Page
• Step 1: Launch Notepad on your computer, by going to Start - Windows
Accessories - Notepad.
• Step 2: Type the following:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body> ----------------------------------
The <Body> tag contains the entire
<b>This is a test.</b> content of a webpage

</body> ----------------------------------
</html>

USEK CSC360 20
 Creating a Web Page
• Step 3: Save the file to your desktop; Enter a filename,
with the .html or .htm extension. For example:
page1.html
• Step 4: To preview your file: Double-click the file to
open it inside your web browser (ex: Internet Explorer)
• Step 5: After you have viewed your creation, go back to
your html code; right-click on the file (Open with -
Notepad). Add italics by typing <b><i>BLAH BLAH
BLAH</i></b> (between the <Body> tags).
• Save your changes in Notepad, and refresh your page
in your web browser (using the reload button) to see
how these changes would appear on the Web.
USEK CSC360 21
 Features
• Attributes:
Attributes are optional modifiers placed inside
the tags. The values given to the attributes
modify the appearance and behavior of the tag.
Attributes are placed inside the tag in the
following way:
<TAG Attribute=Value> : Value = text or number
For example: <Body text=Blue>
USEK CSC360 22
 Features
• Attributes:
 The Attributes of <Body>:
<Body text=color background=filename
bgcolor=color>
Text=color; modifies the color of the text in the
document (black by default).
Background=filename; An image to use as the
background (.gif, .jpg, .png)
Bgcolor=color; modifies the background color of the
document (white by default).
USEK CSC360 23
 Features
• Attributes:
 Color Attributes:
Color values are text values that could be
represented in 2 ways:
• Color Name (Example: <Body text="RED">)
• Color Hex Value (<HR COLOR="#FF0000">)
Hex values use a combination of 6 values (RRGGBB)
each couple representing a main color (Red, Green,
and Blue).
USEK CSC360 24
 Features
• Styling text:
The following container tags can be used to add style to
any text. Text inside the tags will have the style applied.
 <I></I>: Italic
 <B></B>: Bold
 <BIG></BIG>: Make text one size bigger
 <SMALL></SMALL>: Make text one size smaller
 <U></U>: Underline
 <S></S>: Strikethrough
 <mark></mark>: Make text that is highlighted
USEK CSC360 25
 Features
• Styling text:
To apply more than one style, "stack" tags:
<B><I> Bold and italic text </I></B>
^... superscript:
2¹⁰  210

_... subscript:
H₂O  H2O
USEK CSC360 26
 Features
• Styling text:
 Font Tag:
The FONT tag, which takes the attributes FACE, SIZE, or
COLOR, can be used to control typeface, size, and/or color of
text.
<FONT FACE="Arial" size="+2" color=red></FONT>
 FACE is the name of the font to use for display.
 SIZE can be a value from 1-7, with 7 biggest, the default is size 3.
 COLOR follows the six-character hexadecimal or the color name.
The default is the TEXT attribute in the BODY or the users’
browser settings.

USEK CSC360 27
 Features
• Styling text:
 Dividing and spacing text: Headings
There are six levels of headings, from Heading 1 through Heading 6.
Heading 1 (H1) is "most important" and Heading 6 (H6) is "least
important". By default, browsers will display the six heading levels in
the same font, with the point size decreasing as the importance of the
heading decreases. Here are all six HTML pairs, in descending order of
importance:
• <H1>Heading 1</H1>
• <H2>Heading 2</H2>
• <H3>Heading 3</H3>
• <H4>Heading 4</H4>
• <H5>Heading 5</H5>
• <H6>Heading 6</H6>

USEK CSC360 28
 Features
• Styling text:
 Dividing and spacing text: Headings
• A heading always begins at the margin of a line and
always forces a line break at the end of the heading.
Everything between <hi> and </hi> is boldfaced.
• An ALIGN attribute can be added to any headline, with
a value of LEFT (by default), CENTER, or RIGHT.
• The headline will be aligned as indicated. The default is
left-aligned.
<H4 ALIGN="RIGHT"></H4>

USEK CSC360 29
 Features
• Styling text:
 Dividing and spacing text: Paragraph
The paragraph tag, which like the heading,
adds one line of space above and below.
Like heading, ALIGN attributes can be added
to paragraphs tags. The default is left-aligned.
<P></P>
<P ALIGN="RIGHT"></P>
USEK CSC360 30
 Features
• Styling text:
 Dividing and spacing text: Division
• The <div> tag is known as the Division tag. The div
tag is used in HTML to make divisions of content in
the web page like (text, images, header, footer,
navigation bar, etc).
• The Div is the most usable tag in web development
because it helps us to separate data in the web
page and we can create a particular section for
particular data or function in the web pages.
USEK CSC360 31
 Features
• Styling text:
 Dividing and spacing text: Division
The division tag <DIV></DIV> can define areas
for alignment but without adding one line of
space above and below.
ALIGN attribute can be added to division tags.
The default is left- aligned.
<Div></Div>
<Div ALIGN="Center"></Div>
USEK CSC360 32
 Features
• Styling text:
 Dividing and spacing text: Division
ID and CLASS attributes can be added to
division tags:
<div id="capital">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
</div>
USEK CSC360 33
 Features
• Styling text:
 Dividing and spacing text: preformatted and BR
 No matter how much whitespace you put between
words, whether returns or spacebar hits, the words will
be separated by one space in a Web browser.
 But Text in <PRE></PRE> tags appears preformatted—
exactly as typed, preserving all spaces, returns, tabs,
and other whitespace characters usually ignored in
markup.
 To start a new line without extra space, use the break
tag <BR>.
USEK CSC360 34
 Features
• Styling text:
 Dividing and spacing text: Hr
Horizontal rules can be added with <HR>. <HR SIZE NOSHADE
WIDTH>

USEK CSC360 35
 Features
• Lists:
Lists are automatically indented. There are three
kinds:
<UL></UL>: Unordered list
<OL></OL>: Ordered list
<DL></DL>: Definition list
For ordered or unordered lists, list items are
indicated with LI: <LI>List item</LI>
USEK CSC360 36
 Features
• Lists:
 Unordered list:
The type of the UL list is defined with a TYPE attribute of
SQUARE, CIRCLE, or DISC (by default). A typical list looks
like:
<UL>
<LI>Monday </LI>
<LI>Tuesday </LI>
<LI>Wednesday </LI>
<LI>Thursday </LI>
<LI>Friday </LI>
</UL>
USEK CSC360 37
 Features
• Lists:
 Unordered list:
To get an unordered list with a circle type: add a TYPE
attribute
<UL type="circle">
<LI>Monday </LI>
<LI>Tuesday </LI>
<LI>Wednesday </LI>
<LI>Thursday </LI>
<LI>Friday </LI>
</UL>
USEK CSC360 38
 Features
• Lists:
 Ordered list:
Ordered lists are automatically incremented for each item. Numerals 1
are the default, but TYPE attributes of A (Capital letters), a (small
letters), I (Large Roman), or i (Small Roman) can be used to specify
letters or Roman numerals. A typical list looks like:
<OL>
<LI>Monday </LI>
<LI>Tuesday </LI>
<LI>Wednesday </LI>
<LI>Thursday </LI>
<LI>Friday </LI>
</OL>

USEK CSC360 39
 Features
• Lists:
Ordered list:
To start a list from a certain number, add a START attribute.

<OL start=5 type="i">

<LI>Monday </LI>
<LI>Tuesday </LI>
<LI>Wednesday </LI>
<LI>Thursday </LI>
<LI>Friday </LI>
</OL>
USEK CSC360 40
 Features
• Lists:
 Nested Lists (lists inside lists):

USEK CSC360 41
 Features
• Lists:
 Definition Lists
Definition Lists: definition lists begin and end
with the tags <DL> and </DL>.

o <dl> tag defines the description list

o <dt> tag defines the term (name)
o <dd> tag describes each term
USEK CSC360 42
 Features
• Lists:
 Definition Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

USEK CSC360 43
 Features
• Special Characters:
HTML Entities and/or ISO Latin-1 codes can be
placed in source code like any other
alphanumeric characters to produce special
characters and symbols that cannot be
generated in HTML with normal keyboard
commands.

USEK CSC360 44
 Features
• Special Characters:
 Examples:

Ex:
10 &lt; 100<br>
50 &gt; 40<br>
My &nbsp; &nbsp; Name

USEK CSC360 45
 Features
• Special Characters:
 Comment Tag
The comment tag is used to insert a comment in
the source code. A comment will be ignored by the
browser. You can use comments to explain your
code, which can help you when you edit the source
code at a later date.
An HTML comment: <!-- aaaaaaaaa -->
<!-- This is a comment. Comments are not displayed
in the browser -->
USEK CSC360 46
 Features
• Special Characters:
 <marquee> tag
You can create a scrolling marquee (scrolling
text) by using the <marquee> tag. You can make
the text scroll from right to left, left to right, top
to bottom, or bottom to top - it's your choice!
Ex:
<marquee direction="left">your scrolling text goes here</marquee>

USEK CSC360 47
 Features
• Special Characters:
 Attributes of <Marquee>

Ex:
<marquee direction="right" bgcolor="green"> Test Marqee</marquee>

USEK CSC360 48
 Features
• Links:
The link tag <A> is also known as the "anchor" tag. The
anchor tag requires a </A> tag.
 Link to Local Files:
The simplest anchor link is one that opens another HTML
file in the same directory as the presently displayed web
page. The HTML format for doing this is:
<a href="Page2.html"> Click here </a>
HREF defines the destination (hyperlink reference) of the
link.

USEK CSC360 49
 Features
• Links:
Link to another section on the same page:
• The anchor tag can link to another section on the
same page. In this case, we will use id to identify
different sections of our web page. These ids then
can be passed to the href as shown below:
<a href="#section1"> Section</a>

• You can use href="#top" or href="#" to link to the

top of the current page.
USEK CSC360 50
 Features
• Links:
 Link (to a distant file – to the Internet):
The HTML format for an anchor link to an item on
the Internet is:
<a href="URL"> Click here</a>
Where URL is the full Uniform Resource Locator, in
quotes, the address for the Internet site where you
want to send the viewer.
Example:
<a href="http://www.usek.edu.lb"> Go to USEK site</a>
USEK CSC360 51
 Features
• Links:
Link (to an e-mail):
Having a link that allows visitors to send email
from your website (to send questions or
comments.)
An email link would require the following code:
<a href="mailto:instructor@usek.edu.lb">
Email Me</a>
USEK CSC360 52
 Features
• Anchor Attributes:
TARGET attribute can be added to a link to select the
window or frame where the HREF defined in the link will
be displayed. The default is the current window or frame:

 Target=_self (the target will open in the same frame as

it was clicked)
 Target=_blank (the target will open in a new window)
Ex:
<a href="http://www.usek.edu.lb" Target=_blank>Go to USEK site</a>

USEK CSC360 53
 Features
• Images:
To insert an image into the HTML document, use
the <IMG> tag. The IMG tag is an empty tag, no
</IMG> is required. The IMG tag has one main
attribute, the SRC attribute which should be the
filename of the image (.jpg, .gif, .png …) being
inserted.
Example: <IMG SRC="MyPhoto.jpg">

USEK CSC360 54
 Features
• Images (Attributes):

The following attributes can be added to IMG tags:

 WIDTH: image width, in pixels or percentage
<IMG SRC="flower.jpg" width=60 >
 HEIGHT: image height, in pixels or percentage
<IMG SRC="flower.jpg" width=60 height=100>
 ALT: alternate text:
<IMG SRC="flower.jpg" width=60 height=100 ALT="flower">
 BORDER: border surrounding the image, in pixels
<IMG SRC="flower.jpg" width=60 height=100 border=5>
 TITLE: To create a tooltip for an image
<IMG SRC="flower.jpg" width=60 height=100 TITLE="flower">
USEK CSC360 55
 Features
• ALIGN alignment:
Align specifies how to align image according to
surrounding text:
 (Bottom by default)
 <IMG ALIGN=BOTTOM SRC="flower.jpg" width=60
height=100>My Flower
 <IMG ALIGN=middle SRC="flower.jpg" width=60
height=100>My Flower
 <IMG ALIGN=Top SRC="flower.jpg" width=60
height=100>My Flower

USEK CSC360 56
 Features
• Images Attributes (Align=left or right):
With the align attribute in the <img> tag, we can
specify to have the image itself aligned to the
right or left margin of the page.

<img src="filename.gif" align=right>

<img src="filename.gif" align=left>

USEK CSC360 57
 Features
• Image Space Padding: hspace in pixels,
vspace in pixels:
To add more space around your image, add the
vspace and hspace to the <img> tag:

<IMG SRC="flower.jpg" width=60 height=100

hspace=10 vspace=20> flower:

USEK CSC360 58
 Features
• Images and links:
To use an image as a link:
<a href="http://usek.edu.lb"><img src="usek.jpg"></a>

USEK CSC360 59
 Features
• HTML <figure> Tag:
 We can use a <figure> element to mark up a photo in a
document, and a <figcaption> element to define a caption for
the photo.

 The <figure> tag specifies self-contained content, like

illustrations, diagrams, photos, code listings, etc.

 While the content of the <figure> element is related to the

main flow, its position is independent of the main flow, and if
removed it should not affect the flow of the document.

USEK CSC360 60
 Features
• HTML <figure> Tag:

USEK CSC360 61
 Features
• Tables:
A table is made up of rows and cells. Each row
needs to have at least one cell:
<TABLE></TABLE> Table
<TBODY></TBODY> Table Body
<TR></TR> Table row
<TD></TD> Table data (cell - Normal, left)
<TH></TH> Table header (cell – Bold, Center)
The border=1 attribute in the <table> tag instructs
the browser to draw a line around the table with a
thickness of 1 pixel. Border=0, no borders.
USEK CSC360 62
 Features
• Tables:
Example 1:
<table border=1>
<caption> Example1 </caption>
<tbody>
<tr>
<th>Row 1 col 1</th><th>Row 1 col 2</th><th>Row 1 col 3</th>
</tr>
<tr>
<td>Row 2 col 1</td><td>Row 2 col 2</td><td>Row 2 col 3</td>
</tr>
<tr>
<td>Row 3 col 1</td><td>Row 3 col 2</td><td>Row 3 col 3</td>
</tr></tbody></table>
USEK CSC360 63
 Features
• Tables:
Caption attributes:

<CAPTION align=top> (top center by default)

<CAPTION align=bottom> (bottom and center)

USEK CSC360 64
 Features
• Tables:
 <table> Attributes:
Many other attributes can be applied to the TABLE tag:
 Height: table height, in pixels or percentage
 WIDTH: table width, in pixels or percentage
 CELLPADDING: margin inside cells, in pixels
 CELLSPACING: space between cells, in pixels
 BGCOLOR: color of table background
 ALIGN: alignment of table relative to page
 Bordercolor: color of borders
USEK CSC360 65
 Features
• Tables:
 Table (Example 2):
<table width=400 height=150 cellpadding=10 cellspacing=10 align=center bordercolor=blue
bgcolor=yellow border=1><tbody>
<tr>
<td>Cell1</td>
<td>Cell2</td>
<td>Cell3</td>
</tr>
<tr>
<td>Cell4</td>
<td>Cell5</td>
<td>Cell6</td>
</tr>
<tr>
<td>Cell7</td>
<td>Cell8</td>
<td>Cell9</td>
</tr></tbody></table>

USEK CSC360 66
 Features
• Tables:
<Table Frame=void>: means that there should be no outer
border.
<Table Rules=none>: display external border only
 Attributes for TR:
<TR ALIGN=left|center|right BGCOLOR=#RRGGBB or
color name Valign=top|middle|bottom></TR>
 ALIGN: horizontal alignment of row contents.
 VALIGN: vertical alignment of row contents (middle by
default).
 BGCOLOR: color of row background.

USEK CSC360 67
 Features
• Tables:
 Attributes for TH and TD:
For TH and TD tags, the attributes BGCOLOR, WIDTH, ALIGN, and VALIGN may
be used:
 BGCOLOR: color cell background
 WIDTH: width, in pixels or percentage
 ALIGN: horizontal alignment of cell contents
 VALIGN: vertical alignment of cell contents
Example:
<TR>
<th align=right bgcolor=yellow> Once </th>
<th valign=top bgcolor=green> You</th>
<th valign=bottom bgcolor=blue> Set up</th>
</TR>
USEK CSC360 68
 Features
• Tables:
Attributes: Rowspan and colspan
For TH and TD tags, two additional attributes
ROWSPAN and COLSPAN can be used to
“stretch” cells across rows or columns.

ROWSPAN = number of rows a cell should span

COLSPAN = number of columns a cell should span

USEK CSC360 69
 Features
• Tables:
 Attributes: Rowspan and colspan

Here is a small table with ColSpan cell stretched across two columns, and
RowSpan cell stretched across two rows:

<TABLE BORDER=1 width=200 height=200><TR>

<TD>Cell 1 </TD><TD>Cell 2 </TD><TD>Cell 3 </TD></TR>
<TR>
<TD colspan=2> ColSpan </TD><TD>Cell 4 </TD></TR>
<TR>
<TD rowspan=2> RowSpan </TD><TD>Cell 5 </TD><TD>Cell 6 </TD></TR>
<TR>
<TD>Cell 7 </TD><TD>Cell 8 </TD>
</TR></TABLE>

USEK CSC360 70
 Features
• Tables:
Tables can be divided into three parts: a header,
a body, and a foot.
The three elements for separating the head,
body, and foot of a table are:
– <thead> : to create a separate table header
– <tbody> : to indicate the main body of the table
– <tfoot> : to create a separate table footer
USEK CSC360 71
 Features
• Tables:
o When printing a large table that spans
multiple pages, these elements can enable the
table header and footer to be printed at the
top and bottom of each page.

USEK CSC360 72
 Features
• Tables:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

USEK CSC360 73
 Features
• Tables and images:
 To fill all cells with the same pattern:
<table border=3 width=300 height=300 background="cup of
coffee.jpg" >
 To fill a single cell a same pattern:
<table border=3 width=300 height=300>
<tr><td background="cup of coffee.jpg">…..
 To insert an image in a cell:
<table…..>
<tr>
<td><img src="cup of coffee.jpg" width=..height=…></td>…
USEK CSC360 74
 Features
• Tables and images:
Tables, images and links
To use an image in a table as a link:
<table…..>
<tr>
<td><a href="http://usek.edu.lb"><img src=
"cup of coffee.jpg" width=..
Height=…></a></td>…
USEK CSC360 75
 Features
• Two components of using forms:

1. The HTML form: The web page user interface

2. The server-side processing:
Server-side processing works with the form data and
sends e-mail, writes to a text file, updates a database,
or performs some other type of processing on the
server.

USEK CSC360 76
 Features
• HTML Forms:
The <form> tag is used to create an HTML form
for user input.
A form can contain input elements like text
fields, check boxes, radio-buttons, submit
buttons and reset buttons. A form can also
contain select menus, text area and more
elements. Forms are used to pass data to a
server.
USEK CSC360 77
 Features
• HTML Forms:
The form element attributes:
◦ action: specifies the server-side program or script that
will process your form data
◦ method:
• get – default value: form data passed in URL
• post – more secure: form data passed in HTTP entity
body
◦ name: specifies the name of a form
Example:

USEK CSC360 78
 Features
• The Input Element:
The input element is used to select user information. An
input element can vary in many ways, depending on the
type attribute. An input element can be of type:
<input type=text |password |file | checkbox | radio |
submit | reset> and more.
 <input type=text name="whatever">
The name attribute specifies a name for an input
element. The name attribute is used to identify form data
after it has been submitted to the server, or to reference
form data using JavaScript on the client side.

USEK CSC360 79
 Features
• The Input Element:
Note: Only form elements with a name attribute will have
their values passed when submitting a form.
 The size attribute specifies the visible width of an <input>
element.
 The maxlength attribute specifies the maximum number
of characters allowed in the <input> element.
 The value attribute specifies the initial value for an input
field
<input type=text name=whatever size=5 maxlength=10
value="test">
USEK CSC360 80
 Features
• Input type=text |password |file:
<input type="text" name=x>: defines a one line
input field that a user can enter text into.
<input type="password" name=y>: defines a
password field, the characters in a password field
are masked (shown as circles).
<input type="file" name=z>: defines a file-select
field and a "Browse..." button (for file uploads)
The <textarea> tag defines a multi-line text input
control.

USEK CSC360 81
 Features
• Textarea:
 A textarea can hold an unlimited number of characters.
 maxlength attribute is used to specify the maximum
number of characters enters into the textarea element.
 The cols attribute specifies the visible width of a text
area and the rows attribute specifies the visible number of
lines in a text area.
 Readonly specifies that a text-area should be read-only.
 <textarea name=z rows="4" cols="50" maxlength=100>
</textarea>
 <textarea readonly> TEST </textarea>
USEK CSC360 82
 Features
• Radio Buttons, Checkboxes:
<input type=radio name="" value="">: defines a radio
button. Radio buttons let a user select ONLY one of a
limited number of choices.
<input type=checkbox name="" value="" >: defines a
checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
The checked attribute specifies that an input element
should be preselected when the page loads. The
checked attribute is used with <input type="checkbox">
or <input type="radio">.

USEK CSC360 83
 Features
• <select><option></option></select>:
The <select> tag is used to create a select list (drop-down list).
<select name= size= multiple>
 Multiple specifies that multiple options can be selected
 Name specifies the name of a drop-down list
 Size specifies the number of visible options in a drop-down list
 The <option> tag inside the select element define the available
options in the list.
<option value=" " selected>
o Selected specifies that an option should be selected by default
o Value specifies the value to be sent to a server when a form is
submitted

USEK CSC360 84
 Features
• Submit and Reset Buttons:

 A submit button is used to send form data to

a server.
<INPUT type="SUBMIT" value="Send">

 A reset button resets all form fields to their

initial values.
<INPUT type="RESET" value="Clear">

USEK CSC360 85
 Features
• Input Image Button:
 An input image button is used to send the form
data to the web server (when clicked).
 Attributes:
◦ type="image"
◦ name
◦ id
◦ src
<input type="image" src="img_submit.jpg" alt="Submit"
width="60" height="50">
USEK CSC360 86
 Features
• Button Tag:

 The <button> tag defines a clickable button.

 Inside a <button> element you can put text (and tags like
<i>, <b>, <img>, etc).
<button>Enter <i>the</i> <b>Test</b></button>

USEK CSC360 87
 Features
• Label element:

 The <label> tag in HTML is used to provide a usability

improvement for mouse users, i.e, if a user clicks on the
text within the <label> element, it toggles the control.
 Two different formats:
<label>Email: <input type="text" name="email" id="email"> </label>
Or
<label for="email">Email: </label>
<input type="text" name="email " id="email">

USEK CSC360 88
 Features
• The Fieldset element:
– Container tag
– Creates a visual group of form elements on a web page

• The Legend element:

– Creates a text label within the fieldset

USEK CSC360 89
 Features
• Email Text Box:
– The <input type="email"> defines a field for an e-mail
address.
– The input value is automatically validated to ensure it is
a properly formatted e-mail address.
– To define an e-mail field that allows multiple e-mail
addresses, add the "multiple" attribute.
<input type="email" name="Email" id="Email">

USEK CSC360 90
 Features
• URL Text Box:
– The <input type="url"> defines a field for entering a URL.
– The input value is automatically validated before the form can be
submitted.

<input type="url" name="Website" id="Website">

USEK CSC360 91
 Features
• Range Slider Control:
<label for="myChoice">Choose a number between 1 and
100:</label><br>
Low <input type="range" name="myChoice" id="myChoice"
min="1" max="100"> High

USEK CSC360 92
 Features
• Spinner Control:
<label for="myChoice">Choose a number between 1 and
10:</label>
<input type="number" name="myChoice" id="myChoice"
min="1" max="10">

USEK CSC360 93
 Features
• Calendar Control:
<label for="myDate">Choose a Date</label>
<input type="date" name="myDate" id="myDate">

USEK CSC360 94
 Features
• Adding Audio in web page:

The HTML <bgsound> tag is used to play a

soundtrack in the background. This tag is for
Internet Explorer only.

<bgsound src="test.wma" >

USEK CSC360 95
 Features
• Adding video in web page:
Video files can be included in your pages using the
<EMBED> tag. Important attributes of EMBED tag:
 SRC: This is a required attribute and takes the
video movie URL as its value.
 WIDTH and HEIGHT: Required attributes. They
specify the dimensions in pixel values.
<embed src="test.mp4" width=200 height=200>

USEK CSC360 96
 Features
• Adding video in web page:
You may also simply place the URL of your
media files (sound, music, and video) into the
href attribute of an anchor tag.
 <a href="test.wma"> Click to listen </a>
 <a href="test.mp4"> Click to view </a>

USEK CSC360 97
 Features
• You can include the lang attribute inside the <html>
tag, to declare the language of the Web page.

• When the page contains content in another language,

add a language attribute to an element surrounding
that content (p, div, footer, header, ….):

USEK CSC360 98
 Features
• HTML 5 authors can use the <meta> tag to specify
character encoding, page description, keywords
(search engines), author of the document,…

• The <meta> tag go inside the <head> element.

• The HTML5 specification encourages web developers

to use the UTF-8 character set, which covers almost
all of the characters and symbols in the world!
<meta charset="utf-8">

USEK CSC360 99
 Features
• Examples:

USEK CSC360 100

 Features
• Examples:

USEK CSC360 101