Html Tutorial Part Two *Text and Images
This is a discussion on Html Tutorial Part Two *Text and Images within the Programming Articles forums, part of the Webmaster Articles/Tutorials category; The newest version of many browsers supports extended fonts, in which you can choose to have the document fonts be ...
| |||||||
| Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read |
14-05-2005, 15:25
| #1 (permalink) |
| Ultimo Supremo |  Html Tutorial Part Two *Text and Images The newest version of many browsers supports extended fonts, in which you can choose to have the document fonts be other than the normal one. This is accomplished by adding the FACE="font_name" attribute to the <FONT> tag. The most commonly supported fonts are Verdana, Arial, Helvetica, Impact, Comic Sans MS, and a few others. It is not recommended to make your page font dependent, because the older versions of many browsers don't yet support this feature. Example of Extended Fonts... <font size=+2 face="Verdana">Verdana</font> Verdana <font size=+2 face="Arial">Arial</font> Arial <font size=+2 face="Helvetica">Helvetica</font> Helvectica <font size=+2 face="Impact">Impact</font> Impact <font size=+2 face="Comic Sans MS">Comic Sans MS</font> Comic Sans MS Note: If you don't see one or more of the above fonts, then your browser probably doesn't support the extended fonts. Text Color... You can change the color of the text by setting the COLOR="font_color" attribute in the <FONT> tag. The Color is usually set by using the hexadecimal system (#000000 black to #FFFFFF white) but can also be set in newer browsers by using the simple word of the color. (Red for Red, Blue for Blue, etc.) Example of Text Color... <font color="Blue">Hey I'm Blue!</font> Hey I'm blue! <font size=+2 face="Impact" color="Green">Hey I'm green and in Impact Font!</font> Hey I'm green and in Impact Font! <font color="Red">Hey I'm red!</font> Hey I'm red! Your own HTML page... Add the following to your HTML page ("Home.htm"): (the blue text is what to add) <html> <head><title>My Home Page</title></head> <body background="bgnd.gif"> <center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center> <hr> This is the home page of <b>YOURNAME</b>. <p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p> </body> </html> Anchored Links... Without Links, the World Wide Web wouldn't be a web at all! To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes. Example of a link... Visit WMT! Visit <a href="http://www.webmastertalk.co.uk/">WMT</a>! Note: Although Links are usually used to send people to other web pages, you may also use it to send email to a specific address by using a location of mailto:user@host. Example of a Mailto: Link... Send email to the Webmaster! Send email to <a href="mailto:craig@webmasterforu,co.uk">the Webmaster</a>! In-line Images... You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!) Example of a basic in-line image... Get Internet Explorer Now <img src="BANNER.gif"ALT="WMT banner"> Combining Links and Images... Many times you may want to have an image that is linked, so that if someone clicks the image, they will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags. (<a href="location_of_link"><img src="location_of_image"></a>) You may also use the ALIGN tags with images! When an image is also a link, it has a border around it by default. You can control the width of the border - or turn it off completely - by using border=n within the img tag. n is the width of the border (n = 0 for no border). Example of a linked image... <a href="http://www.webmastertalt.co.uk/"><img src="WMT.gif" align=right border=0></a> Your own HTML page... select an image and "Save Image As" / "Save Picture As", or similar. Save it as "bullet.gif" in the same directory where your home page "Home.htm" is stored. Bullet Image bullet.gif Add the following to your HTML page ("Home.htm"): (the blue text is what to add) <html> <head><title>My Home Page</title></head> <body background="bgnd.gif"> <center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center> <hr> This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a> <p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p> </body> </html> Not to be redistributed or taken from WMT without prior written permission from morphmaster. -- permission from robertall |
|      |
 |
| Tags |
| html, images, part, text, tutorial |
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
| ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Html Tutorial Part Three*frames | Morphmaster | Programming Articles | 1 | 14-05-2005 21:56 |
| Html Tutorial Part Five *Forms | Morphmaster | Programming Articles | 0 | 14-05-2005 21:54 |
| Html Tutorial Part Four *search engines | Morphmaster | Programming Articles | 0 | 14-05-2005 21:52 |
| Html Tutorial Part One *Tags | Morphmaster | Programming Articles | 0 | 14-05-2005 15:18 |
| HTML Images | Bmg | Programming Articles | 0 | 07-04-2005 16:24 |
All times are GMT +1. The time now is 16:48.
