Learning HTML

Relative Path

A ___ is a filename that shows the path to a local file (a file on the same website, such as ./index.html) versus an absolute path (a full url, like www.codecademy.com/learn/ruby which is stored in a different folder). The ./ in ./index.html tells the browser to look for the file in the current folder.

Markup

A ___ language is a computer language that defines the structure and presentation of raw text. ___ languages work by surrounding raw text with information the computer can interpret, "marking it up" to be processed.

Whitespace Indentation

As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements: _(1)_ and _(2)_.

Body

Before we can add content that a browser will display, we have to add a body to the HTML file. Only content inside the opening and closing ___ tags can be displayed to the screen. Once the file has a ___, many different types of content - including text, images, and buttons - can be added to the ___.

Root Directory

Before we learn how to link between internal pages, let's establish where our files are stored. When making multi-page static websites, web developers often store HTML files in the ___, or a main folder where all the files for the project are stored. As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code.

rowspan

Data can also span multiple rows using the ___attribute. The ___ attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across.

colspan

Data can span columns using the ___ attribute. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.

_blank

For a link to open in a new window, the target attribute requires a value of ___. The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute.

Nested

HTML documents are organized as a collection of parent-child relationships. When an element is contained inside another element, it is considered the child of that element. The child element is said to be ___ inside of the parent element.

<!-- -->

HTML files also allow you to add comments to your code. Comments begin with _(1)_ and end with _(2)_. Any characters in between will be ignored by your browser.

alt

If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the __ attribute.

Elements

In HTML, the computer can interpret raw text that is wrapped in HTML ___. These ___ are often nested inside one another, with each containing information about the type and structure of the information to be displayed in the browser.

<ul> <li>

In HTML, you can use an unordered list tag _(1)_ to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point. The _(1)_ element cannot hold raw text and cannot automatically format raw text into an unordered list of items. Individual list items must be added to the unordered list using the _(2)_ tag. The _(2)_ or list item tag is used to describe an item in a list.

<nav>

Linking to elements on the same page or to other pages on the same site is called *navigation*. HTML has a special tag called ___ that is used to wrap these links in order to organize the content on your web page. Some of the tags we have used, such as *<div>*, are called *non-semantic tags*. This means that they do not describe the content that is inside of them. However, many tags are used to describe the content that they surround, which helps us modify and style our content later. These are called *semantic tags* and ___ is one of them!

<tbody>

Long tables can be sectioned off using the table body element: ___. The ___ element should contain the all of the table's data, excluding the table headings (more on this in a later exercise).

<td>

Rows aren't sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the table data element: ___.

<th>

Table data doesn't make much sense without titles to describe what the data represents. To add titles to rows and columns, you can use the table heading element: ___. The table heading element is used just like a table data element, except with a relevant title. Just like table data, a table heading must be placed within a table row.

<a>

Thankfully, HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element. With this technique, it's possible to turn images into links by simply wrapping the <img> element with an ___ element.

Metadata

The *<head>* element contains the ___ for a web page. ___ is information about the page that isn't displayed directly on the web page. You'll see an example of this in the next exercise. The opening and closing head tags *(<head></head>)* typically appear as the first item after your first HTML tag.

src

The *<img>* tag has a required attribute called ___. The ___ attribute must be set to the image's source, or the location of the image. In this case, the value of ___ must be the uniform resource locator (*URL*) of the image. A *URL* is the web address or local address where a file is stored. Note that the end of the *<img>* tag has a forward slash */*. Self-closing tags may include or omit the final slash — both will render properly.

<table>

The ___ element will contain all of the tabular data you plan on displaying.

<img>

The ___ tag allows you to add an image to a web page. This is another example of a self-closing tag.

<em>

The ___ tag will generally render as italic emphasis.

<strong>

The ___ will generally render as bold emphasis.

href

The anchor element (*<a>*) in the example above is incomplete without the ___ attribute. This attribute stands for hyperlink reference and is used to link to a file path, or the address to where a file is located (whether it is on your computer or another location).

<tr>

The first step in entering data into the table is to add rows using the table row element: ___.

<html> </html>

To create HTML structure and content, we must add opening and closing _(1)_ tags. Anything between the opening _(1)_ and closing _(2)_ tags will be interpreted as HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code.

alt

Visually impaired users often browse the web with the aid of screen reading software. When you include the ___ attribute, the screen reading software can read the image's description out loud to the visually impaired user.

<a>

You can add links to a web page by adding an anchor element ___ and including the text of the link in between the opening and closing tags.

<!DOCTYPE html>

You can let web browsers know that you are using HTML by starting your document with a document type declaration. The declaration looks like this: ___. This declaration is an instruction. It tells the browser what type of document to expect, along with what version of HTML is being used in the document. ___ must be the first line of code in all of your HTML documents. If you don't use the declaration, your HTML code will likely still work, however, it's risky. For now, the browser will correctly assume that the html in ___ is referring to HTML5, as it is the current standard. In the future, however, a new standard will override HTML5. Future browsers may assume you're using a different, newer standard, in which case your document will be interpreted incorrectly. To make sure your document is forever interpreted correctly, always include ___ at the very beginning of your HTML documents.

Self Closing Elements <br />

_(1)_ contain all the information the browser needs to render the element inside a single tag. Also, because they are single tags, they cannot wrap around raw text or other elements. The line break element _(2)_ is one example of a self-closing tag. You can use it anywhere within your HTML code. The result is a line break in the browser.

<div> <span>

_(1)_s divided blocks of code, while the _(2)_divides inline text, or text that is on the same line as other text.

HyperText

___ is text displayed on a computer or device that provides access to other text through links, also known as "hyperlinks."

HTML

___ is the language used to create the websites you visit everyday. It provides a logical way to structure content for websites.

<p>

___ simply contain a block of plain text.

<div>

___s can contain any text or other HTML elements. They are primarily used to divide HTML documents into sections.

<span>

___s contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.