Learning HTML5 in 10 days – Day 2

Lesson 1

As you just learnt how to code your first web page in the training of day 1, now let’s analyze in the figure 1 its structure in order to understand a little bit how it works.

Figure 1

<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
Hello World!
</body>
</html>

First of all, we gonna put a number indicating a successive order for every line of code, even if we have an empty line. If you are using an integrated development environment (IDE) software which is a software application that provides comprehensive facilities to computer programmers for software or web development. An IDE normally consists of a source code editor, build automation tools and a debugger. Most modern IDEs have intelligent code completion. They have also auto line number. You can find on the web many of them, most known as: Dreamweaver, Aptana Studio, orionhub, Brackets software, NetBeans, RJ TextEd and more. But, for the purpose of our training we simply use notepad software as code editor.

mysinglehost-rememberIntegrated development environment (IDE): Software that provides comprehensive facilities to code or program your own software or web application.

 

Let’s add line numbers! I am adding them only for the purpose of the training but don’t do that in your text editor. Unless you have an IDE software or your text editor has already auto line numbers.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>My first web page</title>
5. </head>
6. <body>
7. Hello World!
8. </body>
9. </html>

To code a basic html5 web page, you only need these tags below.

mysinglehost-rememberTAGS: A command inserted in a document that specifies how the document, or a portion of the document, should be formatted. Tags are used by all format specifications that store documents as text files. This includes SGML and HTML. To mark a section of a document with a formatting command.

 

  1. <!Doctype HTML>
  2. <html>
  3. <head>
  4. <title>(Here, you have to put  the title of your page)</title>
  5. </head>
  6. <body>
  7. (Here, you have to put your contents )
  8. </body>
  9. </html>

Here is an example of tag:
Opening tag: < >
Closing tag: < />

mysinglehost-tips
According to W3schools:

  • The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.
  • The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
  • In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
  • HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

*Important: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

Let us summarize!

Let’s resume the structure for a better understanding.

  1. <!Doctype html> ( An instruction to the web browser about what version of HTML the page is written in. In our case, we are using HTML5 version )
  2. <html> ( html opening tag )
  3. <head> ( head opening tag )
  4. <title> ( title opening tag )
  5. (Here, you have to put  the title of your page)
  6. </title> ( title closing tag )
  7. </head> ( head closing tag )
  8. <body> ( body opening tag )
  9. (Here, you have to put your contents )
  10. </body> ( body closing tag )
  11. </html> ( html closing tag )

Practice

Now, to put in place what you have learnt, i suggest you to take just 10 minutes today to read many times this lesson. Feel free to post your comments or questions about this lesson and it will be a pleasure for me to answer you quickly. It’s all for today about your Day 2 training. Your HTML5 trainer: Richard from MySingleHost Blogger’s Team.

Thank you,

4 thoughts on “Learning HTML5 in 10 days – Day 2

  1. Hello, i have a question. It’s about the html5 structure, if i want to build my page with to a specific language, i mean English, Spanish etc… Where i have to place it in my html5 structure, please?

  2. Sorry! i made a mistake when i’m typing so this is the right question => It’s about the html5 structure, if i want to build my page to a specific language, i mean English, Spanish etc… Where i have to place it in my html5 structure, please?

    1. OK, when you want to build a web page or website to a specific language like English, Spanish etc… Just put it in the second line after the Doctype declaration like this:

      < html lang=”en”>. Do not forget to include the character encoding “charset” declaration: < meta charset=”UTF-8″> in the head section.

      We gonna study in deep all the structure of HTML5 in the next Days training.

Leave a Reply