Three Html/ Css/ Javascript Tutorials

Here are some tutorials that always get great results when I post them.

Lesson 1
HTML means Hyper Text Markup Language. HTML is a very common language used for many websites, is the base for more complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two arrows-like brackets created by hitting Shift and the comma key, or Shift and the period key. They look like this...

<

>

Tags start a change in the way a webpage looks with your basic starting tag, something like the bold tag which is like this

<b>

the text we want to be in bold would go after the <b>, but it will spread to the end of the page if we don't end the tag, to end a tag you begin the same tag you began with, but instead start it with a </, so the tag to end the bold effect would be

</b>

Lesson 2
In this lesson we will learn about some basic tags to change the way a body of text looks. We will start with a few of the most common tags.
We will begin with bold look at this sample and examine how the effectg is created (the word Text Here Will be what you want in bold)

<b>Text Here</b>

Simple right?
Ok, next we will learn how to make a break, which is the same as doing this...
A break is the equivilant to hitting enter, it is created like this

<br>

Simple right?
Ok, now you may wonder "how can I make an indent (or have a tab key effect) at the next line?" well, this is just as simple as the last tag, here is a indenting tag

<p>

Ok, now onto Italics italics are done in the same way as bolding text, we just change the b in <b> and </b> to an i like this

<i>Text Here</i>

Really simple huh?
Now, you are saying to yourself, "what do I do when the time comes where I need to underline my text?" well, we have the same job as we did with the italics, we just have to change those i's to u's like so

<u>Text Here</u>

Another thing we should consider doing is changing the size of our text, so we can make things stand out even more on our page. Here is how we do this, we need to define a size within our staring tag this time, but don't worry, it's very easy! look at this

<font size="1">Text Here</font>

Now it would be very bland and hard to read webpages if all we could use is size 1, so the creators of HTML gave us 7 sizes we could use, so where you se the "1" in our code we can instead use "2", "3", "4", "5", "6", or "7".

Lesson 3
Ok, now we are going to learn to add some cool things to our page.
Ok, we will start with the bullet, the bullet is a bit more compliated than what we have done so far, take a look here (<ul> begins the bullet series, </ul> ends it, and <li> creates an actual bullet)

<ul>
<li>Our First Bullet
<li>Our Second Bullet
<li>Our Third Bullet
</ul>

Notice how I hit enter after each bullet and after my starting tag, this is nessary or our bullets might not work in all browsers, some will work though...
"Now, how can we create a numbered list?" you are thinking it works the same way as a bullet, with different letters in the starting and ending tags, take a look

<ol>
<li>First number item
<li>Second number item
<li>Third number item
</ol>[html]
Do you know what start our list, and what tag ends it? if you guessed the <ol> tag began it, and the </ol> ended it you are right.
But don't worry, if you want to use more than 3 items, or less in your lists feel free to, just add another <li> tag after the last one you used, or get rid of some <li> tags, just make sure they stay after your starting tag, and before your ending tag, and make sure you hit enter aft each one... 
Now we will add a divide, or horizontal rule. The code is simple like creating an indent, or creating a break, here is the code [html]<hr>[/html]
Now we can also change the width, so it doesn't cover the whole page, we can do two things to create this, the first is by defining the size in pixels we want, the code is (Pixel Size should be replaced with the actual number) [html]<hr width=Pixel Size>[/html] Another way we can do this is by entering the percentage of the page thw divide should cover, like so (replace percentage with the percentage, make sure to add the percent sign directly after the number...) [html]<hr width=percentage%>[/html]
We can also make the divide thicker like so... (pixels should be replaced with the pixel size in numbers) [html]<hr size=pixels>[html]
If we put our divide on a website it will be shaded in, if we want to remove this we must enter [html]<hr noshade>[/html]
Now, "What if we want to combine these effects?" you ask? well, this is simple, we add all of the variable into our taghere is an example of a tag with all three effects (remove any not wanted) [hmtl]<hr noshade width=Pixels or percentage size=pixels>[/html] The order of the variables doesn't matter by the way.

