Nov 23, 2009

HTML Tags - Ever wondered what a HTML tag was

free web hosting
Open Discussion & 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.

 

 

 


Comment/Reply (w/o sign-up)

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.

 

 

 


Comment/Reply (w/o sign-up)

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.

Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

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>

Comment/Reply (w/o sign-up)


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*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : html, tags, wondered, html, tag

  1. Basic Html Tutorial
    Made it myself, hope you like it. (1)
  2. Html Basic Tutorial
    <!-- For beginners only --> (12)
    Knowledge HTML stands for H yper T ext M arkup L anguage. You cannot create an HTML file
    using a rich-text editor, such as Microsoft Word or Wordpad. HTML To write a basic HTML, you will
    need to start with this: CODE The html > tag tells the browser that this is an HTML page.
    To close any tag, the same tag will be repeted but with the "/" sign. For example, CODE   
         Page title    Did you notice the /title >, /head > & /html > tags? That's how we
    close the tag. The HEAD > Tag A head > tag will include the meta >, titl....
  3. 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 on ....
  4. 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 wh....
  5. 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 nev....
  6. 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....
  7. 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 ....
  8. 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 ever....

    1. Looking for html, tags, wondered, html, tag

See Also,

*SIMILAR VIDEOS*
Searching Video's for html, tags, wondered, html, tag
advertisement



HTML Tags - Ever wondered what a HTML tag was

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com