~wb: HTML tutorial, chapter 1

(1.1) What is HTML?

HTML, short for Hypertext Markup Language, is a written language used to describe webpages. Hypertext is text containing hyperlinks, and marking up a document is annotating it such that the annotations are syntactically distinguishable from its content. HTML documents mainly consist of plain text, and tags.

(1.2) Tags

Tags are pieces of text that the document is marked up with. Two common kinds of HTML tags are start tags and end tags. The simplest kind of start tag takes the following form: <tag-name>, and end tags take the form </tag-name>. An example of a tag name is h1, which 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>.

Start and end tags almost always must come in pairs, and each pair’s start and end tags must have the same tag name. Sequences of a start tag, valid HTML content, and a matching end tag are referred to as elements. Elements may fully contain other elements, but their starts and ends may not overlap (e.g. <article><h1>Hello, world.</article></h1> is invalid; the problem here is that the h1 element starts inside of another element, but ends outside of it.)

Void tags, another kind of tag, are like start tags, except they contain nothing and have no corresponding end tag. Here’s an example of a void tag with the tag name br (short for line break): <br>.

Note: a tag name is only valid if it’s described in the HTML specification, or has been defined with JS.

(1.3) Attributes

Start and void tags may have attributes, which take the form name=value and come right after the tag name. Here’s an example of a void tag with a src attribute: <img src=/neocities.png>. If an attribute’s value contains spaces, put double quotation marks around the value (e.g. title="hewwo there!".) If an attribute’s value contains double quotation marks, put a backslash (\) before every double quotation mark, then put double quotation marks around the value (e.g. title="Dwain \"The Rock\" Johnson").

(1.4) Anatomy of an HTML file

Here are the contents of a simple and valid HTML file:

<!DOCTYPE html>
<html lang=en>

<meta charset=UTF-8>
<title>My Website</title>

<!DOCTYPE html> is the HTML5 document type declaration. In HTML, a document type declaration declares what version of the HTML specification the document follows. The document type declaration needs to occur before any tags.
The html start tag, despite having no end tag, is actually still a start tag. Start and end tags almost always must come in pairs, but one exception is html tags. the HTML specification allows html elements to be missing a start tag, an end tag, or both; they are inferred in a predictable manner. We are writing the start tag explicitly so we can set the html element’s lang attribute, which declares the page’s language. If your page is not going to be in English, replace en with your language’s ISO 639-1 two letter country code.
meta elements, made of void tags, represent information about the HTML document, or the webpage the HTML file represents, that isn’t part of the webpage. The charset attribute declares the character encoding of the HTML file.
<title>My Website</title> declares the document’s title to be “My Website”. In a web browser, documents’ titles are often displayed as the browser’s tab or window title.

(1.5) Actually making a file

Follow these steps:

Go to Neocities.
Log in or sign up.
Click Edit Site (it’s near the upper right hand corner.)
Click New Folder.
Name the folder “tutorial”.
Hover over the new folder.
Click on Manage.
Click New File.
Name the file “index.html”.
Hover over the new file.
Click Edit.
Delete all the stuff.
Copy the HTML in the Anatomy of an HTML file section and paste it into the editor.
Click Save.

If you go to http://{YOUR SITE NAME HERE}.neocities.org/tutorial/, you should be greeted with an empty webpage.

(1.6) Adding stuff

This page is empty. Let’s change that. In the editor, add the following text on a new line after the title element: <img src=/neocities.png>. Click Save again. Reload your tutorial page. There should now be an image on the page.

To be continued…

Generated with dotcomboom’s AutoSite.