No tags yet.
HTML 102 – Let’s make some changes
Now that you’ve completed your first webpage with our exercise from HTML 101, what have you noticed? Does it seem like no matter what you add in between <body> and </body> just goes on and on, and it is difficult to read because you have to keep scrolling to the right to read what you have typed?
This is because in order for your browser to understand you want to start a new line or a new paragraph, or to make the title of your story bigger, you need to add HTML tags to give the browser the instruction to make the change.
HTML Headings
To make changes to how big your headings, or titles, or any type of headers show up in different sizes, you can use the heading tags - <h1>, <h2>, <h3>,<h4>, <h5>, and <h6>. <h1> appears in the largest font, for the most important heading. <h6> is smallest of the headings, and usually for the least important heading. Always remember to close your heading tags with corresponding </h1>, </h2>, </h3>,</h4>, </h5>, and </h6>.
They look like this:
HTML Paragraphs
Once you have figured out how you want to present your title, or header, you will want to start typing your content, which is typically in a paragraph format. To let the browser know you have a paragraph, use <p> and </p> tag to group your paragraphs.
If you want to make a new line within your paragraph, you can use the <br> tag. This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines. Check out the difference <br> makes to the same paragraph:
Now you've learned these new tags, let's put it all together and see the difference it makes to your webpage.
Step 1: Open up your Notepad (in Windows) or TextEditor (in Mac) and copy the following text in. Feel free to change up the content as you want!
<!DOCTYPE html> <html> <head> <title>Animal Crackers</title> <h3>My Favorite Snack</h3> <h1>Who Loves Animal Crackers?!</h1> <h5>By Molly</h5> </head> <body> <p>My favorite snack for school recess is animal crackers. They are crunchy and yummy!</p> <p>I love sharing different animal cracker shapes with my friends. There are different animal cracker shapes – <br>bear<br>sheep<br> camel<br>cat<br>cow<br>donkey<br>elephant<br> goat<br>hippo<br>horse<br>lion<br>rhino, and<br>tiger!
<p>My favorite is the camel. I like eating the hump first before finishing the cracker! </body> </html>
Step 2: Save your document to a location where you can find it again later, and close the file. Remember to save as a HTML file (by adding the extension .html)!
Step3: Open up your file again. It should look something like this when you go back to click on your file again:
Source credit: