Here in this discussion we will be discussing about a new concept which plays a very important role when it comes to developing a website or a web application. We will be discussing what is HTML and where it is used and what are its characteristics and other things as well.

HTML:

Now first of all we define what is HTML. HTML is a markup language for describing webpages. It is known as Hyper Text Markup Language. Now we often see in the program code where to develop a view of the application we use HTML or we can say HTML tags, so these tags are markup tags through which the HTML documents are described. For e.g. we can say there are head tags, script tags, etc. Also each HTML tag describes different document content.

We take a sample code of HTML for example,

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Now first of all we understand the example,

  • Here DOCTYPE declaration defines the document to be HTML.
  • Anything written or any text between <html> and </html> describes an HTML document.
  • Text between <head> and </head> provides information about the document.
  • Text between <title> and </title> provides the title of the document.
  • Text between <body> and </body> describe the body of the page or we can say the visible content of the page.
  • The text between <h1> and </h1> describes the heading.
  • The text between <p> and </p> describes the paragraph.

There can be many paragraphs and headings present in one HTML document.

HTML Tags:

We can say that HTML Tags which we saw in the above example are basically keywords or tag names surrounded by angle brackets. For e.g.

<tagname>content</tagname>

These tags normally come in pairs like this <p>and</p>. They are also defined as the start tag and the end tag. The start tag is normal in the angle brackets whereas the end tag has an angle bracket followed by backward slash and the an angle bracket.

<p>: Start Tag          </p>: End Tag

Also the purpose of a browser is to read HTML documents and display them. Below we can see how an actual HTML page structure looks like:

ht

Now we saw in the example above that there was a <DOCTYPE!> tag or declaration, its actual use is to make sure that the browser displays the correct webpage. There are different types of document on the web and for the browser to display the document correctly it must know the version and the type of document. Therefore we use this declaration. Also the doctype declaration is case insensitive.

HTML Editors:

Now it is not necessary to write the HTML in the Visual Studio but for better practice and to learn HTML we can use the text editor like Notepad in PC and TextEdit in Mac. To learn HTML first open the Notepad and then write some HTML code in that Notepad. After writing the HTML we need to save the file in our HTML format or we can just write the name of the file ending with html like, Firstpage.html

After doing that open that HTML page and we will see the HTML document.

HTML Basics:

Now there are some basic guidelines which need to be followed to write a proper HTML document.

First of all every HTML document must start with a type declaration known as <!Doctype html>.

Secondly all the content of the document must come in between the Html tags, <html> and </html> because the document begins with <html> and ends with </html>.

Thirdly all the visible part of the document which we wish to see in our browser should be in the body tag <body> and </body>.

HTML Headings:

HTML headings are defined in heading tags like <h> and </h>. Now there can be many headings in a HTML document, it can be written as :

<h1> heading </h1>

<h2> heading </h2>

<h3> heading </h3>

HTML Paragraphs:

HTML paragraphs can be defined in paragraph tags like <p> and </p>.

<p> this is paragraph </p>

<p> this is other paragraph </p>

HTML Links:

HTML links are defined in anchor tags like <a> and </a>. These tags are used when we want to show some link in our HTML document. It can be written as

<a href = “http://www.google.com”>this is link</a>

Here href is an attribute and is used to specify the link’s destination. Attributes are generally used to provide additional information about the HTML elements.

HTML Images:

HTML images are defined by using image tag like <img>.

<imgsrc=”xyz.jpg” alt=”xyz.com” width=”110” height=”150”>

Here source file (src), alternative text (alt) and size (width & height) are provided as attributes.

HTML Elements:

Now these HTML elements means the elements which starts with an start tag and ends with an end tag and there is some content between these tags.

<tagname>content</tagname>

The HTML elements contain everything from the start tag to the end tag. In short all the tags such as heading tag, paragraph tag, title tag, body tag, etc. are known as HTML elements. Also HTML elements contain elements i.e. they can be nested. Usually all the HTML documents are containing nested HTML elements. We take a following example to understand this:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Here we can see that <html> start tag and </html> end tag defines the whole document. Now inside this HTML element contains another element the body element <body> and </body>. It defines the document body or the visible part in the browser.

Inside this body element contains another element the heading element <h> and </h>. It defines the heading. Also there is another element here known as the paragraph element <p> and </p>. It defines the paragraph.

Now there are some empty HTML elements which contain no content. In a HTML document <br> is an empty element which defines a line break. They can be written like this </br>.

HTML tags are case insensitive.

HTML Attributes:

Now as we know that attributes are used for providing additional information about an element. They are always specified in the start tag. They come in name/value pairs like name=”value”.

There are many types of attribute which can be declared in any of the HTML tags.

Attributes like lang attribute which is used for declaring language in an html tag, like <html lang =”en-US”>content</html>

There is a title attribute used in paragraph tags like,

<p title = “this is title”> content </p>

There is a href attribute which is used for defining HTML links like,

<a href= “www.google.com>this is the link</a>They are defined in an anchor tag <a>

We have also seen the attribute of size and alternative text in the above explanation of HTML images. (Width& height attributes, alt attributes).

As a best practice we must always write the attribute values in quotes single or double.

HTML Headings:

As discussed earlier that the headings are defined in our heading tags. The important thing is that headings are defined with <h1> to <h6> tags where <h1> tag defines the most important heading whereas <h6> defines least important heading.

<h1> heading </h1>

<h2> heading </h2>

<h3> heading </h3>

We have to use the headings for headings itself as search engines use our headings to index the structure and content of our web pages. Therefore it is important to use the heading to display document structure.

<hr> tag creates horizontal line in an HTML page like,

<p> paragraph1 </p>

<hr>

<p> paragraph2 </p>

The HTML <head> element contains the data which is not displayed and has nothing to do with HTML headings.

<head>

<title>My First HTML</title>

</head>

This <title> element does not show the data in the document but it will be displayed on the browser tab.

The HTML <meta> element contains meta data which is used to define the character set and other information about the HTML document.

HTML Paragraphs:

We know that HTML paragraphs are used to define paragraphs in an HTML document. They are written in Paragraph tags like

<p> this is paragraph</p>

<p> paragraph 2 </p>

Now I an HTML display we are not sure how our HTML document will be displayed. Different sizes of screens like large or small will create different results. Therefore extra spaces and extra lines will be removed when the page is displayed.

There is also a <pre> element which defines preformatted text. The text inside a <pre> tag is displayed in a fixed font and preserves both spaces and line. This element is used for poem content in the HTML document.

HTML Style:

It is a type of attribute used for setting the style or styling the HTML element. It has the following syntax,

Style= “property:value;”

We can write any property and its value in any of the HTML elements.

HTML Background color defines the background color of an element like,

<body style= “background-color:blue;”>.

HTML Text Color property defines the color of the text in an HTML element like,

<h1 style= “color:red;”> heading </h1>.

HTML Fonts, here the font-family property defines the font to be used in HTML element like,

<p style= “font-family:verdana;”>paragraph</p>.

HTML Text Size, here font-size property defines the text size of an HTML element like,

<p style= “font-size:200%;”> paragraph </p>.

HTML Text alignment, here text-align property defines horizontal text alignment of an HTML element like,

<h1 style= “text-align:center;”> heading </h1>.

Advertisements