ARBA MINCH UNIVERSITY

Web
Programming
FCSE / Computer Science​

Instructor: Chala Simon

1
<q> Talk is cheap. Show me the code.</q> …...... Linus Torvalds (Founder of Linux kernel)
 Hypertext Markup Language
Chapter Two (HTML)

Web design and Programming 2

Contents
• Getting started with Web application development
• Hypertext Markup Language (HTML)
• HTML Tags
• HTML Document Structure

Web design and Programming 3

Getting started with Web application development

• This is introducing you to the practicalities of web application development.

o Installing basic software
 A text editor – Sublime, vs-code, Notepad++ …
 Client software (browser) - Chrome, Firefox, Safari…
 Server-side stack software - WAMP, XAMPP, LAMP…
o What will your website look like?
 plan out the application content and design
o Dealing with files
 set up a sensible file structure
Web design and Programming 4
… cont’d

o Client-side scripting o Server-side scripting

 Client-side or Front-end development  Server-side or Back end development

manages everything that users visually refers to the server side of an

see first in their browser or application. application and everything that

Front end developers are responsible communicates between the database

for the look and feel of a site. and the browser.

 Back-end languages such as Java,
 Front end languages include HTML,
PHP, Ruby on Rails, Python,
CSS, and JavaScript.
and .NET
Web design and Programming 5
 What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
Web design and Programming 6
Hypertext Markup Language (HTML)

• HTML documents are simply text documents with a specific form

• Documents comprised of content and markup tags

• Content: actual information being conveyed

• Markup tags: tell the Web browser how to display the page

• An HTML file must have an .htm or .html file extension

• An HTML file can be created using a simple text editor.

Web design and Programming 7

 Our First Example
• If you are running Windows, start Notepad
• Type in the following save as .html extension:

• Open this file using a browser, and you will

see…

8
 HTML Tags
• Tags are one of the most important part in an HTML Document.

• HTML uses some predefined tags which tells the browser about content display property, that is
how to display a particular given content.
• For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must
use the img tags(<img />).

• There are generally two types of tags in HTML:

• Paired Tags/container : These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
E.g. <h1> Hello world </h1>
• Empty Tags/standalone: These tags do not require to be closed. E.g. <br/>

Web design and Programming 9

 … cont’d
• HTML tags are keywords (tag names) surrounded by angle brackets:
Closing tag
<tagname> content </tagname>
• The text between the start and end tags is the element content
• Not case-sensitive <b> Software Engineering </b>
• Follow the latest web standards:
• Use lowercase tags Opening tag
Content

• The end tag is written like the start tag, but with a slash before the tag name

The start tag is often called the opening tag. The end
tag is often called the Webclosing tag.
design and Programming 10
Tag Attributes
• Tags can have attributes that provide additional information to an
HTML element
• Attributes specify properties and behavior
• Attributes always come in name/value pairs like: name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in quotes. Double quotes are most
common.
• Also case-insensitive: however, lowercase is recommended
• Some elements have obligatory attributes

11
 Some Simple Tags – Example
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.amu.edu.et/" title=“amu site">Go to AMU
website.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>emphasized or italic</em> text.
</body>
</html>
12
 HTML Document Structure
• All HTML documents must start with a document type declaration: <!DOCTYPE html>.
• Entire document enclosed within <html> and </html> tags
• Two subparts:
• Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title of the page, meta-information, etc.
• Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body

Web design and Programming 13

The <head> Section
• Contains information that doesn’t show directly on the viewable page
• Starts after the <html> opening tag
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
• <meta>
• <script>
• <style>
• <!–- comments -->

14
<head> Section: <title> tag
• Title should be placed between <head> and </head> tags
<title>Arba minch University Website</title>

• Used to specify a title in the window title bar

• Search engines and people rely on titles
15
<head> Section: <meta>
• Meta tags additionally describe the content contained within the page

16
<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
• JScript

17
The <script> Tag – Example
<!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>
18 </body>
</html>
<head> Section: <style>
• The <style> element embeds formatting information (CSS styles) into
an HTML page
<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>
19 </body>
Comments: <!-- --> Tag
• Comments can exist anywhere between the <html></html> tags
• Comments start with <!-- and end with -->

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

<img src="logo.jpg" alt=“amu Logo">

<!–- Hyperlink to the web site -->

