How2Lab Logo
tech guide & how tos..

HTML Primer

As a business owner you may get your website developed by an expert developer. Most developers now-a-days provide a backend admin panel to enable you to edit your website pages yourself. This admin panel is generally referred as Content Management System (CMS for short). Most CMS' provide a rich text editor so that you can edit your content in somewhat similar manner as you would do with a word-processing tool such as MS-Word. However, these rich text editors, that work inside a web browser, are often quite limited and not as versatile as a desktop word processing application.

A little knowledge of HTML can therefore make it easier for you to edit your web pages comfortably and efficiently. In this article I will give a quick introduction to HTML and discuss some basic HTML tags. The objective is to give you a quick understanding of HTML so that you are equipped to edit your web content in a rich text editor provided by CMS.

What is HTML?

  • HTML stands for Hyper Text Markup Language.
  • It is a specification or a Protocol.
  • HTML works in conjunction with HTTP. While HTTP provides the mechanism to move documents from Web Servers to Web Browsers, HTML provides the document formatting specification.
  • HTML is not a programming language.
  • It does not provide control & conditional constructs, where based on logical comparisons control of execution can be branched to one of several sets of codes.
  • It is a tag-based format specification that tells the browser how to display a particular document. As soon as the Web Page is received by the browser, the Browser reads the page contents in sequence, formats and displays the document in the Browser window as per the tags, and then the document is viewed as a static display, with no user interaction.

Structure of an HTML document

  <TITLE>...</TITLE> ? Displayed in the title bar of browser.

  ...	? Main document content here 
  ...	  (entire document)


Broadly, there are 2 types of HTML tags:
  1. Tags that appear in pairs
  2. Tags that appear in isolation

HTML is not case-sensitive
  <font>	are all the same

A tag is made up of
  <  a left operator
  >  a right operator
  and a tag name between these 2 operators.

Tags in pairs have a Start tag called opening tag & an End tag called closing tag.

Closing tag is exactly similar to opening tag except for a / before the tag name.

Example:  <HEAD> . . . </HEAD>

Some tags also include attributes

Attributes are essentially specified for styling. However, with the advent of HTML5, most of the attributes have become irrelevant. Instead, they are specified within a generic attribute named style, which takes a string value of paramter:value pairs seperated by semi-colon (;). The pramater:value pairs essentially follow the rules of CSS. Let us understand this with a few examples.

For instance the <Font> tag includes styling attributes such as - font-family, font-style, font-size, color, etc.


<font style="font-family:Arial;font-style:italic;font-size:12px;color:red"> . . . </font>

Note: The attributes, with their values, are specified in the opening tag only.

HTML Colors

While color values can be specified as color names, such as - red, green, orange, black, gray, dark gray, etc., for more flexibility you can use Hex values. Below are some example Hex values of some common colors.

Black		#000000		Orange		#ffc800
Blue		#0000ff		Pink		#ffafaf
Cyan		#00ffff		Red		#ff0000
Dark Gray	#404040		White		#ffffff
Gray		#808080		Yellow		#ffff00
Green		#00ff00		Light Gray	#cococo
Magenta		#ff00ff

All Web Browsers do not support all the tags.

If a browser does not support a tag, it just ignores it & continues to read through the document as if that tag did not exist.

Let us look at the various Tags

<Head> . . . </Head>

Contains <TITLE> . . . </TITLE> as one of the important tags.

The TITLE tag is used to describe the document content briefly. The Title specified is displayed without any formatting in the Title Bar of your browser.

<Body> . . . </Body>

The entire document, i.e. all tags & content that make up your web page is contained within the <Body> . . . </Body> tags. Styling across entire document body can be specified within the body tag. Below are some of the commonly used style parmeters and what values they take.

colora color name or value that specifies the default text color for all content within the body tag
background-colora color name or value
backgroundURL of an Image (can be a relative URL or an absolute URL)
marginpixel value to specify margin around the content body

An example to demonstrate the above:

<body style="font-family:Arial;
  . . .
  . . .
  . . .

Character Formatting tags / Text Control tags & Document Layout tags

<B> . . . </B>Bold
<I> . . . </I>Italics
<EM> . . . </EM>Emphasis - typically rendered as italics
<U> . . . </U>Underline
<CENTER> . . . </CENTER>Centered display
<SUB> . . . </SUB>Subscript - eg: x2
<SUP> . . . </SUP>Superscript - eg: x2
<BIG> . . . </BIG>A bit bigger size of text than normal
<SMALL> . . . </SMALL>A bit smaller size of text than normal
<S> . . . </S>, or
<strike> . . . </strike>
Strike through. Eg: Struck Off
<P> . . . </P>Encapsulate a Paragraph of text

Example: <P style="text-align:justify"> . . . </P>

text-align values can be left, right or justify

<PRE> . . . </PRE>Defines preformatted text. Text in a <PRE> tags is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
<PLAINTEXT>Text displayed in fixed width font with no processing of tags, from point of tag till the end of file. Tags will appear as they are. Line breaks, spacing, etc (like in PRE) will remain as in the source file. Note that this tag does not have an end tag.

Displaying Special Characters

Below are some formats for displaying certain commonly used special characters.

&nbsp;	OR  &#38;	blank space	
&lt;	OR  &#60;	<
&gt;	OR  &#62;	>
&quot;	OR  &#34;	"
&copy;			©
&reg;			®
&#177;			±

Displaying Images

There are 3 types of image formats that are supported in HTML pages. These are - .gif, .jpg, .png. Here is a quick guide on how you can insert images in your page content.

<IMG	SRC	= "url"		? URL of the image
	ALT	= "TEXT"	? Text to be displayed if mouse is taken over the image
				   or for some reason if the image is not displayed.
	BORDER	= "number"	? Border thickness in pixels
	WIDTH	= "n"
	HEIGHT	= "n"
	HSPACE	= "n"		? not supported in HTML5
	VSPACE	= "n"		? use margin instead


<IMG SRC="/images/tajmahal.jpg" ALT="Taj Mahal" BORDER=2 style="width:200px;height:100px;marging:10px">

Image Align Attribute

The above was a very brief introduction to the subject. Since there is lot of information on this subject already available on the internet, I have deliberately kept this a short article so as to remain focused on the objective of the article.

Buy Domain & Hosting from a trusted company
Web Services Worldwide | Hostinger
About the Author
Rajeev Kumar
CEO, Computer Solutions
Jamshedpur, India

Rajeev Kumar is the primary author of How2Lab. He is a B.Tech. from IIT Kanpur with several years of experience in IT education and Software development. He has taught a wide spectrum of people including fresh young talents, students of premier engineering colleges & management institutes, and IT professionals.

Rajeev has founded Computer Solutions & Web Services Worldwide. He has hands-on experience of building variety of websites and business applications, that include - SaaS based erp & e-commerce systems, and cloud deployed operations management software for health-care, manufacturing and other industries.

Refer a friendSitemapDisclaimerPrivacy
Copyright © All rights reserved.