Create a blank HTML page

Undoubtedly, the most established web technologies are the specifications published by the W3C. That is why it's important to know all the news they're doing. You can work with HTML in its first version perfectly. The backward compatibility is, for me, one of its strengths. But if you want to take advantage of the current browsers you need to learn the last version of HTML.

1. Open a text editor

To start, you need a text editor to write your HTML code. You can use the text editors that come with each operating system. For example you can use Notepad for Windows, TextEdit for Mac OS X or Gedit for Ubuntu Linux. In internet there are a lot of text editors for all operating systems.

My favorite text editor is Geany because it's simple and it's multiplatform for all operating systems.

2. Write HTML code

Once you open your favourite text editor type the following:

<!doctype html>

<html>

  <head>
    <title>A blank HTML page</title>
    <meta charset="utf-8" />
  </head>

  <body>

  </body>

</html>

In the first line, <!doctype html>, you define the type of document. This element tells the browser the version and the type of HTML used in the document, in this case would be the last version of HTML. With this, the browser will use the rendering model for the type of document. If you not specify the document type the browser will interpret the HTML code written as it wants. Very different results are obtained in this way, even between two versions of a same browser. Therefore, it is always best to define the type of document.

With the next element, <html>, you define the HTML document and tells the browser the beginning and end of the HTML page. Their labels are: <html>, put it even after specifying the type of document, and </html> always put it at the end of the document. For this and all others elements is necessary define the beginning and end of an element with tags. The syntax is <tag_name> for a start tag and </tag_name> for an end tag. The only label that does not need to close is <!doctype html>. If among these tags are not going to enter text you can also write as follows: <tag_name />.

The third element, <head>, has the function of delimiting the file header. The header is the appropriate section to include information about the document, most of which will not be shown to your visitors. To include this information you have different elements, so far only the two most important comment: title and meta.

With the element <title> you indicate the title of the document. What you include between these tags is the name that appears at the top of the browser.

The element <meta charset="utf-8" /> is used to specify information about the document itself. The meta elements are often part of the head element of the document. The attribute charset="utf-8" specifies that the document will follow the UTF-8 encoding format of Unicode characters.

Finally, the element <body> defines the document body. Here are all the contents of the page you want to show your visitors: text, images, videos, etc.

3. Save as HTML file

Known items and how form a HTML page, now save the document with an html extension, an example would be template.html. Run the file and you'll see your browser with a blank screen.

4. Validate it

Finally, to validate your HTML document, go with your favorite browser to the W3 validator. Now you see a row of tabs, click Validate by File Upload. Then click the Browse File button and select the file you created earlier. And finally click the Check button. If you have not seen any problems you will have your document validated. Congratulations! You've created your first HTML page!

1 comment:

  1. Thank you, am just starting out with HTML5 trying to create a Peer to Peer HTML5 Presentation file.

    ReplyDelete