HTML.co.uk

To begin with, there is no existence of a term called “Semantic HTML” in Hyper Text Markup Language. Basically, the term is in reference to the effort made to produce documents in HTML which are completely devoted to the writer’s intended meaning without any slight indication as to how the meaning is being conveyed. If one tries to draw a comparison between the emphasis element (<em>) and the italics element (<i>), it can be observed that the emphasis element is drawn in italics bringing in a lot of typical similarity into the presentation.

But what really makes the difference is the same element of presentation that was talked above. A classic example of this would be a book title which would be displayed in a different element than emphasized text, which would again be displayed in a different element so that both of them end up looking unique just like their meanings.

Semantic HTML basically requires two things while working on:

. Avoidance of the use of presentational markup, i.e. attributes, elements and other entities.
. Creation of a visible difference between the structure of the document and the meaning of the phrases by making use of the available markup.

This form of HTML also requires some minute specifications and compliance of software. The development of CSS (Cascading Style Sheets) has in many ways increased the demand of semantic HTML as the CSS caters to the needs of the designers by providing them with a rich language enabling them to alter the presentation of the documentation prepared on semantic HTML. The need for inclusion of presentational properties in a document has been virtually eliminated with the eventual development of CSS. Using semantic HTML not only leads to consistency in representation of phrases and statements having the same meaning but also gives the authors the freedom from the mentally draining concern of the details of presentation.

An example might make things easier. The number 2, when being written should be written in words as two or in numeric form as 2? In this case, the semantic markup might portray it as <number>2</number> and let the stylesheet designers do the honors when it comes to presentation details.
So if this is co-related to the authors, then all they need to do is indicate quotations and stop thinking about presentations.

Another additional advantage is the repurposing of documents that can be done and the allotment of device independence. The pairing of a semantic HTML document can be done with any number of sheets so that the output comes on the computer screens via web browsers, devices that can be handheld and also printers having a high resolution. Not many changes are required in an HTML document to accomplish this feat as the readily available stylesheets simplify this by pairing semantic HTML documents with appropriate stylesheets.

There are certain aspects of authoring documents which make the separation of semantics from presentation complicated. One can also find certain hybrid elements which make use of presentation in their very meaning. The separation of the actual meaning from their presentation becomes tough in case of these types of elements. But for many, the process of translation becomes extremely smooth.

So far we have studied and understood a variety of elements, tags and options of the HTML language. Now it is the right time to discuss about the appropriate usage of elements in the web document. The sole objective of a company’s web site is to spread the business and increase profitability. In order to achieve this goal the web site should be captivating enough so as to pull the customers towards it. In fact, if a web page is not created for money minting, then also it should be good looking, readable and presentable so that the audience can judiciously use it.

So, what type of web page can be called as the perfect one? No one! Every web site has its own pros and cons and there are no hard criteria to compare different web sites and judge their perfection. But in order to make web more useful and fruitful, there are some basic guidelines which should be considered before designing the HTML page.

Image is not EVERYTHING

The first and foremost thing which is to be kept in mind is that ‘Images’ are not everything. People generally think that the images will make their web site more beautiful (which is partially right) and put too much images in their HTML documents. This results in the loss of the main theme.

If too much images are used on a web page the visitor gets confused and cannot get hold of the intended meaning of the web page. Thus, images should be used only when it is important.

Too much of Flash work?

Just like the images, animations also need appropriate planning before it finds a place in your web site. Too much graphics and animations overwhelm the website and hides the core message.

Web Site content

The content written on the web site should be as crisp and concise as possible. Internet users are addicted to fast scanning. They only read the first few lines in order to decide whether to visit your web site further or not. Thus the content or the HTML stuff should be focused and to the point.

• Break long topics into small paragraphs, each portraying one distinct idea.
• Use lists wherever possible.
• Provide intuitive hyperlinks at appropriate places in order to give the user a hassle free navigation system.
• Maintain consistency with respect to the main style and design. For this purpose make a site map of your web site.

Maintain RELEVANCE of your HTML document

Information system is highly dynamic in today’s era. What is new and important today might become a crap after few hours. Thus, the web pages should be updated from time to time in order to maintain its relevance. Updation process becomes real time process in case of web sites related to stock markets, news and similar ones where the web pages are updated in fraction of a second.

Web Etiquette

It refers to all the rules which have to be followed by every web developer.

