Let's be Neocities official! A targeted HTML tutorial!

Hey, Fletch! HTML and CSS are those languages you can so so easily just find a short tutorial on. But I'm hoping making this guide based on how I learnt might provide a greater incentive for you to make your site! Disclaimer, I ultimately don't mind if this doesn't click, but you spend too much time on Twitter x

HTML refers to the content of a page, whereas CSS styles the content. So, we'll start with learning the former. It might be objectively better to walk you through the entire skeleton of a HTML file but, like, whatever? You learn what <meta name="viewport" content="width=device-width, initial-scale=1.0"> means when it becomes relevant. So I'll skip the bloat.

The Basic Structure

We'll start with a modified version of the default page when you first make a Neocities site:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The web site of taterinx</title>
  </head>
  <body>
  </body>
</html>

As you can sort of see, most elements in this language have an opening tag and a closing tag:

<html></html> wraps everything up in a nice HTML fajita roll.
<head></head> for the metadata!
<body></body> for the actual content!

However, there are some exceptions, usually when the element is used to specify instead of contain. We'll ignore most of the (granted, important) jank in <head></head>.

First Task: Change the content inside the <title></title> element! This is just the text that appears in a browser tab :)

The Building Blocks

Basic Text

Now onto the <body></body>! Pages are built with elements. You could very well just type some words, and they will very well appear on the page. However, they will appear as just a single, combined and confused, line. BORING. THAT'S SO BORING! BOOO! YOU SUCK!

<br> separates lines! But no space between them!
<p></p> breaks lines into paragraphs! With space between them!

Because <br> is more so a request, "DO THIS! SPLIT UP NOW!", it doesn't have a closing tag. <p></p>, however, closes because it can contain a many things! Especially the following things:

<strong></strong> makes your text bold
<em></em> makes your text italicise¹

Let's combine it all:

<p>Hello! I go by <strong>Biggus</strong>!<br>Welcome to my site, please make yourself comfortable.<br><em>And don't touch the leaves of three, let them be!</em></p>

Second Task: Use these elements to make your own introductory paragraph (or set of paragraphs!)

Headers

If you find yourself writing an abundance, you little naval-gazer, then you may want to include some headers! These are tags that start from the largest <h1> all the way to the teeniest <h6>.²

Most stay in the <h1>, <h2>, <h3> area.
<h1> should be the header for the page, and one of a kind.
Headers will, by default, break away into its own line.

Lists

<ul></ul> bulleted list.
<ol></ol> numbered list.
<li></li> the list items. Think of this tag as the bullet point.³

<ul>
  <li>I'm 21 but tell the bus driver I'm 19 for discounted tickets!</li>
  <li>Cats are my favourite; penguins are second.</li>
  <li>I lov e Fletcher with all my heart.</li>
</ul>

Links & Images

These may look a bit more complicated. Take the following:

<a href="https://taterinx.neocities.org/">My actual site!</a>

<a> is the element, which closes because it contains the hyperlinked text (or image!) that you want to appear in place of the full link whereas the href="" contains the link itself.⁴

<img src="https://taterinx.neocities.org/images/diary/wig.jpg" width="120" height="90" alt="A picture of me!">

<img> is the element, which doesn't require a closing tag because it doesn't contain any other elements. src="" contains the link to the image. Changing the width and height is preferred because, otherwise, it'll default to the original size (which could be super inconvenient).

alt="" is the text that appears if your image can't load, or if the viewer is visually impaired. This is an accessibility concern so it's not "necessary" but is greatly encouraged.

Third Task: Add everything you've learnt to finish up your homepage! You can link your social media, add a picture of your dog, and/or list your interests!

My final page code looks like so:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial | Taterinx</title>
  </head>
  <body>
    <h1>Welcome to my site!</h1>
    <img src="https://taterinx.neocities.org/images/diary/wig.jpg" width="120" height="90" alt="A picture of me!">
    <p>Hello! I go by <strong>Biggus</strong>!<br>Welcome to my site, please make yourself comfortable.<br><em>And don't touch the leaves of three, let them be!</em></p>
    <h2>About Me</h2>
    <ul>
      <li>I'm 21 but tell the bus driver I'm 19 for discounted tickets!</li>
      <li>Cats are my favourite; penguins are second.</li>
      <li>I lov e Fletcher with all my heart.</li>
    </ul>
    <h2>Rules of the site!</h2>
    <ol>
      <li>Play nice, else a baby cries.</li>
      <li>Waaaaaaaa... waaaaaa</li>
      <li>Look what you've done!</li>
    </ol>
    <a href="https://taterinx.neocities.org/">My actual site!</a>
  </body>
</html>

The results: The results of the HTML code

Footnotes

You could also use <i></i> and <b></b> but I swear there's a difference I can't remember. There is also ~~strikethrough~~ with the <s> tag (this requires a closing tag or else you'll strike through everything after it!)↩
In a tutorial, you can make the default stylings of these headers absolutely redundant, as they can be modified just like any other text.↩
If you're feeling like it, you can nest lists! Just place a <ul> or <ol> tag inside of one of the <li> tags.↩
<a> tags can link to more than webpages. If you give an element an ID (e.g., <p id="about-me"></p>), then you can add a hyperlink <a href="#about-me"> that'll take you straight to that part of the page! But we'll learn more about IDs and Classes later.↩

#website