HTML – Web Templates Blog

Common tags used in HTML

If you are a web designer you are no doubt familiar with Hyper Text Markup Language which is one of the most basic methods of coding websites and web pages. HTML is basically a language of tags which avail a number of options for formatting the design of a web page as well as the text and other content. The tags are enclosed in < and > symbols and there are both opening and closing tags. Opening tags are enclosed in the brackets < > while closing tags are enclosed in the same brackets but there is a slash just before the command as in </ >. There are tags that are very common in most websites and that can easily be found on a standard web page. This article details some of these tags.

The <HTML> tag is the most common tag seen in all web pages coded with HTML. This tag is responsible for identifying the file type of the document and hence would not miss in a HTML coded page. The other tag that ranks second in importance after the HTML tag is the body tag (<body>). The body tag encloses all the content of a web page and it signifies the beginning of the web page content as well as its end. In some cases, the title tag (<title>) is also evident and it denotes the title of a page. This is especially important in search engine optimization.

Organization of content in a web page is very important as it enhances the presentability of a site. It is vital to arrange information on a site in paragraphs to make it easier for the user to find what they are looking for. This makes the paragraph tag denoted as , a very important tag found in almost all the pages which offer information. The paragraph tags mark where a paragraph will begin and where it will end facilitating the organization of information on a web page. Without this important tag, web page information would lack paragraphs.

The hyperlink tag is also found in most of the web pages keen on including a number of hyperlinks to either other websites or other pages of the same site. It is denoted as <a href> and it is usually located around the main text that makes up the hyperlink. Images are common elements of modern day sites as such the image tag is also very common. It is denoted by <img src> at the location where an image is supposed to be. It is also one of the few tags with no closing tag.

Various elements on a web page usually need formatting and as such there are several tags that are used for formatting. The tag indicates the formatting of the font of web content and can include the font type, size and even color for example text. Italic and bold tags are used to format text and are denoted as and respectively.

Basic HTML for blogs and emails

Hypertext Markup Language (HTML) is the code used for most of the content found on the internet. It is a command language used to alter different parts of the content on any given website. This coding is used by most bloggers and email providers. Although HTML cannot be used for some functions like embedding videos, graphics and tables, there are many simple functions that can be done effectively by the use of HTML codes including modifying texts, colors, fonts and links. These elements are important for enhancing readability of the blog content.

Text is one of the most important elements of the blog or email. It has to be such that the readers can be able to read the text comfortably. Headings and the normal text can be differentiated by bolding, italicizing and underlining the heading. These simple commands are done by the use of tags. Tags are used to select the part of a text to be formatted to a different style for example, in the sentence ‘this is a fruit stand!’, the changes the fruit part of the sentence to bold and the tag signifies the end of the bold effect.

To underline, the tags and would be used to underline and and for italics in the parts of the sentence enclosed by both tags. HTML can also be used to change color and the font of the content. To change the font, the tag font name to change the font. The font name depicts the name for instance Arial or Times New Roman which are usually in the lower case. The tag is used to turn on a certain font and to turn of the font selected. You may need to change the size of the font used depending on circumstances in order to ensure that the font can be read by all potential clients comfortably. To change the size of the font in such a case, the tag is used where x designates the number of the fonts you would like to use. The size of the font ranges from one which is the lowest to seven which is the highest. The tag is used to turn off the changes made to the font.

Another important element of the blog and email is the color. The color should be viewed by the users without a problem. To change the color, the tag is used where red can be any other preferred color. The color can be chosen using the six-digit hexadecimal code in which you end up with a tag such as where AB1943C can be any color of your choice. The tag turns off the changes made.

When including links in the blog or email, the tag text is used where ‘address’ is the URL of the site you are providing link for. Words can be used to represent the link and to redirect to the main site when clicked on.

Basic HTML colors and color codes

Colors are one of the ways used to create visual and aesthetic appeal in web design. It therefore comes as no surprise that HTML, the most popular web design language should support colors. In fact, use of HTML is one of the easiest ways of incorporating color in moderation on your site.