Lesson 4
Now we need to make our page more lively and less bland, so we will learn to add color now... Here is the code for changing color using hex codes (you would replace the hex with the actual hex code), [html]<font color="hex">Text Here</font>[/html] Make sure to put the hex code in quotes.
Here are a few basic hex codes:
Red = FF0000
Purple = CC00CC
Blue= 0000FF
Green= 00FF66
Yellow= FFFF00
Black= 000000
White= FFFFFF
Now, we can also use the actual names of basic colors, like so (replace NC with the name of the color) [html]<font color="NC">Text Here</font>[/html] Make sure you put the name of the BASIC color in quotes.
Ok, now we want to give our site a nice backround color right? ok, well here's the hex code version (remember to swap hex for the actual hex code) [html]<body bgcolor="hex">[/html] Remember to put the hex code in quotes!
Now, here is the version for basic colors using the name (replace NC with the actual name...), [html]<body bgcolor="NC">[/html] Rember to put your quotes... 

Lesson 5
One of the last lessons we will learn is on insterting pistures and backround images.
This is quite simple, but a good skill to have, ok here is the code to insert a picture (replace the words url with the actual url of the image) [html]<img src="url">[/html] Remember to put the url in quotes! 
Ok, we can also add a border which is like a little picture frame, here is the code (replace url with the image url, and number with the border size 0-2) [html]<img src="url" border="number">[/html] remember to put qoute around both the image's url, and the border size, speaking of border sizes, 0 will create no border (the same as not using the tag at all...) 1 will make a thin border, and 2 will create a thick border.
To display a backround image (it will be tiled...) you can use this code (replace url with the image location) [html]<body background="url">[/html] rember to put the quotes around the image url.

Lesson 6 (last lesson) Refining but Not Confining

Ok, as our last lesson we will learn to place text somewhere else on the page, and how to link to another page...
Ok, to align text or an image to the left we must enter this (put the code for your image or text where it says image/text) [html]<div align=left>image/text</div>[/html]
To make the text/image centered on the page we must switch the part that says
align=left to align=center and to align it to the right we must use align=right where the align=left was. Now we will create a text link, here is the code (put the url of the page you want to link to where it says url, and the ocde for the text you want displayed where it says Text Here) [html]<a href="url">Text Here</a>[/html] remember to put quotes around the url.
Now, we the last thing we will learn is creating a linking image, this is quite simple, all you need to do is replace the code for your text with the code for your image.

Wrap-Up

Ok, well you've learned a lot to day, I hoped you understood everything, if you have a question just ask in this topic, or PM me. I will post another little course when I finish HTML Novice, it will cover tables, some basic CSS and all that junk.

The best way to get a nice looking page is by combining effects, use the alignments to get things precisely where you went them! 

~GM

WebMaster Level 1

Lesson 1 a Breif Refresher Course

Remeber the tutorial I wrote up a few days ago? Well this is the sequel, it includes some heavy HTML, some CSS. First of all we should make sure your still up to date, so take this simple little quiz, it you get 2 or more wrong please go back to the first tutorial and do a little reveiwing.
True or False?
1.) The basic structure of HTML is built on semi colons?
2.) When coding in HTML it is nesscary to add an ending tag to end the effect of a beggining tag?
3.) The tag required to make a bullet or numbered item is always [html]<li>[/html]
Multiple Choice
4.) The code for code to make text bold is...
A) [html]<u>Text Here</u>[/html]
B.) [html]<b>Text Here</b>[/html]
C) [html]<i>Text Here<i>[/html]
D) [html]<BoldIt>Text Here</BoldIt>[html]
6.) If you wanted to end the effect on a selection of text you would add what tag...
A) [html]<end>[/html]
B.) [html]</text>[/html]
C) [html]</font>[html]
D) [html]</text/>[html]
7.) Which of the folowing will mess up up the HTML document shown below?
[html]<font color="FF0000"><u>Hello welcome to this site!</u></font><br><br><hr><div align=left><a href=https://sistersite.com/ Here for our sister site.</a></div><align=center><img src="mysite.org/go_to_the_zoo.gif;[/html]
I. <font color="FF0000">
II. <a href=https://sistersite.com/ Here for our sister site.</a>
III. <align=center><img src="mysite.org/go_to_the_zoo.gif">
IV. <br><br>
A) I / IV
B.) II / III
C I / II
D) III / IV
8.) What is the starting tag for a series of bullets?
A) <li>
B.) <ol>
C) <hr>
D) <ul>
9.) What does HTML stand for?
A) Hexagonal Text Making Langauge
B.) Hyper Text Markup Langauge
C) Horticultural Turbo Masking Langause
D) None of The above.
10.) The best way to get a good look for you page is by...
A) Mixing diferent effects in a pleasent and complimenting way
B.) Filling the page with as many link as possible
C) Using lot's of bullets and numbered lists
D) Never using the <b> tag or divides
-
-
-
-
-
Answers

