Web Design Faculty of Science

Computer Science Dept.

Second Stage
Lecture 1:
Basic of WEB Technology

Hoshang Qasim
E-mail: hoshang..awla@soran.edu.iq
2021
 Course Outlines

• This is a web design course focusing on basic designs technology utilized in

structuring and styling web pages which includes:

HTML CSS

2
 World Wide Web(WWW)

• Abbreviated as WWW, Commonly known as the Web.

• System of interlinked hypertext documents accessed via the Internet. With a web
browser.
• May contain text, images, videos, and other multimedia and navigate between
them via hyperlinks.
• Emergence between 1989 and 1991.
• The language used to write these documents with HTML, CSS, & JS
Internet
and Web
3 are the
same?
 They are different…!!!
• The Web is a portion of the Internet.
• The Web is just one of the ways that information can be disseminated over
the Internet.
• Other Internet service are: Electronic Mail (E-mail),
Chat ,FTP (File Transfer Protocol),
Voice / Video Communication, Gaming etc.

4
 Web Architecture

• Web Browser
A program used to view, interact with
web pages and navigate the World request
1
Wide Web
• Internet 4
a connection of computer networks response 2
using the Internet Protocol (IP) Web Browser
3

• Web Server Client side

program that runs on a computer and

is responsible for replying to web
browser requests for files
Web Server
5 Server Side
 Web Server and Browser

• Web Server: software that listens for web page requests

• Server Side team: Back End Developer

• Web browser: fetches/displays documents from web servers

• Mozilla Firefox
• Microsoft Internet Explorer (IE)
• Apple Safari
• Google Chrome
• Opera
6
• Client Side team: Front End Developer
 Web Languages/ Technologies
The basic web technologies are:
• HyperText Markup Language(HTML)
• Cascading Style Sheets(CSS)
• JavaScript(JS)

For more Dynamic Web Programming we use:

• PHP
• ASP.NET
• SQL

7
• AJAX
 Web page VS Website
Attributes Webpage
A webpage is defined as the smaller part of the website
Short Definition that includes contents like text, media, etc. It also
comprises links to many other relevant webpages.
Website
A website is a cluster of different webpages of different
topics addressed to certain URLs.

It is a single document that is displayed by the web It is a collection of many documents. Web browsers are used
browser using a specific URL address. to access such documents using specific URL addresses
File Type
attached to the website.

It can be accessed using a direct URL link or through It can be accessed through a domain address.
Accessible by a website.
The web page URL includes the extension. i.e., the path The website URL does not include any extension.
Extension
of the file.
It is comparatively less-complex to develop because it is It is comparatively more complex to develop.
Complexity just a smaller part of the website.

It requires less time for development as it is not complex, It requires comparatively more time for development.
Development time like a website.
8
Common Contact Page, Registration Page, Sign Up Page, About Amazon.com, Wikipedia.org, JavaTpoint.com, etc.
Examples Page, or any other page like this.
 Web page VS Website

https://www.soran.edu.iq/students-activities.html
9 Web page
 Web Application
▪ A web application is a software program that runs in an Internet browser or through a web
page.

▪ Similar to a software program that runs on a computer, web application is a set of web pages
that are generated in response to user requests.

▪ A web application is a computer program that operates web browsers and web technology to
perform tasks over the Internet.

▪ The internet has many different types of web applications, such as

✓ Search engines
✓ Online stores
✓ news sites
✓ games
10
 Static and dynamic websites

• A static website contains Web pages with fixed content

• Each page is coded in HTML and displays the same information to every visitor .
• Most basic type of website and are the easiest to create.
• Do not require any Web programming or database design .

• Dynamic website: Dynamic websites contain Web pages that are generated in real-time
• using a server-side scripting language such as PHP, ASP,JSP.
• May generate different HTML for each request .
• content is called in by the scripting language from other files or from a database depending
on actions taken by the user.
11 • Require Database design.
 Static and dynamic websites

12
 Front End Vs. Back End

• The Front End is the stuff that you see and interact with: HTML, CSS , and JS
• The Back End is everything else: so many choices!
Such as:
PHP

Python

MYSQL

MONGODB

WEB Server

13 • Back End technologies are responsible answering the Clint side

requests and providing security, date storage and scalability services
 Front End Vs. Back End

Example
Restaurant Analogy: The back end is everything that happens in the kitchen; the
front end is what is plated and sent to your table

Web Developers

A person who works on the client-side is known as Front-end Developer

A person who works on the server-end side is known as Back-end Developer

