HTML Tags - Ever wondered what a HTML tag was

free web hosting
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Programming > HTML, XML and other Markup Languages

HTML Tags - Ever wondered what a HTML tag was

tiger
Many people that i have met have mentioned HTML to me without really knowing what it really means. Because of this i thought that maybe it would be a good idea to compile a tutorial for everyone to read.

When i listen to people talking about HTML; they never seemed to know what a HTML tag was so that is what i will focus on here.

-------------------

Some people who use HTML may notice that I place the tags below in the order they appear in a document.
Most people who use HTML know the tags which no HTML document can do without. Those are:

<html> = this is the tag which every HTML document must start with.
<head> = this contains primarily the TITLE tag and the META tag.
<title></title> = this contains the title of the page; it is displayed in the bar at the top which contains the name of your ISP and the minimize, restore and close icons.
</head> = this closes off the tag containing TITLE and META tags.
<body> = this tag indicates the beginning of the main body of text.

-------------------

Now follows tags which can be found anywhere after the BODY tag:

<font color="your color here"></font color> = this indicates that the following text will be the color you stated; you can state it using a hexadecimal code or a RGB code.
<font size="your font size here"></font size> = this indicates that the folloing text will be the size that you stated.
<font face="your font style here"></font face> = this indicates that the text between the tags will be of the style you stated (eg. Arial).
<p align="left,center or right"></p align> = this indicates that any text between the tags will be positioned in that specific spot on the line.
<p></p> = any text between the tags will be placed in a paragraph. There will be 1 line space between the paragraph and the next line or image.
<img src="location of your image"> = this tag tells the browser to collect an imagefrom a location and place it in that position on the page.
<a href="your link here"></a> = this tag tells the browser that if the text between the tags is clicked then link to the stated web address. (the address must start with "http://")
<b></b> = this tag tells the browser to in effect double or even triple the width of the letters transforming BOLD to BOLD.
<i></i> = this tag tells the browser to italicise the text between the tags which means it sort of leans in one direction for example ITALIC becomes ITALICS.
<u></u> = this tag tells the browser to underline all text between the tags with a solid line.
<table></table> = this tag tells the browser that a table will be made within them (tags will follow).
<tr></tr> = this tag tells the browser that a row of a table is between the tags.
<td><td> = this tag is placed between the <tr> tags; this tells the browser to add one column to the table.

This now shows all of the tags you need to create the main body of your webpages.

-----------------------------

To close off your script you need 2 tags and those are:

</body> = this tells the browser that the main body of text has now ended.
</html> = this tag tells the browser that the document has now finished.

-----------------------------

I hope this gives people the basic understanding of HTML tags that can be essential to creating your first web page.

Good luck with your HTML scripting.

 

 

 


Reply

FirefoxRocks
First of all, that tutorial is partially all wrong!
QUOTE(tiger)
<font color="your color here"></font color> = this indicates that the following text will be the color you stated; you can state it using a hexadecimal code or a RGB code.
<font size="your font size here"></font size> = this indicates that the folloing text will be the size that you stated.
<font face="your font style here"></font face> = this indicates that the text between the tags will be of the style you stated (eg. Arial).
<p align="left,center or right"></p align> = this indicates that any text between the tags will be positioned in that specific spot on the line.


We do not use <font> anymore, we use something called CSS, or cascading style sheets. <font> is depreciated and is not valid in (X)HTML Strict.
</p align> ??? We do not end attributes, just the element.

QUOTE(tiger)
<a href="your link here"></a> = this tag tells the browser that if the text between the tags is clicked then link to the stated web address. (the address must start with "http://")

No, the address doesn't have to start with http:// if it is an internal link, an FTP server, a NEWS server, TELNET protocol or email link (mailto:)

QUOTE(tiger)
<b></b> = this tag tells the browser to in effect double or even triple the width of the letters transforming BOLD to BOLD.
<i></i> = this tag tells the browser to italicise the text between the tags which means it sort of leans in one direction for example ITALIC becomes ITALICS.
<u></u> = this tag tells the browser to underline all text between the tags with a solid line.


<u> is depreciated. Also, CSS is suitable for achieving the results of <b> and <i>. They will be depreciated in XHTML 2.
For semantically stronger and emphasized words/phrases/paragraphs, use <strong> and <em>. Again, this is for SEMANTIC purposes only!

Stop living in the HTML 3.2 era and upgrade to XHTML 1.0. Browsers will thank you.

 

 

 


Reply

Karmen
im a little stuck, would you be able to assist me in creating a table that is centered and is 100x200 pixels.. i dont understand how to set the height. When i did it the page was all over the show and well, it really didnt work. Also within that table im trying a photo of myself and some friends.

Reply

toby
QUOTE(Karmen @ Dec 12 2007, 09:45 AM) *
im a little stuck, would you be able to assist me in creating a table that is centered and is 100x200 pixels.. i dont understand how to set the height. When i did it the page was all over the show and well, it really didnt work. Also within that table im trying a photo of myself and some friends.