• Do not use offensive language
• Do not criticize any other web site, religion, race etc.
• Do not copy patented images and logos of others.
• Do not copy-paste the content of any other web page onto yours. Stop plagiarism.
• Do not hack any resource on the web
• Avoid the use of offensive images and cheap language.

Whenever we prepare long documents we divide it into various paragraphs each expressing a different and complete thought. We also use headings, sub-headings, horizontal lines etc. and align various portions of the document in different styles so that overall it becomes more captivating and meaningful to read. In HTML documents also, we can apply these techniques to make the web page look more impressive and fruitful to visit.

A single HTML document does not have any end. You can write infinite number of characters and the page will still go on. In the absence of proper formatting, the web browser will show the whole HTML document as a single paragraph. So, we have to use different formatting tags at appropriate places.

Inserting Line Breaks in the HTML documents:

We can enter a new line in the HTML document by using <BR> tag. This tag does not have an ending part. For example:

<HTML>
Joe woke up this morning and ate breakfast. <BR> It was cold out so he took a coat with him to work.
</HTML>

Output:

Joe woke up this morning and ate breakfast.
It was cold out so he took a coat with him to work.

Breaking up the text into paragraphs:

In order to break up the long text into paragraphs, the <P>…..</P> tag is used. For example:

<HTML>
Web content writing is a phenomenon that lets you speak, convey the message and articulate your thoughts to the customers…well at the end of the day it also sells your services/products to the customers. Besides, web content writing services at Content Mantra ensure that you do not miss our basic things like having website content without any basic language errors, succinct in nature and in sync with the target customer. <P>Needless to say, our web content writing is original. Having catered to some of the largest corporate clients, we are embarrassed to say that time and again. It is something that is ingrained in the Content Mantra culture.</P>
</HTML>

Output:

Web content writing is a phenomenon that lets you speak, convey the message and articulate your thoughts to the customers…well at the end of the day it also sells your services/products to the customers. Besides, web content writing services at Content Mantra ensure that you do not miss our basic things like having website content without any basic language errors, succinct in nature and in sync with the target customer.

Needless to say, our web content writing is original. Having catered to some of the largest corporate clients, we are embarrassed to say that time and again. It is something that is ingrained in the Content Mantra culture.

In HTML, image maps refer to an image consisting of different parts each pointing towards a different link on the web. These types of maps are used to represent various information related to a particular organization as a whole. The user can see all the options in the form of graphics and then he can select the necessary one to have the details of only the selected portion. Apart from the organizations, Image maps are frequently used by those websites which display maps of different regions. The main advantage of using image maps is that the user gets an easy and interactive way to link to different parts of an image without dividing it.

Example of the HTML code needed for an Image Map:

<MAP NAME=”map1″>
<AREA HREF=”contentmantra.html” ALT=”content mantra” TITLE=”content mantra”>
<AREA HREF=”italics.html” ALT=”italics” TITLE=”italics”>
</MAP>

<IMG SRC=”testmap.gif”
ALT=”map of italics” BORDER=0 WIDTH=300 HEIGHT=300
USEMAP=”#map1″><BR>

[<A HREF=”contentmantra.html” ALT=”contentmantra”>contentmantra</A>]
[<A HREF=”italics.html” ALT=”italics”>italics</A>]

Client side and Server Side Image Maps:

Image maps can be implemented either on client side or on the server side. If it is implemented on the client side, then the determination of the target URLs can be done on the user’s machine. On the contrary, if it is implemented on the server side then the data related to the page location must be passed to the server in order to determine the target URL. The client side image maps are comfortable to access but it cannot offer flexibility in complex decision making like the server side image map do.

Importance of Rollover effects on the Image Maps:

Rollover effects refer to those special effects which occur when the user takes the mouse cursor over the target object. There can be various types of rollover effects which can tell you that the object has been targeted or not. In image maps the most common type of rollover effect is the caption effect. In this kind of effect, whenever the user takes the mouse cursor over a particular part of an image map, a small text is shown which describes that particular part. Thus, the user gains sufficient knowledge about different portions of the map and decides well in advance whether to select a particular area or not. Rollover effects can be embedded with the help of different types of scripts and DHTML coding.

When not to use Image Maps:

No doubt that the image maps are one of the best possible tools to show the information on the web sites, but still there are some situations when one should avoid using them.

• Image maps should not be used if most of the end users are using text based web browsers because these browsers cannot display the graphics.

