HTML

ICT22614 –
Web Application
Development
HTML
(Hyper Text Markup Language)
Markup Language
• A language that has codes for
indicating layout and styling (such as
boldface, italics, paragraphs,
placement of graphics, etc.) within a
text file.
• Ex: Markup languages
– SGML (Standard General Markup
Language)
– HTML (Hypertext Markup
Language)
– XML (Extensible Markup Language)
Hypertext Markup Language (HTML)
• The basic language that is used

to build web documents
• Plain ASCII-text documents
• When browsing (using a Web browser),

the document will display formatted text,
color, a variety of fonts, graphic images,
special effects ....
Hypertext Markup
Language ...
• HTML History
– Developed by Tim Berners-
Lee at CERN in early 90’s
– Based on Standard
Generalized Markup
Language (SGML)
• HTML standards created
by W3C
• Official standards:
– version 2.0 (1994)
– version 3.2 (1996)
– version 4.0 (1999)
– version 4.01 (1999)
– XHTML (2000)
– HTML5 (2014)
– …..
– HTML5.3 (2018)
– ……
HTML Basics
CAN USE ANY TEXT AN HTML DOCUMENT

EDITOR TO CREATE AN HAS .html OR .htm
HTML DOCUMENT EXTENSION
• HTML defines the structure
and layout by using a variety
of tags and attributes.
HTML
Basics ...
HTML Basics ...
• A Tag is a format name surrounded by angle
brackets, e.g. <HTML>, <H1>, <UL>, etc.
• Most Tags are in pairs (Starting and Ending):
Bold: <b> … </b> Italics: <i> … </i>
• Some tags can also have Attributes, e.g.
<tag attribute="value" attribute="value">
Cont. • Ex: <Font size=“7” color=“blue”>
• Size and Color are Attributes

Cont.
• HTML is not case-sensitive

• White space is ignored (blanks, tabs, new lines)
• Can contain comments: 
• Paired tags can be nested but they cannot overlap.
<tag1>...<tag2>....</tag2>...</tag1> is okay but
<tag1>...<tag2>....</tag1>...</tag2> is not
Elements of a HTML File
• Tag statements
• Attributes
• Text
Usually appearing on the page
• Scripting language
Capable of manipulating the document
HTML Document Structure
<html>
<head>
</head> Head
HTML
<body> Document
</body> Body
</html>
HTML Structure
• HTML Tag
Tells the Web browser where the HTML in your
document begins and ends
Head Section
• Contains general information about the document.

• In between <head> .............. </head>
• Above the BODY and just after the <HTML>
• The contents of the HEAD are not displayed as part of
the document text
Head Section ....
Head section tags

•TITLE
•BASE
•STYLE
•SCRIPT
•Link
•...................
TITLE Tag
• Placed within the HEAD structure

• Title of your document
• Title will appear at the top of the browser's title bar
• Appears in the history list
• TITLE container goes into your bookmark file
Body Section
• Contain all the parts that visitors can see

<html>
<head>
<title> Simple HTML Document </title>
HTML </head>
Example <body>
ICT22614 - Web Application Development
</body>
</html>
• Text editor
– It’s just a text file; type it all in a text
editor
Eg: Notepad
• Add-on to existing program
Creating Web – Word 97 and up, can save to HTML
Pages – power point - Most useful for
transferring existing documents to web
• Web Authoring Tools
– MS FrontPage, Dreamweaver, Visual
Studio Code, Netobjects Fusion, NS
Communicator, .........
Creating a Web Page
using a Text Editor
(Notepad)
• Open Notepad and Write your

document using html tags
• Save with .html or .htm
extension
• Browse the page using a web
browser
Saving a Web Page
• From the File menu, select Save

As...
• Type the filename with .htm or
.html extension
EXAMPLE: mydoc.html
• Click SAVE
Browsing a Web Page
• Open a web browser

installed in your machine
• In the file menu, select open
Or
• Double click on the file
Paragraphs and Lines
10/31/2024 24
<P> … </P>
HTML Text Tags:

