Week 3 html recap and css
-
Upload
brianjihoonlee -
Category
Documents
-
view
606 -
download
0
Transcript of Week 3 html recap and css
![Page 1: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/1.jpg)
Speaking in Code
HTML Recap and CSS
Professor Liel Leibovitz
Brian Lee
Carolynn Vu (TA)
![Page 2: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/2.jpg)
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
![Page 3: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/3.jpg)
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>
![Page 4: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/4.jpg)
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)
![Page 5: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/5.jpg)
Speaking in Code
![Page 6: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/6.jpg)
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>
![Page 7: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/7.jpg)
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
![Page 8: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/8.jpg)
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>
![Page 9: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/9.jpg)
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>
![Page 10: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/10.jpg)
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- -
![Page 11: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/11.jpg)
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"/>
![Page 12: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/12.jpg)
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;
}
![Page 13: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/13.jpg)
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;
}
![Page 14: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/14.jpg)
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>
![Page 15: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/15.jpg)
Speaking in Code
Text Editors
• Where do we actually write code?
• Codecademy is a set environment
![Page 16: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/16.jpg)
Speaking in Code
Microsoft FrontPage (some NOOB!)
![Page 17: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/17.jpg)
Speaking in Code
DreamWeaver (Still Pretty Noob)
![Page 18: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/18.jpg)
Speaking in Code
Sublime Text (some respect)
![Page 19: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/19.jpg)
Speaking in Code
VIM (freaking pros)
![Page 20: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/20.jpg)
Speaking in Code
Only writing HTML?
Default programs
• Mac: Make sure to change format to plain text (COMMAND > SHIFT> T)
– TextEdit
• PC:
– Notepad
![Page 21: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/21.jpg)
Speaking in Code
Ready to Try It Yourself?
http://bit.ly/basiccss
![Page 22: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/22.jpg)
Speaking in Code
Sync-Up!
• Comments in CSS
• Hexidecimal colors
/*Just another syntax*/
color: #cc0000;
![Page 23: Week 3 html recap and css](https://reader036.fdocuments.us/reader036/viewer/2022062319/5565e908d8b42ae8488b5429/html5/thumbnails/23.jpg)
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;
}