LEARN WEB DESIGN WITH DOKODEMO!

Created: Apr/10/2021 || Updated: Jan/1/2022

So you want to learn HTML? You've come to the right place if you're tired of those drag-and-drop pay-to-use website builders that appear whenever you look for tutorials. I've never seen a good HTMl tutorial. It's always gotta be overly confusing or written by a 12 year old.
Welcome to my HTML tutorial!
In this tutorial I'll be going over the basics of HTML, so even beginners can get started.

I'll be teaching you how I personally make a website. Everyone does it differently, so I'll try to be flexible with how I teach you. But dont be surprised if my way is different than other ways you've seen. Also note that this tutorial will be based on Web 1.0. Meaning, nothing fancy. Things I design will be similar to personal Geocities pages from 2001.

If you've never done anything technical with computers before, learning HTML might seem intimidating. But I assure you, it's as easy as writing an essay. However, it is time consuming. When I first started HTML, I didn't use any tutorials or took any classes. It was all through trial and error and StackOverflow.

So, where would one start writing HTML? Well, you could just open up Notepad and start there like everyone did in the 90's. But NOW we have programs specifically to write code.

"But what code editor should I use?"
I personally use Brackets, It's open-source and free!
Another good option would be Visual Studio Code, it's basically the same thing.
If you don't want anything fancy, you could just stick with Notepad++. It's basically notepad but for code editing (which means it comes with the useful colored text!)
And if you want to be that person, you could use Neocities' built-in HTML editor. It's just the editor that appears whenever you edit your site (if you're hosting your site on Neocities)

Jump to a section!

• An Introduction to Website Creation
• Getting Started with HTML

An Introduction to Website Creation

A website consists of HTML, CSS, and JS files. As well as images, audio, and other media that will be hosted on your website. It's all stored in a websites' directory. Basically, wherever you're hosting your website.

(Lets get this straight before I begin, a website is the ENTIRE website. EVERYTHING hosted under, for example, dokodemo.neocities.org.
A webpage is a singular page on that site. The homepage, for example. Or the games section.
A website is the book, while the webpage is, well, the pages inside of that book.)

HTML stands for Hypertext Markup Language.
It is a markup language, meaning its only used to tell the browser what to display, where to display it, and what it is. It's basically how I get my text to
look like this.
Ever used BBcode on a forum? BBcode is basically a simplified version of HTML, so if you've used that before, you've already written HTML!
If you don't know a single thing about HTML (which I assume is why you're reading this) the best thing I can compare it to would be a text document. You have the text itself, and you can select the little buttons at the top to change how the text appears and where it appears, you can choose to add pictures and links and fancy decorations.

HTML works hand-in-hand with CSS, which stands for Cascading Style Sheet. CSS is basically how you can get your webpage to look...

HTML is the barebones of the page. It holds the contents of the page like the text, images, links, audio, buttons, etc.
While CSS is what gives it personality! It tells the browser how the text should look, how big the image should be, the background image of an element, the position of an element, etc.
If you removed the CSS of a webpage, the contents will be intact, but it'll just format like a text document.

Getting Started with HTML

Before I teach you how to set up your first document, its very important that you know what starting and closing tags are. Every element has one. It's what tells the computer where the begining of an element is, and where the end is. It's very important that you have both so you're able put things inside other things, like a folder!

<p>Here is some text written in a paragraph tag. Neat!</p>

You see those little brackets with the p in them? Those are tags. Every element must contain a starting tag, and an ending tag. You can tell the computer it's an ending tag if you include a / Some elements don't have an ending tag, but that's because they don't have content inside. Paragraph tags have starting and ending tags because they have text inside, whereas images do not. If you ever wonder if you should include an ending tag, ask yourself: "Will I be putting content inside this?"

When you first create an HTML file, you need something to tell the computer "Hey, this is HTML we're working with." Since I'm feeling generous today, I will provide you with the most basic of basic HTML templates! But it isn't really a template because every single HTML file in existence has these.

<!DOCTYPE html>

<html>
<head>
  <title>My first webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
  <body>
  
  </body>
</html>

I'll walk you through what we're looking at.
At the very top, you should see <!Doctype HTML> This is PRETTY MUCH all you need to tell the computer that everything in this file is HTML. This doesn't need a closing tag, so you shouldn't worry about that.

Next you see <html></html>, this is all of the contents of the page. Every HTML file has these. Dont worry about this one either, you won't be doing anything with it.

