|
Malagrond -> [Tut]Making a Webpage (Featuring:Drop-Down Menus!) (8/15/2007 18:09:03)
|
Teh Super Cool Website Tutorial
As my first tutorial, I hope it helps. I've had about 3 years of web programming experience, improving from this to this (which doesn't look like much, but it is entirely in php, has a blog, and everything on the page except the stylesheet and image is dynamically generated and loaded from external text files).
Okay! Time to get started. But first, open up Notepad. If you don't know where this is, go to Start>>(All) Programs>>Accessories>>Notepad . Or, you can be super cool (this is for experienced users since it is fancier) and download this free HTML editor (it basically just highlights the HTML code making it easier to see and edit):
Windows 2000 or higher (XP or Vista are preferred): http://download.textpad.com/download/v50/txpeng503.exe
Windows 98+: http://download.textpad.com/download/v47/txpeng473.exe
Versions in other languages are available here.
Start off by saving your file as index.html in a new folder that you won't forget about. :P (Remember, in notepad, to change the "Save as Filetype:" to "*.* All Files" option.
Getting Hosted
To put a site on the web, you first have to put it on a server. You can find alot of good free hosts out there (see the very end of the HTML section). Sometimes, though, you'll want some really good hosting that will, inevitably, cost you some money. Try to find a Linux/Unix server, as they are open-source OS's (operating systems) and will be cheaper for you (since they're free for the company. Thanks to dominic_r_monroe for the tip ^_^)
Getting a Theme
The first thing you need to do when planning any site is to come up with a theme. What is your site going to be for? What are some important things it should have? How should it look? In order to plan for each of these, you should draw (on, *gasp*, paper) what the layout will be. Example:
http://img248.imageshack.us/img248/4601/layoutye3.gif
This is just a rough layout (and I didn't use paper cause my scanner isn't working right for some reason). You can make it as complicated as you want, as long as you're confident you can actually do it.
Now you need to pick a color theme for your site. It's often best to make the boxes have a different background color than the page behind them, and to make the text in the boxes the same color as the page's main background. This helps tie in all the colors. Example:
http://img398.imageshack.us/img398/3240/colorethemesrg1.gif
The last thing you should do for your page is to plan out the main paragraph. This will welcome people to your site and explain what it is for, what the newest part of the site/clan/club/watever is.
Building the Basics
Alright, now that you have the main layout planned, it's time to make it happen cap'n. Whenever you make a webpage, you want it to have the following code:
<!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/2007/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<body>
</body>
</html>
Basically, the first line of code lets your browser know what to expect when it looks at the page. The "head" section is loaded immediately, even if you can't see anything else on the webpage yet. This is where scripts and styles go, not to mention some other fancy stuff which I unfortunately won't cover in this tutorial.
The "title" part is where you put your page's title. You put it in between the "<title>" and the "</title>". By the way, lolz, I forgot to tell you what those are called. Any part of the HTML language that has an angle bracket before and after it (eg, <p></p>) is called a tag. All tags must have a close to them, or your page will be really unpredictable. For all tags except "input" and "img" tags, you need to put a closing tag like this:
quote:
<a href='http://www.battleon.com
</a>
For every tag, there is an equal and opposite closing tag. :P
Back on topic, the "body" section is where the real page goes. Everything you want to appear has to go here, or it won't show up. I'll get to that more later.
Finally, the closing "</html>". This lets the browser know that the file is done, and that there is nothing else to load. (Note: this closing tag is not necessary, but it is HIGHLY recommended that you put it in anyways).
Giving it Content
Alright, between your "body" tags, I want you to put this code:
<div id='content'>
This is the main content box. This will usually be the only thing that changes from page to page on your site.
</div>
Notice the "id='content'". That's called an attribute. Attributes help define certain aspects of web pages; in this case it helps to identify the "div" (or division, as I interpret it) for use in scripts and stylesheets.
Now you can change the words I put between the "div" tags to your welcoming paragraph. Next I want you to put this above the "div" you just made:
<div id="left">
This is the left content box.
</div>
This is where your links and such will go. If you don't know how to make a link, don't worry. I'll get there in the next section.
Now put this code right before the last "body" tag.
<div id="right">
This is the right content box.
</div>
This is where you could prolly put some allies for your clan, or thumbnails for art if you're making a gallery. You can change this content (I strongly recommend it :P) later, but for now it will hold up for development.
Be Content With Some Content
Yay! Now you get to put some stuff in your boxes (that aren't boxes yet). Right now, you should have your file open in a text editor, so go ahead and save if you haven't already.
Now, to add images, use the following code:
<img src="imageurl" alt="descriptive.text" />
As I said before, this is one of few tags that doesn't need a separate closing tag, but it does neet a forward slash before the last ">".
Don't forget it!
Replace "imageurl" with the actual image url. Then replace the "descriptive.text" with exactly that; this text will show up when you move your mouse over the image, or if the image doesn't show up. It is always good to have.
To add a link, use this code:
<a href='url'>Name.of.Link</a>
You need to replace 'url' with the address you want to link to. Example: You want to link to battleon.com, so you replace 'url' with 'http://www.battleon.com'. Then change the Name.of.Link to whatever text you want ( like this. it's the title of the link.). Normally you want it to be the name of the site you're linking to.
Now for some cool stuff. You can make paragraphs by using "<p></p>". Just put your text between the tags. To make it centered, just put "align='center'" like this:
<p align="center">This will be centered</p>
Paragraphs always start on the second line below whatever is above them. That means it's the same as if you hit "enter/return" twice then started typing after the second "enter/return".
Horizontal rules serve as simple dividers between content. They are by default, really ugly IMO, so use this code:
<hr color="color" />
Did you see it? It's another tag with no separate closing tag. o.0 Also, the simple but effective "color" attribute does exactly what it seems like: it changes the color of things. Try it in other tags too. ;D
And, the most important tag for basic formatting, bum bum bummmm: break. This simple tag works just like hitting the 'enter/return' button on your keyboard:
<br />
It also doesn't have a separate closing tag.
Stylesheets: Lifeblood of the Site
Yuck, I used to hate stylesheets! They were so confusing and disorganized! But now, [sm=twill3a.gif].
Stylesheets, coded using CSS (lolz, Cascading Style Sheets), are the reason that everything looks so good on the internet. They help you position stuff, make different color combinations, format text, and do all sorts of cool stuff! You'll need to save what you're doing, open a new notepad (or in textpad just make a new document) and save it as "default.css". If you look at it in Explorer or some other file manager you'll see, holy crap! Your computer already knows what it is without being a server! Number one, that's cause CSS has almost nothing to do with servers. Number two, your computer, believe it or not, looks so cool on-screen because of CSS. Your computer (most Operating Systems anyway) are layed out using really, REALLY complicated HTML, Javascript, and CSS. Plus, there's always that awesomeness known as C# running in the background to actually interpret the other stuff.
Anywho, this is a good stylesheet to start off with:
body {color:#FFFFFF;background-color:#000;}
div {border:1px solid #000;padding:2px;}
p {text-indent:20px;}
#right {position:absolute;right:1%;top:11%;width:12%;height:50%;}
#left {position:absolute;left:1%;top:11%;width:12%;height:50%;}
#content {position:absolute;left:14%;top:11%;width:73%;height:50%;}
#banner {position:absolute;left:25%;top:0%;height:10%;width:49%;}
The "#banner" is there for you to put in this code right after the first "body" tag:
<div id='banner'>
<img src='the.url.of.your.banner' />
</div>
(sorry I forgot about that *.* )
Notice the "#" signs in front of some of those words? That lets the browser know that those styles are for the tags with an id. o.0 Did you notice anything familiar? The same "div" id's that you have in your code are used here! So that's what they're for!
Also, if you noticed the "position:aboslute;left:1%;top:11%;" stuff, that's to position your content exactly. The layout I have makes a well layed out page, similar to the diagrams I had earlier. You can toy around with the numbers to make it better (you can even put 25.4% in. It takes decimals). Plus, if you really want assume that all your users will have the same screen size as you, you can use "px" instead of "%". "Px" stands for pixels, just in case you didn't know, and they are way smaller than percents. They take alot more work to position, but they often give really nice layouts. That comes with a price though (the screen size problem).
Wrapping Up
Well, by now, if you have looked at the cheat-sheets (top of post) and followed my tutorial, you should have a pretty nice page. Just use the same basic outline to make other pages, always saving them as ".html" files. Just experiment with some other stuff on those cheat-sheets and see what happens. Also, I recommend this book:
http://www.cookwood.com/html6ed/
It was my first HTML book, and I have learned so much. It is only 21.99 USDollars, compared to some books that go for about $50. Lolz, it has pictures! No, seriously. Every step is shown in a picture, but in a professional way (so as not to seem childish or make you feel stupid).
By the way, if you just can't get the hang of it, I can make pages for you. Just pm me! ^_^
quote:
My Favorite Hosting Sites:
50webs.com
Unlimitedmb.com
Both of these sites will give you a subdomain (example.50webs.com , not an actual link :P) They both have an ad-free service (they won't put any advertisements on your site), and the second one even supports PHP and MySQL for free! It's my favorite, but you can only have one account per computer :P
More soon . . .
Javascript: Eye-Candy to Make it Look Good ;-)
Alerts and Interacting with Styles
To learn Javascript, you have to start out simple. The first thing you need to learn, is how to put it in your page. For internal scripts (which I recommend using until you get much more experienced), you add this code:
<script>
/* Your script goes here. Btw, this is a comment. Start comments with // If they fit on one line,
or put "/*" in front of the comment and "*/" after it. (This means it can be a couple lines long, like this one.) */
</script>
You can put this code before the "</head>" tag anywhere in between the "body" tags. Okay, now to make something happen.
To make an alert, put this code between your "script" tags:
alert("Your text here");
Notice the " ; " after the code? That basically tells the browser that that's where the code stops. Make sure you don't ever put code over multiple lines when it can, and should, go on one. (Like the alert. It always goes on one line, just because it is self-contained [it already contains all the instructions it needs to do something]). An alert is like the little box that pops up when you get a private message (if you have it set to that).
Now for interating with styles. I'm not going way in-depth, but I'll just say that this is the right way to go:
// To change something, you first have to tell the script where and what it is.
var variableName = document.getElementById("this.is.why.you.give.tags.ids.");
This, by itself, does nothing more than say that "The element with the id of 'yaddayadda' is now named variableName as far as this script is concerned". So now you can do this to, say, change the text color of a link:
var linkToChange = document.getElementById("somelinky");
linkToChange.style.color = "#0000FF";
This will actually change the color as soon as the page loads. So to limit that, we're going to use what's called an "intrinsic event". Basically, an intrinsic event is triggered by something you do with the mouse, keyboard, or the browser. Let's try an "onmouseover" and an "onmouseout":
var linkToChange = document.getElementById("somelinky");
linkToChange.onmouseover = linkToChange.style.color = "#0000FF";
linkToChange.onmouseout = linkToChange.style.color = "#000000";
This script makes the link blue when you put your mouse cursor over it, then changes it back to black when you move the mouse away. Now, if you took the "onmouseout" line away, the entire line, the link would stay blue, even after you moved your mouse away. (That's because nothing told it to change back :P)
Here is a basic cheat-sheet I made of the .style references in javascript. This list doesn't have all of them, but it has alot of important ones:
quote:
These all go after the " .style. "
color
backgroundColor
width
height
borderColor
border
borderStyle
fontSize
fontFamily
textDecoration
left *
top *
right *
* these three are special. You can only change them, you can't actually use these to find out what the values are.
You have to use offsetLeft, offsetTop, and offsetRight. (if I got those wrong, let me know [anyone])
Advance Javascript (Section 1): Drop Down Menus
Finally! An update. Well on to the stuff>>
Okay, the first thing you need to do is make a new document in your text editor. Go ahead and save it as "menus.js". This is called an external script (because it's not in the actual HTML page :P). Start off your script with the following code:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
}
Basically this says "When the window finishes loading the page, start doing whatever initAll() says to do." initAll is a really common function name for starting off scripts. It pretty much explains what it does (it initializes everything :P). The way you define and call a function is this:
function functionName() {
//statements
}
This basically tells the browser to create a function named functionName that does "//statements" which, seeing as it's a comment, doesn't really do anything. Functions basically divide your code into modules that you can call separately (so you don't get a jumbled mess). To call a function, it really depends on context. Example:
<a href='javascript:functionName()'>Linkage</a>
<button onclick='functionName()'>button</button>
window.onload = functionName;
Notice that the window.onload calls the function without parentheses. Never, EVER put parentheses in the onload handler. It will majorly fudge up your script. Anyhow, back to the script. You should have the following code (in red) so add the code in blue:
quote:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks.className.indexOf("menuLink") > -1) {
allLinks.onclick = function() {return false;}
allLinks.onmouseover = toggleMenu;
}
}
}
Now this code basically says the following:
Make a list (array) of any and all elements in the document that have "a" tags (anchor tags, or any links) and name the list allLinks. Now make a "for" loop with the following conditions: Make a new variable "i" and make it worth 0; Keep looping as long as "i" is less than the number of links on the page, then stop; add 1 to "i" every time the loop goes around. Each time the loop goes around, check to see if the link at "i" position in the array is in the menuLink class (we'll get to that later). If it is, then set up some event handlers. If the link gets clicked on, dont do anything. If the mouse cursor is moved over it, then toggle the menus (this isn't a built-in function. You will define it in a minute).
Okay, so go to your HTML document and put in the following code:
<div id='menus'>
<!-- repeat the following lines (until the STOP comment) for every drop down menu needed,
making sure to change the "menu1.html" to "menuN.html" where N is a number that no other menu has -->
<div id='menus1'>
<a href='menu1.html' class='menuLink'>Title1</a>
<ul class='menu' id='menu1'>
<li><a href='page.html'>Page1</a></li>
<li><a href='page2.html'>Page2</a></li>
<!-- repeat the above line (editing the url and name as needed) for each link in this category -->
</ul>
</div>
<!-- STOP -->
</div>
That's where the menuLink class comes in. You actually give the class to the menus. Now add this CSS to your stylesheet (if you have an external one) or between the "style" tags on your page:
body {
background-color:white;
color:black;
}
#menus {
margin-bottom:10px;
width:180px;
background-color:green;
float:left;
}
#ul.menu {
display:none;
list-style-type:none;
margin:0;
padding:0;
}
#ul.menu li {
font:12px arial, helvetica, sans-serif;
padding-left:10px;
}
a.menuLink, li a {
text-decoration:none;
color: black;
}
a.menuLink {
font-size:16px;
font-weight:bold;
}
li a:hover {
background-color: #060;
color:white;
}
You can edit any of the color, font, and background-color values if you want. Ok. Now that your HTML and CSS is done, let's finish the script:
quote:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks.className.indexOf("menuLink") > -1) {
allLinks.onclick = function() {return false;}
allLinks.onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}
Now add the following before the "</head>" tag in your page:
<script src='menus.js'></script>
And, tadaa! (I hope) Drop down menus. ^_^
*Next Update: ADVANCE JAVASCRIPT: MAKING SOMETHING REACT TO PUSHING KEYS ON THE KEYBOARD!!! *
Please comment and have fun!
~Mala
|
|
|
|
