FORM THREE

TECHNOLOGY

Summary of Unit 3-4

UNIT THREE Web Development Using HTML

Overview

The Web is an Internet-based distributed information system. Anyone with

a computer connected to the Internet can easily retrieve information by
giving a Web address or by simply clicking a mouse button on hyperlinks.
The Web is the best way to disseminate information and making it
available 24/7. Also, Information can be collected from Web users and
customers through online forms. Web masters and administrators control
and update Web content anytime from anywhere on the Web. All these
features make the Web a powerful tool for mass communication, e-learning
and e-commerce. Compared with TV, radio, newspapers, and magazines,
putting the word out on the Web is relatively simple and inexpensive. A
website is much greater than a one-way communication media. It can be a
virtual store or office that is always open and supported by workers from
anywhere.

1.0 What is World Wide Web?

The World Wide Web (WWW) or simply Web is a way of exchanging

resources and information between computers on the Internet linked by
hyperlinks and URLs. These hyperlinks and URLs allow web servers to
deliver resources as requested using HTTP through web browsers.

Hyperlink A hyperlink or simply a link is a selectable element in an

electronic document that stands as an access point to other electronic
resources. To access the linked resource, click on the hyperlink. The
hyperlinks may include clickable text, buttons, Icons and image links.

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

HTTP or HTTPS

HTTP stands for Hypertext Transfer Protocol. This is the protocol used to
transfer hypertext documents that makes the World Wide Web possible.

There is also the HTTPS, that is a secure and encrypted version for HTTP
protocol. A standard web address such as https://goole.com is called a
URL and here the prefix https indicates its protocol.

URL

URL stands for Uniform Resource Locator, and is used to specify

addresses on the Web. A URL is the fundamental network identification for
any resource connected to the web such as hypertext pages, images, video
and sound files.

A full URL usually has this format

Protocol://domainname/pathname

The protocol indicates how information is transferred from a link. The

