Basic HTML & CSS

A presentation aimed at high school students for review. Inspired by @holman's blog post at http://zachholman.com/posts/slide-design-for-developers.

Transcript

1. html & css the basics
2. <h1>My heading</h1> tag content closing tag tags are for describing content.
3. what's content? images text videos { all the above.
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 JavaScript function() { doSomething(); uglyParentheses(); } CSS p { font-family:Helvetica; }
9. what's CSS? without CSS: <center><p>My centered paragraph.</p></center> with CSS: <p>My centered paragraph</p> html css p { align: center; }
10. CSS is just a way of separating style content font color image border alignment (left, center, right) text images videos links
11. using CSS p { color: white; font-family: Arial; font-size: 12px; } do stuff with all p (paragraph) tags change the color to white set font to arial 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 give me the CSS. hint: look up the text-decoration property on google (w3schools is a good resource) and look at the possible “property values”.
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. inline here's our image HTML: <img src=”myimage.jpg” /> to add a border with CSS, we set the “style” property to equal our CSS code find the CSS properties for the border style, border width, and border color <img src=”myimage.jpg” style=”your css here” /> hint: returns (enters) do not matter in CSS