A person who works on both sides is known as Full-stack Developer

14
 Internet VS Web
• The Internet: a inter-connected computer networks, linked by wires, cables,
wireless connections, etc.

• Internet is a collection of computer networks that use a protocol to exchange

data.

• Web: a collection of interconnected documents and other resources.

• The world wide web (WWW) is accessible via the Internet, as are many other
services including email, web app, file sharing, etc.
15
 How does the Internet Work?
• Through communication protocols
• A communication protocol is a specification of how communication between
two computers will be carried out.

• Below protocols are work for internet processing such as:

✓IP
✓TCP and UDP
✓DNS
✓SMTP
16
✓FTP
 How does the Internet Work?

• IP (Internet Protocol): defines the packets that carry blocks of data from one
node to another.

• Internet Protocol (IP) is a method or protocol by which data is sent from one
computer to another on the Internet.

• Each computer on the Internet has at least one IP address that uniquely
identifies it from all other computers on the Internet.

17
 How does the Internet Work?

• TCP (Transmission Control Protocol)

• TCP is a standard that dictates how to establish and maintain a connection

through which two programs may exchange data.

• UDP (User Datagram Protocol): the protocols by which one host sends data
to another.

• UDP is an alternative protocol to the TCP, Unlike TCP/IP, UDP does not divide
18
each transmission into packets, which allows for a faster transmission.
 Domain Name Service

• DNS is a service that receives a request containing a domain name hostname

and respond with the matching IP address.

• an Internet service that translates domain names into IP addresses.

For example, the domain name www.example.com might translate to
198.105.232.4.

19
 Search Engine

• Search engine is a software, usually accessed on the Internet, that searches

a database of information according to the user's query, via the World Wide
Web (WWW)

• The engine provides a list of results that best match what the user is trying to
find.

20
 Why to learn HTML, CSS, JScript

• HTML: Describes the content and structure of information on a web page

• CSS: Customizing format and layout of the webpage
• JavaScript: Make the page to interact with the user

21
 HTML

• HTML stands for Hyper Text Markup Language

• The Visual Appearance of a Website
• "put an image here""put a form here”
• "put an image here""put a form here"
• “Web Browser Language”: All Web Browser understand HTML
• HTML is a markup language
• A markup language is a set of markup tags
• HTML5 is the latest

22
• Maintained by W3C - World Wide Web
 HTML

What is an html File?

• An HTML file is a text file containing small markup tags

• The 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

23
 HTML

• An Example of html file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Sample Document</title>
</head>
<body> Hello World!
</body>
</html>

24
• Save the file as "mypage.htm or html
 Tags and elements HTML

Example
Element • The opening tag says, “This is the beginning of a heading”

• The closing tag says, “This is the end of a heading.

<hl> About Google </hl>

content
Opening tag Closing tag

25
 Skeleton of HTML
HTML

<html>
• four main elements that form the basic structure of every document:
<html>, <head>, <title>, and <body>
<head>
• These four elements should appear in every HTML document
• Its called skeleton of the HTML document
<title>
• without the skeleton HTML files will not be rendered correctly
in web browsers
<body>

26
 Skeleton of HTML5

• Visualization of an
HTML page structure:

27 Note Only the <body> area (the white area) is displayed by the bowser.
 Cascading Style Sheets (CSS)

What is CSS?

• Is a way to add style to Web page documents

• Consists of rules for specifying how an element should be presented
• CSS3 latest version

28
 Cascading Style Sheets (CSS)

Why CSS?

• keeps presentation layer separate from structure layer of Web design

• makes Web docs smaller, reduces disorder
• can be interchanged without major change to the web document
• can impose a uniform style to a variety of web documents with one style sheet
• can format different elements with a single style rule
• Simplify site maintenance
• Faster downloads

29
 Cascading Style Sheets (CSS)

CSS Syntax

• CSS is a list of style rules placed as either

- the content of an HTML style element

- a .css file (external level)

• each style sheet rule looks like:

selector {property: value; ...}

30
 selector {property: value; ... }

Selector
A selector is an expression that specifies which elements to style.

Property
Define what aspect of the selected element will be changed or styled.

• A value is a specification for this property.

31
 Cascading Style Sheets (CSS)

Style Rule Example p{

color: blue;
font-size: 11pt;
font-weight: bold;
}

p is the style rule selector

color, font-size, font-weight are properties

blue, 11pt, bold are their corresponding values

The style rule declaration is the following:

{ color: blue;
font-size: 11pt;
32
Font-weight: bold;
}