Let’s say you are new to the internet.
You just know that you can connect to the internet through a browser.
Some one told you that “information” exists on a place called “server” and you can see them through a magical tool called “browser”.
So if you want some information from the internet you use the magical tool.
How do you interact with this tool ?
How do you present your inputs to this tool?
And how does the tool know how to display the data from the “server”?
HTML solves these problems.
This “format” in which the browser gets input and displays output represents HTML.
Thus it is a “markup” language not a programming language.
For example , server may send the message “Hello World” to the browser.
How should the browser display it ?
As a plain text?
As an emphasized text?
As a paragraph?
And where ? At the top or at the bottom?
That is specified using HTML.
Apart from this HTML allows you to link to other web pages.
This is represented by the first two letters of HTML “Hyper Text”.
Google wouldn’t be a billion dollar company but for this one feature!
HTML takes help of other languages:
CSS helps in decorating whatever HTML displays in the browser.
Javascript helps in talking to the server and handling user interaction.
HTML , CSS and Javascript represent the front end languages of the web.
A full stack developer should learn these languages.
What is HTML composed of?
HTML is made up of elements.
For example,
To get input from user you use an input element.
To display a text in a paragraph you use the paragraph element.
To present a form to the user to submit form data to the server. you use the form element.
To show a video on the browser you use the video element.
Everything in HTML is handled through elements.
And these elements can have different attributes. Elements are constructed as dictated by the attributes. These are present only in the opening tags.
An image element may be specified a width and height using width and height attributes respectively.
The source of a video element is specified using a source attribute.
The style of a table element can be specified using a style attribute.
And how do you create these elements ?
Using tags.
Every element contains an open tag and a closing tag.
The opening tag starts with a ‘<‘ character and ends with a ‘>’ character.
The closing tag starts with ‘</’ characters and ends with a ‘>’ character.
For example , let’s say you want to present the message “Hello World” in a paragraph.
Enclose them within the paragraph tags <p> and </p>:
<p>Hello World</p>
Now let’s say you want to set an attribute to this tag , say you want to make it bigger. You can do that using “style” attribute:
<p style=”font-size:50px”>Hello World</p>
The Hello World message will appear bigger now like this:
An attribute follows the convention name=value pair . The name of the attribute is followed by the equal sign and then the value. The value can be included in double quotes or single quotes or even without quotes. Not including quotes can break the code in some circumstances though, like the attribute value having a space in between words.
Hello World
You can nest a tag inside another tag.
In the above example if you want the text to be bolder , you can use <strong> tag inside the paragraph tag. But this tag should be closed before the paragraph tag is closed. As a rule :
The tag which is opened last should always be closed first.
Here is the html code for the nested strong tag:
<p style=”font-size:50px””><strong>Hello World</strong></p>
Below is the output:
Hello World
There are few exceptions like the <image> tag which does not have a corresponding closing tag.
The structure of HTML:
A typical HTML page has the following structure
- It has a head tag
- The head tag is followed by a body tag
- Both the head and body tags are enclosed within a html tag
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title> First HTML </title>
<head>
<body>
<p> Hello World </p>
</body>
</html>
The first line <!DOCTYPE html> tells the browser that it is a html document .
Though the browser will treat any file ending with .html as a HTML file , it is a standard practice to include this line.
The <head> tag contains data which is not displayed in the browser. It contains details like the title of the page, link to CSS page and other meta data (data providing some information about the document like author name).
The <body> tag contains everything else : the input data to be entered by the user and the data displayed to the user
The <html> tag is the parent tag which encloses all other tags.
Internally , every html document is converted into a tree like data structure called the Document Object Model (DOM) and stored in the browser’s memory.
That’s it!
This post gave a very high level introduction to HTML , a language which opened the doors to interaction on the web.
Leave a Reply