Guide to Web Page creation.
I didnt see a webpage guide in the section, so I thought Id write one.
Ill start with some basic terminology
HTML stands for hypertext Markup Language. In essence it is not actually a 'language' but a tagging system. You tag your data, to tell the browser how to display it.
PHP stands for PHP hypertext preprocessor. PHP is a scripting language, that is run on the server it generates HTML dynamically, based on its code, variables. It was written with MYSQL interoperability in mind, so it works quite nicely with this database.
CGI Common Gateway Interface, this was how dynamic webpages were created before the advent of PHP, 95% of CGI scripts are written with PERL
ASP Active Server Pages, this is basically the M$ version of PHP.
Host This is the server that your webpages physically reside on. This is where all the PHP or ASP code runs.
Javascript This is a stripped down version of Java, specifically designed to run in a browser. The code runs locally, in your browser.
Applet An applet runs full fledged JAVA from the JVM in the browser. the code is complied already and then downloaded to the client.
DNS Domain name system. this is how the address www.whatever.com gets translated into an IP address you can access. Domain names are purely for human use, and the computer doesnt want anything but the IP address. You register your domain with a registrar, whom you will have to pay annually (or monthly) to keep your address, and where it points to.
For this guide, I will be focusing purely on HTML, if you want to learn PHP or ASP, go take a class on it, or buy a book. Perhaps I will add something later on.
I would advise creating this in notepad or some other TEXT editor. do not use word or any other wordprocessor.
some basic pointers
-All open tags must be closed (IE doesnt whine too badly, but its sloppy coding not to close your tags)
-Tags such as break <Br /> should be self closing.
-Indent properly, you will be glad (unfortunately this forum doesnt allow me to add tabs to my posts)
The first thing any HTML page needs is the tag that tells you its an HTML file
<HTML>
and the closing tag
</HTML>
the next thing you need is the head section. here you can put tags such as title (which appears in the top bar of the browser)
<html>
<head><title>My First Web Page</title>
</head>
</html>
ok so now we have a title, now we need the page itself, the body.
<html>
<head><title>My First Web Page</title>
</head>
<body>
<h1 align='center'> This is my Webpage </h1>
</body>
</html>
to change the background colour of your page simply add the attribute as shown here
<body bgcolor='red'>
or to add an image as your background
<body background='www.mysite.com/somepicture.jpg'>
ok so I put an h1 tag in the page, these are headers, you have h1-h5 h1 being the largest title and h5 being the smallest. you may also have noticed that I put an alignment attribute there. various tags have different attributes such as color (yes i know you have to spell it the silly american way) align,valign etc...
now when you put text into your page, it will all appear on one line, or autowrap (depending on the browser) This is not a good thing. Good thing we have the <Br /> tag! (break tag) this is the newline charecter for HTML. the other method is the preformatted tag denoted as <pre> Some long piece of preformatted text here</pre>
The best way to organize your data on a webpage is a table
here is a snippet of how to create your table
<table border =1>
<tr>
<td>table cell one </td><td>table cell two</td>
</tr>
</table>
this gives you a table with 2 columns and 1 row, with a border of 1 unit around the cells.
<tr> stands for table row, <td> for table data.
*you can create as many columns as you want in a row, but remember, the total columns for all rows is the highest number you have created. ex if I have 3 columns in row 1, and 2 in row 2, both will end up with 3 columns while the last one in row 2 will be blank.
if you want to take up 2 columns with a single cell ad the "colspan=X" (where x is the number of columns) in the attributes portion of the TD tag.
to create a hyperlink you simply put <a href='www.twcenter.net'>total war center</a> like this
To further format your text, you can use these tags, embedded inside your other tags.
<b> THIS TEXT WILL BE BOLDED</b>
<u> THIS TEXT WILL BE UNDERLINED</u>
<i> THIS TEXT WILL BE ITALIC </i>
ex.
<h1> This is my <b> Total War </b> webpage </h1>
Make sure when you nest tags, you close them in the same order you open them.
If you wish to change the font of your text, wrap the font tag around it.
<font face='times' size='10'> this will be in the times new roman font </font>
When choosing font faces remember, if the client does not have a particular font installed, they will see the text in the default font. So dont use obscure fonts, or ones that nobody will have ever installed. If you want your cool looking font for a title or something, it would be a better idea to create an image out of it, this will enable everyone to view it properly.
The image tag.
The Syntax is <img scr="address of image here" alt='description of image'>
pretty self-explanitory there.
Browser specific tags
I am putting these in here for purely informational purposes (incase you run into them in the wild)
Note: I do not advocate using these tags, and good web design practices prohibit thier useage.
<marquee> this text will scroll across the screen </marquee>
This is an IE specific tag, netscape will ignore it, basically it makes text scroll across the web browser.
<blink> this text will blink </blink>
Quite possibly the most annoying tag ever created. It is a netscape only tag, IE will ignore it.
It makes the text inside the tags blink, simple enough.
As I said, I do not advocate the useage of these tags, but they do exist, and this is what they do.
Lastly, make sure you save your file with a .html or .htm file extension
that should be enough to get most people started, I will perhaps add more to this later, but thats all for now. for more info try www.w3schools.com.
Enjoy
Reply With Quote
