Basics of HTML

Introduction to HTML
*for detailed tutorials on HTML please visit www.w3schools.com*


HTML, which stands for Hypertext Mark-up Language, is the most basic building block of a web page. Almost every website that you have ever seen uses HTML to show you the stuff that you see on their web pages. HTML dictates every website's look, but not its functionality.

When you are browsing a website, your browser (Firefox, Chrome, Internet Explorer, etc.) reads an HTML file in the background, understands the code written in the file and displays the webpage accordingly.

Just like you read a page in a book written in English and your brain automatically understands what it means, a browser also reads a webpage written in HTML and understands what it needs to show to the user.

Ok, enough of theory, let's get started with your first piece of code already! Following is a simple code in HTML:

<!DOCTYPE HTML> <html> <body> <p>This is a paragraph</p> </body> </html>

Code Explained:

  • In the above code, <DOCTYPE> specifies the type of the document. 
  • The entire webpage content is inserted between the <html> and the </html> tags.
  • The text between the <body> and </body> describes the visible page content.
  • The text between the <p> and </p> is the main content of the webpage.
  • The webpage is designed to output the following text: "This is a paragraph".

Remember, HTML is the most widely used mark-up language in the world. A mark-up language is a system in which we are able to clearly distinguish the language markers from the actual text. There exist thousands of HTML markers, also known as tags, available to web developers to define the looks of a website. We shall learn more of these markers in the next few topics.

Test Yourself

1 point

Q1. What does HTML stand for?



HTML Basics

HTML (Hyper Text Markup Languages) is the language used to write Web pages which consists of tags embedded in the text of a document.

HTML was invented in 1990 by a scientist called Tim Berners-Lee.The purpose was to make it simpler for scientists at different universities to gain access to each other's research pages. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

HTML stands for Hyper Text Markup Language

  1. A markup language is a set of mark-up tags 
    1. Example <head> <html> <body> <img> etc 
  2. HTML documents are described by HTML tags
  3. Each HTML tag describes different document content
Tags & Elements

In the previous tutorial, you had an outline on what markers or tags are. Now let's explore and understand more about tags. Technically, tags are used to format HTML Documents. Tags are always enclosed in angular brackets (< and >) and are generally used in pairs, the first of which is called a start and the other, the end tag.

Note that all HTML content is added between these tags. An element is everything from the start tag to the end tag. To have a clear understanding of this concept, consider the following code:

<h1>h1 is a 'header' tag.</h1>

In the above code, <h1> is the start tag, </h1> is the end tag and the whole content, i.e. '<h1>h1 is a 'header' tag.</h1>' is the element.

TIP

HTML tags are not case sensitive. However, usage of lowercase is recommended.

Let us learn about a few commonly used tags.

Tags which are labelled as h1, h2, h3, h4, h5 or h6 are header tags and are used to display the headers in any page. '<h1>' refers to the header tag with the maximum size while '<h6>' outputs the smallest header.

Try changing the element of the code to something like this - 'I started coding already'. Also, replace <h1> with each of the following - <h2>, <h3>, <h4>, <h5> and <h6>. What do you infer? Did you notice that size of output decreases as the header tag's number increases? That was all about header tags. But what if you have to start a new paragraph? <p> tags are paragraph tags and are used to display paragraphs. Have a look at this example:

<p> This is the first paragraph.</p> <p> This is the second paragraph.</p>

Try and use these tags in your code and see the results. 

TIP

You can use this online editor which will allow you to see the output of your codes simultaneously. 


HTML elements with no content are called empty elements. For example: <br> is an empty element. It has no closing tag. The <br> tag defines a line break. Try using the <br> tag in between the paragraph content that you wrote and see what happens. Try using multiple <br> tags.

TEST YOURSELF

1 point

Q1. What is the significance of a tag in HTML?


1 point
Give an example of an empty HTML element? 


Learning few basic Tag which we will be using in further Lessons

LINK Tag

Links are used to navigate to documents/ webpages/ websites. The existence of web is itself because of its connectivity, which is made possible through the use of links.

The HTML <a> tag (anchor tag) defines a hyperlink. The destination of the link is defined in the href attribute of the anchor tag. A link can be a word or an image. If the link is a word, then the word should be written in between the start and end anchor tags. If it is an image, the image should be inserted between the anchor tags. You can even have a whole paragraph as a link. Think about how you can do this.

A link can be absolute or relative to the current page. An absolute link is shown below. Note that the href value of an absolute link starts with 'http://'.

<a href="http://www.cloud.boltiot.com">Bolt Cloud</a>

A relative link is shown in the code below. IMPORTANT: Remember that the following relative link will only work if the target page (nextpage.html) exists in the same folder as the current page. When you work on your project website, practice links as much as possible, so that you get comfortable with them.

<a href="/nextpage.html">Goes Nowhere</a>

As you can see, clicking the link "Goes Nowhere" takes you to a page which is not found. By default, an unvisited link is underlined and blue and turns purple when visited.

Note

By default, when you move the cursor over a link in a Web page, the arrow turns into a little hand.


The target attribute specifies whether to open the linked document/webpage in the same tab or in a different tab.

<a href="http://www.clooud.boltiot.com/" target="_blank">Bolt Cloud</a>

The above code sets target as _blank which opens the linked document/ webpage in a new tab.

TEST YOURSELF

1 point
Which attribute specifies where the destination link has to be opened?


Adding Images to your webpage

IMG Tag

Images are defined using the <img> tag in HTML. The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

The most commonly used attribute is 'src', meaning source. Hence, the value assigned to src attribute is the location of the image that has to be displayed.

We also often use the 'width' and 'height' attributes to size the image.

The following code shows how to embed an image in a webpage.

<img src="https://pbs.twimg.com/profile_images/827385023326089220/e3-vgiOn_200x200.jpg" width="200px" height="200px">

The above code asks the browser to display the image called 'internshala.jpg', which is located in the same folder as the source code of this page (which is why, we have not used 'http://'. This is an example of relative linking). Also, we specify that the width and height of image displayed should be 300px and 100px respectively.

The <img> tag may also have an 'alt' attribute, which specifies an alternate text to be displayed in place of the image, in case the image cannot be displayed.

TEST YOURSELF

1 point
Name the attribute of tag that is used to specify the location of an image.

EXERCISE

1. Write a code snippet where in the 'Bolt' image acts as a hyperlink to the boltiot website.

BUTTON

Button Tag in HTML

The HTML <button> tag is used for creating a button within HTML form. You can also use <input> tag to create similar buttons.

Example

<!DOCTYPE html> <html> <head> <title>HTML Button Tag</title> </head> <body> <form> <button name="button" value="OK" type="button">This is a button</button> </form> </body> </html>

Output



This completes this short introduction to HTML.
The main takeaway from this lesson was to cover the concepts that will be used in learning the further lessons.
We still recommend our users to complete the entire tutorials present on www.w3schools.com.