HTML Stands for Hypertext Markup Language. It is a web browser language that allows us to write anything over the web. Remember that HTML is not a programming language. Sometimes students get confused during the interview whether HTML is a programming language or not.
The simple way to differentiate is that HTML doesn’t have decision control capacity, nor have any if-else statement like other programming languages like C, C++ or python.
HTML is a very popular language used to construct a webpage. All the websites and web applications require HTML language to design its front end part. Along with Html, CSS(Cascading Style Sheet) is used to design an html page.
Today I will share you a basic HTML Page to give a basic overview on how an Html page looks like:
The above figure shows how an html page looks like when you open it into a web browser. The Html code behind the scene allows us to construct such web pages.
Html uses the concept of tags. Any Html page is divided into head and body parts. The head and body are covered by Html tags which indicates that all codes are Html code. The head part contains the title tag. The title tag in Html indicates the Page title.
Important Tags used in Html:
- Html tag: It is the root or main element of the Html document. The contents inside the Html tag indicates that all the elements are Html. It is written as <html> contents </html>
- Body Tags: The body tags contain the main Html contents. For example, if you write a paragraph in the Html document, you have to write it into body tags.
Text Editor used in Html
There are so many text editors available on the internet for free. Some of them are Notepad, Notepad++, Bracket and sublime text. you can use Notepad++ or Sublime Text.
Steps to create the First Html page:
- To create a web page, at first, you should have a text editor. You can use any of the above. After opening a text editor, go to New and create a file that you like most. I generally create any file with index name, then save it as index.html format.
- Then write the basic Html syntax, if you are using the latest Html version, then specify it to the top of the editing page. For example, I use the Html5 version in notepad++, hence I have to mention like this <!DOCTYPE html>. Doctype tells the browser that the document type Html.
- After that write basic generic syntax of an Html page like this
- Now write a heading to your web pages so that it looks beautiful, the heading is enclosed inside <h1></h1> tag. You can use any tag between h1..h6 tag depending on the font-size.
- After writing the heading, write a paragraph that you want to see on your browser. The paragraph is written inside <p> Contents</p> tag.
- If you want to add an image to your web page, just use the tag <img src=” folder address” width=”150px” height=”150px”>. In image tag, src means the source address of the image so that the browser can locate it. The width and height given inside img tag indicate that the size of the image as per requirement.
- To design an Html element, we use CSS(Cascading Style Sheet). A CSS Page is constructed using .css extension. For example, I want to design my index.html page. To do this, I need to have a style sheet using CSS, let’s design it into style.css page. Now link it to the main Html document to see the result.
Any CSS page can be embedded to Html document by <link rel=”stylesheet” href=”style.css“>
That’s enough, Congratulation… you are ready to open your first web page. Just go to a browser, It may be google chrome or Mozilla Firefox, You will get a beautiful Web site looking at you on your screen.