Get Going with HTML

What is it?

HTML is the language that is used to create web pages. When you open a web page in a Browser (Chrome, Firefox, Internet Explorer, Edge, Safari, etc.), the website sends an HTML file to your browser. The browser reads the HTML which tells it what to display in the page.

Look at the Example, below.

Example
<HTML>
<HEAD>
<TITLE>Get Going with HTML</TITLE>
</HEAD>

<BODY>
<H1>Example 1</H1>
This is the first example
</BODY>
</HTML>

The HTML tags are contained within ‘less than’, < and ‘greater than’, > symbols.

The first tag, <HTML> just tells the browser that the following is HTML. The next tag <HEAD> tells the browser that this is the beginning of the header section. Web pages have two sections: the ‘header’ section and the ‘body’ section. A tag starting with a forward slash denotes the end of a tag and so the end of the header section is given by the </HEAD> tag.

Next we have the title which is between <TITLE> and </TITLE> tags. This text will be displayed in the title bar of your browser when it opens this page.

Between the <BODY> and </BODY> tags we have major content of the web page. <H1> means this is the heading (you can also have lower level headings H2, H3, etc). After the end of the heading, </H1> there is some text: “This is the first example” which your browser will display in a smaller font. Finally the </BODY> and </HTML> tags denote the end of the body section and the HTML page.

Get Going with it…

1. Open notepad(or TextEdit on the Mac)
2. Type or copy the example into notepad (or TextEdit on the Mac)
3. Save it as HTML01.htm
4. Because the file name has a .htm extension your computer recognises it as an HTML web page so that when you double click it in windows explorer (or Finder in Mac), it will open your browser and give it the file
5. Double click the file in windows explorer (or Finder in Mac). Your computer will open your browser and give it the file

Congratulations. You have created a web page and opened it.

There are a couple of things to note here. Firstly, every web page follows this format – i.e. a head and a body with tags to tell the browser what to do. Most web pages will have additional tags to create links, tables, etc, but these tags are simply that – tags which instruct the browser. The second thing to note here is that HTML is much simpler than a full blown programming language. Programming languages have conditional statements such as ‘if’ statements HTML does not have conditional and thus it is simpler than a programming language.

Have a Play

1. Have a look at other webpages by opening them in your browser and pressing F12.

Next Steps…

John Kent
©Simply Testing

Leave a Reply

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