Intro to HTML (Kid's Class at TIY)

Intro to HTMLKid’s Class with Coder Dojo

April 25, 2015

Let’s introduce ourselves!

Welcome to The Iron Yard!

Let’s start by introducing ourselves. Share your name and something about you.

What is HTML?

HTML stands for Hyper Text Markup Language. It’s the language that tells the computer how to display the content on the webpage.

HTML pairs well with CSS (Cascading Style Sheets).

HTML is a lot like making a sandwich!

● Most sandwiches contain two pieces of bread and your choice of meat.

● When writing HTML you need to use tags. The tags are like the bread because you need an opening tag and a closing tag.

● The meat is like the content that you want your browser to display.

For example:

<p> Hello, world! </p>

tag content tag

Don’t forget!

Make sure you use a forward slash “/” at the end of your tag. This lets the browser know you’re done.

<p>I love making websites!</p>

Brackets & Braces < > { }

Did you notice the “greater than” and “less than” signs?

These are called brackets and we use them in the tag. HTML uses brackets and CSS uses braces (the

curved brackets).

Let’s practice! First, you need to stand up and then follow me!

Where are the buttons?

Braces:CSS

Brackets:HTML

Let’s Create a Webpage!

Type in the following web address:

http://tinyurl.com/6fg4ey

This will allow you to practice writing HTML and see what it looks like in your browser at the same time.

Practice time: What should I try first?

● Add a paragraph first by using the paragraph tags. <p>content</p>

You can write about anything you like!● Next, add a list of your favorite things by using the

list tags. <li>Content</li>● Keep using the </li> tag for each item on your list.

Let’s add to our sandwich!

● Sometimes we need more than meat on our sandwich. We can add lettuce, tomatoes, etc.

● We can also add attributes to our tags which provides additional info for our HTML element.

Attributes? Values? What?

If you want to make the text larger or smaller, you can adjust the size by changing the pixels.

<font size=”5px”>Put your text here</font>

Attribute Value

Attributes? Values? What?

Let’s say you want to put a picture of a unicorn on your website.

You would use the following:<img src=“http://images.clipartpanda.com/unicorn-clipart-unicorn_pink_2.png”/>

Let’s Practice!

Try adding a picture to your website. First you will need to find a

picture and copy the image address.

Let’s Practice!

Now type the following:

<img src=”Insert your image address here”/>

The tag is self-closing so you just use a />

Let’s Review

● Why is HTML like a sandwich?

● Where do you put the forward slash?

● What tag do I use if I want to make a list?

● How can I insert a picture?

We covered a lot!

I hope you had lots of fun and learned some new things.

Now we are going to take a tour of the American Tobacco

Campus!

Created by:

Slideshow created by Marjorie Sample.

Twitter: @marjoriesample