introduction to website design

Introduction to Website DesignPrepared by Anas Khaitou26/12/2012

About Me :D

1) My Name is Anas Khaitou2) Gradated From SVU 2010 BIT specification3) Preparing for master about Internet Quality in

SVU, MQM specification4) Web supervisor at E-lcom ISP5) Author of book Lean Drupal in Arabic6) 7 years experts as web design and

programming using PHP, CMS, frameworks ..etc.7) Works with more than 7 companies inside and

outside Syria8) Lunch and programming more than 50 websites

inside and outside Syria

About Me :D

INDEX

History of internet Benefits of having

website What is the Web What is HTTP What is HTML Web browser

history How web browser

works

Website types What is website

design Website

programming language

Start a website HTML example End

The History of the Internet

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

The History of the Internet

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

Benefits of Having a Website

1. You stop being invisible.

2. You create another sales tool

3. Two-Way Communicative Marketing

4. Cheap Market Research

5. Improve credibility

What is WWW

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

What is HTTP

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.

What is HTML

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.

Web browsers History

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

Web browsers History

How Browsers Work

Request a page from server

Request pass through the network using a protocol like http

The resource is usually an HTML document

How Browsers Work

User

Server

Google.com

We browserDNS Server

Google.com

192.168.1.4

192.168.1.4

HTML & other files

Web Page

HTML Parser

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.

HTML Example

Website programming languages

There are a lot of programming languages used for website design.

Languages are classified as: Client – Side Server – Side

Client 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

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.

Website Type

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 websitesII. Dynamic websites

Static website

AdvantagesFlexibility is the main advantage of a

static siteEvery page can be different if desired

Disadvantages Update the content Scalability

Dynamic website

AdvantagesConnect to databasesCreate 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 Vs Dynamic

STATIC SITE

1. fixed amount of pages2. information is

presented in HTML

3. The content on a static webpage will never change unless the change is applied manually

DYNAMIC SITE

1. Unlimited amount of pages

2. Information is presented in programming languages and DB

3. The content generally changes every time the page loads with you having to manually make those changes.

Website Type

Dynamic Websites Types

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 Interaction2. Multi-User Interaction

Normal is Boring

Single 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

Multi-User Interaction

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

What is Website design

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.

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Planning

Understand website design conceptsI. Users:

Types experts, regular Ages

II. Purpose Commercial, government

III. Features Resizable font, ecommerce cart

Start a website :: Planning

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

Start a website :: Planning

Start a website :: Planning

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Domain Names

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)

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Hosting

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.

Start a website :: Hosting

Imagination Data Center

Start a website :: Hosting

Real Data Center

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Web Technologies

This information includes Markup languages Programming interfaces languages Standards for document

identification and display.

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Testing

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

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

Start a website :: Getting Noticed

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

Start a website

Website

Planning

Domain

Name

Hosting

Web Technologies

Testing

Getting Your Site

Noticed

What programming languages do I need to know?

Client Side HTML CSS JavaScript

Server Side PHP or ASP

CMS

What programming languages do I need to know?

What is HTML

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.

First HTML Page

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

The Basic Structure of a Web Page

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>

The Basic Structure of a Web Page

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.

First HTML Page Example

<html>  <head>   <title>My first HTML page</title>

 </head> <body>

     <p>   Welcome to my first web page!   </p>

  </body></html>

Questions

Any question?

END

Thank you

END

Contact info

You can reach me via:M: 0955335301E : khaitou@ymail.comF : facebook.com/Anas.KhaitouT : twitter.com/AnasKhaitou