Tag: web

An HTML Primer for 2024

HTML is a markup language that defines the structure of every webpage you’ve been to. It is a markup language where tags are used to designate the type of content they contain, thus telling your browser how to display it.

And it is not just the web, but our ebooks as well are formatted using HTML.

This is to be a quick tutorial on the basics of HTML. After this, you’ll have the tools you need to make very, very basic sites, but that is the first step into making some not so basic sites later. 

So to start, this is just HTML, no CSS (Cascading Style Sheets) or JavaScript. 

Think of the three, generally as this: 

  • HTML is how the page is structured
  • CSS is how the page is formatted
  • Javascript is how the page functions

To Start

To start, think of HTML tags as labeled parentheses. You put them around text to tell the browser what that text is. So for example, the p tag means “paragraph”, so to show that a bunch of text is a paragraph, you wrap them in p tags, like this:

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

Notice how the end, or closing, tag contains a / (backslash). 

Those p tags tell the browser that the text inside is a paragraph and it should render it (display it to the viewer) that way. 

This differentiates the text from headers, or links, or even things that aren’t meant to be shown to the viewer, like metadata or JavaScript. 

White Space and HTML

Something to note here is that HTML ignores white space. What does that mean? It means if you push the space bar three or fifty times between words, HTML will ignore it, and render it with a single space. 

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

which renders like this:

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

Let’s make a page!

Ok, so rather than talk generalities, let’s start by making a page. Open up a text editor, like Notepad.exe, and let’s start. If you don’t already have a favorite text editor, your operating system should come with one already:

  • Windows, notepad.exe
  • MacOS, TextEdit
  • Linux, too many options, look for Kate or GEdit to start.

macOS and TextEdit

TextEdit really wants to save things as formatted files, like MS Word, so you have to tell it what you want to do. 

  • Open up TextEdit, make a new document.
  • Go to FORMAT -> Make Plain Text

Now, when you save your file the first time it will pop up a message about your file extension, saying:

You have used the extension “.html” at the end of the name. The standard extension is “.txt”. 

Click “Use .html”

From here it should work just fine.

From the Top!

First let’s add the doctype at the top, just like this:

<!DOCTYPE html>

This tells the browser what kind of file this is. This specifically tells your browser that it is an HTML document and it should treat everything in the file as HTML stuff.

Now let’s add in our first tags, the HTML tag

<!DOCTYPE html>
<html>

</html>

This encompasses everything else we are going to write. It is the root tag, and everything on the page needs to be between those two HTML tags to get rendered to your browser. 

Now we have two major sections to our HTML document, the HEAD and the BODY. 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

The HEAD is the meta data for the document. Most of the things you would add to the HEAD are more advanced than this tutorial, as this is the place you would add your CSS or JavaScript. 

But there is something we are going to add—the TITLE

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
</body>

</html>

If you save this as mypage.html and open that in your browser, you’ll see a blank page… BUT at the top, it will say “My Webpage.”

The easiest way to open in the browser for most will be to simply double click the file and it will open up in your default browser. 

You can also go to FILE and OPEN in most browsers and open just like you would a file in Word. 

So, let’s add something to the body!

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
    <p>Hello World</p>
</body>

</html>

Now if you refresh your browser, it will proudly display “Hello World!”

Now, remember what I said about whitespace? one thing we do when when write HTML is indent nested tags to make it easier to read—not for the computer, but for the person. You don’t have to indent, but it helps find things as the page gets longer. 

Congrats on your first web page! 

Adding More

Let’s add some more paragraphs to our site, including the one with all that whitespace from above so you can see what we meant by that:

<p>Hello World!</p>

<p>This is my first webpage, there are many like it but this one is mine.</p>

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

Which should render as such:

Hello World!

This is my first webpage, there are many like it but this one is mine.

This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

MOAR

The purpose of HTML is to add context to the content you are writing up so that it can be displayed and read. 

We’ve seen paragraph (p tags), so let’s now add headers. Headers have levels, 1 – 6, and should be used as hierarchy—that is you should only use level 2 under a level 1, etc., like an outline would require. 

This keeps things organized, and makes it easier for software such as screen readers to parse. 

The levels are just numbers on the h tag, so h1 is header level 1, h2, header level 2, etc etc. 

Let’s add some now. 

<h1>Hello World!</h1>

<p>This is my first webpage, there are many like it but this one is mine.</p>

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

<h2>Furthermore</h2>

<p>Some pages have many headings</p>
<p>Some headings have many subheadings</p>

<h2>However</h2>

<p>Not all do.</p>

Now refresh your page and you should see something like this: 

Hello World!

This is my first webpage, there are many like it but this one is mine.

This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

Furthermore

Some pages have many headings

Some headings have many subheadings

However

Not all do.

Your page now has structure. The words aren’t just words, but titles, headers and paragraphs. 

You’ll notice that the H1 and H2 tags render differently. The H2 tags are smaller, though still bigger than the p tag. It may be tempting to pick which level you want based on its presentation, but do not do this. HTML should be used for organization not for presentation. The presentation of these will be covered by CSS. 

So for now, even if you wish H1 was smaller, or H4 was larger, keep with the tag that fits the structure of your document. 

Lists!

Sometimes you have to just list things. A list is two elements. First you have to say what kind of list it is. There are two:

  • Ordered list, marked with an OL tag, these are numbered in order they are listed
  • Unordered list, like this one, marked with an UL tag

Then the elements of the list are marked with a LI, list item, tag. Let’s see how that works: 

<h1>The Plan</h1>

<ol>
    <li>Learn how to make HTML lists
    <li>Make a list of my favorite animals
    <li>Save my webpage and show it to everyone
</ol>

<h1>My Favorite Animals</h1>

<ul>
    <li>Elephants
    <li>Corgis
    <li>Alpaca
</ul>

But don’t use my list of animals make sure you put down yours! And if you need more, just start a new like with an LI tag. 

When you save and refresh your document, boom! You have LISTS, take a look: 

The Plan

  1. Learn how to make HTML lists
  2. Make a list of my favorite animals
  3. Save my webpage and show it to everyone

My Favorite Animals

  • Elephants
  • Corgis
  • Alpaca

Now, you may have noticed something about the LI tags—I didn’t close them. You can. That is

<li>list thing!</li>

Is perfectly acceptable HTML. it is just for this tag, the LI, a closing tag is not required. 

Link me!

What would a webpage be without a link? The idea of a link is at the very heart of the web itself, not just HTML. This small part of HTML is a powerful, important tool to how the whole web works. 

Links are an anchor tag, A, and are slightly more complicated than anything we’ve done before. Here’s why. For a link I need to have two bits of information: 

  1. Where is the link going?
  2. What words are in the link?

So if I wanted to have the words “Click Here!” Link to Wikipedia, it will get set up like this:

<a href=“https://wikipedia.org”>Click Here!</a>

The link still has a closing tag, </a>, but we have added additional information into the opening a tag. 

The HREF=“” (the quotes are important!) tells the browser where to redirect someone if they click on the words found in the A tag, which are “Click Here!” in this case. 

So, let’s get to linking! 

Let’s add a link at the end of our list to the Wikipedia page for our favorite. Don’t forget the P tags around your new link! 

<h1>My Favorite Animals</h1>

<ul>
    <li>Elephants
    <li>Corgis
    <li>Alpaca
</ul>

<p>Learn more about <a href="https://en.wikipedia.org/wiki/Elephant">Elephants on Wikipedia!</a></p>

Which results in this: 

My Favorite Animals

  • Elephants
  • Corgis
  • Alpaca

Learn more about Elephants on Wikipedia!

If you click that link, you’ll be learning about how awesome your favorite animal is. 

Link Types

There are two kinds of links. 

  • Absolute
  • Relative

Absolute links are links that start with an HTTP and give the full web address of your link, like the one we just did. 

Relative links are links that just contain the address of the file relative to the file that the link is on. So, if made a link to just href="about.html", then your browser would expect that in the same folder as mypage.html there is another file named about.html

So, let’s do that! At the bottom of our page before the body tag, let’s add a link:

<p><a href="about.html">About My Webpage</a></p>

If you refresh your mypage.html, you’ll now see the link to About My Webpage, but it doesn’t go anywhere yet, so let’s fix that! Open up a new blank file, and add this:

(macOS folks using TextEdit, don’t forget to do the steps above again for the new file)

<!DOCTYPE html>
<html>

<head>
    <title>About My Webpage</title>
</head>

<body>

    <h1>About My Webpage</h1>
    <p>This is my first weppage!</p>
    <p>see it <a href="mypage.html">here!</a><p>

</body>

</html>

Save it as about.html in the same folder as your mypage.html. Now the links will work back and forth between the files, so long as they live in the same folder together. 

Relative links are for linking pages on the same website together. 

Absolute links can be used for pages on the same website, AND are also used for external links (to other websites all together)

DIV me up!

There is another tag that becomes more useful later that we should talk about, the DIV tag. 

The DIV, for division, is something you use to group things together for organization. Something that with pure HTML may or may not be helpful, but when you start adding in CSS or JavaScript becomes VERY helpful. 

So let’s add some DIV tags to your webpage. We are going to group the top part together and add a bottom part that will be a footer. 

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
<div>
    <h1>Hello World!</h1>

    <p>This is my first webpage, there are many like it but this one is mine.</p>

    <h2>Furthermore</h2>

    <p>Some pages have many headings.</p>
    <p>Some headings have many subheadings.</p>

    <h2>However</h2>

    <p>Not all do.</p>
</div>

<div>
    <h1>The Plan</h1>

    <ol>
        <li>Learn how to make HTML lists
        <li>Make a list of my favorite animals
        <li>Save my webpage and show it to everyone
    </ol>

    <h1>My Favorite Animals</h1>

    <ul>
        <li>Elephants
        <li>Corgis
        <li>Alpaca
    </ul>
    <p>Learn more about <a href="https://en.wikipedia.org/wiki/Elephant">Elephants on Wikipedia!</a></p>
</div>

<div>
    <p><a href="about.html">About My Webpage</a></p>
</div>

</body>
</html>

When you save and hit refresh, nothing will change. So you may think “why did I do that?” And that will be more apparent when we get to CSS. But, anytime you are on a webpage and you see parts that are separated from each other, that was accomplished via DIV tags. 

That’s it?

No!

There are a lot more tags in HTML, especially if you want to make a form or any kind of user input. This is just a primer. 

A lot of the tags are functionally similar to the DIV tag, but semantic, meaning they have a specific role. This, again, is to help organization. 

So you can use a FOOTER tag to put some info at the bottom of your page. It will, however, work no different than the DIV tags that is already there. 

Let’s change the DIV tag we put around our about link to a FOOTER tag. 

<footer>
    <p><a href="about.html">About My Webpage</a></p>
</footer>

There are many of these tags you can use as you get into making your site like this. Tags like the MENU, HEADER (different from HEAD), SECTION, ARTICLE, are all available so you can organize your page by its content, as well as its function. 

But those are not things to worry about yet. Start with your basic tools for now.

A Good Start

These tags are a good start to your website making skills. They may feel basic—maybe because they are—but don’t mistake ‘basic’ for ‘useless.’ These are the very building blocks every site you’ve ever been to are built on. And even though there are other layers of complication between that site and your first html page, in the end, it is these simple tags that will define the pages you make.

And as you learn, you’ll start to use more complicated tools, you’ll learn new features and programs. You’ll probably not be spending your time in notepad.exe writing your website. 

But. Never forget. You can always open HTML in notepad.exe. That is its superpower, and what makes it so accessible as a file format. 

The MDN, a site for web developers maintained by Mozilla, is your reference book. It has all the info you could want on each of these tags, and more. If you want to start a deep dive, take a look at the links we just learned, or jump into the who thing:

The MDN https://developer.mozilla.org/en-US/docs/Web/HTML

I hope this helps get a few people started. Next time on the agenda will be some CSS! 

Bonus

While I was writing this, a fantastic tutorial called HTML for People came out, which gives a much more in-depth look at HTML for people who do not have experience with it. 

Check it out as a great next step from here!

Sometimes, the Beginning is the best place to Continue

I’ve been taking an online course on CSS that starts from the basics.

My original ‘course’ in CSS was on the job training as we converted a site from tables to CSS divs somewhere in the summer of 2000.

A lot has changed in the world of web programming since the dot-com boom when I was doing it professionally (well, as professionally as any of us were, I suppose), and while I still make web things, from WordPress plugins and themes to even dabbling in React.js and Svelte, it’s not my profession anymore. This means that while I’m dipping my toes back in everyone in a while—scraping through Google searches to find the answers to my questions—I’m not active enough in the space to catch up by working.

That was how I learned these things, programming Perl, then PHP, adding JavaScript to have mouse-overs. Tables for layout, and I’m going to admit here, in public, that there are days I wish we went back to tables for layout. I learned CSS ‘real-time’ as we updated the site from tables, hard coded styles and background images to a more fluid CSS layout over the summer.

The thing is this: sometimes the best way to learn is to start from the beginning. Sure, I know everything in the first couple lessons, but it wasn’t long before something new came out. A new term, a new phrase, a new best practice.

I know CSS. But I learned it then and patch-worked myself through updates and improvements throughout these years. I knew CSS, and even though I still use it often, the foundation is based on the lessons learned, right and wrong, all those years ago. At some point… at this point, the best way to continue learning is to start over.

Because it is not just specs and code that has changed over the years, but vocabulary, best practices, formatting and naming conventions (not that we had naming conventions in 1999).

This makes a basic course a refresher and a new foundation to build on from here. Don’t be afraid or prideful to take a step back and go over the basics once again.

Geocities is dead, Long Live Geocities

My first web page was a Geocities page. Freshman year of college, 1996. I still remember the address: geocities.com/area51/vault/1909. I even went and dug it out of the personal archives. You can find it here.

The front page was created with their creator software along with our guestbook. Incidentally, do people still have guestbooks? Do these kids today even know what they are? Then I went out and purchased a brand new hot off the press HTML 3.2 book. That is where the rest of the pages came from, frames and all.

Don’t kick the baby.

Why I made it or what to do with it, I really had no idea. I liked anime, but that wasn’t what my site was about. It wasn’t about anything, really. Just a collection of pages, HTML experiments and sometimes hosted files. It was a hodgepodge of randomness that never got altered. Why change it to something else when I could simply add on more?

But more important than purpose. More important than continuity or even coherence. This sight, Nowhere as I called it, was me. This was me on the internet. No longer was the world wide web something that I merely observed. It was now something I participated in.

That was a sense of empowerment. Sure I got practically no visitors, what was there to see? I still showed it off.

I went on. I made a tripod page for poetry. That one I used their template at first, but it was too cumbersome to update. So I remade the whole page using Netscape Composer (TABLES BEWARE!). On that one I jumped into some more Javascript. I had a menu I wanted on all of the pages, but didn’t want to write it over and over. If I added a page, I would need to update all of the other pages. So instead I made a Javascript function that printed out the menu. SImple and sweet, it later got me a job.

You’ll notice a blog-like page where I comment on updates to the site.

Next I tried XOOM (Xoom? xoom? hm) There I put ‘Jacob’s Ladder’ which was a site based mostly on AeroSpace Java programs. I made Java applets to find properties behind a shock wave and to get the atmospheric conditions at a certain altitude, etc. While it was neat playing with Java, I found myself with something more pressing than writing aerospace applets: aerospace homework.

All the while the Geocities site sat there, mostly ignored. So one day in 1999 (ish) I decided it was time for a revamp. The Vault was a neat name, so went for Vault 1909 as a site title. Worked with the page URL and even gave me a theme to design to. Made this page. So now it is much cleaner.

By this point I owned my first URL, theeverafter.com (as well as my name) and had been programming in Perl for quiet some time for a company started with two of my friends. While the free sites never really let us use CGI, getting my own server opened up an new world for me. I had been working as a web programmer since 1998 for various clients, but never really had my own production box to show off. (I had apache configured on my computer for building and testing). So the CGI I had been writing had always had a point. “I need a box that updates here.” “I need a place to get client email addresses.” Etc. Now I was free to do whatever I wanted.

So onwards I went. Perl, PHP, more Javascript, even some ASP (eek!). But in the end, it really all started with a small picture of Calvin at the top of a black website.

Godspeed Geocities.