protocol mostly used for web resources is HTTP. The protocol is followed
by a colon, two slashes (//), and then the domain name, one slash and the
pathname.

The domain name is the address of the computer server on which the
resource is located. The domain is a unique name on the internet. What the
domain name is for a web page is like what ID is for a human in real life.

Pathname contains links to particular files or subdirectories that may be

further specified after the domain name.

Web Browser

A web browser is software on your computer that allows you to access the
web and obtain information from web servers.

The most popular browsers today are: Internet Explorer (Microsoft Edge),

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

Google Chrome, Mozilla Firefox and Safari. All browsers basically work the
same way. Once you know one, you can easily learn the others.

Web Server

Web server is a computer where files are stored which can be accessed via
the internet using HTTP

The server is always connected to the internet where every Web server that
is connected to the Internet is given a unique IP (Internet Protocol) address.

History of World Wide Web

In 1989, Tim Berners-Lee invented the development of the World Wide Web
at CERN, an international scientific organization based in Geneva,
Switzerland. He was trying to find a new easy way that scientists can share
information pertaining to their experiments among themselves.

That time, Tim Berners-Lee suggested three main technologies by which all
computers could understand each other (HTML, URL and HTTP). These
technologies still remain in use today.

Tim also made the world's first web browser and web server. The first web
was a simple pages of just words and pictures, a bit like online books or
magazines

How Web Works

When you type a web address into your browser, it's like walking to the
shop

1. The browser finds the real address of the server that the website lives on
(you find the address of the shop).

2. The browser sends an HTTP request message to the server, asking it to

send a copy of the website to the client (you go to the shop and order your
goods).

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

Web Development Layers

As you know, a website is a collection of individual but related web pages

that are often stored together and hosted by a web server, Web pages can
include different objects such as text, images, sound and video. A web
page is created using three layers:

1. The content layer or the structure layer

2. The presentation layer.

3. The behaviour layer.

You develop the content, presentation and behaviour layers of your web
page using HTML, CSS and Script languages such JavaScript.

Three layers of web design:

Structure. Style. Behaviour

HTML markup. CSS. Java Script

What is HTML?

HTML is an abbreviation for Hypertext Markup Language, and it is the most

widely used language to build Web Pages.

Hypertext specifies the way in which web pages are linked together. So
links of the webpages is called Hypertext.

HTML is a Markup Language that means HTML simply mark-up a text

document with elements (tags), that web browsers can understand to
display the structure of the page.

Concept and syntax of HTML

An HTML document is a plaintext document structured with special text

inside angle braces (< >). These special elements are called tags. They

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

aren't used to be displayed on the web page, but to provide instructions to
the web browser about the meaning of the tags.

In an HTML document, everything written within tags are termed as HTML

elements. Elements are mostly made up of two tags (an opening tag and a
closing tag). The closing tags can have extra forward slash at the end of
the tag.

The main parts of the HTML element are as follows:

1. The opening tag: This consists of the name of the element (in this case,
p), wrapped in opening and closing angle brackets. This states the
beginning of the element.

2. The closing tag: This is as same as the opening tag, but it includes a
forward slash at the end of the tag. It states the end of the element.

3. The content: This states the content of the element, in this case, it is just
a text.

4. The element: This is a combination of the opening tag, closing tag and
the content together.

HTML Document Structure

A typical HTML document will have the following structures

!DOCTYPE>: This defines the document type and provides to the browser
about the version of HTML.

<html>: This tag informs the browser that it is an HTML document. Text

<head> : It should be the first element inside the <html> element, which

<title>: As its name suggested, it is used to add title of that HTML page

<body>: Text between body tag describes the body content of the page that
is visible to the end user.

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

Getting Started with HTML

A text editor and a browser are required to get started with HTML, so even
plain simple Notepad application works as HTML text editor. such as:

 Visual Studio Code

 Notepad++

 Sublime Text

Heading Element

This element is used for making headlines and do not use headings to
make text

Paragraph <p> align Attribute

You can align a paragraph to the left, right or center of an HTML document
by using the align attribute.

Line Break Element

The line break element is used to break text in an HTML document into
separate lines.

HTML Forms

HTML Forms are used to collect different data from users including their
names, email addresses, phone numbers and other details like credit card
information for different purposes.

Input Element

The input element is the most commonly used element within HTML forms.
It allows you to specify various types of user input fields, depending on the
type attribute.

Unit 4: Abstraction and Algorithms

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

Concept of Computational thinking:

Computational thinking (CT) is a study of the problem-solving techniques

and strategies used in writing or debugging programs and software
programs. It is a logical approach to analyzing a problem, providing a
solution that can be understood by human and used by computers.

Computational Thinking (CT) is a problem-solving process that includes

(but is not limited to) the following characteristics:

Formulate problems in such a way that we can use a computer and other
tools to help overcome them.

Logically organizing and analyzing data.

Representing data through abstractions such as models and simulations.

Automating solutions through algorithmic thinking.

Identifying, analyzing, and implementing possible solutions with the goal of

achieving the most efficient and effective combination of steps and
resources.

Generalizing and transferring this problem-solving process to a wide variety

of problems.

The four cornerstones of computational thinking:

Abstraction

Abstraction is the process of making an artefact more understandable

through reducing the unnecessary detail. The skill in abstraction is in
choosing the right detail so that the problem becomes easier, without
losing anything that is important. A key part of it is in choosing a good
representation of a system. Different representations make different things
easy to do.

Abstraction provides us with the ability to master complexity. An algorithm

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

is an abstraction method of taking inputs, performing a series of steps, and
generating outputs

Decomposition

Decomposition is a way of thinking about artefacts in terms of their

component's parts. The parts can then be understood, solved, developed,
and evaluated separately. This makes complex problems easier to solve,
novel situations better understood and large systems easier to design.

Pattern recognition

Pattern recognition involves identifying similarities or patterns between

small, decomposed problems that can help us solve more complex
problems more effectively.

Pattern recognition as a method involve the following steps:

 Identifying common elements or features in problems or systems

 Identifying and interpreting common differences between processes

or problems

 Identifying individual elements within problems

 Describing patterns that have been identified

 Making predictions based on identified patterns

Algorithm

An algorithm is a process that consists of a limited set of instructions

which specify a finite sequence of operations that provides the solution to
a problem, or to a specific class of problems for any permissible set of
input quantities. In other words, algorithms are sets of step by step
instructions designed to solve a problem. Algorithms are often used as a
starting point for making a computer program.

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

Problem solving process

Problem solving is the process of defining a problem, assessing the

problem's cause, and finding, prioritizing, and choosing alternatives to a
solution as well as implementing a solution. For example, every day, people
make decisions to solve problems which affect their lives. If there is a bad
decision, time and resources are wasted, so it is essential that people learn
how to make good decisions.

The necessary steps to ensure the right decisions are taken include:

1. Identify the problem: The first step to solving a problem is definition of

the problem.

2. Understand the problem: You need to understand what the problem

entails before you can go ahead with the solution.

3. Identify alternative ways to solve the problem: Considering multiple

alternatives can significantly enhance the value of your ideal solution and
alternative solutions to the problem should be generated as complete as
possible. You may want to talk to others to find solutions other than the
ones you found. Alternative solutions must be acceptable.

4. Select thebest way to solve the problem from the list of alternative
solutions

In this step, you need to identify and evaluate the pros and cons of each

possible solution before selecting the best one. In order to do this, you
need to select criteria for the evaluation. These criteria will serve as the
guidelines for evaluating each solution.

5. List instructions that enable you to solve the problem using the selected
solution/

This step-by-step instruction shall fall within the knowledge base defined in
Step 2. No instructions can be used without the person or the computer

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068

being able to understand them. This can be very restricted especially when
working with computers.

6. Evaluate the solution : Evaluating a solution means reviewing its result to

see if it is correct and if it meets the needs of the people with the problem.

Concept of algorithms

A computer program follows an algorithm which is a sequence of activities

that can be represented using pseudocode. For example, code-like English
text statements or a flowchart like labelled symbols connected to show the
flow of action.

An algorithm is a series of instructions explaining how to make something

happen. Algorithms can be constructed using flow charts and
pseudocodes. They are written in the form of statements and expressions.

Flow charts

Flowcharting is a tool evolved in the computer technology industry, for

showing the steps involved in a process. A flowchart is a diagram of boxes,
diamonds and other types that are connected by arrows- each shape
represents a step in the process, and the arrows indicate the order in which
they occur. Flowcharts use symbols and flow lines, to demonstrate the
operation of an algorithm in a figurative way.

The flow chart shows the key points in an algorithm which are:

1. Start

2. The order in which the sequences of instructions are performed

3. The points where inputs and outputs occur

4. The points where decisions are made about what to do next.

5. End

Pre: by Eng ilyaas Abdirahman Is-hak Contact : 0682120068