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
[Link]
<!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"
"[Link]
[Link]">
• See [Link] 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="[Link]
>Link to youtube </a>
• Image Tags
<img src="[Link]" / >
• 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
[Link]
<body>
<a href="[Link] t i t l e =
“youtube site">This i s a l i n k . < / a >
<br / >
<img src="[Link]" / >
<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="[Link]
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=“[Link]" 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>
<h3>Sub heading 3</h3>
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
[Link]
<!DOCTYPE HTML>
<html>
<head><t i t le> Headin gs and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<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=[Link] / >
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). [Link]
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
[Link]("<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
[Link]
<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 <!-- and end with -->
<!–- Telerik Logo ( a JPG f i l e ) - - >
<img src="[Link]" al t=“ Tel er ik Logo">
<!–- Hyperlink to the web s i t e - - >
<a href="[Link] 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 [Link] on the same server in
the same directory:
<a href="[Link]">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="../[Link]">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/[Link]">Catalog</a>
35
Hyperlinks: <a> Tag (2)
Link to an external Web site:
Always use a full URL, including "[Link]
not just [Link]
<a href= "h t tp : / /[Link] .org"
target="_blank">BASD</a>
Link to an e-mail address:
<a href="[Link]
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="[Link]#section3.1.1">Go to
Section 3.1.1</a>
<!–- I n [Link] - - >
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
37
Hyperlinks – Example
[Link]
<a href="[Link]">Fill Our Form</a> <br / >
<a href="../[Link]">Parent</a> <br / >
<a href="stuff/[Link]">Catalog</a> <br / >
<a href="[Link] target="_blank">BASD</a> <br / >
<a href="[Link] Report">Please report bugs here
(by e-mail only)</a>
<br / >
<a href="[Link]"><img src="[Link]” /></a> <br / >
<a href="../english/[Link]">Switch to English version</a> <br / >
38
Links to the Same Document – Example
[Link]
<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
[Link]
<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"> [Link]
<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:
[Link]
<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
[Link]
<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
Other Form Controls (3)
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
Other Form Controls (4)
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
[Link]
HTML Forms – Example
<form method="post" action="[Link]">
<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
[Link] (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="[Link]" 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="[Link]" 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="[Link]" 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
• [Link]. HTML Canvas
• [Link]. HTML SVG
?
