Unit Overview

Web development is the process of creating websites for various purposes such as

 information sharing and

 facilitating online businesses.
In this unit,we will discuss about
 the World Wide Web (WWW) and its foundations
 the concept and uses of websites
 different types of HTML (Hypertext Markup Language) elements

4.1 World Wide Web (www),

 World Wide Web (www), commonly known as the Web

 WebisacollectionofwebsitesorwebpagesthatareaccessedovertheInternet

usingawebbrowser.TheWebisjustoneoftheservicesoftheInternet,andthemostpopularone.There
arealsomanyotherservicesthatareprovidedovertheInternetsuchas

 email,
 file transferandcommunicationservices.

Web is invented by imBerners-Leein1989inthefamouslaboratoryfoundinSwitzerlandknownasCERN.

When the Web was invented, it was formed out of four essential foundations:

 HTML,
 HTTP,
 a web server, and a
 web browser.
 HTML, which stands for HyperText 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 stands for HyperText 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.
A website that is physically placed in one part of the world can be accessed from any other
part of the world.
Hypertext is used to link a webpage with other resources like another webpage, videos,
images, and the like.
Application of website in efferent organization
 1, in e-commerce:
to conduct online transactions.
Used to make orders products from their homes or workplaces.
Reduces the cost of transportation and increases the efficient use of our limited time.
2. In government
For accessed various governmental e-services e.g make applications for passports
3. Education
Used to make educational resources accessible to students.
Online learning
4.2. Website Design
It is concerned with the plan and design of various aspects of a website, such as layout,
navigation, appearance, and graphics.
The goal of a website design is to create a website that is appealing to its target audience.
Guidelines to consider when a website is designed.
1. Target Audience: website developer must know about the audiences (who uses the websites e.g
children, adult…. )
2. Navigation: WebPages should be logically organized to allow easy navigation. This is used for
users to find what they seek fast. A website with poor navigation confuses and drives away
visitors.
3. Consistency: The feel and look of WebPages on a website should be similar. We must achieve
better use of backgrounds, colors, typefaces, and the like throughout the website.
4. Simplicity: making our website simple and easy understandable by Appling various elements of a
website, such as the use of colors, graphics, typefaces….
5. Accessibility: website must including people with disabilities
 Websites can be developed using
1. WYSIWYG (What you see is what you get) software like Adobe Dreamweaver.
2. Simple text editors such as Notepad
Note: developing WebPages using simple text editors is a little more difficult than WYSIWYG software
4.3. HTML Basics
 Elements of a webpage are
1. headings,
2. tables,
3. paragraphs,
4. images, and others
HTML is markup language that uses different predefined tags for creating the above website elements.
The current version of HTML is HTML5. Html 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.

Table 4.1 Sample HTML tags

There are three Major components of HTML document. They are
 Start tag :< tag name >
 Content : it can be text, image, video
 end tag :</ tag name >
There are html elements that haven’t end tags they are called void elements
Table 4.2 Void elements

4.3.2 Structure of HTML Documents

 All HTML documents or WebPages have a common structure.
 There are two sections of HTML documents.
1. <head>
2. <body>

Figure 4.4 Structure of an HTML document

4.3.3 HTML Attributes
 They are used to define more properties to HTML elements.
e.g paragraphs have attributes that used to present the locations of paragraphs in web
browser. This attribute is called align .the align attribute have four values they are
Left, right, center and justify
 Attributes are written inside the start tag with attribute-value pairs(attribute=value). e.g
<p align =”right ” > This is a paragraph </p>
 Attributes are normally optional to many of the HTML tags. However, there are some HTML
elements that cannot function as intended without the use of some attributes
e.g The image element should have the “src” attribute which refers to the name and location of
the actual image
Attributes in the <video >element
 Controls attribute used to add controls like play, pause, and volume. „
 Width and height attributes control the width and height of the video
 src attribute is used to refer to the file name of the video
4.4. HTML Links
 They are used to navigate(move) from one webpage to another
 The links come in the form of text or images and are normally known as hyperlinks
 Hyperlinks can be distinguished by the hand symbol that the mouse cursor is turned to when the
mouse is hovering over the hyperlinks.
4.4.1 Links to other Pages
The anchor tag () is used to create hyperlinks.
Syntax:<a href =”URL”> clickable text < /a>
1. <a> = anchor tag
2. Href= is the attribute that the URL of the destination webpage is assigned to.
3. URL stands for Uniform Resource Locator. It is used to reference the address of the linked
webpage.
4. clickable text visible to the user when the webpage is displayed on the web browser. When
this is clicked, the user will be redirected to the given URL.
Example

 Another important attribute of the anchor tag is the “target” attribute.

The “target” attribute and its values
Using Image as HTML link
Example

URL
1. Absolute
2. Relative
Absolute URL: includes 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: somedirectory/somefile.html
4.4.2 Links to Page Sections
 This is a hyperlink that created with in different parts, or sections of the same page.
 This is especially useful in a webpage that has a large size content. Readers can easily go to different
sections of the page without having to scroll up and down.
The anchor tag is used in two different ways:
1. Using “name” attribute is used to designating names to specific locations and
2. Using “href” attribute is used to in creating links to the locations from other places on the same
page.
 Example

4.5. HTML Tables

HTML table is used to organize data in terms of rows and columns.
Table 4.4 HTML tags used for creating tables

 The number of rows of a table is determined by the number< tr>element

 the number of columns is determined by the number of <td>elements
 The table has a “border” attribute, and its values can be 1,.4…..
 If the border attribute is not used, the data will be displayed in the same way but without a border
 When the layout of the table needs the or
 “colspan” is an attribute that used to merging of multiple columns
 “rowspan” attributes that used to merging of multiple rows,
 The “colspan” and “rowspan” attributes can also be used to define the layout of an entire page.
 4.6. HTML Lists
 They are used to present different types of lists.
 The types of lists are known as ordered lists, unordered lists, and description lists.
4.6.1 Ordered List
 <ol>is the tag that is used to create ordered/numbered lists.
 The <li>tag is used to insert individual items into the list. By default, Arabic numerals are
used for ordering purposes in ordered lists.
 the “type” attribute can be changed the default to some other form such as the English
alphabet.
Table 4.5 The “type” attribute and its values for the Ordered List

4.6.2 Unordered List

 <ul> the tag that is used to create unordered/bulleted lists.
 The default bullet type is “disc”.
 The “type” attribute is used to change the default type to any of the other types.
Table 4.6 the “type” attribute and its values for Unordered List

Example
 Lists can be nested. Nested list is A list that placed under any other type of list.

4.6.3 Description List

 the<dl>tag is used to define the whole description.
 the<dt>tag is used to add the item that is to be described or defined.
 the<dd>tag is used add description or definition
example