### 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:

• <p></p> - A paragraph tag
• <hr/> - Draw a horizontal line
• <br/> - Insert a newline (one vertical space)
• <h1></h1> - a heading. (<h2><h6> are tags for smaller headers)
• <center></center> - Horizontally center the content.
• <strong></strong> - show in bold face
• <a href="URL">link text</a> - a link to a page at the given URL.
• <img src="URL"></img> - show an image at the given URL.

#### 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>
<meta charset="UTF-8">
<title>HTML Page Title</title>

<body>
<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

• HTML - the language in which web pages are written.
• Text editor - the kind of editor needed to write code like HTML.
• File name extension - the letters after the dot in the file name.
• Markup - this describes how to lay out things on the HTML page.
• HTML tag - HTML markup is made of these.
• Angle brackets - The name we give to the < and > symbols that begin and end an HTML tag.
• HTML element - A part of an HTML document. An element contains open and close tag, and everything in-between.
• <head> - The title of the web page is placed in this HTML element.
• <body> - Most of the page content is placed in this HTML element
• URL - The location on the web where something is located.
• Slash character / - this is used to close HTML tags.
• Absolute and Relative URLs - different ways to identify resources on the Internet.
• Syntax highlighting - colors that some text editors show

#### 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

• Open a text editor
• Download one of the ones listed earlier if you need to.
• Copy the code from the very simple HTML page to your text editor.
• Save it to your computer in a place where you can find it.
• One place you could save the file is in a folder on the desktop.
• Save the page in a file with a .html extension like firstPage.html.
• Load the page in a web browser such as Chrome or Firefox.
• Change the title of the page in to be something interesting.
• Add some copies of the robot and ship image
• Copy the LevelUp robot and ship images, and save them to the same folder where you saved the page. You can right click on them and select the “save image as” option to do this.
• Add some content to the page such as
• A header with your name on it (using the <h1> tag).
• A link to a web site that you like.
• Add a paragraph describing something interesting.

#### 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>