HTML and CSS Basics2
Here are some basic HTML and CSS codes you may want to use to swebsite. If you want more than one (ex. bold&italics) just combine it together <b><i>TEXT HERE</i></b> except without the brackets.
Bold text
The tags "<b>" and "</b>" around the text make it bold. The < > tags start the HTML code and </ > ends the code, signaling that you only want a certain text to be bold.
Italics
Same as bold. Anything between <> and </> is part of the HTML code. When "i" is between the < and > tags, you're saying that you want all text after the initial <> tag to be italic. To end the code you simply put a slash (/) after the first < tag: </i>
Underline
Same as bold and italics.
Strikethru
Same as the above ones.
Make a Link:
So you want to link a site, eh? Well, you've come to the right place! Now the basics:
<a href="http://URL HERE">TEXT HERE</a>
We're going to break it down bit by bit for you. Remember that the <> tags start the HTML codes- saying that you want everything after the tag to become involved with the code. The only way to stop this is to put a slash: </> after the text or part of the page you want coded. The <> tags won't show if you do it correctly.
The "a href" part basically calls the link. That's why there's "=". This is the important part. You must have the "quotes". Especially because there are other things you can add to the HTML code, such as an ALT message and new targets. We'll deal with that later. After the " you put "http://" and then the url. The "http://" part is important if you want the link to go properly, or if you want the link to open in a new window. If you are linking to another page on your site, you don't need the "http://" part. I'll go over that in a bit.
So, let's look at our link code so far (I'll be using SOS's url): <a href="http://sos.shukuya.com" Don't forget the quote at the end. Now we need to close the starting tag. We can do this simply by adding > at the end like this: <a href="http://sos.shukuya.com"> You may want to use a link for practice.
We have the first part of the code done. Remember what I said before: The first tags of the HTML code call the code- meaning everything following will be included. After the > tag, you want to put some sort of text so your viewers know what site or link they're going to go to if they click. <a href="http://sos.shukuya.com">TEXT HERE
You know where it says TEXT HERE? I'll be replacing it with: Stormy Designs.
<a href="http://sos.shukuya.com">Stormy Designs The bold portion of the code is the text part. Now comes the closing of the HTML code. If we don't close it, everything following in the entire page will be linked to that one site (in this case: http://sos.shukuya.com). But which tag do we use? I went over this before: if you want to close an HTML code you put a "/" code. Example: </>
Since we started the code with "<a href" we need to end with the "a" part. So the closing tag would be: </a> DO NOT FORGET THE SLASH. This is what the final link should look like: <a href="http://sos.shukuya.com">Stormy Designs</a> in your coding. On the actual page, it will look like this: Stormy Designs. Isn't that cool? ^-^;;
Images
You want an image to show on your site. Simple. Like the Link code, the Image code has two parts. The start, and the closing. This time though, there is no TEXTHERE involved since you're not linking to anything. The code:
<img src="IMG URL HERE">
The underlined part just accentuates the tags < > to remind you of it. The bold part: IMG URL HERE is the main part. Now remember how the "a href" part calls the link? Well, "img src" calls the image. The "img" = "image" and "src" = "search". This means the image you want to use has to be somewhere on the internet in order for you to use it. This code won't work if the image is on your hardrive. Anyhow, remember to upload the image on your own host, don't direct link and use up someone else's bandwidth like a moron. The same rule applies to the image code: "http://" is needed unless you are going to link to an image that's on the same files as your page.
You have your image url. Same rules apply as from the link code. You put the url between the quotes "http://" with "http://" unless you are linking to an image in your main index file. So the code would be: <img src="http://www.geocities.com/img.jpg"> (*NOTE*: I'm not using a real image code). Unlike the Link code, the Image code doesn't need a "closing" tag becaus all you're doing is calling the image and it's not going anywhere. Practice with it a little bit.
Image Link:
Now that we've learned how to make a link and how to make an image show, it's time to learn how to make an IMAGE link. It's different, yet the same. This works for stuff like Enter signs or link back buttons. We take the following code:
<a href="SITEURLHERE"><img src="IMG URL HERE" border="0"></a>
New codes? Yep. The underlined parts of the code accentuate the tags < > just to refresh your memory from the previous tutorial. The bold parts of the code accentuate the URL parts, which are VERY important if you want to work correctly. The italic part indicates a border, and we will get into that later.
Now remember how the "a href" part calls the link? Well, "img src" calls the image. The "img" = "image" and "src" = "search". This means the image you want to use has to be somewhere on the internet in order for you to use it. This code won't work if the image is on your hardrive. Anyhow, remember to upload the image on your own host, don't direct link and use up someone else's bandwidth like a moron. The same rule applies to the image code: "http://" is needed unless you are going to link to an image that's on the same files as your page.
You have your image url. Same rules apply as from the link code. You put the url between the quotes "http://" with "http://" unless you are linking to an image in your main index file. So the code would be: <img src="http://www.geocities.com/img.jpg"> (*NOTE*: I'm not using a real image code). Unlike the Link code, the Image code doesn't need a "closing" tag because all you're doing is calling the image and it's not going anywhere.
Remember what I said about the start tag being in full effect unless there's a closing tag? Well, this still applies. Since the Image code doesn't have a closing tag, that means it's included with the link tag. Which means you close the code by applying the closing link tag: </a>
What about the italic part border="0" or whatever? Yes, yes, I haven't forgotten. Now if you've tried the image link code with border="0" you will end up with a big blue border around your image. And once it's clicked, it turns purple. Sound familiar? That's because the default colors for regular links on the internet that don't have a special CSS coding to change it is blue. Once clicked, the visited color is purple. Same applies here since it's an IMAGE LINK.
That's why it's also important not to forget the quotes. They're important if you want to add the border code as well as other codes you can add. The border code only applies to images though.
Open in a new Window:
Okay, if you've read the Link and Image Link tutorials, then you'll know that the code is the same:
<a href="http://URL HERE">TEXT HERE</a>
It's basically the same so this would be my code: <a href="http://sos.shukuya.com">SOS Designs</a> I'm tired so I'm not going to go into what each part means. For that, read the Make Link tutorial. I'm doing this whole page at once, so it does get tiring. Anyhow I'm just going to tweak it a little bit. See if you can catch it.
<a href="http://sos.shukuya.com" target="_blank">Stormy Designs</a>
Which part? You've probably guessed that it's the "target" tag. Well, you guessed right. TARGET basically just gives the link another order. You can replace "_blank" with several other codes:
new: This opens the link in a new window, except if you have multiple links that open in a new window, the first "new" window will refresh to the next link. So this might be a little inconvenient.
_new: I haven't used this one, but the "_" part makes it so that EVERY link opens in a new window.
_blank: I use this one. Same as _new
_self: This one is mostly used for framed pages. It simply makes sure that the link opens in the exact same page that you're viewing.
NAME: NAME can be replaced with any name that you wish but this is ONLY for frame/iframed pages.
As you've probably guessed, the new target tags go between quotes " ", just in case you might want to add more.
Image Link to open in a New Window:
Ah, I'm wiped out so I'm not going to give you anything detailed. All you have to do is read the Image Link tutorial and the tutorial above to know what to do. The target tag goes in the link part of the code NOT the image part.
|
