Ergonomics
tech guide & how tos..
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.
<HTML> <HEAD> <TITLE>...</TITLE> ? Displayed in the title bar of browser. ... ... </HEAD> <BODY> ... ... ? Main document content here ... (entire document) ... </BODY> </HTML>
<FONT> <font> <Font> <font> are all the same
< a left operator > a right operator and a tag name between these 2 operators.
Closing tag is exactly similar to opening tag except for a / before the tag name.
Example: <HEAD> . . . </HEAD>
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.
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
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.
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.
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.
| Parameter | Value |
|---|---|
| color | a color name or value that specifies the default text color for all content within the body tag |
| background-color | a color name or value |
| background | URL of an Image (can be a relative URL or an absolute URL) |
| margin | pixel 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>
| Tag | Explanation |
|---|---|
| <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: |
| <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. |
Below are some formats for displaying certain commonly used special characters.
OR & blank space < OR < < > OR > > " OR " " © © ® ® ± ± ™ ™
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">
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.
How to move your Email accounts from one hosting provider to another without losing any mails?
How to resolve the issue of receiving same email message multiple times when using Outlook?
Self Referential Data Structure in C - create a singly linked list
Mosquito Demystified - interesting facts about mosquitoes
Elements of the C Language - Identifiers, Keywords, Data types and Data objects
Moving Email accounts from one cPanel server to another
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.