Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[HTML] Tutorial: Part One: Interface

Newbie Spellweaver
Joined
Jul 2, 2010
Messages
17
Reaction score
4
First off, don't get mad at me for posting something of HTML instead of PHP. Sure it's easy, but I don't know too much PHP...yet, and you should know some HTML before PHP, anyway. I will be making a bunch of tutorials- in parts. This one will teach you about the interface, and what each 'tag' is for. Critique is welcome, just don't flame. As are compliments, obviously.

Anyway, I'll start. I will try and make things as clear as possible:




To begin, you should know what HTML stands for. HTML- Hyper Text Markup Language. You should also know what tags are, what they do.

Tags are a word(s) that tells when something starts, and when something ends. Text is to be placed between each bracket (which the tags are enclosed in). And, unless you live in Japan, you are to write and read everything from left to right.

To summarize so far: HTML is a Hyper Text Markup Language that uses tags (which are hidden in brackets) to start and end text (which is inserted between).

Important Note: It's not a normal bracket that is used to distinguish start and end, but angle brackets. An example: <h1>Insert Heading Here</h1> I will use bracket(s) instead of angle-bracket for this guide to make everything shorter, and sound more fluent. I don't plan on answering any questions relating to why something didn't work if you used normal brackets, as all you have to do is read this paragraph. One more thing to know: when you're ending a tag, you're to use a dash (</h1>) to signify that it is the END tag, and not the start tag. Don't ask me why.

Now we move onto the actual 'interface', or basic 'design' that you should use when using HTML. You could use Dreamweaver, which is made to edit such a language, or simply use notepad. Either way, you'll have to use:

<html>
<body>

<h1>Insert Heading for Tutorial Here</h1>

<p>Insert Paragraph for Tutorial Here</p>

</body>
</html>​


<html> and </html> - If you can't figure out why that is there, I don't think should be learning- especially with something as easy as HTML.

<body> and </body> - What will be seen on the page, the body, or display, that will be featured.

<h1> and </h1> - Obviously, what will be displayed as the heading.

<p> and </p> This one is rather obvious, too. It's the sub-text, or paragraph as it is classified as, that will be displayed on the page.




Summary:

-HTML stands for Hyper Text Markup Language

-Start and End is characterized by tags, which use angle brackets, or brackets for short.

-You can use Dreamweaver or Notepad, either or. Dreamweaver is to be used if you're a coward, and need help, and notepad is for the confident.

