HTML For Dummies

, , ,

You’ve always wanted to create a web page or a web site. But you don’t consider yourself a computer geek. Creating a basic web page does not involve any hard-to-learn programming or coding. If you stick around for a few minutes, you will be able to create your first web page today!

Web pages are created using HTML. Hyper-text Markup Language (HTML) is not a programming language. It is a markup language used to create web pages. If you are new to HTML, you will be able to pick up the basics in a few minutes and to create your first simple web page.

Basic information

  • We create a web page in a text editor application – not in a browser!
  • We save the text file with “.html” (eg: index.html) as its extension name.
  • We view the .html file using a browser. When you double-click the html file, your computer might automatically open it using a web browser such as Chrome, Firefox or Safari.
  • What if you wish to edit your HTML file? You can edit the file in a text editor even while it is open in a browser. When you refresh the web page, your browser will reveal the changes you brought about in the code.
  • You can use any editor (but not a Word processors) to create and edit HTML files. The basic text editor in Windows is Windows Notepad. There are better editors available out there. Notepad++ can be downloaded and installed for free. Sublime text editor can be used for free but it will keep reminding you to buy it! Install Notepad++ (On Linux, use your default text editor such as gedit, vim, etc.)

Basic HTML Code Template

Here’s a set of illustrations that will help you to visualize and to remember the basic structure of an HTML document.

  • The first line in every HTML document is a declaration that the file is an HTML document.
  • Whatever follows this declaration is the HTML code.
  • Every HTML document has two sections: the head section and a body section.

If we remove the human figure from the illustration, we are left with the basic structure of an HTML document.

In every HTML document, we specify these main sections and declarations using elements. Each element comes between tags. Look at the image below.

  • The first line in every HTML document is <!DOCTYPE html>
  • Whatever follows this declaration comes between the two <html> tags.
  • The head section comes between the opening and closing <head> tags. Similarly, the body section comes between the opening and closing <body> tags.

In reality, tags such as <html> have an opening tag as well as a closing tag. <html> is the opening tag. </html> is the corresponding closing tag. All HTML code should come in between these HTML tags as seen in the example below.

If we rearrange the elements and tags slightly we get the basic boilerplate template for a web page as shown below:

We include special information about the web site between the <head> tags. The browser will not display whatever we include there. The special information includes the title of a web page, information about the language, characters encoding, information on styling, etc.

On the other hand, a browser will display whatever comes between the opening and closing <body> tags.

You will type in the lines of HTML code into a regular text editor and save it with a name that ends in .html. For example, the file name can be index.html. When you open it using a web browser, the browser will interpret the lines of code and display the content in a structured manner.

Here is an example (above) of a web page with bare minimum HTML code.

In the head section, I specified the character set as “utf-8”. UTF-8 is a specification that includes characters of many languages. In the body section, I included the text “My First Web Page!”between the <p> and </p> tags so that the browser recognizes it as a paragraph.

If I open this HTML document in a browser, it will just display the line My First Web Page!

Create Your First HTML page

  1. Open your text editor. A new blank text file is now available for you. Before you type anything, save it to a known location as index.html. Sometimes, programs such as Windows Notepad will select the extension name .txt for you. If there is a drop-down to menu to select the file type, select “All types”. That will help you to type the file name in full as “index.html” (without quotes). In Notepad++, you may find a drop-down menu to help you select the file type. Or, just type in the full file name as index.html.
  2. This is for Windows users only. (Linux users, skip to next step!) Enter the file name correctly. Open Windows Explorer and find your newly saved file. Is the name of the file shown as index.html? Then, you are good to go. Otherwise, if the filename is shown as “index.html.txt”, your editor added that unnecessary “.txt” to that filename. In that case,
    • Close the text editor.
    • Rename the file as “index.html” in Windows Explorer.
    • Then, open the file in your text editor again. How? Right-click on the file and choose “Open with …” and choose Notepad or Notepad++ or whatever editor you were using.
  3. Type the following lines into the new index.html file in your text editor. You could copy and paste these lines but it’s better to type it in so that you get a feel of it.
  4. Save the file. Don’t close it yet.
  5. Open your Browser. If it’s already open, open a new tab. To open your new file, press Control+O (it’s O, not zero) and find your new index.html and select it to open it. What do you see? You should be able to see your first web page. It has a heading that says “Hello World” and a line below that which says “This is my first web page.”
  6. Explore further. If you feel adventurous, go back to your text editor. Instead of “Hello World!”, type some other heading. Instead of “This is my first web page”, type something else. SAVE the file. Then, go to back to your browser. The changes won’t be reflected here unless you REFRESH your web page. There are two ways to refresh the page. Press Control+F5 or right-click on a blank area and choose “Refresh” option. Keep experimenting!
  7. Learn. If you wish to know what this sorcery is all about, pay attention:
    • The above lines form the basic minimum code at the heart of every web page.
    • The first line <!DOCTYPE html> tells the computer that this is an HTML file.
    • Everything else is wrapped between <html> and </html>. These words within angle brackets are called tags. <html> is an opening tag. It has a corresponding closing tag </html>. All tags are usually written in lower case.
    • Whatever is within the HTML tags goes into two sections: head and body sections. As you can see, the head section comes between the opening and closing head tags. The body section comes between the opening and closing body tags.
    • Whatever comes inside the body tags will get displayed on your web page!
    • What goes in the head section? That is reserved for meta data – information about the page, such as the title of the page, information about styling, author, key words, character set, etc.
    • In the index.html file you created, you had a heading and a paragraph. The heading was bounded by the tags <h1> and </h1>. We call it h1 because it is the first level heading. You can have six levels of headings. Instead of h1, you could write h2 or h3, all the way to h6. The second level heading h2 is smaller in size than h1. We call the whole statement <h1>Hello World!</h1> an element.
    • You created a paragraph using the <p> and </p> tags. In fact, all paragraphs are created using the <p> tag. This tag automatically creates a paragraph and inserts space above and below the paragraph to make it stand out. To add another paragraph, you would use another set of <p> and </p> tags.
    • There are numerous tags to format text: to make letters bold, italic, to underline, to make something superscript or subscript, to center a heading or paragraph on a page, to change the color of letters, to choose a font, font-size, etc. There are tags to create hyperlinks, to insert images, tables, etc. You will learn all these and more.

Viewing Your Code in a Browser

You can view your code without leaving the browser.

  • Go back to your browser where your first page is displayed.
  • Right-click on an empty space on the page and choose the option “View Source.” Immediately, a new tab will open to display the HTML code that created that web page!

What does that tell you? You can discover the HTML code of any web page by viewing its source code!

Your next step

You’ve got your feet wet. It’s time to take the plunge. I recommend the Mozilla Web Docs site where you have a free course in HTML. In a few days or even hours, you can learn how to display text, images, and hyperlinks. After learning HTML, you can learn CSS (short for Cascading Style Sheet – used for specifying formatting styles). HTML and CSS go hand in hand. They are very similar. If you wish to make your web page interactive, you can learn JavaScript at a later stage.

This is where you start >> MDN: Getting Started with HTML

Safe Journey!

Leave Comment

Your email address will not be published. Required fields are marked *