Let us now proceed to the other very useful html tags that you as a future coder will need:
The <html> tag
As you create your web pages you will be using the html tag <html>. Actually you can create a web page without using this tag. Try opening a notepad and then type anything there, then save it with an .html or .html extension. If you will double click your saved file, it will open to your web browser.
So why would we be needing to use html tags anyway?
This is because we need to tell the browser that this is an html document. When the browser see the html tag <html> on the beggining of you webpage, then the browser will treat every following code to an html. This willmake your created page to be interpreted by the browser just the way you expect it to be.
The <head> tag
The head tag, from its name basically means that upon loading of you webpage on the browser, the browser will first look and load the codes inside the head tag before it interpret the succeeding code on the body of your webpage.
The basic function of this is that you can be assure that your Javascript Codes, Cascading Style Sheet Codes (CSS), your page's title and your other cannot-afford-to-be-loose codes will be loaded.
For example, if a certain part of your hyperlink uses a javascript for it to behave in a certain way you want then you need to be assure that the javascript function that it is using will be loaded FIRST before itself.
It is only logical to load a function parameter first before the code that will use it.
In this idea makes the <head> tag useful.
The <title> tag
The title tag <title></title> is placed inside the head tag <head></head>. From the word itself, the title tag is the container of your page's title, usually seen at then top of each browsers. You must include a single phrase that is meaningful enough to indicate your web page's content.
There's actually no special discussion about this tag, it is just a webpage's title containier, that's it.
The <body> tag
The body tag <body></body> is the main containner of your webpage. This is where most of your html code will reside. This is usually where the actions happens. The basic container of your website's elements.
I usually follow an html table with a width of 100% after a body tag <body>, this practice tells me that this whole window is my teritorry, which gives me flexibility to play inside the body tag.
The Image <img/> tag
The image tag <img/> violates the basic construction of an html tag, which must have an opening and a closing tag. But the image tag has no closing tag, but as you can notice, an slash character is place just before we close the imaage tag.
For example:
Actually, we can omit the slash character at the end area and our image will still be functional on our actual output. Though we can only do this on html pages because html is very forgiving on some human mistakes. for example, a column tag <td> will still function even you won't include its ending tag. But will not be tolerated on future generations, especially on the existence of XML.
With this idea, it is a good practice to include a slash character just before you end the tag of an image tag, just like the example above.
This is of course applicable only for those tags that will not be having closing tags, some of which are:
- Image tag <img/>
- Horizontal Rule tag <hr/>
- Line Break tag <br/>
The Font <font> tag
The font tag is used when you need to manipulate the characteristics of a certain text or block of text. Though your texts will still be displayed without using this tag. But using this tag around your texts would be very functionaly since you can use this tags came with various attributes used to format your text's final display.
Example:
<font face="Verdana, Arial, Helvetica, sans-serif" color="00ff00" size="2">I have two green apple.</font>
I have two <font face="Verdana, Arial, Helvetica, sans-serif" color="00ff00" size="2">green</font> apple.
|
The code above will have the following output:
I have two green apple.
I have two
green apple.
The Hyperlink Break
<a href=""></a> tag
I'm sure that you're pretty familiar on the hyperlink tag since it is used even on office applications. But if youre not, well, hyperlink simply are link texts or images that will redirect your current open page into other pages. If it is a text link, it is usually come in blue color.
Hyperlink usually makes themselves obvious when the mouse changes to a hand icon.
Now let's make some example:
<a href="http://www.google.com">http://www.google.com</a>
<a href="http://www.google.com">Go to Google</a>
<a href="http://www.google.com"><img src="google_pic.jpg"/></a>
The code above will have the following output:
http://www.google.com
Go to Google
The Line Break <br/> tag
The line break tag literally means as it reads, it breaks lines. Each line breaks
tag makes the following elements to be displayed on the next line, so if you include two line breaks tag <br/><br/>, the succeeding elements will be displayed after the second line from the line where the line break occur.
This tag also has no end or closing tag that's is why it must be closed by a slash character.
Example:
|
This<br/>line has been<br/>breaked by<br/>the line<br/>break "<br/>" tag.
|
Output:
This
line has been
breaked by
the line
break "<br/>" tag.
The Horizontal Rule <hr/> tag
The horizotal rule, when used basically creates a horizontal lines on the page.
The Paragraph <p> tag
The paragraph tag is usually used when creating a paragraph. When used,html will automatically create line breaks before and at the end of the content inside the tag.
For example:
<p>This is a paragraph entry</p>
<p>This is an another paragraph entry</p>
|
The code below will have the following output:
This is a paragraph entry
This is an another paragraph entry
And again, the paragraph tag can be used without the closing tag and will be functional on some browsers. But writing its closing tag is a good practice that must be applied on every html tags. As I have said before, most browsers tolerate this bad practice, but the future version of browser will not most likely to cater this mistakes. So be very mindful to have a good programming practice on html coding to prevent unexpected output display.
The Heading <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags
The heading tag is used as a heading or as a subheading on a particular phrase, or sentence. When a text is enclosed from these tag, the text will be displayed in bold and in variable size depending on what number heading is used. <h1> to be the biggest font and <h6 to be the smallest.
These heading tag is generally used to emphasized a certain text of a webpage.
Example:
<h1>Number 1 heading tag</h1>
<h2>Number 2 heading tag</h2>
<h3>Number 3 heading tag</h3>
<h4>Number 4 heading tag</h4>
<h5>Number 5 heading tag</h5>
<h6>Number 6 heading tag</h6>
|
So that will be it for now, actually, html has so many different tags and attributes, but since this site was made only for the beginners, I'm so sure that the beginners won't be needing those advance tags like the input field <input type="text, password, checkbox, radio, etc." name="textbox's_name_here">, form <form name="" method=""> and etc.
Those tags are so advance that they will make the website as a dynamic or some database driven site. Using them will also require any programming skills like asp, coldfusion, php, jsp and etc..
This html tags, I showed to you is enough to assemble your own html website. Just create a table according to your needs. Code a table then trim your rows and columns, size them, put some image on your site and create some text-content inside those columns and rows.
Create your personal website as a practice page. This is what I did when I'm still learning html, it would give you many lesson and it will also be fun and inspiring too :)
