Week 3 html recap and css

Speaking in Code

HTML Recap and CSS

Professor Liel Leibovitz
Brian Lee
Carolynn Vu (TA)

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

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>

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

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

/*Just another syntax*/

• Hexidecimal colors
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;
}

Week 3 html recap and css

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Week 3 html recap and css

Ähnlich wie Week 3 html recap and css (20)

Week 3 html recap and css

Hinweis der Redaktion