It’s really not very complicated, either.
This is the basic structure of an HTML page:
<html>
<head>
<title>This is the Page title</title>
</head>
<body>
This is the content of my page.
</body>
</html>
And it creates the following web page:
HTML stands for Hypertext Markup Language.
Hypertext
You can compare the Hypertext part to the annotations in an old text:
If you wanted to add additional information or a reference to a text, you used footnotes. Now, with HTML, you can add links. But it’s the same concept.
Markup
Markup is like using a marker to define which parts of a plain text should be bold, italic, etc. But instead of a marker, we use tags.
Tags
An HTML page is composed of tags and tag pairs. All tags are surrounded by the “greater than” (<) and “less than” (>) characters. A tag pair has a start tag and an end tag, like this:
<b>This is bold text</b>
The end tag always starts with a slash before the tag sign. The b in the example will make text bold.
Every html page starts and ends with the <html> and </html> tags. Always. And it only uses them once. You will never see more than two <html> tags in a file.
For certain things like a line break <br> or a horizontal line <hr> you only need one tag, not a tag pair. And if you’re paying attention, you might have noticed that the tag names and their functionality always correlate. <b> for bold. <hr> for horizontal rule/line.
Page structure
An HTML page always consists out of a head and a body. The title tag in the head is what you see in the browser tab. The body is what you see in the main browser window. Again, there’s only one head and one body exists per HTML page.
Text formatting
<b>Bold</b> <strong>Strong</strong> <i>Italic</i> <u>Underlined</u> |
|
Text layout
<p>This is a paragraph.</p> <p>A paragraph with a linebreak<br/> and the next line.</p> <p align="center">Center</p> <p align="right">Right </p> <p align="left">Left </p> |
|
Title/headings
<h1>Heading 1</h1> Normal text <h2>Heading 2</h2> Normal text <h3>Heading 3</h3> Normal text |
|
No rocket science here. Different title sizes. Basically the same thing you get in Microsoft Word.
Links
Link to <a href="http://www.google.ch"> Google</a>. |
|
The link tag (a for anchor) has two parts: the href attribute with the URL and the space between the two tags, where you can specify what text should be displayed.
Images
<img src="remy.jpg" alt="This is Remy" width="200" height="139" /> |
|
The most important part of the image tag is the src attribute. This is where you specify the name of your picture. The alt attribute is for the blind and for Google. Neither can see pictures, so this lets them know what’s in the picture. The width and height are not necessary, but they improve page loading times and layout.
In this example, the image (remy.jpg) is in the same folder as the html file. This is the simplest solution to begin with.
Exercise
The best way to write your first HTML file is with a text editor. I recommend Notepad++ for Windows and Sublime for Mac.
Create a new file and save it right away as exercise_1.html.
Don’t use spaces or any other special characters in the filename. It might work, but will eventually lead to problems. Saving the file with the .html extension should enable syntax highlighting, e.g. all html tags will change color.
Now try to create an HTML page that looks like this:
Use the basic HTML structure from the beginning of this article as a template. Add all of your content inside the body tags. And change the title tag inside the header.
The word “Javascript” is a link to the Javascript article on Wikipedia. Find the link and add it.
Once you are ready, save your file again and double-click to open it with any web browser.
If you get stuck or you are finished, you can download the solution file here:
FAQ
Line breaks in HTML
Q: I’ve added line breaks in my text editor, but I can’t see them once I open the file in the web browser.
A: Line breaks in the HTML source code have no effect inside the browser. Use <br/> to add a break.
Doctypes
Q: I often see these crazy doctype things at the beginning of the file, like
<!DOCTYPE html>
or even
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
What are they for?
A: The simple answer: just ignore them. The more complicated one: There are different versions of HTML and these versions have a slightly different syntax. The doctype tells the browser which HTML version this document is using.
Metatags
Q: What do the meta tags that often appear in the header do?
A: There are tons of different meta tags. But the most common ones are these:
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
These are similar to the doctype. They tell the browser that this is an HTML file and that the charset is UTF-8. Just leave them as they are. Want to know what a charset is?
<meta name="description" content="A description of the page" />
This is a short description of the page’s content. Helpful for Google.
Cover picture via Flickr: Här slutar huvudet – Webbfredag (CC BY-SA 2.0)
Ein Kommentar zu “One-hour HTML class for translators”
Toll gemachte Homapage, das Layout gefaellt mir sehr
gut! War sicher ne menge Arbeit.