Upload
anas-khaitou
View
294
Download
5
Embed Size (px)
DESCRIPTION
Citation preview
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 : [email protected] : facebook.com/Anas.KhaitouT : twitter.com/AnasKhaitou