☰
Navigation :

HTML!

🔖 Using This Page

Webpages and Computer Languages

When you go to Google’s website, you see this:

Google India home page

But what the computer sees is this:

Source code for Google India

This language, called HTML or Hypertext Markup Language, is the language of web pages. Taken together with two other languages, CSS or Cascading Style Sheets, and JavaScript, it helps to power the Web.

If we want to make our own web pages, we have write out our instructions about what we want using the language that the computer can understand–and that is what we will be learning about this week!

Building Blocks of HTML

Activity: Creating your first Page 💻

Sometimes it helps to just start building!

  1. On your computer, open the code playground and make an account:
  2. choose a simple name that no one else will use
  3. for «email», write your username + @example.com
  4. write down your account and password in your notebook right away
  5. after class, come write them down in our book so that we have them too.

Tip: You can always find the code playground by clicking the «Go Write Code» link on the top right of this web site

🔖 Terms and Tools: Code Playground
A code playground is a live environment where you can type out your code and see the results in real time. The code playground always watches the changes you are making and then reloads just the section of the page that shows the "finished" result.
  1. Click on this link. You will see the following code there:

<!DOCTYPE html>
<html>
    <head>
        <link href="/offline/unpkg.com/chota.css" rel="stylesheet" type="text/css" />
        <meta charset="utf-8">
        <title>Title</title>
    </head>

    <body>
        <header class="site-header nav">
            <h1>My favourite foods</h1>
        </header>

        <main>

            <p>I like to eat...</p>

        </main>

        <footer class="site-footer">

        </footer>

    </body>
</html>
  1. In your code playground, please tell us what you like to eat by typing where you see the «…». Pay attention to what happens when you make changes to the code

🎉🎊🎉 Congratulations, you just made your first web page! 🎉🎊🎉

Now, why does this work?

Tags and Elements

HTML has elements which are made with tags!

Tags show where elements start and end. All tags start with a < left angle bracket and end with a > right angle bracket.

For example in the HTML code above <!DOCTYPE>, <html>, and </html> are some of the tags we can see.

Activity: Locate the tags 💻

Try to find more tags tags in the HMTL code above with your fellow students.

Now that we can identify tags, let’s describe the code above to understand what we did there:

  1. Try to find the rest of the elements with your fellow students.

You can review some of the most important html tags here.

Activity: Tag Cubes

Now we’re going to take a break from the computer!

Activity: Changing the look of text 💻

If you have some special text, here are someways to make it stand out:

Your turn:

Activity: Making a list of holiday foods 💻

Now we will add some more information to your site. If we want to list a lot of items, or list a series of steps to take in order, we can use another element for those! A list!

  1. In the HTML tab of your code playground, paste or type the following in the body of your site under the h1 and p elements

    <ul>
<li>Holiday Name
  <ul>
    <li>Dish 1</li>
    <li>Dish 2</li>
  </ul>
</li>
<li>Holiday Name
  <ul>
    <li>Dish 1</li>
    <li>Dish 2</li>
  </ul>
</li>
<li>Holiday Name</li>
</ul>

  2. Can you fill it in with your favourite holidays and some of the food you like to eat? Here is a Canadian example:

    <ul>
<li>Canadian Thanksgiving
  <ul>
    <li>Pumpkin Pie</li>
    <li>Mashed Potatoes</li>
    <li>Tossed Salad</li>
    <li>...</li>
  </ul>
</li>
</ul>
    • Canadian Thanksgiving
      • Pumpkin Pie
      • Mashed Potatoes
      • Tossed Salad
      • …

You just made a nested list – there are lists inside your list!

There are different types of lists!

  1. Put your jacket on
  2. Put your shoes on
  3. Tie your shoelaces

For unordered lists we use the <ul></ul> tags and each list item starts with <li>. Ordered lists we use the <ol></ol> tags, and each list item still starts with <li>.

Your turn:

Parts of a Web Page

Like you, a web page has many parts: a <head> and a <body>, and all the pieces inside. When we make a web page, we usually start by buiding a skeleton. We make the shape of the web page out of empty elements, and we fill in the content of the page afterwards.

We use special tags to build the skeleton. They tell the computer what part of the page is inside them. In these lessons, we will use these tags to help «structure» the web page:

This picture shows how you might make a web page out of these «structural» tags

web page structured by semantic tags

🔖 Terms and Tools: "Semantic" Tags
We call these tags "semantic" because the name of the tag also defines the **function** of the content inside of the web page. "Semantic" is a compliated word, and you don't need to use it; but you might see other people use it when you are exploring the Internet.

Let’s do an activity to practice using these tags!

Activity: Classroom Tags 🏃🏾‍♀️

A web page has structure, just like a human body, or an automobile, or a house. It works best when the pieces of the structure are put together in the right order. Your classroom has a «structure» too. Let’s build a model of the classroom using tags! You can do ths however you want, but here are some ideas:

🎉🎊🎉 You finished the first class! 🎉🎊🎉

You now know about computers, programming languages and the Internet. You also have begun your journey into web development by taking your first steps into the realm of HTML.