HTML_for_translators

One-hour HTML class for translators

HTML is the lingua franca of the internet. Every website is built using it. And if you want to survive as a translator, knowing some HTML is key. This one-hour introductory article is for you.

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:

simple_html

HTML stands for Hypertext Markup Language.

Hypertext

You can compare the Hypertext part to the annotations in an old text:

hypertext

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

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

page_setup

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_formatting

 

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>

 

Layout

 

Title/headings

<h1>Heading 1</h1>
Normal text

<h2>Heading 2</h2>
Normal text

<h3>Heading 3</h3>
Normal text

 

heading

No rocket science here. Different title sizes. Basically the same thing you get in Microsoft Word.

word_heading

Links

Link to
<a href="http://www.google.ch">
Google</a>.

 

Links

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" />

 

images

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:

exercise_1

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:

exercise_1_solution.html

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)



Related posts


Ein Kommentar zu “One-hour HTML class for translators”



  • Steven am 5. May 2019 9:20 Uhr

    Toll gemachte Homapage, das Layout gefaellt mir sehr
    gut! War sicher ne menge Arbeit.


Leave a Reply

Your email address will not be published. Required fields are marked *