prepared by saba Z.

UNIT -4
Web Development
At the end of this unit, students will be able to:

 „ Define the Web

 „ Explain a website and its benefits
 „ Elaborate the purpose of web design
 „ Describe basic concepts of HTML and web
development
 „ Create webpages with images, videos, links,
tables, lists, and links
 4.1. WORLD WIDE WEB
 World Wide Web (www), commonly known as the Web,
is one of the most important services of the Internet.
 The Internet is a network of networks that the Web runs
on.
 The Web is a collection of websites or web pages that
are accessed over the Internet using a web browser.
 Tim Berners-Lee invented the Web in 1989 in the
famous laboratory found in Switzerland known as
CERN.
 CONT.…
 HTML, which stands for Hyper Text Markup Language,
is the language that is used to create webpages.
 A web browser is a software used by users to view
webpages.
 A web server is a software that stores webpages and
responds to user requests that come through web
browsers.
 HTTP, which stands for Hyper Text Transfer Protocol, is
the set of rules that web browsers and web servers use to
communicate with each other.
 A website is a publicly accessible collection of
interrelated webpages.
 Hypertext is used to link a webpage with other resources
 Cont…..
 What is the d/ce among web page, website and web server?
Web Page: A Web page is a document for the World Wide Web that is represented
with a unique uniform resource locator (URL).
Website: A website is a set of web pages placed under a single domain.
Types of website
1.Static website:
 Contains Web pages with fixed content.
 Each page is coded in HTML and displays the same
information to every visitor.
 Static sites are the most basic type of website and are the
easiest to create.
 Unlike dynamic websites, they do not require
any Web programming or database design.
2.Daynaic website:
 can dynamically change the content of the web page when the
page is running on the client’s browser.
 is written using a server-side scripting language such as PHP,
ASP, JSP, SQL,VB.net……..
 Web Server: is a computer where the web content is stored. Basically web
server is used to host the web sites.
Cont…..
 Some web servers which offer free web hosting or
publishing on the web are:
 www.redwebhost.com
 www.0catch.com
 www.instantfree.com
 Crystalserve.com
 Monkeyserve.com
 Webhostingdeluxe.com
Publishing web page to a web server
The steps to publish the web page:
 Open browser, and use internet connection
 Type www.0cath.com in the URL.
 Click sign up button
 Choose your site name and click sign up now
 select your plan
 Click continue with sign up
 Click on No Thanks ,a free site will be fine
 Fill your account information and click create your
account.
 Enter your e-mail address to get special offers and
click on subscribe, or no thanks.
Cont….
 The website creation message will appear.
 Click on the URL
 Click on I have my web page on my hard drive
and want to upload but don’t know how
 Click file uploader in create or build your site
Click on Click here
Now click on browse
 the upload result message appears in the URL
bar of browser,
 Type the address of your web page and press
enter key to see your web page
 4.2. WEBSITE DESIGN
 Website design is concerned with the plan and design of
various aspects of a website, such as layout, navigation,
appearance, and graphics.
 The following are some important guidelines to
consider when a website is designed:
1. Target Audience
 A website should be designed with the target audience
in mind.
 The look and feel, presentation, and all other aspects of
the website should take the target audience of the
website into consideration.
 2.NAVIGATION
 Web pages should be logically organized to allow easy
navigation.
 A well-organized website with easy navigation helps
users find what they seek fast.
 A website with poor navigation, on the other hand,
confuses and drives away visitors.
3. Consistency
 The feel and look of web pages on a website should
be similar.
 Better user experience is achieved with consistent
use of backgrounds, colors, typefaces, and the like
throughout the website.
 4.SIMPLICITY
 Simplicity in website design applies to various elements
of a website, such as the use of colors, graphics,
typefaces, and the like.
 For example, it is recommended not to overcrowd a
page with too many graphics. It is rather more helpful to
use graphics when required.
 It is also recommended to use a maximum of five
different colors (plus or minus two) to ensure a better
user experience.
5.Accessibility
 Designing a website with everyone in mind including
people with disabilities is highly advised to make sure
that no one is excluded.
 CONT.…..
 Web development is the actual creation or building of
websites while website design deals with defining the
layout and overall look of the website.
 Websites can be developed using a WYSIWYG (What
you see is what you get) software like Adobe Dream
weaver
 Simple text editors such as Notepad, Notepad++ are the
other alternative software to develop websites.
 4.3. HTML BASICS
 HTML is a markup language that is used to create
webpages.
 The different elements of a webpage such as headings,
tables, paragraphs, images, and others are defined using
the predefined set of markup tags of HTML.
 HTML has gone through multiple revisions since its
invention in 1989. The current version of HTML is
HTML5.
 HTML documents can be prepared using simple text
editor software such as Notepad.
 The documents are saved with a “.html” extension. For
example, home.html is a valid file name for an HTML
document or a webpage.
 4.3.1 HTML TAGS AND ELEMENTS
 HTML tags are a set of predefined names
enclosed in angle brackets.
 Each HTML tag has its specific meaning, and web
browsers are designed to interpret or render HTML tags
according to their intended purposes.
Table 4.1 Sample HTML tags

Visit the following webpage for the list of all html tags:
https://www.w3schools.com/tags/default.asp
 CONT…
 HTML elements are components of an HTML
document and normally have a <start tag> followed by
content and an </end tag>.
 HTML elements are the building blocks of a webpage.
HTML Code
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<b>This is a bold text</b>
<i>This is an italic text</i>
Output on the Web Browser
This is a heading
This is a paragraph
This is a bold text This is an italic text
 CONT.….
 there are some HTML elements that have a different
format. These HTML elements are known as void elements.
The following table shows the format of void elements and
their meanings. Void elements do not have an end tag.
 HTML CODE
<hr >
<p>This is a <br> paragraph </p>
<hr >
Output on the Web Browser
 4.3.2 STRUCTURE OF HTML DOCUMENTS
 All HTML documents or webpages have a common structure. What
changes from one webpage to another is what goes inside the
<body> and the <head> sections of HTML documents.
<!DocumentType html>
<html>
<head>
<title>
This is document title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
 CONT.…..
 <!DOCTYPE html>: this element indicates the type of
the document.
 „ <html> …</html>: represents the entire document,
and it is divided into two major sections: the head
(<head>..</head>) and the body (<body>…</body>)
sections.
 „ <head>..</head>: this part of the HTML document is
used to keep all the information about the webpage such
as the page title.
 „ <body>…</body>: is the part of the HTML document
where the content of the webpage is kept. Everything that
is shown in the web browser, when the webpage is
displayed, is what is contained in this part of the HTML
document.
Activity 1
Lets create our first web page.
Open Notepad and write the following HTML code
<HTML>
<HEAD>
<TITLE>HTML Training</TITLE>
<!--This page is created by G-11-->
</HEAD>
<BODY>
<P>On this page we're reviewing the different types of tags that we've learned in this chapter.</P>
<P>In the second paragraph, I'm going to include the class’s I’ve taken up to now.<BR>
Information system<BR>
Artificial Intelligence<BR>
Augmented and Virtual Reality<BR>
Data Science<BR>
</P>
<HR>
<P><EM>first </EM> practice</P>
<!—additional description can be added here.-->
</BODY>
</HTML>
 After writing the code save the document as myfirstpage.html.
 Open the saved file myfirstpage.html using a web browser and see your first web page
 4.3.3 HTML ATTRIBUTES
 HTML attributes are used to define more properties to
HTML elements. HTML paragraphs, for example, are
left-aligned by default. However, if a paragraph is needed
to be presented with the texts aligned to the right, the
“align” attribute should be used.
 Attributes are written inside the start tag with attribute-
value pairs(attribute=value).
HTML Code
<h1>This is a heading</h1>
<p align=“right” > This is a paragraph </p
Output on the Web Browser
This is a heading
This is a paragraph
 CONT….
 Attributes are normally optional to many of the HTML
tags.
 However, there are some HTML elements that cannot
function
 The <img> HTML element is one such example. The
<img> element should have the “src” attribute, which
refers to the name and location of the actual image that
is required to be inserted into the webpage.
 <img src=“filename of the image.jpg” >
 the image file and the HTML file must be located in the
same folder.
 CONT….
 The other HTML element that uses the “src” attribute is
the <video> element.<video> element is used to add a
video to a web page .
 example.
<video width=”320” height=”200” controls
src=”Country Landscape.mp4” >
</video>
 4.4. HTML LINKS
 HTML links are used to navigate from one webpage to
another or from one part of a webpage to another.
 The links could come in the form of text or images and
are normally known as hyperlinks.
4.4.1 Links to other Pages
 The anchor tag (<a>) is used to create hyperlinks.
 CONT……
E.g.
<a href=“http://www.google.com”>Google </a>
Output on the Web Browser
Google
 In addition to texts, images can also be used as links
