120332033 Limbajul HTML

HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page.

Tag Name Code Example Browser View

Nothing will show (Tip)

the emphasis tag using the emphasis tag

embed object (Tip)

embed object

Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.

font Example Example (Tip)



form

Name: Email:

Name: (Tip) Email:

heading 1heading 2heading 3heading 4heading 5heading 6

Heading 1 ExampleHeading 2 ExampleHeading 3 ExampleHeading 4 ExampleHeading 5 ExampleHeading 6 Example

heading of HTML document

Contains elements describing the document Nothing will show

horizontal rule Contents of your web page (Tip)Contents of your web page

horizontal rule

Contents of your web pageContents of your web page

horizontal rule


(Internet Explorer)

horizontal rule


(Internet Explorer)

horizontal rule


hypertext markup language

Title of your web page

HTML web page contents

Contents of your web page

italic Example Example

image (Tip)

input field

Example 1:

Example 1: (Tip)

(Internet Explorer)

input field

Example 2:

Example 2: (Tip)

input field

Example 3:

Example 3: (Tip)

input field

Example 4:

Enter Your Comments:

Example 4: (Tip)

input field

Example 5:

Select an option:

option 1option 2option 3option 4option 5

Example 5: Tip)

Select an option:

option 6

input field

Example 6:

Select an option: Option 1 Option 2 Option 3

Select an option: Selection 1 Selection 2 Selection 3

Example 6: (Tip)

Select an option:Option 1Option 2Option 3

Select an option:Selection 1Selection 2Selection 3

list item

Example 1:

List item 1List item 2List item 3

Example 2:

List item 1List item 2List item 3List item 4

Example 1: (Tip)

List item 1

o List item 2

List item 3

Example 2:

i. List item 1 ii. List item 2

iii. List item 3

iv. List item 4 link

href="style.css" />

(Internet Explorer)

scrolling text

Example Marquee

(Tip)

menu

List item 1List item 2List item 3

List item 1

o List item 2

List item 3

meta


meta


meta Nothing will show (Tip)

meta Nothing will show (Tip) meta Nothing will show (Tip)

meta Nothing will show (Tip)

ordered list

Numbered


Numbered Special Start


Numbered

1. List item 1 2. List item 2 3. List item 3 4. List item 4

Numbered Special Start

5. List item 1 6. List item 2 7. List item 3 8. List item 4

Lowercase Letters

a. List item 1

Lowercase Letters


Capital Letters


Capital Letters Special Start


Lowercase Roman Numerals


Capital Roman Numerals


b. List item 2 c. List item 3 d. List item 4

Capital Letters

A. List item 1 B. List item 2 C. List item 3 D. List item 4

Capital Letters Special Start

C. List item 1 D. List item 2 E. List item 3 F. List item 4

Lowercase Roman Numerals

i. List item 1 ii. List item 2

iii. List item 3 iv. List item 4

Capital Roman Numerals

I. List item 1 II. List item 2

III. List item 3 IV. List item 4

Capital Roman Numerals Special Start

VII. List item 1 VIII. List item 2

IX. List item 3

X. List item 4

Capital Roman Numerals Special Start


listbox option

Select an option:

option 1option 2option 3option 4option 5option 6

Select an option: (Tip)

paragraph

This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines.

Attributes:

Example 1:

This is an exampledisplaying the useof the paragraph tag.

Example 2:


Example 3:

This is an example

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:


Example 2:

This is an exampledisplaying the use

of the paragraph tag.

displaying the useof the paragraph tag.

Example 3:

This is an exampledisplaying the use

of the paragraph tag.

small (text) Example Example (Tip)

deleted text Example Example

strong emphasis Example Example

table Example 1:

Column 1Column 2

Example 2: (Internet Explorer)

Column 1Column 2

Example 3:

Column 1Column 2

Row 2Row 2

Example 1: (Tip)Column 1 Column 2

Example 2: (Tip)

Column 1 Column 2

Example 3: (Tip)

Column 1 Column 2Row 2 Row 2

table data

Column 1Column 2

Column 1 Column 2

table header

Column 1Column 2Column 3

Row 2Row 2Row 2

Row 3Row 3Row 3

Row 4Row 4Row 4

Column 1

Column 2

Column 3

Row 2 Row 2 Row 2Row 3 Row 3 Row 3Row 4 Row 4 Row 4

document title Title of your HTML pageTitle of your web page will be viewable in the title bar. (Tip)

table row

Column 1Column 2

Column 1 Column 2

teletype Example Example

underline Example Example

unordered list

Example 1:

List item 1List item 2

Example 2:



Example 1:

List item 1 List item 2

Example 2:

List item 1 List item 2

o List item 3

o List item 4

If you're looking for a great way to spice up your HTML tables, this HTML mouseover code may be just what you're looking for.

Place your mouse pointer over each of the HTML table cells below to view this HTML mouseover effect. The HTML table cells will change to a specified color when you place your pointer over the cells.

This HTML code will enable you to give your HTML tables a more professional look and feel, as it will greatly improve the presentation of your HTML table data.

However, when using this HTML code, please ensure that you only use light colors within your HTML table cells to ensure your text can be easily viewed.

HTML table data 1 HTML table data 2 HTML table data 3

Place the following code within the or tag of your HTML table code:onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'"

Your table code might look something like this:

Your Table Data

Your Table Data

Your Table Data

Change the text indicated in bold to suit your needs. However, make sure you select a background color that will enable your text to be easily viewed.

If you're looking for a way to display a web page within a web page, this HTML code may be just what you're looking for.

As you can see in the example below, we are displaying a web page within the web page that you are viewing right now.

This HTML code will enable you to display rotating tips, images or whatever you'd like.

Copy and paste the code below into your web page where you would like to embed the additional page.

Copy and paste the code below into your web page where you would like to embed the additional page.

Error: Embedded data could not be displayed.

Change the text indicated in bold to suit your needs.

The "tabindex" value determines the order in which you will tab through the text boxes.

If you would like the tab order to skip a certain area, such as check boxes and radio buttons, simply use a negative value beginning with "-1" then "-2" and so on. Each negative value will be bypassed when tabbing through your form.

Copyright Shelley Lowery

About the Author:

Shelley Lowery is a successful well-known Internet Marketer and owner of several successful sites, including www.Web-Source.net.

Would you like to learn how to design a web site?

Learn at your own pace with 100's of copy and paste codes, screen shots and examples. Get your web site up fast with over 100 professionally designed web site templates. Visit the Web Design Mastery site to download your free chapters (77 pages)!

A gradient background effect will display your selected HTML background colors in ascending or descending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.

Please ensure that you select your HTML web page background colors very carefully, as your text must be clearly visible through the background colors you select.

In addition, you must select one light color and another color that is several shades lighter in order for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells. To use the gradient effect as your web page background, use the following BODY tag:

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

If you're using a list management system that requires specific text to be placed within the email subject or body of your email, this HTML code is for you.

