Categories
HTML 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 HTML editor (for example Notepad++, CoffeCup, NetBeans, Kompozer, etc.) or you can use 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.

Do you like this gif? Check more gifs in theĀ store.

Once you have decided an HTML editor you are ready to begin creating an 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 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>.

Open 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.

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 featuring 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 behavior 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:

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 :). 

More about HTML Layout I will try to put in the next post. 

Leave a Reply

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