that users can click on to go to a specified webpage.
<a href=http://www.google.com target=“_parent”> <img
src=“google.png”> </a>
 Output on the Web Browser
 CONT….
 Absolute URL: is a URL that includes every element of
a URL such as the protocol, the hostname, as well as
path of the webpage. In other words, it will have a form
such as this
http://www.somewebsite.com/somefile.html
 Relative URL: is a path given relative to the location of
the current webpage.
Example: some directory/somefile.html
Activity 2
 Add the following code in Notepad and save it as practice.html and open it using any web browser.
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is <u>underlined</u> heading 1</h1>
<p>Here is a first paragraph of text.</p>
<h2>This is heading 2</h2>
<p>Here is a second paragraph of text.</p>
<h3>This is heading 3</h3>
<a href=”www.gmail.com”> Go to Gmail</a>
<img src=””> <!—insert a picture from your computer here-->
<h4>This is <i>italic</i> heading 4</h4>
<p>This text is not in the center.</p> <center>
<p>This text is in the center.</p> </center>
<h5>This is <i>italic</i> heading 5 </h5>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
<h6>This is heading 6</h6>
</body>
</html>
 4.4.2 LINKS TO PAGE SECTIONS
 the <a> tag is used in two different ways: in
designating names to specific locations and in creating
links to the locations from other places on the same page.
Example:
<h3>Section One
<a name=”section_one”></a>
</h3>
<a href=”#section_one”>Go to section
one</a>
 4.5. HTML TABLES
 An HTML table is used to organize data in terms of
rows and columns. Tables are one way of organizing
contents or defining a layout for contents in a webpage.

o The number of rows of a table is determined by the

number of <tr> elements that the <table> has while the
number of columns is determined by the number of
<td> elements that are found in each <tr>.
Example:
<table border=1> Output on the webbrowser
<tr>
<th>Mountain Name</th>
<th >Elevation</th>
</tr>
<tr>
<td>Ras Dashen</td>
<td>4,620 m</td>
</tr>
<tr>
<td>Tullu Dimtu</td>
<td>4,377 m</td>
</tr>
<tr>
<td>Guge</td>
<td>4,200 m</td>
</tr>
<tr>
<td>Amba Alage</td>
<td>3,949 m</td>
</tr>
Activity 3
E.g Lets create a table in HTML
Open any text editor and write the following HTML code
<html>
<head><title>My First HTML Table</title></head>
<body>
<table width="400" border="5" cellpadding="5" cellspacing="5" >
<caption>My First HTML Table </caption>
<tr>
<th scope="col">No</th> Output on the web browser
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>1</td>
<td>Lydia</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>Feven</td>
<td>18</td>
</tr>
</table>
</body>
</html>
COLSPAN AND ROWSPAN ATTRIBUTES

 When the layout of the table needs the merging of

multiple columns or rows,“colspan” and “rowspan”
attributes can be used respectively.
 You will use colspan attribute if you want to
merge two or more columns into a single column.
Similar way you will use row span if you want to
merge two or more rows.
 Example:
<table border=1>
<tr>
<th></th>
<th colspan=2>Cases</th>
<th colspan=2>Deaths</th>
</tr>
<tr> Output on the web browser
<th>Date</th>
<th >Total</th>
<th >New</th>
<th >Total</th>
<th >New</th>
</tr>
<tr>
<td>07/29/21</td>
<td>279,629</td>
<td>3,592</td>
<td>4,381</td>
<td>61</td>
</tr>
</table>
Output On Web Browsers
  THE “COLSPAN” AND “ROWSPAN” ATTRIBUTES CAN ALSO BE
USED TO DEFINE THE LAYOUT OF AN ENTIRE PAGE.
Example:
<html>
<head>
</head>
<body>
<table width="100%">
<tr>
<td colspan="2" height="100px" bgcolor="#666666"><h1>Website Logo</h1>
</td>
</tr>
<tr>
<td width="20%" bgcolor="#cccccc" height="300px">
<h3>Sidebar</h3>
</td>
<td width="80%" bgcolor="#eeeeee">
<h3>Content</h3>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#777777" height=“80px“ ><h3>Footer </h3></td>
</tr>
</table>
</body>
</html>
4.6.1 Ordered List
 <ol>
4.6.isHTML Lists
the tag that is used to create ordered/numbered lists.
The <li> tag, on the other hand, is used to insert individual
items into the list.
 By default, Arabic numerals are used for ordering purposes
