Learn HTML with Minka and Bear! Part 1: Headings

What are we studying?

I write workbooks to help kids of all ages and skill sets to learn to create web pages using HTML and CSS with short, easy codes. My workbooks are a guide to build web pages online for free using Codepen and each lesson completion time is about the length of a class period or 30 minutes. 

Students may start and stop as they’d like, repeating the same basic formats and structure with lots of colors and visual aids like the orange computer background that signals you are coding on this page and each Chapter is built upon the last. 

We use the same basic 9 lines of code over and over again. You are able to skip around as much as you’d like, but for beginners, I suggest you progress from start to finish. 

Within the printed version of this workbook, the students view numbered lines and empty check boxes to track the line they’re completing. Students are also able to see the results and the explanation of code. The workbook asks students to repeat coding with different colors to better understand what they’re creating and to remember help remember the syntax. Just like a language, the more you read, write, and repeat the code, the better you are at creating and understanding it. 

This workbook is a tool to build, research, and explore the HTML and CSS found on its pages. This is not meant to be read, but to be used as an action guide or recipe book.

 In this workbook, we dive into why and how web pages display text, pictures, and other types of content. We experiment with the basic structure of a web page using HTML and CSS.

Each Chapter consists of five parts:

1. The code we are using to build the web page.

2. A screenshot of the web page piece we are building.

3. An explanation of the web page we are building.

4. Challenges.

5. Quiz to understand and repeat building the code.

The programming instructions follow a progression and we learn more and more tags as we move through the lessons.  The course begins by introducing the basic framework of an HTML file and building text. 

• These lessons are suitable for classroom teaching and self-study. 
• Our web pages are just for fun and learning and they are not published on the Internet. 
• Each web page we build may be saved in the Dashboard of your Codepen account. 

How are we studying?

We know there are many ways to study HTML and CSS - we focus upon the creating!

Think of this workbook as a recipe book. Anything with an orange computer is a project page. You may skip ahead to project pages and just experiment with code if you’d like, or you may read this workbook from start to end and move from chapter to chapter.

Learn recipes including:

• HTML structure
• Title
• Headings
• Paragraphs
• Lists
• Links
• Images
• Styles for these pieces

Why are We Creating Web Pages?

We build web pages to communicate with others! We don’t start with the technology or the coding or buying a website… we start with gathering our ideas and organizing them into what we’d like to share.

It’s never been so easy to communicate with others because of how easy it is to make a web page, a post on social media or send out an email or text message. All of these are created with coding languages and we are all trying to accomplish these goals:

• To share our knowledge with people all over the world through the Internet.
• To share our images and videos.
• To start a conversation about subjects that interest us.
• To find post problems and find solutions.
• To meet others with similar interests.
• To find sell and find items to buy.
• To help others.
• To make our lives richer by collecting and giving more information In other words… to communicate.

 What are we communicating?

Let’s make web pages about Minka, the Alaskan Malamute and ,Bear, the Bernese Mountain Dog puppy. Let’s share what we love about these animals with the world!

 What Makes a Web Page?

The web pages look and act a certain way because of the tags they are built with using HTML and CSS. HTML stands for Hyper Text Markup Language and CSS stands for Cascading Style Sheets. They are not necessarily entire coding languages like Python or Ruby, but they’re great to start learning with kids and very useful in web page design. They rely on a system of tags. 

The HTML is like the bones or structure of your body while the CSS is the style or the appearance. Each web page in this workbook contains the basic HTML structure, plus more and more tags as we learn along the way. Remember, the HTML tags tell your web page how to look, behave and how to display the information you're writing. 

What Code Do We Use?

You’re going to see this basic HTML structure again and again in this workbook because typing these lines of code, reading them, and understanding them helps you learn. Just like learning Spanish, HTML is a language and practice makes perfect! Below are the 9 lines we use over and over to learn to code with HTML in our workbook.

Where do we build web pages?

Because we are learning online and we aren't making a whole website, let's use a free, powerful tool that needs only an Internet connection and web browser named, Codepen.

To build our web pages, we go online to www.Codepen.io. Codepen is a free, online tool that we may use in any location that has Internet access. We may use any device to create on Codepen: like an iPad, a laptop, a desktop or a Chromebook. I suggest using Codepen on any device with a keyboard.

How to use Codepen

The web pages we build are examples and not alive on the Internet. To save our work on Codepen, let’s make accounts for each of us. This requires a username and password. For the username, please use your email address and create a password you won’t forget. Save each Pen or new Web Page to your Dashboard to review and study and inspire you.

