~Welcome to the Sonic Blast Community Forum~
Greetings stranger, it is an honor to have you as a visitor. Since we opened in 2006 our goal has been to offer the most authentic Sonic-themed community on the web for Sonic enthusiasts new and old. We do our best to provide the most unique features, best Sonic-themed designs, and have the latest news; always improving to cover all of your Sonic needs. Our community is full of friendly people and we hope you enjoy your brief stay but would be thrilled if you decided to join in on the fun. Being a part of our community is easy, quick, and absolutely free.

Click here to join our community and enter the land of Mobius as a =SB= citizen!
Citizens may log in to their account to participate in our land's conversations and access all of our features:

Username:   Password:
Add Reply
Web Designing By DjMilez/ProwerBot
Topic Started: May 2 2008, 09:30 PM (641 Views)
ProwerBot May 2 2008, 09:30 PM Post #1
No Avatar
I don't even know really
 Posted Image

So... you've seen them. You've visited lots of websites. And some look pretty good. Some of you I bet, want to make your own, right? Well, in this tutorial, I'll guide you through it. Soon, you can code a website with the tutorial given here. I know HTML like the back of my hand. That's because I've had lots of practice.

Well, let's get on, shall we?
(This tutorial is written for windows users, but mac/other can use it if they can figure it out)

-----------------------
Chapter 1: The basics
First up, open notepad. And type in something like this.
Code:
 
<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello! Welcome to my website. There isn't much here, so check back soon!
</body>
</html>

Let's define some stuff....
<html> defines that you are using HTML.
<head> defines the heading
<title></title> defines the text appearing in the title bar.
<body> defines what goes in the html document.
</body> tells us that it is closing the body tag.
</html> closes the html tag.

I need to say this too...
MOST tags need to end. If you have a <b> tag, you must put </b> where you want to stop bolding text. Sometimes you can do this.
Code:
 
<img src='lol' />

Which ends the tag in itself.


HTML is made up of elements, properties and values. A tag like this
Quote:
 
<ELEMENT PROPERTY="VALUE" />

In this, ELEMENT says what the tag is, PROPERTY defines what the element is doing, and VALUE defines what PROPERTY is doing.

Anyway, on to the next crap....


-------
Chapter 2: Colors, images, links, and aligning
Colors?? Yeah, you can use COLORS too! If you want to say what color the background is, in the body tag you'd put
Code:
 
bgcolor="#hex"

and for the font color
Code:
 
text="#hex"

and the links
Code:
 
link="#hex"


Anyway, where to choose colors for the hex number?
Go here
http://www.december.com/html/spec/color0.html

Now then, you want to place an image you say? Easy enough.
Code:
 
<img src='image url goes here' />

Put the url of the image... in the obvious place.
That will display the image.

To display a border, add this to the tag
Code:
 
border=1



And to links
Also, this is easy.
Code:
 
<a href='lol'>Click here!</a>

Replace 'lol' with the link, and click here! with the text.


Now, what if you want to center something, or put it to the right?
Use this for centering
Code:
 
<center>Centered stuff goes here</center>


and to align right
Code:
 
<div align='right'>Right Aligned stuff goes here.</div>



& That's all I say for this chapter.

-------
Chapter 3: Formatting text
TEXT refers to all the words, letters and numbers you want to show on the web page. Text is placed in the BODY area of the page code.

Quote:
 
<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello! Welcome to my website. There isn't much here, so check back soon!
</body>
</html>

But, you might wanna change it up a bit, once the text is there. These tags will tell the page for the text to look different
<b> - Bolds text
<i> - Italicizes Text
<u> - Underlines text

Remember that you MUST put </b>, </i>, or </u> (whichever you used) where you want the formatting to STOP.

Your code may then look like this.
Quote:
 
<html>
<head>
<title>Hello world!</title>
</head>
<body>
Hello! Welcome to my website. There isn't much here, so check back soon!
<i>This text is italicized.</i>
<b>This text is bolded.</b>
<u>This text is underlined.</u>
</body>
</html>


There are also header tags, which can make the text either smaller or larger.
There are 6 sizes to the header tag. 1 being the largest, 6 being the smallest. These are the different sizes that can be created
Code:
 
<h1>header 1</h1>

<h2>header 2</h2>

<h3>header 3</h3>

<h4>header 4</h4>

<h5>header 5</h5>

<h6>header 6</h6>




-----------------------
Chapter 4: Tables
Well, know you know how to do some crap I told you above, well, you want to make it moar pretty, right? Well, we could use a table for that

Some variables....
width='3485348px' selects how many pixels wide it is. You can also use percentages,
height='101px' same as above but with height.
border='431' will make a border
class='urmuma' tells the page what class it is defined by a stylesheet
align='left' tells it the text should be aligned left. You can use that or right
valign='top' tells it the text should be aligned at top. You can use that or bottom.
bgcolor='#smecksay' tells it what background color it should be

On to the table?
Code:
 
<table width='800px' border='1' bgcolor='#000000' align='left' valign='top'><tr><td>Lol.</td></tr></table>


You can use that to display data or a pages content.
</td><td> will start a new column.
</tr><tr> will start a new row.

That's all I say for tables.
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
ProwerBot May 2 2008, 09:31 PM Post #2
No Avatar
I don't even know really
 (Reserving post because this tutorial will be a long one)
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
ProwerBot May 2 2008, 09:31 PM Post #3
No Avatar
I don't even know really
 (Yeah, sorry for being Maelic-ish XD)
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
ProwerBot May 3 2008, 07:53 AM Post #4
No Avatar
I don't even know really
 I added chapter 3.
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
ProwerBot May 4 2008, 05:33 PM Post #5
No Avatar
I don't even know really
 Chapter 4 is up =D
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
Eprahim May 6 2008, 11:26 AM Post #6
No Avatar
Lava Reef Act 2
 Cool tutorial so far! :D
Offline Mini Profile
 
Kurtis May 13 2008, 04:19 PM Post #7
Member Avatar
The Awesome
 Yeah nice. I like it. =D
...C.L.O.N.E...T.D...Posted Image....S.P.R.I.T.E.S....
Offline Mini Profile
 
Kurtis May 14 2008, 04:36 PM Post #8
Member Avatar
The Awesome
 Sorry for the DP. But could you help me with the skin? I cant quite get it.. (Cant get it at all.)
...C.L.O.N.E...T.D...Posted Image....S.P.R.I.T.E.S....
Offline Mini Profile
 
ProwerBot May 15 2008, 05:48 AM Post #9
No Avatar
I don't even know really
 What code are you using?
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
Gale May 15 2008, 09:24 AM Post #10
Member Avatar
<3
 I learnt the basics of HTML when I was 6. :D

Nice guide, though. ^_^
Offline Mini Profile
 
Kurtis May 16 2008, 03:04 PM Post #11
Member Avatar
The Awesome
ProwerBot
May 15 2008, 05:48 AM
What code are you using?

Well its something like this...

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>

Im not sure if you have it up there or not. Im not very good at this. ><
...C.L.O.N.E...T.D...Posted Image....S.P.R.I.T.E.S....
Offline Mini Profile
 
ProwerBot May 16 2008, 05:08 PM Post #12
No Avatar
I don't even know really
 Well.... that's for... invision power boards....


Also, it'd be

Code:
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000">
<% BOARD HEADER %>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>
Nevermind me, I don't post here reguarly.
Offline Mini Profile
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Act IV: Artist's Showcase Yard · Next Topic »
Add Reply