Your SlideShare is downloading. ×
0
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Introduction to web design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to web design

1,352

Published on

Brief introduction to web design

Brief introduction to web design

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

  • Be the first to like this

No Downloads
Views
Total Views
1,352
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to Web Design
  • 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. Clients &amp; 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Creating your Web Site Technologies &amp; 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. 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. HTML Fundamentals <ul><li>Clear text, case insensitive </li></ul><ul><li>Ignores white space </li></ul><ul><li>Comprised of tags &lt;tag /&gt; </li></ul><ul><li>Open tags and closed tags </li></ul>
  • 17. HTML - Fundamentals <ul><li>Open (self-closing) tags </li></ul><ul><ul><li>&lt;name attributes/&gt; </li></ul></ul><ul><ul><li>&lt;hr/&gt;, &lt;br/&gt; </li></ul></ul><ul><ul><li>&lt;img src=“url” width=‘100px’ height=’60px’/&gt; </li></ul></ul><ul><li>Closed tags </li></ul><ul><ul><li>&lt;name attributes&gt; stuff &lt;/name&gt; </li></ul></ul><ul><ul><li>&lt;b&gt;text to be bolded&lt;/b&gt; </li></ul></ul><ul><ul><li>&lt;h1&gt;level 1 heading text&lt;/h1&gt; </li></ul></ul><ul><li>Comments </li></ul><ul><ul><li>&lt; ! - - comment text -- &gt; </li></ul></ul>
  • 18. HTML – Fundamentals Document Structure Header Body &lt; / HTML&gt; &lt; HTML &gt;
  • 19. HTML – Fundamentals Basic Structure <ul><li>&lt;html&gt; </li></ul><ul><ul><li>&lt;head&gt; </li></ul></ul><ul><ul><ul><li>&lt;title&gt; The title of your html page &lt;/title&gt; </li></ul></ul></ul><ul><ul><ul><li>&lt;meta_tags/&gt; </li></ul></ul></ul><ul><ul><li>&lt;/head&gt; </li></ul></ul><ul><ul><li>&lt;body&gt; </li></ul></ul><ul><ul><ul><li>&lt;! - - your web page content and markup - -&gt; </li></ul></ul></ul><ul><ul><li>&lt;/body&gt; </li></ul></ul><ul><li>&lt;/html&gt; </li></ul>
  • 20. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><ul><li>Hello world </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 21. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </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>&lt;/body&gt; </li></ul>Alexandrapark School London N11 2AZ
  • 22. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><ul><li>&lt;b&gt; Alexandra Park School &lt;/b&gt;&lt;br&gt; </li></ul></ul><ul><ul><li>London &lt;br&gt; </li></ul></ul><ul><ul><li>N11 2AZ &lt;br&gt; </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 23. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;font face=“Arial,Times,Courier” color=“green” size=“3”&gt; </li></ul><ul><ul><li>&lt;b&gt;Alexandra Park School&lt;/b&gt;&lt;br&gt; </li></ul></ul><ul><ul><li>London&lt;br&gt; </li></ul></ul><ul><ul><li>N11 2AZ&lt;br&gt; &lt;/font&gt; </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 24. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;p align=‘center’&gt; </li></ul><ul><li>&lt;font face=“Arial,Lucida Sans” color=“green” size=“3”&gt; </li></ul><ul><ul><li>&lt;b&gt;Alexandra Park School&lt;/b&gt;&lt;br&gt; </li></ul></ul><ul><ul><li>London&lt;br&gt; </li></ul></ul><ul><ul><li>N11 2AZ&lt;br&gt;&lt;/font&gt; </li></ul></ul><ul><ul><li>&lt;/p&gt; </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 25. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;p align=‘center’&gt; </li></ul><ul><li>&lt;font face=“Arial,Lucida Sans” color=“green” size=“3”&gt; </li></ul><ul><ul><li>&lt;b&gt;Alexandra Park School&lt;/b&gt;&lt;br&gt; </li></ul></ul><ul><ul><li>London&lt;br&gt; </li></ul></ul><ul><ul><li>N11 2AZ&lt;br&gt;&lt;/font&gt; </li></ul></ul><ul><ul><li>&lt;/p&gt; </li></ul></ul><ul><ul><li>&lt;img src=‘http://www.myserver.com/images/aps.jpg’/&gt; </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 26. HTML - Fundamentals <ul><li>header </li></ul><ul><li>&lt;body&gt; </li></ul><ul><li>&lt;p align=‘center’&gt; </li></ul><ul><li>&lt;font face=‘Arial,Lucida Sans’ color=‘green’ size=3&gt; </li></ul><ul><ul><li>&lt;b&gt;Alexandra Park School&lt;/b&gt;&lt;br&gt; </li></ul></ul><ul><ul><li>London&lt;br&gt; </li></ul></ul><ul><ul><li>N11 2AZ&lt;br&gt;&lt;/font&gt; </li></ul></ul><ul><ul><li>&lt;/p&gt; </li></ul></ul><ul><ul><li>&lt;img src=‘http://www.domain.com/images/aps.jpg’&gt; </li></ul></ul><ul><ul><li>&lt;a href=‘about.html’&gt;Read about APS&lt;/a&gt; </li></ul></ul><ul><li>&lt;/body&gt; </li></ul>
  • 27. HTML - Fundamentals
  • 28. HTML - Fundamentals <ul><li>A NCHORS (Hypertext Link) </li></ul><ul><li>&lt;A href=“url” attributes&gt;Displayed text &lt;/A&gt; </li></ul><ul><li>Attributes </li></ul><ul><li>NAME = “text” </li></ul><ul><li>TITLE = &amp;quot;text&amp;quot; </li></ul><ul><li>TARGET = “frame_name|window_name” </li></ul>
  • 29. HTML – Fundamentals Hypertext links Click this link opens mywebpage.html in the window / frame named “ window2 ” &lt;a href=“mywebpage.html” target=“window2” &gt;Click this link &lt;/a&gt; window2
  • 30. HTML – Fundamentals Hyperlink Colours <ul><li>&lt;BODY LINK= colour , VLINK= colour , ALINK= colour &gt; </li></ul><ul><li>&lt;BODY LINK= “blue” , VLINK= “purple” , ALINK= “red” &gt; </li></ul><ul><li>&lt;BODY LINK= “#0000FF” , VLINK= “#FF00FF” , ALINK= “#FF0000” &gt; </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. 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. 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>&lt;h1&gt;Heading 1 level text&lt;/h1&gt; </li></ul><ul><li>&lt;h2&gt;Heading 2 level text&lt;/h2&gt; </li></ul><ul><li>&lt;h3&gt;Heading 3 level text&lt;/h3&gt; </li></ul><ul><li>&lt;h4&gt;Heading 4 level text&lt;/h4&gt; </li></ul><ul><li>&lt;h5&gt;Heading 5 level text&lt;/h5&gt; </li></ul><ul><li>&lt;h6&gt;Heading 6 level text&lt;/h6&gt; </li></ul>
  • 33. HTML – Fundamentals Lists <ul><li>Unordered list </li></ul><ul><li>&lt;ul&gt; </li></ul><ul><li>&lt;li&gt;apples&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;bananas&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;grapes&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;strawberries&lt;/li&gt; </li></ul><ul><li>&lt;/ul&gt; </li></ul><ul><li>Ordered list </li></ul><ul><li>&lt;ol type=‘i’ start=‘2’&gt; </li></ul><ul><li>&lt;li&gt;apples&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;bananas&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;grapes&lt;/li&gt; </li></ul><ul><li>&lt;li&gt;strawberries&lt;/li&gt; </li></ul><ul><li>&lt;/ol&gt; </li></ul>
  • 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. HTML – Fundamentals Tables <ul><li>&lt;TABLE&gt; </li></ul><ul><li>&lt;CAPTION ALIGN=&amp;quot;bottom&amp;quot;&gt;Class Grades&lt;/CAPTION&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TH&gt;Student&lt;/TH&gt; </li></ul><ul><li>&lt;TH&gt;Grade&lt;/TH&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Tom&lt;/TD&gt; </li></ul><ul><li>&lt;TD&gt;B+&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Sue&lt;/TD&gt; </li></ul><ul><li>&lt;TD&gt;A-&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;/TABLE&gt; </li></ul>TR = Table Row TH = Table Header TD = Table Data Cell
  • 36. HTML – Fundamentals Tables
  • 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. HTML – Fundamentals Tables <ul><li>&lt;TABLE BORDER=1 WIDTH=“50%&amp;quot; CELLPADDING=“6” CELLSPACING=“2” ALIGN=&amp;quot;RIGHT&amp;quot;&gt; </li></ul><ul><li>&lt;CAPTION ALIGN=&amp;quot;bottom&amp;quot;&gt;Class Grades&lt;/CAPTION&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TH&gt;Student&lt;/TH&gt; </li></ul><ul><li>&lt;TH&gt;Grade&lt;/TH&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Tom&lt;/TD&gt; </li></ul><ul><li>&lt;TD&gt;B+&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Sue&lt;/TD&gt; </li></ul><ul><li>&lt;TD&gt;A-&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;/TABLE&gt; </li></ul>
  • 39. HTML – Fundamentals Tables Class Grades Student Grade Tom B- Sue A+
  • 40. HTML – Fundamentals Tables <ul><li>rowspan and colspan </li></ul>
  • 41. HTML – Fundamentals <ul><li>&lt;TABLE BORDER=1 WIDTH=&amp;quot;50%&amp;quot; CELLPADDING=5 ALIGN=&amp;quot;center&amp;quot;&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD colspan=2 align=&apos;center&apos;&gt; </li></ul><ul><li>&lt;font color=&amp;quot;red&amp;quot;&gt;&lt;b&gt;Student Grades&lt;/b&gt;&lt;/font&gt; </li></ul><ul><li>&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;&lt;b&gt;Student&lt;/b&gt;&lt;/TD&gt; </li></ul><ul><li>&lt;TD&gt;&lt;b&gt;Grade&lt;/b&gt;&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Tom&lt;/TD&gt; </li></ul><ul><li>&lt;TD rowspan=2 &gt;A&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;TR&gt; </li></ul><ul><li>&lt;TD&gt;Sue&lt;/TD&gt; </li></ul><ul><li>&lt;/TR&gt; </li></ul><ul><li>&lt;/TABLE&gt; </li></ul>
  • 42. HTML – Fundamentals Student Grades Student Grade Tom A Sue
  • 43. Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
  • 44. HTML – Fundamentals Tables <ul><li>Tables are frequently used to layout the basic web page design . </li></ul>640 1280
  • 45. HTML – Fundamentals Images <ul><li>&lt;img src=“images/pic1.jpg” width=75px, height=50px /&gt; </li></ul>
  • 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. HTML – Fundamentals Other uses of Images <ul><li>Page background (not recommended) </li></ul><ul><ul><li>&lt;body background-image = “url” &gt; </li></ul></ul><ul><ul><li>&lt;body class=“background”&gt; </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>&lt;table background-image=“url”&gt; </li></ul></ul><ul><ul><li>&lt;table class=“background”&gt; </li></ul></ul><ul><ul><ul><ul><li>table.background { backlground-image:url; } </li></ul></ul></ul></ul>
  • 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. 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>

×