Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> HTML Tags, Ever wondered what a HTML tag was
tiger
post Dec 18 2006, 11:19 PM
Post #1


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 1
Joined: 18-December 06
Member No.: 18,493
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.
Go to the top of the page
 
+Quote Post
FirefoxRocks
post Mar 26 2007, 10:06 PM
Post #2


Super Member
Group Icon

Group: [HOSTED]
Posts: 648
Joined: 12-July 06
From: Ontario, Canada
Member No.: 14,464
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.
Go to the top of the page
 
+Quote Post
Karmen
post Dec 12 2007, 09:45 AM
Post #3


Newbie [ Level 2 ]
Group Icon

Group: Members
Posts: 13
Joined: 12-December 07
Member No.: 26,844
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.
Go to the top of the page
 
+Quote Post
toby
post Dec 12 2007, 01:48 PM
Post #4


Premium Member
Group Icon

Group: Members
Posts: 481
Joined: 29-September 06
Member No.: 16,228
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
Go to the top of the page
 
+Quote Post
wutske
post Dec 13 2007, 10:12 PM
Post #5


Way Out Of Control - You need a life :)
Group Icon

Group: [HOSTED]
Posts: 1,005
Joined: 2-August 05
From: Kapellen (Antwerp, Belgium)
Member No.: 7,585
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>


This post has been edited by wutske: Dec 13 2007, 10:13 PM
Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML and other Markup Languages · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Meta Tags(17)
  2. HTML 101 - Web Design For Beginners(7)
  3. HTML 102 - Web Design For Beginners(6)
  4. Quick Html!(3)
  5. Html Basic Tutorial(8)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 29th August 2008 - 12:21 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation