Categories
Web development

HTML Basic

Today let’s concentrate on HTML. HTML is not a programming language. It is a basic markup language for Web pages. With HTML you can create your own website but before you write any code you should decide on an HTML editor (for example Notepad++, CoffeCup, NetBeans, Kompozer, etc.) or you can use it to write simple text editors like Notepad (PC), or TextEdit (Mac). I have chosen the TextEdit, and personally, I think it is a very good choice for very beginners.

HTML basic

Once you have decided on an HTML editor you are ready to begin creating your own page. Start by creating a file named “index.htm” (it will be your main page of a website). 


Once you have created the “index.htm” file and it is open in your HTML editor insert the code below into your page.

<!DOCTYPE html>
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
     You can write something here.
  </body>
</html>

All HTML documents need to have a doctype declared. For HTML5 documents we will use <!DOCTYPE html>. It has to appear once and should be at the top of your document.


Next up in the HTML document is <html> element. The document should starts with <html> and ends with </html>. The visible part of the document is between <body> and </body>.

HTML Basics

Open a saved HTML file (double click on the file) in your browser (Safari, Chrome, Firefox, etc.) The browser doesn’t display HTML tags but uses them to determine how to display your document. What you can see in the picture below.

HTML Basic

Writing HTML documents is pretty much writing tags, attributes, and content. What is then the difference between tag and attribute?


Tags and attributes are basic of the HTML. They work together but feature different functions. 


Tags begin with the less-than (<) and end with greater-than (>). These symbols are called “angle brackets”. Tags must be opened <tag> and closed </tag> with the element information such as a title or different text between the tags.

For example <h1>This is a header.</h1>
                    <p> This is a paragraph.</p>

To see full HTML List Tags click here.

Most of the tags can have attributes. Attributes are additional values that configure the elements or adjust their behaviour in various ways. 


Example. I added to our HTML document three possible values of align attribute: left, center and right. 

<!DOCTYPE html>
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
     You can write something here.
  <p align= "left">Left side</p>
  <p align= "center">Center</p>
  <p align= "right">Right</p>
  </body>
</html>

and this will display on your browser:

HTML Step by Step

With this information, you can start projecting your own website, however before you will do the next step think first, how your website should look like and what it should contain. You can take a look below and plan your own HTML layout. You will enjoy it :). 

HTML basic

Enjoy coding!

Read also:

HTML Basic Elements part.1

HTML Basic Elements part. 2

HTML Scroll Box