Creating Your First HTML Document

Published on March 09, 2023

Prerequisites:

I suggest reading the "Intro to HTML" article before doing the exercises. It will help you with the terminology we will be using.
If you don't already have an IDE (integrated development environment) would also suggest you read the "Setting up VS Code for HTML" article so you can follow along with the exercises.

Creating and Opening a Folder

Create a folder somewhere you can locate it for your first HTML document.
Then, open VS Code.
Open the folder you created by clicking "File" → "Open Folder".

VS Code Screen. Open Folder from dropdown

Navigate to where you created your folder and select it.
Click "Select Folder".

Creating an HTML Document

Right-click (Control + Click for Mac) in the area below your file name.

VS Code Explorer area with right-click area highlighted

In the menu that pops up, click on "New File".

VS Code - Right Click Menu. New File Highlighted

Type the name of your HTML document with ".html" at the end. I suggest "index.html".

An index.html tab will open on the right side of the window.
Type "!" and hit enter.

A boilerplate of the doctype, head, and body will appear. If you aren't sure what that is, check out the "Intro to HTML" article.

You've created an HTML document!

Adding Content

The first we're going to do is change the title of the page. Look for the <title> Document </title> line in the boilerplate. Change the word "Document" to whatever you want to name your page. Here I changed the title to "My First Document".

1	<title>My First Document</title>

Now, look for the <body></body> tags. Here is where we are going to add the visible content.
In between the body tags, we are going to add a <h1> tag. Click between the body tags and press enter. In VS Code you can type "h1" and press enter for the <h1></h1> tags to appear. Type the title of your page in between the <h1> tags.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First Document</title>
  </head>
  <body>
    <h1>My First Document</h1>
  </body>
</html>

In the lower right of your window, click "Go Live". It will open a browser window and show you your document.

Now let's add some paragraphs. Press enter so you are under the <h1> element.
In VS Code you can type "p" and press enter for the <p> </p> tags to appear. Place the cursor between the <p> tags and press enter.
In VS Code you can type "lorem25" and press enter to produce "Lorem Ipsum" with 25 words.

Lorem Ipsum is placeholder text.

Repeat steps 6 and 7 a few times changing the number for the Lorem Ipsum as you see fit. In my example, I will place 5 paragraphs.
Look at your browser page. It should look similar to this:

Congratulations! You've created your first HTML document with some content! If you want to learn how to make it look better head over to the "Intro to CSS" article!

Top photo by Janette Campbell with elements from W3C.

Setting Up VS Code for HTML

Published on March 08, 2023

Ready to start writing some HTML documents! We need to get your work environment set up first. My preference is VS Code. It's free from Microsoft. There are a lot of IDEs, or integrated development environments, available for you to use. If VS Code isn't to your liking, you can do a quick search for "free IDE software" and find no shortage of opinions on which one is the best.

Depending on which language you choose to program in, you may find another IDE better suited to your goals. However, we are using VS Code to work on our HTML documents.

Installing VS Code

First things first, we need to get VS Code installed!

Download

Head over to https://code.visualstudio.com/, or do a search for "VS Code" and click on the link for the "Visual Studio Code" site.
Download the "Stable Build" for your computer. If it didn't automatically detect what type of computer you have, click the dropdown arrow and select your download.

Install

Windows

Find the file. It's usually in the downloads folder.
Double-click on the file to open it.
If you agree to the terms, Accept the License Agreement.
In the next window, make sure "Add to PATH" is checked and click next.

Click install. That's it. You're done!

Mac

Locate the file on your computer.
Double-click the zip file.
Drag the .app file to the Applications folder. That's it. You're done!

Recommended Extensions

Code Spell Checker

Code Spell Checker catches spelling errors. I'm constantly misspelling things, so this has been a must-have.

Live Server

Live Server allows you to see the changes made to your website dynamically in your browser. This means you don't have to refresh the page each time you make a change. It automatically refreshes the browser for you.

Prettier - Code formatter

"Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary." - Taken from the extension description.

SonarLint

"SonarLint is a free IDE extension that lets you fix coding issues before they exist! Like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of C, C++, HTML, Java, JavaScript, PHP, Python, and TypeScript, and you can install it directly from the VS Code Marketplace." - Taken from the extension description.

There are many more extensions to choose from, but these are the ones I suggest for HTML.

Top photo by Janette Campbell with elements from W3C.

Intro to HTML

Published on March 08, 2023

HTML, or Hyper Text Markup Language, is the foundation of every website you see on the internet. It's like the bones or skeleton of the website. Without HTML, websites would just be a jumbled mess of text and images, with no organization or structure.

