week 3 html recap and css
TRANSCRIPT
Speaking in Code
HTML Recap and CSS
Professor Liel Leibovitz
Brian Lee
Carolynn Vu (TA)
Speaking in Code
Recap: HTML – Lists
My Favorite Artists
1. The Beatles
2. Passion Pit
3. Kendrick Lamar
Song Recommendations
• Let It Be
• Eye of the Tiger
• Harlem Shake
Speaking in Code
Recap: HTML – List Items <li>
Worst Catchy Songs
1. Friday
2. Call Me Maybe
3. Barbie Girl
<body><h2>Worst Catchy Songs</h2><ol>
<li>Friday</li><li>Call me Maybe</li><li>Barbie Girl</li>
</ol></body>
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)
Speaking in Code
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>
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
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>
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>
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- -
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"/>
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;
}
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;
}
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>
Speaking in Code
Text Editors
• Where do we actually write code?
• Codecademy is a set environment
Speaking in Code
Microsoft FrontPage (some NOOB!)
Speaking in Code
DreamWeaver (Still Pretty Noob)
Speaking in Code
Sublime Text (some respect)
Speaking in Code
VIM (freaking pros)
Speaking in Code
Only writing HTML?
Default programs
• Mac: Make sure to change format to plain text (COMMAND > SHIFT> T)
– TextEdit
• PC:
– Notepad
Speaking in Code
Ready to Try It Yourself?
http://bit.ly/basiccss
Speaking in Code
Sync-Up!
• Comments in CSS
• Hexidecimal colors
/*Just another syntax*/
color: #cc0000;
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;
}