HTML is a file format that is used to describe webpages. Its name is short for “Hypertext Markup Language”; hypertext is text containing hyperlinks (digital references that can be easily followed), and the act of “marking up” a document is the act of annotating a document in a manner such that the annotations are unambiguously distinguishable from the document’s content. HTML’s first version was designed and implemented in 1990 as a way of storing hypertext documents that could be sent over the internet, and a description of it was first published in 1991.
An HTML file (i.e. a file in the HTML format) is composed of plain text, and tags, which are little pieces of special text that describe how the document that the file represents is marked up. Two of the most common kinds of HTML tags are opening tags and closing tags. Opening tags denote the start of an annotation, and closing tags denote the end of an annotation. Opening tags consist of a left angle bracket (“<”), followed by a tag name, and a right angle bracket (“>”). Closing tags are the same, except that there’s a forward slash (“/”) between the left angle bracket and the tag name. As an example of a tag name, the tag name “h1” is short for “header one”; here’s an example of an opening and closing tag, both with the tag name “h1”, surrounding the plain text “My website”:
<h1>My website</h1>
“h1” tags annotate the content between them (in this case, the text “My website”) as being part of a primary header. (note: tags containing a tag name are often just referred to by their tag names, e.g. tags with the tag name “h1” are often just referred to as “‘h1’ tags”.)
There’s another common kind of tag: void tags. Void tags are commonly referred to as “empty tags”, and while this name does technically apply to them, I think it’s a misnomer for multiple reasons. A void tag consists of a left angle bracket, a tag name, a forward slash, and a right angle bracket. For example, the following is a void tag representing an image (the “img” tag name is short for “image”):
<img />
(note: since a tag name is never meant to occur within both void tags and opening/closing tags, you may choose not to write the forward slash (e.g. <img>) in void tags and the browser will know what you mean, but it’s better to include it.)
An HTML file should always have certain tags in it. There’s one tag in particular that’s very special and needs to come at the beginning of an HTML file: the document type declaration. Here’s the one you probably want to use:
<!DOCTYPE html>
There are some tags that aren’t strictly necessary, but should be included. Here are the contents of a simple, fully valid HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>…site title here</title>
</head>
<body></body>
</html>
Here’s a breakdown of what each of the things in the above HTML does: the document type declaration declares that the file is an HTML document; the “html” tags annotate that the content between them is HTML; the “head” tags annotate that the content between them is information about the document, rather than content that is part of the document’s body; the “meta” void tag is used to annotate various things, but in this case it annotates that the document’s characters are in the UTF-8 character encoding; the “title” tags annotate that the text they contain is what should be shown as the title of the browser tab/window that contains the above HTML webpage; the “body” tags annotate that the content between them is the body of the HTML document.
You may have noticed something new in the above HTML, particularly inside of the opening “html” and “meta” tags. These things are called “tag attributes”, or just “attributes”, and they describe, well, attributes of the tags they’re inside of. For example, the lang="en" in the “html” tag describes that the “html” tag contains English text (“lang” is short for “language”, and “en” is short for “English”.)
One quick definition before I wrap this section up: the term “HTML element” refers, collectively, to a void tag, or a opening and closing tag and their contents. Yes, that makes a void tag both a tag and an element at the same time. But remember: opening and closing tags on their own are !!!NOT!!! elements.
At this point, I’d recommend going to Neocities, logging in or signing up if you haven’t done so, clicking on the “edit site” button near the upper right hand corner, making a new folder and naming it something like “tutorial”, hovering your cursor over the new folder and clicking on “Manage”, clicking the “New File” button, making a file named “index.html”, hovering your cursor over the new file, clicking on “Edit”, pasting the above HTML into the editor, and saving.
Long ago, when dinosaurs roamed the Earth, it was common practice for people to just dump files, for example warez (software that has been stripped of DRM for the purpose of redistribution), into folders on their websites, and point prospective downloaders to the path of the folder they’d dumped files into, and the server would happily generate an HTML file (formally known as a “webserver directory index”) containing a list of all of the files and folders within that folder, linked accordingly.
Sometimes, however, people wanted to make their own custom index pages, and sometimes, publicly listing every single file in a folder is a Bad Thing™. So, people changed web servers so that when they didn’t want the default index sent for a folder, all they had to do was make a file called “index.html” in that folder, and that file would be sent instead. This is basically why we can type URLs like “example.com/sample/”, instead of “example.com/sample.html” or “example.com/sample/sample.html”, and get a webpage.
Now, if you go to http://{YOUR SITE NAME HERE}.neocities.org/{YOUR TUTORIAL FOLDER NAME HERE}/, you’ll probably be greeted by a blank page. If you aren’t, something went wrong, and if you need help, post a message asking for help on my Neocities website profile.
This page is kind of barren. Let’s change that. Inside the “body” element, add an image tag:
<img />
Then, save, and reload your tutorial page. There’s no image, though. To make an image appear, you need to specify which image it is that you want to appear, and we do that with an attribute. So, change the “img” to the following, then save and reload:
<img src="minions.jpg" />
But there’s still no image. So, download the following image, and upload it to your tutorial folder:
Now, reload your tutorial page again. There we go, now you have a lovely meemay to spruce up your website. But the series of tubes we know as the Internet exists for more than just petty shitposts (yeah, I was surprised when I found this out, too.) It also exists for petty screeds, and nobody likes a big wall of text, so we’ll need a way to separate our text into paragraphs. Your instinct may be to just type text into the body element and press the Enter key twice to separate paragraphs, and you are free to try it, but it won’t work.
Whitespace characters are characters that represent horizontal or vertical space, e.g. spaces and newline characters. Web browsers have a habit of taking any sequences of whitespace characters (including newline characters) that occur in an HTML file, and showing them as a single space character to the user. This means that the newline characters one might attempt to use to separate text will be replaced with a single space. So, how do we make paragraphs? “p” elements. (“p” is short for paragraph.) Add the following to your tutorial page before the img element (feel free to type some less insultingly stupid text into the paragraph elements than what I’ve typed):
<p>this is my dank ass website</p> <p>donald trump? more like blonald drompf amirite guise</p>
Congratulations, you’re well on your way to having a wonderful website.