Many times, if you request your visitors to type in a specific email subject or body text in order to subscribe to your publication, they may not type the required text correctly. This mistake will cause you to lose your subscriber, as your system will reject the subscription request.

To prevent this problem, you can create an email link that will automatically fill in the subject line and body when clicked on.

[email protected] Add the following code to your HTML.

[email protected]

If you're looking for a way to open a new window when you leave a web page, this code may be what you're looking for.

This HTML code will open the web page you specify as soon as you leave the original web page.

This provides a great way to gain new subscribers to your publication, introduce a product or whatever you'd like.

Opening a new window on page unload, or in other words, when your visitor is leaving your page is also a great way to make one last try to make a sale. You're visitor is leaving your site anyway, so this is your last chance to sell them. Make it count.

If you don't have a special offer of your own to introduce, use the window to open an affiliate site that you may be promoting. This provides a great way to bring the affiliate site to their attention and even make a sale.

Place the following code, indicated in bold, within your web page's BODY tag:

Change the web address to the page you would like to open.

If you're in need of an HTML code that will enable you to specify the spacing between your images, this HTML code is for you.

In the example below, although the images are the same, they aren't diplaying the same, as their vertical and horizontal alignment is different.

These images haven't been placed within an HTML table and aren't aligned via CSS. They are being displayed via the HSPACE and VSPACE attributes, which will enable you to specify the horizontal and vertical spacing between your images.

You can specify the horizontal and vertical spacing by editing the VSPACE and HSPACE values.

Contact Us

If you're displaying your email address on your web site, you may be unknowingly setting yourself up to receive a ton of spam email. Unfortunately, spam robots are continuously crawling the Internet in search of email addresses they can use to not only send spam, but also sell to other spammers.

However, although it's very difficult to protect yourself from receiving spam email, there is a way you can still display your email address on your web site and protect it at the same time.

Instead of displaying the usual mailto:[email protected] email link within your web page, use the following code within your HTML:

Contact Us

When your email link is clicked on, it will display your email address correctly.

Change the email address in the example above to the email address you would like to display.

By using this simple little code, you can protect your email address from spam bots.

If you're linking to other web sites within your web pages, you certainly don't want to just give your visitors away. For this reason, it is highly recommended that you open links to other web sites within in new window.

This will enable your web page to stay open within a window, even if your visitor clicks on an outside link, and prevent you from completely losing your visitors.

The following HTML code will enable you to open a web page in a new window: Your Text

Edit the text in red and add TARGET="_blank" to your link code.

Open all links in a new window If you're linking to a lot of other web sites within your web page and would like to open all of your links in a new window, this HTML code is for you.

The following HTML code will enable you to open all of your links in a new window. Place this code between your and tags within your HTML:

If you need to redirect your visitors to a new page, this HTML redirect code may be just what you're looking for.

When designing a web site, many times you must change the location of a web page. However, if the page is popular, your visitors may have already linked to it. In addition, the Search Engines

have most-likely already indexed the page.

For this reason, it is best to replace your page with a new page that will redirect your visitors to the new page. This provides a great way to provide your visitors with the information they were looking for and prevent you from losing your traffic.

However, when using this HTML redirect code, please ensure that you don't use it to trick the Search Engines, as this could get your web site banned. It is always best to work hard and learn quality ways in which to drive traffic to your web site.

Place the following HTML redirect code between the and tags of your HTML code.

The above HTML redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting.

Are you looking for a way to spice up your HTML forms? You can change the colors of your web page's text boxes to match the look of your web site.

Although you can change the color of your text boxes, it is highly recommended that you only use background and font colors that will enable the text to be easily viewed. For example, if you'd like to use a darker background color, you may want to consider using white for your text color.

Edit the text indicated in bold to suit your needs.

If you're using an HTML form on your web site and would like to use an image submit button instead of the boring standard submit button, this HTML code is for you.

In order for your form's input box and your image submit button to line up properly, you will need to place it within an HTML table. In addition, unless your image has a transparent background, you will need to set the table background color to the same color as the image background so that it will seamlessly blend together.

Note: In order for your form to function properly, you must have a form processing script that resides on your web server and then link to it within your form code. If you don't have one or aren't familiar with HTML forms, you may want to contact your server administrator for assistance.


Using an image submission button within your HTML web page forms will enable you to easily spice up your forms.

(Internet Explorer)

The HTML web page horizontal rule , also known as a line divider, is used to divide content areas within a web page.

These HTML horizontal rules can be used to divide your web page content subjects, products, navigational menus or whatever you'd like. They provide a great way to add color to your pages

without using images and will enable you to improve the appearance of your web pages.

If you're using line dividers (horizontal rules) within your web page, you can change the color, width and height of the line dividers by adding some attributes to your HTML code.

The examples below show various styles of the HTML tag. They are displayed in a table and the width attributes span the set percentage of the table. When used without a table, the width will span the set percentage of the entire web page.


Using customized HTML web page horizontal rules or line dividers will enable you to quickly and easily spice up your web pages.

In addition, you can also use an image to create a horizontal rule within your HTML code.

The image below, which looks like this (a tiny blue dot): is a 2 pixel by 2 pixel image. This single image can be used to create an HTML vertical or horizontal line within your web page simply by changing the HTML image code HEIGHT and WIDTH attributes.

Note: In order for this HTML code to work properly, you will need to create an image that is 2 pixels by 2 pixels in size and upload it to your web server. You will then need to link to the image within your HTML image code.

If you'd like to use the image in this example, you're welcome to copy it.

Here's how:

Place your mouse pointer over the little blue dot (enlarged to assist you) below. Right click, and go to 'Save Picture As.' A window will load and enable you to select the folder on your computer in which you'd like to save the image.

Here's the image:


HTML vertical rules provide a great way to divide your web page contect areas and add a bit of color to your web page.

HTML web page tables are used within a web page to organize content. They can be displayed with background colors, with or without borders, and can contain rows and columns displayed in an unlimited number of ways.

For example, if you look toward the top of this web page, right below the tabs, you will see our navigational links displayed within an HTML web page table with a grey background. We use color table backgrounds throughout this web site.

HTML Web Page Table

In this example, the HTML table below contains 2 columns and 1 row. The left column has the background color set to #72A4D2. The right column has the background color set to #EAE8E8.

This is an example of a table with background colors. This HTML table has 2 columns and 1 row.


Using HTML web page tables with color backgrounds is a great way to add color to your web pages without using graphics.

HTML tables are displayed within a web page to neatly align content. They can contain image backgrounds, colored backgrounds, borders of different sizes, and an unlimited number of rows and columns.

In this example, the HTML table below contains 2 columns and 1 row. The left column contains the image. The original image appears below to enable you to see the actual size.

This is an example of an HTML table with an image background. This HTML table has 2 columns and 1 row.


This is the actual image used within the above table:

Notice how the image duplicated itself to fill the table's background? Keep this in mind when creating your own image.

If you'd like to use the above image as an example to assist you in creating your own image, you're welcome to copy it.

Here's how:

Place your mouse pointer over the image above and right click on your mouse. Go to 'Save Picture As' - a window will load and enable you to select the folder on your computer in which you'd like to save the image.

