Introduction to web design
Download as PPT, PDF3 likes1,100 views
The document provides an introduction to various topics related to web design including web components, clients and servers, internet service providers, web hosting services, domains names URLs and IPs, and registrars. It describes these elements and how they work together to build the foundation of the web. It also covers HTML, images, tables, links and other basic web technologies.
Introduction to web design
- 1. Introduction to Web Design
- 2. Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 3. Clients & Servers Clients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL Chrome Servers Apache Microsoft IIS Netscape zeus AOLserver AV JavaWebServer Oracle
- 4. Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 5. Internet Service Providers Connect Clients to the Internet BT AOL Virgin PlusNet Dial-Up DSL/Cable
- 6. Web Components Clients and Servers Internet Service Providers Website Hosting Services Domains Names, URL’s and Ips Registrars
- 7. Web Hosting Services Connects Web Sites to the Internet Computer (server) farm Web server software (Apache, IIS etc.) Firewall hardware and software IT services (Backup, troubleshooting, hardware repair) Disk space Bandwidth / connection to internet Routers and switchers Email server / storage
- 8. Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 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) address 192.168.1.1
- 10. Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 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 Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines
- 13. 12 Principles of good web design Visitor-centric, clear purpose Progressive disclosure (not overwhelming) Displays quickly Browser compatible Intuitive navigation Spelling, grammar, writing Secure (eCommerce) Attractive design, easy to read Cultural bias? (Regional? Domestic? International?) No technical problems (broken links, buggy scripts) Maintainable (separate content from style) Search Engine Accessible
- 14. Creating your Web Site Technologies & Tools Markup Languages HTML, DHTML, XML, XSLT, etc.... Cascading Style Sheets (CSS) Scripting languages perl,javascript,php, etc.... Web creation and editing software Notepad, FrontPage, Coldfusion, Dreamweaver, Flash, Hotmetal, Site Builder, etc..
- 15. Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) H yper T ext M arkup L anguage
- 16. HTML Fundamentals Clear text, case insensitive Ignores white space Comprised 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 – Fundamentals Document Structure Header Body < / HTML> < HTML >
- 19. HTML – Fundamentals Basic 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 School London N11 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 - Fundamentals header <body> <font face=“Arial,Times,Courier” color=“green” size=“3”> <b>Alexandra Park School</b><br> London<br> N11 2AZ<br> </font> </body>
- 24. HTML - Fundamentals header <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. HTML - Fundamentals header <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 - Fundamentals header <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>
- 28. HTML - Fundamentals A NCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes NAME = “text” TITLE = "text" TARGET = “frame_name|window_name”
- 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. HTML – Fundamentals Hyperlink 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 – Fundamentals Colours 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 – Fundamentals Headings 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 – Fundamentals Lists 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 – Fundamentals Lists Unordered list apples bananas grapes strawberries Ordered list apples bananas grapes strawberries
- 35. HTML – Fundamentals Tables <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 Row TH = Table Header TD = Table Data Cell
- 36. HTML – Fundamentals Tables
- 37. HTML – Fundamentals Tables - Attributes BORDER= value ALIGN= left | right|center CELLSPACING= value CELLPADDING= value WIDTH= value | percent
- 38. HTML – Fundamentals Tables <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. HTML – Fundamentals Tables Class Grades Student Grade Tom B- Sue A+
- 40. HTML – Fundamentals Tables 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 Tom A Sue
- 43. Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
- 44. HTML – Fundamentals Tables Tables are frequently used to layout the basic web page design . 640 1280
- 45. HTML – Fundamentals Images <img src=“images/pic1.jpg” width=75px, height=50px />
- 46. HTML – Fundamentals Using Images Images take longer to download than text The larger the image, the slower the page Optimize images Use thumbnail images
- 47. HTML – Fundamentals Other 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; }
- 48. Content Management Systems Joomla Wordpress Drupal PHPNuke PHP-Fusion Copyright 2005 - The Small Business Depot
- 49. Resources http://www.w3schools.com/ HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP 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 . NET (dotnet) .NET Microsoft .NET ASP .NET Mobile Multimedia Learn Media Learn SMIL Learn SVG Learn Flash Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification