HTML.co.uk

Webdesign’s basic principles are true for both the Web design and other type of designs. These principles show you how put your design elements in a manner which is more effective. Design is nothing more than slapping the HTML tags onto your pages and by using some the basic principles of designing, you can build designs that more useful and pleasing.

These principles include:

Balance:
Balance in design is nothing but the distribution of light and heavy elements on your page. Than smaller and lighter elements, those elements which are darker and larger appear heavily on your design. The balance principle will show you how to lay out your pages so that they work pretty well. There are 3 types of balancing your design and they are symmetrical, asymmetrical and discordant or off balance.

Contrast:
When there is a thought of contrast, most of the people will think of colours or white and black. But the fact is there is more to contrast than your colors. In contrasting, you can have contrasting sizes (small vs large), contrasting shapes (circle vs square) and contrasting textures (rough vs smooth). It is just an accentuation of elements differences in your design. It can work with any kind of design. In a design, contrast can be implemented in several ways like: change the fonts, links, headlines and images.

Emphasis:
In any design, emphasis is the place where everybody’s eyes are drawn. It is one of the ways to provide stand out for the important element in your design. It’s very much tempting to provide equal emphasis or to give emphasis on everything in a design but if equal emphasis is not given to your design; it might look flat and bland. To avoid this problem of flat look, as a designer, you have to determine the page’s hierarchy and then you have to apply your emphasis to elements that are based on your page’s hierarchy.

One of the biggest mistakes done by the designers is that they will emphasize all the elements in their design. When all the elements in the design have equal emphasis, the page looks too busy and your design will be unappealing and boring. So you have to emphasize the elements which are most important. In Web designing, emphasis can be implemented in few ways like by using semantic mark up and by changing the font size.

Rhythm:
It is also called as repetition. Rhythm brings comprehension for humans and is pretty easy for the humans to comprehend and also this repetition offers patterns that will make you sites easier to comprehend. It lets your design to develop its own internal consistency and this makes your customer easier to understand. Anything in your design can be repeated to produce rhythm to your design.

Unity:
In design, unity is also known as proximity. If you want to have cohesiveness to your design, unity provides you that. In your design the element that are positioned farther apart are relatively less related and those elements that are close to each other are more related.

When you are starting new designs, it is of no matter which design methodology you use but you have to start with a blank page. Initially your WebPages will be having nothing, so you have to put something into that.

If you want to make your WebPages have good designs, you shouldn’t allow the placements and positions to occur randomly and to have to think of things like

What is an element?
How these elements are related to page goals?
Where do the elements fit with other elements in your page?

What is the element that you are going to place?
In a Webpage, there are several common elements such as navigation, headlines, textual content, images and administration. You should know what type of element that you are going to place because it is important to place it at the correct position.

How do these elements relate to your page goals?
If you know your goals and your page’s goals, these goals will be the key for placements. If your goal is to make people click and want to take notice of them, you have to place your elements at the place where people often look at.

Where should be the other elements be placed?
It is the most important part of your design. If you have your logo on the upper side of your page and if you don’t have content, it will not have any meaning. So, you should also think of placing your content at the right positions.

The place where you place your elements will make you feel the difference
As the people in real estate say that location, location is the important factor. Instead of keeping the paintings of Michelangelo in museum, if it is put in your garage does it have any value? So you have to place your elements in an effective place and if you place your element in an effective place it provides structure and visual hierarchy to your Webpage. Your work will be half done if you have engaged your customer via compelling and interesting design.

Place your elements in the center of your Webpage
One of the simple design techniques is to place their elements at the center of the Webpage. This technique is used by new designers as their goal. Placing in the center appeals to most of the people because it is very simple.
Centering might appear boring and on the screen it might look flat but it is rarely done. Centering is done because it catches the people’s eye immediately.

In your Webpage find the point of interest.
The focal point of design is the place of interest and this is the place where you eyes are drawn. If you change the spacing styles in those places, you will come to know how the items are viewed in your page.
If you make certain small changes to the positions where your elements are going to be placed like putting up of margins around your images, then your resulting image layout will be more visually appealing.

Since the last millennium HTML 5 has introduced new elements to HTML. Aside, figure and section are the new structural elements. Time, meter and progress are the new inline elements. Video and audio are the new embedding elements. Details, data grid and command are the new interactive elements.

In 1999 the development of HTML had stopped with HTML4. The world wide website consortium’s (w3c) changed its focus in the underlying syntax of HTML to XML (extensible markup language) from standard generalized markup language(SGML) and it also focused on languages like Scalable Vector Graphics (SVG),X Forms and MathML. Browser features like tabs and RSS readers were focused by browser vendors. The languages like CSS and JavaScript came in handy to the web designers to build their own applications on top of the existing frame work using Asynchronous XML (Ajax) + JavaScript, but in the next eight years HTML grew itself very hardly.

Recently the 3 browser vendor major’s – Apple, Opera and Mozilla foundation came together as the web hypertext application technology working group(whatwg) to develop the classic version of HTML to an updated and upgraded version. With Same members, w3c started developing its own upgraded version of HTML taking note of the developments of the three major browser vendors. These two upgraded versions are likely to be merged, but many details are left to be argued, the next version of HTML outlines is becoming clear.

HTML5 the new version of HTML known usually, though it goes under the name web application1.0, it is recognizable by a web designer frozen in the year 1999 and today thawed. It includes no namespaces and schemas. Elements need not be closed. Errors will be forgiven by browsers. Desk is still a desk and TV is still a TV.