(Internet Explorer)

If you're using HTML tables within your web page and would like to add a color border, this HTML code will assist you.

In this example, the table below contains 1 column and 1 row. The background color is set to #EAE8E8 and the border color is set to #C6C6C6.

This is an example of an HTML table with a color border and background.

This is an example of an HTML table with the standard border.

Your Text


Using a color border and background with your HTML web page tables looks much more professional than simply using the standard HTML table borders and backgrounds. Give it a try, you will most likely be very pleased with the new look.

(Internet Explorer)

If you're looking for a great way to spice up your HTML web page links, you can easily do so with style tags.

In this example, the active text link is underlined with the color set to #0000FF. When the mouse is placed over the link, the text color will change to #FF0000 and the underline disappears.

Place the tag between your and tags.

Example Link


Style tags provide a great way to add some special effects to your pages. You can learn more about using style tags within the CSS Tutorial section.

(Internet Explorer)

If you'd like to display a stationary image behind your text, you can do so by adding attributes to your HTML body tag.

Stationary background images remain in one place even when scrolling through the page. Only the text will move. To create this effect, place the code below within your tag.


When selecting your background image, keep in mind that your text will be moving over your image, so try to select an image that won't make your text difficult to read. To prevent your background image from tiling (repeating), place the following code between your and tags.

Using a stationary image background provides a great way to enhance your web page.

If you're looking for a way to spice up your HTML list bullets, this HTML tip is for you. You can use graphic bullets to replace the standard text bullets by using the "Definition List" tag.

The key to using this technique effectively is to select or create a small graphic that will compliment your list text and enhance your visitors experience on your web site.

Copy and paste the following HTML list code into the HTML portion of your web page.

List Item OneList Item Two

List Item ThreeList Item Four

Edit the text indicated in red to suit your needs.

Using graphic bullets within your HTML web pages will enable you to give your lists your own customized look.

If you've ever tried to display an HTML table with borders within your web page, you may have discovered that unless you are displaying some text or an image within a table cell, the border will not display. However, this HTML tip will enble you to display an HTML table with borders even if some of your cells are empty.

Following is an HTML table that contains some empty table cells. Notice the borders do not display within the empty table cells.

Your Text Your Text

Your Text

Simply by adding the special character code within your HTML code, your HTML table cells will be visible.

Your Text Your Text

Your Text

Copy and paste the following HTML code into the HTML portion of your web page.

Your TextYour Text

Your Text

Place the character within the table cells that will be empty.

HTML web page tables can be a bit tricky sometimes, but they will enable you to give your web pages a great layout and are well worth the trouble.

If you're trying to place text directly beside an image within your web page HTML code, you may have discovered it's not as easy as it appears. When you place your image HTML code and text within your HTML code, instead of the text and image displaying side by side like a newspaper, it will display like this:

The text is displaying at the bottom of the image.

To enable your image and text to display properly together, you will need to add an ALIGN attribute to your image HTML code.

Following is an example image displaying on the left with the text wrapping around the image to the right.

By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right

side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.

To align your image to left and your text to the right, add ALIGN="left" to your image HTML code like this:

Your Text

Following is an example image displaying on the right with the text wrapping around the image to the left.

By placing the above code within your HTML, your image will be displayed on the right hand side with your text displayed on the left.

As you continue to type your text, it will automatically format itself to wrap around the left side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.

To align your image to right and your text to the left, add ALIGN="right" to your image HTML code like this:

Your Text

Wrapping your text around your image will enable you to give your content a much more professional look.

If you would like to provide your web site visitors with a simple way to contact you from your web site, but really don't want to display your email address, this HTML form code may be what you're looking for.

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions, product support requests, or whatever you'd like.

Name:

Email: Comment:

Copy and paste the following HTML code into the HTML portion of your web page:

Name:

Email:

Comment:

Change the text indicated in red to your email address.

Displaying an email form on your web page provides a great way to enable your visitors to contact you.

When designing your web pages, there may be a time when you will want to remove the underline of an individual text hyperlink. Although it is always best to leave hyperlinks at their default settings, as this is what your visitors will be used to, this HTML tip will assist you removing the link underline.

Following is an example of a link displayed without the underline:

Example Link To remove a link underline, add STYLE="TEXT-DECORATION: NONE" to your link code:

Your Link

Although the above code will enable you to remove the underline within a hyperlink, please use this code with caution to ensure that you don't confuse your visitors.

When designing web pages, there may be times when you would like to change the standard web page hyperlink color to a color that will match your web site design. Although it is always best to leave your link colors at their default settings, as this is what your visitors are used to, the following html tip will assist you in changing your link color.

Following is an example link that is displayed in a different color than the default:

Example Link To change the color of an individual link, add a FONT tag within your link code:

Your Link

Although the above code will enable you to change the color of an individual hyperlink, please use this code with caution, as you don't want to confuse your visitors.

When designing a web page, many times you may want to create a link from one section of a web page to another. This isn't a standard link we're referring to, but a link that actually takes you to another section within the same web page. For example, maybe you have information at the top of your web page and would like to link to further information at the bottom of your web page. This html code will enable you to do just that.

You can create a link within the same web page. The example link below is linked to a word at the bottom of this page.

Example Link

Step #1 Select the area of text that you want the link to take you to when clicked on. In the above example, the text we linked to below is HTML, which is located within the "Submit your HTML code snippets" sentence below.

Once you select the word that you would like to link to, you will need to create an anchor link like this:

Text

The text indicated in bold will be the text you select, which in our example on this page was HTML. Although you can change the text indicated in red to whatever you'd like, it's a bit easier to remember if you just use the same text a what you have selected your anchor text to be. So again, in the above example, we used HTML. When we created our anchor, it looked like this: Submit your HTML code snippets.

Step #2

Your final step will be to create your actual link that when click on will take you to your anchor text:

Click Here

In the example above, we selected HTML for our anchor text and the 'Example Link' text above was used to create the link. When clicked on, the page will jump to the HTML anchor text we selected below.

When you create your link, you must use the same name within your link as you used in your anchor. In our example, we used HTML within our anchor tag and HTML within our actual link. When we created our link, it looked like this: Example Link

You can create your own escape from from HTML hyperlink within your web page.

If you've ever discovered that someone has linked to your web site within a frame, which means your site is stuck in their frame with their information displaying within another frame, you know how frustrating this can be. You want your visitors to visit your web site within their standard browser window - not within another web site's frame. However, there is a way you can enable your visitors to escape. The following HTML tip will assist you.

If your web site gets trapped within someone else's frames, you can create a link to help them escape. You simply create a link to your own web site at the bottom of your web page. However, the key is to place TARGET="_top" within your link code. This will display your web site in its own window and not someone else's frame.

Example Linkhttp://www.yourdomain.com

Change the text indicated in red to your web address.

Although the number of web sites designed in frames has decreased over the years, it may still be worth your time to add an escape from frame HTML hyperlink to your web page.