Generally, colors are displayed by the use of red, green and blue light. HTML colors are defined by the use of a hexadecimal code or notation which combines the red, green and blue (RGB) color values to give a total of 256 colors. The lowest values given to any one of the light source is 0 which translates into 00 in hexadecimal codes while the highest is 255 which translates to FF in hexadecimal codes. The hexadecimal code is usually a code of three pairs of two digit numbers, each digit pair representing the RGB (Red Green Blue) quantity of the color. The code is preceded by the # symbol. A good example is color black which does not have any RGB content and hence its RGB values are (0, 0, 0). The hexadecimal code will in turn be #000000. For color red, the RGB values will be (255, 0, 0) and the hexadecimal code #FF0000, color green RGB (0, 255, 0) and hexadecimal code #00FF00, and color blue RGB (0, 0, 255) and hexadecimal code #0000FF. Other colors are defined by the respective quantity of red, blue and green for example color purple which is a mixture of red and blue with no green content will have an RGB content of (255, 0, 255) and the hexadecimal code will be #FF00FF.

Due to the fact that the combination or concentration of the red blue and green content in each color can vary from 0 to 255, 16 million colors can thus result from the hexadecimal code as in (256 x 256 x 256). Gray color is a mixture of red blue and green in equal quantities. To create different shades of gray, you use the three colors in equal quantities but varying concentrations. For example RGB content of (8, 8, 8) will create a very dull gray color while high concentration such as RGB of (64, 64, 64) will create a much lighter gray.

Years back when the computer’s resolution was limited to 256 colors, a list of 216 colors had been created as labeled web safe colors which if one used, would appear undistorted in any computer. Modern day computers however have higher resolutions and the idea of web safe colors seems to have faded away.

There are 147 color names defined by HTML system of colors. 17 of these colors are standard while the rest are additional colors. The standard colors are aqua, teal, fuchsia, black, gray, maroon, grey, lime, white, navy, green, silver olive, purple, red, blue, and yellow and the rest 130 colors are different shades of this colors. All the colors are defined in the hexadecimal codes and their codes vary depending on the content of red blue and green colors.

A basic introduction of HTML

HTML (Hyper Text Markup Language), is a text markup or scripting language that is currently used in the World Wide Web to create web pages. Hypertext is a piece of text that works as a link while markup language is a mode of writing the layout information in a document. When a document is created in WordPerfect or Microsoft Word, markup language is used by the program to indicate the formatting structure of the document.

HTML document at its basic level is a plain text file that contains only text and nothing else. However, when the browser opens the HTML document, it looks for codes within the text and makes use of them to change the layout, insert links, insert images or carry out any other command detailed by the codes. Due to the simplicity of a HTML file, it can be used on any text editor. Many people will however choose to use a special HTML editor for example a WYSIWYG (What You See Is What You Get) editor that puts more focus on the visual appearance. Some HTML editors such as Dreamweaver and FrontPage allow you to create pages as you write your document in the text editor you are using. However, it may be important for you to create your pages or at the very least, parts of them by hand.

Perhaps it might interest you to know that you can create web pages even without prior knowledge of HTML besides the basic formatting on the page. This is all thanks to many excellent editors in the market that will do the HTML work. However, if you intend to make a mark in the web design world, it is important to be conversant with HTML tags. This is because the editor may not support every other function that tags will and also because you can be able to add or borrow some good effects from other people by the use of tags. The editor may also fail to give you exactly what you want leaving you with no other choice but to use tags.

HTML is easily written by hand on any text and all one needs to do is type the relevant code then save the document with .htm or .html extension. The codes are written in form of tags which are enclosed in the symbols < and >. There are opening and closing tags and what appears between the two tags is the instruction or command to be carried out for example for bold, the tag will be used while the whole code will appear as bold. is the opening tag in the code while is the closing tag. In addition to the opening and closing tags for commands, the whole document bears antag both at the beginning and at the end to instruct the browser on where the document starts and its end. Other tags that will appear in a document will be title tags denoting the title and also tags that denote the body of the document.

