introduction to website design
DESCRIPTION
TRANSCRIPT
![Page 1: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/1.jpg)
Introduction to Website DesignPrepared by Anas Khaitou26/12/2012
![Page 2: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/3.jpg)
About Me :D
![Page 4: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/9.jpg)
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.
![Page 10: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/10.jpg)
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.
![Page 11: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/12.jpg)
Web browsers History
![Page 13: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/15.jpg)
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.
![Page 16: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/16.jpg)
HTML Example
![Page 17: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/17.jpg)
Website programming languages
There are a lot of programming languages used for website design.
Languages are classified as: Client – Side Server – Side
![Page 18: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/19.jpg)
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.
![Page 20: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/21.jpg)
Static website
AdvantagesFlexibility is the main advantage of a
static siteEvery page can be different if desired
Disadvantages Update the content Scalability
![Page 22: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/22.jpg)
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.
![Page 23: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/23.jpg)
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.
![Page 24: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/24.jpg)
Website Type
![Page 25: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/26.jpg)
Normal is Boring
![Page 27: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/28.jpg)
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.
![Page 29: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/29.jpg)
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.
![Page 30: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/30.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 31: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/31.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 32: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/32.jpg)
Start a website :: Planning
Understand website design conceptsI. Users:
Types experts, regular Ages
II. Purpose Commercial, government
III. Features Resizable font, ecommerce cart
![Page 33: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/33.jpg)
Start a website :: Planning
IV. Design: easy to use User-friendliness Agent request
![Page 34: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/34.jpg)
Start a website :: Planning
![Page 35: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/35.jpg)
Start a website :: Planning
![Page 36: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/36.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 37: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/37.jpg)
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)
![Page 38: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/38.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 39: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/39.jpg)
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.
![Page 40: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/40.jpg)
Start a website :: Hosting
Imagination Data Center
![Page 41: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/41.jpg)
Start a website :: Hosting
Real Data Center
![Page 42: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/42.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 43: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/43.jpg)
Start a website :: Web Technologies
This information includes Markup languages Programming interfaces languages Standards for document
identification and display.
![Page 44: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/44.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 45: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/45.jpg)
Start a website :: Testing
You will need to test your web pages as you design them in the major browsers
![Page 46: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/46.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 47: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/47.jpg)
Start a website :: Getting Noticed
When your site is ready, you will need to submit it to search engines like Google and Bing.
![Page 48: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/48.jpg)
Start a website
Website
Planning
Domain
Name
Hosting
Web Technologies
Testing
Getting Your Site
Noticed
![Page 49: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/49.jpg)
What programming languages do I need to know?
Client Side HTML CSS JavaScript
Server Side PHP or ASP
CMS
![Page 50: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/50.jpg)
What programming languages do I need to know?
![Page 51: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/51.jpg)
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.
![Page 52: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/52.jpg)
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
![Page 53: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/53.jpg)
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>
![Page 54: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/54.jpg)
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.
![Page 55: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/55.jpg)
First HTML Page Example
<html> <head> <title>My first HTML page</title>
</head> <body>
<p> Welcome to my first web page! </p>
</body></html>
![Page 56: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/56.jpg)
Questions
Any question?
![Page 57: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/57.jpg)
END
Thank you
![Page 58: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/58.jpg)
END
![Page 59: Introduction to website design](https://reader033.vdocuments.us/reader033/viewer/2022061109/54513d52af795982318b59a7/html5/thumbnails/59.jpg)
Contact info
You can reach me via:M: 0955335301E : [email protected] : facebook.com/Anas.KhaitouT : twitter.com/AnasKhaitou