Getting Started with HTML

G
andrewgbliss
3 months ago

This is a beginners guide to learning HTML. We will go over how to create your first HTML webpage using VS Code.

. . .

Github repo

https://github.com/EntryLevelDeveloperTraining/html-workshop

Getting Started

First you will need to download a text editor so you can create and edit HTML files. You can use your favorite text editor if you wish. However I will be using VS Code (Visual Studio Code) in these articles, using extensions that easily hot reload when editing a file. Hot reloading means when you edit a file and save it will auto refresh the browser so you can quickly see your changes.

Here is a link to download VS Code (Visual Studio Code):

https://code.visualstudio.com/

Writing your first webpage

In VS Code in the File Directory you will click New File, and name it index.html.

The index.html file is the very first webpage people will see when they visit your website.

So let's start by create your first webpage by adding some HTML tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    Welcome to my website 
  </body>
</html>

What is an HTML tag?

An HTML consists of a starting tag and an ending tag. You create a tag by typing the less than symbol like this:

<

The the name of the tag, for instance the title tag as in the code snippet above:

<title

Then a greater than sign, like this:

<title>

And as for the ending tag you will need to add a forward slash after the first less than sign:

</title>

So the full HTML element is this:

<title>My Awesome Web Page</title>

Everything in between the tag is the text we are marking up. A title tag changes the title on the tab of your browser.

What is a self closing HTML tag?

A self closing HTML tag is a tag that opens and closes within itself, there is nothing in between, such as this line break tag:

<br />

This line break tag adds a line of blank space in your webpage.

Tags required to create a webpage

<!DOCTYPE html>

This DOCTYPE tag says that the document we are viewing is an HTML document.

<html>

This html tag says that anything within this tags is considered to be the actual contents of the HTML webpage we are going to show.

<head>

This head tag is useful for storing meta data, changing the title of the webpage, and loading in different scripts and files, such as JavaScript, and CSS.

<body>

The body tag is the actual contents where you add videos, images, text, forms, where people can see your webpage.

Viewing your webpage

So now we have created a first webpage, we can use the VS Code extension called Live Server. If you don't have it installed, go to the Extension tab on the left, and search for Live Server. When you have that installed, there will be a blue tab at the bottom of VS Code. Click Live Server and it will open up a browser window with your HTML webpage.

Conclusion

HTML is the language we use to write webpages. In the next article we will go over how to use Headers tags.

Next Article
HTML Header Tags

G
andrewgbliss
3 months ago