Information technology tools and resources at the UW
What is HTML? – HTML Tutorial
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.
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
- The Basics of HTML
- The HTML head element
- HTML lists
- Images in HTML
- HTML links – building a lab
- HTML tables
- More about the document head
- HTML forms – the basics
- HTML5 form additions
- HTML structural elements
- Creating multiple pages with navigation menus
- Validating your HTML
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 https://itconnect.uw.edu/web/ and you can find several commercial solutions as well. Lifehacker has one among many brief lists of the top 5 web hosting companies.
In no particular order these external resources supplement the tutorial by providing shortcuts to commonly used information and further learning.
Listing of all the HTML elements that are allowed and what they do. Essential cheat sheet for remembering what does what in HTML.
List of escaped entities valid in HTML. Helpful for using unique characters or avoiding using characters used by HTML that would break your code
Walkthrough of some of the lesser known, but very useful semantic HTML elements.
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.