Web Design Faculty of Science

Computer Science Dept.

Second Stage
Lecture 1:
Basic of WEB Technology

Hoshang Qasim
E-mail: [email protected]
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 Website
A webpage is defined as the smaller part of the website A website is a cluster of different webpages of different
Short Definition that includes contents like text, media, etc. It also topics addressed to certain URLs.
comprises links to many other relevant webpages.

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;
}