Chapter 9: HTML Basics
By: Tiffani Tijerina
Objectives
Upon completion of this chapter, readers will be able to:
- Define HTML and identify what it stands for.
- Build a simple web page using HTML coding.
- Identify and use common HTML tags.
- Explain and apply basic tag rules.
- Explain attributes and use them to stylize text and images.
- Embed videos and other embeddable items into HTML web pages.
- Identify websites where readers can learn more and practice their HTML skills.
Introduction
There is a high probability that the readers of this chapter have at least heard the acronym HTML, although many may only know its most basic meaning: HTML is a code that makes web pages. You are not wrong, but there is a bit more to it. For example, did you know that HTML is actually a language with rules, just as English is? Or, perhaps, did you know that HTML actually stands for something, and is not just an all-caps name? Let's start from the beginning.
HTML stands for HyperText Markup Language. HTML is a coded computer language that, when read by a web browser, displays the web pages you see every day when exploring the Internet.
Don't believe me? See for yourself: In Mozilla Firefox, right-click on a web page and click "Inspect Element." The code of the page you are looking at should appear at the bottom of the page. This code is what Firefox reads to show you the page you are seeing in your browser. Pretty cool, huh?
Right-Click on a PC
CTRL+Click on a Mac
HTML is the baseline coding of every web page you see out there, and when combined with CSS, Javascript, and other languages, it can create cleanly-constructed and functional websites.
CSS - Cascading Style Sheet. This language is an advanced styling language that can be written into the HTML document or linked to from a separate CSS document.
Javascript - High complexity programming language that makes the more complicated things you see on some websites, like games.
Tag Rules
HTML is a language, and it, as all languages do, has rules that make it make sense to the web browser. Just as the English language doesn't make sense when you break grammar rules, neither does HTML when you break tag rules. The difference is, most English speakers will still understand what you are trying to say when you break a grammar rule; the web browser will not understand when you break a tag rule. So let's look at some of these rules.
When you look at a line of HTML, you'll see information enclosed in brackets < > throughout the code. This denotes a tag. A tag is what tells web browsers what each item on the page is; it tells the web browser how to classify that information. For example, a paragraph would be classified by a <p> tag.
Rule #1
Most tags have an opening tag and a closing tag that surround the information it is classifying or effecting. An opening tag is just the brackets with the tag enclosed, like so: <p>. A closing tag is the same thing, except there is a forward slash at the front of the tag, like so: </p>. When tagging a paragraph with the <p> tag, it would look like the example.
<p>This is a paragraph about how to properly tag a paragraph. To tag a paragraph, you have to start with an opening paragraph tag, type the paragraph, and then end with a closing paragraph tag. This is how most sections of simple paragraph text are tagged.</p>
Rule #2
Rule #1 does not always apply. Not all tags have to have a closing tag, and you just have to remember those. We will learn about some basic tags in the next section, where we talk about a few that do not require a closing tag.
Rule #3
Opening and closing tags must be nested to work. That is, the last tag you open should be the first tag you close, as shown in the example.
<body>
<p>This is a paragraph in the body of the webpage. As you see, I opened the body tag first, and then the paragraph tag; if I am nesting the tags, then I have to close the paragraph tag first, and then close the body tag.</p>
</body>
Basic Tags
There are tons of tags, and it's almost impossible to memorize them all. Luckily, we have the Internet, which means we don't have to memorize them. In this section, you'll learn about some of the basic tags that are needed in almost every web page.
Beginning Tags and the <head>
Every HTML web page starts with a <!doctype html> tag, with no closing tag. This is what tells the web browser what version of HTML the page is written in. The <!doctype> tag used to have several options in the last version of HTML, but in HTML5, there is only one: <!doctype html>.
After the <!doctype html> tag, there is an <html> tag, which is also required for every HTML document. Unlike the <!doctype html> tag, the <html> tag does require a closing tag of </html>. For nesting purposes, the closing </html> tag will always be the very last thing in your document.
Once the <html> tag has been opened, the page then has its head information in the <head> tag, which also has a closing tag of </head>. The <head> tag includes information that does not show up on the page, but is vital to the look and feel of the page. There is always a <title> tag with a closing </title> tag that encloses the information on the tab of the web browser. Users who are including CSS information in their document might also include CSS coding in the <head> tag.
Figure 9: A browser tab with title information
The <body> Tag and Other Common Tags
After the <head> tag has been closed, the next tag to open is the <body> tag. This denotes the information that you actually see on the page when looking at a web browser. Everything you see within the browser window appears after the <body> tag and before the closing </body> tag.
For common tags used within the <body> tag and their purpose, see Table 1. Unless otherwise noted, all tags in the table below require a closing tag.
Table 1: Common HTML Tags
| Tag | Function |
|---|---|
| <em> | Defines emphasized text. Text enclosed in an <em> tag will appear italicized. |
| <strong> | Defines important text. Text enclosed in a <strong> tag will appear boldface. |
| <img> | Defines an image. This tag requires an attribute that defines what image it shows. This attribute is called src. The <img> tag does not require a closing tag, however it does end differently. Instead of the usual closing tag, an <img> tag is closed by ending the opening tag with a space and then />. For example: <img src="logo.jpg" /> |
| <a> | Defines a link. This tag requires an attribute that defines where the link goes to. This attribute is called href. |
| <ul> | Defines an unordered list. This will start a bulleted list. |
| <ol> | Defines an ordered list. This will start a numbered list. |
| <li> | Defines a line in a list. This tag applies to both unordered and ordered lists. When you start a list, you must use <li> tags to open and close each line separately. See Figure 4 for an example of how a list looks in HTML. |
| <table> | Defines a table. This will start a table. |
| <tr> | Defines a table row. This will start a row in a table. You must have a <tr> tag for each row of a table. |
| <td> | Defines a table column. This will start a column in a row of a table. You must have a new <td> tag for each column of each row (each square) of the table. See Figure 5 for an example of how a table looks in HTML. |
| <br> | Defines a line break. This tag does not require a closing tag. |
| <h1> - <h6> | Defines headings. There are six HTML heading levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. They each define headings of their specified order (<h1> being the first order heading and <h6> the sixth order). |
| <p> | Defines a paragraph. This is how most sections of text are tagged. |
Table 2: Ordered and Unordered Lists Preview
| HTML | Preview |
|---|---|
<ul> |
|
<ol> |
|
Table 3: Table Preview
| HTML | Preview | ||||||
|---|---|---|---|---|---|---|---|
<table> |
|
Basic Attributes
HTML attributes provide more information for tags or apply stylistic features to them that are not the default. For example, an <a> tag requires more information to know where it should link to, and a <p> tag can have a different font color than the default if you want it to. Let's take a look at some common attributes and what they do in Table 2 below.
Table 3: Common HTML Attributes
| Attribute | What it Does | What it Looks Like in HTML |
|---|---|---|
| href | The href attribute belongs to the <a> tag and defines where the link will go to. | <a href=""http://distanceed.hss.kennesaw.edu/technicalcommunication">This is a link to the textbook website.</a> |
| src | The src attribute belongs to the <img> tag and defines where the tag will pull the image from. This can be an image site or a file path from within the server. | <img src="logo.jpg" /> |
| width | The width attribute can be applied to images, iframe elements, tables, or other elements with a numerical width. It defines how wide the item will be. | <img src="logo.jpg" width="300px" /> |
| height | The height attribute can be applied to images, iframe elements, tables, or other elements with a numerical height. It defines how tall the item will be. | <img src="logo.jpg" width="300px" height="300px" /> |
| style | The style attribute allows you to add inline CSS elements to your tag. A few common ones are color, font-size, font-family, and text-align. You define a style element the same way as other attributes, however you then have to define the value of the style element. View the examples to the right to see how these style elements are defined. | <p style="color:blue;"> This is blue text.</p> <h1 style="font-size:24px;">This is a 24pt font heading.</h1> <a href="http://distanceed.hss.kennesaw.edu/technicalcommunication" style="font-family:Arial; font-size:12px;">This link to the textbook website is Arial 12 pt font.</a> <h2 style="text-align:center;">This heading is centered on the page.</h2> |
Embeddable Items
YouTube is the most popular video repository in America, if not the world. What if you want those videos on your web page? Perhaps you posted a video of a project you've been working on, and you want to show that video on your online portfolio. The answer is simple: embed codes. Most sites with hard-to-code items have an embeddable feature to them, and it essentially puts the information in a frame of one website into a frame on your own website. You can usually find the embed codes in the share functions of items. The nice (and easy!) thing about embed codes is that they don't require you to add anything to them. You simply paste the code into your HTML page, and in that spot you will see the video or other item when you preview it. However, you can edit them. Let's analyze a YouTube embed code in Figure 6 below.
<iframe width="420" height="315" src="https://www.youtube.com/embed/zx_M-sWrDfc" frameborder="0" allowfullscreen></iframe>
iframe - Most embed codes use the iframe tag now, but not all of them. It depends on the website and what kind of code was used in creating the item.
height="315" - You can edit the width and height of embed codes, or add them in if it is not already in the code. This is good if the default size is not quite big or small enough for what you want to use it for. Just change the number in the quotations to change it.
src="https://www.youtube.com/embed/zx_M-sWrDfc" - The source of embed codes are usually some variation of the link to the item. If you put this link in your web address, it might not work (it also might just give you a full-screen version of the video). But if you take out the "embed/" part of it and replace it with "watch?v=", it would take you to a video fo my dog, Nutmeg, running around in her backyard on YouTube. Go ahead, try it.
Watch the video below to see tags, attributes, and embed codes in action!
Organizing Your Web Page
Web pages are a series of pages connected by hyperlinks, and they have unique needs. Let's think about it this way: you have a small child whom you keep in a playpen. In the playpen is a tiny toy box with a ball, a block, and a fire truck. You play a game where you tell her to show you the ball, and she points to the ball. You tell her to show you the block, and she points to the block. You tell her to point to the fire truck, and she points to the fire truck. This game works very well.
But then you take her into another room and put her in another playpen, and there's a pillow, a rattle, and a dolly. You tell her to point to the fire truck, and she looks around and shrugs her shoulders. Her mind is not advanced enough to understand that you wish her to point through the wall into the other playpen. And she does not have the physical ability to get out of the playpen, walk to the other room, and retrieve your fire truck for you. This game will not work.
You then try again. You put her back in the original playpen, but you take the small box of toys and scatter them around the house. You put the ball under the couch. You put the block in the bathtub. And you put the fire truck in the trunk of your car. You return to the playpen and ask the child to show you the fire truck. Again, she shrugs her shoulders. This game will not work.
Why does the first game work, but the other two do not?
What if you change the game by taking the child, playpen, toy box, and all into the next room and again ask the child for the block? Unless something distracts the child, the game will work! The child knows the block is in the box, and all functions as normal.
Your web page is the child, and its name is index. Your main folder is the playpen, and your subfolders are the toy boxes.
To be more clear, when you make the homepage of a website, you'll want to name it "index.html" and put it in a folder. In that folder, you can then put any pictures, documents, videos, or other HTML files that you might link to. You can also organize further by putting those things into subfolders. But no matter what, everything that is not already online must be put inside that main folder to be then posted online.