HTML Get Started

Let’s start learning HTML now. You don’t have to follow all the topics are included here. You can skip the topic you already know about.

Create a New Folder/Directory

I recommend you to create a new folder/directory in order to keep the whole project in there. And it’s better to make the folder into a different drive, not on Desktop or into (C:) drive for your future safety.

  1. Open Windows Explorer by pressing Windows Key (Windows Key Icon) +E
    ─ or, Click Start (Windows Start Button Icon) → Computer (Windows 7 and Vista).
  2. Open a drive. For example ─ (D:) drive, (E:) drive, or any other.
  3. To create a new folder, press Ctrl+Shift+N together inside the drive.
    ─ or, Click the New Folder button (New Folder Icon in Windows 7) in the command bar.
    ─ or, Right-clickNewFolder (New Folder Icon) .
  4. Give a name for the folder (e.g. “html”) or anything else.
  5. Press Enter.

How to Create a New Folder/Directory in Windows 7


What Needs to Start Learning HTML

  • A Browser (Chrome, Firefox, IE, Safari) to test your code.
  • A Text Editor like Notepad (Windows) or TextEdit (Mac).
  • Educational Qualification is not so important but at least we should have ability to read and write in English. I think Primary education is much enough.
Tip: I recommend you to use Notepad++ because it’s very simple and easy to use. You, as a beginner, should not use such kind of software will suggest codes while writing (e.g. ─ Dreamweaver, PhpStorm). You should memorize all of codes.

Download Notepad++

Go to notepad-plus-plus.org to download this software. And after completing download, install the software in your PC.

How to Open Notepad and Notepad++

  1. To open Notepad, Click Start (Windows Start Button Icon) → All ProgramsAccessoriesNotepad.
  2. To open Notepad++, Click Start (Windows Start Button Icon) → All Programs then scroll down and find Notepad++
    ─ or, type “Notepad” or “Notepad++” into Start menu Search box. The software will appear while typing.
    ─ even you can open it up from desktop by clicking on the Notepad++ shortcut icon if available.
How to Open Notepad and Notepad++ in Windows 7

How to open Notepad and Notepad++ typing into Windows 7 Search box.

Write Some HTML Code into a Text Editor

Now it’s time to write some html code into your text editor or copy the code from below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A simple HTML document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

How to Save an HTML File.

  1. Press Ctrl+S or Ctrl+Alt+S (for notepad++) .
    ─ Or, click FileSave as from Notepad++ Menu bar.
  2. Select the location where you want to save the file.
  3. Give a name for the file with .html or .htm extension.
  4. Press Enter.
How to Save an HTML File with Notepad

How to Save an HTML File with Notepad++

Warning: You must give the file name with extension (e.g. index.html). Here index is a file name and .html is an extension of the file.

View an HTML File with a Browser

  1. Simply double click on the saved file to open it with a default browser.
    ─ Or, Right-clickOpen with, then choose a browser.

How to Change the Default Open with Program

Change the Default Open with Program

When you double click on any HTML file, the file will just open with a default program but you obviously can change this default setting.

  1. Right-click on the file → Open withChoose default program
  2. Select a Browser and finally Click on ok button.

How to Change the Default Open with Program in Windows 7

Note: Make sure Always use the selected program to this kind of file is checked.

How to Show HTML File Extension

File extensions are not shown in Windows 7 by default. To see the files with extension like HTML file with Extension

  1. Open the Windows Explorer once again by pressing Windows Key (Windows Key Icon) +E.
  2. Go to Menu bar (Windows Menu bar image).
  3. Click on ToolsFolder options…, next select View tab.
  4. Scroll down and uncheck Hide extensions for known file types.

How to Show File Extensions in Windows 7

Show the Menu bar in Windows Explorer

By default, this Menu bar (Windows Menu bar image) is not shown in Windows Explorer. To show it ─

  1. Open the Windows Explorer.
  2. Click on Organize (Toolbar Organize image) → Layout.
  3. Select Menu bar.

How to Show the Menu bar in Windows Explorer in Windows 7