Home / Tutorials

Introduction to HTML and CSS

There are three languages that are fundamental to content on the web:

This page gives a very brief introduction to these three languages.

HTML

Hypertext Markup Language (HTML) is the native language of the World Wide Web. Web pages are written in HTML and contain text formatted with tags that both specify the structure of the information on the web page. Tags are also used to bring in other resources (like images, video clips, or maps) from the web that appear on the page.

Creating Static HTML Files

For all of the examples below, you can copy the HTML into:

Save the file with a ".html" extension.

To view the HTML as a web page in a browser, double-click the file in Windoze Explorer (PC) or Finder (Mac), or type the file name into the address bar of a browser.

If you are a Mac user planning on writing much HTML, you might consider getting the free TextWrangler HTML editor, that provides a number of features that make writing HTML and CSS easier.

Elements and Basic Web Page Structure

Web pages are composed of HTML elements.

An HTML element is written with a start tag, and end tag and some comments. Elements in a web page are often contained (nested) within other elements.

An HTML tag begins with a less-than sign (<) and ends with a greater-than sign (>). A start tag usually has a matching end tag that is the same as the start tag except it has a slash before the text.

The following is a minimally simple HTML file. The elements are explained below.

<html>
<head>
<title>Simple Web Page</title>
</head>

<body>
<h1>Simple Web Page</h1>

<p>This is a paragraph of text. This is a simple web page.</p>
</body>
</html>

HTML Element Structure

An HTML web page starts with an <html> start tag and ends with an </html> end tag.

Two elements are contained within a <html> element: A <head> element and a <body> element.

The head element is a header and contains elements that provide information about the web page.

One header element in all pages is the title element. The <title> start tag and </title> end tag enclose the title of the page that will be shown in the border of the window on a web browser.

The <body> start tag and the </body> end tag enclose the visible content of the web page. The elements within the body are described below.

H1 (Main Header)

The <h1> start tag and </h1> end tag are wrapped around the page header (heading one). There should be exactly one h1 element on a page and it should usually be the same as the title in the header.

Paragraphs

The <p> start tag and </p> end tag are wrapped around a paragraph of text. There are usually multiple paragraphs on a page.

Images

Tags can have attributes that give additional information about the element that is not directly visible when looking at the web page in a browser.

Web pages often contain images. Images are linked from other files on the web server with the <img> tag. An img tag has a src attribute that gives the name of the file. For example:

<html>
<head>
<title>Web Page With an Image</title>
</head>

<body>
<h1>Web Page With an Image</h1>

<p>Below is an image of a simple static web map.</p>

<img src="http://michaelminn.net/geography/intro/media/2011-mercator-projection-small.jpg"/>

</body>
</html>

http://michaelminn.net/geography/geog2010/media/2011-mercator-projection-small.jpg is the URL to the file containing the image.

The img tag is an empty tag that has a slash on the end so it needs no matching </img> end tag.

Hyperlinks

One of the qualities that give content on the web a major advantage over printed text is the ability to add hyperlinks to content using the <a> tag. Clicking on a hyperlink takes you to another web page. For example:

<html>
<head>
<title>Web Page With an Image and Hyperlink</title>
</head>

<body>
<h1>Web Page With an Image and Hyperlink</h1>

<p>If you click the photo below, you are taken to the
Wikipedia page for the Mercator Projection.</p>

<a href="https://en.wikipedia.org/wiki/Mercator_projection">
<img src="http://michaelminn.net/geography/geog2010/media/2011-mercator-projection-small.jpg"/></a>

</body>
</html>

Simple Formatting

You can add bold text with the <b> tag and italicized text with the <i> tag.

<html>
<head>
<title>Web Page With Text Formatting</title>
</head>

<body>
<h1>Web Page With Text Formatting</h1>

<p>This is a paragraph with <b>bold text</b>.</p>

<p>This is a paragraph with <i>italicized text</i>.</p>

</body>
</html>

Section Headings

Section headings can be added with additional numbered heading tags. The <h2> tag is for sub-headings, the <h3> tag for sub-sub-headings and so on. For example:

