Citizens-school-spring-2012

Citizens School Spring 2012: Girl Coders Apprenticeship [Keynotes + Supporting Documents]

View the Project on GitHub rickyc/citizens-school-spring-2012

Citizens School 2012

Lesson 1 - What is HTML?
Lesson 2 - Why is my site so ugly?
Lesson 3 - Let's add some images!
Lesson 4 - Links
Lesson 5 - Embedding Videos
Lesson 6 - Colors

HTML Tags Reference

<html>

Description:

tag that tells the computer that this is an html file, minimal required tag to create a webpage

Usage:

<html>Hello!</html>

<head>

Description:

the head contains elements such at the title, the favicon, stylesheets, etc. remember, anything in the head will not show up in the content of the webpage

Usage:

<html>
  <head>
    <title>Webpage title</title>
  </head>
</html>

<body>

Description:

you can think of the body as the meat of the webpage. you would place all your content here.

Usage:

<html>
  <head>
    <title>Webpage title</title>
  </head>
  <body>
    This is the body! I would write my bold tags and underline tags and place my images here.
  </body>
</html>

<b>

Description:

bolds the text

Usage:

<b>Bold!</b>

<i>

Description:

italicizes the text

Usage:

<i>Italics!</i>

<u>

Description:

underlines the text

Usage:

<u>Underline!</u>

<marquee>

Description:

scrolls text from the right side of the screen to the left

Usage:

<marquee>Watch me move across the screen!</marquee>

<br>

Description:

the line break tag creates a new line

Usage:

<br/> <!-- or <br></br> -->

Example: Without the <br> tag, if you had the following code.

<b>Hello.</b><i>How are you?</i>

It would look like this.

Hello. How are you?

With the break tag.

<b>Hello.</b><br/><i>How are you?</i>

It would look like this

Hello.
How are you?


<hr>

Description:

creates a horizontal line

Usage:

<hr/>

<div>

Description:

the div tag divides or separates out content. you can think of using this to group things together.

Usage:

<div>
  <b>Name: John</b>
  <i>Favorite Color: Teal</i>
</div>
<div>
  <b>Name: Sally</b>
  <i>Favorite Color: Magenta</i>
</div>

<p>

Description:

paragraph tag

Usage:

<p>Marshmallow toffee muffin cotton candy chocolate bar jelly chocolate cake. Gummies carrot cake soufflé chupa chups sweet roll candy. Pudding liquorice ice cream. Fruitcake fruitcake gummi bears dragée pudding pastry ice cream oat cake ice cream. Wypas carrot cake sesame snaps. Cake toffee marzipan croissant candy canes marzipan wafer. Cake marzipan ice cream dessert brownie bonbon wypas. Jelly-o oat cake bear claw. Biscuit muffin cupcake cake jelly beans icing chocolate bar. Croissant soufflé gummi bears applicake donut ice cream halvah jelly-o. Fruitcake oat cake powder chocolate wypas cupcake. Sweet bear claw candy canes. Jujubes brownie applicake.</p>

<center>

Description:

centers text

Usage:

<center>Centers Something</center>

<img>

Description:

image tag, used to display images onto the webpage

Usage:


<a>

Description:

link tag, used to link other webpages

Usage:

<a href='http://google.com'>Click here to go to google!</a>

Styles

<span style='color:green'>Hi there!</span>

Description:

styles the text and makes the font color green


<span style='font-family:arial'>The sky is blue!</span>

Description:

styles the text and changes the font to Arial


<div style='background-color:yellow'>This text is highlighted!</span>

Description:

styles the text and changes the background color of the text to yellow


<img style='width:100px; height:120px' src='image.jpg'/>

Description:

displays an image, but resizes the image to a width of 100 pixels and a height of 120 pixels