Say Yes To CS

Learn HTML Interactive

In the space below, you can play around with various HTML <tags>. In HTML, you must always <open> and </close> tags. Some of the tags you may explore:

<h1>, <h2>, <h3>: headers of sizes 1 (largest) through 3 (smallest)
<p>: paragraph (can be 1+ lines)
<b>,<i>, <sup>, <sub>: bold, italics, ^superscript, and _subscript
href: link a website
<img>: add an image
<ul>: an unordered list
<ol>: an ordered list

Buttons

Script

<!DOCTYPE html>

<html>

<body>

<h1> This Is A Header (size 1) </h1>

<h2> This Is A Header (size 2) </h2>

<h3> This Is A Header (size 3) </h3>

<p> This is a paragraph. </p>

<p><i>This text is italic.</i></p>

<p>This text is <sup>superscript.<sup></p>

<p>This text is <sub>subscript.<sub></p>

<ol>

<li>This is an ordered list.<li>

<li>You can list items using numbers.<li>

<li>It's great for keeping track of how many items are in a list!<li>

<ol>

</body>

</html>

Output

This Is A Header (size 1)

This Is A Header (size 2)

This Is A Header (size 3)

This is a paragraph.

This text is bold.

This text is italic.

This text is ^superscript.

This text is _subscript.

This is a link

This is an ordered list.
You can list items using numbers.
It's great for keeping track of how many items are in a list!

Learn HTML Tutorial

1. To start refer to the setup to learn how to save the file correctly.
2. First, you need to define what kind of document you are working with. We do this using <!DOCTYPE html> and <html>
start
3. HTML pages are like humans. They have heads, bodies, and footers. The head primarily holds the title of your website and other important links.For the head, add <head>. Inside the head, we can add the title. For the title, use <title>My First Website </title> We use "</> " because HTML tag (the brackets) are used in pairs. For every start tag, there is an end tag. The end tag is like the start tag but with a forward slash. Heres what the code looks like:
head
head
4. Now, lets close the head using </head> the body comes after the head. the body will hold most of your code. Let's try adding a header to the body! A header is exactly what it sounds like. There are multiple different sizes of headers, but for now we will just use the first one.
5. Like most HTML attributes, the header uses HTML tags. Add <h1> and the header you choose, and the closing tags: </h1>
body
body
6. Inside the header, we can ake multiple paragraphs using the "p" tag. Start with <p> and put text inside. Inside the first brackets, you can change the text alignment using <p style='text-align:(desired alignment)'> This allows you to align text quickly and easily. To bold or italicize text use <b>, </b> and <i>, </i> respectively.
paragraph

7. Now let's add images! You do this by using the <img> tag. The image tag is an empty element and requires only one attribute to work (and no closing tag!). Normally, src (source) is used to link the images.Use <img src="link.jpg"> to get the image! If your image is in another file, you can still get it to work! the only thing that changes is <img src="file name/file link.jpg"> Here is the sample code and what it looks like on the website!

8. This example used the align, width, and length attributes to format the picture. These attributes are similar to the way src is set up. You will learn later that this 'styling' is apart of another language, CSS. This example also showed the use of <br> to create an extra space between the picture and the text.
9. In addition to images, you can link other websites to your page. You do this by using the <a> / </a> tags. Use <a href=""> and add your link inside the quotation marks.Put a message inbetween the start/end tags and finish by adding </a>. This will connect the link of your choice to your webpage! Click here for a fun suprise!
link
link
10. Links are also used in creating buttons. Buttons allow you to have multiple pages linked to your main website page. First, you have to create a new document in Atom (this is explained in the so that when you click the button, it takes you to a new page. Then, link the page using <a href=""> / </a>. Inside the <a href="">, you need to define the button tag so the computer recognizes it as a button. It should look something like this:
buttonexample
After you've done that, you have a button! Here is the example on the "main" page and the page the button takes you to:
button
button
button
11. Lastly, there is the <div> tag. Div divides your page and puts it into contained sections. You can use div to apply CSS to many elements at once. You can "id" each div to make it easier to understand and apply CSS to.
12. Now you have finished the basic HTML tutorial! Now, you have to using closing tags to close the body and the general html. To make your website more personal, go to our CSS tutorial to learn how to change font size, color, and put divs into practice. Happy coding!