HTML is a very simple language used to make websites and apps. We'll learn it by creating our own simple website here. In html, everything that you might see on a website -- like a button, an image, or anything else -- has a specific element that makes it. An element is kind of like a word in html that you can type to tell the computer to create something. Try this. To create a button in HTML, you write this: <button>Click Me </button> Type the code to make a button in the box on the right that says 'type your code here'. If you did it right you should see a button show up on your website.

<button>Click Me </button> is the html element that means 'button'. An html element always consists of an opening tag, which is the name of the element between arrows, and a closing tag, which is the same thing but with a slash in front of the name. Between the tags, you put the text you want to be inside the element. Try writing code to create multiple elements, like this: <button>Button 1 </button> <button>Button 2 </button>

HTML is simple! This is always the format: <button>Button 1 </button> You always put the name of the element between two arrows to make the opening tag, and then the closing tag is that but with a / in front of the name. You just need to know the name of an element to make it, now that you know the format! To create an input, for example, you use an input element, not surprisingly, like this: <input> </input> And to create a paragraph you write this (p stands for paragraph): <p>This is a paragraph </p> Try creating a paragraph and an input on your website. By the way notice that once you create things, you can drag them around inside your website to position them!

That's it! That's most of what you need to know about html. Now that you know the format, try creating an h1 element, which makes a headline. Add that to your website to show you're getting it. Now play around with your new skill a little bit by creating a simple website that uses 3 paragraphs, 2 buttons, and 1 headline. Read the next section when your first website is done.

Nice! The kids are mostly going to use five tags: button, input, h1, p, and image, so this is most of what you need to know.

The only other thing you need to know is how to make the elements of your website look the way you want: for example, what if you wanted a red button? Or another font? In HTML, you add a style to an element to make it look a certain way like this: <button style = "background-color:red" >Click Me</button> It's simpler than it looks! Basically, you just add the word style, then an equals sign, then quotes inside your opening tag. (It needs to be in the opening tag, it cant be in between the two tags because that's where the text goes.) Try adding a style to one of the buttons on your website; put your cursor between the n in button, and the arrow that closes the opening tag (it MUST be before the arrow). Then type this: style = "" Go to the next section

Once you've added a style to an element, to change it, just type the name of a thing you want to change about it in between the quotes (there's a limited list of attributes you can change). After the name, write a semi-colon, then the value you want to give that attribute. For example, to change the color of your button write style = "background-color:red" (or any other color you want). Try adding that to your button now. If it work, try chaging the background color of one of your other elements (remember you just need to add style = "" inside the opening tag of the element)

Here are examples of other styles you can apply to your html elements! style = "font-size:32px" The above changes the font size. First, try adding this to one of your paragraphs or headlines in your website. (the value has to be a number with px, for pixels, next to it.) style = "color:blue" The above changes the font color. Try adding this to one of your buttons. style = "border-radius:42px" The above changes how round something is. Add this to one of your buttons. Try mixing and matching some of these styles on your elements.

To apply multiple styles, you just separate the styles with a semicolon. For example, this style would make something have red text, size 20, with a yellow background: style = "color:red; font-size:20px; background-color:yellow" Try adding this style to one of your buttons. Then, practice by adding another style to something you already styled. Let's say you made one of your headlines blue like this: <h1 style = "color:blue">Im a headline</h1> To add a font-size style to this, you just need to add a semicolon after the last style you applied (but still inside the quotes), then add the new style, like this: <h1 style = "color:blue; font-size:14px" > Im a headline</h1> Now, try playing around with your new ability to add styles. Writing code in the box, create a website about yourself, with one of these 3 topics: your hometown, your pet, or your favorite hobby. Use 2 p tags, an h1 tag, a button, and an input. (Our students basically need to do this activity for their first lesson.) Then do the next section.

Image is the last major type of element that kids use in the course. Try adding an image to your website, like this: <image></image> You might notice nothing happens! To make the image work, you need to link to the image you want to show. To do that add src = "" the same way you added style = "", like this: <image src = "" ></image> Watch this video to see how to link the image: After you watch the video, try playing around with images by adding some to your website about yourself: https://vimeo.com/545355826 As your final assignment, spend ten minutes making the website as good looking as you can.