Learn HTML

HTML (HyperText Markup Language) is the code you use to define the main elements of a web page.

HTML 5

HTML has gone through many revisions over the years. The latest agreed standard is HTML 5 as defined by the W3C (World Wide Web Consortium).

Creating an HTML file

The first step to creating a web page is to create an HTML file. All you need to do is create a text document with a simple text editor and give it the file extension .html or .htm

You must use a text editor like Notepad, Notepad++ or Geany when editing an HTML file. Programs like Microsoft Word are not true text editors, in that they include special characters that are invisible while you are editing. These ruin HTML files and will break the pages you create!

It is advisable to name your first HTML file index.html. All web servers look for an index file to display by default. If your file is called something else, then you will need to specify the full file name in the URL (that’s the website address to you and me) when linking to it.

Here are a couple of examples for you.

HTML File Example 1

This links to a file called index.html http://www.alansitsolutions.com/examples/example1/

HTML File Example 2

This example file name is notindex.html

http://www.alansitsolutions.com/examples/example2/ This link does not work!

To link to the file properly, you need to write it like this…

http://www.alansitsolutions.com/examples/example2/notindex.html

Not so user friendly is it. Best practice if you are going to have multiple pages, is to create a separate folder for each page and name the file index.html for each. That way URLs stay clean and easy to read.

Coding your first HTML page

Here is some code for a very basic web page. It is the bare minimum you will need to get started.

<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Example 1</h1>
<div>
<p>This page's file name is index.html</p>
<p>You can link to it without using the file name.</p>
</div>
</body>
</html>

Every page needs the following:

<!DOCTYPE html>

This first line tells the browser that it is an HTML 5 page.

<html> </html>

The content of the page must always include an opening and a closing html tag.

<head> </head>

This tag includes important information about the page, which is visible to the browser, but not necessarily to the person viewing it.

<title> </title>

Write the page title between the opening and closing title tags. It displays in the tab of the browser window and is also used for search engine results.

The two <meta> tags (note there is not a closing tag) are optional but highly recommended. More detail about them another time.

<body> </body>

Everything that you put between the opening and closing body tags appears on the web page. All of the text, pictures, video and anything else you see or hear sits between these tags.

So what about <div>, <h1> and <p> tags? They contain your content. Again, we will go into more detail about them in another article.

Comments

Leave a Comment

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

Loading Disqus Comments ...