HTML text links

WebPages usually have links that redirect you to another page. These links are usually called hyperlinks which can be in the form of words, phrases or images. Text links usually have the word or phrase. These links are specified by the element in which the and are the opening and closing tags. These tags are known as anchor tag which has the following attributes, href which is used to identify the URL of the target hyperlink. The value of the href is valid URL document which can either be absolute or relative and may include a fragment identifier and JavaScript fragment.

The document being linked needs to have a title. This allows the users to have an idea of what is included in the linked document. After all, users will only click on the link when they are interested in it. Interest is determined by the title of the link which is discussed in the document. The value of the title is usually a string that is enclosed in quotation marks. The title can be displayed as the word or phrase or can be hidden partly and highlighted only when the mouse is passed around the link.

Target is an attribute of the anchor which specifies the position where the link will be placed. This can be configured in various ways. For example, when the target is set as parent or top, the same window is used to display the page opened through the link. On the other hand, when blank is used, a new window is opened when the link is clicked on. The hyperlink can also be set as self in which the new page is loaded on the current window. It is possible to set labels on the document. This is done by the use of name and id attributes of the anchor tag. Depending on the page that you are placing a link for, you may need to use JavaScript and VBscript. In such a case, the attributes onClick and Onmouseover are used to trigger the Scripts. This is usually common with pages that have graphics which are loaded using the scripts.

It is important to provide access keys which are to be activated using the keyboard to allow the users to access the document. Access keys are depending on which key the webmaster would like to use. Most common access keys are CTRL and ALT used along with other keys which could be T, A, D or any other key the webmaster chooses. For the user to access the linked document, the key CTRL or ALT is pressed and press the other key without releasing the CTRL or ALT key. This automatically activates the document which is opened in either the current or a new window depending on the settings put by the webmaster. If you are planning to include links in your site, it is important to ensure that users are able to visualize them well. You can color the link which should be visible to all clients. Do not use colours that are not easily visible.

HTML Tables and essential tags

When creating websites, some data would not make sense unless it in table. Tables are just spreadsheets which contain rows and columns. Table in HTML is created by the use of the table tag . The table is written row by row which is done by the use of

tag which stands for table row. Each cell is written using the tag

. The cell is the column of the table. A typical table will be written in the following sequence.

row 1, column 1	row 1, column 2
Row 1, Column 1	Row 2 Column 2

and will produce a table that looks like

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

The table must have a heading. The tag

is replaced with the tag

which is the heading of the contents of the table. It is important for the table contents to be readable. The size of the rows and columns should be of standard size. The height of the width using the height and width attributes. Not too small or too big. However, the table can have large columns and rows when the content input extends beyond the size of the columns and rows designated. They are usually self adjustable depending on the amount of data input. For enhanced readability, cell spacing and cell padding are used to adjust the white space of the rows and columns. Cell spacing is the width of the border while cell padding is the distance between the content of the columns and rows and the borders.

At times, there is need to merge two columns or rows. Colspan and rowspan are used to attributes are used to merge two or more columns and two or more rows respectively. The two can be used with the tag

before the other tags of the table are set. Like all elements used on the internet, there has to be consistent contrast on the table. This is determined by the colour of the background and that of the text. When the background of the table is brightly coloured, the text should be darkly coloured and vice versa. By default, the background of the table is usually white and the text colour used is normally black.However, one can change the colours of the two according to his preference. Colours that are easily visible should be used to allow the user to Cleary see the contents of the table. The colour of the background is set using the attribute bgcolor. The border of the columns and rows can also be coloured. Always ensure that the colours used in the three elements contrast accordingly and they can be visualized with ease. You can also add images to the background using the bgcolor attribute. Depending on what you are targeting, you can use a table inside another table. This is enhanced by using the technique of nesting tables.