• Large image maps make the web page very heavy and it takes a long time to get the web site loaded on a slow internet connection.

• If you want to use server side image maps, then make sure that you have a live web server first because these maps cannot be tested without a web server.

OK, you have created the world’s best web site which has got breath taking designs and extraordinary multimedia effects, but the bottom line is you have to publish it on the World Wide Web (WWW, popularly known as the Internet) so that it can been viewed by the public. As soon as your web site gets published online, it is ready to be a victim of the BAD internet. Your files and folders are prone to a large number of internet security threats. The fact is that certain aspects of the web sites cannot be protected. There is no single day till now on which all the web pages on the internet were free from viruses, spams, trojans or hacking attempts. If you are connected to a huge computer network such as internet, you are 100% exposed to malicious activities and thus, ‘Play At Your Own Risk’ is recommended.

Try to be safe up to the maximum possible level:

In order to be safe, the first and foremost thing required is that you should know about the types of internet threats as much as possible. The most dangerous and fatal practices used to destroy HTML files on the web are:

• Data theft in the form of pishing, hacking, spamming, spoofing etc.
• Destruction of HTML files and folders stored on the web server.
• Modification of the contents of the HTML documents.
• Hacking the complete web server.
• Different types of viruses on the network.

Carefully design a protection plan:

Once you have got to know about the possible online threats, the next step is to carefully analyze and design a protection plan for the HTML files residing on the web server. Following are some basic guidelines which can assist you in making a protection plan.

• Carefully separate the most important data from that which is not too much sensitive.
• After that examine and decide the level of protection needed for different types of data i.e. from the important ones to the casual ones.
• Examine the value of your web site on the internet. Analyze the page ranks of your HTML documents. This will let you know about up to what extent your web site can attract the hackers.
• Do consider the time, effort and money which you can spend for implementing, maintaining and upgrading the protection system for your web site in advance and proceed accordingly.
• Carefully choose the best possible company which can offer you the world class internet security services at an affordable cost.

Choose form a number of options to secure your data:

There are numerous of options available in the market which can be effectively combined to make a high-tech security system. The most internet security tools are anti-virus software, firewalls (both hardware and software), anti-pishing, anti-spamming and anti-spoofing systems, password protection, alarms, log maintainers, network intrusion detectors etc.

Today almost every e-commerce website is integrated with a backend database to keep a record of all the transactions and customers. Database is a fast, easy, secure and reliable method of updating the records online. In fact database is an essential tool for the organizations which are involved into news-making, whether forecasts, networking, e-commerce, placement consultancy and many more. All the valuable information and knowledge base is stored in a database. There are different database softwares which are available in the market such as Oracle, Sybase, mSQL, Illustra, Microsoft SQL, FoxPro, Microsoft Access etc. One can choose any one or more than one keeping in mind his business requirements and budget.

In order to ripe the benefits of online databases, the web pages must be integrated with them in a proper manner. To accomplish this task a lot of database tools are available. There are various methods to integrate a database with the World Wide Web (WWW), popularly known as the internet and every database tool differs from the other with respect to its functions, features and capacity. Therefore the type of tool to be used should be carefully selected keeping in mind the type of database used.

Most popular database integration tools are:

1) PHP/FI: It is a CGI (common gateway interface) program which is developed in C programming language and can be used on any UNX system. You can use PHP to integrate mSQL and Postgres95 with your HTML documents.
2) Cold Fusion: It is an application which allows you to write scripts within your HTML code. It is basically a database interface which efficiently processes a script and then returns the information within the HTML text in that script. It works by processing a form created by the web developer and then sends a request to the web server. The server sends all the information entered by the user in the form to Cold Fusion engine and this way the information is processed, updated and stored. Cold Fusion is a very popular database tool.
3) w3-mSQL: It was created so that the mSQL database can be easily accessed via web pages. It works like a CGI script which reads the HTML code, processes all the queries and sends the final o\result to the web server which in turn redirects it to the end user’s web browser.
4) MsqlPerl: It is used to write the scripts in Perl language in order to access the mSQL database.
5) MsqlJava: Using this you can easily create Java Applets to access mSQL database.
6) WDB: It consists of Perl scripts which can be used to access Sybase, Informix and mSQL databases.
7) Web/Genera: This one is used to integrate Sysbase databases with the HTML documents.
MORE (Multimedia Oriented Repository Environment): It refers to those application programs that operate with a web server with an aim to provide access to the relational database systems (RDBMS).

