| HTML Tutorial | ||
FTP |
Here is my basic guide into HyperText Markup Lanuage. I have put it all into one page so that you can print it off to reference to later. It isn't much at the moment and is just a basic guide, but you should get the idea - there is no referance to forms or frames. Click here for that. If you do have any questions, please post the questions to my weboard. If you are ever in a page and you want to know How they did that, or want to know how something works, you should always view the sourse code of the page.
Heres what I 've covered. To start a HTML document, you are going to need to tell it, it is a html document! Your page will need to consist of the <html> tag. Note: every time that you make a tag you will need to closed it off with a / </html> or what every the tag is. So now you should have something like this. <html> </html> Now when the browser goes to load your page it will know that it is a HTML document. Now that is all very good but you want to give your page a title! To do this you will need to use the <title> tags. The title will appear in the top left hand corner of your browser. <html> <head> <title>What you want to call your page</title> </head> </html> See how easy it is!! You can see I have added some head tags. They are using for when you want to include scripts or something which needs to be read before the browser starts to read the body. Thats where I come onto next. The <body> tags are where you will put your main document, all the text and graphics you need. <html> <head> <title>What you want to call your page</title> </head> <body> TEXT OR IMAGES IN HERE </body> </html> And by doing that you will be able to create a basic HTML document for you to publish on the web. But of course doing it that way you will have no control over the colour of the backgrounds and the colour of the text.
Starting to control your documents appearence You will now proberly want to start to add a different kind of background and change the colours of your links and text. First of all we will start with with the colour of the back ground for your document. To change the colours of text or background you need to incoroperate them into the <body> tag. For example I want to change the colour of my background to black and to have white text. My body tag will look like this. <body bgcolor="#000000" text="#ffffff"> The hexidecimal number 000000 needs to be in quote marks and have a # in front of it to work. You could write the colour in like "green" or "blue" , but I find it much better to put the hexideciamal code as then all browsers will be able to read it. So incoroperating your new body code into the document, you should have something looking like this. <html> <head> <title>New Document</title> </head> <body bgcolor="#000000" text="#ffffff"> TEXT AND GRAPHICS </body> </html> By putting that into the body you will be making your background appear in black and your text in white. For a list of a lot of colour codes and there value click here And to put in a code and see what the colour looks like click here. Now you can change text colour and background, you will want to change the colour of your links. The tag is link=" and vlink=". You out the usally hexidecimal code in after the " marks to make the colour. So know your body tag will look something like this. <body bgcolor="#000000" text="#ffffff" link="ff0000" vlink="0000ff"> This will give you a black background with white text, a red link and blue links when they have been followed through. So know you can change all the colours of text in your page, but what if you want some a piece of text a different colour from the rest?? You use the <font> tag. With the <font> tag you can change the colour, font and size. To change the colour you would: <font color="#0000ff">BLUE TEXT HERE</font> To change the size of the text you would use this tag <font size="4">4 being the size the text will be</font> To change the font of the text you would add, <font face="Arial">Makes the text in Arial</font> You can also include all of these into the same tag <font face="Arial" size="4" color="#0000ff">All in the same tag</font> To control the size of your tags you can also use the <h?>. The question mark represents a number between 1 and 6. 1 being the largest and 6 being the smallest. Put the tags around your text and it will resize it accordingly. <h3>hello</h3> To make your background an image is relitivly the same except, instead off bgcolor you use background. And then need to insert the where the file location is off your background. For example: <body background="nameoffile.gif"> or it could be a jpg extention. Make sure your file is in your directory if you are going to be using just its name. Otherwise specfiy the path from where it is located; <body background="http://www.website.com/clouds.jpg" > This would take a background from my other site. There is an effect you can give to your background which will make it look like the text is hovering over it. Insert bgproperties="fixed" Into the tag. And your background will be fixed and your text will hover over it. It is a pretty good effect which I like.
Putting links and graphics into your document Now you will have a pretty good idea of what you are doing, you are going to want to put in new pages and links to them and other sites. You will also want to spice up your page by adding some graphics, or even better haveing a graphic as a link!! In this section you will also learn about setting heights for your grahics and the alt tag. First of all we will start with createing a link. This can either be within the document or to another site and is done by using the <a href> tag. Where ever on your page you want the link you would type it. For example. To link to a document within your page you could use this, <a href="NEW.html">New Document</a> That may look abit confusing right now so let me break it down. The <a href="NEW.html"> is telling the browser where to look for the document. Remember that names are CaSe SenSiTiVe if you host runs on a unix server and remember to include the extenstion and the "" marks, otherwise the link will not work. Leaving the "" marks out is a very common mistake and is most of the time the reason why a link does not work. After I have closed that part of the tag you can see the writing New Document. This is where you write what you want the document to be called. For example if you had a document on Brazil you tag might look something like this. <a href="Brazil.html">All about Brazil</a> And the </a> tag at the end is to close the tag up. Well that was very simple, you have proberly already figured out how to link to other sites on the web and to have a graphic as a link. Well if not here we go. To link to another document in the world wide web is the same as before except you will have to specify the sites address after the a href, <a href="http://www.geocities.com">www.geocities.com</a> This will make a link to the geocities homepage, of course where i put www.geocities.com you could put something like Geocities. So now you can link to pages on the world wide web or within your document. It is time to learn about putting in images. Once you know that I will explain putting an image in as a link. So to put in an image you would need to use the <img src> tag. This works in roughly the same way as before, you can link to images within your document or on the world wide web. <img src="inside.gif"> <img src="http://www.geocities.com/images/outside.jpg"> You can use either .gif, .jpg or .mpg files, but I would say now that do not use .bmp files as netscape browsers will not read them. Remember that file names are CaSe SeNsItIvE if you are on a unix server and remember to include the right extention and the "" marks. Now when you move you mouse cursor over image you might want a little message to be displayed. You do this by including alt into the tag. For example <img src="Picture.gif" alt="A pic of me on out boat"> When you mouse over the image th message, A pic of me on our boat will be displayed by the mouse cursor. Some images you may find are to large or to small, you can control the size of them. You will need to put width="??" and height="??" into the tag. Where the ?? marks are you write in a number, ie 60, this will make it 60 pixels wide or 60 pixels high depending on where you put it. The usual monitor size is 800x600 so you can get a far idea of the size the image will be. So will now have a tag looking like this. <img src="Picture.gif" alt="A pic of me on our boat" width="60" height="60"> Thats all pretty easy and now i bet you are wondering how to place a link as an image. Go on think about it..........................no??? You put the image tag in where you would put your writing, look; <a href="Brazil.html"><img src="Picture.gif" alt="A pic of me on our boat" width="60" height="60"></a> Now you can create a link, put an image in a document, add the alt tag and resize it. Now its time to move on to page formatting.
Now you will have a pretty good idea of what you are doing. You may want to start formatting your document. What I mean by this is putting in paragraphs, line breaks, aligning text and what ever else you need to know. OK, the first thing that you will be dieing to know is how to make paragraphs and line breaks. I mean you do not want to page in one hugh chunk do you. It needs to be spread out and easilly read. So here we go; To make a paragraph, you need to type <p> where you want the paragraph to be made. To make a line break, you need to type <br> where you want the line break to be made. Do I hear you shouting what is the line break?? Well the line break is what stops the text on the line and moves onto the next. The paragraph does this but leaves a space in between the lines. WOW that was easy, we are becoming quite some experts now aren't we!!! Well we can do quite alot now can't we, I think its time you want to be able to control the postion of things on your web page. I will just get this one out of the way, the most simple way to center your text. The <center> tags, so easy to use and so effective. You just put them round the text or image you want to center and baboom, they are center. Easy. <center>LOOK MY TEXT IS CENTERED!!!</center> Another way to make your text or make go left right or center is to use the <align> tag. With the align tag you can use either <align="LEFT/CENTER/RIGHT"> If you put that with in one of your tags or before a piece of text it will do just that. But if you do put it before some text and you want it to end remember to align the text back to where you want it. <img src="here.gif" align="right"> and then ; <align="left"> To align all your text back to the left. This can be quite tricky to get the hand of first, but it should all fall into line. Now to make your text bold, italic, or what have you, here are the tags. <b>BOLD</b> <i>ITALIC</i> <u>UNDERLINE</u> <tt>TYPEWRITER TEXT</tt> Ummmm, what else can I tell you?? Oh yeah, the preformatted tag. This allows for the browser to read exacalty how you typed it. So no need for <br> and <p>. You can also create long spaces in this tag. I hear you say this is great but what is it!!????! You use the <pre></pre> Put that around the text you want to stay as it is. <pre> Hello, my text is in preformatted tags and i didn't need to use line breaks !! </pre> Here is the tags for other stuff which you may use, including lists, <ul> <li>apples <li>bananas <li>orange </ul> This will create a bullet point list;
To create a numbered list; <ol> <li>apples <li>bananas <li>orange </ul>
To create a nested list, here is an example <ul> <li> A few towns
<li>Some Cities
</ul> Here is what it looks like
To create a horizontal rule or a line into your document. <hr size="10" width="100%" > s will create a line across your page, of course you can change the width and size, just edit it as appropriate. Creating a Mailto What a mailto does is bring up the clients email with your address on it all by a click. <a href="mailto:[email protected]">EMAIL ME HERE</a> <a href="mailto:[email protected]?subject:whatever&body:body text here"> Web Fonts This Font is Webdings (webdings) This Font is Verdana This Font is Georgia This Font is Trebuchet MS This Font is Comic Sans MS This Font is Impact This Font is Arial This Font is Courier New This Font is Times New Roman This Font is Helvatica Webdings Explored A=A B=B C=C D=D E=E F=F G=G H=H I=I J=J K=K L=L M=M N=N O=O P=P Q=Q R=R S=S T=T U=U V=V W=W X=X Y=Y Z=Z 1=1 2=2 3=3 4=4 5=5 6=6 7=7 8=8 9=9 0=0 !=! "=" �=� $=$ %=% ^=^ &=& *=* (=( )=) -=- _=_ === +=+ `=` �=� \=\ |=| ,, <=< .=. >=> /=/ ?=? ;=; :=: '=' @=@ #=# ~=~ [=[ ]=] {={ }=} t all the hits to pats all there is to i really, but you could resize it if you wanted or make bigger, as we taked about before. To add sound to your pages, use the following tag. This will allow both browsers, ie and netscape to hear it and supports most sound file types all the values in green you can change accordingly. <embed src="filename.mid" autostart=true loop=true width=16 height=16><noembed><bgsound src="filename.mid" autostart=true loop=infinite width=16 height=16></noembed> It could be placed anywhere in the document, but with the head tags would be best. This tag also supports .wav and .au file extentions. Adding an automatic refresh or to take you to another page, automatically This tag is to be place in the head tags, <meta http-equiv="refresh" content="#; url=http://";> ~ where # you put the number of seconds you want the page to wait to refresh and http:// the url you want the page to refresh to. |