Tech Tuesday – Lesson 1 – Learn HTML!

This lesson is designed for youth, but really anybody can do it. It focuses on the basics, giving the essential information and no more.

Here is what the lesson covers:


1. Why learn HTML?

graphic from Wikipedia

All websites are created using various forms of coding languages, along with other content (pictures, video, audio, etc.), but the most basic language is HTML.

Using HTML, a person can easily build a basic website, but coupled with other languages and techniques (such as CSS, javascript, etc.) pretty much anything is possible. But to start, we first need to learn HTML.

The good news it that it is very easy to learn, so easy that you will be able to create you very first website from scratch by the end of this lesson.


2. What tools do I need to be able to write HTML code?

 

To write HTML, all you need is a simple notepad program (such as “notepad” — for windows, you can find this by clicking on the windows button on the lower lefthand side of the screen, then searching for “notepad”). Later on we can use more advanced tools, but let’s keep it super simple for now.

You will also need a web browser (such Chrome, Firefox, Edge, Safari, etc.) to test your code, but this should already be on your computer.

This is all you need to get started.


 

3. What does HTML code look like?

Here is an example of the code inside of a very basic html file:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>My First website</title>
   </head>
   <body>
       <h1>My First Website</h1>
       <p>Welcome to this webpage. I've created it to 
       demonstrate how to use <strong>HTML</strong>, also called hypertext 
       markup language.</p>

       <p>To learn more about HTML <a href="https://en.wikipedia.org/wiki/HTML">Click to visit this Wikipedia 
       article.</a></p>

       <p>Goodbye!</p>
   </body>
</html>

So, let’s see what this code will generate by doing exercise #1:

Exercise #1

(I’m assuming you will be using a windows computer for this exercise)

Step 1. Using your mouse, highlight all of the html text above and then copy the text (control-C).

Step 2. Open your notepad program and then paste (control-V) the code into a blank document.

Step 3. In your notepad program, type Control-S to save the file. You will need to remember where you saved the file, so I would suggest just saving it to the desktop. For your filename, you can use any short word you want, such as basic or home, then add a .htm ending at the  end (instead of .txt, which is the default setting in notepad).

Step 4. Now you can minimize or close your notepad program, and then go to the desktop in windows and look for your file. Once you have found it, double-click to open it. If all goes well, your browser should open your new html file!

 


4. What is a tag in HTML?

Let’s go back and look at the sample html code we used a moment ago.

In looking at the code, you’ll notice that part of it is simply the text you want to have displayed on the screen, but there also special code that have the symbols < > around them. Each part of the code that is surrounded by these symbols is a tag.

Most tags (there are a few exceptions we will talk about shortly)  have two parts — the opening tag and the closing tag, with the only difference between the two being that there is a / symbol used in the closing tag.

The opening tag tells the browser to start displaying everything that comes after this with a desired attribute and the closing tag tells the browser to stop. Let’s look at one portion of the sample code to see how this works:

<p>Welcome to this webpage. I've created 
this to demonstrate how to use <strong>HTML</strong>,
 also called hypertext markup  language.</p>

We have two different tags used here, the <p> tag (which is used to create a paragraph) and the <strong> tag (which is used to create bold text). We can see how each of these tags begins (with the opening tag) and the closing tag (which has the / symbol included).

Another thing to notice is that in this example we have a nested tag, meaning that inside of the paragraph, we have a portion of the text that is bold. In HTML, you can nest as many tags as you want, but you always want to close the nested tags before the close of its parent tags.

So instead of using code like this:

 

<p>Testing testing <strong>1, 2, 3</p></strong>

in which the <strong> tag is not closed with in its parent tag (<p>), you instead would want to have code that looks like this:

 

<p>Testing testing <strong>1, 2, 3</strong></p>

 


5. Spaces in HTML and why it helps to use it well

One of my favorite things about HTML is that spaces do not matter, which means we can add extra spaces to make it easier to read.

For example, lets look at two examples of HTML code.

 

HTML Code that is not spaced well

<!DOCTYPE html><html><head><meta charset="utf-8"><title>My First website</title></head><body><h1>My First Website</h1><p>Welcome to this webpage. I've created it to demonstrate how to use <strong>HTML</strong>, also called hypertext markup language.</p><p>To learn more about HTML <a href="https://en.wikipedia.org/wiki/HTML">Click to visit this Wikipedia article.</a></p><p>Goodbye!</p></body></html>

This code is perfectly readable by the computer’s internet browser but it is hard for a human to read.

HTML Code that is spaced well

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>My First website</title>
 </head>
 <body>
   <h1>My First Website</h1>
   <p>Welcome to this webpage. I've created it to 
    demonstrate how to use <strong>HTML</strong>, also called hypertext 
    markup language.</p>

   <p>To learn more about HTML <a href="https://en.wikipedia.org/wiki/HTML">
    Click to visit this Wikipedia 
    article.</a></p>

    <p>Goodbye!</p>
   </body>
</html>

This is the same code that is on the left-hand side of the screen and when loaded in a browser will look exactly the same as the other code, but it is much easier for a human being to read, which will make it easier to work if you want to make changes in the future.


6. What is the basic structure of an HTML document?

At its most basic form, an HTML document has two parts: a head and body.

The head consists of everything inside of the <head></head> tag and includes information needed by the web browser to properly display the page.

The body consists of everything inside of the <body></body> tag and includes all of the content of the page that will be displayed by the browser.

Both the head and body tags are enclosed with a <html></html> tag.


7. A few easy tags to start off with

Now it is time to start experimenting with different tags!

