Home  |  Aktualności  |  e-Komunikacja  |  WWW  |  Bezpieczeństwo  |  Linux  |  Programy  |  GSM/UMTS  |  Rozrywka

Reference - Html tags!

Basic HTML tag guide The following are brief explanations of basic HTML tags

Before you begin building your page, you'll need to decide on a basic page layout. To do this, just sit down with some old-fashioned paper and a pencil and start sketching, blocking out the page's elements. You may be itching to get coding, but by drawing your site out first you can rearrange designs to

... your heart's content without having to code and recode.

Reference: Useful HTML tags and their attributes

<HTML></HTML> - tells browsers the page is written in HTML; entire document goes between HTML tags

<HEAD></HEAD> - appears just below the HTML tag in every HTML document; contains information about the document but does not appear on the Web page

<TITLE></TITLE> - specifies the title of the document; the text between these tags appears in the browser's title bar but not on the Web page itself

<BODY></BODY> - contains all the text and images that will appear on the Web page, together with all the HTML elements that provide the control/formatting of the page

    BODY attributes:

    BGCOLOR - designates the background color, using a name or a hex value
    BACKGROUND - designates an image as a page's background (wallpaper)
    TEXT - designates the text color, using a name or a hex value
    LINK - designates the color of links, using a name or a hex value
    VLINK - designates the color of followed links, using a name or a hex value
    ALINK - designates the color of links on click, using a name or a hex value

<H1><H6></H1>-</H6> - codes text as headings; <H1> is the largest, <H6> the smallest

<CENTER></CENTER> - centers text and other elements on a page

<BR> - breaks text onto a new line (no vertical space between lines)

<P></P> - breaks text into a new paragraph (leaves a blank line above the new paragraph)

<I></I> - creates italicized text

<B></B> - creates bold text

<PRE></PRE> - designates preformatted text

<TT></TT> - designates teletype or monospaced text

<HR> - inserts a horizontal rule; helpful in breaking up sections of a page
<HR SIZE=x> - designates the size (height) of a rule
<HR WIDTH=x> - designates the width of a rule, in percentage or absolute value
<HR NOSHADE> - inserts a rule without a shadow

<A></A> - marks text as the start and/or destination of a link; requires the HREF or NAME attribute

HREF - attribute of the <A> tag; makes text or image between <A> tags a hyperlink

NAME - attribute of the <A> tag; makes text or image between <A> tags the target of a hyperlink

<IMG src="x"> - Adds an image

<UL></UL> - creates an unordered (bulleted) list

<OL></OL> - creates an ordered (numbered) list

<LI> - used in conjunction with the <UL> or <OL> tag, designates a list item in an unordered or ordered list

<DL></DL> - creates a definition list

<DT> - used in conjunction with the <DL> tag, designates a definition title in a definition list

<DD> - used in conjunction with the <DL> tag, designates a definition description in a definition list

Once you've settled on the organization of your site, it's time to begin creating your pages with HTML tags--the instructions that surround material such as text, images, and links to other pages and tell the viewer's Web browser how to display them. If you want an image to show up on the left side of the page, a certain word to appear bold, or another word to link to an outside resource, you'll use HTML tags to do it.

There are five important rules for coding with HTML tags.

1. Tags are always surrounded by angle brackets (less-than/greater-than characters), as in


2. Most tags come in pairs and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. There are some exceptions. For instance,

the <BR>

tag creates a blank line and doesn't have an "off switch." Once you've made a line break, you can't unmake it.

3. The second tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with <B>, shout your piece, and then go back to regular text with


4. First tag on, last tag off. Tags are embedded, so when you start a tag within another tag, you have to close that inner tag before closing the outer tag. For instance, the page will not display properly with the tags in this order:

<HEAD><TITLE>Your text</HEAD></TITLE>.

The correct order is:

<HEAD><TITLE>Your text</TITLE></HEAD>.

5. Many tags have optional attributes that use values to modify the tag's behavior. The <P> (paragraph) tag's ALIGN attribute, for instance, lets you change the default (left) paragraph alignment. For example,


centers the next paragraph on the page.

Remember, too, that HTML is always evolving, and older browsers often don't support the newest tags. When a browser encounters an HTML tag it doesn't understand, it will usually ignore both the tag and the material the tag affects. This way, the newest elements will appear to viewers with newer browsers without causing problems for viewers using older browsers, who will only see material their browsers recognize. On the downside, browsers treat coding errors like unfamiliar code. If you've made a mistake while building your page, you won't necessarily see an error message; you might just see nothing at all. You should always closely check all of your pages in a browser to make sure that everything that's supposed to be there appears properly. We also recommend looking at your pages in more than one version of Navigator and Internet Explorer (on both PC and Mac platforms, if possible) to make sure everything looks the way you intended, because not every browser type or version behaves the same way.

A great way to learn about more complicated HTML is to look over the shoulders of other Web page creators. If you see a Web site you like, just view the page's source to see how it was done. You should never just copy another builder's design, but most developers do borrow inspiration from other sites. Methods for viewing source vary by browser, but it's usually as simple as selecting Page Source or Source from the View menu. When viewing source code, you'll sometimes see organizational comments from the page's author near the top of (or scattered throughout) the file. These comments are inserted with the

 <COMMENT> or <!--> tag

and often contain useful information for those who view them. For a simple exercise in reading source code, try printing a well-commented Web page from your browser and then printing the source code of that page. Compare the two documents side by side, using the author's comments to match sections of code with the visual elements they represent. You'll soon be able to zero in on specific lines of code to understand how to achieve individual effects.


Body tag and attributes


<BODY>...</BODY> Contains the viewed portion of the document
<BODY bgcolor="color"> Sets the color of the background in hexadecimal code
<BODY background="filename.xxx"> Sets an image as a page's background (wallpaper)
<BODY text="color"> Specifies the color of normal text in hexadecimal code
<BODY link="color"> Specifies the default color of unvisited links in hexadecimal code
<BODY alink="color"> Specifies the color of links on click in hexadecimal code
<BODY vlink="color"> Specifies the color of followed links in hexadecimal code
Font tag and attributes
Changes font attributes for text within the tags
<FONT size="value">...</FONT> Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<FONT face="name">...</FONT> Sets the font face
<FONT color="color">...</FONT> Sets the font color using hexadecimal code

Image tag and attributes

Embeds an image in the document at the location of the tag
<IMG src="url" alt="text"> Adds an image with a text description
<IMG src="url" alt="text" align="direction"> Aligns an image to the left, right, center, bottom, or top
<IMG src="url" alt="text" border="number"> Sets the size of the border around an image
<IMG src="url" alt="text" height="pixels"> Sets the height of an image
<IMG src="url" alt="text" width="pixels"> Sets the width of an image
<IMG src="url" alt="text" hspace="pixels"> Sets a horizontal margin to be placed around an image
<IMG src="url" alt="text" vspace="pixels"> Sets a vertical margin to be placed around an image
<IMG src="url" alt="text" usemap="map-name"> Designates an image as a client-side image map

Anchor tag and attributes

<A>...</A> Designates the origin and destination of a hyperlink
<A href="url">...</A> Creates a hyperlink
<A href="http://dzien-e-mail.org/#NAME">...</A> Links to a target location in the current page
<A href="URL#NAME">...</A> Links to a target location in a page outside your site
<A NAME="NAME">...</A> Sets a target location within a document
<A href="mailto:email">...</A> Creates a mailto link

Optional attributes:

<A href="?" target="?">...</A> Specifies where the linked-to document is to be placed
<A href="?" rel="?">...</A> Sets up a relationship between the linked-to document and the current page
<A href="?" rev="?">...</A> Sets up a reverse relationship between the current page and the linked-to document

Table tags and attributes

<TABLE>...</TABLE> Generates a table
<TABLE border="pixels"> Sets the size of cell borders
<TABLE cellspacing="pixels"> Sets the amount of space between cells
<TABLE cellpadding="pixels"> Sets the amount of space between a border and cell content
<TABLE height="pixels" or "%"> Sets the height of a table
<TABLE width="pixels" or "%"> Sets the width of a table
<TD>...</TD> Defines a table data cell
<TD colspan="columns"> Sets a cell to span columns
<TD rowspan="rows"> Sets a cell to span rows
<TD nowrap> Prevents the lines within a cell from wrapping
<TH>...</TH> Defines a table header with bold, centered table data
<TR>...</TR> Defines a table row
<TR align="?"> or <TD align="?"> Aligns the contents of a row or cell to the left, right, or center
<TR valign="?"> or <TD valign="?"> Sets the vertical alignment of a row or cell to the top, middle, or bottom

Frame tags and attributes

<FRAMESET>...</FRAMESET> Specifies the layout of subsections in the main browser window
<FRAMESET rows="value,value"> Defines the rows within a frameset
<FRAMESET cols="value,value"> Defines the columns within a frameset
<NOFRAMES>...</NOFRAMES> Provides alternate content for browsers that do not support frames
<FRAME src="?"> Defines the appearance and content of a single frame
<FRAME name="name"> Labels the frame for targeting by other frames
<FRAME marginwidth="#"> Sets the margin width of a frame
<FRAME marginheight="#"> Sets the margin height of a frame
<FRAME scrolling="value"> Creates a frame scrollbar
<FRAME noresize> Prevents the resizing of a frame

Form tags and attributes

<FORM>...</FORM> Generates a container for all form elements
<FORM action="url"> Designates the path of the script to process input from the form
<FORM method="get|post"> Instructs the browser how to interact with the form URL
<FORM accept="media type"> Defines which MIME types are supported by the server processing the form
<FORM accept-charset="text"> Defines which character sets are supported by the server processing the form
<FORM enctype="media type"> Defines the format of the submitted data
<OPTION> Defines each menu item
<SELECT name="NAME">...</SELECT> Generates a pull-down menu
<INPUT type="checkbox"> Generates a check box
<INPUT type="hidden"> Conceals a field from view
<INPUT type="image"> Generates an image that acts like a Submit button
<INPUT type="password"> Generates a one-line password box
<INPUT type="radio"> Generates a radio button
<INPUT type="text"> Generates a one-line text box
<INPUT type="submit"> Generates a Submit button (send form)
<INPUT type="reset"> Generates a Reset button (clear form)