Introduction to web design

1,837 views

Published on

Brief introduction to web design

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,837
On SlideShare
0
From Embeds
0
Number of Embeds
728
Actions
Shares
0
Downloads
64
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to web design

  1. 1. Introduction to Web Design
  2. 2. Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting Services </li></ul><ul><li>Domains Names, URL’s and Ips </li></ul><ul><li>Registrars </li></ul>
  3. 3. Clients & Servers <ul><li>Clients (Browser) </li></ul><ul><li>Internet Explorer </li></ul><ul><li>Firefox </li></ul><ul><li>Mozilla </li></ul><ul><li>Netscape </li></ul><ul><li>Opera </li></ul><ul><li>Amaya </li></ul><ul><li>AOL </li></ul><ul><li>Chrome </li></ul><ul><li>Servers </li></ul><ul><li>Apache </li></ul><ul><li>Microsoft IIS </li></ul><ul><li>Netscape </li></ul><ul><li>zeus </li></ul><ul><li>AOLserver </li></ul><ul><li>AV </li></ul><ul><li>JavaWebServer </li></ul><ul><li>Oracle </li></ul>
  4. 4. Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting Services </li></ul><ul><li>Domains Names, URL’s and Ips </li></ul><ul><li>Registrars </li></ul>
  5. 5. Internet Service Providers Connect Clients to the Internet <ul><li>BT </li></ul><ul><li>AOL </li></ul><ul><li>Virgin </li></ul><ul><li>PlusNet </li></ul><ul><li>Dial-Up </li></ul><ul><li>DSL/Cable </li></ul>
  6. 6. Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Website Hosting Services </li></ul><ul><li>Domains Names, URL’s and Ips </li></ul><ul><li>Registrars </li></ul>
  7. 7. Web Hosting Services Connects Web Sites to the Internet <ul><li>Computer (server) farm </li></ul><ul><li>Web server software (Apache, IIS etc.) </li></ul><ul><li>Firewall hardware and software </li></ul><ul><li>IT services </li></ul><ul><ul><li>(Backup, troubleshooting, hardware repair) </li></ul></ul><ul><li>Disk space </li></ul><ul><li>Bandwidth / connection to internet </li></ul><ul><li>Routers and switchers </li></ul><ul><li>Email server / storage </li></ul>
  8. 8. Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting Services </li></ul><ul><li>Domains Names, URL’s and Ips </li></ul><ul><li>Registrars </li></ul>
  9. 9. Domain’s URL’s and IPs <ul><li>Domain name: The specific address of a computer on the Internet </li></ul><ul><ul><li>microsoft.com </li></ul></ul><ul><li>Uniform Resource Locator (URL): </li></ul><ul><ul><li>http://www.microsoft.com/faqs.html </li></ul></ul><ul><li>Internet protocol (IP) address </li></ul><ul><ul><li>192.168.1.1 </li></ul></ul>
  10. 10. Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting Services </li></ul><ul><li>Domains Names, URL’s and Ips </li></ul><ul><li>Registrars </li></ul>
  11. 11. Domain Registrar <ul><li>A company that provides domain name registration services for a fee. </li></ul><ul><li>Maintain database which maps domain names to IP addresses </li></ul><ul><li>Propagate new domain name/IP address information across the internet </li></ul>
  12. 12. Creating a Web Site <ul><li>Choose a domain name </li></ul><ul><li>Register with a Registrar </li></ul><ul><li>Choose a hosting service </li></ul><ul><li>Tell Registrar the IP address </li></ul><ul><li>Create web content </li></ul><ul><li>Store (publish) onto hosting server (FTP) </li></ul><ul><li>Submit new site to search engines </li></ul>
  13. 13. 12 Principles of good web design <ul><li>Visitor-centric, clear purpose </li></ul><ul><li>Progressive disclosure (not overwhelming) </li></ul><ul><li>Displays quickly </li></ul><ul><li>Browser compatible </li></ul><ul><li>Intuitive navigation </li></ul><ul><li>Spelling, grammar, writing </li></ul><ul><li>Secure (eCommerce) </li></ul><ul><li>Attractive design, easy to read </li></ul><ul><li>Cultural bias? (Regional? Domestic? International?) </li></ul><ul><li>No technical problems (broken links, buggy scripts) </li></ul><ul><li>Maintainable (separate content from style) </li></ul><ul><li>Search Engine Accessible </li></ul>
  14. 14. Creating your Web Site Technologies & Tools <ul><li>Markup Languages </li></ul><ul><ul><li>HTML, DHTML, XML, XSLT, etc.... </li></ul></ul><ul><li>Cascading Style Sheets (CSS) </li></ul><ul><li>Scripting languages </li></ul><ul><ul><li>perl,javascript,php, etc.... </li></ul></ul><ul><li>Web creation and editing software </li></ul><ul><ul><li>Notepad, FrontPage, Coldfusion, Dreamweaver, Flash, Hotmetal, Site Builder, etc.. </li></ul></ul>
  15. 15. Markup Languages - HTML <ul><li>Derived from SGML </li></ul><ul><li>(Standard Generalized Markup Language ) </li></ul><ul><li>H yper T ext M arkup L anguage </li></ul>
  16. 16. HTML Fundamentals <ul><li>Clear text, case insensitive </li></ul><ul><li>Ignores white space </li></ul><ul><li>Comprised of tags <tag /> </li></ul><ul><li>Open tags and closed tags </li></ul>
  17. 17. HTML - Fundamentals <ul><li>Open (self-closing) tags </li></ul><ul><ul><li><name attributes/> </li></ul></ul><ul><ul><li><hr/>, <br/> </li></ul></ul><ul><ul><li><img src=“url” width=‘100px’ height=’60px’/> </li></ul></ul><ul><li>Closed tags </li></ul><ul><ul><li><name attributes> stuff </name> </li></ul></ul><ul><ul><li><b>text to be bolded</b> </li></ul></ul><ul><ul><li><h1>level 1 heading text</h1> </li></ul></ul><ul><li>Comments </li></ul><ul><ul><li>< ! - - comment text -- > </li></ul></ul>
  18. 18. HTML – Fundamentals Document Structure Header Body < / HTML> < HTML >
  19. 19. HTML – Fundamentals Basic Structure <ul><li><html> </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><ul><li><title> The title of your html page </title> </li></ul></ul></ul><ul><ul><ul><li><meta_tags/> </li></ul></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><ul><li><! - - your web page content and markup - -> </li></ul></ul></ul><ul><ul><li></body> </li></ul></ul><ul><li></html> </li></ul>
  20. 20. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li>Hello world </li></ul></ul><ul><li></body> </li></ul>
  21. 21. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li>Alexandra Park School </li></ul></ul><ul><ul><li>London </li></ul></ul><ul><ul><li>N11 2AZ </li></ul></ul><ul><li></body> </li></ul>Alexandrapark School London N11 2AZ
  22. 22. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li><b> Alexandra Park School </b><br> </li></ul></ul><ul><ul><li>London <br> </li></ul></ul><ul><ul><li>N11 2AZ <br> </li></ul></ul><ul><li></body> </li></ul>
  23. 23. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><font face=“Arial,Times,Courier” color=“green” size=“3”> </li></ul><ul><ul><li><b>Alexandra Park School</b><br> </li></ul></ul><ul><ul><li>London<br> </li></ul></ul><ul><ul><li>N11 2AZ<br> </font> </li></ul></ul><ul><li></body> </li></ul>
  24. 24. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font face=“Arial,Lucida Sans” color=“green” size=“3”> </li></ul><ul><ul><li><b>Alexandra Park School</b><br> </li></ul></ul><ul><ul><li>London<br> </li></ul></ul><ul><ul><li>N11 2AZ<br></font> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><li></body> </li></ul>
  25. 25. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font face=“Arial,Lucida Sans” color=“green” size=“3”> </li></ul><ul><ul><li><b>Alexandra Park School</b><br> </li></ul></ul><ul><ul><li>London<br> </li></ul></ul><ul><ul><li>N11 2AZ<br></font> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><img src=‘http://www.myserver.com/images/aps.jpg’/> </li></ul></ul><ul><li></body> </li></ul>
  26. 26. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font face=‘Arial,Lucida Sans’ color=‘green’ size=3> </li></ul><ul><ul><li><b>Alexandra Park School</b><br> </li></ul></ul><ul><ul><li>London<br> </li></ul></ul><ul><ul><li>N11 2AZ<br></font> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><img src=‘http://www.domain.com/images/aps.jpg’> </li></ul></ul><ul><ul><li><a href=‘about.html’>Read about APS</a> </li></ul></ul><ul><li></body> </li></ul>
  27. 27. HTML - Fundamentals
  28. 28. HTML - Fundamentals <ul><li>A NCHORS (Hypertext Link) </li></ul><ul><li><A href=“url” attributes>Displayed text </A> </li></ul><ul><li>Attributes </li></ul><ul><li>NAME = “text” </li></ul><ul><li>TITLE = &quot;text&quot; </li></ul><ul><li>TARGET = “frame_name|window_name” </li></ul>
  29. 29. HTML – Fundamentals Hypertext 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. 30. HTML – Fundamentals Hyperlink Colours <ul><li><BODY LINK= colour , VLINK= colour , ALINK= colour > </li></ul><ul><li><BODY LINK= “blue” , VLINK= “purple” , ALINK= “red” > </li></ul><ul><li><BODY LINK= “#0000FF” , VLINK= “#FF00FF” , ALINK= “#FF0000” > </li></ul><ul><li>LINK – Colour of link before it’s been followed </li></ul><ul><li>ALINK – Colour of link while it’s being followed (Active LINK) </li></ul><ul><li>VLINK – Colour of link after it’s been followed (Visited LINK) </li></ul>
  31. 31. HTML – Fundamentals Colours <ul><li>colour = “red” (Browser compatibility issues) </li></ul><ul><li>colour = “#FF0000” </li></ul><ul><li>values vary from 00 to FF (hexadecimal) </li></ul><ul><li>0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f </li></ul>Red Green Blue # FF FF FF
  32. 32. HTML – Fundamentals Headings <ul><li>Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. </li></ul><ul><li><h1>Heading 1 level text</h1> </li></ul><ul><li><h2>Heading 2 level text</h2> </li></ul><ul><li><h3>Heading 3 level text</h3> </li></ul><ul><li><h4>Heading 4 level text</h4> </li></ul><ul><li><h5>Heading 5 level text</h5> </li></ul><ul><li><h6>Heading 6 level text</h6> </li></ul>
  33. 33. HTML – Fundamentals Lists <ul><li>Unordered list </li></ul><ul><li><ul> </li></ul><ul><li><li>apples</li> </li></ul><ul><li><li>bananas</li> </li></ul><ul><li><li>grapes</li> </li></ul><ul><li><li>strawberries</li> </li></ul><ul><li></ul> </li></ul><ul><li>Ordered list </li></ul><ul><li><ol type=‘i’ start=‘2’> </li></ul><ul><li><li>apples</li> </li></ul><ul><li><li>bananas</li> </li></ul><ul><li><li>grapes</li> </li></ul><ul><li><li>strawberries</li> </li></ul><ul><li></ol> </li></ul>
  34. 34. HTML – Fundamentals Lists <ul><li>Unordered list </li></ul><ul><li>apples </li></ul><ul><li>bananas </li></ul><ul><li>grapes </li></ul><ul><li>strawberries </li></ul><ul><li>Ordered list </li></ul><ul><li>apples </li></ul><ul><li>bananas </li></ul><ul><li>grapes </li></ul><ul><li>strawberries </li></ul>
  35. 35. HTML – Fundamentals Tables <ul><li><TABLE> </li></ul><ul><li><CAPTION ALIGN=&quot;bottom&quot;>Class Grades</CAPTION> </li></ul><ul><li><TR> </li></ul><ul><li><TH>Student</TH> </li></ul><ul><li><TH>Grade</TH> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Tom</TD> </li></ul><ul><li><TD>B+</TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Sue</TD> </li></ul><ul><li><TD>A-</TD> </li></ul><ul><li></TR> </li></ul><ul><li></TABLE> </li></ul>TR = Table Row TH = Table Header TD = Table Data Cell
  36. 36. HTML – Fundamentals Tables
  37. 37. HTML – Fundamentals Tables - Attributes <ul><li>BORDER= value </li></ul><ul><li>ALIGN= left | right|center </li></ul><ul><li>CELLSPACING= value </li></ul><ul><li>CELLPADDING= value </li></ul><ul><li>WIDTH= value | percent </li></ul>
  38. 38. HTML – Fundamentals Tables <ul><li><TABLE BORDER=1 WIDTH=“50%&quot; CELLPADDING=“6” CELLSPACING=“2” ALIGN=&quot;RIGHT&quot;> </li></ul><ul><li><CAPTION ALIGN=&quot;bottom&quot;>Class Grades</CAPTION> </li></ul><ul><li><TR> </li></ul><ul><li><TH>Student</TH> </li></ul><ul><li><TH>Grade</TH> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Tom</TD> </li></ul><ul><li><TD>B+</TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Sue</TD> </li></ul><ul><li><TD>A-</TD> </li></ul><ul><li></TR> </li></ul><ul><li></TABLE> </li></ul>
  39. 39. HTML – Fundamentals Tables Class Grades Student Grade Tom B- Sue A+
  40. 40. HTML – Fundamentals Tables <ul><li>rowspan and colspan </li></ul>
  41. 41. HTML – Fundamentals <ul><li><TABLE BORDER=1 WIDTH=&quot;50%&quot; CELLPADDING=5 ALIGN=&quot;center&quot;> </li></ul><ul><li><TR> </li></ul><ul><li><TD colspan=2 align='center'> </li></ul><ul><li><font color=&quot;red&quot;><b>Student Grades</b></font> </li></ul><ul><li></TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD><b>Student</b></TD> </li></ul><ul><li><TD><b>Grade</b></TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Tom</TD> </li></ul><ul><li><TD rowspan=2 >A</TD> </li></ul><ul><li></TR> </li></ul><ul><li><TR> </li></ul><ul><li><TD>Sue</TD> </li></ul><ul><li></TR> </li></ul><ul><li></TABLE> </li></ul>
  42. 42. HTML – Fundamentals Student Grades Student Grade Tom A Sue
  43. 43. Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
  44. 44. HTML – Fundamentals Tables <ul><li>Tables are frequently used to layout the basic web page design . </li></ul>640 1280
  45. 45. HTML – Fundamentals Images <ul><li><img src=“images/pic1.jpg” width=75px, height=50px /> </li></ul>
  46. 46. HTML – Fundamentals Using Images <ul><li>Images take longer to download than text </li></ul><ul><li>The larger the image, the slower the page </li></ul><ul><li>Optimize images </li></ul><ul><li>Use thumbnail images </li></ul>
  47. 47. HTML – Fundamentals Other uses of Images <ul><li>Page background (not recommended) </li></ul><ul><ul><li><body background-image = “url” > </li></ul></ul><ul><ul><li><body class=“background”> </li></ul></ul><ul><ul><ul><ul><li>body.background { background-image:$url; } </li></ul></ul></ul></ul><ul><li>Table background </li></ul><ul><ul><li><table background-image=“url”> </li></ul></ul><ul><ul><li><table class=“background”> </li></ul></ul><ul><ul><ul><ul><li>table.background { backlground-image:url; } </li></ul></ul></ul></ul>
  48. 48. Content Management Systems <ul><li>Joomla </li></ul><ul><li>Wordpress </li></ul><ul><li>Drupal </li></ul><ul><li>PHPNuke </li></ul><ul><li>PHP-Fusion </li></ul>Copyright 2005 - The Small Business Depot
  49. 49. Resources http://www.w3schools.com/ <ul><li>HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP </li></ul><ul><li>Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript </li></ul><ul><li>Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP </li></ul><ul><li>XML Tutorials Learn XML Learn XSL Learn XSLT Learn XSL-FO Learn XPath Learn XQuery Learn XLink Learn XPointer Learn DTD Learn Schema Learn XML DOM Learn XForms Learn SOAP Learn WSDL Learn RDF Learn RSS Learn WAP </li></ul><ul><li>. NET (dotnet) .NET Microsoft .NET ASP .NET Mobile </li></ul><ul><li>Multimedia Learn Media Learn SMIL Learn SVG Learn Flash </li></ul><ul><li>Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification </li></ul>

×