Here is a list of a few basic tags to get started with (all of the tags used in our sample code, as well as a few more, but there are many more to work with:

Tags for formatting text

 

Opening Tag Closing Tag Description
<p> </p> Creates a new pagraph
<strong> </strong> Makes text BOLD
<em> </em> Makes text ITALICS
 <br> None. This is one of the few tags that doesn’t need a closing tag. It is used like the enter button on a key board to create a break in the text.
 <h1>  </h1> This text creates the top level of header text, normally used for a headline, etc.
 <h2>  </h2>  The text creates the second level of header text.
 <h3>  </h3>  The text creates the third level of header text. (FYI, you can go with as many 6 levels of headings, but it is rare to ever need more than 3).
 <div style=”color:red;”>  </div>
This will turn your text red. (Later on we will talk about how we can use style elements to add to other tags).
 <div style=”color:red;”>  </div>
This will turn your text blue.
 <div style=”font-family:helvetica, arial,sans-serif;”>  </div>
This tag will tell the browser that kind of font to use to display text, but since not everyone has the same fonts on their computer, we are specifying three different options, all that are san-serif (without the little feet).
 <div style=”font-family:Times New Roman, serif;”>  </div>
This tag will tell the browser to use either Times New Roman or another serif font to display the text.
 <div style=”font-family:Comic Sans MS;”>  </div>
This tag will tell the browser to use the Comic Sans MS font to display the text.
 <ul>  </ul> This tag is called “unordered list” and allow you to make a list of items with bullet points. An example of how to use this code will be given below under the <li> tag.
 <ol>  </ol>  This tag is called “ordered list” and allow you to make a numbered list of items. An example of how to use this code will be given below under the <li> tag.
 <li>  </li>  This tag is used for each list element in an html list. If the <li> tag is used inside of a <ul> tag, each item will get a bullet point, but if it is used inside of an <ol> tag it will be numbered.

For example this code:

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>

</ul>

will look like this in your browser:

  • Apples
  • Bananas
  • Oranges

But if the <ol>tag is used instead of the <ul>tag, it will look like this in your browser:

  1. Apples
  2. Bananas
  3. Oranges

Another cool feature is that lists can be nested inside of each other, like this:

<ul>
<li>Apples</li>
     <ul>
     <li>Granny Smith</li>
     <li>Fuji</li>
     </ul>
<li>Bananas</li>
<li>Oranges</li>
</ul>

which would look like this in your browser:

  • Apples
    • Granny Smith
    • Fuji
  • Bananas
  • Oranges

Tags for creating links, pictures, etc.

<a href=”URLGOESHERE”>TEXT OF THE LINK GOES HERE </a> This text creates a link, but is a bit on the tricky side, which makes it easier to demonstrate than explain.

If I used the following code:

<a href="http://www.google.com">Google</a> is a search engine.

I would get the following result in my browser:

Google is a search engine.

We will discuss tag in more detail later, but this is enough to get us started.

<img src=”URLFORGRAPHICGOES HERE”> </img> This tag places an image on your page.

Tags needed to create the basic structure of the page

 <html>  </html>  This code is used to tell the browser that it is reading an html file, and not another format (such as a text file, PDF, etc.
 <head>  </head>  This tag is used to create the header (discussed in the previous section)
 <title>  </title> This tag is always in the header, and tell the browser that the title of the page is.
 <meta charset=”utf-8″>  none  This tag isn’t necessary but is best to include in the header to insure that all of your chosen letters, symbols, etc, will be displayed.

 


8. Let’s create our first webpage

You now know everything you need to create a very basic website, so let’s do it!

Exercise #2

(I’m assuming you will be using a windows computer for this exercise)

  • Step 1. Create some content: A good webpage needs some content, so you have a couple of options here:
    1. Write something — a poem, a story, etc. (don’t worry, this won’t be going on the internet, unless of course you want to do that), and then create or find a picture or two that you can use as illustrations. You can do your writing in notepad, word, etc, it doesn’t really matter, as we’ll be cutting and pasting the text into the html document.
    2. Make a personal “homepage” — In the old days of the internet, many people created a personal homepage with links to their favorite websites so they could easily be accessed. Most folks don’t do this anymore but I think it is still useful and makes for a good exercise. To do this, you just need to copy and past the URL’s (internet addresses) of the websites you want to share.
  • Step 2. Open up your template: This part is easy. Using notepad, you need to open the html file you created earlier as part of exercise #1 (and if you skipped ahead and haven’t done exercise #1 yet, please go back and do it)
  • Step 3. Start changing the template to work with your content, using the tags you learned about above. There isn’t one right way to do this, but I’ll give some suggestions on how you might want to approach this based on the content options discussed above:
    1. If your content is mostly text (such as a story, a poem, etc.):
      1. You can start by changing the parts of the template that need to be changed (such as putting new text in the title, and the <h1> tag).
      2. Next, go down to the body section and take out the <p> tags and all of the text that is inside of those tags.
      3. After that you can copy and paste your content into the html document, putting in place of where the <p> tags were previously at.
      4. You then will likely want to break the text into more paragraphs and then make formatting changes (i.e. putting some text in bold, italics, different colors, etc.) and of course adding a picture of link can be fun.
      5. Save the file! If you want, use a different file name, but make sure it has .htm as the ending.
    2. If your content is a list: You can start by changing the parts of the template that need to be changed (such as putting new text in the title, and the <h1> tag). After that, I would delete
      1. You can start by changing the parts of the template that need to be changed (such as putting new text in the title, and the <h1> tag).
      2. Next, go down to the body section and take out the <p> tags and all of the text that is inside of those tags.
      3. Now, you can get to the fun part. You will start typing in the spot in your file where the <p> tags previously were at, starting with either a <ol> (ordered list) tag or a <ul> (unordered list tag), and then putting in <li> tags to start each item on your list.
      4. Next you will need to start putting your content inside of the <li> tags, which probably will include links, text, etc.
      5. You also may want to add other content, maybe a paragraph explaining what the list is. You can do this with the <p> tag.
      6. Save the file! If you want, use a different file name, but make sure it has .htm as the ending.
  • Step 4. Time to beta-test. Open your file in a browser and see how it looks. Does it look like you were wanting or did you get some unexpected results?
  • Step 5. Editing and more testing Most web designers have to go back and forth multiple times to get everything just like they want it, so don’t worry if you need to do this. If you end up with a page with unexpected results, it is always smart to go back through your code and check from tags that might be left unclosed or other issues.
  • Congratulations! You just created your first webpage!

 

Spread the love