1.) False
2.) True
3.) True
4.) B.)
5.) A)
6.) C)
7.) B.)
8.) D)
9.) B.)
10.) A)

If you got 2 or more wrong I would recomend going back to my topic entitled HTML in the Tutorials Section.

Lesson 2 Contact

I thought we'd start off easy just to make sure your in your HTML mode before things get heavy, so we'll start E-Mail Links. take a look at the code bellow (you@emailprovider.domain should be replaced with your email address) [html]<a href="mailto:you@emailprovider.domain">Displayed Text Here</a>[/html] Simple as any other link right? Just make sure you put in the mailto: and put the whole little jumble in your tag after href= in quotes.
So that's lesson 2, short huh?

Lesson 3 Tables

Tables are one of THE best ways to precisely lay out your website, a table is essentially a grid, with an X, and a Y axis. There are rows, which go across horizontaly, and collunms which go veritcaly. When rows rows and collums intersect the form a cell, cells will each hold a selection of text, or any other code you put in them. When you start a table, it should be started with [html]<table>[/html] and ended with [html]</table[/html] These are like the tags we used to declare and end our bullets and numbered lists, and you will find there is a lot in common and a lot different about them. When we want to create a row we must put [html]<tr>[/html] We must follow that (after hitting enter...) with data cell tag, which will have more HTML after it typically, here is an example of a table
[html]<table>
<tr>
<td> the <td> tag creates a data cell
<td> This is another data cell, the tag after this, the </tr> will end the row
</tr>
</table>[/html]
The last </table> ends the table, make sure to hit enter after each tag, it's good HTML practice... 
Ok, now we will learn how to make our table less bland than the default one our browser provides... First of all we can change the border size, here is the code (note: the only nessescary changes are to the <table> tag, so I will not bother creating a whole tabel) [html]<table border=1>[/html] Now, we might want to give that little border a nice color to it, so here's the code, refer to the first tutorial for some Hex codes, or you can use the names of some COMMON/ BASIC colors. [html]<table border=1 bordercolor=CCCCFF>[/html]
Now we can change the backround color of our table to compliment the border, here is the code to change that... [html]<table border=1 bgcolor=CCCCFF>[/html]
Now if we want to change but one row of our table we can use this little fella instead [html]<tr bgcolor=CCCCFF>[/html]
Now if we only want to change one data cell we can use this code [html]<td bgcolor=CCCCFF>[/html]
Ok, last but not least we should learn to change our tables size... Here is the code (pixel version) (leave out width or height according to which (if any) you don't want changed) [html]<table width=Pixels height=Pixels>[/html]
Now, we will make our table a difined percent of the screen (like when we made our divides) [html]<table width=10% height=10%>[/html]

Adding Music
Music can add a nice effect to pages, use it wisely, but don't abuse it...
HTML can do some pretty cool things, here is one such example, the code bellow will create a player much like "Real Audio Player" (replace TheURLOfYourSound with the location of your sound) [html]<embed src="TheURLOfYourSound" width=300 height=60>
<noembed>
<bgsound src="TheURLOfYourSound">
</noembed>[/html]
The embed tag will run on Netscape and other browsers, while bgsound will run on Internet Explorer and such, alway include both to insure it works.
You can add autostart=true loop=true to make the sound continuosly play, here is an example of this [html]<embed src="TheURLOfYourSound" width=300 height=60 autostart=true loop=true>
<noembed>
<bgsound src="TheURLOfYourSound" loop=infinite>
</noembed>[/html]
Now we will learn to make backround music where no player will be seen, this is very simpl, add hidden=true to your tag, like so [html]<embed src="TheURLOfYourSound" hidden=true autostart=true>
<noembed>
<bgsound src="TheURLOfYourSound" loop=infinite>
</noembed>[/html]

Lesson 4 A little CSS

CSS is both like and different from HTML, it allows you to change things you couldn't before, such as easily setting the font for the whole page, or changing things like the scrollbar and such.
We already learned how to change the backround color with HTML, but we should learn it in CSS too, take a look here... (here is the common/ basic color name one)

<style> body {background: fixed; background-color: red;}</style>
or you can use the Hex code version for more colors, which is here

<style> body {background: fixed; background-color: #9c2000;}</style>

Notice the

<style>
tags, these are used to define a stylesheet which is the purpose of CSS, a stylesheet is something that we can easily add to all pages in our website to make them look alike, they can also be used in PHPBB and IPB boards.
Now, we will add a picture as our backround, also know as a backround image, here is the code (put the location of the image where it says ImageURL)

<style> body { background: url("ImageURL");background-attachment: fixed}</style>
Ok, here is the code to change the font for the whole page

<style> body {font-family:verdana; color:#EFA6FF; font-size:small;} </style>
- Font-family defines what font is displayed, ex: arial, times, courier, etc..
- color defines the color of all text on your page
- font-size sets the size of text on the page you are limitted to small, medium, or large
If you want to change the backround too, you simply add the code to change your backround to the CSS in between the <style> and </style> tags, like so

<style> body {background: fixed; background-color: #9c2000; font-family:arial; color:#EFA6FF; font-size:small;} </style>
Lesson 5 Some Cool Fun You (Last Lesson)

Well, we covered some hard stuff here, and now it gets harder =O  Don't worry, this is kinda hard, but I will do my best to explain it, and you will be able to see that the reward is very cool.
We will be using one of my favorite HTML tags, the <marquee> this is the tag that makes those cool scrolling things. Note: I'm not going to right a big thing about this, read what I wrote in the variables and such, figure out what to put, if you have a question ask me...
[html]<marquee height="pixel" width="pixels" direction="direction the text should move, up or down" scrolldelay="have the scolling wait a bit before it starts" scrollamount="scrolling speed" style=put some CSS here><font face="font type" size="size">PUT YOUR HTML HERE (put almost anything in here...)</marquee>

P.S. You can create nice news buluiteins by putting these in tables, and labeling them with a top row with a backround...

Wrap-Up

You've probably heard this before "HTML is so useless, use php" to some extent they are right, but look what we just did with useless old HTML, remember wisely mix effects, and practice your HTML skills, next time we meet we will deal with IFrames, advanced CSS, a little PHP, and more.


phpBB login-bos on main site
Ok here is the code.

////Create login area, replace the phpBB2 in /phpBB2/login.php with your forum's directory//<form action="/phpBB2/login.php" method="post" target="_top"><table width="25%" cellspacing="2" cellpadding="2" border="0" align="center">  <tr>	<td align="left" class="nav"><a href="/phpBB2/index.php" class="nav">Prank Place Forum Index</a></td>  </tr></table><table width="25%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">  <tr>	<th height="25" class="thHead" nowrap="nowrap">Please enter your username and password to log in.</th>  </tr>  <tr>	<td class="row1"><table border="0" cellpadding="3" cellspacing="1" width="100%">    <tr> 	 <td colspan="2" align="center"> </td>    </tr>    <tr> 	 <td width="11%" align="right"><span class="gen">Username:</span></td> 	 <td>     <input type="text" class="post" name="username" size="25" maxlength="40" value="" /> 	 </td>    </tr>    <tr> 	 <td align="right"><span class="gen">Password:</span></td> 	 <td>     <input type="password" class="post" name="password" size="25" maxlength="32" /> 	 </td>    </tr>    <tr align="center"> 	 <td colspan="2"><span class="gen">Log me on automatically each visit: <input type="checkbox" name="autologin" /></span></td>    </tr>    <tr align="center"> 	 <td colspan="2"><input type="hidden" name="redirect" value="" /><input type="submit" name="login" class="mainoption" value="Log in" /></td>    </tr>    <tr align="center"> 	 <td colspan="2"><span class="gensmall"><a href="profile.php?mode=sendpassword" class="gensmall">I forgot my password</a></span></td>    </tr>  </table></td>  </tr></table></form>

You can test this out on my site, here> http://forums.xisto.com/no_longer_exists/
If you like my little guide shout it on my forums shoutbox at the bottom of the page.

wow great thanks

i like to set a few other code's,
(html)
a * is a <, i dont know how i get it els here

a tekst that's slide
*marquee>text*/marquee>
!!!!!!!attention, this is a code that only internet explorer can read!!!!!!!!!!

a link with image;
*a href="http://forums.xisto.com/no_longer_exists/ link.com">*img src="url of the image"></a>
the same for an mail link;
*a href="mailto:your mail">*img src="img url>*/a>
frames;
no body tags;
*html>*head>*tilte>title of your site*/title>*frameset rows=10%,*>*frame src="url of the frame>*frame src="url"></frameset>


if you wan't a border you set into the frameset tags border="no", if you like a bigger border you set in the framset frameborder="2" or another number
bordercolor:
bordercolor="red" into frameset tags

you can also try something with javascripts, and there a lot of scripts on the internet (for people who understand dutch; a good site is leejoo.nl. it has also animaties and java aplets.

javascript; this is a script like html, it can opened in all browsers
java aplet: its a script, your host must know this script and your browser must hava java (free download on https://www.java.com/en/)

jerre: use the BBCode Tags that are above the textarea when replying in a topic. to show code put them between the

and

tags, for example;

<?php   echo "THIS IS CODE!";?>

lol that got a bit screwed up. sorry. but i am sure you will get the idea of using the tags thoughout other posts u make here.

First of all, HTML should never be used for formatting!

The "bgcolor", "bordercolor", <b>, <i>, <u>, <font> tags and attributes are REPLACED by CSS 2 and deprecated.

 

Also, we should now learn XHTML, not HTML anymore. XHTML is the next generation of the web, it will replace HTML.

 

<marquee> is NOT a valid tag. I don't know where you got that from, but it doesn't work! Sure, it LOOKS like it works in Internet Explorer (it might too in Firefox and Mozilla), but use it and run your page through the W3C validator! It says it is an incompatible tag or whatever.

 

Please learn from W3Schools or Web Development Lessons if you want to learn this PROPERLY!

First of all, HTML should never be used for formatting!The "bgcolor", "bordercolor", <b>, <i>, <u>, <font> tags and attributes are REPLACED by CSS 2 and deprecated.

I agree with the issue of using bgcolor, bordercolor, b, i, u and such tags in the HTML. We need to ensure that when we teach people in these times of seperation of content and design, we should seed the understanding of hook ups so that style and content can be seperated. This would help in not making their learning curve difficult by asking them to later switch to the new school. (I know this, because I happened to learn HTML quite early before CSS came to picture, and it was quite hard for me to move on to seperate content and style).

As for tags, you could teach them <strong> to make the fonts bold or something like that and <em> to show emphasis.

But I think explaining the table tags are fine, as long as it is explained that they may be used to represent only that - tabular data.

First of all, HTML should never be used for formatting!The "bgcolor", "bordercolor", <b>, <i>, <u>, <font> tags and attributes are REPLACED by CSS 2 and deprecated.

Also, we should now learn XHTML, not HTML anymore. XHTML is the next generation of the web, it will replace HTML.

<marquee> is NOT a valid tag. I don't know where you got that from, but it doesn't work! Sure, it LOOKS like it works in Internet Explorer (it might too in Firefox and Mozilla), but use it and run your page through the W3C validator! It says it is an incompatible tag or whatever.

Please learn from W3Schools or Web Development Lessons if you want to learn this PROPERLY!

Wow, this is kind of new to me. I mean I don't know xhtml yet. Also, I didn't know it was bad to use <b> for bold for example. Can you give me a link or example for what I should do to show some text in bold? Thanks!