Paragraph Tag
HTML Text Tags:
Heading Tags
HTML Headings
<b></b> or <strong></strong>
Bolds the tagged text
<em></em> or <i></i>
Italicizes the tagged text
Text Display
Elements <pre></pre>
Preserves white space and
breaks and stands for
“preformatted”
<br>
<hr>
<marquee>
Common Tags
Attributes
Sometimes, we need more
information for an element in
order to control the way the
content displays
We provide this information

with attributes stated within
the element start tag
Attributes
The generic way of using an attribute looks
like this:
<elementName attribute=“value”>
Target content
</elementName>
Single or double quotes may be used to hold

attribute values
E.g.: <Font color=“blue”>UoR</font>
<Font size=“7” color=“blue”>UoR</font>
Alignment
Align headings and text with the ALIGN command
• left, center, right, and justify a heading
<H1 ALIGN=LEFT>Joe’s home page</H1>
<H1 ALIGN=CENTER>Joe’s home page</H1>
<H1 ALIGN=RIGHT>Joe’s home page</H1>
• left, center, right, and justify a paragraph
<P ALIGN=LEFT>imagine a BIG paragraph in here</P>
<P ALIGN=CENTER> imagine a BIG paragraph in here </P>
<P ALIGN=RIGHT> imagine a BIG paragraph in here </P>
<P ALIGN=JUSTIFY> imagine a BIG paragraph in here </P>
• note that the </P> is used here to end the paragraph and turn off the
alignment
Dividing Lines
•<HR> will insert a standard line in
your page
•other options include size, width,
alignment, and no bevel
<HR SIZE=“25” WIDTH=“150”

ALIGN=“CENTER” NOSHADE>
Font
You can modify more exactly the way text looks by using the
<font></font> tag:
<font color=“red” size=“3” face=“Garamond”>

This is red, size 3, and in Garamond!
</font>
Entities
Some content characters may

not show up properly if simply
placed inside tags.
How would you mark up the

following:
26th
Entities
• Subscript – H2O
• Superscript – 26th, May 2024
Entities
Character: Entity:
< <
> >
& &
[space]
HTML Comments
An HTML Comment which is NOT displayed in the page is
done like this:


Ordered and Unordered Lists
39
10/31/2024
HTML LISTS
• An unordered List
• An ordered List
• Tags
– <ul>- Define an unordered list
– <ol>- Define an ordered list
– <li> - Define a list item
Creating Lists
▪ Unordered Lists: Unordered (bulleted) lists <UL> can use a disc, circle, or
square
Ordered Lists
• Ordered (numbered) lists <OL>
can use numbers (1), capital
letters (A), lowercase letters (a),
or Roman numerals (i)
Ordered Lists
<OL TYPE=1 START=5> • Additional
<LI>Matara – <ol type="A">
<LI>Galle – <ol type="a">
</OL> – <ol type="I">
– <ol type="i">
Inserting Images
44
10/31/2024
<img> Defines an image
Attributes: SRC, ALT, HEIGHT, WIDTH, ALIGN, ………
Inserting Image from Other Location
ALT Attribute & Sizing Graphics and borders
HTML Background
Background Color / Graphics
Tag <a>
HTML Link Tag
Link to
Other sites
Between your own pages
To e-mail
Linking within one document
Link to a mail
Tables and Table Formatting
54
10/31/2024
Uses of Tables
• Tables should be used primarily to hold tabular data
• Many existing Web pages use tables to create the page
layout
Defining a Table Structure
• The first step to creating a table is to specify the table
structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
• Once the table structure is in place, you can start
entering data into the table.
56
Using the <table>, <tr>, and <td> Tags
57
The General Table Syntax
two rows
two columns
58
Columns within a Table
• HTML does not provide a tag for table columns.
• In the original HTML specifications, the number of
columns is determined by how many cells are inserted
within each row.
– for example, if you have four <td> tags in each table
row, that table has four columns
59
HTML Structure of a Table
beginning of
the table
structure
table cells
You do not need to indent