Apart from these there are numerous other database tools which can be used with HTML and DHTML documents such as DBI, DBGateway, MS Visual InterDev etc. All of them come with different price tags and capacities. You can choose the one which matches with your requirements.

HTML images as discussed earlier, plays a very important role in attracting the web traffic towards your web site. Images are those elements of HTML documents, which add life to the web page and increase its worth. Images and other type of graphics can be used in a number of ways for different purposes but there are some important things, which should be considered before using them.

Why to use Graphics?

The first and foremost thing is to determine that why you should include graphics into your web page. Is there actually a need to use them? This is very important because images make the web sites heavy and it takes more time to load the web pages. Secondly, if you use too much of images then the user will get confused and the main subject matter of the document will get lost. Thus it should be well determined in advance that whether an image is required or not.

What type of graphics should be used?

If there is a scope for an image in the web site then a proper analyses regarding its design, color, size and position should be done. The size and the position of the image totally depend upon the type of content of the HTML document. The color, border style and the contrast too must be selected keeping in mind the background of the web site. The image should attract the viewer and it should give a soothing effect. If there is an ugly image with dark colors, then nobody will like to visit the web page.

Some important rules to be followed while using the images:

• Before using an image, check about its copyrights. One cannot use company logos, images, patented graphics etc.
• Never use any kind of offensive or pornographic images.
• Don’t use those images which make web pages heavy to load.
• Choose the right format for your image. If you want to use animation then .GIF is the best format to use otherwise if you want good resolution then go with JPEG/JPG.
• Images should be clear enough to view.

About Image size hints:

Size hints are used to explicitly define the height and width of the image. It has two main advantages:

1) If a user has disabled inline images in his browser the size hints for the image are not given, then instead of the image a small box will appear which will spoils all the formatting of the web page. If you give the size hints, then a blank box of the same size as of image will appear. This will preserve the formatting and appearance of the web page as it is.
2) Image size hints let the browser to display the formatted content/text quickly and download the image side by side. Thus, the user gets the main content even if the full image is not there and does not sits idle.

Size hints can be used by specifying HEIGHT and WIDTH attributes of <IMG> tag. For example:

<HTML>
<IMG SRC=”Content Mantra.jpg” WIDTH=”300” HEIGHT=”250”>
</HTML>

HTML tags are the basic building blocks of a web document. All the elements which make up a HTML page itself are made of a starting tag and an ending tag. Without the tags no web site can be created. In fact all the HTML editors such as Microsoft FrontPage, Adobe Dreamweaver etc. use tags while generating automatic HTML codes for the websites. Tags are the heart and brain of an HTML document.

Tags have all the powers which design, control, maintain and edit a web page. A simple notepad file is transformed into a web page just because of the tags <HTML>…..</HTML>. Tags describe the nature of your document. It affects both the visual appearance as well as the background processing a web page. In order to increase the functionality, most of the tags also have their attributes. Attributes precisely defines the nature, behavior and the appearance of the text enclosed within a particular tag set. Different types of tags have different possible attributes. For eg: the tag <FONT>……</FONT> have some attributes like face, color, size etc, but the tag <B>…</B> does not has any attribute. Attributes are always used with their tags, not alone. However, the tags can be used without its attributes. In order to use the attributes you have to start a tag and within its starting section the attributes can be used.

Every attribute must be provided with a value. Without the values an attribute cannot determine what to do and to which extent. Like the attributes, their values are also used within the tags. They are separated from the attributes by a = sign.

For example:

<FONT Face=”Comic Sans MS” Color=”Red” Size=”10”> Content Mantra is the one best solution for all your writing and editing needs. </FONT>

In the above HTML code <FONT> and </FONT> are the main HTML tags. The Face, Color and Size are its attributes which have Comic Sans MS, Red and 10 as their values respectively. One important thing which is to be noted is that whatever content written inside the tags is only meant to format the HTML document and it is not displayed on the web page as the final output. Only the portion between the start tag end the end tag is viewed by the internet user.

HTML tags are of different types. Some tags are used to format the visual appearance of the content of the web document, some are used to define the behavior of the HTML elements and some are used to control the HTML scripts. The syntax to be followed while using different tags can be the same or different from each other. Some tags have an end portion prefixed by a / while some of the tags don’t require an end. Like the <FONT> tag do have an end i.e. </FONT> but the <BR> tag does not have any end.