WWW or the World Wide Web is a system used to find and access different resources on the internet. There are millions of websites on the internet. To access these websites, you start with “www” followed by the website domain name. These websites uses hypertext to cross-reference or link related resources anywhere on the Internet.

HTML (Hypertext Markup Language) is the language used to code web pages. These pages can contain text or multimedia contents. HTML files are ASCII text files that contain the text to be displayed and the markup tags that tell how to display them. These markup tags allow the content of the page to be formatted, to insert multimedia contents etc. 

In this article we are going to learn the basics of creating a website from scratch using Notepad. There are many ways to create HTML pages. You can use the File Manager code editor, there are plenty programs that can do this for you, like DreamWeaver, MS Visual studio, Wordpad, Notepad ++, Kompozer or any text editor like the simple Notepad to create an HTML page. In this tutorial we are going to use the free Notepad that comes with Windows, but it is a lot easier if you use Notepad++ (you can download it for free on the internet) once you choose the HTML language, everything you write will be automatically connected with different colors.

Just follow these few steps and you will have a basic working web page in minutes!

Step 1: Starting Notepad:           

Go to Start then “Accessories.” Click “Notepad. or right click on your Desktop, “New” then click “Text Document”.

Step 2: HTML Type:        

Our very first thing to write will be <!DOCTYPE html>

This declaration must be the very first thing in your HTML document. The <!DOCTYPE html> declaration is not an HTML tag but it is an instruction to the web browser, it tells the web browser what version of HTML the page is written in. For HTML5, simply write <!DOCTYPE html>

Note: You can ignore this declaration, your code will still work, but it always good to start with this declaration so that the browser knows what type of document to expect.

Step 3: Write your first HTML Tag:           

The HTML tag <html> is our first tag. This tag tells the browser that the code is an html document. this is the container of your page everything else will be written inside this <html> tag and its closing tag </html>.

Step 4: Header:

Below the <html> tag, it’s the <head> tag. Inside this tag, it is where code is stored that processes styles, scripts and links to internal documents like javascript, css, ect. cand so forth. These styles will not display on the webpage but will influence how the webpage will be displayed. The tags used in the head section are <title>, <style>,<base>, <link>, <meta>, <script>,and <noscript>. In this demonstration, the title tag <title> is used inside the Head tag. The <title> tag sets the name of the page (text of the page for the browser toolbar and search results). Close the <title> with </title> and the <head> tag with the </head> tag.

Step 5: The body of the page:

The <body> tag is where all the content for your website is stored. Everything that you want to be visible on the webpage should inside the <body> and the closing </body> tag.

There are some few tags that can be inserted inside the <body> tag that we are going to discuss briefly:

HTML Headings:

The headings are defined with the <h1> to <h6> tags to create Titles (headings) for your contents on the page. Everything included inside the <h> and the closing </h> tags will be displayed as heading. <h1> is the biggest heading and <h6> is the smallest.

HTML Paragraphs:

To create a paragraph, the contents of that paragraph should be placed inside a <p> tag and a closing </p> tag.

HTML Links:

If a link is required to an internal or external webpage, the tag used is the <a> tag. The link address is specified in the href attribute.

Example: Create a link to “www.studentcompanion.co.za” with a Text link which will be visible that says: “link to Student Companion”:

<a href=”http://www.studentcompanion.co.za”>link to Student Companion</a>

HTML Images:

If you want to insert an image into your page, the tag to use is the <img> tag. The filename and the size of the image are provided as attributes as well. If the image file is not located in the same directory as the page, then the full image location path together with the name should be provided as well. The alt attribute specifies the alternate text, in case the image doesn’t load. If you hover your cursor over the image, the alternate text will show in a tool tip but only in Internet Explorer, for other browsers it’s better to use the title attribute in addition to alt.

Example: Display “SA Companion.jpg” image with a width of 104 and height of 142.

        <img src=”SA Companion.jpg” alt=”Student Companion” width=”104″ height=”142″>  

Step 6: Save your work:

Go to “save as”, put a file name with an .html extension and choose “all files” or “text” under file type. Double click your page from where you saved it and it will load on your default web browser. We named our page “index”, if a page it to be a home page for it to load in your web server, you must name it “index”  (all lower case because Linux is case sensitive). If you name your home page home for example, the server will not recognize it as the home page. And that’s it! Very simple indeed!

You can download the full project files below here.
All the files are zipped, you will need to unzip them (Download a free version of the Winzip utility to unzip files).  

Download Project: html