-Tags should be easy to remember, because they're short and simple. If you can remember [.spoiler] and [/spoiler] and all of the other codes, why can't you remember something smaller? (Also, the period is put so that the spoiler tags don't work and you can see my example.

-You're not very good at finding guides.


A short beginning, but as I said to start, I will add other tutorials continuing from where the other left off. Hopefully this was well-explained, as I am not good with making tutorials. Should you read this guide instead of any other? Nope. I am not a professional, just here if you fail at using google, cannot understand the basic concept, or want another guide to make sure you have everything.

Anyway, Toodloo. I'll answer questions if you have any.
 
Last edited:
Zzzz...
Loyal Member
Joined
Dec 26, 2008
Messages
781
Reaction score
225
notepad is for the confident.
Notepadd++ is for the pro :p

Good tutorial, maybe do something with CSS and stuff (I might later)
 
Newbie Spellweaver
Joined
Jul 2, 2010
Messages
17
Reaction score
4
Oh, thank you. I was worried that it was too short- I didn't know what to expand on, since I just wanted to introduce everyone to the basic of the basic.

And I could make a tutorial on that, it's not that hard. That will probably be included in a later tutorial, anyway. :p
 
Banned
Banned
Joined
Jun 6, 2009
Messages
71
Reaction score
1
This Is Great For "Noobs" Wanting to develope A Website but you may want to make it more "Advanced" Because FreeWebs.com could tell you this. Not To be Hating it's Alright But all you really did was
<html><body> <h1>Header</h1> </body></html>

What you've could have done was
What you Can also do is put a background now if you have a host you will upload the Image to there and type it in
E.X <img src="Imagetitle.png"></img> And to make a background put <background img="imagetitle.png">

Something Else you could have taught is :
<hr /> Makes A Line Brake which is a giant line the the page that divides text's Often used in news forms.

Although those are a few the list can go on and you've really got you put more detail into these things because "FunShine" on Another Forum did the same thing.
 
Last edited:
Newbie Spellweaver
Joined
Jul 2, 2010
Messages
17
Reaction score
4
Ah, thank you for the constructive criticism. :p

But, as I said on top, I was going to release a bunch more (tutorials) in parts. In this part, I was just introducing everyone to the basic 'interface', or 'template', that you should start with.

Then I'd get into extras, such as a line break (<br> and </br>)

Here's a quick example that I did:


<html>
<head><title>test</title></head>

<body bgcolor="yellow">
<table width="800", color="003366">
<tr><td>
<a href="http://google.com">Google</a>
<br><br>
<a href="http://wikipedia.org">Wikipedia</a>
<br><br>

</tr></td>
</table>

</body>

</html>​

Just save it as 'Test' in notepad, and then open the file.

Note: Using one break will only make the wikipedia link right below the google link, but a second one indents a whole 'nother line.



Also, to show off, here's an example of what you can do with HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BlueCow Story - Updates</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<style type="text/css">
.nav {
border-color:#000033;
border-width:thin;
border-style:dashed;
background-color:#49B5F4;
}

.header {
border-color:#50261B;
border-width:thin;
border-style:solid;
background-color:#9F0000;
font-style:italic;
font-weight:bold;
color:#DBDAEB;
}

.cont {
border-color:black;
background-color:#FFFFFF;
border-stlye:solid;
border-width:thin;
color:#01366B;
}

a:link {color:#01366B; text-decoration: none; }
a:visited {color:#01366BF; text-decoration: none; }
a:active {color:#01366Be; text-decoration: none; }
a:hover{color:black; text-decoration:underline; }
.style1 {font-size: 24px}
</style>
</head>

<body bgcolor="#A8E2FF" onload="MM_preloadImages('images/abouthov.png','images/downhov.png','images/fixeshov.png','images/masterhov.png','images/reghov.png','images/bahov.png','images/uphov.png')">


<div align="center"><img src="http://forum.ragezone.com/images/banner.png" /></div>
<table width-"850" align="center">
<tr><td class="cont"><a href="http://tinyurl.com/voteforbcstory" class="style1">Don't forget to</a><i><strong><a href="http://tinyurl.com/votebcstory" class="style1"> vote!</a></strong></i></td>
</tr>
</table>
<br />
<table width="850" align="center" border="1">
<tr>
<td width="150" rowspan="4" valign="top" class="nav">
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/uphov.png',1)">
<img src="http://forum.ragezone.com/images/updef.png" name="Image8" width="175" height="49" border="0" id="Image8" /></a> <a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','images/abouthov.png',1)">
<img src="http://forum.ragezone.com/images/aboutdef.png" name="About" width="176" height="47" border="0" id="About" /></a>
<a href="download.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/downhov.png',1)">
<img src="http://forum.ragezone.com/images/downdef.png" name="Image3" width="176" height="47" border="0" id="Image3" /></a>
<a href="fixes.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/fixeshov.png',1)">
<img src="http://forum.ragezone.com/images/fixesdef.png" name="Image4" width="176" height="47" border="0" id="Image4" /></a>
<a href="masters.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/masterhov.png',1)">
<img src="http://forum.ragezone.com/images/masterdef.png" name="Image5" width="176" height="47" border="0" id="Image5" /></a>
<a href="register.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/reghov.png',1)">
<img src="http://forum.ragezone.com/images/regdef.png" name="Image6" width="176" height="47" border="0" id="Image6" /></a>


<a href="badass.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/bahov.png',1)"><img src="http://forum.ragezone.com/images/badef.png" name="Image7" width="176" height="47" border="0" id="Image7" /></a> </td>
<td valign="top" class="header">Custom Mobs, Downtime - 2/11/09 | By Steve</td>
</tr>
<tr>
<td valign="top" class="cont"><strong>Custom Monsters, Items and Drops</strong><br />
<br />
The server will be experience some down time as adjustments are made to it. We are in the process of adding modified monsters for high level players, as well as some special equipment for those able to fell these beasts. The down time cannot be avoided, unfortunately, so please bear with us as we add these new monsters for high level players to have some fun with. The server's downtime should only be during maintainance, and I hope that you'll understand that it is required.<br />
<br /></td>
</tr>
<tr>
<td valign="top" class="header">
Public Release/Website Creation - 2/4/09 | By Steve</td>
</tr>
<tr>
<td valign="top" class="cont"><p><strong>Public Release</strong><br />
<br />
Wooh. Website exists, and as a direct result of this we're actually.."public." Now, because the release was slightly premature, there are some things users should be wary of. First of all, the Free Market will lose many of its NPCs because they are unneccesary and clutter the screen. Don't worry, though, the useful ones will remain; you'll have a boss warper, a map warper, the stylists, and Cody to advance you.<br />
<br />
The shops need to be configured as well, as several items shouldn't be sold. Upon completion of the shops,there will be a single, all-in-one NPC who sells everything players are allowed to get for 1 meso. Any items not included with this NPC should be classified as an event or special item. If you feel a missed item is neither special nor very eventful, ask one of the GMs or myself (the admin) to add it, and we'll use our own judgement.<br />
<br />
If there are any glitches, please, please report them. Some skills are disabled due to their game-breaking ability, such as Sniping, which does over a billion damage no matter what. These skills will never be released due to their power, so please don't ask for them to be added. We are also <em>not</em> accepting GM applications at this time. If you apply, please be aware that the GMs may retaliate in an unfriendly manner due to your inability to read.</p>
<p align="center"><em><strong>Please note that this website is still being modified. If there are missing scripts or pages, do not report them. The Admin knows of them and will fix them in time. The autoregister script should suffice until then.</strong></em></p></td>
</tr>
</table>
</body>
</html>


It wouldn't work for you, as you'd be missing some images, but I wanted to show off- and give you an example of what could be done. It's from a private server I was in, if you couldn't already tell. It took like thirty minutes to do, so if you actually invest time, I am sure you could make something even better. (Not saying that what was made was at all good.)
 
Last edited:
Newbie Spellweaver
Joined
Jul 6, 2010
Messages
6
Reaction score
0
Although that was a great tutorial :) Thanks for that, i just think that maybe you should start creating layouts for websites using div tags instead of tables (Tables are supposed to be used to show tabular data, like address books, results and stuff.)

Now i'm not here to moan, just suggesting you try it out, it can be weird at first, just remember to float what you need and position then correctly using CSS.
Again, i'm not moaning i just suggesting that for you to try ;) You get much much more control over your layouts and when you get used to it, it becomes easy as pie.
:) If you need any help post up.
 
Newbie Spellweaver
Joined
Jul 6, 2010
Messages
6
Reaction score
0
Yeah, and also if you are looking to go serious with web development/design, they are most likely always looking for tableless designer - I'm trying to get a job as a web developer but no one is interested where i live haha :)
 
Newbie Spellweaver
Joined
Jul 2, 2010
Messages
17
Reaction score
4
I like tables better, is all. It aligns everything for you, instead of having to do it yourself- with divisions.

But I may consider that. Thanks for the input.
 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
-You can use Dreamweaver or Notepad, either or. Dreamweaver is to be used if you're a coward, and need help, and notepad is for the confident.
As you use DreamWeaver in your "show-off" example.. lol... Sorry, had to point that out. the MM_ (macromedia JavaScript starters) are a dead giveaway... That and the extensive overuse of tables.


Nice tut, but you should explain the box-model and how to construct layouts properly by using CSS on for positioning, z-indexes, size, and combining that information with DIVs (and other elements). Also explain how should be used with span tags (and other text-wrapping elements).

Also, somebody noted how to use a background image.. That too should be done through CSS, and the <body> part of the document should be used to hold the information on the default page style (which includes but is not limited to the document's background image).

In your next tutorial, explain why <div> and <span> tags can more/less create an entire flexible XHTML document.. Maybe show that XHTML is a stronger, more reliable type of document for the web vs HTML because of cross-browser compatibility.

Another thing to note, is that most professional web design companies use Dreamweaver to create their web-sites. I in no way support this, but it is a sad truth.

One last thing, it's really pointless to show a whole extensible list of tags. Instead, pointing to a reference (instead of flaming your readers for not searching google) is a good idea.

CSS always goes along with HTML, and as Daevius says, "tables should be used for tabular data, DIVs for layouts." I'm a strong believer of this.
 
Newbie Spellweaver
Joined
Jul 2, 2010
Messages
17
Reaction score
4
As you use DreamWeaver in your "show-off" example.. lol... Sorry, had to point that out. the MM_ (macromedia JavaScript starters) are a dead giveaway... That and the extensive overuse of tables.
Haha, well, I'm not a pro, so what can I say? :p

Nice tut, but you should explain the box-model and how to construct layouts properly by using CSS on block-level elements for positioning, z-indexes, size, and combining that information with DIVs (and other elements). Also explain how inline elements should be used with span tags (and other text-wrapping elements).

Also, somebody noted how to use a background image.. That too should be done through CSS, and the <body> part of the document should be used to hold the information on the default page style (which includes but is not limited to the document's background image).

In your next tutorial, explain why <div> and <span> tags can more/less create an entire flexible XHTML document.. Maybe show that XHTML is a stronger, more reliable type of document for the web vs HTML because of cross-browser compatibility.

Another thing to note, is that most professional web design companies use Dreamweaver to create their web-sites. I in no way support this, but it is a sad truth.

One last thing, it's really pointless to show a whole extensible list of tags. Instead, pointing to a reference (instead of flaming your readers for not searching google) is a good idea.

CSS always goes along with HTML, and as Daevius says, "tables should be used for tabular data, DIVs for layouts." I'm a strong believer of this.

Very informative, thank you. I'll have to pimp out my next tutorial. (Whenever that will be.)

Dunno what to say, as it was helpful; no arguments here. S'pose I can just thank your post, eh?
 
Back
Top