Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML & CSS Workshop Notes

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.

  • Be the first to comment

HTML & CSS Workshop Notes

  1. 1. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society
  2. 2. Upsilon Pi Epsilon <ul><li>UPE is the Computer Science Honors Society. </li></ul><ul><li>It is a national honors society, with over 120 University Chapters around the country. </li></ul><ul><li>“New” to USC </li></ul>
  3. 3. <ul><li>Workshop series around web 2.0 technologies </li></ul><ul><li>This is the first of many </li></ul><ul><li>Future topics will include: Javascript, PHP, Ruby on Rails, and more. </li></ul><ul><li>Send us your ideas! </li></ul>
  4. 4. What is Web 2.0?
  5. 6. <ul><li>“Web 2.0, a phrase coined by O'Reilly Media in 2004, refers to a supposed second-generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that let people collaborate and share information online in previously unavailable ways.” </li></ul><ul><li>- Wikipedia (a Web 2.0 organization) </li></ul>
  6. 7. Why should I care?
  7. 9. What We’ll Cover Today <ul><li>HTML (Hypertext Markup Language) </li></ul><ul><li>DOM (Document Object Model - briefly) </li></ul><ul><li>CSS (Cascading Style Sheets) </li></ul>
  8. 10. HTML
  9. 11. History of HTML <ul><li>Tim Berners-Lee created first HTML version in the late 1980s (as a subset of SGML) </li></ul><ul><ul><li>Needed a simple way to share research among colleagues; piggy backed off newly evolving Internet (previously just text) </li></ul></ul><ul><li>HTML spread as multiple proprietary versions; in 1993 the IETF published a working draft of the first “official” HTML </li></ul>
  10. 12. History of HTML Part 2 <ul><li>Simplicity made things easy for people new to computers and publishing </li></ul><ul><li>Also left the “code” a mess, leaving every browser to handle different mistakes in its own way </li></ul><ul><li>Soon, the World Wide Web Consortium (W3C) was created to draft a set of standards for all web browsers to adhere to </li></ul>
  11. 13. History of HTML Part 3 <ul><li>Features were added to HTML very quickly: tables, colors, backgrounds, fonts, etc. </li></ul><ul><li>Web sites started becoming very complex </li></ul><ul><li>It became impossible to manage all the HTML tags needed to style the content on multiple sites, code bases starting becoming huge, tables were being used to make better designs... things got ugly. </li></ul>
  12. 14. History of HTML Part 4 <ul><li>We needed a solution to this problem, and that solution was CSS. </li></ul><ul><li>With the revolution of Cascading Style Sheets, HTML (and later XHTML) became about describing content, not presentation </li></ul><ul><li>The look of a web page (the presentation) was left entirely to style sheets, which could be common to entire sites </li></ul>
  13. 15. Setting up a web “Presence” <ul><li>No point to a website if no one else can see it... </li></ul><ul><li>USC lets every student create a web presence on the server </li></ul><ul><li>If you don't have it setup yet: </li></ul><ul><ul><li>telnet </li></ul></ul><ul><ul><li>type requestwww </li></ul></ul><ul><ul><li>follow the instructions </li></ul></ul>
  14. 16. Setup Part 2 <ul><li>To see your web presence, point browser to </li></ul><ul><li>To upload files to your web account, use an FTP client </li></ul><ul><li>You can download COREFTP(PC) or Fetch(Mac) from or poke around your PC for an app with &quot;FTP&quot; in title </li></ul><ul><li>Login to with usual USCWeb login </li></ul><ul><li>Upload files to public_html folder </li></ul>
  15. 17. HTML: What is it? <ul><li>HTML stands for Hyper Text Markup Language </li></ul><ul><li>An HTML file is a text file containing small markup tags </li></ul><ul><li>The markup tags tell the Web browser how to display the page </li></ul><ul><li>An HTML file can be created using a simple text editor or a WYSIWIG editor </li></ul>
  16. 18. Hello World! <html> <head> <title>Hello World!</title> </head> <body> Hello World! </body> </html>
  17. 19. HTML Basics: Tags/Attributes Tags/Attributes <ul><li>HTML tags are used to mark-up HTML elements </li></ul><ul><li>Tags are surrounded by the two characters < and >, which are called angle brackets </li></ul><ul><li>Tags normally come in pairs like <b> and </b>. The text between the start and end tags is the element content </li></ul><ul><li>Tags are not case sensitive, <b> means the same as <B>, but use lowercase: you’ll find out its better </li></ul><ul><li>Tags often have attributes, which gives the browser additional information about displaying the element </li></ul><ul><li>Attributes come in name-value pairs, with the value in double or single quotes (e.g. <img width=”100px”>) </li></ul>
  18. 20. HTML Basics: Formatting Tags Formatting Tags <ul><li>In HTML, formatting is not based on whitespace! (example) </li></ul><ul><li>Use tags to format text: </li></ul><ul><li><p></p> - paragraph tag, optional align attribute </li></ul><ul><li><br> - line break tag </li></ul><ul><li><b></b> or <strong></strong> - boldface tag, <strong> is more standards-compliant now </li></ul><ul><li><i></i> or <em></em> - italics tag, <em> is more standards-compliant now </li></ul><ul><li><ul><li>blabla 1</li> .. </ul> - unordered list tag, creates bulleted list, can be nested </li></ul><ul><li><ol><li>blabla 1</li> .. </ol> - ordered list tag, creates numbered list, can be nested </li></ul>
  19. 21. HTML Basics: Hyperlinks & Images Hyperlinks & Images <ul><li>Anchor tag can be used to create hyperlink or define an anchor within a page </li></ul><ul><li><a href=&quot; &quot;>google</a> - creates hyperlink, optional target, title attributes, URL can be relative or absolute </li></ul><ul><li><a name=&quot;section2&quot;></a> - creates anchor in page </li></ul><ul><li><a href=&quot;index.html#section2&quot;>section2</a> - to link to in-page anchor </li></ul><ul><li><img src=&quot;URL.gif&quot;> - creates image, optional width/height attributes, alt attribute to provide alternate text, align attribute to specify around-text wrapping, border attribute </li></ul><ul><li>Image tags can be nested in hyperlink tags to create hyperlinked images </li></ul>
  20. 22. HTML Basics: Tables/Frames <ul><li>Both of these are considered evil nowadays. </li></ul><ul><li>Before <DIVS> were introduced, people used tables to layout websites (e.g. multi-column website) </li></ul><ul><li>The HTML for tables is obtuse and prone to corruptibility (just try looking at the source of a fully tabled website) </li></ul><ul><li>But it exists...and could be occasionally useful </li></ul><ul><li><table></table> - creates table, optional width/height/align/bgcolor attributes </li></ul><ul><li><tr></tr> - creates table row with the same attribute options </li></ul><ul><li><td></td> - creates table cell with the same attribute options </li></ul><ul><li>Frames: web-designers used to use frames to separate the navigation page from the site's content (e.g. all CS websites!) </li></ul><ul><li>Frames are generally a bad idea... So we won't tell you tags for them. </li></ul>
  21. 23. HTML Basics: Forms <ul><li>Very common on the web as they provide interactivity </li></ul><ul><li><form></form> - defines form, optional method/name/action attributes to tell browser where to send results when submit pressed </li></ul><ul><li><input></input> - generic input tag, used always with type attribute to specify type (checkbox, radio, text, submit), also optional name/value attributes </li></ul><ul><li><textarea></textarea> - multi-line text area input, optional rows/cols attributes </li></ul><ul><li><select> <option>op1</option> ... </select> - creates combo/dropdown box </li></ul>
  22. 24. HTML Basics: Colors <ul><li>HTML Basics: Color </li></ul><ul><li>Color is used extensively in HTML: text color, background color, border color, link color, hr color, etc </li></ul><ul><li>Only 16 color names are approved by W3C - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow </li></ul><ul><li>All other colors should be referred to by Hexadecimal codes (#RRGGBB) </li></ul><ul><li>Always pick a pleasing color scheme for your site </li></ul><ul><li>Color references: </li></ul>
  23. 25. HTML Basics: References <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> / </li></ul><ul><li> / </li></ul>
  24. 26. Standards <ul><li>Read the W3C Specs! Search them! </li></ul><ul><li>Use the W3C Validator! </li></ul><ul><li>Write valid XHTML Strict/Transitional (or HTML 4.1) whenever possible (always!) </li></ul><ul><li>Separate content and presentation: use style sheets to change the look of your site! </li></ul>
  25. 27. Document Object Model <ul><li>A graph representation of the structure of an HTML/XHTML document </li></ul><ul><li>An API for accessing and interacting with the graph and its elements </li></ul><ul><li>The key ingredient to DHTML, AJAX, and this whole Web 2.0 thing </li></ul><ul><li>Visualizer: </li></ul>
  26. 28. CSS
  27. 29. Cascading Style Sheets <ul><li>A standard method of applying style and appearance information to text and other elements of a web page </li></ul><ul><li>Cascading means that properties “cascade” down through all child elements of a given element </li></ul>
  28. 30. Selectors <ul><li>Style sheets are made up of individual style elements that define size, color, fonts, etc. </li></ul><ul><li>Each style has a unique name: a selector </li></ul><ul><li>Selectors refer to specific elements, or sets of elements, in your (X)HTML files </li></ul>
  29. 31. Pseudo Selectors <ul><li>pseudo selectors can select specific parts of an element, or elements with specific properties </li></ul><ul><li>allows us to create :hover effects </li></ul>
  30. 32. Syntax <ul><li>C style syntax </li></ul><ul><li>almost never need the @media type declaration, but it is very useful to know - can target different types of devices easily </li></ul><ul><li>adding a background color to the body: </li></ul><ul><li>body { </li></ul><ul><ul><li>background: red; </li></ul></ul><ul><li>} </li></ul>
  31. 33. Style Sheets <ul><li>To style a webpage, you need lots of individual selectors and styles </li></ul><ul><li>Create style sheets to contain all of these style definitions </li></ul><ul><li>add them to your page a number of ways: </li></ul><ul><li><link rel=stylesheet href=&quot;whatever.css&quot; type=&quot;text/css&quot;> </li></ul><ul><li><style type=”text/css”> @import: url(aStyle.css) </style> </li></ul><ul><li>or declare styles right in the style tag </li></ul>
  32. 34. CSS Layout <ul><li>There are two types of elements in the CSS world: box level elements, and inline elements </li></ul><ul><li>tags that would normally cause a newline in html are generally block level elements </li></ul><ul><li><div> is the empty box element </li></ul><ul><li>text it usually inline content </li></ul><ul><li><span> is the empty inline element </li></ul><ul><li>Any element can be told to be a box </li></ul>
  33. 35. CSS Positioning <ul><li>There are a few different ways to position box elements: </li></ul><ul><ul><li>position </li></ul></ul><ul><ul><ul><li>absolute </li></ul></ul></ul><ul><ul><ul><li>fixed </li></ul></ul></ul><ul><ul><ul><li>relative </li></ul></ul></ul><ul><ul><li>float - most people are confused by this! </li></ul></ul><ul><ul><ul><li>left </li></ul></ul></ul><ul><ul><ul><li>right </li></ul></ul></ul>
  34. 36. Box Model
  35. 37. CSS Properties
  36. 38. Demo
  37. 39. Considerations <ul><li>CSS does not behave as expected if your (X)HTML is not well formed: VALIDATE! </li></ul><ul><li>There are more tags that you will ever memorize, so look things up with google </li></ul><ul><li>CSS is complex - go home, read about it online, try things out. The best way to learn is probably to look at existing web pages CSS and see what does what </li></ul><ul><li>Oh, and its not exactly a standard... </li></ul>
  38. 40. CSS Standards <ul><li>CSS is a W3C standard </li></ul><ul><li>Unfortunately, Internet Explorer decided not to implement the standard the correct way </li></ul><ul><li>Generally, you will have to “hack” your CSS to get it to work the way you want in IE </li></ul><ul><li>Furthermore, there are multiple levels of support, and every browser varies on this </li></ul>
  39. 41. CSS References <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  40. 42. Questions?
  41. 43. Contact <ul><li>Pamela Fox: [email_address] </li></ul><ul><li>Ross Boucher: [email_address] </li></ul><ul><li>UPE: [email_address] </li></ul><ul><li>On the web: </li></ul>

    Be the first to comment

    Login to see the comments

  • futurarose

    Sep. 8, 2007
  • terjin

    Nov. 3, 2007
  • slidemania

    Jan. 25, 2008
  • dd1079

    Feb. 8, 2008
  • OnlyBlue

    Mar. 31, 2008
  • staley412

    Jun. 14, 2008
  • sumit.kumawat

    Feb. 1, 2009
  • ggb2g

    May. 20, 2009
  • victorferreira

    Nov. 13, 2009
  • iranphpmaster

    Jul. 4, 2010
  • landrik

    Jun. 21, 2011
  • nonglove

    Sep. 29, 2011
  • tintintorres06

    Jan. 12, 2013
  • FfyMelegrito

    Aug. 6, 2015
  • kapikumarjhamnani

    Nov. 16, 2015
  • PrajwalDoble

    Dec. 30, 2015
  • deepraj_maurya

    Jan. 26, 2016
  • mkhasans

    Apr. 17, 2016
  • KhaiPayas

    Jan. 2, 2018
  • Syedhaiderzaidi4

    Jun. 22, 2019

Put on by USC's Upsilon Pi Epsilon as part of Wonderful World of Web2.0 Workshop Series.


Total views


On Slideshare


From embeds


Number of embeds