Basic HTML

Welcome to my basic HTML/CSS tutorials. (Note: This tutorial was originally posted on a separate website under the name 'Galaxy'.) Before we get started - what is HTML? HTML stands for Hyper Text Markup Language, which is probably a lot of gibberish to you. Luckily, the only part we need to care about is Markup Language. HTML is a programming language for "marking up" text - saying "this text here is a subtitle", or "this text here should be emphasized" - stuff like that.

Using HTML, we specify what we want the webpage to do. However, it's important to distinguish between this and how we want the webpage to do it. For instance, what we want to do might be to make certain text show up as a title. How we do it is by making it a little bigger and bolder than the surrounding text (and put it on its own line). It's important that, in HTML, we only specify what we want to do. It is with CSS that we specify how we want to do it, and that's covered in the next tutorial.

So let's get started, with... tags!

HTML Tags: An Introduction

If you've ever seen HTML before, you know there are a lot of things that go in between less than signs. These things are called tags. There are two types of tags in HTML, but we're going to just worry about one to begin with. The first type of tag is the opening and closing tag. Here is an example:

<em>supernova</em> explosion

There are a couple of things to note about this example. Let's not worry about what em means, and just focus on the basic syntax. First, notice how there is a forward slash in the second em tag. That indicates that it is a closing tag. The first em tag is an opening tag. Everything in between the opening and closing tags is affected by the tag.

Thus, in this example, the word supernova will be affected by the em tags, but the word explosion will not be affected (it is outside the tags). Pretty simple so far, right?

You can place these tags inside of each other. This is called nesting tags in programmer speak. For example:

<em>supernova <strong>explosion</strong></em>

Here, the word supernova is affected by only the em tag, but the word explosion is affected by both the em and strong tags. Now that we have these out of the way, let's talk about what these tags actually mean and do - and learn some more while we're at it.

A Smattering of Tags

Here are some basic tags that you should know about as a novice HTML coder. Remember that these are all opening and closing tags - they affect the text that they enclose. We'll talk about the second type of tag in the next section.

• em - This stands for "emphasis" and is used when you want to emphasize text. By default, this will render as italic.
• strong - This is used when you want to make text strong. By default, this renders as bold.
• h1 - This stands for "header 1" and is the largest type of header, or page title. There are also tags h2 through h6. They get progressively smaller, and are used for subheaders or subtitles. By default, this will render as bold, large text on its own line.
• p - This stands for "paragraph" and should be used to enclose paragraphs of text. By default, this will have the effect of pressing enter on your keyboard twice before the paragraph.
• div - This stands for division or divider, and renders similarly to a paragraph by default. However, you should usually not use the default rendering - divs are most alongside CSS.

For example, check out the following code. Can you guess what it will look like?

<h1>Page Title</h1><p>Lorem ipsum <strong>dolor</strong> sit <em>amet</em></p>

HTML Attributes

Next, let's talk about the a (or anchor) tag. With this tag, we introduce something called HTML attributes, which are certain traits that a tag can have. HTML attributes go inside of the opening tag and always have the syntax of ATTRIBUTE="VALUE". This will make more sense if we look at an example.

The anchor tag is what we use for links. It has an attribute called href, or hyper reference - the URL of the page that the link goes to. For example, take a look at the following code:

<a href="https://subeta.net/">Click Here</a>

What this will render is a link that says "Click Here". If you click the link, you'll be taken to whatever URL is the value of href - in this case, the Subeta home page.

Don't worry if this is still a little confusing. We will go over this a little more in the next section, which should make it clearer.

Stand-alone Tags

Remember how I said there are two types of HTML tags? One of the types is the opening and closing tags. That makes sense for things like emphasizing text, because it encloses the text that you want to be affected. Some things, though, like images, just stand by themselves and don't need to enclose anything. These are stand-alone tags. Take a look at the br tag as an example:

<br>

Pretty simple, right? It's just like the opening tags we already learned about, but without a closing tag. By the way, what the br tag does is make a line break. It's the same as pressing enter on your keyboard once.

The br tag is super simple - that's all there is to it. A more interesting stand-alone tag we can learn about is img, the image tag. This has the important attribute src, which should have as the value the URL of the image. It can also have width and height attributes, which are specified in pixels. For example, consider the following code:

<img width="100" height="100" src="https://img.subeta.net/items/food_programmercoffeemug.gif">

This is what the code above will look like:

Congratulations on sticking with me this far! You now know enough basic HTML to move on to the next tutorial: basic CSS.