Level-Up Coding

Level 0: You can write your own web pages with HTML.

HTML is the language used to define web pages. To do this, the code for an HTML page has two two things: (1) page content, which has the words, images, and other content that will be shown on the page, and (2) markup tags, which describe how the content will be drawn on the screen. This might include defining which parts of the page are headers, which parts are paragraphs, whether text should be centered, and what should be bold or itallic.


Creating HTML Pages in a Text Editor

Since HTML pages are really computer code that is interpreted by the web browser, they must be created in a program called a text editor. This is a special editor that just shows exactly what you typed. Word processors add hidden codes that you can’t see, so they won’t work to edit HTML. A couple of good text editors that you can download for free are atom, and notepad++.


The .html file Extension

When you save an HTML page to your computer, you should save it as a file with the extension .html. The extension of a file name is the letters that come after the dot in the name. For example the name hello.txt has a .txt file extension. Saving your file with a .html extension helps the computer know what to do with it.


HTML Tags

HTML tags start with the character < and end with the character >. When used in this way, we call these characters angle brackets. Most HTML tags come in pairs, and form what is called an element. For example, a paragraph in HTML begins with the tag <p> and ends with the tag </p>. Closing tags start with a slash character /. A few elements, such as <hr/> and <br/> close themselves, so they don’t need extra closing tags. When a tag is self closing, it ends with a slash.

Some common tags:


URLs

You may have noticed the term URL in the list of tags. This term stands for “uniform resource locator”. It tells the browser where to find something on the web, such as an image or a web page. URLs are sometimes just called “links”.


HTML Documents

The code for an complete HTML page needs four things:

  1. The tag <!DOCTYPE html>
  2. An <html> element which has everything else inside it.
  3. A <head> element which gives the page title and character encoding.
  4. A <body> element which gives the main content of the page.

Both the <head> and <body> elements should be inside the <html> element. Most of the content of the web page will be inside the <body> element.

Here is the code for a very simple HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Page Title</title>
</head>

<body>
    <h1>HTML Page Heading</h1>
    <p>This is a basic HTML page.</p>
    <img src="robot.png"></img>
</body>
</html>

The different colors that are displayed in the text editor are called syntax highlighting. Many text editors will display computer code in different colors to help you understand it better.

Another thing that you may have noticed is that the code of the page is indented. This helps you to read and understand the code.


There are two kinds of URLs or links that can be made on an HTML page. These are absolute, and relative. An absolute link tells the browser exactly where to find something on the internet. A relative link describes where it is in relation to the current page. For example, the line of code

<img src="robot.png"></img>

defines a relative link for an image. This link tells the browser to look for an image called robot.png in the same folder as the HTML page.


Terms


Extra resources

There are a lot of resources on the web to help you learn more. One of these is w3schools, which has lessons on many topics, including HTML, CSS, and Javascript:


Exercise


Bonus Level: HTML lists and tables

HTML has many different element types. If you get done with the Level 0 exercise, you can go further by putting a list or a table on your HTML page. Lists and tables are challenging because they use more than one tag type.


HTML lists

In HTML, there are two types of list: ordered and unordered. Ordered lists show list items as numbered. Unordered lists use bullet points to show items. To make a list

  1. Write the tag for the list type (<ol> for ordered list, and <ul> for unordered list).
  2. Write each of the list items, using <li>item text</li>.
  3. Finally, close the list using </ol> or </ul>.

Example code for an ordered List:

<ol>
    <li>Making lists</li>
    <li>is fun!</li>
</ol>


HTML lists

Tables are even more challenging than lists in HTML since you use four different tag types to make them. An HTML table is made up of a list of table rows. Each row is each defined as a list of cells. Writing a table requires the following steps:

  1. Start with the table tag <table>
  2. For each row in the table
    1. write a <tr> tag to begin the table row
    2. For each cell in the row, add a <td></td> element, or use <th></th> for header (title) cells
    3. Close the table row with </tr>
  3. Finally, close the table with the tag </table>

Example code for an HTML table:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
    </tr>
</table>