|
Post by lechin on Dec 21, 2009 9:07:35 GMT 12
red=text blue=links black= the code You wanna learn HTML? Well you've come to the correct thread!! This thread helps guide your way to html so that you can do it yourself.
Alright...first things first. When trying to get your html to work use Notepad, Microsoft Expression Web, Dreamweaver, or other programs that will let you mess around with HTML.
When saving your work save it as .html
Also..please note to keep all of your html work in the same folder. Same goes for the pictures you'll be using in backgrounds and such. Trust me..because if you don't your web pages won't function properly. I've been through that a few times till I made a file folder.
Example: Index.html (That's how you'll be saving your pages. With an html at the end.) ------------------------------------------------------------ ~To start off...~ Type: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Or your program will automaticly do it for you but possibly in a different way.
Now...after that...put..
<html> <head> <Title> Your Text Goes Here</Title> </head>
<body> Wow I just made a page! :3 </body> </html>
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <Title> My Page</Title> </head> <body> Wow I just made a page! :3 </body> </html>
~Example End~ ---------------------------------------------------------------------- Now save that document..name it anything you want but put .html after what you name it then save it. Now...listen carefully and try not to get lost...cause sometimes I suck at giving directions as you can see lol. So if your confused already just PM me and I'll give you more step by step directions. If not then keep following. To see your html work go to your browser, click file..and then click open...then click the file you just saved and open it then boom you see what you have created! ^_^
~Little bits of Info~ Html tags is what makes the html INSIDE work. Never put the codes on the outside of the html tags.
The head tags are just for things that won't be seen on the page..such as the Title. The Title tag gives the Title of the page in the left hand corner of your browser.
The body tags is for what you want to be seen on the page. Such as words, images, videos, color of the background, color of the text, ect.
|
|
|
Post by lechin on Dec 21, 2009 9:08:21 GMT 12
Thanks lol. It's time for Lesson 2! Time to learn about unordered and ordered lists!! Start with the simple layout... Simple starting layout<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html> <head> <title> </title>
</head> <body>
</body> </html> Got it? Good! <ul> </ul> tags mean unordered lists. Bullet type. <ol> </ol> tags mean ordered lists. Number type. <li> </li> tags mean list. This goes inside the <ul> and <ol> tags. Example<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title> Your Site's Title</title> </head> <body> <ol> <li> Candy..yum!</li> <li> I love watching movies don't you?!</li> <li> Do you understand the function of this now?</li> <li> That's good! </li> </ol> <ul> <li> Remember to always close your tags with a slash! </li> <li> Are you getting this too?</li> <li> That's good! </li> <li> Remember spelling counts in html! </li> </ul> </body> </html> Example endThe code for the html. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html> <head> <title> Your Site's Title</title> </head> <body> <ol> <li> Candy..yum!</li> <li> I love watching movies don't you?!</li> <li> Do you understand the function of this now?</li> <li> That's good! </li> </ol>
<ul> <li> Remember to always close your tags with a slash! </li> <li> Are you getting this too?</li> <li>That's good! :D </li> <li> Remember spelling counts in html! </li> </ul> </body> </html>
Now you know another thing about html! Enjoy. ^_^ If you have any questions don't hesitate to PM me.
|
|
|
Post by lechin on Dec 21, 2009 9:09:51 GMT 12
Time for Lesson 3. Paragraphs and Numbering Tags. Oh joy! Alrighty grab your simple layout and lets get started. First things first is pragraphs. It's pretty easy. Just use the <p> </p> tags. Let me give you an example. Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title> Your Site's Title</title> </head> <body> <p> Your paragraph here. Makes your text look like a paragraph basicly. You get it now? I sure hope so. Hehe. </p> </body> </html> ~Example End~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title> Your Site's Title</title> </head> <body> <p> Your paragraph here. Makes your text look like a paragraph basicly. You get it now? I sure hope so. Hehe.</p> </body> </html>
Now it's time for Types of numbering tags. =^-^= Note: Specify types of numbering in the <ol> (ordered list) tag. Examples: <ol type="a"> or <ol start="4"> (Will start at 4) or <ol type "a" start="3"> (Will start at C) ~Example End~ There are many ways to do the numbering type tags so experiment with them a bit. The "a" makes the list look like one of your tests you take in school. It's numbered by letters. The <ol start ="4"> makes you start at the number four. Then as you go down the list it goes down. The <ol type "a" start="3"> Makes you start at the letter C. When you put type "a" down that means you want it to go by alphabet letters and not numbers. Putting, "start="3" " means you want the letter to start at C. see where I'm coming from? If not feel free to ask questions. I'll give you the ultimate examples now for all three of the types I've given to you. -------------------------------------------------------------------------- <ol type="a"> Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title> Your Page Title</title> </head> <body> <ol type="a"> <li> This makes it look like one of your tests from school.</li> <li> Makes it look like it's numbered by letters.</li> <li> Do you get it now? ^-^</li> </ol> </body> </html>
~Example End~ ---------------------------------------- <ol start="4"> Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Your page's Title</title> </head> <body> <ol start="4"> <li> This is for numbers not letters. </li> <li> Makes your numbers start at 4 and...</li> <li> ..Continues down the list of numbers</li> </ol> </html>
~Example End~ ----------------------------------------------------- <ol type="a" start="3"> Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <head> <title> Title of your Page</title> </head> <body> <ol type="a" start="3"> <li> The 'type' makes the code turn into a letter...</li> <li> And not a number...because...</li> <li> The start only indicates where the letter starts...</li> <li> Thus...the letter starts at C. Because..</li> <li>C is the third number in the alphabet!</li> </ol> </body> </html>
~Example End~ ------------------------------- Well, that was lesson 3! I hope you enjoyed the long lengthy...lesson...heh. =^-^= Enjoy the new information you have learned so you can incorporate it into your coding. Muwhahaha!
|
|
Admin
Forum Head
The Head Admin[M:0]
Just trying to help people out with coding stuff
Posts: 1,927
|
Post by Admin on Dec 21, 2009 9:11:50 GMT 12
Good lessons like i said on c4c ;D
|
|
|
Post by lechin on Dec 21, 2009 9:15:30 GMT 12
Lol thanks. I'm making the next one soon. :3
|
|
Admin
Forum Head
The Head Admin[M:0]
Just trying to help people out with coding stuff
Posts: 1,927
|
Post by Admin on Dec 21, 2009 9:23:23 GMT 12
Cool ;D
|
|
|
Post by lechin on Dec 21, 2009 10:17:22 GMT 12
Lessone 4!! The one ya'll have been waiting for. ^.^ Bullet Type Tags! Grab your simple layout and lets roll.
There are a few bullet type tags. Example:
<ul type="disc"> or <ul type="square"> or <ul type="Circle"> or maybe something a little different... <ul style="list-style-type: square">
~Example End~ Now to put each of these into an example.
<ul type="disc">Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Your Site's Title</title> </head> <body> <ul type="disc"> <li> Your text goes here. </li> <li>See what it makes the bullet look like?</li> </ul> </body> </html>
~Example end~
<ul type="square">Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Your Site's Title</title> </head> <body> <ul type"Square"> <li> Text goes here.</li> <li> Remember you can add to the list...</li> <li> And make it as long as you want..</li> </ul> </body> </html>
~Example End~
<ul type="circle>Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Your Site's Title</title> </head> <body> <ul type="circle"> <li> Text here..</li> <li> I'm sure you get this by now. </li> </ul> </body> </html>
~Example End~
<ul style="list-style-type:square">Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Your Site's Title</title> </head> <body> <ul style="list-style-type"square"> <li> Text here.</li> </ul> </body> </html>
~Example End~
Alrighty thanks for tuning in, lol. Next is lesson five.
|
|
Admin
Forum Head
The Head Admin[M:0]
Just trying to help people out with coding stuff
Posts: 1,927
|
Post by Admin on Dec 21, 2009 10:21:38 GMT 12
Great lesson again! When the next lesson?
|
|
|
Post by lechin on Dec 21, 2009 10:23:31 GMT 12
Thank you. Hmm...Either today or tomorrow lol.
|
|
Admin
Forum Head
The Head Admin[M:0]
Just trying to help people out with coding stuff
Posts: 1,927
|
Post by Admin on Dec 21, 2009 10:34:03 GMT 12
OK cool ;D
|
|
|
Post by hbk on Dec 22, 2009 0:23:11 GMT 12
Nice tutorial, Lechin.
|
|
Admin
Forum Head
The Head Admin[M:0]
Just trying to help people out with coding stuff
Posts: 1,927
|
Post by Admin on Dec 22, 2009 8:51:22 GMT 12
Yes it is ;D
|
|
|
Post by lechin on Dec 23, 2009 19:59:57 GMT 12
Sorry everyone that I haven't posted the next tutorial yet. I've been slightly busy so I'll definately post it sometime today..like when the light is shining outside lol cause it's only 2:00 a.m. now.
|
|
|
Post by lechin on Dec 24, 2009 13:01:16 GMT 12
Lesson 5. You guys know the drill lol. Let's get started with uh...Substituting Bullet Styles. These are Unordered List Style examples but you can use these for the ordered lists too. Example: <ul style="list-style-image: url(/bullet.gif)"> <li> Text goes here. </li> <li> the url is in parenthesis. </li> </ul> ~Example End~ Here is another example. Example: <ul style="list-style-position: Inside"> <li> You can also put 'Outside' for the position. </li> </ul> ~Example End~ That is the end of the lesson. I hope you enjoyed that. Note: Both of those go into the body tags. Not the head.
|
|