"Yellow Bird"

"God grant me the serenity to accept the things I cannot change,
courage to change the things I can,
and wisdom to know the difference."
~The Serenity Prayer~

~ Welcome to my Basic HTML Help Page ~

HTML is the "language" that designers use to create their unique pages on the World Wide Web. It is easy to learn and constantly changing.

To stress the importance when using HTML Tags PLEASE REMEMBER each HTML Tag requires both an opening <>and closing <"/"> Tag. If a closing Tag is not inserted then your entire message will be what your LAST opening Tag was. Below you will find a chart that will help you with the basics of HTML.

~ BASIC HTML INDEX ~
  • Basic WebPage Structure
  • Basic Codes
  • Font Sizes
  • Font Colors
  • Font Types
  • Installing Fonts
  • Using Un-installed Fonts
  • Headers
  • Alignment
  • Display a Link
  • Add Pictures or Background Images
  • Changing Sizes of Images
  • Adding Borders to Images
  • Add a Mail Link
  • Adding Music to Homepages
  • Making Horizontal Lines
  • How to Copy & Paste
  • Hints & Tips

    • ~ Basic WebPage Structure ~

    You will find that every WebPage contains the same basic structure. In some cases Java Script is also used as well. HTML stands for Hyper Text Markup language which is simply computer language that interacts with the Internet. The basic structure is...

    <HTML> This lets your browser know you are starting to use HTML. <HEAD> This identifies the first part of your WebPage. <TITLE> This is the name of your WebPage. </TITLE> Closes the Title tag. </HEAD> Closes the HEAD tag. <BODY> This is the main text of your page. </BODY> Closes the BODY tag. </HTML> Closes the HTML tag.

    Go to HTML Index.

    ~ Basic Codes ~

    <u>underlined text</u> ~ Underline <b>bold text</b> ~ Bold <i>text</i> ~ Italics <blink>blinking text</blink>~ Blinking <center>centering text</center> ~ Centering Text <s>text</s> ~ Strike Out <p>text</p> ~ Paragraph <hr> ~ Horizontal Rule <br> ~ Line Break <ul><li>text</ul> ~ Bullet

    Go to HTML Index.

    ~ To Change Font Sizes ~

    To change font sizes you simply change the number after size=. (1 = smallest, 8 = largest)

    <font size=1>your text</font> your text is font size 1
    your text is font size 2
    your text is font size 3
    your text is font size 4
    your text is font size 5

    Go to HTML Index.

    ~ Font Colors ~

    Font Colors are represented by either color, hexidecimal or RGB color. There are 140 colors that you can program into your HTML code by name without having to type in a hexidecimal code.

    To change the color of your type...

    <font color="red">your text will be in red</font> <font color="0000FF">your text will be blue</font>

    You can control the color of the background, text and links in your home page by using the tag. To control the various colors on your page, the tag is written like this...

    <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

    Included in my "links" page you will find several excellent sites you can browse through to find the color you are wanting to use.

    Go to HTML Index.

    ~ Font Types ~

    To change the type you are using...

    <font face="Script MT Bold">type your text</font> <font face="BrockScript">type your text</font> This is Script MT Bold
    This is Brock Script

    To do all three:

    <font color="red" size="4" face="Script MT Bold"></font>

    Included in my "links" page you will find several excellent sites you can browse through to find the font you are wanting to use.

    Go to HTML Index.

    ~ How to Install Fonts ~

    Download the zipped font. Left click on the font of your choice and a "save file" screen will pop up. Select the folder into which you want to save the zipped file.

    With WinZip, unzip the font. Click on WinZip to download it if you don't have it.

    • Go to the Windows Desktop

    • Double-click the "My Computer"

    • The "My Computer" window will open

    • Double-click the "Control Panel"

    • The "Control Panel" will open

    • Double-click the "Fonts"

    • The "Fonts" window opens showing you the installed fonts

    • Click on "File" and then click on "Install New Fonts"

    • The "Add Fonts" window will appear

    • There will be a white text box labeled "Folders"

    • Look in the Folders List box for your unzipped font

    After the fonts are loaded, they will be shown in the white text box labeled "List of Fonts". You can scroll through this list box and select the font you want to install. You can click on one font or click on the "Select All" button if you have selected several fonts.

    Go to HTML Index.

    ~ Using Un-installed Fonts ~

    There may be times when you want to use a font that is not installed on your hard drive. Follow the below instructions without having to install the font to your Windows font directory.

    • Go to the directory or disk that contains the zipped TTF and double click on the .ttf filename or the zip file icon that appears next to the name.

    • If you have Winzip installed, it will open up automatically. Once opened double click on the .ttf file name.

    • This will open up the view window of the font.

    • Minimize this screen to your Windows Tray. As long as this font remains minimized on your Windows tray, this font will be available to any application that utilizes fonts including PSP.

    NOTE ~ If the True type Font is not in a zip file, but not yet installed in the Windows Font Directory, just follow steps 2 to 4.

    Go to HTML Index.

    ~ Headers ~

    Web browsers recognize six levels of headers.

    <h1>Level one header</h1> <h2>Level two header</h2> <h3>Level three header</h3> <h4>Level four header</h4> <h5>Level five header</h5> <h6>Level six header</h6>

    Level one header

    Level two header

    Level three header

    Level four header

    Level five header
    Level six header

    Go to HTML Index.

    ~ Alignment of your Text ~

    <p align=right>Aligns text to the right side.</p> <p align=center>Aligns text in the center.</p> <p align=left>Aligns text to the left side.</p>

    Go to HTML Index.

    ~ Display a Link ~

    Link ~ <a href="http://geocities.datacellar.net/5245">Charo's</a>

    Go to HTML Index.

    ~ Adding Pictures or Background Images ~

    To insert your own image type the URL of the picture (.gif or .jpeg) location from where it is on your server, not on your hard drive.

    Some readers use Web browsers that cannot display images, while others turn off the display of images to browse more quickly. By adding (Alt="your image") in the (IMG) tag the text will appear if the image does not.

    Display image ~ <img src="http://geocities.datacellar.net/yourimage.gif" width="20 height="20" Alt="name of image">

    To display a background image you need to go to the basic HTML tags beside (BODY) where you put your text. Instead of putting just (BODY) add the name of the background including the .gif or .jpg extension you have chosen.

    <BODY BACKGROUND="lightbluetexture.gif">

    Go to HTML Index.

    ~ Changing the Size of an Image ~

    You can change the size of an image on a webpage. Avoid making images too big since enlarged images may appear grainy. In the (IMG) tag, replace the WIDTH value with the width you want to use in pixels. To keep the image in proportion, make sure you use multiples of the original width and height. Do the same with the HEIGHT tag by changing the value with the height you want to use with pixels.

    <img src="angel.jpg" width=180 height=150> <img src="angel.jpg" width=360 height=300>

    Go to HTML Index.

    ~ Adding a border to an image ~

    <tr><td><table cellspacing=0 cellpadding=0 bordercolorlight="xxxxxx" bordercolordark="xxxxxx" border=8> <hr size=8 align=center noshade width=40%> <p><img src="http://geocities.datacellar.net/5245/angel.gif" border=0></table></td><tr>

    Go to HTML Index.

    ~ How to do a mail link ~

    <a href="mailto:charo5@hotmail.com">E-mail</a>

    Go to HTML Index.

    ~ Adding Music onto Homepages ~

    Below are several different variations to the sizes of the Crescendo music icon you can use.

    For Explorer use...

    <bgsound= src="path & name of your midi.mid"> <bgsound src="midi/yellowbird.mid">

    For Netscape the small music icon I have displayed at the top of the page is...

    <embed src="yellowbird.mid" autostart="true" Height="16" Width="16" Loop="true" volume=75 alt="Yellow Bird"></embed>

    It is a simple matter to turn the music off when viewing a page with a small music icon as above by right clicking on the icon. This will also give you the song information, volume etc.

    Another couple of examples are...

    <embed src="your-midi.mid" autostart=true controls=smallconsole height=15 width=49></embed>
    name of song
    <embed src="your-midi.mid" autostart=true height=55 width=144></embed>
    name of song

    Another alternative is to use a graphical link. This would be very handy if you have a page full of midis that people can click on to hear the desired music. Simply hyperlink it to the midi like this...

    <a href="name-midi.mid"><IMG SRC="midi.jpg" BORDER=0 ALT="name of song"></a>
    name of song

    To add the border around the tiny music icon as I have done add this...

    <TABLE BORDER=2><TR><TD>.......</TD></TR></TABLE>

    Example...

    <center><TABLE BORDER=2><TR><TD> <embed src="yellowbd.mid" autostart="true" Height="16" Width="16" Loop="true" volume=50> </embed></TD></TR></TABLE></center>

    Remember to use (embed) & (/embed) replacing (& ) for < & > Autostart=true music starts playing automatically Autostart=false music will only start playing with the "play" button is pressed

    Loop tag refers to how many times the sound file will play. If you chose "true" the music will keep repeating itself. Otherwise you can just select a number of times it should play. IF YOU DON'T INCLUDE THIS LOOP="?" THE MUSIC WILL PLAY ONCE AND QUIT!

    Similar tag repeat="true" will loop until the STOP is pressed repeat="false" or do not include the tag the music will stop after it has played once!

    There is another tag hidden="true/false" that you can use but this is optional. If you want the icon to be invisible chose "true" but the music must be autostart for this to work. Otherwise, chose "false".

    Go to HTML Index.

    ~ Creating Horizontal Lines ~

    You can insert a horizontal line in your document to separate your sections. The default line is full width, thin and shaded. By changing the size, width and alignment you can change the appearance of the line. Changing the size will produce the thickness you want. Changing the three-dimensional horizontal rule to a flat, two-dimensional rule by removing the shading.

    Changing the size changes the thickness of the line with 1 pixel being the smallest, 10 pixels being thicker. You can change the width of the horizontal rule and will appear centered on your Web page. To change the position of the rule add ALIGN=left, ALIGN=right or ALIGN=centered.

    <hr>

    An example of combining this enhancement...

    <hr size=8 align=center noshade width=50%>

    Go to HTML Index.

    ~ How to Copy & Paste ~

    This tip will save you a lot of time and typing! In order to copy then paste follow these instructions:

    • Highlight by placing your mouse cursor at the top and to the left of the text you want to copy. While holding down your left mouse button drag it over the entire text you wish to highlight. When you release the mouse button the text will be highlighted.

    • Now click on edit and then copy.

    • Go to the location where you want your text placed. Simply left click to place your mouse cursor where you want your information pasted.

    • Now click on edit then on paste.

    Go to HTML Index.

    ~ Hints & Tips ~

    Blank Spaces on your page ~ When you are trying to get blank spaces on the page, many people use . This will work in some browsers, but if you want to be sure they will work in most browsers, use instead. The ; is important at the end of the code. It is not punctuation!

    Pictures on your page ~ Remember that before you can put pictures onto your homepages, you have to upload them to GeoCities first as they won't work from your hard drive.

    Make Your Pages Load Faster ~ If you want your pages to load faster, you can specify the size of your graphics. The browser will set aside the space for them and continue to load the page while the graphic is loading, instead of waiting for the graphic to load completely.

    Find the Size of your Image ~ To find the size of your graphic simply right click on the graphic, then click VIEW graphic. The width is always posted first, height second. Now you can define them in the tag like this...

    <img src="yourpicture.gif" width="150" height="200" border="0" alt="imagelink">

    Posting border="0" will keep your linking graphics clean without the border around them. Posting alt="____" is simply the name you give the graphic.

    Closing your Tags ~ When you include tags inside other tags, make sure that the closing tag closes the tag that you most recently opened. Do this:

    <p><a> .... </a></p>

    Instead of this:

    <p><a> .... </p></a>

    Bandwidth & Linking ~ With the hundreds of thousands of people on the Internet today, setting up homepages for pleasure and fun or for business, the rage is to own your own domain. If your site contains written html for a graphic, it should look like this:

    <IMG SRC="graphic.gif">

    The incorrect way would be to have your image or midi like:

    <IMG SRC="http://www.not_your_server.net/name_of_image.gif">

    This is called stealing bandwidth. This is using another person's server to display your images and/or music. With all of the free websites being offered today, such as Geocities, there is no reason to link to someone else's images and/or music.

    A WORD OF WARNING ~ Most engineering artists change their images often. Some have taken the strategy of removing one image and replacing it with one that is not quite so becoming. If they have done this and you are linking to their images, you may end up displaying something on your website that could prove to be very embarrassing.

    Go to HTML Index.



    If you would like to reach me, you can email me at:

    MAIL

    ADVANCED HTML

    ~ CHARO'S INDEX ~
    ABOUT ME CYBERFRIENDS CALLING CARDS
    QUOTES POETRY FREE INTERNET CARDS
    WEBPAGE FINAL CHECK CREDITS MEMBERSHIPS
    AWARDS WEBRINGS HOME

    Last updated: Thursday, September 7, 2000

    Read my Dreambook!
    Sign my Dreambook!     		Dreambook

    CopyrightŠ byCharo1998, 1999, 2000
    All original graphics are digitally
    watermarked for identification.

    This page hosted by   Get your own Free Home Page




    1