Download to read offline
Week 3 html recap and css
- 1. Speaking in Code HTMLRecap and CSS Professor Liel Leibovitz Brian Lee Carolynn Vu (TA)
- 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. 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. 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.
- 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. 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. 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. 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. 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. Speaking in Code CascadingStyle 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. Speaking in Code Whyuse 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. 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. Speaking in Code ADifferent 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. Speaking in Code TextEditors • Where do we actually write code? • Codecademy is a set environment
- 16. Speaking in Code MicrosoftFrontPage (some NOOB!)
- 17. Speaking in Code DreamWeaver(Still Pretty Noob)
- 18. Speaking in Code SublimeText (some respect)
- 19. Speaking in Code VIM(freaking pros)
- 20. Speaking in Code Onlywriting HTML? Default programs • Mac: Make sure to change format to plain text (COMMAND > SHIFT> T) – TextEdit • PC: – Notepad
- 21. Speaking in Code Readyto Try It Yourself? http://bit.ly/basiccss
- 22. Speaking in Code Sync-Up! •Comments in CSS /*Just another syntax*/ • Hexidecimal colors color: #cc0000;
- 23. Speaking in Code CSSSyntax 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; }