One of the reasons that I created this site was to share fun ways to use digital resources to study the ancient world. In this introductory series, I will teach you how to build your very own online Latin dictionary using data from Lewis and Short’s Latin dictionary. The end product will act something like this. It may look different, however, because I’m going to teach you the basics of CSS, so that you can style your dictionary to suite to your own tastes. But let’s not get ahead of ourselves just yet.
How we will build it
“I like that sounds of that CSS, but what else will this series teach me?”, you might ask. Well, we’ll begin with an introduction to and overview of HTML (hypertext markup language), before covering basic CSS (cascading style sheets), including how to make sure that your dictionary looks good on phones and tablets, and some JavaScript. This project is perfect for an introduction to all three, because you only need a smattering of each to do something really interesting.
Along the way, we’ll learn how to use some other things, including Git and GitHub–which are used for version control–and a code editor called VS Code. When we’re finished, you’ll be able to host your dictionary for free on GitHub pages and share the link with your friends, family, students, and all the Latin readers of the world!
So, let’s get started with some…
Hypertext Markup Language (HTML)
HTML is used to add content to a web page. It is interpreted by your browser and used to display text, images, videos, and the like online. In many ways, it acts as a series of labels that tell the browser more about the content on your web page. Although there are many ways to get HTML to your browser, the simplest way is to write an html file. At its core, the internet is basically a series of files and folders that are consumed by clients (such as web browsers) and distributed by servers. Browsers are designed to understand commands in certain types of files, such as .html files.
Creating a .html file
There are a few ways to create an html file. If you want to feel like a hacker, you can use the command line (which I will cover in a future post). You can also simply create an html file by opening your notepad and saving the file with the suffix .html (e.g. “index.html”). If this sounds too troublesome, you can also practice with an online editor such as repl.it. This is a good place to practice and learn, but you’ll want to edit on your own computer when you begin to work on your dictionary. I recommend installing an IDE (integrated development environment) to edit code in your local environment. In this demo, I plan to use VS Code, but you can use another editor if you already have one installed. Once you’ve downloaded and installed VS Code, you can use it to create files.
Getting started
The best way to begin is by creating a new folder for your dictionary, where you’ll store your files. Once you’ve created the folder, open it in your editor. If you’ve installed VS Code, simply right-click on the folder and then click “Open with Code”.
Once your code editor is open, you can create a file in a few ways. The easiest thing to do is press “ctrl + n”. You can also go through the menu File > New File. I like to do the following. To the left, you should see a file explorer. If you hover inside your opened folder in the file explorer, you can click on the New File icon.
Using this method, you’ll be able to name and save your file as it is created. To create an html file, simply end your file name with “.html”. You can name it anything you want before that. By convention, web developers usually name the main page “index.html”. When you’re done, your screen should look something like this:
HTML – the basics
An HTML file is made up of a series of building blocks called elements. These elements are represented by tags, which label pieces of content.
Tags are simple in structure and begin and end with pointed brackets (<>). There are two types of tags: self-closing and those which must contain both a start and end tag.
Let’s look at the basic structure of an html document. If you are using VS Code, type “!” and hit space. This will automatically generate an HTML boilerplate for you to use. If you are not using VS Code, add the following to your html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Before we break this down, be sure to save your file and then note a few things:
- Tags are nested to create a hierarchy of parent and children tags. Parent tags surround their children. In the code above, <head> and <body> are children of the <html> element, and the <meta> elements are children of the <head> element.
- White space is used to emphasize this hierarchy, but it is optional. The indentations in the code are not required. In fact, most web pages remove all white space before the browser sees it. The browser does not require white space, BUT it makes it much easier for humans to edit and interpret code.
- Tags that encapsulate data must begin with an opening tag (e.g. <html>) and end with a closing tag (</html>). Closing tags will feature the “/”.
- Older version of HTML required that all self-closing tags have a “/” (e.g. <meta />). HTML5 does not require this “/”.
So, what are we seeing?
An HTML boilerplate
<!DOCTYPE html>
This first line of code begins every html file and it tells the browser that it is about to read HTML. This declaration is technically not an HTML tag, although it does resemble one.
<html></html>
Every html file must also have an html tag. This tag is the root element and it is the highest ancestor element of all elements in the html file. The only thing that lies outside of the html tag is the doctype declaration.
<head></head>
Each html file contains a head element that contains metadata about the document. This metadata is used by the browser and search engines, but it is not displayed by the browser.
<meta>
Meta tags contain metadata about a document. This metadata is used for a variety of things, including search engine optimization, character encoding, and setting the browser’s view-port. Meta tags use html attributes, but we’ll get to attributes in the next post.
<title></title>
The title element is used to give the document a title. This is important primarily for search engine optimization, since it helps search engines find your page and display it, but it is also used to set the title that appears in the tab of the browser page.
<body></body>
The body tag is used to delineate the main, displayable elements of a web page. This is where we will spend most of our time.
What next?
Next time we’ll learn about html attributes and begin editing our html file with the end goal of creating a dictionary. We’ll learn about some of the most common html elements and how to use them, and we’ll work our way towards creating a great backbone for our dictionaries!