If you have a small web page image in JPG format and need to make it just a little bit smaller, you can do so simply by changing your image's HEIGHT and WIDTH values within your image tag. However, if you need to make a substantial change in the size of your image, this method is not

recommended, as your file size will be the same.

Following is an example of a standard image and then the same image resized by changing the HEIGHT and WIDTH values:

Original Image

Resized Image

When resizing a web page image, please ensure that you make the same amount of change to both the HEIGHT and the WIDTH values to ensure the image will display properly.

If you would like to change or remove your web page margins, you can change them by placing the following attributes within your tag.

To change or remove the top, bottom and side page margins on a web page, place the following code within your tag:

This code is compatible with both Internet Explorer and Netscape Navigator.

Internet Explorer supports:

topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0

Netscape Navigator supports:

marginheight=0 marginwidth=0

Make sure you use them all to enable your web page to be properly viewed in both browsers.

You can create a web page HTML mouseover text description, similar to an image alt tag, that will be viewed when your mouse is placed over the text link. Not only will this provide your visitors with further information in regard to your link, but it also provides a good way to place additional keywords within your web page for better Search Engine ranking.

Example:

Your Text Place "TITLE="your text description"" within your HTML link code.

Your Text

In addition, you can display your description text in a list by adding the

characters following each text line.

Your Text


The above TITLE description would be displayed like this when you place your mouse over the link:

Your Text

You can display your link description in the status bar of your browser. When the mouse is placed over a link, the link description will be viewed in the status bar.

Example:Place your mouse over this link

Look within the lower left-hand side of the status bar to view the link description.

Copy and paste the following code into the HTML portion of your web page where you would like the link to appear:

Your linked text

Change the text where indicated in red.

Another great use for this code is to hide an affiliate address. Many times, you will find that if your visitors see a link you are referencing is an affiliate link, they won't click on it. To alleviate this problem, you can use this HTML tip to hide your affiliate address.

Example:Recommended Link

Recommended Link

Change the text where indicated in red as follows:

http://www.affiliatedomain.com/?youraffiliateid - This link should be changed to your actual affiliate address.http://www.affiliatedomain.com - This link should be changed to the link or text you would like your visitors to see within their status bar when they place their mouse pointer over the link.Recommended Link - This text should be changed to the text you would like to be displayed within your web page.

If you're using a list management system that requires a certain subject line within an email message, many times, you'll find that if you request that a certain word be placed within the subject of an email, it won't be provided. This code can be used to ensure that your email subject is filled in exactly as you require.

Example:

Click Here to test the auto-fill email link

Copy and paste the following code into the HTML portion of your web page where you would like the email link to appear:

Edit the text in red to suit your needs.

If you're looking for a way to highlight certain links and/or text within your web page, this HTML tip may be your answer. You can highlight your links and text in any color you'd like simply by using STYLE tags.

Highlighting a Link:

http://www.yourdomain.com/


Linked Text

Edit the text in bold to suit your needs.

Highlighting Text:

Example: Example of highlighted text


Example of highlighted text

Edit the text in bold to suit your needs. However, keep in mind, the text must be visible through the background color you select, so please ensure you select a light color.

Tracking your advertising strategies is an important part of doing business. However, purchasing an ad tracking software program can be expensive. If you're looking for a simple way to track your advertising, this HTML tip may be your answer.

You can track your classified ads using a simple code; however, you must have access to your web site logs to view your results. When you place your ads, instead of using your regular web address, use something similar to the code below:

http://www.yourdomain.com?ad_one

Change the name after the question mark for each ad you place. When you view your logs, you will be able to see exactly which ads are effective and which ads aren't.

If you're looking for a way to prevent browser cache, this HTML tip will assist you.

Meta tags are used to give detailed instructions in regard to a web page to the Search Engines and browsers.

When you get visitors coming to your web site, your visitors browser will cache or make a copy of your web site for faster viewing their next visit. This will prevent your regular visitors from seeing your new content unless they manually reload their browser.

If you don't regularly update your web site, browser cache may not be a problem. However, if you're continuously updating your web site, you may want to prevent browser cache to ensure your regular visitors will see the latest version of your web site.

You can prevent browser cache simply by including a special META tag within your HTML code.

Add the following code between the and tags of your HTML.

If you're looking for a way to prevent Search Engines from indexing certain web pages within your web site, this HTML tip is for you.


Many times, you may have a web page that you don't want the Search Engines to index, such as download pages or private membership sites. To help with this problem, add one of the following META tag codes between the and tags of your HTML.

The following META tag tells the Search Engine robots not to index this page and not to follow any links within the page:

The following META tag tells the Search Engine robots not to index this page, but follow any links within the page:

WEB PAGE TEXT

The FONT tag is used to display your text in a specific style.

Although you may specify the font style you would like your text to be displayed, please keep in mind, if your visitor doesn't have the font face you specify on their computer, the text will be displayed in the users default font setting.

To make sure your pages are being viewed as you intended, you should include alternative fonts within your HTML web page font tag.

Your Text

The code above tells the browser to display your text in Verdana, but if your visitor doesn't have Verdana to display your text in Helvetica and so on.

By including font alternatives, you can ensure your page will be displayed exactly as you had intended.

The HEADING tag is used to display your heading text in a larger font with being the largest down to being the smallest.

Some Search Engines place relevance on text displayed within the tags, so place some of your most relevant keywords within any of the 6 tags.

Example:

Your Guide to Health & Fitness

Browser View:

Your Guide to Health & Fitness

When using the HEADING tags, you don't have to use the for your first heading. You may begin with the heading size of your choice. However, for your secondary headings, you should not use a larger heading than you began with. In other words, if you're using for your primary heading, then your secondary headings should be or and not or .

Although you can enlarge web page text with the FONT tag, you also use the BIG tag.

The BIG tag is used to increase the size of your font. You can add additional BIG tags, side by side, to increase your font size even further. For each additional BIG tag you use, your font size will increase.

HTML Code:

Your Text

Browser View:

Your Text

HTML Code:

Your Text

Browser View:

Your Text

The BIG tag can be used in place of the FONT tag, as they both perform the same task.

Example Font Tag:

You can highlight your HTML web page text in the color of your choice by adding the STYLE attribute to your HTML code.

Example: Example of highlighted text

Copy and paste the following code into the HTML portion of your web page where you would like the text to appear:

Example of highlighted text

You can change the colors to whatever you'd like, but keep in mind, the text must be visible through the background color.

If you've ever tried to display an image with your text wrapping around it, you have probably discovered it won't work with just a plain image tag.

To do so, you must include the ALIGN attribute within your image tag.

Image Displayed on Left:

Your Text

By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. The table's width is set up to span 50% of the page width.

Image Displayed on Right:

Your Text

By placing the above code within your HTML, your image will be displayed on the right hand side with your text displayed on the left.

As you continue to type your text, it will automatically format itself to wrap around the left side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. The table's width is set up to span 50% of the page width.

The tag will enable you to indent your text from the left and right margins within your web page. However, it won't enable you to indent your text from just one side.

