Downloaded 77 times
Uploaded byStephen Pollard
Introduction to web design
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.
More Related Content
Similar to Introduction to web design
Introduction to web design
- 1. Introduction to WebDesign
- 2. Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 3. Clients & ServersClients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL Chrome Servers Apache Microsoft IIS Netscape zeus AOLserver AV JavaWebServer Oracle
- 4. Web Components Clientsand 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 Clientsand 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 Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 9. Domain’s URL’s andIPs 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 Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
- 11. Domain Registrar Acompany 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 WebSite 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 ofgood 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 WebSite 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 Cleartext, case insensitive Ignores white space Comprised of tags <tag /> Open tags and closed tags
- 17. HTML - FundamentalsOpen (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 - Fundamentalsheader <body> Hello world </body>
- 21. HTML - Fundamentalsheader <body> Alexandra Park School London N11 2AZ </body> Alexandrapark School London N11 2AZ
- 22. HTML - Fundamentalsheader <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. 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> </body>
- 25. 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.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.
- 28. HTML - FundamentalsA NCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes NAME = “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 apples bananas grapes strawberries Ordered list apples bananas grapes 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 Row TH = Table Header TD = Table Data Cell
- 36. HTML – FundamentalsTables
- 37. HTML – FundamentalsTables - Attributes BORDER= value ALIGN= left | right|center CELLSPACING= value CELLPADDING= value WIDTH= value | percent
- 38. HTML – FundamentalsTables <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 – FundamentalsTables Class Grades Student Grade Tom B- Sue A+
- 40. HTML – FundamentalsTables 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 – FundamentalsStudent Grades Student Grade Tom A Sue
- 43. Screen Compatibility 1280x 1024 1024 x 768 800 x 600 640 x 480
- 44. HTML – FundamentalsTables 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 text The larger the image, the slower the page Optimize images Use 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; }
- 48. Content Management SystemsJoomla Wordpress Drupal PHPNuke PHP-Fusion Copyright 2005 - The Small Business Depot
- 49. Resources http://www.w3schools.com/ HTMLTutorials 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