Hypertext Markup Language, or simply HTML, is a collection of objects, or better known as tags, that defines each part of the web document. We can create a webpage document using WYSIWYG (
what you see is what you get) editors, or any text editor, like Notepad. Here, I would like to show you how to code and not how to use a certain WYSIWYG editors which automate some codes. Let's do the sample-then-explaination approach. But, to cater the needs of the
real beginners, let's touch a bit about tags.
HTML uses markup tag beginning with left angle bracket (<), the tag name, (
e.g. BODY), then the right angle bracket (>) (i.e. <BODY>). Usually, tags are paired - the starting tag and the closing tag. The closing tag is similar to the starting tag except the slash (/), which looks like this </BODY>. The paragraph tag (<p>,
handles text as a paragraph) does not require a closing tag. The line break tag (<br />) does not have a pair, since it only creates a next line of entry for other HTML component. Though it can also be written as <br>. But, I prefer the first form. I don't know why, hehe. :)
Sample 1: The Form
<HTML>
<HEAD>
<TITLE>Whahaha, My Sample Webpage!</TITLE>
</HEAD>
<BODY>
<H1>Hello World</H1>
<P>These are texts within a paragraph.</P>
<P>This is another paragraph.
<BR />... Within the paragraph is a new line.</P>
</BODY>
</HTML>
Note: Tags are not case-sensitive. So <HTML> is the same as <BODY>.
Encode the above sample into Notepad. Then, in saving specify the file name (
e.g. sample.html or sample.htm will work the same) and select
All Files from the
Save as type pulldown menu. Then click
Save.
From that example <HTML> tag encloses the rest of the code.
The <HEAD> encloses the codes intended for the browser and sometimes hides something from the user. This is where you can write CSS (
cascading style sheet - needs another article ;) ) and different scripts. You can also call other files here.
<TITLE> tag contains the title of the document and is written in the title bar of the browser.
<BODY> tag contains the information to show the user. It includes numerous paragraphs, a heading (
and subheadings), images, links, and more objects.
Properties of <BODY> (
I usually use)
- bgcolor - specifies the background color of the webpage.
- text - specifies the color of the text used within the webpage, except for components which specifies its own text-color.
- link - specifies the color of a text containing a hyperlink. (hyperlink - when clicked proceeds to a specified file)
- vlink - specifies the color of a text containing a hyperlink which already was visited.
- alink - specifies the color of a text containing an active hyperlink.
- leftmargin - margin of the document on the left.
- topmargin - margin of the document on top.
How you write it?
<BODY bgcolor="#CCCCCC" text="#0000CC" link="#006600" vlink="#00FF33" alink="#00CCFF" leftmargin="30" topmargin="30">
Note: Colors are expressed as hexadecimal. The form is #rrggbb (rr - red, gg - green, bb - blue). But, you can also write specific colors, like blue, green, red, yellow, etc. (oh, I'd like to write about this stuff! ;) )
<H1> tag is used to display headings. The number after the letter H specifies the priority of the heading. The lower number, the greater priority. So, <H2> is a subheading of <H1> and <H3> is a subheading of <H2> and so on, up to <H6>. But, I usually used up to <H3> only. The property of heading tag I use is the align, which can be specified to justify, center, left, or right.
How to write it?
<H1 align="center">Hello World</H1>
<P> tag (
paragraph-separator tag) is used to display paragraphs. This is where the text-content of your webpage is written. The property of <p> that I usually use (except for the style property :) ) is the align property, just like in heading tag.
How to write it?
<P align="right">This paragraph is aligned to the right.</P>
<BR /> tag inserts a new line or break within two stream of texts. It does not result to an extra space, unlike the <P> tag. Just use it as is (i.e. <BR />) to create a new line before the next text, image or any object.
Now, let's add more tags.
<HR> - adds a horizontal rule or horizontal line. This, too, has no closing tag.
<ADDRESS> - used for displaying the author of the page and its contact information. But I never used it (
o baka nakalimutan ko lang, hehe :) ). Commonly it is placed at the bottom of the webpage.
<A> - called the anchor tag. It allows you to go to other webpages or jump to specific part of a page.
Properties of <A> (I usually use)
- href - hyperlink reference, you write here the URL (uniform resource locator) or web address of the file you wanted the hyperlink bring (dadalhin, pero hindi literal ;) ) the user. The syntax is: type://host.domain/directory/filename. Example: http://citsphere.blogspot.com/index.php or you can just write http://citsphere.blogspot.com, it's just the same.
- target - where the page requested be opened. It can be opened in three ways: _blank (opens in new window), _parent, _self, or _top. I do not use the last three, since I am not sure how to use it. Perhaps, it can be used if you plan to use frames. You can also define where the page is going to be opened.
- title - when you place the mouse cursor over it, the text you specified will be displayed. It is helpful if the text of the link does not explain where the hyperlink would bring the user.
- accesskey - are shortcuts. If you have many links and the user does not enjoy (enjoy? :) ) using the mouse, this is a good property. The user will just hold Alt and type type the letter of the key.
How to write it?
<A accesskey="C" href="http://citsphere.blogspot.com" mce_href="http://citsphere.blogspot.com" target="_blank" title="Go to CIT Sphere Official Blog">CIT Sphere Official Blog</A>
Note: The user will use Alt+C to go to the CIT Sphere Official Blog with the address, http://citsphere.blogspot.com. The page requested will open in a new browser.
To add graphics we will use <IMG> tag which does not have a closing tag. You only need to specify the URL of the image (
e.g. http://citsphere.blogspot.com/images/sphere.jpg - a fictitious URL), the height, width, and alternative text. The alternative text will be helpful if the user wanted to know about the image even if the image failed to load. Blinds can also benefit from it with the use of browsers with text-to-speech capabilities. So, I already discussed the properties of <A> tag I usually use, hehe ;) .
How to write it?
<IMG src="http://citsphere.blogspot.com/images/sphere.jpg" mce_src="http://citsphere.blogspot.com/images/sphere.jpg" alt="CIT Sphere Logo" height="300px" width="300px">
Note: The image specified is found at http://citsphere.blogspot.com/images/sphere.jpg and has the alternative text, CIT Sphere Logo. The specified height and weight are both 300 pixels.
Let's touch a bit of <TABLE> tag, because I can't squeeze its discussion, for now. This tag enables you, as a creator, to organize data into a table or a small portion of a spreadsheet.
How to write it?
<TABLE>
<TR>
<TD>Nel</TD>
<TD>Sep</TD>
<TD>Cors</TD>
</TR>
<TR>
<TD>Co-Founder</TD>
<TD>Co-Founder</TD>
<TD>Webstaff</TD>
</TR>
<TR>
<TD>Member, 2003</TD>
<TD>Member, 2003</TD>
<TD>Member, 2003</TD>
</TR>
</TABLE>
This is how it looks like:
| Nel | Sep | Cors |
| Co-Founder | Co-Founder | Webstaff |
| Member, 2003 | Member, 2003 | Member, 2003 |
Note: <TR> - table rows; <TD> - table cell, or where you write the data. From the example, we created a 3-by-3 table. We create table this way - define the table, define the row inside it, define the cell (or cells) within that table row, define the next row (or the next rows and inside it, are cells again). I hope, the sample clears what you don't understand from my explanation. (hehe, it should be the other way around)
That's it for now. :) But here's a sample that uses the discussed HTML tags.
<HTML>
<HEAD>
<TITLE>Just Another Sample</TITLE>
</HEAD>
<BODY bgcolor="#CCCCCC" text="#0000CC" link="#006600" vlink="#00FF33" alink="#00CCFF" leftmargin="30px" topmargin="30px">
<H1 align="center">Hello, Pangit!</H1>
<P>I am not sure why I call you pangit. Perhaps, I don't have a better sample to show.</P>
<H2>Why</H2>
<P>One of the reasons of creating a webpage is to show important information you have to the online people. Most of the people, though, just advertise themselves to gain friends (and sometimes, enemy).</P>
<P align="right">To date, a .htm file is not as widely used as before, on the net, because of advanced web-programmings' presence. These web-programming language, like PHP and ASP, can handle dynamic contents. So, it is used on database-driven websites. Still, the HTML tags are important to web-programmers because PHP, ASP, etc still use it - it's the standard. But, for bloggers or users of friendster or faceboook, a knowledge of HTML is not importan, but a great advantage.</P>
<H2>How</H2>
<P>By reading the entire article, you will have the basic knowledge.</P>
<H3>Research</H3>
<P>Another way to learn is to search on the web.</P>
<H3>Ask your friends</H3>
<P>Friends may also teach you how to create a webpage, without a charge, hehe</P>
<BR />
<IMG src="http://citsphere.blogspot.com/images/sphere.jpg" mce_src="http://citsphere.blogspot.com/images/sphere.jpg" alt="CIT Sphere Logo" height="300px" width="300px">
<TABLE>
<TR>
<TD>Nel</TD>
<TD>Sep</TD>
<TD>Cors</TD>
</TR>
<TR>
<TD>Co-Founder</TD>
<TD>Co-Founder</TD>
<TD>Webstaff</TD>
</TR>
<TR>
<TD>Member, 2003</TD>
<TD>Member, 2003</TD>
<TD>Member, 2003</TD>
</TR>
</TABLE>
<HR>
<ADDRESS>Copyright © 2008 Joseph C. Aquino<BR />
<A href="mailto:citsphereorg@yahoo.com.ph" mce_href="mailto:citsphereorg@yahoo.com.ph" title="Joseph's E-mail" accesskey="E">citsphereorg@yahoo.com.ph</A><BR />
<A href="http://citsphere.blogspot.com" mce_href="http://citsphere.blogspot.com" target="_blank" title="Go to CIT Sphere Official Blog" accesskey="B">citsphere.blogspot.com</A>
</ADDRESS>
</BODY>
</HTML>
Copy the code again, and save it as
sample2.htm. Be sure to select
All Files under
Save as type pulldown menu. Try to alter the code and see the effects... I learned that way. I hope it works on you. ;)
Oops, before I forget, you can use <!-- (
before the comment) --> (
after the comment) to hide a comment. Sample: <!--hi, this is a comment, you are not supposed to read this, user.-->
Be sure to leave a comment to let me know I am sharing something correct. Thanks!
hi there!
ReplyDeleteblog hoppin'... i like this post! promiz. :D
btw, care to xlink?
thank you!
http://theroyalspeaker.blogspot.com
--- Captivating Capiz's Beauty at http://theroyalspeaker.blogspot.com