What is HTML
HTML is a language used to design webpage. It’s long form is Hyper Text Markup Language. Let us see the meaning of each word first. Hyper Text means the system in software allowing extensive cross-reference between text and graphics. Markup means process of correcting text in preparation for printing. Language is well known to all of us ie method or system of communication. So now we can define HTML as the language which is used to prepare text for printing by cross referencing the text or graphics. Here the printing may not be for actual printing but can be only displayed/print on monitor. The HTML is specially designed for designing the webpages. You can add images, slide-show, video or text to the webpage. I think you are now pretty clear to the question, what is HTML?.
What is the syntax of writing in HTML.
Let us see a small example of HTML code for better understanding
<HTML> This is a title of the HTML page. It can't be seen on the page it is used by browser to show title </title> <body> <p> This is a body text it can be seen on the browser. </p> </body> </HTML>
It would output as shown in the image below:
Let’s discuss each of the line one by one, but first we should be clear that <HTML-tag>and </HTML-tag> is the opening and closing tag. This is the syntax of the HTML coding. That means every opening tag has its closing tag.
Now <HTML> is the opening tag of the HTML page. Every HTML page starts with this tag. It inform the browser that all the code between <HTML> and </HTML> is written in HTML language and browser treats this code as HTML.
Now <head> is the tag which is second tag and used to write the title scripts, style and meta tags.
Third one is <body> tag which contains the actual visible part of the text. That means text between <body> and </body> tag can be seen on the fronted ie. in browser page. In our example we have used one P tag to display text in paragraph. In body tag you can use many different tags like h(heading) tag(h1,h2,h3…h6), div tag, p(paragraph) tag etc. for better display of text or “img” tag for display of image.
We have seen the HTML basic structure. So now question arise that how can we write this coding and where can we see it running, right, will see it under next heading.
How / Where to write the HTML code
If you are familiar with any other languages, you might know that we can write any code to plain text editor. Yes the plain text editor like notepad and not in ms-word or any other rich text editor. The reason behind it is that there are some additional tags inserted into the text when we write in rich text editor. Those tags can interfere with our HTML code and hence it’s not recommended to write any code in rich text editor.
Now a days there are some advanced code editor (plain text editors) which can be used for coding like notepad++, net-beans. The advantage of using these advance editor is that they are rich in suggestions for related tags and also you can view the syntax errors easily, also they use different colors for different types of code. So its easy to code in these editors.
You can write on any plain text editor but don’t forget to save the file with .HTML extension, this informs the system that it’s the HTML file and the code written would be treated as HTML.
Once saved the file just open the file in a browser. There are many browsers available for viewing the HTML files like Internet Explorer, Firefox, Google Chrome etc.
For better understanding just write down the code in our example in the notepad (or advance editor if you have), save the file as HTML and see this file in browser. You would be able to see the text
How to cross reference the text/images OR make the text/image clickable to view another related text.
This is the most important thing in the HTML that you can easily jump to the related text on click of something. You can do so with <a> </a> tag. See the basic syntax.
<a href="link_where_to_go"></a>
Here “link_where_to_go” can be the URL of another page if you want to show new page in click or simply #id of the section of text where you want to go in the current page.