in ordered lists. However, using the “type” attribute the
ordering type can be changed to some other form such as the
English alphabet.
 Cont…..

Example:
<ol>
<li>File system</li>
<li>ntfs</li>
<li>exfat</li>
<li>Fat32</li>
</ol>
 4.6.2 Unordered List

 <ul> is the tag that is used to create unordered/bulleted

lists. The <li> tag and the “type” attribute are used
similarly as they are used in ordered lists. The default
bullet type is “disc”. The “type” attribute is, therefore,
used to change the default type to any of the other types.
 Cont.…
Example:
<Ul>
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Photo Gallery</li>
<li>Links</li>
<li>FAQ</li>
</Ul>
 Cont…..
 Lists can be nested. Any type of list can be placed under
any other type of list.
Example:
<ul>
<li>Actions one can do to stop climate change
<ol>
<li>Save energy</li>
<li>Plant trees</li>
<li>Reduce water waste</li>
<li>Avoid plastic wherever possible</li>
</ol>
</li>
</ul>
 The description or definition is added using the <dd>
4.6.3 Description List
tag.
Example:
<dl>
<dt>ol</dt>
<dd>-Ordered list</dd>
<dt>ul</dt>
<dd>-Unordered list</dd>
<dt>dl</dt>
<dd>-Description list</dd>
</dl>
Activity 4:
Use the above list types syntax (ordered and
unordered) from above to write the following lists
and see the difference.
 Information Security
 Augmented and Virtual Reality
 Artificial Intelligence
 Database
 HTML
 CSS
 HTML FORM CONTROLS
 There are different types of form controls that you can use to collect
data using HTML form:
Text Input Control
SYNTAX: <input type="text" name=" " />
E.g. <input type="text" name="first_name" />
Password Input Control
SYNTAX: <input type="password" name=" " />
E.g <input type="password" name="password" />
Text Area Control
SYNTAX: <textarea rows="" cols="" name=" ">
E.g. <textarea rows="5" cols="50" name="description">
</textarea>
Checkboxes Control
SYNTAX: <input type="checkbox" name=" " value="">
E.g. <input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
 CONT….
Radio Box Control
SYNTAX: <input type="radio" name=" " value=" ">
E.g. <input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
Select Box Control
SYNTAX: <select name="dropdown">
<option value=" " selected>
</option> </select>
E.g. <select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
Button Control
SYNTAX: <input type="submit/reset/button/image" name=" " value=" " />
E.g. <input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
CONT..
Activity 5
 Create the following form using the controls you have

seen earlier.
 First Name, Last Name – text

 Age - text

 Sex (Female, Male) – radio button

 Educational Level (Primary, Secondary, University) –

select box
 Mobile Number – text

 Interest ( books, Movies, Computers, Games) –

Checkboxes
CSS(CASCADING
STYLE SHEETS)
outcomes

In this section you will be able to:

 Know about scripting languages and their
purposes
 Basics of CSS and its advantages
Explore the syntax of CSS scripts
 Know about different types of selectors
 CSS Basics

What is CSS?
 CSS (Cascading Style Sheets) is a scripting language
used to format web pages.
 CSS helps web pages to be more presentable through the
use of lots of formatting options including fonts,
spacing, paragraph, blocks, images, borders, headers etc.
 CSS works with HTML and is mainly used to embed
rules of styles on HTML tags.
Advantages of CSS :
 Adds a style to HTML
 Easy to edit and modify
 Platform independence
 CSS Saves time…….
 Types of Css: Internal, Extenal,and InlineCss.
 CSS SYNTAX
A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document. A style rule is made of three parts:
1. Selector: A selector is an HTML tag at which a
style will be applied. This could be any tag.
2. Property: A property is a type of attribute of HTML
tag. Properties have to be based on global standards.
3.Value: Values are assigned to properties. SYNTAX
selector { property: value }
E.g. p{color : blue;} //set the color of a paragraph to blue
h1 {
color: yellow; //set the color of Header 1 to
font-size:14px; //set the font size to 14 pixels }
 Selectors
There are different kinds of selectors that are used to
format tags.:
 Type selector: Works for specific elements.
E.g h1 { color: #36CFFF; }
 Class selector: Used to define style rules based on the
class attribute of the elements. All the elements
having that class will be formatted according to the
defined rule.
E.g .black { color: #000000; } //this is used in external
CSS
After .black is defined it can be applied to a header as
follows:
h1.black { color: #000000; }
Multiple Style

Rules Different style rules can be applied to a single

element/tag.
E.g h1 { color: #36C; font-weight: normal;
text-transform: lowercase; } //This style only works
for Header 1 Similarly styles can be applied to multiple
selectors. Selectors have to be separated with a comma.
E.g h1, h2, h3 {
color: #36C;
font-weight: normal;
} //This style works for Header 1, 2 and 3
Script Styling Basics

External CSS
External style sheet is a separate text file with .css
extension. You define all the Style rules within this text
file and then you can include this file in any HTML
document using <link> element.
The <link> element can be used to include an external
style sheet file in your HTML document. The CSS file is
stored in the web page files in the same or separate folder.

SYNTAX to add at the header of a HTML:

<head>
<link type="text/css" href="CSS/test_css.css"/>
</head> //This indicates the CSS file is located under a
folder named CSS inside the website document folder.
The external CSS file is composed of styles for different
Cont….
E.g An external CSS file may look like this:
h1
{
font-weight:lighter;
font-family:georgia, times new roman;
text-align:center;
color:#000;
font-size:2em;
}
h2
{
font-weight:lighter;
font-family:verdana,arial,sans-serif;
text- align:center;
color:#333;
text-transform:uppercase;
}
 Activity 1
Lets create an external CSS file and link it to a web page.
• Create a new folder on desktop with a name ‘css
practice’
• Go to your start menu and open Notepad.
• On the notepad write the following styles:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
• Save the notepad with a name first p.css inside ‘css
practice’ folder.
 Cont….
Open another notepad and copy the following code:
<html>
<head>
<title>My Page with External CSS</title>
<link type="text/css" href=“first p.css" />
</head>
<body>
<h1>My page with external CSS</h1>
<h2>The external style is located under ‘css
practice’ folder. </h2>
<h3>Thank you</h3>
</body>
</html>
Save the new notepad with a name csstest.html under ‘css
practice’ folder.
Open the ‘csstest.html’ file with a web browser and see the
webpage you have created.
Inline/Embedded CSS
Inline/Embedded CSS is styles that are applied to specific elements
inside the web page i.e. there will be no external CSS file linked to
the web page.
E.g <h1 style ="color:#FFFFFF;">
This is inline CSS </h1>
Activity 2
Create a new notepad file and add the following code
<html>
<head>
<title>My Page with Inline CSS</title>
</head>
<body>
<h1 style ="color:#FF22AA;" >My page with Inline CSS</h1>
<h2 style ="color:#36CBBA;" >There is no external CSS.</h2>
<h3 style ="color:#CCDD44;" >Thank you</h3>
</body>
</html>
Save the notepad file as practice inlinecss.html and open it using a
web browser to see the effects.
Colors

Colors are an important part of formatting a webpage. In

CSS colors are specified using different formats.
The two major ways are: as a hexadecimal code or short
hexadecimal codes and using a keyword.
Hexadecimal Code: is a six digit representation of a color
#RRGGBB (Red, Green and Blue value of the color).
Some of the mostly used colors are depicted as follows:
Cont….

Short Hexadecimal codes are simply a shorter form of

the six digit color codes.

• Keyword: black, white, red, aqua etc

E.g h1 {color:red;}
h2{color:blue;
 Activity 3
1. Below are inline CSS codes that can be used to further format
a content.
2. Open a blank text editor and use the following CSS codes to
format a content you will add on the document you created.
<p style="background-color: yellow;">
<table style="background-color:aqua; background-repeat: repeat;">
<p style="font-family:georgia,garamond,serif; font-style:italic; font
size:20px; font-stretch:ultra-expanded; ">
<img style="border:3px dashed red;" src="(insert an image here)" />
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
<ul style="list-style-type:circle;">
<ol style="list-style-type:lower-roman;">
TIP

For additional concepts use

www.w3schools.com
WWW.Sourcecodeester.com
Google search or YouTube videos related to HTML and
CSS.
WEBSITE DEVELOPMENT
PROJECT(50%)
 Be in groups to work on this website development
project and work on the following instructions to come
up with the best HTML codes to meet the below
requirements:
 Create a folder named ‘KSHS website’ on your desktop
or documents and place all the website documents i.e.
html files, images etc on the folder.
 The website can be on any area that you would like to
work on i.e. either on a subject that you love, on a hobby
that you love to do, or a recent family event that you
enjoyed or any idea. The website should have five main
pages: Home, About us, Pictures , Login or Registration,
Contact us (You can also customize these menus based
on your ideas)