Introduction to Web Design Part 1 w. Mike Tyler
Use of this material <ul><li>If you would like to be able to distribute this PowerPont presentation from your own website ...
Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting...
Clients & Servers <ul><li>Clients (Browser) </li></ul><ul><li>Internet Explorer </li></ul><ul><li>Firefox </li></ul><ul><l...
Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting...
Internet Service Providers   Connect Clients to the Internet <ul><li>Phone Company </li></ul><ul><li>AOL </li></ul><ul><li...
Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting...
Web Hosting Services   Connects Web Sites to the Internet <ul><li>Computer (server) farm </li></ul><ul><li>Web server soft...
Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting...
Domain’s URL’s and IPs <ul><li>Domain name: The specific address of a computer on the Internet  </li></ul><ul><ul><li>micr...
Web Components <ul><li>Clients and Servers </li></ul><ul><li>Internet Service Providers </li></ul><ul><li>Web Site Hosting...
Domain Registrar <ul><li>A company that provides domain name registration services for a fee.  </li></ul><ul><li>Maintain ...
Creating a Web Site <ul><li>Choose a domain name </li></ul><ul><li>Register with a Registrar </li></ul><ul><li>Choose a ho...
12 Principles of good web design <ul><li>Visitor-centric, clear purpose </li></ul><ul><li>Progressive disclosure </li></ul...
Creating your Web Site Technologies & Tools <ul><li>Markup Languages  </li></ul><ul><ul><li>HTML, DHTML, XML, XSLT, etc......
Markup Languages - HTML <ul><li>Derived from SGML  </li></ul><ul><li>(Standard Generalized Markup Language ) </li></ul><ul...
HTML Fundamentals <ul><li>Clear text, case insensitive </li></ul><ul><li>Ignores white space </li></ul><ul><li>Comprised o...
HTML - Fundamentals <ul><li>Open tags </li></ul><ul><ul><li><name attributes/> </li></ul></ul><ul><ul><li><hr/>, <br/> </l...
HTML – Fundamentals Document Structure Header Body < / HTML> < HTML >
HTML – Fundamentals Basic Structure <ul><li><html> </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><ul><li><title>  Th...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li>Hello world </li></ul></ul><ul><li></bod...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li>Mike Tyler </li></ul></ul><ul><ul><li>PO...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li><b> Mike Tyler </b><br> </li></ul></ul><...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><font face=“Arial,Times,Courier”  color=“red...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font f...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font f...
HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><p align=‘center’> </li></ul><ul><li><font f...
HTML - Fundamentals
HTML - Fundamentals <ul><li>A NCHORS (Hypertext Link) </li></ul><ul><li><A href=“url” attributes>Displayed text </A> </li>...
HTML – Fundamentals Hypertext links Click this link opens  mywebpage.html  in the window / frame named “ window2 ” <a href...
HTML – Fundamentals Hyperlink Colors <ul><li><BODY LINK= color , VLINK= color , ALINK= color  > </li></ul><ul><li><BODY LI...
HTML – Fundamentals Colors <ul><li>Cathode Ray Tubes (CRT) </li></ul>
HTML – Fundamentals Colors <ul><li>color = “red”  (Browser compatibility issues) </li></ul><ul><li>color = “#FF0000” </li>...
HTML – Fundamentals Headings <ul><li>Renders text as a heading, the rendering depending on the level of heading selected. ...
HTML – Fundamentals Lists <ul><li>Unordered list </li></ul><ul><li><ul> </li></ul><ul><li><li>apples</li> </li></ul><ul><l...
HTML – Fundamentals Lists <ul><li>Unordered list </li></ul><ul><li>apples </li></ul><ul><li>bananas </li></ul><ul><li>grap...
HTML – Fundamentals Tables <ul><li><TABLE> </li></ul><ul><li><CAPTION ALIGN=&quot;bottom&quot;>Class Grades</CAPTION> </li...
HTML – Fundamentals Tables
HTML – Fundamentals Tables <ul><li>BORDER= value </li></ul><ul><li>ALIGN= left | right|center </li></ul><ul><li>CELLSPACIN...
HTML – Fundamentals Tables <ul><li><TABLE BORDER=1 WIDTH=“50%&quot; CELLPADDING=“6” CELLSPACING=“2” ALIGN=&quot;RIGHT&quot...
HTML – Fundamentals Tables Class Grades A+ Sue B- Tom Grade Student
HTML – Fundamentals Tables <ul><li>rowspan and colspan </li></ul>
HTML – Fundamentals <ul><li><TABLE BORDER=1 WIDTH=&quot;50%&quot; CELLPADDING=5 ALIGN=&quot;center&quot;> </li></ul><ul><l...
HTML – Fundamentals Sue A Tom Grade Student Student Grades
Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
HTML – Fundamentals Tables <ul><li>Tables are frequently used to layout the basic web page design . </li></ul>640 1280
HTML – Fundamentals Frames <ul><li>Basic Frames </li></ul><ul><li>Floating Frames (inline frames) </li></ul><ul><li>Pictur...
HTML – Fundamentals Basic   Frames Footer Content Menu Banner
HTML – Fundamentals Basic   Frames <ul><li>Basic tags </li></ul><ul><li><frameset> ..</frameset> </li></ul><ul><li><frame ...
HTML – Fundamentals Basic   Frames Footer Content Menu Banner
HTML – Fundamentals Basic   Frames <ul><li><frameset rows=“80,*,80”> </li></ul><ul><li><frame src=“banner.html” /> </li></...
HTML – Fundamentals Basic   Frames <ul><li><frameset rows=“80,*,80”> </li></ul><ul><li><frame src=“banner.html” /> </li></...
HTML – Fundamentals Basic   Frames <ul><li>FRAMESET attributes </li></ul><ul><li>FRAMEBORDER=&quot; yes | no &quot;| 0 </l...
HTML – Fundamentals Basic   Frames <ul><li>Individual FRAME attributes </li></ul><ul><li>SCROLLING=&quot;yes|no|auto&quot;...
HTML – Fundamentals Floating   Frames <ul><li>Floating frames allow you to create a frame within the boundaries of a page ...
HTML – Fundamentals Floating   Frames <ul><li><IFRAME attributes ></IFRAME> </li></ul><ul><li>Attributes </li></ul><ul><li...
HTML – Fundamentals Floating   Frames <ul><li><IFRAME   </li></ul><ul><li>NAME=“frame_name” </li></ul><ul><li>ALIGN=&quot;...
HTML – Fundamentals Hypertext links <ul><li><a href=“page.html” target=“blank” >Click this link </a> </li></ul><ul><ul><li...
HTML – Fundamentals DIV and ILAYER <ul><li>Allows you create a position-able block of content. </li></ul>Content positione...
HTML – Fundamentals DIV <ul><li><div attributes> content </div> </li></ul><ul><li>attributes </li></ul><ul><li>ID=“name” <...
HTML – Fundamentals DIV <ul><li>< DIV ID=“fred” </li></ul><ul><li>STYLE = “POSITION:absolute|relative ; </li></ul><ul><li>...
HTML – Fundamentals DIV content contentc content content content content content
<ul><li><div style=&quot;position:absolute; left: 100px ; top: 100px ; width: 100px ; height: 100px ; background-color:#ff...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>Styles enable you to define a consistent 'look' for your document...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>H1 {text-align: center; color: blue}  </li></ul><ul><li>A  {color...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>H1  {text-align: center; color: blue}  </li></ul><ul><li>H1.widge...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <ul><li><head> </li></ul><ul><li><title> My Page Title </title> ...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Linked <ul><li>Styles can be defined in a separate file </li></ul><ul><li...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>/* Example style sheet file (note how this comment was created) *...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline <ul><li>Styles can be placed within individual elements </li></ul>...
HTML – Fundamentals CASCADING  STYLE SHEETS (CSS) <ul><li>Inline  > Embedded  > Linked </li></ul><ul><li>Defining the styl...
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>Using IDs </li></ul><ul><li>IDs enable you to define a unique sty...
HTML – Fundamentals Images <ul><li><img src=“images/pic1.jpg” width=75px, height=50px /> </li></ul><ul><li><img class=“pic...
HTML – Fundamentals Using Images <ul><li>Images take longer to download than text </li></ul><ul><li>The larger the image, ...
HTML – Fundamentals Other uses of Images <ul><li>Page background  (not recommended) </li></ul><ul><ul><li><body background...
Resources http://www.w3schools.com/ <ul><li>HTML Tutorials   Learn HTML Learn XHTML Learn CSS Learn TCP/IP </li></ul><ul><...
Courses at FVCC <ul><li>Introduction to Web Design </li></ul><ul><li>FrontPage Web Design </li></ul><ul><li>Intermediate W...
Upcoming SlideShare
Loading in …5
×

Introduction to Web Design

2,301 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,301
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
110
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to Web Design

  1. 1. Introduction to Web Design Part 1 w. Mike Tyler
  2. 2. Use of this material <ul><li>If you would like to be able to distribute this PowerPont presentation from your own website – simply credit the author with a link to The small Business Depot. Use the following: </li></ul><ul><li>Link URL: http://www.smallbizdepot.com </li></ul><ul><li>Link text: By Mike Tyler – The Small Business Depot </li></ul><ul><li>Copyright – 2005 – The Small Business Depot </li></ul>
  3. 3. 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>
  4. 4. 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>MSN </li></ul><ul><li>Servers </li></ul><ul><li>Apache </li></ul><ul><li>Microsoft </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>
  5. 5. 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>
  6. 6. Internet Service Providers Connect Clients to the Internet <ul><li>Phone Company </li></ul><ul><li>AOL </li></ul><ul><li>Earthlink </li></ul><ul><li>Verizone </li></ul><ul><li>NetZero </li></ul><ul><li>Basic internet connection </li></ul><ul><li>Dialup/DSL/Cable/Sat </li></ul><ul><li>Email </li></ul>
  7. 7. 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>
  8. 8. Web Hosting Services Connects Web Sites to the Internet <ul><li>Computer (server) farm </li></ul><ul><li>Web server software </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>
  9. 9. 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>
  10. 10. 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>
  11. 11. 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>
  12. 12. 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’s </li></ul><ul><li>Propagate new domain name/IP address information across the internet </li></ul>
  13. 13. 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>
  14. 14. 12 Principles of good web design <ul><li>Visitor-centric, clear purpose </li></ul><ul><li>Progressive disclosure </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>
  15. 15. 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, Flash, Hotmetal, Site Builder, etc.. </li></ul></ul>
  16. 16. 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>
  17. 17. 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>
  18. 18. HTML - Fundamentals <ul><li>Open 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>
  19. 19. HTML – Fundamentals Document Structure Header Body < / HTML> < HTML >
  20. 20. 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>
  21. 21. 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>
  22. 22. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li>Mike Tyler </li></ul></ul><ul><ul><li>PO Box 190387 </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919 </li></ul></ul><ul><li></body> </li></ul>
  23. 23. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><ul><li><b> Mike Tyler </b><br> </li></ul></ul><ul><ul><li>PO Box 190387 <br> </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919 <br> </li></ul></ul><ul><li></body> </li></ul>
  24. 24. HTML - Fundamentals <ul><li>header </li></ul><ul><li><body> </li></ul><ul><li><font face=“Arial,Times,Courier” color=“red” size=“3”> </li></ul><ul><ul><li><b>Mike Tyler</b><br> </li></ul></ul><ul><ul><li>PO Box 190387<br> </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919<br> </font> </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=“red” size=“3”> </li></ul><ul><ul><li><b>Mike Tyler</b><br> </li></ul></ul><ul><ul><li>PO Box 190387<br> </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919<br></font> </li></ul></ul><ul><ul><li></p> </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=“red” size=“3”> </li></ul><ul><ul><li><b>Mike Tyler</b><br> </li></ul></ul><ul><ul><li>PO Box 190387<br> </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919<br></font> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><img src=‘http://www.myserver.com/images/mike.jpg’/> </li></ul></ul><ul><li></body> </li></ul>
  27. 27. 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=‘red’ size=3> </li></ul><ul><ul><li><b>Mike Tyler</b><br> </li></ul></ul><ul><ul><li>PO Box 190387<br> </li></ul></ul><ul><ul><li>Hungry Horse, Mt 59919<br></font> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li><img src=‘http://www.domain.com/images/mike.jpg’> </li></ul></ul><ul><ul><li><a href=‘biopage.html’>Read my Bio</a> </li></ul></ul><ul><li></body> </li></ul>
  28. 28. HTML - Fundamentals
  29. 29. 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>
  30. 30. 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
  31. 31. HTML – Fundamentals Hyperlink Colors <ul><li><BODY LINK= color , VLINK= color , ALINK= color > </li></ul><ul><li><BODY LINK= “blue” , VLINK= “purple” , ALINK= “red” > </li></ul><ul><li><BODY LINK= “#0000FF” , VLINK= “#FF00FF” , ALINK= “#FF0000” > </li></ul>
  32. 32. HTML – Fundamentals Colors <ul><li>Cathode Ray Tubes (CRT) </li></ul>
  33. 33. HTML – Fundamentals Colors <ul><li>color = “red” (Browser compatibility issues) </li></ul><ul><li>color = “#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
  34. 34. 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>
  35. 35. 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>
  36. 36. 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>
  37. 37. 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>
  38. 38. HTML – Fundamentals Tables
  39. 39. HTML – Fundamentals Tables <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>
  40. 40. 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>
  41. 41. HTML – Fundamentals Tables Class Grades A+ Sue B- Tom Grade Student
  42. 42. HTML – Fundamentals Tables <ul><li>rowspan and colspan </li></ul>
  43. 43. 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>
  44. 44. HTML – Fundamentals Sue A Tom Grade Student Student Grades
  45. 45. Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
  46. 46. HTML – Fundamentals Tables <ul><li>Tables are frequently used to layout the basic web page design . </li></ul>640 1280
  47. 47. HTML – Fundamentals Frames <ul><li>Basic Frames </li></ul><ul><li>Floating Frames (inline frames) </li></ul><ul><li>Picture in picture </li></ul><ul><li>Frames let you divide a screen into windows with each window viewing a different web page. </li></ul>
  48. 48. HTML – Fundamentals Basic Frames Footer Content Menu Banner
  49. 49. HTML – Fundamentals Basic Frames <ul><li>Basic tags </li></ul><ul><li><frameset> ..</frameset> </li></ul><ul><li><frame /> </li></ul><ul><li><noframes> .. </noframes> </li></ul><ul><li>Basic attributes </li></ul><ul><li>cols = “values” </li></ul><ul><li>rows = “values” </li></ul><ul><li>name = “frame_name” </li></ul><ul><li>src = “frame_source(url)” </li></ul><ul><li>target = “frame_name” </li></ul>
  50. 50. HTML – Fundamentals Basic Frames Footer Content Menu Banner
  51. 51. HTML – Fundamentals Basic Frames <ul><li><frameset rows=“80,*,80”> </li></ul><ul><li><frame src=“banner.html” /> </li></ul><ul><li><frameset cols = “25%,75%” > </li></ul><ul><li><frame src=“menu.html” /> </li></ul><ul><li><frame src=“content.html” /> </li></ul><ul><li></frameset> </li></ul><ul><li><frame src=“footer.html” /> </li></ul><ul><li></frameset> </li></ul>
  52. 52. HTML – Fundamentals Basic Frames <ul><li><frameset rows=“80,*,80”> </li></ul><ul><li><frame src=“banner.html” /> </li></ul><ul><li><frameset cols = “25%,75%” > </li></ul><ul><li><frame src=“menu.html” /> </li></ul><ul><li><frame src=“content.html” /> </li></ul><ul><li></frameset> </li></ul><ul><li><frame src=“footer.html” /> </li></ul><ul><li><noframes> </li></ul><ul><li><body> </li></ul><ul><li>Welcome to my page. </li></ul><ul><li><A HREF=&quot;noframes.htm&quot;>Continue</A> </li></ul><ul><li>to the frame-free version. </li></ul><ul><li></body> </li></ul><ul><li></noframes> </li></ul><ul><li></frameset> </li></ul>
  53. 53. HTML – Fundamentals Basic Frames <ul><li>FRAMESET attributes </li></ul><ul><li>FRAMEBORDER=&quot; yes | no &quot;| 0 </li></ul><ul><li>BORDER= pixels </li></ul><ul><li>BORDERCOLOR=&quot; #hexcolor | colorname &quot; </li></ul><ul><li>< frameset rows=&quot;80,*,80&quot; border= 2 bordercolor=“ red &quot; > </li></ul><ul><li>.. </li></ul><ul><li>.. </li></ul><ul><li></frameset> </li></ul>
  54. 54. HTML – Fundamentals Basic Frames <ul><li>Individual FRAME attributes </li></ul><ul><li>SCROLLING=&quot;yes|no|auto&quot; </li></ul><ul><li>NORESIZE </li></ul><ul><li>MARGINWIDTH=pixels </li></ul><ul><li>MARGINHEIGHT=&quot;pixels&quot; </li></ul><ul><li>BORDERCOLOR=&quot;color&quot; </li></ul><ul><li>FRAMESPACING=&quot;pixels&quot; </li></ul><ul><li>FRAMEBORDER=&quot;yes|no&quot;|0 </li></ul><ul><li>NAME=“frame_name” </li></ul>
  55. 55. HTML – Fundamentals Floating Frames <ul><li>Floating frames allow you to create a frame within the boundaries of a page </li></ul>Basic Frames Floating Frames
  56. 56. HTML – Fundamentals Floating Frames <ul><li><IFRAME attributes ></IFRAME> </li></ul><ul><li>Attributes </li></ul><ul><li>SRC=URL </li></ul><ul><li>HEIGHT=pixels|percent, </li></ul><ul><li>WIDTH=pixels|percent </li></ul><ul><li>HSPACE=pixels </li></ul><ul><li>VSPACE=pixels </li></ul><ul><li>ALIGN=left|right </li></ul><ul><li>FRAMEBORDER=0 </li></ul>
  57. 57. HTML – Fundamentals Floating Frames <ul><li><IFRAME </li></ul><ul><li>NAME=“frame_name” </li></ul><ul><li>ALIGN=&quot;right&quot; </li></ul><ul><li>HSPACE=“40” </li></ul><ul><li>VSPACE=“40” </li></ul><ul><li>WIDTH=&quot;75%&quot; </li></ul><ul><li>HEIGHT=“150” </li></ul><ul><li>FRAMEBORDER= 0 </li></ul><ul><li>SRC= http://www.mysite/mypage.htm > </li></ul><ul><li></IFRAME> </li></ul>
  58. 58. HTML – Fundamentals Hypertext links <ul><li><a href=“page.html” target=“blank” >Click this link </a> </li></ul><ul><ul><li>Creates new window for the page </li></ul></ul><ul><li><a href=“page.html” target=“parent” >Click this link </a> </li></ul><ul><ul><li>Opens page in the parent frame/wind of this frame/window </li></ul></ul><ul><li><a href=“page.html” target=“top” >Click this link </a> </li></ul><ul><ul><li>Opens page in top most frame/window </li></ul></ul>
  59. 59. HTML – Fundamentals DIV and ILAYER <ul><li>Allows you create a position-able block of content. </li></ul>Content positioned within this block
  60. 60. HTML – Fundamentals DIV <ul><li><div attributes> content </div> </li></ul><ul><li>attributes </li></ul><ul><li>ID=“name” </li></ul><ul><li>STYLE = “style parameters re: CSS” </li></ul>
  61. 61. HTML – Fundamentals DIV <ul><li>< DIV ID=“fred” </li></ul><ul><li>STYLE = “POSITION:absolute|relative ; </li></ul><ul><li>VISIBILITY:visible:hidden ; </li></ul><ul><li>Z-INDEX:number ; </li></ul><ul><li>WIDTH:width in pixels ; </li></ul><ul><li>HEIGHT:height in pixels ; </li></ul><ul><li>TOP:pixels from top of page or block ; </li></ul><ul><li>LEFT:pixels from left edge of page or block ; </li></ul><ul><li>PADDING:margin in pixels ; </li></ul><ul><li>other style attributes ; “ > </li></ul><ul><li>content </li></ul><ul><li></DIV> </li></ul>
  62. 62. HTML – Fundamentals DIV content contentc content content content content content
  63. 63. <ul><li><div style=&quot;position:absolute; left: 100px ; top: 100px ; width: 100px ; height: 100px ; background-color:#ffffff; &quot;> </li></ul>HTML – Fundamentals DIV
  64. 64. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed. </li></ul><ul><li>Style sheet syntax is made up of three parts: </li></ul><ul><ul><li>selector {property: value} </li></ul></ul><ul><ul><li>selector = element.class </li></ul></ul>
  65. 65. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>H1 {text-align: center; color: blue} </li></ul><ul><li>A {color:green; font-familiy:arial,courier; font-weight:bold;} </li></ul><ul><li>td { align:center; background-color:grey; border-color:red;} </li></ul><ul><li>div {position:absolute; visibily:hidden; margin:10px } </li></ul><ul><li>font {color:navy; font-size:2pt; font-face:trebuchet; } </li></ul><ul><li>hr {color:#ff0000; width:80%; align:center; } </li></ul><ul><li>table {width:80%; align:center; border:2px; padding:5px; } </li></ul>
  66. 66. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>H1 {text-align: center; color: blue} </li></ul><ul><li>H1.widget {text-align: center; color: red; font-size:80%; } </li></ul><ul><li>A {color:green; font-familiy:arial,courier; font-weight:bold;} </li></ul><ul><li>A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;} </li></ul><ul><li>td { align:center; background-color:grey; border-color:red;} </li></ul><ul><li>td.figure { align:right; background-color:white; border-color:black;} </li></ul><ul><li>font {color:navy; font-size:2pt; font-face:trebuchet; } </li></ul><ul><li>font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; } </li></ul><ul><li>element.class {property:value; } </li></ul>
  67. 67. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <ul><li><head> </li></ul><ul><li><title> My Page Title </title> </li></ul><ul><li><style TYPE=&quot;text/css > </li></ul><ul><li><! - - </li></ul><ul><li>element.class { property:value; } </li></ul><ul><li>element.class { property:value; } </li></ul><ul><li>- - > </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>
  68. 68. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Linked <ul><li>Styles can be defined in a separate file </li></ul><ul><li><font style=“property:value; “> text </font> </li></ul><ul><li><font class=“fred”> text </font> </li></ul><ul><li>mystyles.css </li></ul><ul><li><head> </li></ul><ul><li><LINK REL=&quot;stylesheet&quot; HREF=&quot;mystyles.css“ TYPE=&quot;text/css&quot;> </li></ul><ul><li></head> </li></ul>
  69. 69. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>/* Example style sheet file (note how this comment was created) */ </li></ul><ul><li>BODY {background: #FFFFD8; margin-top: 20} </li></ul><ul><li>A:link {color: #400080; background: #FFFFD8} </li></ul><ul><li>H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; } </li></ul><ul><li>font.caption {font-family: Gill Sans, Arial, sans-serif; font-style: italic; } </li></ul><ul><li>/* End of example style sheet file */ </li></ul>
  70. 70. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline <ul><li>Styles can be placed within individual elements </li></ul><ul><li><font style=“color:red; font-face:ariel;” > </li></ul>
  71. 71. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>Inline > Embedded > Linked </li></ul><ul><li>Defining the style of your text </li></ul><ul><li>linked -> font-family:arial,georgia; </li></ul><ul><li>embedded -> color:navy; </li></ul><ul><li>inline -> font-size:2pt; </li></ul>
  72. 72. HTML – Fundamentals CASCADING STYLE SHEETS (CSS) <ul><li>Using IDs </li></ul><ul><li>IDs enable you to define a unique style which you can apply to a number of elements. </li></ul><ul><li><STYLE> </li></ul><ul><li><!– </li></ul><ul><li>#copyright {font-style:italic; font-size:smaller; } </li></ul><ul><li>--> </li></ul><ul><li></STYLE> </li></ul><ul><li><p ID=“copyright”> Any textual content </p> </li></ul>
  73. 73. HTML – Fundamentals Images <ul><li><img src=“images/pic1.jpg” width=75px, height=50px /> </li></ul><ul><li><img class=“pics” src=“images/pic1.jpg” /> </li></ul><ul><li>img.pics { width:75px; height:50px; border-width:3px } </li></ul>
  74. 74. 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>Use optimization software </li></ul><ul><li>Use thumb nail images </li></ul>
  75. 75. 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><ul><li>DIV background </li></ul><ul><ul><li><div style={ background-image:url; } > </li></ul></ul>
  76. 76. 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>
  77. 77. Courses at FVCC <ul><li>Introduction to Web Design </li></ul><ul><li>FrontPage Web Design </li></ul><ul><li>Intermediate Web Design </li></ul><ul><li>Advanced Topics in Web Design </li></ul><ul><li>Web Site Promotion </li></ul><ul><li>Basic Perl Programming </li></ul><ul><li>Using Macromedia Studio MX </li></ul>

×