LIS3353 SP12 Week 4

175 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
175
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LIS3353 SP12 Week 4

  1. 1. HTML & WebsitesLIS 3353 – 1/17/12
  2. 2. Administrivia Grading – HW #1 before the weekend; I will post an announcement on Blackboard – Quiz #2 will be graded & handed out on Thursday – Office hours today postponed – Wednesday 10am-2pm instead Today’s agenda – News – Group Assignment #1 – check wikispaces page for group assignments – Group leaders, please confirm your group (edit the wikispaces page directly) by Tuesday 4pm – HTML and websites
  3. 3. Assignment #3 Assignment #3 • Seminoles Future Careers Exposition Thursday, January 26, 2012 9 am-noon and 1-3 pm Leon County Civic Center OR • Seminole Success Night Wednesday, January 25, 2012 5:30 p.m. - 7:00 p.m. Dunlap Success Center
  4. 4. Assignment #3 250 word response to your experience at either (or both!) event in your wordpress BLOG. Address any or all of the following topics: – what you did to prepare for the event; – what companies piqued your interest; – what companies you talked to or submitted resumes to; – what technology companies were represented OR what companies were looking for in terms of technology skills; – what you learned from attending the event.This assignment is due by Thursday, February 2, 2012 at 10AM. 50 points. Submit your completed write-up at the following URL. http://bit.ly/lis3353-a3
  5. 5. In the news… Wifi/USB cufflinks http://mashable.com/2012/01/20/wi-fi-hots
  6. 6. SOCIAL MEDIA, WEB 2.0
  7. 7. SOCIAL MEDIA, WEB 2.0
  8. 8. SOCIAL MEDIA, WEB 2.0
  9. 9. HTML HTML – hypertext markup language HTML provides a framework for browsers to display images and text on webpages Invented in 1990 by Tim Berners-Lee for scientists to share information online with each other
  10. 10. HTML Basics 3 main tags for the structure of a webpage: <html> </html> <head> </head> <body> </body>
  11. 11. HTML Basics Opening & Closing tags <TAG> </TAG> (for enclosing elements, not standalone elements) <html> <head> <title>Title of my page </title> </head> <body> Content of webpage here </body> </html>
  12. 12. HTML Basics Tags – Nested in document for example: <head> and <body> – Have multiple attributes extra information for each tag for example: <a href=”http://www.fsu.edu">this is a link</a>
  13. 13. HTML Basics Example – Use TextEdit (Mac) or Notepad (Win) to create your page – Enter the following: <html> <head> <title>LIS 3353 Test</title> </head> <body> Welcome to the class. </body> </html>
  14. 14. HTML Basics Save the text file with a .html file extension Open text file in a web browser What are deprecated tags?
  15. 15. HTML Basics Formatting tags: – Paragraphs <p> </p> – Line breaks <br> – Headings <h1> </h1>, <h2> </h2> – Rule lines <hr> – Images <img> – Bold <b> </b> – Italics <i> </i>
  16. 16. HTML Basics Try it out <html> <head> <title>My Title</title> </head> <body> Testing lines using HR commands <hr width="75px"> <hr width="75%"> <hr size="7"> <hr noshade> <hr width="75%" size="10" noshade> </body> </html>
  17. 17. HTML Basics Try it out <html> <head> <title>My Title</title> </head> <body> Testing lines using HR commands <hr width="75px"> <hr width="75%"> <hr size="7"> <hr noshade> <hr width="75%" size="10" noshade> </body> </html>
  18. 18. HTML Basics <html> <html> <head> <head> <title>Test for LIS</title> <title>Test for LIS</title> </head> </head> <body> <body> <h1>Welcome</h1> <h1>Welcome</h1><p>Hello Seminole Fans</p> <p>Hello Seminole Fans</p> <img src="graphic.jpg" <img src= alt=“fsustadium"><br><br> "http://www.fsu.com/ecard32/images/FS <hr> USports/stadium004.jpg"<p>Game this weekend<br> alt=“fsustadium"><br><br><hr> &copy; 2012</p> <p>Game this weekend<br> </body> &copy; 2012</p> </html> </body> </html>
  19. 19. HTML BasicsSpecial Characters&copy; for ©&reg; for ®&amp; for &&lt; for <&gt; for >&nbsp; for a non-breaking space
  20. 20. HTML BasicsListsUnordered (bulleted) – <ul> </ul> (contains the list) optional type attribute: • disc  square open circle – <li> </li> (each item)
  21. 21. HTML Basics <html> <head> <title>LIS Test</title> </head> <body> <h1>Menu</h1> <h3><i>Sunday Brunch</i></h3> <ul type="circle"> <li>Eggs and Toast</li> <li>Roadkill</li> <li>Yesterday’s leftovers</li> </ul> </body> </html>
  22. 22. HTML BasicsListsOrdered list (numbered)<ol> </ol> (contains the list) – Optional type attribute • 1: 1, 2, 3… • a: a, b, c… • A: A, B, C… • i: i, ii, iii • I: I, II, III – Optional start attribute • Begin somewhere other than 1 • To start at E, you must indicate: “ type="A" start="5” “<li> </li> (each item)
  23. 23. HTML Basics <html> <head> <title>My Title</title> </head> <body> <h1>Menu</h1> <h3><i>Sunday Brunch</i></h3> <ol type=I start="1"> <li>Eggs and Toast</li> <li>Roadkill</li> <li>Yesterday’s leftovers</li> </ol> </body> </html>
  24. 24. HTML Basics Links allow you to browse to: – External pages (off site) – Internal pages (on site) – Write email (launch email program) – Display images Use the <a> </a> tag – <a> stands for anchor – href stands for “hypertext reference” <a href="http://www.fsu.edu/">FSU</a>
  25. 25. HTML Basics Links allow you to browse to: – External pages (off site) – Internal pages (on site) – Write email (launch email program) – Display images Use the <a> </a> tag – <a> stands for anchor – href stands for “hypertext reference” <a href="http://www.fsu.edu/">FSU</a>
  26. 26. HTML Basics Links to outside pages: – text within the tags is what is displayed in browser – the href attribute contains the URL for the link<a href="http://www.fsu.edu">FSU Home Page</a>
  27. 27. HTML Basics Links to inside/internal pages/resources: – Linking within same file (page.html) • <a href="#target”>go to target on the page</a> • <a name="target">target point</a> – Example: <h1>Table of Contents</h1> <p><a href="#section1">Introduction</a><br> <a href="#section2">Main body of the paper</a><br> <a href="#section3">Conclusion</a><br></p> … In document file: <h2><a name="section1">Introduction</a></h2> (intro text, etc.) <h2><a name="section2">Main body</a></h2> (main body text, etc.) <h2><a name="section3">Conclusion</a></h2> (conclusion text, etc.)
  28. 28. HTML Basics - Tables Useful in controlling page layout Manual coding can be difficult Tables behave differently in different browsers Current trend is away from tables.<table> <tr> row <th>Heading</th> row heading <td>cell 1</td> column, cell <td>cell 2</td> </tr></table>
  29. 29. HTML Basics - Images Embed graphics (PNG, JPG, GIF) into your page using the <img> tag Watch loading performance, you may need to optimize the image. Try to keep photos under 100kb. You can make a picture “linkable” <img src="hello.gif”> <img src="hellofsu.gif" width="30" height="40" alt="FSU logo"> <a href="http://www.fsu.edu/"><img src="hellofsu.gif" width="30" height="40" border="0" alt="FSU logo"></a>
  30. 30. HTML Basics - Images Default backgrounds for browsers – light gray or white, black text Background & text colors controlled with the <body> tag Newer code lets you say <color="red"> A color is referenced by RGB value one byte for each red, green, blue color (hexadecimal) – White: #FFFFFF – Black: #000000 – What color is #540115? #cdc092? <body bgcolor="#FFFFFF" text="#800000"> <body background="filename.jpg">
  31. 31. iSpace iSpace Web space only for CCI students Students can post websites, coursework, projects, etc. Up to 500MB of storage space is available (depends on use) Expires after 4 years from initial login
  32. 32. iSpace Create files on your machine (local) Use SSH/SFTP to transfer files to iSpace (remote server) Set protections for viewing
  33. 33. ce iSpace pa er iS r v casey.html file – Notepad (Win) se e Set fil to TextEdit (Mac) ssh/sftp ties roper <html> <head> P 755<title>LIS 3353 Test</title> set </head> (usually to this y) alread <body> Welcome to the class. </body> ages </html> all web p ” blic li n e! in “pu r si te on folde Web http://2007.ispace.ci.fsu.edu/~cy09g/casey.html

×