HTML is like the glue that holds everything together in web development. It allows us to create headings, paragraphs, links, images, and so much more. Every website you've ever visited has been created using HTML. Whether you're browsing social media, shopping online, or reading the news, you're interacting with HTML code behind the scenes.

So, if you're interested in web development, learning HTML is an essential first step. It may seem daunting at first, but once you get the hang of it, you'll be well on your way to creating amazing websites of your own!

Parts of an HTML Document

To start there are three important parts of an HTML document you need to know. The doctype declaration, the head, and the body. You're probably most familiar with the body, it is the part that holds the parts the viewer interacts with. Not to worry, we will talk about the other parts and all will be clear, hopefully.

Doctype

The first part of an HTML document is the doctype declaration. It looks like this:

1	<!DOCTYPE html>

It tells the browser which version of HTML you are using. This one tells the browser we are using HTML5, which is the latest and most widely used version of HTML. Without this declaration, the website may not display properly.

Head

The next part of the HTML document is the head, not to be mistaken for the header. The head goes inside the HTML tags which look like this:

1
2
3

<html lang="en">

</html>

It contains important information the page needs. For instance, the title of the page, the meta information, and the links to CSS stylesheets and JavaScript files. It typically looks like this:

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="script.js" defer></script>
    <title>Programming Bliss</title>
  </head>

In this example, we have the data that tells the browser which character encoding we are using, what to do if it encounters an older version of Internet Explorer, and what the user's visible area is. It also has a link to the stylesheet and the JavaScript file. And lastly, it tells the browser what the title of the page is. The title is what shows up on the browser tab.

Body

The body also goes inside the HTML tags. It typically looks like this:

1
2
3

  <body>
    
  </body>

This is where everything you want people who visit your website to see.

All Together

All put together you will typically see the doctype, the head, and the body like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="script.js" defer></script>
    <title>Programming Bliss</title>
  </head>
  <body>

  </body>
</html>

Tags vs. Elements

Now that you know the basic parts of the page, we will get into the fun stuff! Putting content into the <body> tags. The first thing to know is that tags and elements define the structure and content of the page, and how it should be displayed to the user.

HTML tags are used to create the elements that make up a web page, such as headings, paragraphs, links, images, and forms. Each tag is enclosed in angle brackets (< >) and consists of a tag name and optional attributes. For example, the <h1> tag is used to create a top-level heading, while the <p> tag is used to create a paragraph.

An HTML element is made up of an opening and closing tag as well as the content in between. This is what an element looks like:

1	<p>Hello, world!</p>

In the above element, we have an opening <p> tag with the content "Hello, world!" and a closing </p> tag.

Common HTML Tags

Tag	Description
<html>	Used to indicate the beginning and end of an HTML document. All other tags and content are contained within these tags.
<head>	Used to contain the metadata about the document, including the title, stylesheets, and other information that isn't visible on the page.
<title>	Used to define the title of the document, which is displayed in the browser's title bar.
<body>	Used to contain the visible content of the document, such as text, images, and other HTML elements.
<h1> through <h6>	Used to define headings of different levels, with <h1> being the largest and most important and <h6> being the smallest and least important.
<p>	Used to define paragraphs of text.
<a>	Used to create hyperlinks to other web pages, files, or locations within the same document.
<img>	Used to insert images into the document.
<div>	Used to define a division or section within the document, which can then be styled or manipulated separately from other content.

For a complete list of tags check out W3 Schools.

HTML Attributes

HTML attributes provide additional information about an HTML element. They are found in the opening tag of an element with the value inside quotes. For an image, there is usually an "src" attribute that tells the <img> tag where to find the image. There is also an "alt" attribute that displays alternative text if the image can't be shown, or if the user is visually impaired. Below is an example of what this looks like.

1	<img src="/images/landscape.jpg" alt="A beautiful landscape">

In the above example, the attribute "src" has the value "/images/landscape.jpg" and the attribute "alt" has the value "A beautiful landscape".

Another common attribute is "href", which specifies the destination of a hyperlink.

1	<a href="https://blog.janettecampbell.com">Visit Programming Bliss</a>

In this anchor tag, we see the attribute "href" that contains a URL. This URL is where the link will navigate when clicked. In this case, when the text "Visit Programming Bliss" is clicked, it will take you to "https://blog.janettecampbell.com".

For a complete list of attributes check out the mdn web docs.

Now that you know the basics, head over to "Creating Your First HTML Document". Where we will put what you've just learned into practice!

Top photo by Janette Campbell with elements from W3C.