Web Basics

2007-09-21

Displaying HTML Tags

Displaying HTML tags as texts in a web post such as this has been a challenge for me lately. Whenever I include HTML tags intended to be displayed as texts, the tags do not appear in my published posts. Although I know that I simply have to replace the open arrow bracket (<) with this: &lt and the close arrow bracket (>) with this: &gt, Blogger is still unable to display my HTML tags as texts. If someone reading this knows the solution to my problem, please post a comment on this.

Please continue reading...

2007-09-04

The Head Tag: Setting Background Image

HOME||CONTENTS

The HTML <head> and </head> tags are typically found immediately after the opening <html> tag of an HTML document. If you open the template of your Blogger blog, you would see these tags. These tags are very important when it comes to the overall styles of your HTML document. Within these tags, the different styles of your blogsite are defined.

For instance, you can define the background of your HTML document or web page by inserting CSS codes in between the head tags.

Matrix-Effect Background

You can insert the above gif image by inserting these CSS codes just before the closing head tag </head>:

<style type='text/css'>
body
{
background-image:
url('http://3lib.ukonline.co.uk/find/matrix.gif');
background-repeat: repeat;
background-attachment:
fixed
}
</style>

Save your template and view your blog. The Matrix-like background will appear. (To view an example of this, click this link: Alternate Reality) You can actually change the background as often as you like. You simply have to change the URL part of the above codes. You may search Google for appropriate backgrounds that can be seamlessly tiled. Just choose images that do not have any borders and images that have good contrast with your texts.

To change the image simply change the higlighted part of the CSS codes below and paste these codes in between the head tags:

<style type='text/css'>
body
{
background-image:
url('http://3lib.ukonline.co.uk/find/matrix.gif');
background-repeat: repeat;
background-attachment:
fixed
}
</style>

Please continue reading...

2007-08-14

Understanding HTML

HOME||CONTENTS

Most ordinary internet users are not very familiar with HTML. The convenience of templates and auto-formatting tools virtually eliminated the need to learn HTML. Most internet users would simply click on certain templates or formatting tools to change the appearance of their blogs, email or websites. Constructing websites today can easily be done without any knowledge of HTML tags. Free web hosting sites such as Googlepages, MySite and Geocites have made it virtually instantaneous for anybody to construct their own personalized websites.

On the other hand, web logs or more popularly known as blogs easily provided avenue for personalized publishing on the web. Blogs may be highly personal or they may be informative. Topics may range from mere diary entries to philosophical musings. Blog host sites such as Blogger, Wordpress and i.ph are among the most popular sites that provide free blog hosting. A would-be blogger can easily choose from a wide array of attractive templates.

In most cases, the standard templates provided by these sites are enough for the common needs of the ordinary individual web publishers. However, there are certain limits to templates and formatting tools provided by the free website and blogsite hosts. For instance, the default two-column layout of Blogger is a bit inconvenient to change. The process of changing it into three-column layout is not very direct or as simple as clicking options or templates. HTML and CSS declarations must be used to change its basic template layout. Hence, it is an advantage to have some basic knowledge about HTML and CSS syntax and semantics to customize your sites. This post is an introduction to basic HTML.

The acronym HTML stands for hypertext markup language. Although strictly speaking, HTML is not a programming language such as FORTRAN or BASIC, it uses similar logical syntax and semantics that are also used in structured programming languages. All web browsers can read HTML. It is the basic language that all web browsers (e.g., Internet Explorer, Mozilla Firefox, Opera) can read. All texts and formatting that you see on a web page have corresponding HTML tags or declarations.

If you are using Firefox browser, it is very easy to view the source codes of a web page. To view the source codes of a web page, simply right click the mouse button and choose View Page Source option as shown below (you may also simply use the shortcut command: CTRL+U).

A new window will open showing all the codes of the web page. Most of these codes are HTML codes. However some are CSS, Javascript or other web language codes. Fundamentally, HTML codes have open tag declarations and a close tag declarations. These tags are typically English words. These tags are always enclosed within arrow brackets: "<" and ">"

A typical HTML document has the basic structure shown below:

<html>
<head>
<title>
practice document
</title>
</head>
<body>
<h1>
ARTICLE TITLE
</h1>

<p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p >

<p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>

<p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>
</html>

You will notice that the HTML declarations always have open tags and closing tags. Copy-paste or type the above example onto a Notepad and save as practice.html (do not forget the html extension). Open the document using your web browser. You will notice that the texts would be displayed without the tags.

For my successive posts, I will be discussing different HTML tags and their basic attributes.

Please continue reading...

2007-07-26

HOME||CONTENTS

Please continue reading...

Google Search

Blog Archive

2007-09-21

2007-09-04

2007-08-14

2007-07-26

Message Board

Bitty Browser Window

Passers-by