<a href="http://amu.edu.et.com/">Arba
Minch University</a>

<!–- Show the news table -->

<table class="newstable">
20 ...
<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 is the Web page body -->
</body>
</html>

21
Headings and Paragraphs – Example
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
headings.html <h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
22
</html>
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
 Samplesuperscript
 Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

23
Text Formatting – Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
24
HTML styles
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Use the style attribute for styling

HTML elements
 background-color for
background color
 color for text colors
 font-family for text fonts
 font-size for text sizes
 text-align for text alignment

25
 HTML links - hyperlinks

• Links are found in nearly all web pages.

• Links allow users to click their way from page to page.
Syntax: <a href="url">link text</a>
• The target Attribute
self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab

26
 HTML links

• An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or

is active.
• HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - Create Bookmarks
• HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
• Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.
• <h2 id="C4">Chapter 4</h2>
• <a href="#C4">Jump to Chapter 4</a>
27
 HTML images

• The HTML <img> tag is used to embed an image in a web page.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax: <img src="url" alt="alternatetext">
Image Size - Width and Height

<img src=“ronaldo.jpg" alt=“ronaldo

image" style="width:500px;height:600px;">
28
 HTML Lists
• HTML lists are used to present list of information in well formed and
semantic way.
• There are three different types of list in HTML.
• Ordered list —to create a list of related items, in a specific order.
• Unordered list — to create a list of related items, in no particular order.
• Description list —to create a list of terms and their descriptions.

29
 Ordered Lists: <ol> Tag
<ol type="1">
Create an Ordered List using <ol></ol>:
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

type="1" type="A" type="a" type="I" type="i"

1. Apple A. Apple a. Apple I. Apple i. Apple

2. Orange B. Orange b. Orange II. Orange ii. Orange
3. Grapefruit C. Grapefruit c. Grapefruit III. Grapefruit iii. Grapefruit

30
 Unordered Lists: <ul> Tag
<ul type="disk">
Create an Unordered List using <ul></ul>: <li> Apple </li>
<li> Orange </li>
<li> Grapefruit </li>
</ul>

type="disk" type="circle" type="square"

• Apple o Apple  Apple

• Orange o Orange  Orange
• Grapefruit o Grapefruit  Grapefruit

31
 Definition lists: <dl> tag
Create definition lists using <dl>

<dl>
• Renders without bullets <dt>HTML</dt>
• Definition is indented <dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

HTML
A markup language …
CSS
Language used to ..
32
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
33
 Special Chars – Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome &nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards: A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835; music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his team</p>
<p>Telerik Academy &trade;</p>

34
 HTML Multimedia

• Multimedia on the web is sound, music, videos, movies, and animations.

HTML Video
• The HTML <video> element is used to show a video on a web page.
adds video controls, like play, pause, and volume

allows you to specify alternative video files

• To start a video automatically, use the autoplay

• To start a video automatically, use the autoplay but muted, add attribute: muted
• The <track> tag specifies text tracks for <audio> or <video> elements.

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard. 35
 HTML Multimedia

• HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.
• <audio controls autoplay muted>
Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
• Add muted after autoplay to let your audio file start playing automatically (but
muted):

36
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>

37
 The <div> and <span>Tag
• <div> is Block style element
• It creates logical divisions within a page
• Used with CSS
• <span> is Inline style element
• Useful for modifying a specific portion of text
• Don't create a separate area in the document
• Very useful with CSS
• Example:

<div style="font-size:24px; color:red">DIV example</div>

<p>This one is <span style="color:red; font-weight:bold">only a
test</span>.</p>
38
Working with HTML Tables
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns
• Tables comprised of several core tags:
• <table></table>: begin / end the table
• <tr></tr>: create a table row
• <td></td>: create tabular data (cell)
• Tables should not be used for layout. Use CSS floats and positioning styles
instead

39
… cont’d
• Start and end of a table
<table> ... </table>
• Start and end of a row
<tr> ... </tr>
• Start and end of a cell in a row

<td> ... </td>

40
 Simple HTML Tables – Example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture
1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture
2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
41
Lecture 2 - Demos</a></td>
</tr>
Complete HTML Tables

• Table rows split into three semantic sections: header, body and footer

• <thead> denotes table header and contains <th> elements, instead of <td> elements

• <tbody> denotes collection of table rows that contain the very data

• <tfoot> denotes table footer but comes BEFORE the <tbody> tag

• <colgroup> and <col> define columns (most often used to set column widths)

42
Complete HTML Table: Example
<table> columns
• <colgroup>
<col style="width:100px" /><col />
</colgroup> header
<thead> th
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead> footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot> Last comes the body (data)
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
43
</table>
Complete HTML Table:Example (2)
<table> By default, header text is
<colgroup> bold and centered.
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> Although the footer is before the data
</tbody> in the code, it is displayed last
</table>
44
Nested Tables
• Table data “cells” (<td>) can contain nested tables (tables within tables):
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
45
Cell Spacing and Padding
• Tables have two important attributes:
 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty

empty space space around the cell
between cells content
46
 Cell Spacing and Padding – Example
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

47
Column and Row Span
• Table cells have two important attributes:
 colspan  rowspan
colspan="1 colspan="1 rowspan="2 rowspan="1
" " " "
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]

colspan="2 rowspan="1
 Defines how "  Defines how"

many columns many rows the

48
the cell occupies cell occupies
Column and Row Span – Example
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

49
 Column and Row Span – Example (2)
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td
colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr> Cell[1,1
Cell[2,1]
</table> ]
Cell[1,2 Cell[3,2
] Cell[2,2 ]
Cell[1,3 ] Cell[2,3
50
] ]
<!DOCTYPE html>
<html>
Table caption
<head>
<tr>
<style>
<td>January</td>
table, th, td {
<td>$100</td>
border: 1px solid black;
</tr>
border-collapse: collapse;
<tr>
}
<td>February</td>
th, td {
<td>$50</td>
padding: 5px;
</tr>
text-align: left;
</table>
}
</body>
</style>
</html>
</head>
<body>
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
51
Exercise:

Web design and Programming 52

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
• Example: the form data should be sent –
via GET or POST request

<form name="myForm" method="post"

action="path/to/some-script.php">
...
</form>
The "action" attribute tells where
the form data should be sent
53
 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
textfield" />

• Often used by JavaScript code

54
 Fieldsets
• Fieldsets are used to enclose a group of related form fields:
<form method="post" action="form.aspx">
<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>

• The <legend> is the fieldset's title.

55
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="city"
value="Ruse" />
56
Other Form Controls
• Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

• Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

57
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" />
58
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"
multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
59 <option value="Value
Other Form Controls (4)
• File input – a field used for uploading files

<input type="file" name="photo" />

• When used, it requires the form element to have a specific attribute:

<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

60
Labels
• 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" />

• Clicking on a label focuses its associated field (checkboxes are

toggled, radio buttons are checked)
• Labels are both a usability and accessibility feature and are required in
order to pass accessibility validation.

61
HTML Forms – Example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><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 />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
62
HTML Forms – Example (2)
<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 />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
63 <input type="submit" name="submit" value="Send
Form" />
HTML Forms – Example (3)

64
TabIndex
• The tabindex HTML attribute controls the order in which form fields
and hyperlinks are focused when repeatedly pressing the TAB key
• tabindex="0" (zero) - "natural" order
• If X < Y, then elements with tabindex="X" are iterated before elements with
tabindex="Y"
• Elements with negative tabindex are skipped, however, this is not defined in
the standard
• Is in the range [0,32767]

<input type="text"
65 tabindex="10" />
HTML5: New form elements

66
Input-datalist Elements and autocomplete Attribute

67
Output
• Once you fill a data in the text box ..html 5 can recover the previous
input. *we use a datalist element to
obtain the user’s birth month.

68
HTML Frames
• Frames provide a way to show multiple HTML documents in a single
Web page
• The page can be split into separate views (frames) horizontally and
vertically
• Frames were popular in the early ages of HTML development, but
now their usage is rejected
• Frames are not supported by all user agents (browsers, search engines,
etc.)
• A <noframes> element is used to provide content for non-compatible agents.

69
HTML Frames – Demo
frames.ht
<html> ml
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>

70
Inline Frames: <iframe>
• Inline frames provide a way to show one website inside another
website:
iframe-
demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>

71
 Table:html structure elements

72
HTML5: Semantic elements example
<header>

<nav>

<aside>

<section>

<footer>

73
 EnD

Web design and Programming 74