Greetings and welcome!

My name is Mia. If you’re just starting your web development learning process, this tutorial series is for you. Perhaps you’re looking for a resource on HTML to recommend to a friend who is just starting to learn about web development. Or perhaps you’re looking for a refresher course because you previously learned HTML, but it has been a few semesters or even years since you looked at it. Or perhaps you have another justification that I haven’t even considered. Whatever the case, you’re welcome, and I hope I may be of use to you.

I’ll mention a few tools and references throughout the tutorial, and I’ll include links to everything I mention in the summary below. Let’s begin studying HTML.

Describe HTML.

HTML, or Hypertext Markup Language, is an acronym. The most fundamental component of the web is HTML. It describes the purpose and organization of web content. The term “hypertext” describes linkages that join online pages together, either within a single website or between websites. In general, HTML annotates text, graphics, and other content for display in a web browser using markup. Here is an illustration of a few of these markup components.

However, we must first acquire the essential tools before applying these markup elements to build a web page. Start by using a web browser. I’ll be using the Google Chrome browser in this series, in case you don’t have one or are interested in seeing which one I’ll be using. It is available for download at google.com/chrome. Therefore, if you don’t already have it and want to utilize it, download and install it right away. Then return to the instruction.

I’ll also be utilizing the Chrome plugin “Dark New Tab”. At chrome.google.com/webstore, you can purchase extensions for the Chrome web browser. To utilize the plugin I’m using, search for “Dark New Tab.” Find it, install it, and take use of a browser new tab page with a dark theme.

A code editor is yet another crucial tool that we require. At the moment, Visual Studio Code is the industry standard. You can write HTML code in different code editors, but I suggest downloading the free version of Visual Studio Code from code.visualstudio.com. It is compatible with Linux, macOS, and Windows.

Open Visual Studio Code once it has been installed. It is necessary for creating and altering HTML code. Open your code editor now, and then return to the tutorial.

Now that Visual Studio Code is installed and open, let’s go on. A welcome screen or a blank window could appear. Create a folder on your computer and place your HTML files in it, that’s everything you need to do. Go to the “File” menu in Visual Studio Code, pick “Open Folder,” and then select the newly created folder. Now that you’re in that folder, you may start creating your first HTML file.

Click the “+” icon in the file explorer or select “New File” to start a new HTML file. Because the file name “index.html” is generally used to launch a website, type that. Keep in mind to use lowercase letters only and leave no spaces in your file names. It’s excellent practice to use all lowercase letters, hyphens, or dashes to denote separation, even if Windows might not object if you use spaces or uppercase characters. Every file must finish with “.html.”

The “html” element itself will be our first HTML element. There are two primary sections of an HTML page: the “head” and the “body.” The “body” of the page comprises the viewable content, whereas the “head” contains metadata about the page. Both of these sections are encapsulated by the “html” tag.

Let’s put some metadata inside the “head”. We’ll start by including a “title” element. This title will appear as the tab’s title in the browser rather than on the page itself. Give it the title “My First Web Page.”

We’ll now add some actual content to the “body” of the page. Starting with a “h1” element—a top-level heading—will be our first step. We’ll use the text “Hello World” for this heading. Let’s include a “p” element (paragraph) to add some explanation text as well. The text will read, “This is my first web page.” Our page structure is now taking shape.

Let’s improve our development environment before viewing our web page. To improve my experience, I use a few optional addons in Visual Studio Code. For nicer file type icons, I suggest using the extension “vscode-icons”. When you install it from the Extensions menu, icons will appear next to your file names, making it simpler to distinguish between different file kinds.

The “GitHub Theme” plugin is an additional one that I find helpful. It offers a dark theme for the code editor, making it more comfortable for the eyes during extended periods of coding. Additionally, you can set it up through the Extensions menu.

The “Live Server” addon is the one we require the most, though. Using this plugin, we can view our website and track changes in real time on a local development server. Install “Live Server” from the Extensions menu, and a “Go Live” button will be added to the window’s bottom right corner.

Upon clicking “Go Live,” a new browser tab displaying your website will open. You can preview your web page here in your local development environment without having to upload it to a web server. You’ll see an IP address and a port number in the address bar. This shows that your computer is currently running the page.

You can shut down the server by selecting “Stop” from the menu that displays after selecting “Go Live.” You might be wondering at this point how to validate your HTML code. The W3C Markup Validation Service is useful in this situation. The World Wide Web Consortium (W3C) has made a tool available for you to use in order to validate your HTML code.

Visiting the W3C website and selecting the “File Upload” option will allow you to access the service. To upload a “index.html” file, choose it and then click “Check.” The service will give feedback on the authenticity of your code, highlighting any mistakes or alerts that require action.

Remember, a bit of progress each day goes a long way. Strive for progress, not perfection. If you found this tutorial helpful, please bookmark my page and make sure to share it around so maybe someone else that wants to learn HTML5 can do so.