How to a Website and What Need

This is a tutorial to teach you the most quick and dirty way you can make a functional website with some HTML and a little php. Not getting into CSS just yet, really but once you understand HTML it isn't hard.

How to HTML Document Correctly and with Passion

So the most important thing is always put things in an element of some kind. Everything has a place and put it there. Here's the HTML tags every document should have.

Head, Shoulders, Knees and Toes

The first tag you want is the Head tag. An example header is below and we're going to talk about every part.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="css.css"> </head>

We're going to put more stuff here later, natch.

</html>

This is honestly pretty simple but, essentially, you begin with <!DOCTYPE html> so that, y'know, the mahine knows it's HTML. Now... later when I tell you that we're using PHP files you're going to ask the natural question, if your PHP file should still have <!DOCTYPE HTML> at the beginning. The truth is that PHP files don't actually care, but your HTML can not be read in strict mode which I will not go into more because if you're reading this quick and dirty of a tutorial you probably don't care either.

I want your body

OK so the next part is the <body> tag. This is where you put pretty much everything else. Below is a table of tags you probably ought to be using. Just stick what you want between them and let it go.

Tag	Use
<p> ... </p>	This contains words and sentences.
<h1> ... </h1>	First header tag. There's also <h2>, <h3> and really as many as you need or want.
<em> ... </em>	Adds emphasis. Usually makes text italic but can be changed with css.
<strong> ... </strong>	Makes text strong. Usually makes text bold but can be changed with css.
<div> ... </div>	Creates a division. Useful for keeping things together and also keeping things apart. There's a pretentious novel in there somewhere.
<ul> ... </ul>	Makes an unordered list. Like This Look Ma, No Numbers
<ol> ... </ol>	Makes an ordered list. One, ha ha ha The Count would be proud
<li> ... </li>	Used to define the list items with <ol> and <ul> tags.

I might do another tutorial on more advanced tags later. Just settle for these for now and google anything else you want to know.

To expand on our example from earlier, here's what a page might look like.

<!DOCTYPE html>
<html>
<head>
<title>How to Website | Mustard @ LPC</title>
<link rel="stylesheet" type="text/css" href="css.css"> </head>
<body>
This sure is a paragraph! Sometimes you might want to draw attention to something and there's more than one way to do it, too!
</body>
</html>

Link! The Hero

Ok so Mr. Fansypants one page ain't good enough for you? You want to know how to link things? Fine, fine. You use the <a> tag for that. But the <a> (for anchor) isn't as simple as the above tags. Oh no it has attributes we need to define. Namely the href. An example for a link would be <a href="http://www.google.com">Google!</a>. The href attribute holds what you want to find. For an external link you want the full address but for a local link to something on your same server you can simply use a filename if the resource is in the same folder or a folder and a filename for subfolders. If you find yourself in a subfolder needing to get back out of it you can use ../ (two dots and a slash) to go back one folder.

Picture Perfect

Ok so you want images too? Well, like with the anchor tag above the <img> tag needs you to put in some info. <img src="image.png> is an example. Same rules apply to the src here that apply to the href above. It's good form to also define height and width but most people don't bother and you're busy, I'm sure.

Where's that PHP I promised

So where php comes in... is making the navagation bar and putting it on every page so you don't have to manually update every page to change it.

<?php include "nav.php"; ?>. You'll notice we have a <php tag in HTML, that the tag itself remains open and also that it closes with ?>. With this tag all the code in the middle is part of the tag, not contained in it. You can put any and as much PHP as you want here but right now we're just worried about include. Basically put down a file name and like magic it will appear on the page. You can create all kinds of faux dynamic content that updates in multiple places with this. What you really want to do, however, is is make a .php file with some links and maybe some formatting and include it on every page. Then bob's your uncle. Just make sure your pages are .php and you're set.

And there you have the quicketst, dirties and most plain website ever. When and if I get to a CSS tutorial I'll teach you how to make it ugly and tarty.

Comments are disabled.