HTML Tutorial – Part 1

THE BEGINNING OF HTML TUTORIAL

In this tutorial, we will learn about HTML. This tutorial will be divided into several parts. Let’s get started with the tutorial.

Q. What is HTML ?

  • HTML is an acronym for Hypertext Markup Language. HTML describes the structure of Web pages using markups. It is used for creating websites. You need a good understanding of HTML to become a better web designer or a web developer. The latest version of HTML is HTML5.

Q. Do you know who introduced HTML?

  • If you google, “Who invented HTML”, you will get the answer as “Tim Berners Lee

Q. How does a simple HTML look?

  • Below is the HTML startup template.

Output:

Q. How to view HTML of any website?

  1. Go to the website that you want to see for HTML source code.
  2. Right click on the page.
  3. Select View Source.

Q. What do we need to start writing HTML?

Checkpoint:

At this point, make sure that you have completed following steps.

  1. You have a text editor and a browser.
  2. Copy the starter code from above, paste it into new file and save it as hello.html .
  3. Double click your new file, hello.html .
  4. Compare your output with the output above.

If you were unable to do any steps above or you did not get any similar output then comment below so that we could help you at this point. Otherwise, you can proceed further with the tutorial.

Before we begin writing HTML, it is important to know some basic terms in HTML.


Some basic HTML terms to remember:

HTML structure

  • I am sure that you have seen or read newspaper and books. There are headings, sub headings, paragraphs, images and so on. There are different pages for different sections. It has been structured well so that readers are able to differentiate between articles. Similarly, HTML needs to be structured well. We use HTML elements to structure our HTML page.

Simple example on structuring the web page using limited HTML elements. Do not worry about all the HTML tags shown below, we will learn them later in this tutorial. 

 

Output:

HTML Elements

  • HTML elements starts with opening tag and ends with closing tags. Generally, HTML tags are referred as elements. Some important HTML elements are <head></head>, <title></title>, <br>, <p>…</p> and so on.

HTML Tags

  • <” is a left angle bracket and “>” is right angle bracket.
  • The starter of an element is known as opening tag and the tag that ends the HTML element is known as the closing tag. In the closing tag, we add the forward slash (“/”) before the tag name. Most of elements will have opening tags as well as closing tags in a pair such as
    • <div>… </div>
      •  (Here, <div> is opening tag and </div> is closing tag)
    • <p>…</p>
      •  (Here, <p> is opening tag and </p> is closing tag)
  • There are self-closing tags in HTML which do not need closing tags to end it.
    • <br>
    • <hr>
    • <input>
  • NOTE: The term for tags and elements is often used interchangeably.

HTML attributes

  • Attributes are added to any elements to make elements more descriptive. It provides extra information to the element. Certain attributes like src, alt, width and height is used to specify the source, alternative text, width and height of the image in the html.
    • <img>
      •  (Here, <img> is HTML element without any attributes)
    • <img src = “myImage1.jpg” alt = “My Image 1” width= “800” height = “600” >

      Attribute Name

      Attribute Values

      src

      myImage1.jpg

      alt

      My Image 1

      width

      800

      height

      600

Block Elements

  • Elements that take the whole area from left to right in any section is known as Block elements. For example, <h1>…</h1>, <p>…</p>, are block elements. Whenever you define a <p>…</p> element, it will start in a new line or say it will make up a block.

Inline Elements

  • Elements that continue to align with another elements on same line is known as Block elements. For example, <em>…</em>,<img>, <a>…</a> are block elements.

Below you can see the difference between the block element and inline element.  The red box is the area occupied by each block element whereas the white box is the area occupied by each inline elements.

 

Output:


That’s all for the HTML tutorial Part 1.

Continue learning on HTML tutorial Part 2.