4. more tag examples
<h2>My subheading</h2>
<a href=”http://google.com”>Google</a>
{ attribute
5. <img src=”photo.jpg”></img>
where's the content?
sometimes, the attributes are enough to describe
tag – hence, no content. tags without content, can
be written in a shortened way, like so:
<img src=”photo.jpg” />
6. a bunch of tags together is
called an HTML document.
7. checkout some popular website's HTML
code.
chrome & firefox
right click anywhere on the page, and click
“View Source” or “View Page Source”.
internet explorer
stop using it.
8. whoa.
you probably just saw a bunch of stuff you've
never seen before. for example, on Google or
YouTube you might have seen some
function()
{ doSomething();
uglyParentheses(); JavaScript
}
p { font-family:Helvetica; } CSS
9. without CSS: what's CSS?
<center><p>My centered paragraph.</p></center>
with CSS: html css
p {
<p>My centered paragraph</p>
align: center;
}
10. CSS is just a way of separating
style content
font text
color images
image border videos
alignment (left, center, right) links
11. using CSS
do stuff with all p
(paragraph) tags
set font to arial
change the p {
color: white;
color to white font-family: Arial;
font-size: 12px;
}
set font size to 12
color, font-family, and font-size are properties.
white, arial, and 12px are values.
12. say I wanted to...
change all heading level 1 (h1) tags to the color black
change all link (a) tags to the color blue
change all link (a) tags to not be underlined
hint: look up the text-decoration property on google
(w3schools is a good resource) and look at the possible
“property values”.
give me the CSS.
13. putting CSS on your website
3 ways
inline: putting CSS in the specific elements you want to change
internal: putting CSS in a separate tag
external: putting CSS in a separate file
we'll look at the three ways to change an image's
border to the color blue and the size 2px
14. here's our image HTML: inline
<img src=”myimage.jpg” />
find the CSS properties for the border style,
border width, and border color
hint: returns (enters) do not matter in CSS
to add a border with CSS, we set the
“style” property to equal our CSS code
<img src=”myimage.jpg” style=”your css here” />
