¤ Home » Programming » HTML Primer

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?


Structure of an HTML document

<HTML>
 <HEAD>
  <TITLE>...</TITLE> ➔ Displayed in the title bar of browser.
  ...
  ...

 </HEAD>
 <BODY>
  ...
  ...	➔ Main document content here 
  ...	  (entire document)
  ...
 </BODY>
</HTML>

HTML Tags

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>
  <font>
  <Font>
  <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.

Example:

<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.

ParameterValue
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;
	     font-size:12px;
	     color:#0000ff;
	     background-color:#eeeeee;
	     margin:10px">
  . . .
  . . .
  . . .
</body>

Character Formatting tags / Text Control tags & Document Layout tags

TagExplanation
<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;			±
&#153;			

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
	ALIGN	= TOP/MIDDLE/BOTTOM/LEFT/RIGHT
>

Example:

<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 focussed on the objective of the article.




Share:




comments powered by Disqus


Download Mobile App for Android


Web Service Offers

Website Starter - 5 Pages

Get started with your own website at most affordable cost.

15,000 5,000 (66.67% off)

Ecommerce Starter

Start selling your products online. Scale up as your business grows.

35,000 25,000 (28.57% off)


Looking to build a website?
Launch a 5 page website in 1 day at only Rs.499/year. Hosting included.




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 XLRI, industry professionals, and govt. officials.

Rajeev has founded Computer Solutions & WebServicesWorldwide.com, and has hands-on experience of building variety of web applications and portals, that include - SAAS based ERP & e-commerce systems, independent B2B, B2C, Matrimonial & Job portals, and many more.



Copyright © How2Lab.com. All rights reserved.

Refer a friend | Sitemap | Disclaimer | Privacy Policy