If you would like to indent your text from the left margin only, you can use the tag (the same tag you would use to create a bulleted list). The only difference is that you won't use the tags with it. Your text will be indented just as a bulleted list is, but there won't be any bullets.

This example is displayed using the tag without the tags. Notice how the text is indented from the left margin.

Place your text between the and


Place the following code after the text you would like to align:

The percentage specifies a percentage of the distance to the line height above or below the normal line height. It raises or lowers the baseline by a percentage of the line-height to the next line. For example, a value of 50% will raise the baseline to halfway between the normal baseline and the baseline of the line above. A value of -100% will lower the baseline to the same height as the baseline of the line below. 30% or -30% looks about right for things like scientific notation.

HTML LINKS

You can display your HTML link description in the status bar of your browser. When the mouse is placed over a link, the text link description will be viewed in the status bar.

Your linked text

Example:

Place your mouse over this link


This code will enable you to hide affiliate links, display a special links descriptions or whatever you'd like.

You can create an HTML mouseover text description, similar to an image alt tag or pop up text description, that will be viewed when your mouse is placed over the text link. Place "title="your text description"" within your HTML link code.

Your Text

Example:

Your Text

In addition, you can display your description text in a list by adding these characters

.

Your Text

The above TITLE description would be displayed like this when you place your mouse over the link:

Example:

Your Text


If your web site gets trapped within someone's frames, you can create a link to help your visitor escape. Place the following code within your HTML where you would like the link to appear.

Escape From Frame

You're actually just creating a link to your own website with the TARGET set to "Top."

At one time, there were many sites designed with frames. However, as more and more people have realized that frames are not a good choice for designing a web site, the number of sites designed in frames has dropped considerably. For this reason, the chance of your site being trapped within someone's frames is slim. However, you may still want to include this link at the bottom of your site.

You can create a link within the same page by adding the following codes.

STEP 1

Select the area you want the link to take you to when clicked on and place the following code within your HTML. Change the name indicated in bold to anything you'd like. This will create an anchor for your link.

Your Text

STEP 2

Create your link and make sure you use the same name as you used in your anchor.

Click Here

You can remove the underline of an individual HTML web page link, also known as a hyperlink, by adding the STYLE tag to your link HTML.

Example Code:

Your Link

Browser View:

Your Link

You can change the color of an individual HTML web page link by adding a font tag in front of your linked text.

Example Code:

Your Link

Browser View:

Your Link

Although you can change the link, keep in mind, your visitors are used to the standard links colors and may become confused if you change it. Use this code with caution.

You can create an HTML mailto email link that will automatically fill in an email subject line when clicked on. Add the following code to your HTML.

[email protected]

Example:

Click Here to test the auto-fill email link.

Many times, you'll find that if you request that a certain word be placed within the subject of an email, it won't be provided. This code can be used to ensure that your email subject is filled in exactly as you require.

The ANCHOR tag is used to create a hyperlink within a web page.

To link to a web page within the same directory of your web site, you only need to include the page name within your HTML code.

Text

When linking to a web page within your web site in a different directory, you must include the directory name with your page name.

Text

When linking to another web site, you must include the full URL.

Text

You can display your HTML web page links in the color of your choice by adding the STYLE attribute to your HTML code.

Example: http://www.yourdomain.com/


http://www.yourdomain.com/

You can change the colors to whatever you'd like, but keep in mind, the text must be visible through the background color.

If you have a file you would like to enable your visitors to download, most web servers will allow you to link directly to a download file.

File

If you have access to ftp, you can create a download link like this:

File

If you don't have access to ftp, you can create a download link like this:

File

Instruct your visitors to hold the "shift" key down while they click on the download link.

Would you like to display an email address on a web page, but need a way to protect it from spammers? This tip is for you.

Displaying your email address on your web site is an important part of good customer service. However, the fear of spam robots harvesting email addresses prevents many webmasters from doing so.

If you would like to display your email address within your web pages and not worry about it being harvested, you can protect yourself. Instead of displaying the usual mailto:[email protected], use the following code within your HTML:

Contact Us

When clicked on, it will display your email address correctly.

WEB PAGE WINDOWSWhen designing a web site, your first consideration should be browser compatibility. Your web site may look great when viewed with Internet Explorer, but when viewed with Netscape Navigator, everything may not be formatted properly.

All web browsers are not created equally. View your site through different browsers and screen resolutions so you will see how your visitors will view your site.

A good way to see how your web site will look through both browsers is to download and install a copy of both Internet Explorer and Netscape Navigator.

Netscape

Microsoft

Visit the following web sites to view your web site through different browsers and screen resolutions:

AnyBrowser - Provides a variety of free services for your web site, including browser compatibility testing, link check, HTML check, meta tag creator and more.

Make sure you view your first web page in different browsers and screen resolutions. Once you get it looking great for everyone, you can use it as a template for the rest of your web site. This technique can save you a great deal of time.

When linking to a web address that isn't a part of your web site, open the web site in a new window. Your web site will remain open in the original window and prevent you from completely losing your visitors.

To open a web page in a new window, add the following code to your link.

Your Link

Try it:

Click here to open a link in a new window.

Although this code is good to use if you're linking to a site outside of your own, you won't want to use it when navigating through your own site, as you want your web pages to open within the same window.

It's a proven fact that the use of popup windows is an effective marketing technique that produces great results. However, they can be very irritating to your visitors. How can you use this powerful marketing technique without offending your visitors? Compromise and use a popup window that only displays the first time your visitor enters your site.

Place the following code within the of your web page.


The "yourpage.htm" text specifies the popup window url.

Change the height and width to your preferred window size.

HTML TABLES

Without using a placeholder within your blank HTML table cells, your empty table cell borders will not display. By simply adding the character code within your HTML, your table cell will be visible.

Example HTML Code With No Placeholders:

Your Text

Your Text

Your Text

Browser View With No Placeholders:

Your Text Your Text

Your Text

Example Code With Placeholders:

Your TextYour Text

Your Text

Browser View With Placeholders:

Your Text Your Text

Your Text

You can add an image background to your HTML table cells by adding BACKGROUND="yourimage.gif" to your tag.

Example HTML Code:

This example displays your text over your image background.

Browser View:

This example displays your text over your image background.

Example HTML Code:

This example displays your text next to your image background.

Browser View:

This example displays your text next to your image background.

The HTML TABLE tag is the opening tag used to create a table within a web page.

To add color to your HTML TABLE cells, add BGCOLOR="#color code" within the tag.

Column 1Column 2

Row 2Row 2

Browser View

Column 1 Column 2

Row 2 Row 2


You can add color to your HTML TABLE borders by adding BORDERCOLOR="#colorcode" within your TABLE tag.

HTML Table Code:

Column 1Column 2

You can find a 216 safe color chart here.

Browser View:

Column 1 Column 2


You can specify your HTML TABLE width as a set number value or use a percentage.

Set HTML Table Width in Pixels

Column 1

Column 2

Browser View:

Column 1 Column 2

Set HTML Table Width as a Percentage

Column 1Column 2

Browser View:

Column 1 Column 2

Set HTML Table Column Width in Pixels

Column 1Column 2

Browser View:

Column 1 Column 2

Set HTML Table Column Widths as a Percentage

In addition, you can set the widths of your TABLE columns to display your columns at a specific width. In the following example, the column widths are set to 50%.

Column 1Column 2

Browser View:

Column 1 Column 2

In the following example, the first column width is set to 25% and the second column is set to 75%.

Column 1Column 2

Browser View:

Column 1 Column 2

HTML SPECIAL EFFECTS

You can create a stationary HTML web page background within your web page.

Stationary background images remain in one place even when scrolling through the page. Only the text will move. To create this effect, place the following code within your tag.

When selecting your background image, keep in mind that your text will be moving over your image, so try to select an image that won't make your text difficult to read.

To prevent your background image from tiling (repeating), place the following code between your and tags.

Replace the text indicated in red with your image file.

You can use an image to create a vertical or horizontal line within an HTML web page.

Create a 2 pixel by 2 pixel image in the color of your choice. This single image can be used to create a vertical or horizontal line on your web page simply by changing the HEIGHT and WIDTH attributes.

Example Code:

Browser View:

Example Code:

Browser View:

When creating a vertical line, you'll need to set up a table.

Example Code:

This portion of the table can be used to display your text. Make sure that you set a specific table width so that your text will wrap and display beside your line image.

Browser View:

This portion of the table can be used to display your text. Make sure that you set a specific table width so that your text will wrap and display beside your line image.

The HTML MARQUEE tag is used to scroll text vertically or horizontally within a web page.

You can change the marquee background color, width, the number of times your message will scroll, and the speed that your text scrolls, by adding the following attributes within your MARQUEE tag.

BGCOLOR="#CCCCCC" - background color

LOOP - Determines how many times the text will scroll. -1 is indefinite and will continuously scroll. You can set this to whatever you'd like.

SCROLLAMOUNT - Determines the speed your text will scroll.

WIDTH - Determines the width of your marquee.

HEIGHT - Determines the height of your marquee.

Direction - Determines the direction in which the text should scroll - up or down.

Horizontal Scrolling Text Marquee

Insert your own copyright information where indicated in red.

If you would like to preload an image so that it will display when the page loads, place the following code between your and tags.

Change the text indicated in red to your image.

By preloading your images, you can increase your web site's load time.

HTML HORIZONTAL RULE

The HORIZONTAL RULE tag is used to divide subjects within a web page.

You can specify the height of an HTML horizontal rule by adding the SIZE attribute to your horizontal rule HTML tag.

In the following example, the horizontal rule is displayed with the height set to 3:

Copy and paste the following code into the HTML portion of your web page where you would like the horizontal rule to appear:


In the next example, the horizontal rule is displayed with the height set to 6. Notice how the height increases when the SIZE value is increased:



Customizing your horizontal rule line dividers will enable you to enhance the appearance of your web site.

The HORIZONTAL RULE tag is used to divide subjects within a web page.

You can specify the width of an HTML horizontal rule by adding the WIDTH attribute to your horizontal rule HTML tag.

The width value may be specified as a percentage or in pixels.

In the following example, the horizontal rule is displayed with the width set to 50%:

This example will display your horizontal rule across 50% of your page width, or if placed within a table cell, 50% of the table cell.



In the next example, the horizontal rule is displayed with the width set to 200 pixels:



WEB PAGE META TAGS

If you would like to prevent web browsers from placing a copy of your web page within your visitor's cache file, this web site design tip is for you.


When visiting a web site, a browser will cache or make a copy of the web page for faster viewing the next visit. This will prevent your regular visitors from seeing your new content unless they manually reload their browser.

To prevent this problem, add the following code between the and tags of your HTML.

If you update your web page with important information on a regular basis, consider using the no cache meta tag to ensure your regular visitors will view your updated web page and not one within their cache file.

If you would like to redirect your visitors to a new web page, this code will enable you to do just that.


You can automatically redirect your visitors to another web page by adding the following META tag between the and tags of your HTML.

The CONTENT attribute tells the browser to redirect the visitor to the URL you specify in 4 seconds. This can be changed to whatever you'd like.

If you move your web site to a new location, this tag provides a great way to automatically redirect your visitors.

If you're looking for a way to prevent Search Engines from indexing a web page, this web design tip is for you.


Many times, you may have a web page that you don't want the Search Engines to index. To help with this problem, add one of the following codes between the and tags of your HTML.

This tag tells the robots not to index this page and not to follow any links within the page.

This tag tells the robots not to index this page, but follow any links within the page.

If you would like to spice up your web pages on entry, select one of the following codes and place it between your and tags.

The Duration determines the length of time the transition will last. The "4" indicated in red sets the transition time to 4 seconds. This can be changed to whatever you'd like. However, try to keep the number at 5 or under.

The Transition determines which transition will be displayed. The "1" indicated in red will display the "Box out" transition.

Select your preferred transition from the list below and replace the "1" indicated in red.

Transition List

0123456

Box inBox outCircle inCircle outWipe upWipe downWipe right

7891011121314151617181920212223

Wipe leftVertical blindsHorizontal blindsCheckerboard acrossCheckerboard downRandom dissolveSplit vertical inSplit vertical outSplit horizontal inSplit horizontal outStrips left downStrips left upStrips right downStrips right upRandom bars horizontalRandom bars verticalRandom

Using meta tags to create web page transitions is a great way to spice up your web site.

Cascading Style Sheets, better known as CSS, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your web site. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire web site with just one file.

The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really only two elements: Content and the way that content is presented. With HTML, we provide content, and define how that content will be presented within the HTML code. However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are

instructed from the very beginning to view their web pages in many different browsers, such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make sure that their web pages appear as they intended and expected them to from one browser to another.

Overall, the HTML code on the web page polices the content, and the CSS polices the HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating your web pages. If you'd like to make a change to your design, instead of having to change hundreds of web pages on your site, you can make one simple change to the CSS file, and it will automatically update all of the pages on your web site. CSS enables you to do in seconds what would take hours to do in HTML.

Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn't require much. You do not need any type of editor, as Cascading Style Sheets can be created using a plain text editor, such as Note Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most popular ones, but there are many others. Once you create your pages and are using CSS, you must ensure that you view your web pages through multiple browsers to ensure they are displaying just as you had intended. Visit Any Browser to view your pages through different browsers.

You may also need a way to upload your pages to your web server. This is typically done with an FTP client, and there are many nice free one's available. You may also upload your files through the control panel of your web hosting service.

Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as embedded or inline, or it can be used externally, which is often referred to as a linked style sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an individual link or text, or have a one or two page web site. If you will have more than that, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the and tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.

Prioritizing CSS and HTML tags

When using CSS, certain tags take precedence over others. Here's how the tags are prioritized:

HTML tags override all other tags.

CSS inline tags override embedded and linked tags.

CSS embedded tags override linked tags.

CSS linked tags won't override any other tags.

Formatting CSS Tags

CSS tags are formatted like this:

selector {property: value;}

The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.

Although this may sound a little confusing, CSS is formatted much like standard HTML. Let's compare the two formats:

HTML

CSS

body {font-size:16px;}

As you can see in the comparison diagram above, the Element is equivalent to the Selector, the Attribute is equivalent to the Property and the Values are the same.

Inline Cascading Style Tags

Inline cascading style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:

Your Link

Browser View:

Your Link

The STYLE parameter is added directly to your original HTML link code.

Inline style tags enable you to specify how each individual link will look.

Embedded Cascading Style Sheets

Embedded cascading style sheets (CSS) can perform the same tasks as the inline style tags. However, the coding is placed between the and tags within your HTML. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.

The following example will display your active text links (after a link has been clicked on) in a specific color. The hover color (when the mouse is placed over the link) will be displayed in an alternate color and the underline will disappear.

Browser View:

Example Link (Place your mouse over the link to view this example.)

The above code will display all of your links in a specific style.

Notice the code is placed within the comment tags? Comment tags look like this:

The comment tags are used to prevent older browsers that don't support style tags from

displaying the CSS codes within their page.

The great thing about embedding style codes is that you can create your own classes of code. What this means is that you can specify different styles throughout your page and then call them within your page.

For example, you can add a class of code to a paragraph selector like this:

Notice the text highlighted in bold? This is a class name I made up. You can call it whatever you'd like. Simply add .yourtext following your selector.

To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used:

Keep in mind, the text you place after your CSS selector (.yourtext) must be the same name as the code you place to call the style.

For example, if your class code looks like this:p.text

the code you use to call the style will look like this:

See how that works?

Linking CSS

The linking CSS method involves creating a file that defines specific styles. This CSS file can be used throughout your entire web site to specify everything from body styles and

headings to paragraphs and HTML tables.

This file might look something like this:

BODY {font-family: Arial;font-size: 12px;}H1 {font-family: Georgia; font-size: 16px;font-weight: bold; color: blue}P { font-weight: normal;color: blue}

This file should be saved as style.css and uploaded to your server where you store your HTML files.

When using a style sheet, you must place a link to your style.css file within your HTML between your and tags like this:

Your Page Title

Page Content

You can link to your style sheet within as many of your pages as you would like. This will give you the ability to update all of your pages at one time, simply by changing the styles within your style.css file.

Creating a Folder for Your Web Page

Prior to creating your web page, your first step should be to create a folder on your desktop or within your My Documents folder to hold your new web page files. You can call it web site or whatever you'd like.

Your next step will be to create a basic HTML page. Simply open a plain text editor, such as Note Pad, and type or paste in the HTML code that you see in the box below. Each

element of that code will be explained below, as it is important that you understand what these codes are and what they mean.

Here is the code that you should copy and paste into your text editor:

Your Page Title

Your Web Page Content

HTML Tags

Everything you see between the < and > symbols are html codes, which are also referred to as html tags. These tags are telling the web browser how they should display the page.

The tag tells the browser that it is about to see HTML coding. The tag contains information about the page, such as the TITLE, META

tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.

The tag tells the browser that the part of your web page that should be viewable by others is about to start. The various tags used inside the body tag tell the browser how to display the page.

For a complete list of HTML codes and examples, visit our HTML Codes Chart section.

Each HTML tag contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets.

Example:

The closing tag contains a forward slash followed by the command enclosed with brackets.

Example:

The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action.

Saving Your HTML Document

Once you have copied and pasted the above HTML code into your text editor, your next step will be to save the document into the new folder you created. If your new web page will be your main or starting page, you should save it as index.htm or index.html, as index is the file name most web servers will look for when someone types your web address into a web browser. Secondary pages should be saved using the pages most relevant keyword phrase. For example, if your page is about dog grooming tips, then you might save your page as dog_grooming_tips.htm.

Next, place some content in your new web page between the and tags. The content may be an article or whatever you'd like:

This Is Content.

This is content that others will be able to see when they visit your web page. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. In this section, you will learn how to format the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created.

Formatting HTML Text

Now, as you can see, the text isn't formatted. It isn't laid out in paragraphs, and it's not that special. Even if you copy text in that is formatted and separated into paragraphs, you will find that when you view it in a web browser, the formatting is gone. That is because the format requires special tags.

Heading Tags

Let's start with the heading of the page. In the example above, the heading says This Is Content. To turn that into something that looks like a heading, we use the heading tags. Heading tags are presented as and may go as high as . The lower the number, the bigger the text will appear. The title or heading of the page goes between these tags, so that it appears like this: This Is Content.

Paragraph Tags

Your next step will be to divide the content into paragraphs. This is done by enclosing

each paragraph with the tags. The opening tag is used at the beginning of a paragraph, and the closing tag is used at the end of each paragraph.

If you'd like to move a sentence or some text to the next line, you can do so by using the (break) tag at the end of or in between your paragraphs.

Bold, Italics and Underline

To further format your text, you can use additional HTML tags, such as tag, which will make any text between the opening and closing tags bold. To italicize your text, use the tags. You can underline your text with the tags.

You can find many more tags you can use within the HTML Codes Chart section.

This is very easy to memorize: b stands for bold, I stands for italicize, and u stands for underline. P stands for paragraph, and br stands for break. H1 stands for heading 1.

By implementing these tags, you will see that your code looks like the following example:

Your Page Title

This Is Content

This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content.

In this section, you will learn how to format the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created.

All of the HTML tags are in red so that they are easier for you to see, but they will not actually be in red within your HTML document. When you view the web page in your browser, you will see that it looks like this:

This Is Content This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content.


If any of your tags appear within the document when you view it in your browser, this usually means that you didn't close a tag that you opened. Now, you are ready to learn how to use CSS.

Embedding Cascading Style Sheets within a web page can be done in two ways - with the code placed between the the and tags or inline, which requires the code to be placed directly within the HTML tag.

We will begin with an example of embedding CSS inline.

Inline Cascading Style Sheets (CSS)

Inline cascading style tags are used within standard HTML code using the STYLE parameter.

The following example will remove the underline of an individual link:

Your Link

Your Link

Edit the web address to suit your needs.

STYLE="TEXT-DECORATION: NONE" - Specifies the text decoration of the link.

In the next example, the linked text has a highlightd background:

Linked Text

Linked Text


STYLE="background:yellow; - Specifies the background color of the linked text.color:black - Specified the text color of the linked text.

The next example will display an HTML form input box with a colored background:

To view this example, place your cursor within the above input box and type.


STYLE="color: #FFFFFF; - Specifies the text color when typing in the input box.background-color: #72A4D2; - Specifies the input box background color.

Visit the 216 Safe Colors section to find additional color codes.

Embedding Style Tags between the Head Tags

Now that you have a basic understanding of inline style tags, we'll move on to embedding style tags between the and tags.

In the previous lesson, we focused on creating a basic HTML web page that looks like this:

Your Page Title

This Is Content


