Introduction to website design

Prepared by Anas Khaitou
26/12/2012

1) My Name is Anas Khaitou
2) Gradated From SVU 2010 BIT specification
3) Preparing for master about Internet Quality in SVU,
MQM specification
4) Web supervisor at E-lcom ISP
5) Author of book Lean Drupal in Arabic
6) 7 years experts as web design and programming
using PHP, CMS, frameworks ..etc.
7) Works with more than 7 companies inside and
outside Syria
8) Lunch and programming more than 50 websites
inside and outside Syria

 History of internet  Website types
 Benefits of having  What is website design
website  Website programming
 What is the Web language
 What is HTTP  Start a website
 What is HTML  HTML example
 Web browser history  End
 How web browser
works

 1969: Arpanet On the October 29, 1969,
computers at Stanford and UCLA connected
for the first time
 1972: CYCLADES: France began its own
Arpanet-like project in 1972, called
CYCLADES. the host computer should be
responsible for data transmission rather than
the network itself.
 1973: The first trans-Atlantic connection and
the popularity of emailing

 1974: The beginning of TCP/IP which would have
no central control and would work around a
transmission control protocol
 1990: World Wide Web protocols finished The
code for the World Wide Web was written by Tim
Berners-Lee, based on his proposal from the
year before, along with the standards for HTML,
HTTP, and URLs.
 1991: First web page created
 1993: Mosaic – first graphical web browser for
the general public

1. You stop being invisible.

2. You create another sales tool

3. Two-Way Communicative Marketing

4. Cheap Market Research

5. Improve credibility

 The term WWW refers to the World Wide Web or
simply the Web.
 The World Wide Web consists of all the public
Web sites connected to the Internet worldwide,
including the client devices that access Web
content.
 The World Web is based on these technologies:
1. HTML - Hypertext Markup Language
2. HTTP - Hypertext Transfer Protocol
3. Web servers and Web browsers

 HTTP - the Hypertext Transfer Protocol -
provides a standard for Web browsers and
servers to communicate.
 HTTP is an application layer network
protocol built on top of TCP.
 HTTP clients (such as Web browsers) and
servers communicate via HTTP request and
response messages.
 The three main HTTP message types are GET,
POST, and HEAD.

 HTML stands for Hypertext Markup
Language.

 HTML is used to define the structure and
layout of a Web page

 HTML used tags that have attributes.

 Tim Berners-Lee was the primary author of
html, however, you do the results.

 A browser is a software application for retrieving,
presenting and traversing information resources on
the World Wide Web
 The first web browser was invented in 1990 by Tim
Berners-Lee. It was called WorldWideWeb
 1993 Mosaic released
 1994 Netscape
 1995 Internet Explorer
 1996 Opera
 1998 Mozilla
 2003 Safari
 2004 Firefox
 2008 Google chrome

 Request a page from server

 Request pass through the network using a
protocol like http

 The resource is usually an HTML document

Google.com 192.168.1.4

DNS Server We browser Server

192.168.1.4 HTML & other
files

Web Page Google.com

User

 The job of the HTML parser is to parse the
HTML markup into a parse tree.

 The vocabulary and syntax of HTML are
defined in specifications created by the W3C
organization.

 There are a lot of programming languages
used for website design.
 Languages are classified as:
 Client – Side
 Server – Side

 Client-side is used to make Web pages
change after they arrive at the browser.

 It is useful for making pages a bit more
interesting and user-friendly.

 Examples: HTML – Java Script

 Server-side tends to be used for allowing
users to have individual accounts and
providing data from databases

 PHP and ASP.net are the two main
technologies for server-side scripting.

 This classification is based on the technology
running the website.

 This method decides the way the website deals
with its data, content and provides an interface
to its visitors.

 According to the Building Method we have
two types:
I. Static websites
II. Dynamic websites

 Advantages
 Flexibility is the main advantage of a static site
 Every page can be different if desired

 Disadvantages
 Update the content
 Scalability

 Advantages
 Connect to databases
 Create a content management system

 Disadvantages
 The design of a dynamic site is more fixed than a
static one
 Costs are higher initially than for a static site.

STATIC SITE DYNAMIC SITE

1. fixed amount of pages 1. Unlimited amount of pages
2. information is presented in 2. Information is presented in
HTML programming languages
and DB
3. The content on a static 3. The content generally
webpage will never change changes every time the
unless the change is page loads with you having
applied manually to manually make those
changes.

 Adding interactivity to a web site attracts
user attention and tends to brings them to
the website again.

 Interaction on a website can be classified in
two categories:
1. Single User Interaction
2. Multi-User Interaction

 display the content in a way which would
attract users to spend more time on a
website.
 Use flash and Jquery to represent your
website

Allowing site visitors to
interact with each other
Most common examples are
blogs, polls, discussions,
sharing presentations, chat
site, images and links etc.

 website design is planning, creation and
updating websites.

 Website design involves also information
architecture, website structure, website
layout, colors, and fonts well as icons design.

 building the front-end of a web page.

Website
Planning Hosting Testing

Domain Web Getting
Name Technolo Your
gies
Site
Noticed

Understand website design concepts
I. Users:
 Types experts, regular
 Ages
II. Purpose
 Commercial, government
III. Features
 Resizable font, ecommerce cart

IV. Design:
 easy to use
 User-friendliness
 Agent request

Domain name is a unique name for a web site,
like example.com.

 Who is responsible for IP addressing
and domain name management?

ICANN (Internet Corporation for Assigned Names &
Numbers)

A web hosting service is a
type of Internet hosting
service that allows
individuals and
organizations to make
their website accessible via
the World Wide Web.

This information includes
 Markup languages
 Programming interfaces languages
 Standards for document identification and
display.

You will need to test your web pages as you
design them in the major browsers

When your site is ready, you will need to
submit it to search engines like Google and
Bing.

 Client Side
 HTML
 CSS
 JavaScript

 Server Side
 PHP or ASP

 CMS

 HTML stands for Hypertext Markup Language

 Is HTML considered a programming language?
No, HTML is not a programming language.
The "M" stands for "Markup". Generally, a
programming language allows you to describe
some sort of process of doing something, whereas
HTML is a way of adding context and structure to
text.

1. Open Notepad and then go to File -> Save
As...

2. When you choose your filename, ensure
that you put .html on the end, e.g.
mypage.html

3. Click OK

 HTML file (or web page) is coded using tags,
which can define areas of a page or things on
that page. <html>
<head>

</head>

<body>

</body>

</html>

 HTML Tag: the HTML tags go at the start and at the end of your
document. This tells your browser that what falls between them
should be defined as HTML. So, unless I say otherwise, don't put
anything before <html or after </html>.
 HEAD Tag: What comes between these tags is not intended to be
displayed as part of your page. Between these tags we can tell the
browser things about the page or do stuff in the background. It is a
useful place for many things, and I will introduce one of them later
on.
 BODY Tag: Between these two tags is stuff you want to display on
your page. All of it. So if you need to put more on your page, then
create more space between these two tags. Simple as. You can
also set a few basic settings for your page using the body tag,
which we will come to later on also! One step at a time.

<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<p>
Welcome to my first web page!
</p>

</body>
</html>

You can reach me via:
M: 0955335301
E : khaitou@ymail.com
F : facebook.com/Anas.Khaitou
T : twitter.com/AnasKhaitou

Introduction to website design

More Related Content

Viewers also liked (20)

Similar to Introduction to website design (20)

Introduction to website design

Editor's Notes