CS193X:�Web Programming
Fundamentals
Spring 2017
Victoria Kirst
(vrk@stanford.edu)
Today's schedule
HW0 Reminders
HW0 still due this Friday!
A few tips:
Waitlist??
Suggestion: Bring your laptop!
(But, y'know, don't look ahead for the answers to lecture questions and then pretend like you knew them all along.)
HTML and CSS
Quick review
Recall: HTML
HTML (Hypertext Markup Language)
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
Some HTML elements
Top-level heading: h1, h2, ... h6
Paragraph: p
Line break: br
Some HTML elements
Image: img
Link: a (note: not link)
Strong (bold): strong (note: don't use b)
Emphasis (italic): em (note: don't use i)
Recall: Course web page
We wrote some HTML to make the following page:
That was weird
�
Hmmm… strange…
Oh well, it works! Let's move on!!!
<h1>CS 193X: Web Fun</h1>
<strong>Announcements</strong><br/>
4/3: Homework 0 is out!<br/>
CSS
Recall: CSS
CSS: Cascading Style Sheets
selector {
property: value;
}
Some CSS properties
Font face: font-family
Font color: color
Note that color always refers to font color, and there's no way to make it mean anything other than font color.
Background color: background-color
Assign a background-color to body to make the page a different color.
Some CSS properties
Border: border (border shorthand syntax)
Text alignment: text-align (note: don't use <center>)
140 predefined names (list)�color: black;
Hex values�color: #00ff00;�color: #0f0; �color: #00ff0080;
Exercise: Course web page
Let's write some CSS to style our page:
Exercise: Course web page
Let's write some CSS to style our page:
Font face: Helvetica
Border: hotpink 3px
Background color: lavenderblush
Highlight: yellow
- Box is centered
- Header and link are centered
- Box contents are left-aligned
Solution?!
body {
font-family: Helvetica;
}
h1 {
text-align: center;
}
a {
text-align: center;
}
p {
border: 3px solid hotpink;
background-color: lavenderblush;
}
Produces:
CSS exercise debrief
We used some key techniques:
CSS exercise debrief
But we encountered more weirdness...
How do we get from this…
… to this?
Q: Why is HTML/CSS so bizarre??
A: There is one crucial set of rules we haven't learned yet…
block vs inline display
What is HTML?
HTML (Hypertext Markup Language)
And there are 3 basic types.
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
Types of HTML elements
Each HTML element is categorized by the HTML spec into one of three-ish categories:
Block elements
Examples: <p>, <h1>, <blockquote>, <ol>, <ul>, <table>�
Example: Block
<h1>About vrk</h1>
<p>
She likes <em>puppies</em>
</p>
Q: What does this look like in the browser?
<h1>About vrk</h1>
<p>
She likes <em>puppies</em>
</p>
h1 {
border: 5px solid red;
}
(Codepen)
Block-level: �extends the full width of the page
<h1> is block-level, so it extends the full width of the page by default
Note how block-level elements (h1, p) flow top to bottom
See: Codepen
<h1>About vrk</h1>
<p>
She likes <em>puppies</em>
</p>
h1 {
border: 5px solid red;
}
Q: What does this look like in the browser?
<h1>About vrk</h1>
<p>
She likes <em>puppies</em>
</p>
h1 {
border: 5px solid red;
width: 50%;
}
(Codepen)
Block-level�width can be modified
<h1> is block-level, so its width can be modified
Block-level elements still flow top to bottom
See: Codepen
<h1>About vrk</h1>
<p>
She likes <em>puppies</em>
</p>
h1 {
border: 5px solid red;
width: 50%;
}
Inline elements
Examples: <a>, <em>, <strong>, <br>
Example: Inline
<strong>Web programming resources:</strong>
<a href="http://cs193x.stanford.edu">CS 193X</a>
<a href="https://developer.mozilla.org/en-US/">MDN</a>
<a href="http://google.com">Google</a>
Q: What does this look like in the browser?
<strong>Web programming resources:</strong>
<a href="http://cs193x.stanford.edu">CS 193X</a>
<a href="https://developer.mozilla.org/en-US/">MDN</a>
<a href="http://google.com">Google</a>
strong {
border: 5px solid red;
width: 1000px;
}
(Codepen)
Inline elements ignore width�width cannot be modified
Cannot set width on inline element, so it is ignored (Codepen)
strong {
border: 5px solid red;
width: 1000px;
/* Will not work; strong is
inline! */
}
<strong>Web programming resources:</strong>
<a href="http://cs193x.stanford.edu">CS 193X</a>
<a href="https://developer.mozilla.org/en-US/">MDN</a>
<a href="http://google.com">Google</a>
inline-block
Examples: <img>, any element with display: inline-block;
Q: What does this look like in the browser?
Example: Inline-block
img {
width: 50px;
}
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
(Codepen)
Inline-block�Has width and height; flows left to right
Can set width on inline-block element, so image width is set to 50px. (Codepen)
inline-block flows left to right, so images are right next to each other.
img {
width: 50px;
}
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
<img src="http://i.imgur.com/WJToVGv.jpg" />
You can change an element's default rendering type by changing the display property. Examples:
Possible values for display:
p {
display: inline;
}
a {
display: block;
}
Review
Questions?
Moral of the story:
If your CSS isn't working, see if you're trying to apply block-level properties to inline elements
h1 vs strong mystery
Recall: Weirdly the <h1> heading was on a line of its own, and <strong> was not. -- Why?
h1 vs strong demystified!
Recall: Weirdly the <h1> heading was on a line of its own, and <strong> was not. -- Why?
Because h1 is a block-level element,�and strong is an inline-level element
text-align mystery
Recall: We couldn't set text-align: center; on the <a> tag directly, but we could center <h1>. Why?�
Let's try looking at the MDN description of text-align...
text-align mystery
(source)
text-align demystified!
Why? From the spec, can't apply text-align to an inline element; must apply text-align to its block container, or set a { display : block; }
Box size mystery
Recall: The pink box we put around the announcements extended the entirety of the page.
Why?
How do we fix this?
Box size mystery
Recall: The pink box we put around the announcements extended the entirety of the page.
Why? Because p is block-level, so width == width of the page
How do we fix this?
Box size mystery: demystified!
Recall: The pink box we put around the announcements extended the entirety of the page.
Why? Because p is block-level, so width == width of the page
How do we fix this? Change display to inline-block (though now the space above the box has increased… will address later!)
Centering the box
We can also center the box by centering the body tag, since p is now inline-block.
Highlight mystery
Recall: We didn't know how to select a random snippet of text to change its background.
How do we fix this?
Highlight: demystified!
We can select a random segment of text by wrapping it in an inline element:
Hmmm… but wouldn't it be better to have a "highlight" element?
Highlight: demystified!
We can select a random segment of text by wrapping it in an inline element:
Hmmm… but wouldn't it be better to have a "highlight" element?
How do we make a generic HTML element?
Have you heard of <div> and <span>?
What are they?
<div> and <span>
Two generic tags with no intended purpose or style:
<span> in action
We can use <span> as a generic inline HTML container:
Multiple generic containers?
But won't we often want multiple generic containers?
How do we distinguish two generic containers?
In other words, how do we select a subset of elements instead of all elements on the page?
CSS Selectors:
Classes and Ids
Classes and ids
There are 3 basic types of CSS selectors:
Element selector (this is the one we've been using) | p | All <p> elements |
✨ID selector✨ | #abc | element with id="abc" |
✨Class selector✨ | .abc | elements with class="abc" |
<h1 id="title">Homework</h1>
<em class="hw">HW0</em> is due Friday.<br/>
<em class="hw">HW1</em> goes out Monday.<br/>
<em>All homework due at 11:59pm.</em>
Classes and ids
<h1 id="title">Homework</h1>
<em class="hw">HW0</em> is due Friday.<br/>
<em class="hw">HW1</em> goes out Monday.<br/>
<em>All homework due at 11:59pm.</em>
.hw {
color: hotpink;
}
#title {
color: purple;
}
More on class and id
Other selectors:
Next time!