In this section, you will learn how to format the text so that it is easier to read and understand. Use any article or content that you have written, and

simply copy and paste it into the HTML document that you have created.

To embed Cascading Style Sheets (CSS) within your web page, we will start with the basic style tag. Type or copy and paste the following code into the HTML portion of your web page between the and tags:

Here is how your page should look:

Your Page Title

This Is Content



By using the tag, you are telling the browser that you are about to define the style of your page. The additional tags within the tag are providing the browser with some additional information.

The first tag is type= "text/css". This tag tells the browser that the style of the page will be defined using plain text. The title="styleid" portion of the tag isn't for the browser at all. It is for you, so that you can define the style that you are using. It can be called anything, such as style, mystyle, or anything you want.

The last portion of the style tag is media="all". This tells the browser how the page should appear. For instance, you could just use the tag media="screen" in which case the page would only display suitably on a computer screen. If you used the media="print" tag, the browser would display the content in a format that was suitable for printing only. By using the media="all" tag, you are specifying that the browser should display the page in a media type that is suitable for everything.

Comment Tags

The comment tags enable you to hide certain text within a web page. Although it displays within your HTML code, it will not display within the browser view of your web page.

Following the tag, you will see the following:

In the next section, you will learn how to use CSS to specify all aspects of your web page formatting.

Formatting Your Web Page

CSS will enable you to specify all aspects of your web page formatting, such as your web page background color, font size, font color, font face, page margins and much more simply by including special CSS tags between the comments.

Let's start with defining the body of the web page. Using HTML code, this is done inside the tag. But using CSS, it is done within the comment section of the tag. Therefore, there is no need to define anything inside the HTML tag. In CSS, the body tag looks like this: body { }. The information that concerns how the body will be styled goes inside the brackets. The upper portion of your code should now look like this:

Your Page Title

Formatting the Background and Foreground Color of a Web Page with Cascading Style Sheets (CSS)

Next, we define the background color of the page. Colors are defined, in both HTML and CSS with a series of letters and numbers. These numbers are referred to as hexadecimal numbers, and each one represents a color. For instance, the hexadecimal for the color white is #FFFFFF. The hexadecimal is always represented with the # sign followed by a combination of six letters or numbers.

Visit the 216 Safe Colors section to find a complete color code chart.

With CSS, we can define different colors for the background and foreground of our web page. This is done as follows:

Body { background-color: 000000; color: ffffff }

Our page now has a black background with a white foreground. However, please note, defining a foreground color is optional. In addition, defining the background color is also optional. This should only be defined if you'd like a background color other than the default color of white.

Anytime you are defining a format in CSS, you must first state what you are defining, followed by a colon, and then the value. If you would like to include additional tags, they must be separated with a semicolon.

In our example, we are first defining the background color. Following the background color is a colon, which is followed by the value (hexadecimal color code). A semicolon is placed at the end to tell the browser that this definition is complete.

Formatting the Margin of a Web Page with Cascading Style Sheets (CSS)

In the next example, we will be defining the web page margins. Type in margin: 100px. PX stands for pixels and is telling the browser to display the margin at 100 pixels.

Body { background-color: 000000; color: ffffff; margin: 100px }

Formatting the Font Face within a Web Page with Cascading Style Sheets (CSS)

Next, we need to give our fonts more style. We are still working in the tag, inside the comment tag. Starting with the font face or typeset, it is important to use font faces that are commonly installed on computers. If the font face that you select is not on your user's computer, the page will be displayed with their default font face. Therefore, the text may not appear on that user's computer screen as you had intended.

You can specify more than one font face. By doing this, the browser will look to see if the first font is installed on the users computer. If it is not, it will look for the second, and then the third, and so on, until it finds one that is installed. In CSS terms, this is known as a font family.

A good selection of fonts would be Arial, Verdana, Georgia, Times New Roman, and Sans-Serif.

Add this to your CSS as follows:

Font-family: Arial, Verdana, Georgia, "Times New Roman", Sans-Serif;

Note that each font face is separated by a comma, and Times New Roman is in quotation marks, while others are not. Any time you use a font face that has more than one word in its name separated by spaces, you must use quotation marks.

Formatting Font Size within a Web Page with Cascading Style Sheets (CSS)

Next, define the size of the fonts, either using terms, such as small, or numbers, such as 1 or +1. It can also be defined in pixels. Browsers recognize and accept font sizing in a variety of ways.

We will be using pixels within the following example:

Font-size: 12px;

Formatting Spacing between Lines within a Web Page with Cascading Style Sheets (CSS)

The spacing between lines can also be defined. If you don't want to define the line spacing, it will naturally be set to 120% of the size of the font. However, if you want more line spacing than that between lines of text, you can specify a different amount.

Line-height: 160%

Notice that there is no semicolon after 160%. This is because we are finished defining the body section of the CSS. The final definition needs no semicolon after it.

The upper portion of your HTML/CSS code should now look like this:

Your Page Title

Formatting Head Tags within a Web Page with Cascading Style Sheets (CSS)

You can use CSS to specify how your Head tags should be formatted. For example, you can specify the font face and color of the tag within your web page like this:

H1 { color: ff0000; font-family: Arial, "Times New Roman"; }

Your HTML code would look like this:

Your Page Title

As you can see, we are still working inside the comment tag of the tags. Now that the H1 definition has been added, anywhere the H1 tag appears within the web page, the color of that text will be red, and it will appear in the Arial font.

Formatting Paragraph Indentions and Letter Spacing within a Web Page with Cascading Style Sheets (CSS)

With CSS, you can even control the indention of paragraphs and the spacing between letters in words. To define the indention that should be used for each paragraph, include the following code:

P { text-indent: 5em }

This will cause a five space indention at the beginning of each paragraph. To specify spacing between letters, use the following example:

P { text-indent: 5em; Letter-spacing: 0.5em }

Now, the paragraphs will be indented five spaces, and the spacing between each letter will be half a space. This also works when defining headings, such as:

H1 {color: ff0000; font-family: Arial, "Times New Roman"; letter-spacing: 0.5em}

As you are beginning to see, CSS allows you to manipulate all of the text within the page in ways that HTML doesn't allow. In the following lessons, you will learn how to manipulate other HTML tags with CSS.

In HTML, to create a list, you use either the tag or the tag with the tag used in between to define list items. The tag defines an unordered list, which will have bullet points beside each list item, while the tag defines an ordered list that will have numbers beside each item. The first example below is an HTML unordered list, and the second sample is an ordered list.

HTML Unordered List

Item oneItem twoItem three

In a web browser, this code would appear as:

Item one Item two

Item Three

HTML Ordered List

Item one Item two Item three

In a web browser, this code would appear as:

1. Item one 2. Item two

3. Item three

However, you may want to use squares instead of round bullet points, or roman numerals instead of numbers. In HTML, you must specify this in each tag, using either for square bullets or for roman numerals. Remember, in HTML, this must be done inside each HTML tag.

Howe

120332033 Limbajul HTML

Documents

Transcript of 120332033 Limbajul HTML