At the same moment some new and confusing elements would encountered by the unfrozen caveman Web designer. Now HTML includes new elements like section, header, footer, and nav with old elements like div.But now it includes audio and video and also em,code and strong are still present with meter, time, and m. img and embed which are continued to be used. Closer inspection by caveman designer however would reveal that all these elements are not different. Back in 1999 the designer might have needed these things, but wasn’t developed. The designer can understand all these new elements by simple analogy where he might have learned earlier. Than Ajax or CSS it is lot easier to learn.

At last, laptop running on windows 98 with 300 MHz was fired by caveman which was frozen way back in 1999, they might have astonished to know that the display of the new pages are fine in Netscape 4 and Windows® Internet Explorer® 5. Page still displays and all the contents are present, and the browser does anything or wouldn’t recognize with new elements.

It’s not a happy feature, HTML was designed explicitly to degrade browsers gracefully that won’t support it. The reason behind this is simple, as we all are cave people. Browsers now have XmlHttpRequest, tabs and CSS, but in 1999 their renderers of HTML stuck. Without accounting the installed base, web cannot move forward and HTML5 understands it.

Frames are used to divide a window into two or more scrollable sections. In each section different documents can be displayed or various parts of the same document can be linked together. Like any other HTML element each frame can be given a name, its dimensions can be set, its alignment can be defined, the borders and shades can be applied and finally a particular HTML file can be linked with it which is to be displayed. Apart from this some advanced operations such as defining the loading/unloading behavior, scroll behavior, style sheets etc. can be also performed on the frames.

HTML frames use the following attributes to behave in a particular manner and display the desired document:

• Name: It is used to link the frame to any addressable object. When a name is assigned to a frame then it can be targeted by the links in other documents. However it is not mandatory to use this attribute. By default all the windows are unnamed, but if you want to target the contents of the frame then the name attribute are necessary.

• Source: This attribute is used to display the desired HTML page in the frame.

• frameborder: This is used to set or unset the border between the frames. If the value of this attribute is 1 then a border will appear and if the value is 0 then there will be no border.

• marginwidth and marginheight: These two attributes are used to specify the frame margins both sideways and vertically respectively.

• noresize: It is used to restrict the end user from resizing the frame.

• scrolling: This one is used to define the scrolling mode of the frame. If its value is yes, then the frame will have a scroll bar. If the value is no, then the frame will have no scroll bar, and if its value is auto, then the frame will have the scroll bar only if the document size is larger than the frame.

Because of these attributes different types of frames can be created. For example:

• Static Frames: These types of frames are fixed and display only static documents. They are used to display that information which the user can see all the time, such as logos, copyrights, buttons, graphics etc. The user cannot affect the behavior of such frames by doing any activity.

• Live Frames: These frames responds according to the user’s input. They are very interactive in nature and generally contain interactive forms, videos, audio and multimedia content.

• Functional Table of Contents: These types of frames are used to display interactive table of contents on one side and when the user clicks on any topic the document linked to that link is displayed in the adjacent frame.

• Single Page Query and Answer Displays: These types of documents have two sections, one containing the query from which has to filled by the user and the other section displays the answers to the query interactively.

Apart from these, several other types of frames can be designed and customized using different attributes according to the requirements.

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.

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.

Forms are one of the vital elements of HTML. Today almost all the web pages are dynamic and interactive in nature. They are capable of receiving the input from the user and process it. As the e-commerce gained popularity, it became necessary for web developers to create web sites which are capable of taking the input from each user and update their records. For this purpose HTML forms were introduced. A HTML form is like a console where you can provide all the required information and submit it on the web.

To create a form in HTML, <FORM>….</FORM> tags are used. Below is the different attributes of form tag:

1) Action: It represents the URL which will accept the details of the user via form. If this attribute is not mentioned, then it means that the base URL will accept the form. Base URL is that URL where the form is located on the web server.
2) Enctype: It specifies the media type.
3) Method: It indicates the method that will be used for processing the action script. Method has two possible values. One is ‘get’ and other one is ‘post’. Get is used when the form does not make any changes in the database, hypertext or any other value. On the contrary, Post is used when after submission, the form affects the database, hypertext or changes any other value.

Example of form tag:

<FORM Action=http://www.contentmantra.com/submit Method=”POST”> contents of the form </FORM>

In the above example the Action=”http://www.contentmantra.com/submit” specifies the query program to the server on which the particulars of the form has to be submitted.

ELEMENTS of FORM

Form elements build up the contents, design and layout of the form. The different form elements are: INPUT, SELECT, OPTION and TEXTAREA.

A) INPUT: It is used to take input form the user using variety of tools and options. The INPUT element defines the graphical user interface of the form. Via INPUT the web developer can insert drop down menus, radio buttons, text boxes, check boxes etc. In order to specify the type of input, ‘TYPE’ attribute is used. For example:

• <INPUT type=”text” size=”40” name=”content_mantra”>
• <INPUT type=”radio” name=”radio1” value=”M”> Male
<INPUT type=”radio” name=”radio1” value=”F”> Female

B) SELECT and OPTION: It allows the user to choose one option form a set. It is used to insert drop down menus in the form. The OPTION element is used with SELECT in order to make the list of available options. For example:

<SELECT Name=”select1”>
<OPTION> Bangalore
<OPTION> Delhi
<OPTION> Mumbai
<OPTION> Chennai
<OPTION> Gujarat
<OPTION> Patna
</SELECT>

C) TEXTAREA: This element is used to take textual data from the user. The difference between TEXTAREA and INPUT is that in TEXTAREA the user can enter several lines (like while giving feedback for a product), but in INPUT the user can enter only one line (like his name). For example:

<TEXTAREA NAME=”feedback” ROWS=”4” COLS=”40”></TEXTAREA>

The ROWS and COLS indicate the maximum limit to which the user can write in the text area. Another important thing is that with each HTML form element, ‘NAME’ attribute is used. This is very important because while writing the scripts for the form these names are used.