UNITFOUR (4)

WEB DEVELOPMENT
4.1. World Wide Web
➡ World Wide Web (www), commonly known as the Web,
▶It is one of the most important services of the Internet.
➡ The Internet is a network of networks that the Web runs on.
➡ Web is one of the services of the Internet, & the most popular
one.
▶ There are many services that provided over the Internet such
as:- ✔ Email,
✔ File transfer and
✔ Communication services
▶ It allows users to view & nteract with a wide range of infn
ncluding:-
✔ text,
✔ images,
➡ The view and interact will be success using web browsers such
as ✔ Google Chrome,
✔ Mozilla Firefox,
✔ Safari, and
✔ Microsoft Edge.
▶ The Web is a collection of websites or webpages 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.
➡ CERN (the European Organization for Nuclear Research)
➡ It is renowned for its contributions to particle physics and is also
significant in the history of the World Wide Web (WWW).
➡ The organization's name comes from French name,"Conseil
Européen pour la Recherche Nucléaire," which translates to
"European Council for Nuclear Research."
 How CERN relates to the development of the web:-
1. Foundation: Founded in 1954, CERN is located near Geneva,
Switzerland, and is one of the world's largest and most respected
centers for scientific research.
2. Development of the World Wide Web: The World Wide Web was
invented by Tim Berners-Lee, a British physicist and computer
scientist, while he was working at CERN in the late 1980s.
▶ He proposed a system for the management and sharing of
information among researchers.
3. First Website: The first website, created by Berners-Lee in 1991,
was hosted on a CERN server.
▶ This website provided information about the WWW project
itself, including how to create web pages and use web browsers.
4. Open Standards: To ensure the web's widespread use &
accessibility, CERN made the decision to not patent the web
technology.
▶ Instead, they provided it as an open standard, allowing anyone
▶ When the Web was invented, it was formed out of four essential
foundations:- 1. HTML,
2. HTTP,
3. A web server, and
4. A web browser
▶ HTML, which stands for HyperText Markup Language.
▶ It is the language that is used to create webpages.
➡ A web browser is a software used by users to view webpages.
➡ A web server, on the other hand, is a software that stores
webpages and responds to user requests that come through web
browsers.
➡ HTTP, stands for HyperText Transfer Protocol.
▶ It 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.
 ➡ Nowadays, websites are the most efficient and effective ways
for organizations or individuals to present themselves to their
target audiences.
➡ The web makes it possible for an organization to expand its
reach to the entire world.
➡ A website that is physically placed in one part of the world can
be accessed from any other part of the world.
▶ It is also how online transactions are conducted by e-commerce
companies.
▶Today, shoppers use websites to make orders of different types
of products from their homes or workplaces.
➡This is help us to:- ✔ avoids the need to physically go to shops
✔Reduces the cost of transportation and
✔ Increases the efficient use of our limited
time.
➡ Similarly, various government e-services are accessed through
 ★. For example, citizens do not need to go to the Immigration
Nationality & Vital Events Agency office in person to make
applications for passports.
★. They can simply go to the website and make their
requests online.
★. Education is another example where websites are used to
facilitate
a lot of activities. examples
★. Online learning has become widespread in many parts of the
world.
Key Features of the World Wide Web:
1. Hypertext: The web is built on the concept of hypertext, which
allows for the linking of documents through hyperlinks.
▶ This enables users to easily navigate from one resource to
another.2. HTML: Most of the content on the web is written in
Hypertext Markup Language (HTML).
3. URLs: Every resource on the web has a unique address known as
a Uniform Resource Locator (URL).
▶ A URL typically specifies the protocol (such as:-
✔ HTTP or HTTPS),
✔ The domain name, and
✔ The path to the resource
(e.g., [Link]
4. Web Browsers:They are applications that allow users to access
and display web pages.
▶ They interpret HTML, CSS (Cascading Style Sheets), and
JavaScript to render the content visually and enable user
interaction.
5. Web Servers: Websites are hosted on web servers, which store
and serve web pages to users when requested through their
browsers.
▶ Web servers communicate with browsers using the Hypertext
 6. Interactivity: The web supports dynamic content and
interactivity.
▶ It allows users to engage with websites through forms,
applications, and multimedia.
7. Search Engines: Search engines like Google, Bing, and Yahoo
index and organize web content, making it easier for users to find
specific information by entering queries.
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.
➡ llThe design should also make the search for information easy
 Important guidelines to consider when a website is designed.
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.
✔ For example, a website that is intended for children in
educational settings should have a presentation different from one
that
is designed for adults in the business environment.
Navigation:- Webpages is 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.
 Consistency:-The feel & look of webpages on website should be
similar.
▶ Better user experience is achieved with consistent use of
backgrounds, colors, typefaces, & the like throughout the website.
Simplicity:- Simplicity in website design applies to various elements
of a website, such as the use of colors, graphics, typefaces, and the
like.
E.g, 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.
Accessibility:- Designing a website with everyone in mind including
people with disabilities is highly advised to make sure that no one is
excluded
➡ Websites can be developed using a WYSIWYG (What you see is
what you get) software like Adobe Dreamweaver.
 ➡ WYSIWYG stands for "What You SeeIs What You Get."
▶ It is a user interface concept commonly used in S/W applications,
particularly in: ✔ Word processors,
✔ Web design tools, and
✔ Other types of content editing s/w.
▶ The term indicates that the content displayed on the screen during
editing appears is very similar (or identical) to the final output or
presentation format.
HTML Basics:-It is a markup language that is used to
createwebpages.
➡ The different elements of a webpage are defined using the
predefined set of markup tags of HTML.
▶ Such elements are:- ✔ Headings,
✔ Tables
✔ Paragraphs
✔ Images, and others
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.
E.g. [Link] is a valid file name for an HTML document/
webpage.
HTML Tags and Elements
✔ HTML tags are a set of predefined names enclosed in angle
brackets.
✔ Each HTML tag has its specific meaning.
✔ The web browsers are designed to interpret or render HTML
tags according to their intended purposes.
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.
★. Some examples of HTML elements and their outputs on the browser.

HTML ELEMENTS
 ★. The significant majority of HTML elements conform to the <start tag>
content </end tag> format.
★. There are some HTML elements that have a different format.
★. These HTML elements are known as void elements.
★. Void elements do not have an end tag.
✔ Examples of the format of void elements and their meanings.

Void Elaments
➡ Note that the <img> element needs an attribute that indicates the address of
the image for the browser to insert the image into the webpage.
 ➡Examples of HTML tags rhe used for Inserting horizontal and new lines.

➡ Note that the two horizontal lines placed above and below the paragraph are
the result of the two <hr > elements.
➡ The text “paragraph” is shown in a new line because the <br > element is
inserted right before it, inside the <p> element.
 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.
<!DOCTYPE html>
<html>
<head>
<title>
Page title
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
 Notes
▶ <!DOCTYPE htmI>: this element indicates the type of the document.
▶ <html> ...</html>: represents the entire document, and it is divided
into two major sections:
1. the head (<head>.</head>) and
2. 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.
 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
valu)
.

➡ 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.
The <img> HTML element is one such example.
➡ The <img> element should have the “src” attribute, which refers to the name
 Examoles

➡ The other HTML element that uses the “src” attribute is the
<video> element.
➡ <video> element is used to add a video to a webpage as shown
in the following example.
<video width=”320” height=”200” controls
src=”Country Landscape.mp4” >
</video>
 The meaning of the attributes in the <video> element is given as follows:
➡„ The controls attribute adds controls like play, pause, and volume.
➡ Note that no value is assigned to the controls attribute.
➡„ The width and height attributes control the width and height of the
video on the webpage depending on the value given.
➡„ The src attribute is used to refer to the file name of the video
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.
➡ Hyperlinks can easily be distinguished by the hand symbol that the mouse
cursor is turned to when the mouse is hovering over the hyperlinks.
Links to other Pages
➡ The anchor tag (<a>) is used to create hyperlinks.
➡ An HTML element that is formed from an anchor tag has the following
format:
Examples
 ➡ Target attribute
➡ Another important attribute of the anchor tag is the “target” attribute.
➡ The value of the “target” attribute determines where the linked document is
displayed.

➡ Note that the image element is placed between <a> and </a>.
➡ Also note that a relative URL, as opposed to an absolute URL, is used to reference
the “[Link]” image.
➡ The assumption in the way the URL is given is that the image and the current
webpage are found under the
same folder.
➡Absolute URL: is a URL that includes every element of 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:
➡ [Link]
Relative URL: is a path given relative to the location of the current webpage.
➡
 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.
Examples

➡ 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
<table border=1>
<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 Alagi</td>
<td>3,949 m</td>
</tr>
 ➡ When the layout of the table needs the merging of multiple columns or rows,
“colspan” and “rowspan” attributes can be used respectively. [Link] HTML Code
<table border=1>
<tr>
<th></th>
<th colspan=2>Cases</th>
<th colspan=2>Deaths</th>
</tr>
<tr>
<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>
 HTML Code
<!DOCTYPE html>
<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”>
Footer
</td>
</tr>
</table>
</body>
 HTML Lists
➡ HTML lists are used to present different types of lists.
✔ The types of lists are known as:-
✔ ordered lists.
✔ unordered lists, and
✔ description lists.
Ordered List
▶ <ol> is 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.
The “type” attribute and its values for the Ordered List
 ➡ example of an ordered list, and what the output on the web
browser looks like.
HTML Code
<ol>
<li>Coronary heart disease</li>
<li>Influenza and pneumonia</li>
<li>Diarrheal diseases</li>
<li>Stroke</li><li>Tuberculosis</li>
<li>Road traffic accidents</li>
<li>Liver disease</li>
<li>Diabetes mellitus</li>
<li>HIV/AIDS</li>
<li>Breast cancer</li>
</ol>
 Unordered List
➡ <ul> is the tag that is used to create unordered/bulleted lists.
▶ The <li> tag & 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.
The “type” attribute and its values for Unordered List

Examples of The “type” attribute in Unordered Lists