<div id="table">data</div>

#table { text-align: center;
min-height: 100px;
min-width: 100px;
}

Add extra rules like percentages if you want. If that doesn't work.. go ask someone who knows more than me dry.gif

Reply

wutske
First things first, 'tables' are made for data, not for designing or structuring websites ... you'll need div's as toby already suggested.
If you realy want a 100x200 div to place the image in (eg. if you want a border around it, then you'll need something like this:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Blablabla</title>

</head>
<body>
<div style="width: 100%; text-align: center;">
    <div style="width: 200px; height: 100px; text-align: center; border: 1px solid #999;">
        <img src="ze_image.png" alt="thiz is an image" />
    </div>
</div>
</body>
</html>




Otherwhise, this will do the same (this actualy just centers the image).
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Blablabla</title>
</head>
<body>
<div style="width: 100%; text-align: center;">
        <img src="ze_image.png" alt="a smiley" />
</div>
</body>
</html>

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. div and spin tag in html - 154.24 hr back. (1)
Similar Topics

Keywords : html tags wondered html tag

  1. Converting HTML over to XHTML - Crossing over to the darkside (13)
    Allow for alterations Well, I've just had to convert another HTML 4.01 Transitional website
    over to XHTML (eXtensible HyperText Markup Language) 1.0 Transitional, I will later on convert over
    to XHTML 1.0 Strict as soon as I write the CSS (cascading stylesheet) file for it but it had to be a
    quick update and removing all presentational elements and placing them in a CSS file is not quicker
    than just altering some tags. So this is where I got the idea to write a How to Convert HTML over
    to XHTML . Let's begin I'm having trouble knowing where to start ...
  2. Meta Tags - To Stop Spiders (17)
    Sometimes you don't want search engine spiders to spider your site. For example, you may not
    want your pages to show up in a google search. Here is what you can do: use meta tags in your web
    pages. You can use meta tags to control indexing and crawling of your site. By default, every
    single page in your site will be indexed by search engine spiders. To control this default action,
    just use meta tags! How? Your meta tags must be located in the HTML codes of your pages, in the
    header between the and tags. So if you want spiders to index your page and follow ...
  3. Html Basic Tutorial - <!-- For beginners only --> (8)
  4. HTML 101 - Web Design For Beginners - Absolute Basic HTML Writing (7)
    HTML 101 - Web Design For Beginners Absolute Basic HTML Writing This will be part one of a
    multi-part HTML tutorial. Please don't post advanced HTML replies to this article. This
    tutorial is specifically written for beginning HTML writers. Requirements: Software: Web
    Browser, HTML Editor. Skills: Ability to press the keys on the keyboard. Any web browser will
    work as long as it can open files saved on your hard drive. -> Netscape and Internet Explorer are
    both free and easy to use. Any HTML editor will work as long as it is an HTML editor and not a web...
  5. Quick Html! - Three of the coolest scripts! (3)
    Table of contents: -Meta -Cursor -Icon -Animated Title Bar (Must see!) META Meta tags
    is one of the most important things you need to know about programming. It truly will help you is
    more ways then you can imagine. First off you may be wondering what a meta tag is. A meta tag is a
    simple few lines of code that you put in the header of your document to describe it. If you do this
    correctly you can get search engines (including Google) to add your website. There are a few things
    you want to keep in mind when your making your meta tags. Make sure that you stay...
  6. HTML 102 - Web Design For Beginners - More Basic HTML Writing (6)
    HTML 102 - Web Design For Beginners More Basic HTML Writing This will be part two of a
    multi-part HTML tutorial. Please don't post advanced HTML replies to this article. This
    tutorial is specifically written for beginning HTML writers. Requirements: Software: Web Browser,
    HTML Editor. Knowledge: HTML 101 - Web Design For Beginners. Skills: Ability to press the
    keys on the keyboard. So you have read and understood HTML 101 - Web Design For Beginners and
    you want to learn more. So far we have talked about a very basic web page. Black on white an...
  7. Good Comments Make Good Html. - Commenting makes HTML easier to write. (15)
    Good Comments Make Good HTML. Commenting makes HTML easier to write. This is a spin off from
    another article I wrote entitle Good Comments Make Good Scripts. While the code is different, the
    concepts for comment are the same. Enjoy! Disclaimer! This tutorial is intended to be
    used to show the benefites of commenting your HTML in order to write clean, easy to read code. For
    the purpose of this tutorial, HTML, XML, XHTML validating is not taken into consideration. While I
    will make an effort to point out non-standardized code, validation has never...



Looking for html, tags, wondered, html, tag

Searching Video's for html, tags, wondered, html, tag
advertisement




HTML Tags - Ever wondered what a HTML tag was



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE