What is HTML? - HTML Tutorial

Introduction

HTML is the fundamental building block of web design: ultimately all of the technologies we discuss in this series revolve around the construction and manipulation of HTML. HTML is like the wood from which we construct an object: we can aim small and not have to know much, but if we want to build a mansion or a roller coaster, we will have to know a bit more about its weight, density, strength, and other aspects.

HTML is used for a huge variety of things on the web, from building complex websites that offer email and calendar functions to constructing a simple course website or resume. We recommend at least a basic understanding of HTML for anyone who wants to publish on the web.

This workshop will take you through the basics of the HTML you'll need to build an effective and engaging web site. It will lay the groundwork for the rest of the Web Publishing series.

If you already have a solid understanding of HTML or are coming here after already attending the workshop feel free to skip ahead to the FAQ and external resources sections.

Tools

In order to walk through the curriculum you will need to set up some tools on your computer. These tools are free.

Komodo Edit - Runs on Mac OS X, Windows, Linux 
Allows us to write code much more efficiently by highlighting the syntax we will discuss throughout the curriculum.

Chrome - Runs on Mac OS X, Windows, Linux 
Modern web browser that will allow us to preview and debug our content

Tutorial

This tutorial was created and is maintained by the W3 organization which manages HTML, CSS, JavaScript and many other web standards. It is arranged by how we teach the content in our workshops, but the material listed can be followed by individuals looking to learn more. We recommend the following order for ease of learning, and because later tutorials reference material in earlier tutorials.

Workshop 1

Workshop 2

Frequently Asked Questions

These questions are meant help you solve specific but common problems that may pop up when using this language. They are meant to be read after you have gone through the tutorial and begin actual development.

How do I allow the user to download a file when they click on a link?

No magic necessary. Just build your a href="...." links to point at the file. Even when you access files locally (like from your hard drive, your web browser will know how to handle the files. 

How do I have sound that plays when the webpage open?

We advise very strongly against this, so strongly that we will not provide the answer here. If you really must you can search for the answer online as it is a simple snippet of code, but realize that users strongly prefer the choice to hear music.

How do I get my HTML page online?

The University of Washington offers free hosting solutions to staff, students, and faculty here http://www.washington.edu/itconnect/web/ and you can find several commercial solutions as well. Lifehacker has one among many brief lists of the top 5 web hosting companies.

Supplementary Resources

In no particular order these external resources supplement the tutorial by providing shortcuts to commonly used information and further learning.

All HTML elements

Listing of all the HTML elements that are allowed and what they do. Essential cheat sheet for remembering what does what in HTML.

Character Entities

List of escaped entities valid in HTML. Helpful for using unique characters or avoiding using characters used by HTML that would break your code

Lesser Known Semantic Elements

Walkthrough of some of the lesser known, but very useful semantic HTML elements.

Web Design Concepts

Higher level step through of some of the theories and concepts behind developing a website. Talks about topics like typography, color schemes, wire framing, information architecture, and plenty more.

The Web Standards Model

High level overview of how HTML, CSS, and JavaScript relate to each other along with and explanation of what web standards are and why we have them.

Last modified: December 18, 2013