Web Design

Dr. Mahmoud Bakr

Credits to:
- Dr. Ahmed Helmi
- Nikolay Kostov, Telerik Corporation 1
Agenda

• How the Web Works

• Web site design

• Basic HTML Syntax

• Fundamental HTML Elements

How the Web Works?
• WWW uses classical client / server architecture
• The Web is the collection of machines (Web servers) hosting
web pages that can be accessed via the Internet from any
part of the world. Machines that access information on the
Web are known as Web clients.

Client running
Server running Web Server
a Web Browser
Software (IIS, Apache, etc.) 3
The Client/Server Architecture
• Client (“front end”):
– Presents an interface to the user (the Web browser)
– Gathers information from the user, submits it to a
server, then receives and presents the results
returned from the server.
• Server (“back end”):
 Responsible for data storage and management
(database)
 Responds to client requests for information
• A system consisting of a client and a server is
known as a two-tier system.
4
Web Browsers
• Web browsers are software tools used by the end user to
view Web Pages.
—Convert web addresses (URL’s) to HTTP requests
—Communicate with web servers via HTTP
—Display documents returned by a server
• Examples: Internet Explorer, Google Chrome, etc...

5
The Web is distinguished by:
• Communication protocols
— (http://) [hyper text transfer protocol]
— manages the hypertext links used to navigate
the Web.
• Documents which contain Navigation links
(hyperlinks).
— built using Hypertext Markup Language
(HTML).
— Hypertext  (text containing links)

6
Domain Name System (DNS)
• A domain name is a unique address used for
identifying a computer, such as a Web server on the
Internet.
• To access a website, you must enter the IP address
of the web server in your browser or the domain
name because it is easier to remember.
• Domain name server (DNS): A computer that
translate a hostname into an IP address
• Examples: IP address: 72.64.56.86
Domain name: www.microsoft.com
• DNS is the “phone book” for the Internet
—Map between host names and IP addresses
7
Internet Address
• Every web page has a unique address called the Uniform
Resource Locator (URL). A typical Internet address or
URL would looks like:
http://www.google.com/help/index.html

Protocol Domain name Directory or Path Filename

• The protocol followed by a colon identifies the item we
are looking for as a web page. Many Internet pages use
HTTP.
• Other common Internet protocol that one might come
across is FTP (File Transfer Protocol).
8
Server Domain Name
• The second component of the URL is the domain
name of the server (//www.google.com) which
stores the information you seek and is always
preceded by two slashes.
www = the name of the web server at the company.
google = the organization maintaining the server
com = Top-level domain (or domain identifier),
usually two- or three-letters, identifies the type of
organization:
—Generic: .com, .org, .edu, .net, etc.
—Country-code: .us, .eg,.sa, etc.
9
The Path
• The last part of the URL /help/index.html defines
the path within the Server where the requested
item will be found. Each segment of the
pathname is preceded by a single slash.
• Most of the Web pages will have .htm or .html
extension.

10
HTTP
• HTTP is a protocol used to transfer files from a
Web server onto a browser in order to view a web
page.
• HTTP is a one-way system as files are transported
only from the server onto the client's browser.
• When http appears in a URL it means that the
user is connecting to a web server and not a file
server.
• Web server: A computer dedicated to
responding to requests for web pages
11
HTTP
• HTTP is based on the request-response
communication model:
—Client sends a request
—Server sends a response
• Standard browser-server interaction:
—User enters Web address in browser
—Browser uses DNS to locate IP address
—Browser sends HTTP request
—Server sends HTTP response to browser
—Browser displays body of response in the client
area of the browser window
12
File transfer protocol (FTP)
• FTP is used to upload files from a workstation to an
FTP server or download files from a FTP server to a
workstation.
• Using FTP, files are made available on the Internet.
• When ftp appears in a URL it means that the user
is connecting to a file server and not a web server
and that some form of file transfer is going to take
place.
• Most FTP servers require the user to log on to the
server in order to transfer files.
• File server: A computer dedicated to storing and
managing files for network users.
13
Static Web Content
• The content of a website can be: Static or Dynamic.
• Static Web Site: (sometimes called a flat page)
is a web page that:
—displays the same information, products or
services, for all users.
—are often HTML documents stored as files in the
web server.
—very simple in layout, informative, and sufficient
if the changes to web content is infrequent.

14
When to use a static website?
• Changes to web content is infrequent
• List of products / services offered is limited
• Simple e-mail based ordering system should suffice
• No advanced online ordering facility is required
• Features like verifying availability of stock, online
credit card transactions, are not needed
• Web site not required to be connected to back-end
system.

15
Dynamic Web Content
• The content of a dynamic web pages, on the other
hand, changes depending on the user or from time
to time (ex. a news content).
• Dynamic web page is required when there is a need
for:
1. Frequent changes in the content to update
products/services.
2. Introducing sales promotion.
3. Providing tracking and online ordering services to
clients.
• Dynamic web sites are programmed using client-
side or server-side scripting. 16
Client vs. Server-side Scripting
• In client-side scripting, the source code is transferred from
the web server to the user’s (client) computer over the internet
and run directly in the browser. The browser then displays the
retrieved page's content to the user.
• In server-side scripting, a user's request is fulfilled by
running a script directly on the web server to generate dynamic
HTML pages which are sent to the client browser. This is
usually used to provide interactive web sites that interface to
databases on the server.

Client Side Server Side

JavaScript PHP
VBScript ASP
HTML Java Servlets
Java Applets 17
Client Caching
• A cache is a local copy of information obtained
from some other source
Client Server

1. HTTP request for image

Browser Web
2. HTTP response containing image Server

3. Store image

Cache

18
Client Caching
• What happens if we need the image again?
• We have two options: either to do another
HTTP request or to use the cached copy.
• Cache advantages
—(Much) faster than HTTP request/response
—Less network traffic
—Less load on server
• Cache disadvantage
—Cached copy of resource may be invalid (inconsistent
with remote version)

19
Secure Servers
• Since HTTP messages typically travel over a
public network, private information (such as
credit card numbers) should be encrypted.
• Hypertext Transfer Protocol Secure (HTTPS)
provides secure Internet connections for
transactions that require security and privacy
• https URL scheme tells browser to use
encryption

20
Website Design Steps
• The first step before designing a web site is to clearly
determine the purpose of the site.
- What kind of information will the target audience be
looking for on your site, a particular product or service,
online ordering…?
• The next step is to list the main topics and sub-topics of
the site. This is essential to develop easy to navigate
website.
• The web site is created by first developing the home page,
followed by a structure (shell) for the interior pages.
• The content is then distributed throughout the site, in
appropriate areas.
21
Publishing Your Website
• For a web site to be published (made available for public
access) it must have a domain name and be hosted on a
Web server.
• Individuals may have to purchase space on a commercial
Web server from a company hosting Web sites.
• For the domain name, pick one that best describes your
Web site. Contact a domain name registrar to find out
the availability of a domain name and register it.
— A free domain name can be obtained from e.g. www.domain.com
The next step is to upload the website files (HTML Files,
etc.) to your server using an FTP program (e.g. Filezilla).

22
How to make a web page?
• Web documents are text files with .html or .htm
extension
• HTML files can be created with text editors such as
NotePad, PSPad,…
• Or HTML WYSIWYG (what-you-see-is-what-you-get)
editors:
—Microsoft FrontPage
—Macromedia Dreamweaver
• WYSIWYG programs allow you to create web pages in
the way in which you want them to appear; the HTML
code is generated in the background.
23
HTML
• HTML is an acronym for HyperText Markup
Language.
• HTML documents consist of two parts:
- information content and
- a set of instructions (called mark-up or tags) that
tells your Web browser how to display the
content.
• HTML is not a programming language in the
traditional sense, but rather a set of instructions
about how to display content.
• HTML is not case sensitive.
24
How HTML is Displayed?

HTML http
CGI request Browser Command
ASP URL:http://www.yahoo.com
PHP User
…
http
response
HTML Display
DB Remote
Web Server

Client Site
25
How to Start Writing HTML?
• An HTML file must have an .htm or .html file
extension
1. Open a new Text Document (Notepad file)
2. Save it as MyPage.html
• Now you have an html file with name MyPage and
you can open it using your internet browser e.g.
google chrome.
• The web browser reads html documents and
display them as web pages.

26
HTML file structure
• An HTML page has a title and a content.
Opening tag
<html>
<head>
<title>
Page title goes here
</title>
</head>

<body>
Page content goes here
</body>
</html>

Closing tag 27
HTML head and body Elements
• The most basic tag <html> informs the browser that
the content to follow is HTML code/content.
• The <body> element contains information displayed in
the browser client area or the contents of the web page.
• The <head> element contains information used for
other purposes by the browser:
— title (shows a caption in the title bar of the page in the
browser window) using the <title>.
— scripts (client-side programs)
— style (display) information

28
HTML Vs. CSS
HTML Vs. CSS Vs. JavaScript
HTML “Hello World!”
<html>
<head>
<title>
Net Programming
</title>
</head>
<body>
Hello World!
</body>
</html>

31
HTML Headings
• Headings Are Important
• Search engines use headings to index the
structure and content of web pages.
• Users skim your pages by its headings. It is
important to use headings to show the
document structure.
• h1 headings should be main headings, followed
by h2 headings, then the less important h3, and
so on.

32
 HTML Headings (example)
• HTML headings are defined with the <h1> to <h6> tags.

<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
</body>
</html>
33
HTML Paragraphs
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag.
• Example
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>

34
Blank Spaces & Line Breaks
• In HTML, any number of spaces, and any number of
new lines, count as only one space. The browser will
remove extra spaces and extra lines when the page is
displayed.

<p> <p>
This paragraph This paragraph
contains a lot of contains a lot of
lines spaces
in the source code, in the source code,
but the browser but the browser
ignores it. ignores it.
</p> </p>

35
Example
• If you want a sequence of blank spaces using the
command &nbsp. Nbsp stands for Non-Breaking
Space.
• If you want a line break (a new line) without
starting a new paragraph Use <br>.
<HTML>
Factor 1 <br>
&nbsp &nbsp joy <br>
&nbsp &nbsp happy <br>
Factor 2 <br>
&nbsp &nbsp sad <br>
&nbsp &nbsp shame <br>
</HTML>
36
Preserve Formatting
• To preserve the format in which your text is written
in the HTML file, use <pre> tag.
• Suitable for displaying computer codes.
<html>
<body>
<pre>
The first line
The second line
The third line
The fourth line
</pre>
</body>
</html>

37
Horizontal Lines
• The <hr> tag creates a horizontal line in an HTML page. This can be used
to separate content.
<hr size=5 width=70% >
• Example
Size is the thickness of the
<html> line and width is the length
<head> of line with respect to the
<title> Horizontal Line Example </title>
page width.
</head>
<body>
<p> This is paragraph one and should be on top </p>
<hr>
<p> This is paragraph two and should be at bottom </p>
</body>
</html>

38
Comments: <!-- --> Tag
• Comments can exist anywhere between the
<html></html> tags
• Comments start with <!-- and end with -->

<!–- This is a comment -->

39
Text Formatting Tags
Tag
<b> bold text
<i> italic text
<u> underlined text
<big> big text
<small> small text
<sub> subscripted text Samplesubscript
<sup> superscripted text Samplesuperscript
<strike> or <del> Defines strike text example
<center></center> Centering text

40
Example
<html>
<head> </head>
<body>
<b> This text is Bold </b>
<br> <center> This text is centered </center>
<br> <small> This text is Small </small>
<br> <big> This text is Big </big>
<br> This is _Subscript and ^Superscript
<br> <strike> This text is Strike </strike>
</body>
</html>

41
Formatting text using <font> tag

<font size=3 face=arial color=blue>

</font>

• size: 1,2,…,6
• face: arial, Comic Sans, Calibri, Impact,…
• color: red, blue, green,…
or color codes in hexadecimal: #FF0000, #0033CC,
#00CC00

42
Example
<html>
<font size=5 face=arial color=red>
Web Prog course
</font>
<br><br>
<font size=2 face=impact color=blue>
Welcome to our course!
</font>
</html>

43
Example
<html>
<head>
</head>
<body>
<font color=blue> This is our 2 ^nd lecture.</font>
<br><br>
<b> This line is bold </b> <br><br>
<del> Here is a strike through </del>
</body>
</html>

44
Align Text
• Appears as an attribute within <p> tag.
<html>
<head>
</head>
<body>
<p align=left> This is left aligned </p>
<p align=center> This is center aligned </p>
<p align=right> This is right aligned </p>
</body>
</html>

45