HTML stands for HyperText Markup Language and is used to chunk and format text and images. Over the years, it has become the standard for creating web pages.
HTML is comprised of a variety of elements designed to help display information. These elements are writted in tags. A tag is an element name in angle brackets <...>. Most tags operate in pairs with an opening (<tag> and a closing </tag>. Note that the closing tag uses a forward slash (/) to denote the end of the markup. Any text within a set of tags receives the markup associated with that element. All tags, with the exception of DOCTYPE, should be written in lowercase.
The basic makeup of a web page is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Here is each line of this code in more detail...
<!DOCTYPE html>
The
!DOCTYPE element tells the browser what type of information to expect. In this case, the browser will expect html code to follow. The doctype element is a rule-breaker. It is a singleton element, meaning it has no closing partner.
<html>...</html>
The
html element is the root element of the document. All html code should appear between the opening and closing html tags.
<head>..</head>
Every html document has two main parts: head and body. The
head element denotes the header information. This is information about the page such as the title, external dependencies, search terms, and styles. No content that is to appear on the page should be written in the head element.
<title>...</title>
The most common element in the head is the
title. This allows developers to label their page. This title will appear on the browser tab in which the page resides.
<body>...</body>
The
body element is where all the magic happens. Any content that a developer wants seen on the page gets placed inside the body tag.
Adding Color with the Style Attribute
HTML elements can have
attributes that help describe how to display information. Attributes are written inside the angle brackets of the opening tag in the format
attribute='value'. The value of the attribute should be enclosed in single quote. Here we will focus on the style attribute. The style attribute allows a programmer to change the appearance of the information. One way to change the appearance is to change the color. The style attribute allows us to change the background color and the foreground (text) color. Here is a look at some examples of the style attribute in action:
<body style='background-color:blue'>...</body>
The
style attribute is written inside the opening tag of the body. It is set equal to a value inside of single quotes. The value for a style attribute is a property:value pair, separated by a colon. In this case
background-color:blue sets the background color of the entire page to blue.
<h1 style='color:white'>...</h1>
In this example, the foreground color (or text color) is set to white. This means that all text inside the h1 tags will be white.
<h2 style='background-color:yellow; color:red'>...</h2>
Finally, multiple styles can be applied to the same element. To apply both a background and foreground color to the h2 tag, we set up the style attribute as normal, and list all applicable style pairs in the quotes. We use a semicolon (;) to separate the property:value style pairs.