CH 2

Chapter Two
Web Design and Development

Fundamentals
By Tesfahun N.
Outline
❖ What is HTML
➢ Basic HTML syntax
➢ Basic Tags: Hyperlinks, Images, Formatting
➢ Headings and Paragraphs
➢ 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
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 file a plain-text file
❖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,
✓Eg 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 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
7
HTML page structure
❖HTML describes structure using two main
sections:
✓ <head>
✓ <body>
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>

9
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.
10
HTML Tags
❖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 text is <b>bold.</b>
<br/>new line<br />
This one is <I> italic </I>
12
Some Simple Tags – Example
some-tags.html
<body>
<a href="https://www.youtube.com/" title=
“youtube site">This is a link.</a>
<br />
<img src="logo.gif" />
<br />
<b>Bold</b> and <i>italic</i> text.
</body>
13
First HTML Page
test.html
<!DOCTYPE html>
<html>
<head>
<title>well came to WP</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 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"
Cont..
❖ Tags have attributes and values :
• Eg , colore , size , height etc….
16
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.google.com">Visit google</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
❖ Tag attributes can apply to every element:
✓Id,
✓Style,
✓Class,
✓Title etc
20
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
❖Adding the lang attribute inside the <html> tag, to declare
the language of the Web page.
❖Lang attribute 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 is my first paragraph</p>
<p>This is my second paragraph</p>
❖Sections: div and span

<div style="background: skyblue;">
This is a div</div>
24
Headings and Paragraphs – Example
headings.html
<html>
<head>
<title>Headings and paragraphs</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:pink">
This is a div</div>
</body>
25
</html>
The <head> Section
❖Contains information that doesn’t displayed to the page
❖Begins with <head> and ends with </head>
❖Contains mandatory single <title> tag
❖Can contain some other tags, e.g.
✓<meta>
✓<script>
✓<link>
✓<style>
26
Header
<!DOCTYPE HTML>
HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
27
<head> Section: <title> tag
❖Title should be placed between <head> and </head> tags
<head>
<title>here is the title section </title>
</head>
❖Used to specify a title in the window title bar
28
<head> Section: <meta>
❖Meta tags additionally describe the content contained
within the page
<meta name="description" content="HTML tutorial" />
<meta name="keywords" content="html, web design, styles" />
<meta name="author" content="Chris Brewer" />
<meta http-equiv="refresh" content="5;

url=http://www.telerik.com" />
29
<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
30
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= "text/javascript">
sayHello();
</script>
</body>
</html>
31
<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 { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
32
<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>

</body>
</html>
33
Comments:  Tag
❖Comments can exist anywhere between the <html></html> tags
❖Comments start with 
<!–- Telerik Logo (a JPG file) -->

<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...
34
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

35
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 parent.html on the same server in
the parent directory:
<a href="../parent.html">Parent</a>
❖Link to a document called cat.html on the same server in the
subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
36
Hyperlinks: <a> Tag (2)
❖Link to an external Web site:
➢Always use a full URL, including "http://",
not just www.somesite.com
<a href="http://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>
37
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>
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
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 />
...the rest of the table of contents...

<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
Lecture II
…..
Loading
Ordered Lists: <ol> Tag
❖Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</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
B. Orange c. Grapefruit II. 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>Grapefruit</li>
</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>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</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> <label>

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 section
• </div>
49
•
Cont..
The <span> Tag
❖Inline style element
❖Useful for modifying a specific portion of text
❖Don't create a separate area(paragraph)
in the document
❖Very useful with CSS
span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
51
HTML Tables
HTML Tables (2)
❖Tables represent tabular data
✓A table consists of one or several rows
✓Each row has one or more columns
❖Table Start and end of a table

<table> ... </table>
❖Rows Start and end of a row

<tr> ... </tr>
❖Columns 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>
• <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"
 Defines how many  Defines how
columns the cell many rows the
occupies cell occupies 57
HTML Forms
58
HTML Forms
❖Forms are the primary method for gathering data
from site visitors
❖Create a form block with
<form></form>
The “method" attribute tells how the form
❖Example:
data should be sent – via GET or POST request
<form name="myForm" method=“POST/GET"

action="path/to/some-script.php">
……
...
</form>
The "action" attribute tells where the
form data should be sent 59
Form Fields
❖Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />
❖Multi-line textarea fields:

<textarea name="Comments">This is a
multi-line text field</textarea>
❖Hidden fields contain data not shown to the user:

<input type="hidden" name="Account"
value="This is a hidden text field" />
❖Often used by JavaScript code

60
Form Input Controls
❖Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />
❖Radio buttons:
<input type="radio" name="title"
value="M." />
❖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="city" value="Ruse" />
61
Other Form Controls
❖Dropdown menus:
<select name=“department">
<option value="Value 1"
selected="selected">cs</option>
<option value="Value 2">IS</option>
<option value="Value 3">IT</option>
</select>
❖Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />
62
Other Form Controls (2)
❖Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
❖Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />
❖Ordinary button – used for Javascript, no default

action
<input type="button" value="click me" />
63
❖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" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
64
❖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.
65
HTML Forms – Example
66
form.html
HTML Forms – Example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset style="width:300px"><legend>Personal Details</legend>
<table>
<tr>
<td><label for="fname">First Name</label></td>
<td><input type="text" name="fname" id="fname" /></td>
</tr>
<tr>
<td><label for="lname">Last Name</label></td>
<td><input type="text" name="lname" id="lname" /></td>
67
</tr>
form.html (continued)
<tr>
<td><label for="degree">Degree</label></td>
<td><select name="degree" id="degree">
<option value="BA">cs</option>
<option value="BS">SE</option>
<option value="MBA"
selected="selected">IT</option>
</select></td>
</tr>
<tr>
<td>Student ID</td>
<td><input type="text" name="s" /></td>
</tr>
68
Cont..
<tr>
<td>Password</td>
<td><input type="Password" placeholder="Enter Password"
name="s" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<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></td>
</tr>
Cont.…
<tr>
<td></td>
<td><button type="submit">send</button>
</td>
</tr>
</fieldset>
</form>
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" height="240" controls>
<source src=“m.mp4" type="video/mp4">
<source src=“m.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The HTML <audio> Element
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
HTML <audio> Autoplay
<audio controls 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.
❖It was designed to embed plug-ins (like Java applets,

PDF readers, and Flash Players) in web pages, but can
also be used to include HTML in HTML:
<object width="100%" height="500px" data="snippet.html"></object>
❖The <embed> element can also be used to include HTML

in HTML:
<embed width="100%" height="500px" src="snippet.html">

Reading Assignment
HTML Graphics
• HTML Canvas
• HTML SVG
Thanks
?

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

Chapter Two

Web Design and Development

➢ Basic HTML syntax

➢ Basic Tags: Hyperlinks, Images, Formatting

➢ Headings and Paragraphs

➢ 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

❖HTML is not a complex programming language.

❖HTML file a plain-text file

❖Most tags must have two parts,

✓Eg an opening <html>

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

❖HTML files can be created with text editors:

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

❖Elements (tags) are nested one inside another:

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

✓HTML 4.01, XHTML 1.0 XHTML 1.1, HTML 5

➢it helps the browser to handle and load it properly.

❖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:

❖The href attribute specifies the URL of the page

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

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

❖Lang attribute assist search engines and browsers.

❖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

<meta name="description" content="HTML tutorial" />

<meta name="keywords" content="html, web design, styles" />

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

<meta http-equiv="refresh" content="5;

✓Script are executed in the client's Web browser

✓Scripts can live in the <head> and in the <body>

❖Supported client-side scripting languages:

✓JavaScript (it is not Java!)

❖Comments start with

<!–- Telerik Logo (a JPG file) -->

<pre></pre> Preformatted text

<blockquote></blockquote> Quoted text block

<del></del> Deleted text – strike through

❖Link to a specific location in another document:

<hr size="5" width="70%" />

❖Attribute values for type are:

• Apple o Apple ▪ Apple

➢Pairs of text and associated definition; text is in <dt> tag,

➢Renders without bullets