CH 2

Web Programming
Chapter Two
HTML AND ITS BASICS
Lecture I
By Tesfahun N.
What is
 What is HTML
 Basic Tags: Hyperlinks, Images, Formatting
 Headings and Paragraphs
 The <!DOCTYPE> Declaration
 The <head> Section: Title, Meta, Script, Style
 The <body> Section
 Lists: <ol>, <ul> and <dl>
 The <div> and <span> elements
 HTML Tables and HTML Forms

What is web page?
A Web page is a document for the World Wide Web that
is identified by URL.
A Web page can be accessed and displayed on a monitor

or mobile device through a Web browser .
The data found in a Web page is usually in HTML or

XHTML format.
 The Web pages usually also contain other resources such

as style sheets, scripts and images for presentation.
3
What is HTML?
 It is short form of "HyperText Markup Language".
 It is a language for describing web-pages using ordinary text.
 HTML is not a complex programming language.
HTML Files
 Every web page is actually a HTML file.

HTML file is just a plain-text file, with .html file extension
instead of .txt, and
 A web site will often contain many html files that link to each
other.
4
HTML Tags
 HTML tags are the hidden keywords within a web page
that define how your web browser must format and
display the content
 Most tags must have two parts,
 an opening <html>
 a closing part </html>
 There are some tags that are an exception to this rule,
and where a closing tag is not required. Eg <img>

5
Creating HTML Pages
 An HTML file must have .html file extension
 HTML files can be created with text editors:

 NotePad,
 NotePad ++,
 Sublime
 Comodo
 Visual Studio etc..
6
HTML page structure
HTML Structure
 HTML is included 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 have attributes:

• Eg , colore , size , height etc….
 HTML describes structure using two main sections:

 <head>
 <body>
8
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.
For performance reasons, formatting can be
sacrificed
9
First HTML Page
test.html
<!DOCTYPE html>
<html>
<head>
< t i t l e > w e l l came t o WP</title>
</head>
<body>
<h1>My F i r s t Heading</h1>
<p>My f i r s t paragraph.</p>
</body>
</html> 10
The <!DOCTYPE> Declaration
 HTML documents must start with a document type definition (DTD)
• It informs the web browser about the type and version of HTML
 HTML 4.01, XHTML 1.0 XHTML 1.1, HTML 5
• it helps the browser to handle and load it properly.
• Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
• See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of

possible doctypes
11
Cont..
 The <html> root element of an HTML page
 The <head> contains meta information
 The <title> element specifies a title of page
The <body> defines the document's body, and is a

container for all the visible contents
Some Simple Tags
• Hyperlink Tags
<a href="https://www.youtube.com/"
>Link to youtube </a>
• Image Tags
<img src="logo.gif" / >
• Text formatting tags

This t e xt i s <em>emphasized.</em>
<br />new line<br / >
Thi s one i s <strong>more emphasized. </strong>
13
Some Simple Tags – Example
some-tags.html
<body>
<a href="https://www.youtube.com/" t i t l e =
“youtube site">This i s a l i n k . < / a >
<br / >
<img src="logo.gif" / >
<br / >
<strong>Bold</st r ong> and <em>i t a l i c</em> te xt .
14
HTML Attributes
 All HTML elements can have attributes
Attributes provide additional information about

elements
 Attributes are always specified in the start tag
Attributes usually come in name/value pairs like:

name="value"
href Attribute
The <a> tag defines a hyperlink. The href
attribute specifies the URL of the page the link
goes to:
• Example
• <a href="https://www.w3schools.com">Visit
W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an
HTML page.
The src attribute specifies the path to the image to be
displayed:
• Example
• <img src="img_girl.jpg">
The alt Attribute
The required alt attribute for the <img> tag
specifies an alternate text for an image, if the
image for some reason cannot be displayed
• Example
• <img src=“logo.jpg" alt=“here it is the logo">

Tags Attributes
 Few attributes can apply to every element:
 id, style, class, title
 The id is unique in the document
Content of title attribute is displayed as hint when the
element is hovered with the mouse
19
The width and height Attributes
The <img> tag should also contain the width and

height attributes, which specifies the width and
height of the image (in pixels):
• Example
• <img src="img_girl.jpg" width="500" height="600">
The style Attribute
The style attribute is used to add styles to an

element, such as color, font, size, and more.
• Example
• <p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside
the <html> tag, to declare the language of the Web
page. This is meant to assist search engines and
browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Headings and Paragraphs
 Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
 Paragraph Tags
<p>This i s my f i r s t paragraph</p>
<p>This i s my second paragraph</p>
 Sections: div and span

