introduction to web design

Introduction to Web Design

2

Web Components

Clients and ServersInternet Service ProvidersWeb Site Hosting ServicesDomains Names, URL’s and IpsRegistrars

3

Clients & Servers

Clients (Browser)Internet ExplorerFirefoxMozillaNetscapeOperaAmayaAOLChrome

ServersApacheMicrosoft IISNetscapezeusAOLserverAVJavaWebServerOracle

4

Web Components


5

Internet Service Providers Connect Clients to the Internet

BTAOLVirginPlusNet

Dial-UpDSL/Cable

6

Web Components

Clients and ServersInternet Service ProvidersWebsite Hosting ServicesDomains Names, URL’s and IpsRegistrars

7

Web Hosting Services Connects Web Sites to the Internet

Computer (server) farmWeb server software (Apache, IIS etc.)Firewall hardware and softwareIT services

(Backup, troubleshooting, hardware repair)

Disk spaceBandwidth / connection to internetRouters and switchersEmail server / storage

8

Web Components


9

Domain’s URL’s and IPs

Domain name: The specific address of a computer on the Internet microsoft.com

Uniform Resource Locator (URL): http://www.microsoft.com/faqs.html

Internet protocol (IP) address192.168.1.1

10

Web Components


11

Domain Registrar

A company that provides domain name registration services for a fee.

Maintain database which maps domain names to IP addresses

Propagate new domain name/IP address information across the internet

12

Creating a Web Site

1. Choose a domain name

2. Register with a Registrar

3. Choose a hosting service

4. Tell Registrar the IP address

5. Create web content

6. Store (publish) onto hosting server (FTP)

7. Submit new site to search engines

13

12 Principles of good web design

1. Visitor-centric, clear purpose2. Progressive disclosure (not overwhelming)3. Displays quickly4. Browser compatible5. Intuitive navigation6. Spelling, grammar, writing7. Secure (eCommerce)8. Attractive design, easy to read9. Cultural bias? (Regional? Domestic? International?)10.No technical problems (broken links, buggy scripts)11.Maintainable (separate content from style)12.Search Engine Accessible

14

Creating your Web SiteTechnologies & Tools

Markup Languages HTML, DHTML, XML, XSLT, etc....

Cascading Style Sheets (CSS)Scripting languages

perl,javascript,php, etc....

Web creation and editing softwareNotepad, FrontPage, Coldfusion,

Dreamweaver, Flash, Hotmetal, Site Builder, etc..

15

Markup Languages - HTML

Derived from SGML

(Standard Generalized Markup Language )

HyperText Markup Language

16

HTML Fundamentals

Clear text, case insensitiveIgnores white spaceComprised of tags <tag />Open tags and closed tags

17

HTML - Fundamentals

Open (self-closing) tags<name attributes/><hr/>, <br/><img src=“url” width=‘100px’ height=’60px’/>

Closed tags<name attributes> stuff </name><b>text to be bolded</b><h1>level 1 heading text</h1>

Comments < ! - - comment text -- >

18

HTML – FundamentalsDocument Structure

Header

Body

< / HTML>

< HTML >

19

HTML – FundamentalsBasic Structure

<html><head>

<title> The title of your html page </title><meta_tags/>

</head><body>

<! - - your web page content and markup - ->

</body></html>

20

HTML - Fundamentals

header

<body>

Hello world

</body>

21

HTML - Fundamentals

header

<body>

Alexandra Park SchoolLondonN11 2AZ

</body>

Alexandrapark School London N11 2AZ

22

HTML - Fundamentals

header

<body>

<b>Alexandra Park School</b><br>London<br>N11 2AZ<br>

</body>

23

HTML - Fundamentalsheader

<body>

<font face=“Arial,Times,Courier” color=“green” size=“3”><b>Alexandra Park School</b><br>London<br>N11 2AZ<br></font>

</body>

24


<body><p align=‘center’><font face=“Arial,Lucida Sans” color=“green” size=“3”>

<b>Alexandra Park School</b><br>London<br>N11 2AZ<br></font></p>

</body>

25


<body><p align=‘center’><font face=“Arial,Lucida Sans” color=“green” size=“3”><b>Alexandra Park School</b><br>London<br>N11 2AZ<br></font></p><img src=‘http://www.myserver.com/images/aps.jpg’/>

</body>

26

HTML - Fundamentalsheader<body>

<p align=‘center’>

<font face=‘Arial,Lucida Sans’ color=‘green’ size=3><b>Alexandra Park School</b><br>London<br>N11 2AZ<br></font></p><img src=‘http://www.domain.com/images/aps.jpg’>

<a href=‘about.html’>Read about APS</a></body>

27

HTML - Fundamentals

28

HTML - Fundamentals

ANCHORS (Hypertext Link)

<A href=“url” attributes>Displayed text </A>

AttributesNAME = “text” TITLE = "text" TARGET = “frame_name|window_name”

29

HTML – FundamentalsHypertext links

Click this link

opens mywebpage.html in the window / frame named “window2”

<a href=“mywebpage.html” target=“window2” >Click this link </a>

window2

30

HTML – FundamentalsHyperlink Colours

<BODY LINK=colour, VLINK=colour, ALINK=colour >

<BODY LINK=“blue”, VLINK=“purple”, ALINK=“red” >

<BODY LINK=“#0000FF”, VLINK=“#FF00FF”, ALINK=“#FF0000” >

LINK – Colour of link before it’s been followed

ALINK – Colour of link while it’s being followed (Active LINK)

VLINK – Colour of link after it’s been followed (Visited LINK)

31

HTML – FundamentalsColours

colour = “red” (Browser compatibility issues)

colour = “#FF0000”

values vary from 00 to FF (hexadecimal)

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Red

Green

Blue

#FF FF FF

32

HTML – FundamentalsHeadings

Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text.

<h1>Heading 1 level text</h1><h2>Heading 2 level text</h2><h3>Heading 3 level text</h3><h4>Heading 4 level text</h4><h5>Heading 5 level text</h5><h6>Heading 6 level text</h6>

33

HTML – FundamentalsLists

Unordered list

<ul>

<li>apples</li>

<li>bananas</li>

<li>grapes</li>

<li>strawberries</li>

</ul>

Ordered list

<ol type=‘i’ start=‘2’>

<li>apples</li>

<li>bananas</li>

<li>grapes</li>

<li>strawberries</li>

</ol>

34

HTML – FundamentalsLists

Unordered list

applesbananasgrapesstrawberries

Ordered list

II. apples

III. bananas

IV. grapes

V. strawberries

35

HTML – FundamentalsTables

<TABLE><CAPTION ALIGN="bottom">Class Grades</CAPTION><TR>

<TH>Student</TH><TH>Grade</TH>

</TR><TR>

<TD>Tom</TD><TD>B+</TD>

</TR><TR>

<TD>Sue</TD><TD>A-</TD>

</TR>

</TABLE>

TR = Table RowTH = Table HeaderTD = Table Data Cell

36


37

HTML – FundamentalsTables - Attributes

BORDER=value

ALIGN=left|right|center

CELLSPACING=value

CELLPADDING=value

WIDTH=value|percent

38


<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2” ALIGN="RIGHT"><CAPTION ALIGN="bottom">Class Grades</CAPTION><TR>

<TH>Student</TH><TH>Grade</TH>

</TR><TR>

<TD>Tom</TD><TD>B+</TD>

</TR><TR>

<TD>Sue</TD><TD>A-</TD>

</TR></TABLE>

39


Student Grade

Tom B-

Sue A+

Class Grades

40


rowspan and colspan

41

HTML – Fundamentals<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">

<TR><TD colspan=2 align='center'>

<font color="red"><b>Student Grades</b></font></TD>

</TR><TR>

<TD><b>Student</b></TD><TD><b>Grade</b></TD>

</TR><TR>

<TD>Tom</TD><TD rowspan=2>A</TD>

</TR><TR>

<TD>Sue</TD></TR>

</TABLE>

42

HTML – Fundamentals

Student Grades

Student Grade

TomA

Sue

43

Screen Compatibility

1280 x 1024

1024 x 768

800 x 600

640 x 480

44


Tables are frequently used to layout the basic web page design.

640

1280

45

HTML – FundamentalsImages

<img src=“images/pic1.jpg” width=75px, height=50px />

46

HTML – FundamentalsUsing Images

Images take longer to download than textThe larger the image, the slower the pageOptimize imagesUse thumbnail images

47

HTML – FundamentalsOther uses of Images

Page background (not recommended)<body background-image = “url” ><body class=“background”>

• body.background { background-image:$url; }

Table background<table background-image=“url”><table class=“background”>

• table.background { backlground-image:url; }

Content Management Systems

JoomlaWordpressDrupalPHPNukePHP-Fusion

Copyright 2005 - The Small Business Depot 48

49

Resourceshttp://www.w3schools.com/

HTML Tutorials Learn HTMLLearn XHTMLLearn CSSLearn TCP/IP

Browser Scripting Learn JavaScriptLearn DHTMLLearn VBScriptLearn HTML DOMLearn WMLScript

Server Scripting Learn SQLLearn ASPLearn ADOLearn PHP

XML Tutorials Learn XMLLearn XSLLearn XSLTLearn XSL-FOLearn XPathLearn XQueryLearn XLinkLearn XPointerLearn DTDLearn SchemaLearn XML DOMLearn XFormsLearn SOAPLearn WSDLLearn RDFLearn RSSLearn WAP

.NET (dotnet) .NET Microsoft.NET ASP.NET Mobile

Multimedia Learn MediaLearn SMILLearn SVGLearn Flash

Web Building Web BuildingWeb W3CWeb BrowsersWeb QualityWeb SemanticWeb CareersWeb HostingWeb Certification

introduction to web design

Education