Web Design Tutorials 2: Starting HTML5

In the previous tutorial “First Day to Web Design” we introduced Web Designing, HTML, CSS and JavaScript. In this section we are going to start HTML specifically HTML5.

Starting HTML5:

First of all, you need a text editor to write the HTML5’s codes. You can start with windows notepad as well or other softwares such as: notepad++, atom and etc… but I suggest SublimeText3. Download SublimeText3 by visiting their website, Install and run it.

Some Points:

  • HTML5’s files must be save with .html extension.
  • HTML is based on tags, the most you need to learn. Everything you need to show out on the webpage must be written inside tags. Tags have starting point like <tag> and ending point like </tag>.
  • HTML5’s structure has two sections, a head section and a body section. head section starts and ends with <head> codes here </head> Body section starts and ends with <body> codes here </body> tags.
  • Below codes which represent HTML structure for a webpage must be written in every HTML file.

HTML5 structure

  • You can type them manually or insert them with trick; how? Create a new file in SublimeText, save that with “.html” extension and type “html:5” then press TAB button on your keyboard.

Coding First HTML5 Webpage:

Open SublimeText3 create a new file and save that with “.html” extension. Copy and paste the following codes inside the new created file.

Description: If you have a look on the codes, you might get that it is consist of two section as mentioned above; a head and body section. In the head section inside title tag, the name of the website is written and inside the body section (inside the body tags), a message “Hello CodeJow audience” is written inside <p>Hello Codejow audience</p>; paragraph tags.

Press “CTRL + S” to save, right click on the screen and select “Open in Browser”. Your browser must look as bellow.

First HTML5 webpage

Congrats if your browser looks like above picture, you have successfully create first HTML website.

Follow us; Next we will learn more about HTML:5 and feel free to share and ask your questions through comments with codejow.

Comments

  • Leave a Reply

    %d bloggers like this: