If you'd like to write a web page from scratch, you'll need to know a little HTML. HTML is a computer language for “marking up” text so it can be formatted and displayed nicely by a web browser.
HTML is one of those things you could probably study as deeply as you'd like, but you really only need to know a very little bit of it to make nice web pages. Some folks might (snarkily) say you're likely to make nicer web pages if you don't know too much of it, in fact.
You can write your web page in a simple text editing program or in a program meant for editing web pages. For now, I'll assume you have that part of the puzzle worked out, but if there's interest I may add that to this article or write another on the subject.
Every HTML document needs a few lines at the top to help get the web browser off on the right foot. I recommend these few lines:
<!DOCTYPE html> <meta charset=utf-8> <meta name=viewport content="initial-scale=1"> <title>My brand new web page</title>
The first line lets the browser know that your document will adhere to a modern version of the HTML standard and that the browser shouldn't need to employ any weird tricks to make it look or work right. (HTML has been around a long time and some of that time has been... troubled...)
The second line lets the browser know that your document uses the standard character encoding so the browser won't have to guess which one you used. (There used to be different character encodings for different languages, but now we mostly use encodings that can contain the characters for all languages and even emoji. UTF-8 is one of these, and it is the one preferred for HTML documents.)
The third line lets browsers on phones and tablets know that it's okay to lay out the page to fit their screens. Without this, many such devices will lay out the page as if it were going to be displayed on an “average” computer display and then shrink the result to fit the smaller screen. This works pretty well for older, more complex pages that don't take smaller screens into consideration, but we'll opt out of that and just plan to make a page that will look great on any screen.
The fourth line lets the browser know the title of your page so it can show it in an appropriate place, like in the little tabs that desktop browsers like to make. You can change the title from ”My brand new web page” to something more appropriate.
If you're writing a document that has a sort of structured outline, you may wish to convey that outline to the reader with headings (as the document you're currently reading does). Headings look like this in HTML:
<h1>This is a top-level heading</h1> <h2>This is a second-level heading</h2> <h3>This is a third-level heading</h3>
The first line above is a top-level heading. I usually only have one of
these in a document and I usually put the same thing in it as I put in the
title tag earlier. The second line is a second-level heading.
(Notice how the 1 in the opening and closing tags changes to
a 2.) I generally use this to show the main sections of a
document. Sometimes the main sections would benefit from being broken down
further and I'll use some third-level headings. That's as far as I usually
go, but headings are available up through sixth-level if you need them.
Now that you know how to mark up the outline of your document, you'll no doubt wish to fill it in with paragraphs of insightful text. A paragraph in HTML looks like this:
<p>This is a paragraph of text in HTML.
Notice that the title and heading tags came in pairs, wrapping
their contents. The p tag doesn't need to be paired: it starts
a new paragraph (ending the previous one if necessary) wherever you put it.
If you'd like to emphasize some text, you can use the em
tag, like this:
<p>If you'd like to <em>emphasize</em> some text, you can...
If, on the other hand, you'd like to make some text italic for purely
presentational reasons — the title of a book, for example — you can use the
i tag instead:
<p>Not since <i>The Lord of the Rings<i> had day after day of walking been made into such an interesting story.
I like to put my name and contact information at the bottom of my documents.
I use the address tag for this:
<address> Aaron D. Parks<br> aparks@aftermath.net </address>
Did you notice the br tag in there too? That asks the browser
to put a line-break between my name and address.
That's it for now! HTML can do lots of other wonderful things: you can make tables, include pictures or figures, make lists, and much more. Drop me a note at the address below if there's more you'd like to learn about.
Aaron D. Parks