Open www.codepen.io and Click Sign Up with Email and enter the your name, user name, email and choose a password. Use school id and email if possible.

You are not required to enter location, bio, links, or an avatar. If you’d like, it’s fun to Upload an avatar which may be a drawing you’ve created in a Paint editor.

You will receive a verification email.

Click on your avatar to see your Dashboard and then click New Pen. A new Pen is a blank, clean web page just waiting for you to build. Here is what a New Pen looks like.

All of our code goes into the HTML window on the left of the screen. Our readers see what's in the bottom portion of our Pen.

In the Pen below, the readers see Welcome to my Web Page All About Animals.

To save your Pen, click the Settings button at the top right hand of your screen, create a name in the Pen Title and click Save and Close. You may enter a Pen Description which is a sentence about the content and structure of your web page. I leave the Tags section empty.

All of these symbols may be a little strange at first, but this is a workbook of doing, practicing, and repetition. After you practice your coding, it becomes second nature to write with symbols and tags.

The angle brackets are < >. You may recognize them from Math class. They are greater than < and less than > symbols. The forward slash / is used in the end of the tag. 

What does this HTML code mean?

1. <!DOCTYPE html> defines the document type. The <!DOCTYPE html> tag has no ending tag.

2. <html> <html> defines and HTML document. The ending tag is </html>. Everything is nested inside of the <html> </html> tags, except the <!DOCTYPE html> tag. Write HTML in lowercase.

3. <head> </head> defines information about the document. The ending tag is </head>. There are other elements that can be nested in the <head> </head> tags like metadata, keywords, and author information.

4. <title> </title> defines a title for the document. The ending tag is </title>. Anything you type in the content in between these two tags shows up in the tab on the browser.

5. <body> </body> Everything within the body tag is seen by our users. The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. We are adding these elements in this book: text, hyperlinks, images, and lists.

6. The heading1 or <h1> </h1> tags are found within the <body> and are used to define HTML headings. <h1> defines the most important heading.

Our First Web Page with Heading 1

We are creating our first web page with the basic HTML format and one piece of information, a heading. The heading is just like a heading of an article or book report.

The tag for this heading is <h1> Type my Heading 1 here </h1>

The tag is <h1> and it’s a great place to start learning about HTML, because the <h1> tag is the most useful piece of information on our web page. If you just write the code <h1> Welcome to My Web Page about Dogs and Cats </h1> this code is automatically placed on the top left of the screen in a large font size.

The words in your <h1> are used in the search tool, Google, to find and retrieve your web page when someone types in keywords. For instance, if a person goes to www.Google.com and types in "dogs", Google will search through millions of web pages and their content like their <h1> looking for the word "dogs". The <h1> is an important piece of information to let Google know what your web page is all about and helps to get your web page viewed.

There are headings in different sizes: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Again, the most important heading is <h1> and the least important is <h6>. 

Your readers skim your web pages by its headings, so it's important to carefully construct your <h1> and find the correct order of what you'd like to say.

*Print-out Explaining Headings:

Let's make our first web page and remember, anything in the orange computer is a recipe for a web page or a pen.

Code:

Result:

Save your Pen.

Click New Pen and make 5 more web pages with these challenge codes, then build your own <h1> headings about anything you'd like! Remember, <h1> is a very important piece of information within your web page!

Heading Challenge 1 Code

Change your <h1> to Pets are Amazing and this Web Page Examines How Pets Get Us Outdoors </h1>

More Heading Challenges:

Change your <h1> to:

<h1>Welcome to My Web Page Selling Pets Toys for Dogs </h1>

<h1> My Web Page Contains My Favorite Stuff for Pet Dogs! </h1>

<h1> Welcome to My Web Page About Gifts for Pets </h1>

<h1> Everything You've Ever Wanted to Know about Owning a Dog! </h1>

Save your work.

Each challenge is to be saved in your Dashboard to see later for ideas or learning or improving. Codepen is an excellent resource to see your work stored safely for years, plus see other people's work and get great ideas with reviewing their codes. Codepen is used by both students and professionals and it's an amazing tool for learning about HTML, CSS and JavaScript. We won't dabble in JavaScript for a while.

Quiz 1. Circle the one, correct description for each word.

Quiz 2. Circle True or False.

Quiz 3. What's Missing?

Quiz 4. What <h1> would you write for the following web pages?

Well done! You are ready for Part 2, learning about <h2> through <h6> and paragraphs!

To see me review this lesson online, go to this YouTube address.

https://www.youtube.com/watch?v=qg-2sCg7SnU

For more free lessons online go to my website at www.EasyCodesforKids.com.