<di v style="background: skyblue;">
This i s a div</div> 23
Headings and Paragraphs – Example
headings.html
<!DOCTYPE HTML>
<html>
<head><t i t le> Headin gs and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<p>This i s my f i r s t paragraph</p>
<p>This i s my second paragraph</p>
<div style="background:pink">
This i s a d i v < / d iv >
</body>
24
</html>
The <head> Section
 Contains information that doesn’t show directly on the
viewable page
 Begins with <head> and ends with </head>
 Contains mandatory single <title> tag
 Can contain some other tags, e.g.
 <meta>
 <script>
 <link>
 <style>
25
Header
HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My F i r s t HTML Page</title>
</head>
<body>
<p>This i s some t e x t . . . < / p >
</body>
</html>
26
<head> Section: <title> tag
 Title should be placed between <head> and </head> tags
<head>
<title>here i s the t i t l e section
</title>
</head>
 Used to specify a title in the window title bar
 Search engines and people rely on titles
27
<head> Section: <meta>
 Meta tags additionally describe the content contained
within the page
<meta name="description" content="HTML t u t o r i a l " / >
<met a name="keywords" content="html, web design,

styles" / >
<meta name="author" content="Chris Brewer" / >
<met a http- equiv="refresh" content="5;

url=http://www.telerik.com" / >
28
<head> Section: <script>
The <script> element is used to embed scripts into an HTML
document
 Script are executed in the client's Web browser
 Scripts can live in the <head> and in the <body> sections
 Supported client-side scripting languages:
 JavaScript (it is not Java!)
 VBScript
