The font tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to customize your fonts. Use a basefont> tag to set all of your text to the same size, face, and color.
The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font. See our CSS Tutorial for more information.
Font Size
Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).The default size of a font is 3.
HTML Code:
Here is a size 5 font
Font Size:
Here is a size 5 font.
Font Color
Set the color of your font with color.
HTML Code:
font color="#990000" This text is hexcolor #990000/font
font color="red" This text is red /font
Font Color:
This text is hexcolor #990000
This text is red
Font Face
Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.
HTML Code:
This paragraph
has had its font...
Font Face:
This paragraph has had its font formatted by the font tag!
Basefont - Set a Solid Base
With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using any font with HTML. Below is the correct way to set your basefont.
HTML Code:
This paragraph has had its font...
This paragraph has had its font...
This paragraph has had its font...
Base Font:
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
However, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS. Check out our CSS Tutorial for more information.
Attribute Review
Attributes:
Attribute= "Value" Description size= "Num. Value 1-7" Size of your text, 7 is biggest color= "rgb,name,or hexidecimal" Change font color face= "name of font" Change the font type
Beautiful First Letter Style
Customize your fonts to achieve any of your desired looks.
HTML Code:
Customize
your font to achieve a desired look.
Beauty:
Customize your font to achieve a desired look.
HTML - Links and Anchors
The web got its spidery name from the plentiful connections between web sites. These connections are made using anchor tags to create links. Text, Images, and Forms may be used to create these links.
HTML - Hypertext Reference (href)
The href attribute defines reference that the link refers to. Basically this is where the user will be taken if they wish to click this link.
Hypertext references can be Internal, Local, or Global.
Internal - Links to anchors on the current page
Local - Links to other pages within your domain
Global - Links to other domains outside of your site
HTML Code:
Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href="http://www.tizag.com/"
HTML - Text Links
Use the tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. Use the demonstration below as a reference.
HTML Code:
Tizag Home
ESPN Home
Yahoo Home
Global Link:
Tizag Home ESPN Home Yahoo Home
HTML - Link Targets
The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.
HTML Code:
target=" _blank" Opens new page in a new browser window _self" Loads the new page in current window _parent" Loads new page into a frame that is superior to where the link lies _top" Loads new page into the current browser window, cancelling all frames
The example below shows how you would link to ESPN.COM, a popular sports web site. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can remain at our web site. Here's the example.
HTML Code:
ESPN.COM
_blank Target:
ESPN.COM
HTML - Anchors
To link to sections of your existing page a name must be given to the anchor. In the example below, we've created a mini Table of Contents for this page. By placing blank anchors just after each heading, and naming them, we can then create reference links to those sections on this page as shown below.
First, the headings of this page contain blank, named anchors. They look like this.
Tizag's Own Code:
HTML Links and Anchors
HTML Text Links
HTML Email
Now create the reference links, placing the pound symbol followed by the name of the anchor in the href of the new link.
Anchor Code:
Go to the Top
Learn about Text Links
Learn about Email Links
Local Links:
Go to the Top
Learn about Text Links
Learn about Email Links
HTML - Email Links
Creating an email link is simple. If you want somebody to mail you about your site a good way to do it is place an email link with a subject already in place for them.
HTML Code:
Email@tizag.com
Email Links:
Email@tizag.com
In some circumstances it may be necessary to fill in the body of the Email for the user as well.
HTML Code:
Email@tizag.com
Complete Email:
Email@tizag.com
HTML - Download Links
Placing files available for download is done in exactly the same fashion as placing text links. Things become complicated if we want to place image links available for download. The best solution for images is to use a thumbnail link that we discuss in the next lesson.
HTML Code:
Text Document
Download a Text Document:
Text Document
HTML - Default Links; Base
Use the base tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set your base to your home page.
HTML Code:
base href="http://www.tizag.com/"
No comments:
Post a Comment