Next you should see head tags. Those wont be displayed anywhere on the page, it's basically where you put all the important information like the title text that shows on the pages tab in your browser, or the little icon thats displayed next to it. It's also the place to put a Stylesheet. A Stylesheet is basically a fancy term for the CSS page. I'll talk more about CSS later.

After the head tags come the body tags, the most important tags!
The body is what is shown on the actual page. Nothing more to it than that. Everything you write will go in these tags. If not, it wont display.

That's about all you need to begin making a page!
I mentioned tags earlier, but what other tags will you need?
There are THOUSANDS of tags, but only a handful of them are used frequently. You can find a list of tags on this page. Don't be overwhelmed. To be honest, I don't even recognize most of these. So that really goes to show how little most of these are used.

Here's a few important tags that you'll be using the most.

<h1>Header One!</h1>
<h2>Header Two!</h2>
<h3>Header Three!</h3>

Headers! There are 6 different headers to choose from, but most of the time only three are used. BUT it's nice to have choices, because you can style each of them however you please!
If you've written a document in Google Docs or Microsoft Word before, you should know what a header is. It's the big text at the top of a document. It's pre-styled with various sizes (h1 being the biggest, h6 being the smallest) but you can change them later on.

<p> I am a paragraph. I am a block of text. I take up the whole width </p>

Ah, paragraphs. the original div tag
A paragraph is, you guessed it, a paragraph! Paragraphs are pre-styled with margins on the top and bottom, and they take up the whole width. If you put a paragraph tag after another paragraph tag, it'll automatically begin on the next line. This is called a block element, it's the opposite of an inline element.

<span> I am text within a span! </span>

Spans are (basically) just inline P tags. It's used for any text that isn't a paragraph. A good example of a span would be... this text! It's just a one-off section of text that can be placed inside of a paragraph for example, since you can't put paragraphs inside paragraphs. Spans are also good for titles when you don't want to use headers, specific colored text inside of a paragraph, image descriptions, anything that is too small to be a paragraph.

<img src="/media/placeholder.png">

Images! The image tag can include pretty much any type of graphic. PNG, JPEG, GIF, etc.
This tag doesn't need a closing tag, because the image is its own element, which means nothing can go inside of it. The image file itself is specified with src (source), and within the quotes is where the location goes. The location can be a full link, like https://adeleine.neocities.org/media/placeholder.gif or a directory. I'll tell you more about directories later on, but for a quick rundown, the directory is the location on the current webpage. So it would look like /media/placeholder.gif, and it'll search the current website for that file. (So you don't have to put the entire URL.)

<a href="https://crouton.net/">This is a Link!</a>

The <a> tag is a link. Links are extremely important to a webpage, and what differentiates a webpage from a simple text document. The href part of this tag stands for hypertext reference, it's where the url goes. Basically the location of the link.
The <a> tag does have a closing tag, because anything you put between those tags will become a link. The standard for links are words, but you can also put images into it.

<div> I am text inside of a DIV container! </div>

Divs! A <div> is a container. Whenever you see a box around something, it's a div. The white box that this entire post is in is inside of a div. You've seen divs everywhere before, you probably just didn't know what they were called.
Wanna make a fancy pink box around a block of text with an image inside? Just put div tags around that content and style it. You can nest divs inside other divs to create extremely complex layouts. Divs are the basic template for creating any interesting website!
Sidebars? Div.
Image galleries? Div.
Comment section? Div.

<strong>Bold text</strong>
<i>Italic text</i>
<del>Crossed out text</del>
<mark>Highlighted text</mark>

Text decorations!
There's not much to it. You can place these inside paragraphs and spans, they only give the text a special look. Purely decorational.

Bold text
Italic text
Crossed out text
Highlighted text

You can find more of these here

<br>

Break!
Not breaktime for you unfortunately. The break tag tells the computer to put everything after it onto the next line. It's important if you want to
write
something
like
this
but don't want to put multiple paragraph tags. (plus, it begins DIRECTLY on the next line, so there's no space between the two)

<hr>

The horizontal line!
Horizontal lines aren't too important, but they've been here from the begining so I figured I'd add em. It's best for breaking up separate paragraphs, its solely decorational. It's another block element which means it takes up the entirety of the line. You can style this one anyway you like, but this is the default:

---

If you've been on a forum before you're probably familiar with this one.