29
The <script> Tag – Example
The <script> tag is used to embed a client-side script
(JavaScript). scripts-example.html
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"te x t/ ja vascr ip t " >
sayHello();
</script>
</body>
</html>
30
<head> Section: <style>
The <style> element embeds formatting
information (CSS styles) into an HTML page
style-example.html
<html>
<head>
<style type="text/css">
p { f on t- s iz e : 12pt; line -h eight : 12pt; }
p : f i r s t - l e t t e r { f o nt- s iz e : 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br / >
<span>Test uppercase</span>.
</p>
</body>
</html>
31
<body> Section:Introduction
The <body> section describes the viewable
portion of the page
 Starts after the <head> </head> section
 Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
< ! - - This i s the Web page body - - >
</body>
</html>
32
Comments:  Tag
 Comments can exist anywhere between the <html></html> tags
 Comments start with 
<!–- Telerik Logo ( a JPG f i l e ) - - >

<img src="logo.jpg" al t=“ Tel er ik Logo">
<!–- Hyperlink to the web s i t e - - >
<a href="http://telerik.com/">Tel erik</a>
<!–- Show the news table - - >
<table class="newstable">
...
33
Text Formatting
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 34

Hyperlinks: <a> Tag
 Link to a document called form.html on the same server in
the same directory:
<a href="form.html">Fill Our Form</a>
Link to a document called p a re nt . h t ml on the same server in
the parent directory:
<a href="../parent.html">Parent</a>
Link to a document called c a t . h t m l on the same server in the
subdirectory s tu ff:
<a href="stuff/cat.html">Catalog</a>
35
Hyperlinks: <a> Tag (2)
 Link to an external Web site:
Always use a full URL, including "http://",
not just www.somesite.com
<a href= "h t tp : / /www.devbg .org"
target="_blank">BASD</a>
 Link to an e-mail address:
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
36
Hyperlinks and Sections
 Link to another location in the same document:
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
 Link to a specific location in another document:
<a href="chapter3.html#section3.1.1">Go to
Section 3.1.1</a>
<!–- I n chapter3.html - - >
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
37
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br / >
<a href="../parent.html">Parent</a> <br / >
<a href="stuff/cat.html">Catalog</a> <br / >
<a href="http://www.devbg.org" target="_blank">BASD</a> <br / >
<a href="mailto:bugs@example.com?subject=Bug Report">Please report bugs here
(by e-mail only)</a>
<br / >
<a href="apply-now.html"><img src="apply-now-button.jpg” /></a> <br / >
<a href="../english/index.html">Switch to English version</a> <br / >

38
Links to the Same Document – Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
. . . t h e rest of the table of contents...
< ! - - The document text follows here -- >
<h2 id="section1">Introduction</h2>
. . . Section 1 follows here . . .
<h2 id="section2">Some background</h2>
. . . Section 2 follows here . . .
<h3 id="section2.1">Project History</h3>
. . . Section 2.1 follows here . . .
39
Miscellaneous Tags
 <hr/>: Draws a horizontal rule (line):
<hr size="5" width="70%" / >
 <center></center>: Deprecated!
<center>Hello World!</center>
 <font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
40
Miscellaneous Tags – Example
misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" / >
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
</body>
</html>
41
Ordered Lists: <ol> Tag
 Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Gr apefr uit< /l i>
</ol>
 Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit a. Apple iii. Grapefruit
A. Apple b. Orange I. Apple
c. Grapefruit II. Orange
B. Orange
C. Grapefruit III. Grapefru
it
43
Unordered Lists: <ul> Tag
 Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li >
<li>Orange</li>
<li>Gr apefr uit</ l i>
</ul>
 Attribute values for type are:

 disc, circle or square
• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
44
Definition lists: <dl> tag
 Create definition lists using <dl>
 Pairs of text and associated definition; text is in <dt> tag,

definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
 Renders without bullets
 Definition is indented
45
Lists – Example
<ol type="1"> lists.html
<li>Apple</li>
<li>Orange</li>
<l i> Gr ap e fr u it</l i>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<l i> Gr ap e fr u it</l i>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
46
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ 47 £
Japanese Yen ¥ ¥
Block and Inline Elements
 Block elements add a line break before and after them
 <div> is a block element
 Other block elements are <table>, <hr>, headings, lists,

<p> and etc.
Inline elements don’t break the text before and after

them
 <span> is an inline element
 Most HTML elements are inline, e.g. <a>

48
The <div> Tag
 <div> creates logical divisions within a page
 Block style element
 Used with CSS
 Example:
div.html
<div style="font-size:24px; color:red">DIV

example</div>
49
The <span> Tag
 Inline style element
 Useful for modifying a specific portion of text
Don't create a separate area(paragraph)
in the document
s p a n .h tm l
 Very u s e f u l withCSS
<p>This one i s <span style="color:red; f o n t -
weight:bold">only a test</span>.</p>
<p>This onei s another <span style="font-
size:32px; font-weight:bold">TEST</span>.</p>
50
Cont..
HTML Tables (2)
 Tables represent tabular data
 A table consists of one or several rows
 Each row has one or more columns
 Start and end of a table

<table> . . . </table>
 Start and end of a row

<tr> . . . < / t r >
 Start and end of a cell in a row

<td> . . . </td> 53
Simple HTML Tables – Example (2)
<table cellspacing="0" cellpadding="5" bgcolor="cyan"
border="3px">
<tr>
<td>Data one</td>
<td> Deta Two</td>
</tr>
<tr>
<td>Data three </td>
<td>Data Four </td>
</tr>
<tr>
<td>Data Five </td>
<td>Data Six</td>
</tr>
</table> 54
Cell Spacing and Padding
 Tables have two important attributes:
 cellspacing  cellpadding
cell cell cell cell
cell cell cell cell

 Defines
the
empty space  Defines the empty
between cells space around the cell
content
55
Cell Spacing and Padding – Example
table-cells.html
<table cellspacing="15" cellpadding="0" bgcolor="pink"
border="3px">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="15" bgcolor="cyan"
border="3px"> <tr><td>First</td>
<td>Second</td></tr>
</table>
56
Column and Row Span
• Table cells have two important attributes:
 Colspan  rowspan
colspan="1" colspan="1" rowspan="1"
rowspan="2"
cell[ cell[ cell[

1,1] 1,2] cell[1,1] 1,2]
cell[
cell[2,1]
2,1]
colspan="2" rowspan="1"
 Defineshow many  Defines how
columns the cell many rows the
occupies cell occupies
57
HTML Forms
Forms are the primary method for gathering data
from site visitors
 Create a form block with
<form></form>
 Example:
The “method" attribute tells how the form data
should be sent – via GET or POST request
data should be sent 58

Form Fields
 Single-line text input fields:
<input type="text" name="FirstName"
value="This i s a t e x t f i e l d " / >
 Multi-line textarea fields:

<textarea name="Comments">This i s a
m u l t i -l i n e t e x t field</textarea>
 Hidden fields contain data not shown to the user:

<input type="hidden" name="Account"
value="This is a hidden t e x t f i e l d " / >
 Often used by JavaScript code

59
Form Input Controls
 Checkboxes:
<input type="checkbox" name="fruit"
value="apple" / >
 Radio buttons:
<input type="radio" name="title"
value="Mr." / >
Radio buttons can be grouped, allowing only
one to be selected from a group:
<input type="radio" name="city" value="Lom" / >
<input type="radio" name="c i t y " value="Ruse" / >
60
Other Form Controls
 Dropdown menus:
<select name=“department">
<option value="Value 1"
sele cted="se lected">cs</opt i o n>
<option value="Value 2">IS</option>
<option value="Value 3">IT</option>
</select>
 Submit button:
<input t ype="submi t " name="submitBtn"

value="Apply Now" / >
61
Other Form Controls (2)
 Reset button – brings the form to its initial state
<input t ype="reset " name="r esetBtn"
value="Reset the form" / >
Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" sr c="submi t . gi f "
name="submitBtn" alt="Submit" / >
Ordinary button – used for Javascript, no default

action
<input type="button" value="click me" / >
62
 Password input – a text field which masks the entered
text with * signs
<input type="password" name="pass" / >
 Multiple select field – displays the list of items in multiple

lines, instead of one
<select name="products" m u l t i p l e = " mu lt i p l e " >
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
63
 File input – a field used for uploading files
<input type="file" name="photo" / >
Form labels are used to associate an explanatory
text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" / >
Fieldsets are used to enclose a group of related form

fields:
 The <legend> is the fieldset's title.
64
form.html
HTML Forms – Example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" / >
<fieldse t style="width:150px"><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<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 / > <br>
<label for="studentid">Student ID</label>
<input type="password" name="studentid" / >

</fieldse t> 65
form.html (continued)
<fieldse t style="width:150px"><legend>Personal Details</legend>

<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" / >
<br>
<br>
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" / >
<br / >
<br>
Gender:
<input name="gender" type="radio" id="gm" value="m" / >
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" / >
<label for="gf">Female</label>
<br / > <br>
<label for="email">Email</label>
<input type="text" name="email" id="email" / >
</fieldse t>
66
Cont..
Cont..
68
What is Multimedia?
Multimedia comes in many different formats.

It can be almost anything you can hear or see,
like images, music, sound, videos, records, films,
animations, and more.
The HTML <video> Element
<video width="320" hei g h t="240" c o n t r o l s >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your b rowser does no t suppo rt the video ta g .
</video>
The HTML <audio> Element
<audio c ontro ls>

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
HTML <audio> Autoplay
<audio c o n t r o l s autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
HTML Plug-ins
Plug-ins are computer programs that extend the standard
functionality of the browser.
plug-ins were designed to be used for many different

purposes:
 To run Java applets
 To run Microsoft ActiveX controls
 To display Flash movies
 To display maps
 To scan for viruses
 To verify a bank id
Cont..
The <object> element defines an
embedded object within an HTML
document.
<o b j e c t width="100%" h ei gh t="500px " data=
"s n ip p et . ht ml ">< / ob je ct>
The <embed> element can also be used to
include HTML in HTML:
<embed width="100%" he i g h t="500px" s r c ="s
n ip pe t .h t ml" >
Reading Assignment
HTML Graphics
• 2.2.10.1. HTML Canvas
• 2.2.10.2. HTML SVG
?

CH 2

Uploaded by

Copyright:

Available Formats

CH 2

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

CH 2

Uploaded by

Copyright:

Available Formats

Web Programming

 Basic Tags: Hyperlinks, Images, Formatting

 Headings and Paragraphs

 The <!DOCTYPE> Declaration

 The <head> Section: Title, Meta, Script, Style

 The <body> Section

 Lists: <ol>, <ul> and <dl>

 The <div> and <span> elements

 HTML Tables and HTML Forms

A Web page can be accessed and displayed on a monitor

The data found in a Web page is usually in HTML or

 The Web pages usually also contain other resources such

 It is a language for describing web-pages using ordinary text.

 HTML is not a complex programming language.

 Every web page is actually a HTML file.

 Most tags must have two parts,

 a closing part </html>

 There are some tags that are an exception to this rule,

and where a closing tag is not required. Eg <img>

 HTML files can be created with text editors:

• Begins with <html> and ends with </html>

 Elements (tags) are nested one inside another:

<html> <head></head> <body></body> </html>

 Tags have attributes:

 HTML describes structure using two main sections:

increase readability and facilitate debugging.

 Every block element should start on a new line.

 Every nested (block) element should be indented.

For performance reasons, formatting can be

• See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of

 The <head> contains meta information

 The <title> element specifies a title of page

The <body> defines the document's body, and is a

• Text formatting tags

Attributes provide additional information about

 Attributes are always specified in the start tag

Attributes usually come in name/value pairs like:

• <img src=“logo.jpg" alt=“here it is the logo">

 id, style, class, title

 The id is unique in the document

Content of title attribute is displayed as hint when the

element is hovered with the mouse

The <img> tag should also contain the width and

The style attribute is used to add styles to an

 Heading Tags (h1 – h6)

 Sections: div and span

 Begins with <head> and ends with </head>

 Contains mandatory single <title> tag

 Can contain some other tags, e.g.

 Used to specify a title in the window title bar

 Search engines and people rely on titles

<meta name="description" content="HTML t u t o r i a l " / >

<met a name="keywords" content="html, web design,

<meta name="author" content="Chris Brewer" / >

<met a http- equiv="refresh" content="5;

 Script are executed in the client's Web browser

 Scripts can live in the <head> and in the <body> sections

 Supported client-side scripting languages:

 JavaScript (it is not Java!)

 Comments start with