Welcome to Silicon Overdrive!

Linkedin Youtube

Welcome to Silicon Overdrive!

HTML Series: How to Create Your First HTML Page

Overview

Now that we’ve covered what HTML is, what it stands for and its basic elements or tags, it’s time to create your first HTML page!

Before creating your first HTML page, ensure you have visited the following posts:

Follow our step-by-step guide below to build your first page.

Step 1: Install or Open an HTML Editor

In this step, you can make use of two options:

  1. Plain Text Editor: You can make use of your computer’s plain text editor which should be installed already.

2. Install Notepad++: You can also install Notepad++, a free text and source code editor available to users with Microsoft Windows. This free software editor is great as it allows you to have multiple tabs open to work in whereas the computer’s plain text editor/notepad only allows you to have one window open.

Click here to download the software.

Step 2: Add the Basic HTML Code

Type in the code below. Ensure you place each item on a separate line, like the layout below.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta name=”viewport” content=”width=device-width”>

     <title>A simple HTML document</title>

</head>

<body>

     <h1>Hello World!<h1>

<p>This is my first HTML page.</p>

</body>

</html>

Note

<!DOCTYPE html>

Although <!DOCTYPE html> is included with the rest of the HTML elements, it’s not actually HTML code but the document type declaration. It tells the web browser that the document loaded is an HTML5 document. 

Ensure you type it as DOCTYPE and not doctype as it is case-sensitive.

<head> + <title>

If you read our previous articles at the top, you know by now that the head element allows you to store information about the document, like the title of the document, etc.

<body>

The body element contains the actual content like paragraphs, images, etc.

Step 3: Save the File

When saving your file, you must ensure you add “.html” at the end.

Example

“myfirsthtmlpage.html”

Without “.html”, your document will be saved as a normal text or “.txt” file.

In Notepad++, you have the option to make the file an HTML file. Simply navigate to “Language” in the menu, go down to “H”, then select “HTML”. See below.

notepad++-language

Step 4: Open the File

Once you have saved the file, navigate to where it’s stored on your computer and double click on it. It will be opened in your default web browser.

In Notepad++, simply navigate to “View” in the menu, “View Current File In”, and choose your web browser.

notepad++-run

Other HTML Editors

If you’re not keen on using your computer’s default text editor or Notepad++, according to Template Toaster, here are the Best Free HTML Editors in 2020:

  1. Notepad++ (Windows only)
  2. Adobe Dreamweaver CC
  3. CoffeeCup
  4. Aptana Studio 3
  5. NetBeans
  6. Bluefish
  7. Sublime Text
  8. Phase 5 HTML editor (Windows only)
  1. NoteTab (Windows + Linux)
  2. Atom
  3. BareBonesEdit (Mac only)
  4. CotEditor (Mac only)
  5. Brackets
  6. Komodo Edit
  7. TextMate (Mac only)
  8. UltraEdit

By now you’ve learned what HTML is, what elements or tags are, attributes, etc. and how to create your first HTML page.

Bookmark our blog page to stay up to date with our HTML series to ensure you continue learning about the wonderful language.

If you liked this, you'll love these...

Trend Micro Cloud Conformity

Trend Micro Cloud OneConformity Awarded both AWS Cloud Management Tools Competency and Security Partner Competency, Cloud Conformity’s security and governance platform delivers continuous assurance that your infrastructure is compliant, secure, and optimized. You can pull instant compliance reports for major,

June 15, 2020
Trend Micro Deep Security
Security

Trend Micro Workload Security

Trend Micro Workload Security Trend Micro Workload Security is a comprehensive security and cloud protection suite that scales seamlessly and helps you maintain continuous compliance. Workload Security protects your AWS workloads against threats, malware and vulnerabilities with IPS/IDS, application control,

June 10, 2020

We use cookies to track visitors, measure ads, ad campaign effectiveness and analyze site traffic. We may also share information about your use of our site with 3rd parties. For more info, see, our Cookies Policy, our Privacy Notice. By clicking “Accept All” you agree to the storing of all cookies on your device. In case you don’t choose one of these options and use our website, we will treat it as if you have accepted all cookies.

Accept All

We use cookies to track visitors, measure ads, ad campaign effectiveness and analyze site traffic. We may also share information about your use of our site with 3rd parties. For more info, see, our Cookies Policy, our Privacy Notice. By clicking “Accept All” you agree to the storing of all cookies on your device. In case you don’t choose one of these options and use our website, we will treat it as if you have accepted all cookies.

Accept All