O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Week 3 html recap and css

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Week 2   html
Week 2 html
Carregando em…3
×

Confira estes a seguir

1 de 23 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Week 3 html recap and css (20)

Week 3 html recap and css

  1. 1. Speaking in Code HTML Recap and CSS Professor Liel Leibovitz Brian Lee Carolynn Vu (TA)
  2. 2. Speaking in Code Recap: HTML – Lists My Favorite Artists • Let It Be 1. The Beatles • Eye of the Tiger 2. Passion Pit • Harlem Shake 3. Kendrick Lamar Song Recommendations
  3. 3. Speaking in Code Recap: HTML – List Items <li> Worst Catchy Songs <body> <h2>Worst Catchy Songs</h2> <ol> 1. Friday <li>Friday</li> <li>Call me Maybe</li> 2. Call Me Maybe <li>Barbie Girl</li> </ol> 3. Barbie Girl </body>
  4. 4. Speaking in Code Recap: HTML – Comments • Comments help HUMANS read code • Do not render in browser <!– Haha you guys can’t see me  (HTML) // Comments exist in pretty much every language (Javascript) # Dear future me, I’m so sorry this code looks like my ass (Ruby)
  5. 5. Speaking in Code
  6. 6. Speaking in Code Recap: HTML – Attributes • Attributes go into the opening tags • Can do multiple attributes at a time <img src=‘jumanji.png’/> <h1 style=‘font-family:Garamond’/>Ew Times New Roman sucks</h1> <p style=‘text-align:center; color:red’/>Can’t wait for Game of Thrones!</p> <div id=‘tv-shows’/><div>
  7. 7. Speaking in Code Recap: HTML – Styles • All styles do exactly what they say color: red font-family: Garamond font-size: 10px text-align: center background-color: pink
  8. 8. Speaking in Code HTML: Tables • Same concept as lists • Instead of list item, there are cells <table border=‘1px’> <!- - Initialize the table, just like <ol> or <ul> - -  <tr> <!- - table row - -  <td>King Kong</td> <!- - table data, similar to <li> tags- -  <td>1933</td> </tr> <tr> <td>Dracula</td> <td>1897</td> </tr> </table>
  9. 9. Speaking in Code <thead> vs <tbody> • Same concept as HTML <head> vs <body> <thead> <!- - initiates the table header - -  <tbody> <!- - data and information inside - -  <thead> <tr> <th>Famous Monsters</th> <tr> </thead> <tbody> <tr> <td>Dracula</td> <tr> </tbody>
  10. 10. Speaking in Code HTML: <div> and <span> • Allows you to organize your content • Crucial for CSS <div> <!- - short for divider, separate this content from others - -  <span> <!- - used mainly to group inline elements in text- - 
  11. 11. Speaking in Code Cascading Style Sheets (CSS) • Separate content (HTML) from style (CSS) • Save under a different name – ie) stylesheet.css • Link two documents through style tag • Goes into the <head> of the HTML document <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  12. 12. Speaking in Code Why use CSS? • Global styling to more than one HTML file • Can be as specific as you want also • Syntax: (change all paragraphs) p{ color: red; text-align: right; }
  13. 13. Speaking in Code Tip: Using CSS Effectively • Use attributes <div id=‘tv-shows’/><div> <span class=‘make-all-blue’/><span> div#tv-shows { color: purple; text-align: center; } span.make-all-blue { color: blue; }
  14. 14. Speaking in Code A Different Approach <style> • Not best practice, but don’t need to link stylesheet <html> <head> <style> p{ color: purple; } </style> <title>Result</title> </head> <body> <p>Check it out! I'm purple!</p> </body> </html>
  15. 15. Speaking in Code Text Editors • Where do we actually write code? • Codecademy is a set environment
  16. 16. Speaking in Code Microsoft FrontPage (some NOOB!)
  17. 17. Speaking in Code DreamWeaver (Still Pretty Noob)
  18. 18. Speaking in Code Sublime Text (some respect)
  19. 19. Speaking in Code VIM (freaking pros)
  20. 20. Speaking in Code Only writing HTML? Default programs • Mac: Make sure to change format to plain text (COMMAND > SHIFT> T) – TextEdit • PC: – Notepad
  21. 21. Speaking in Code Ready to Try It Yourself? http://bit.ly/basiccss
  22. 22. Speaking in Code Sync-Up! • Comments in CSS /*Just another syntax*/ • Hexidecimal colors color: #cc0000;
  23. 23. Speaking in Code CSS Syntax div { width: 100%; } a.make_me_red { /*periods denote class attribute */ color: red; /*separate with semi-colons */ text-decoration: none; } h1#only_this_one {/*hashes or octothorpes denote class attribute */ background-color: blue; }

Notas do Editor

  • Ask which list is what. &lt;ol&gt;, &lt;ul&gt;
  • Make alternating slides to quiz individually
  • Ask how many columns there would be
  • Questions on how /where to write html

×