<html>
<head>
<title>Web Page With Section Headers</title>
</head>

<body>
<h1>Web Page With Section Headers</h1>

<h2>First Section Heading</h2>

<p>This is one section. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  </p>

<h2>Second Section Heading</h2>

<p>This is another section. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  </p>

</body>
</html>

iframes

An <iframe> tag (internal frame) embeds one web page inside another. iframes are commonly used to place web maps inside a page. iframes have multiple attributes to specify their appearance and the source URLs are often long and impossible to interpret. Just copy them in.

The <iframe> code to embed a Google Map can be found under the Share link when you do a search in Google Maps.

<html>
<head>
<title>Web Page With Embedded Map</title>
</head>

<body>
<h1>Web Page With Embedded Map</h1>

<p>Below is an embedded web map in an iframe.</p>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3070.9070901106074!2d-104.96534874959855!3d39.674304508279654!2m3!1f0!
2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876c7e3d931f3bff%3A0x8de11828303dcb22!
2sBoettcher+West%2C+Denver%2C+CO+80210!5e0!3m2!1sen!2sus!4v1454215381833" 
width="600" height="450" frameborder="0" 
style="border:0" allowfullscreen></iframe>

</body>
</html>

Validation Elements

While the simple examples above will display fine in a browser, there are some additional attributes and elements that you should add to your HTML to make it fully valid on the Web.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8"/>
<title>Simple Web Page</title>
</head>

<body>
<h1>Simple Web Page</h1>

<p>This is a paragraph of text. This is a simple web page.</p>
</body>
</html>

The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. Unlike all other HTML tags, the DOCTYPE does not have an end tag or a self-closing slash.

The lang attribute on the html tag indicates that this page is in English. There are other ISO Language Codes that you should use if the page is in another language.

The meta charset tag describes the character set as UTF-8. A character set indicates what digital values are associated with which text language characters. Unicode Transformation Format (UTF) is a character set that can represent any of the Unicode characters, which cover all common world languages.

You can use the W3C Markup Validation Service to verify that your code is valid.

CSS

HTML should be used to specify the content of your web pages. The styling of web pages is done with Cascading Style Sheets (CSS).

CSS specifies the styling, coloring and layout characteristics of your page without having to hard-code those characteristics in the tags. This makes it possible to easily change styling without having to completely recode a web page. And since style sheets can be linked and shared across web pages, you can keep consistent styling across a web site.

A stylesheet is an element wrapped in <style> tags. Each CSS rule consists of a selector, followed by a set of declarations wrapped in curly braces. The selector describes what types of elements are styled by the rule. Each declaration consists of a property and a value which describes the styling of that property.

The simple example below, the CSS within the <style> element changes the paragraph (p selector) font (property) to gray 14 point Times New Roman (value = a serif font), and the main header (h1 selector) to maroon 24 point Arial (value).

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8"/>
<title>Web Page With CSS</title>
<style>
h1 {
	font-family: Arial;
	font-size: 24pt; 
	color: maroon; }
p {
	font-family: Times New Roman;
	font-size: 14pt; 
	color: gray; }
</style>

</head>

<body>
<h1>Web Page With CSS</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.  </p>

</body>
</html>

A good place to start learning CSS is the free W3 Schools CSS Tutorial.

JavaScript

HTML is about content. CSS is about style. JavaScript is about behavior. JavaScript is a programming language that allows web pages to interact with user input in complex ways.

Large sections of JavaScript code that are reused often can be stored in libraries. A wide and growing variety of proprietary and open-source JavaScript libraries are available to make web programming easier. One heavily used library you may hear of in job ads is JQuery.

The toy example below changes the content of a paragraph to the current date and time.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8"/>
</head>

<body>
<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

A good place to start learning JavaScript is the free W3 Schools JavaScript Tutorial.

Learning More HTML / CSS / JavaScript

The examples above give you a very bare minimum introduction to HTML, CSS and JavaScript. All three of these are rich areas for study, and if you are interested in learning more, a good place to start is to work through the free tutorials at the World Wide Web Consortium's (W3C) W3Schools.