the <td> tags or place
first row in the them on separate lines,
table
but you may find it easier
to interpret your code if
you do so.
After the table structure

is in place, you’re ready
to add the text for each
cell.
end of the
table structure
60
Creating Headings with the <th> Tag
• HTML provides the <th> tag for table headings.
• Text formatted with the <th> tag is centered within the
cell and displayed in a boldface font.
• The <th> tag is most often used for column headings,
but you can use it for any cell that you want to contain
centered boldfaced text.
61
Adding Table Headings to the Table
Text in cells formatted
with the <th> tag is
bold and centered
above each table
column.
table
headings
62
Creating a Table Caption
• HTML allows you to specify a caption for a
table.
• The syntax for creating a caption is: <caption
align=“alignment”>caption text</caption>
– alignment indicates the caption placement
– a value of “bottom” centers the caption
below the table
– a value of “top” or “center” centers the
caption above the table
63
Table Captions
64
Result of a Table Caption
65
Modifying the Appearance of a Table
• You can modify the appearance of a table by adding:
– borders
– background color
• HTML also provides tags and attributes to control the
placement and size of a table.
66
Adding a Table Border
• By default, browsers display tables without table
borders.
• A table border can be added using the border attribute
to the <table> tag.
• The syntax for creating a table border is: <table
border=“value”>
– value is the width of the border in pixels
67
Tables with Different Borders Values
This figure shows the effect on a table’s border when the border size is varied.
68
Adding a 5-Pixel Border to a Table
Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.
69
Working with Table and Cell Size
• The size of a table is determined by text it contains in its cells.
• By default, HTML places text on a single line.
• As you add text in a cell, the width of the column and table expands
to the edge of the page.
– once the page edge is reached, the browser reduces the size of
the remaining columns to keep the text to a single line
• You can insert line break, paragraph, or other tags within a cell.
• When the browser can no longer increase or decrease the size of
the column and table it wraps the text to a second line.
• As more text is added, the height of the table expands to
accommodate the additional text.
• But, you can manually define the size of the table and its cells.
70
Defining the Table Size
71
Defining Cell and Column Sizes
72
Aligning a Table on the Web Page
73
Aligning the Contents of a Table
• By default, cell text is placed in the middle of the cell,
aligned with the cell’s left edge.
• By using the align and valign attributes, you can specify
the text’s horizontal and vertical placement.
• To align the text for a single column, you must apply
the align attribute to every cell in that column.
74
Values of the Align and Valign Attributes
75
Spanning Rows and Columns
• To merge several cells into one, you need to create a
spanning cell.
• A spanning cell is a cell that occupies more than one row
or column in a table.
• Spanning cells are created by inserting the rowspan and
colspan attribute in a <td> or <th> tag.
• The syntax for these attributes is: rowspan=“value”
colspan=“value”
– value is the number of rows or columns that the cell spans in the
table
76
Example of Spanning Cells
This cell BA Degree - University of Ruhuna

spans two
1000 ICT11613
columns
2000 ICT12613
3000
Dept. of IT, FoHSS, UoR
77
A Table Structure with a Row-Spanning Cell
four table
cells in the
first row
only three table

cells are required
for the second
and third rows
HTML code
resulting table
78
Example of Spanning Cells
This cell
spans two this cell
columns spans
and two three
rows columns
This cell
spans three
rows
79
Adding Spanning Cells to a Table
80
Another Example of Spanning Cells
81
Another Example of Spanning Cells
82
Applying a Background Color
83
Specifying Table, Row, and Cell Colors
Specifying Table, Row, and Cell Colors
The bordercolor Attribute
• By default, table borders are displayed in two shades of gray
that create a three-dimensional effect.
• The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
– color is an HTML color name or hexadecimal color value
<table border=“10” bordercolor=“blue”>
Internet Explorer Netscape

