Citizens School Spring 2012: Girl Coders Apprenticeship [Keynotes + Supporting Documents]
View the Project on GitHub rickyc/citizens-school-spring-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
Description:
tag that tells the computer that this is an html file, minimal required tag to create a webpage
Usage:
<html>Hello!</html>
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>
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>
Description:
bolds the text
Usage:
<b>Bold!</b>
Description:
italicizes the text
Usage:
<i>Italics!</i>
Description:
underlines the text
Usage:
<u>Underline!</u>
Description:
scrolls text from the right side of the screen to the left
Usage:
<marquee>Watch me move across the screen!</marquee>
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?
Description:
creates a horizontal line
Usage:
<hr/>
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>
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>
Description:
centers text
Usage:
<center>Centers Something</center>
Description:
image tag, used to display images onto the webpage
Usage:
<img src='http://citizenschools.wpengine.netdna-cdn.com/wp-content/themes/citizenschools/images/citizen-schools-logo.gif'/>
Description:
link tag, used to link other webpages
Usage:
<a href='http://google.com'>Click here to go to google!</a>
Description:
styles the text and makes the font color green
Description:
styles the text and changes the font to Arial
Description:
styles the text and changes the background color of the text to yellow
Description:
displays an image, but resizes the image to a width of 100 pixels and a height of 120 pixels