1. CIS133: Internet Development Week 2

2. Agenda  Homework Review  MYSCC  FTP  HTML Code  In-class  Lab / Homework

3. The “A” labs

4. Using mySCC Use your desktop credentials

5. Using mySCC CIS-BPC folder contains Filezilla applications. My_Documents contains the contents of the student H: drive.

6. Hosting  Need a domain name  Need a tool to allow access to remote server  Provides tools and resources to manage how the site interacts with users and administrators

7. What to look for in a host  Server Type (Windows/UNIX)  Disk Space  Bandwidth / Month  Email Accounts  Metrics  IP/HTTPS/FTP  Included Applications

8. Pick a domain!  acrossthemiddle.com(1301)  akbarcommand.com(1302)  bowlofmarbles.com(1303)  bustthecurve.com(1304)  credass.com(1305)  designporch.com(1306)  druidtemple.com(1307)  fadedhistory.com(1308)  frinkster.com(1309)  fumbledball.com(1310)  galaxyclass.com(1311)  kneescrape.com(1313)  loyalpenguin.com(1314)  nimbledesigns.com(1315)  poorchimp.com(1316)  rancidcheese.com(1317)  reekingonion.com(1318)  rockinggranny.com(1319)  rustednails.com(1320)  sharperthoughts.com(1321)  shouldabeen.com(1322)  slantroute.com(1323)  sometimeswhen.com(1324)  squishybread.com(1325)  swezzer.com(1326)  weekoldbread.com(1327)  wipedmemory.com(1328) keystone-kops.com(1312)

9. Interacting with a server  Use FTP (File Transfer Protocol)  Send files across the Internet  The computer you are at is the CLIENT  You PUT files on a remote SERVER  You GET files from a remote SERVER Filezilla

10. Connecting to your domain via FTP  Tool: Filezilla  Host:.com  Username: sccspring  Username: sccspring  Password: SpringScc13 All files need to be in the folder “.com” to be visible on the web

11. GIF v JPG v PNG GIF  255 Solid colors  Best for logos and cartoons  Control file size by numbers of colors  Allows transparent backgrounds  Allows animations JPG  16M colors  Best for photographs  Control file size by “quality” and size PNG  Handles  Control size by “quality”  Allows transparent backgrounds  Maintains layers

12. Getting an image  Browse to any web page  Right-Click and image  Select “Save Image as…”  Find a spot on your computer to save it. NOTE: If you do not see “Save Image as…” it might be a flash file or a background image. Some browsers will have a different option that “Save Image as…”

13. attributes attributes  align=“right|left” Will wrap text around the image  title=“my family vacation” Tool-tip pop-up message  width=“100” height=“100” resize the image, but does not change the filesize

14. Web Colors

15. HTML TAGS  More Info  More Info Tag Name attribute Name attribute Value Closing Tag Tag Content

16. Basic HTML Tables  = Table definition  = Table header  = Table row  = Table data (column) <table><tr> Column 1 in row 1 Column 1 in row 1 Column 2 in row 1 Column 2 in row 1 </tr></table>

17. Table attribute examples    Title  Title  Label  Label

18. HTML / CSS  CSS = Cascading Style Sheets <style> body {background-color:#ff0000}; </style><style> body {font-family:arial}; </style>

19. HTML / CSS inline  This will show green text.  This will show green text.  Cell content  Cell content

20. Nesting <ol> Items numer 1 Items numer 1 </ol> Opening and closing one tag within another tag Can put inside another

21. IN-CLASS  Image  Table  CSS  Useful site for content: http://www.lipsum.com/

22. LAB #2  Create folder called “ week2” on your assigned domain.  Create THREE pages “index.html”, “index2.html” and “index3.html” and use all of the following tags on each page: SPAN, BLOCKQUOTE, TABLE, TH, TR, TD  The pages need to all link together and look like the image in the PPT.  Upload all the files using FTP to your domain.  Send the “index.html” link to rob.loy@scottsdalecc.edu by Jan 31 @ 6:00pm. rob.loy@scottsdalecc.edu

23. Sample page for homework

24. Homework #2  For each URL below - write a paragraph on your first impressions. Discuss design, navigation and creditability  URL: http://whisperingpinesaz.com/ http://whisperingpinesaz.com/  URL: http://lakeofthewoodsaz.com/ http://lakeofthewoodsaz.com/  URL: http://www.moonridgelodge.com/ http://www.moonridgelodge.com/  Send the 1-2 page.DOC file to to rob.loy@scottsdalecc.edu by Jan 31 @ 6:00pm

25. Contact Rob.Loy@sccmail.maricopa.edu  (c) 602-418-4041  (w) 480-754-6943  Work at Henkel (101 & Scottsdale Rd)  Live in Scottsdale

26. Web Resources  http://www.w3schools.com http://www.w3schools.com  http://www.webmonkey.com http://www.webmonkey.com  http://www.w3c.org http://www.w3c.org  http://lipsum.com http://lipsum.com