86
Applying a Table Background
• Add a background image to your tables using the
background attribute.
• A background can be applied to the entire table or to a
cell.
parch.jpg
<table background=“parch.jpg”> <td background=“parch.jpg”>
87
Designing a Page Layout with Tables
• HTML tables are most often used to define the layout
of an entire Web page.
• If you want to design a page that displays text in
newspaper style columns, or separates the page into
distinct sections, you’ll find tables an essential and
useful tool.
88
Table Layout of a Web Page
620 pixels
1) logo
120 pixels 500 pixels

2) list of 3) body
links
a sample table
layout of a Web
page.
4) address and phone number
89
Using Nested Table
• Tables can be created within another table, making the
Web page easier to manage.
a sketch of a web
page using nested
tables
90
Using Nested Table
91
10/31/2024
The Result of the Web Page
using Nested Tables
a sample web page
using nested
tables
92
Sample Template based on Class Web Page
Designing forms
10/31/2024
94
Introduction
• Forms provide a method for true interaction between
users and the publisher of a website, with an
immediacy that could never be achieved in any other
medium.
• With forms, you can solicit input from a user in order
to provide a customized response on-the-fly or just
collect the data for later used.
• Forms can be used for functions as simple as surveys
and guestbook, or as complex as online commerce
systems.
Introduction to forms
• HTML form tags alone don’t make forms work; they

merely provide an interface for gathering data.
• The real work is done by forms-processing applications
on the server (CGI, PHP, ASP, Java, etc.)
The basic <form>
• The <form> tag, which is used to designate a form, contains
the information necessary for interacting with a program on
the server.
• A form comprises many controls (checkboxes, menus, text-
entry field, buttons, etc.) used for entering information.
• When a user has completed the form and presses the
“submit” button, the browser takes the information,
arranges it into name/value pairs, encodes the information
for transfer, and then sends it off to the server.
• You can have several forms within a single document, but
they cannot be nested or overlap.
The form attributes
• The action attribute in the <form> tag provides the URL of the
program to be used for processing the form data.
• The method attribute specifies 1 of 2 methods, either get or post,
by which the information from the form can be transmitted to the
server.
– If using the get method (the default), the name/value pairs are
appended to the URL of the action attribute to form a URI
(Uniform Resource Indicator). The data is separated from the
URL with a question mark and multiple name/value pairs are
separated from each other with ampersands
http://hss.ruh.ac.lk/process.php?firstname=Kamal&lastname=Silva
Form elements
• There are a variety of controls that can be used for gathering
information from a form.
• Every form control (except submit and reset) requires that you give it
a name so the form-processing application can retrieve the
information. For easier processing, the value of the name should not
have any spaces (use underscores instead).
• Each form element should also contain an id attribute which will have
the same value as the name attribute. This will aid in the use of
JavaScript for performing additional validation or user interface
enhancements.
• If you have a form with just a single input element, hitting the Enter
key submits the form without requiring a specific Submit button in
the form
The INPUT Tag
• <INPUT TYPE =
• TYPE must be one of:
– "text"
– "password"
– "checkbox"
– "radio”
– ”submit"
– ”reset”
– “button”
– “hidden”
– “date”
Input controls: <input type=“text”>
• Text entry (type=“text”): the simplest type of form element is the text entry
field which is the default setting for the <input> element. This field allows the
user to enter a single word or a line of text. By default, the browser displays a
text-entry box that is approximately 20 characters wide, but can be set to any
length using the size attribute.
• By default, the user can type an unlimited number of characters into the field
(the display scrolls to the right if the text exceeds the width of the supplied
box), but you can set a maximum number of characters using the maxlength
attribute.
• Use the value attribute to specify default text to appear when the form is
loaded. This can be changed by the user.
• The following code creates a text field with a size of 15 characters, a maximum
length of 50 characters, and the text “enter you name” displayed in the field
Input controls: <input type=“password”>
• A password field (type=“password”) works just like text
entry, except the characters are hidden from view using an
asterisk (*) or bullet (·) characters (which one depends on
the browser). Although the characters are not displayed in
the browser, the actual characters are available in the form
data, so this alone is not a secure system for transmitting
passwords.
Input controls: <input type=“checkbox”>
• Checkboxes (type=“checkbox”) are typically used for yes or no
questions. When they are checked, the corresponding value is
transmitted with the form to the processing program on the server.
Checkboxes can be used individually to transmit specific
name/value pairs to the server when checked. By default a
checkbox is not checked. To make it checked when the page loads,
simply add the checked attribute to the tag.
• No text is displayed next to the checkbox. It must be explicitly
added.
Input controls: <input type=“radio”>
• Radio buttons (type=“radio”) are used to select one option among
several choices. When a radio button is checked, its corresponding
value is sent to the server. Unlike checkboxes, only a single radio
button can be selected from a group with the same name. Adding the
checked attribute to multiple buttons in the same group could have
any of them selected by default
Input controls: type=“submit” & type=“reset”
• Every form (unless it consists of exactly one text filed)
needs a submit button to initiate the transmission of
information to the server. By default, the submit
button (type=“submit”) says “Submit” or “Submit
Query,” but you can change it by adding your own text
after the value attribute
• The reset button (type=“reset”) reverts all form
controls back to the state they were in when the form
was loaded
Input controls: <input type=“button”>
• This button (type=“button”) has no predefined
function, but is a generic control that can be
customized with JavaScript. Use the value
attribute to write your own text on the button.
The data from a type=“button” input element is
never sent when a form is submitted
Input controls: <input type=“file”>
• The file-selection form field (type=“file”) lets users select a
file stored on their computer and send it to the server
when they submit the form. It is displayed as a text entry
field with an accompanying “Browse” button for selecting
the file.
• Like other text fields, you can set the size and maxwidth
values as well as the field’s default text. When using the
file input type, you should specify
enctype=“multipart/form-data” in the <form> tag.
Text Area: <textarea>…</textarea>
• The <textarea> tag creates a multiline, scrollable text entry box that
allows users to input extended text entries.
• Specify the number of lines of text the area should display using the
rows attribute. The cols attribute specifies the width. Scrollbars are
provided automatically if the user types more text than fits in the
allotted space.
• The text that appears between the opening and closing <textarea>
will be the initial contents of the text entry window when the form is
displayed
Creating menus with the <select> tag
• The <select> tag creates a menu of options that is more compact
than groupings of checkboxes or radio buttons. A menu displays as
either a pull-down menu or as a scrolling list of choices, depending
on the size attribute. The <select> tag will contain any number of
<option> tags which represent the choices available
• The <select> element displays as a drop-down list of options when
no size specification is listed or when size=1. In a drop-down menu,
only one item may be selected at a time. By default, the first
<option> in the list displays when the form loads, but you can
preselect another option by adding selected within its <option> tag.
• Use the selected attribute in the <option> tag to indicate the
default value for the menu.
http://www.google.com
http://www.google.com/search? q=Multimedia
Ex

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

ICT22614 –

• The basic language that is used

• When browsing (using a Web browser),

CAN USE ANY TEXT AN HTML DOCUMENT

• Size and Color are Attributes

• HTML is not case-sensitive

• Contains general information about the document.

Head section tags

• Placed within the HEAD structure

• Contain all the parts that visitors can see

• Open Notepad and Write your

• From the File menu, select Save

• Open a web browser

HTML Text Tags:

We provide this information

Single or double quotes may be used to hold

<HR SIZE=“25” WIDTH=“150”

<font color=“red” size=“3” face=“Garamond”>

Some content characters may

How would you mark up the

You do not need to indent

After the table structure

Only the outside

This cell BA Degree - University of Ruhuna

only three table

<table border=“10” bordercolor=“blue”>

Internet Explorer Netscape

<table background=“parch.jpg”> <td background=“parch.jpg”>

120 pixels 500 pixels

4) address and phone number

• HTML form tags alone don’t make forms work; they

You might also like