Note: You may find it easier to complete this lesson if you have already completed the previous lesson in this series.
“Hello World” in HTML
Viewing HTML files
When you are working with online sources, much of the time you will be
using files that have been marked up with HTML (Hyper Text Markup
Language). Your browser already knows how to interpret HTML, which is
handy for human readers. Most browsers also let you see the HTML source code
for any page that you visit. The two images below show a typical web
page (from the Old Bailey Online) and the HTML source used to generate
that page, which you can see with the
Tools -> Web Developer -> Page Source menu item in Firefox.
When you’re working in the browser, you typically don’t want or need to see the source for a web page. If you are writing a page of your own, however, it can be very useful to see how other people accomplished a particular effect. You will also want to study HTML source as you write programs to manipulate web pages or automatically extract information from them.
(To learn more about HTML, you may find it useful at this point to work through the W3 Schools HTML tutorial. Detailed knowledge of HTML isn’t immediately necessary to continue reading, but any time that you spend learning HTML will be amply rewarded in your work as a digital historian or digital humanist.)
“Hello World” in HTML
HTML is what is known as a markup language. In other words, HTML is
text that has been “marked up” with tags that provide information for
the interpreter (which is often a web browser). Suppose you are
formatting a bibliographic entry and you want to indicate the title of a
work by italicizing it. In HTML you use
em tags (“em” stands for
emphasis). So part of your HTML file might look like this
... in Cohen and Rosenzweig's <em>Digital History</em>, for example ...
The simplest HTML file consists of tags which indicate the beginning and
end of the whole document, and tags which identify a
head and a
within that document. Information about the file usually goes into the
head, whereas information that will be displayed on the screen usually
goes into the body.
<html> <head></head> <body>Hello World!</body> </html>
You can try creating some HTML code. In your text editor, create
a new file. Copy the code below into the editor. The first line tells
the browser what kind of file it is. The
html tag has the text direction
ltr (left to right) and the
lang (language) set to US English.
title tag in the head of the HTML document contains material that is
usually displayed in the top bar of a window when the page is being
viewed, and in Firefox tabs.
<!doctype html> <html dir="ltr" lang="en-US"> <head> <title><!-- Insert your title here --></title> </head> <body> <!-- Insert your content here --> </body> </html>
<!-- Insert your title here -->
<!-- Insert your content here -->
Save the file to your
programming-historian directory as
hello-world.html. Now go to Firefox and choose
File -> New Tab and
File -> Open File. Choose
hello-world.html. Depending on your
text editor you may have a ‘view page in browser’ or ‘open in browser’
option. Once you have opened the file, your message should appear in the
browser. Note the difference between opening an HTML file with a browser
like Firefox (which interprets it) and opening the same file with your
text editor (which does not).
Suggested readings for learning HTML
Note: You are now prepared to move on to the next lesson in this series.
William J. Turkel and Adam Crymble , "Understanding Web Pages and HTML," Programming Historian, (17 July 2012), http://programminghistorian.org/lessons/viewing-html-files