Advanced HTML Mega-Guide

[Spookerzz]

Here's Part Two Of The Huge Mega Guide

TIP: Before reading this all I would favourite the page because the tutorial is HUGE! Read it in parts or you will get bored and give up on HTML...

HTML Webserver
Copied From W3's School
Your Windows PC as a Web Server
If you want other people to view your pages, you must publish them.
To publish your work, you must save your pages on a web server.
Your own PC can act as a web server if you install IIS or PWS.
IIS or PWS turns your computer into a web server.
Microsoft IIS and PWS are free web server components.

IIS - Internet Information Server
IIS is a set of Internet-based services for servers created by Microsoft for use with Microsoft Windows.

IIS comes with Windows 2000, XP, and Vista. It is also available for Windows NT.

IIS is easy to install and ideal for developing and testing web applications.

IIS includes Active Server Pages (ASP), a server-side scripting standard that can be used to create dynamic and interactive web applications.


PWS - Personal Web Server
PWS is for older Windows system like Windows 95, 98, and NT.

PWS is easy to install and can be used for developing and testing web applications including ASP.

We don't recommend running PWS for anything else than training. It is outdated and has security issues.


Windows Web Server Versions
Windows Vista Business, Enterprise and Ultimate come with IIS 7
Windows Vista Home Premium comes with IIS 7
Windows Vista Home Edition does not support PWS or IIS
Windows XP Professional comes with IIS 5.1
Windows XP Home Edition does not support IIS or PWS
Windows 2000 Professional comes with IIS 5.0
Windows NT Professional comes with IIS 3 and also supports IIS 4
Windows NT Workstation supports PWS and IIS 3
Windows ME does not support PWS or IIS
Windows 98 comes with PWS
Windows 95 supports PWS


How to Install IIS on Windows Vista
Follow these steps to install IIS on Windows Vista:

Open the Control Panel from the Start menu
Double-click Programs and Features
Click "Turn Windows features on or off" (a link to the left)
Select the check box for Internet Information Services (IIS), and click OK
After you have installed IIS, make sure you install all patches for bugs and security problems. (Run Windows Update).


How to Install IIS on Windows XP and Windows 2000
Follow these steps to install IIS on Windows XP, and Windows 2000:

On the Start menu, click Settings and select Control Panel
Double-click Add or Remove Programs
Click Add/Remove Windows Components
Click Internet Information Services (IIS)
Click Details
Select the check box for World Wide Web Service, and click OK
In Windows Component selection, click Next to install IIS
After you have installed IIS, make sure you install all patches for bugs and security problems. (Run Windows Update).



Test Your Web
After you have installed IIS or PWS follow these steps:

Look for a new folder called Inetpub on your hard drive
Open the Inetpub folder, and find a folder named wwwroot
Create a new folder, like "MyWeb", under wwwroot
Write some ASP code and save the file as "test1.asp" in the new folder
Make sure your Web server is running (see below)
Open your browser and type "https://localhost/MyWeb/test1.asp", to view your first web page
Note: Look for the IIS (or PWS) symbol in your start menu or task bar. The program has functions for starting and stopping the web server, disable and enable ASP, and much more.


How to install PWS on Windows 95, 98, and Windows NT
For Windows 98: Open the Add-ons folder on your Windows CD, find the PWS folder and run setup.exe to install PWS.

For Windows 95 or Windows NT: Download "Windows NT 4.0 Option Pack" from Microsoft, and install PWS.

Test your web as described above.


Your Next Step: A Professional Web Server
If you do not want to use PWS or IIS, you must upload your files to a public server.
Most Internet Service Providers (ISP's) will offer to host your web pages.
If your employer has an Internet Server, you can ask him to host your Web site.
If you are really serious about this, you should install your own Internet Server.

In my own words a Webserver is a server which hosts websites...
MPGH uses vBulletin btw but it costs a lot and if your trying to make a hack website don't -.- MPGH owns

Scripts
A Script tag is <script>

<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>

That script will say HELLO WORLD!

Script for older webbrowsers
Some older browsers don't regonize the <script> tag so you have to do this

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script> 
VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>

Script means Javascript

The <noscript> Tag
This part is from W3
In addition to hiding the script inside a comment, you can also add a <noscript> tag.

The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is used for browsers that recognize the <script> tag, but do not support the script inside, so these browsers will display the text inside the <noscript> tag instead. However, if a browser supports the script inside the <script> tag it will ignore the <noscript> tag.

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript> 
VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

Pic of Tags used in scripts


Frames
Defenition
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents
It is difficult to print the entire page

The Frameset Tag
The <frameset> tag defines how to divide the window into frames
Each frameset defines a set of rows or columns
The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag
The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").

Basic Notes - Useful Tips
If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag.

Add the <noframes> tag for browsers that do not support frames.

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags! See how it is done in the first example below.

Credits of this part to W3

Entities
Again Credits to W3
Character Entities
Some characters are reserved in HTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup.

If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity looks like this: &entity_name; OR &#entity_number;

To display a less than sign we must write: &lt; or <

The advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names (while the support for entity numbers is very good).

Non breaking space
The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; character entity.

Meta
*sighs Again Thank you W3's
HTML also includes a meta element that goes inside the head element. The purpose of the meta element is to provide meta-information about the document.

Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document.
Keywords for Search Engines
Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages.

This meta element defines a description of your page:

<meta name="description" content="Free Online Gaming Hacks" />

This meta element defines keywords for your page:

<meta name="keywords" content="Hacks,Hacks,Hacks!" />

The intention of the name and content attributes is to describe the content of a page.

However, since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.

Unknown Meta Attributes
Sometimes you will see meta attributes that are unknown to you like this:

<meta name="security" content="low" />

Then you just have to accept that this is something unique to the site or to the author of the site, and that it has probably no relevance to you.

HML 4.0 And 3.2
The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like:

<p>This is a paragraph</p>

<h1>This is a heading</h1>

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

What is so Great About HTML 4.0 ?
In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.

Because HTML 4.0 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content.

Lists
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Exploits</li>
<li>Hacks</li>
</ul>

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Exploits</li>
<li>Hacks</li>
</ol>

Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term).

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

<dl>
<dt>CF EXPLOITS</dt>
<dd>CF HACKS</dd>
<dt>CA EXPLOITS</dt>
<dd>CA HACKS</dd>
</dl>

Forms
A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
.
input elements
.
</form>

Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input.

The end of the Advanced tut

Credits
W3's School ( All the coding)
Me (Copying and pasting all the tut toghether xD)

[treeham]

That's how I learned HTML. w3schools is great

Nice job making this not a noob copy and paste

[treeham]

That's how I learned HTML. w3schools is great

Nice job making this not a noob copy and paste

I said NOT in there, because usually noobs will just copy and paste the whole tutorial in there and you edited and modified it a lot

[Web-Designer]

That's how I learned HTML. w3schools is great

Nice job making this not a noob copy and paste

I learned mostly from taking apart different sites
And reading a lot randomly online, side by side my holy code book. . .had like everything.

But these days its sad you don't even really have to know anything, if so very little! Adobe CS5 Dream Weaver you can make full customize sites with-out even messing with the code, just have to be in design mode and know some terms.

[Alen]

I learned mostly from taking apart different sites
And reading a lot randomly online, side by side my holy code book. . .had like everything.

But these days its sad you don't even really have to know anything, if so very little! Adobe CS5 Dream Weaver you can make full customize sites with-out even messing with the code, just have to be in design mode and know some terms.

Dreamweaver can't parse php realtime so you're pretty much stuck to designing static pages. And most of those have extensive use of js and any hacks and rarely turn out to be valid. The only real way to make a site is character after character

[|Energy|]

Yeah He didn't copy and paste all of it because I've read all of W3's And (forgot most of the tricky coding xD) some bits are not in here -.-

[Spookerzz]

Why would I copy and paste a tutorial I'm not the noobish

[♠Gόd†ιΚε♠]

I'll make the intermediate one

[Spookerzz]

You did it xD

[Spookerzz]

Ahh didn't see the not

[Houston]

Nice Job
Thanks

[Spookerzz]

Press the thanks button if you like it :d

[[MPGH]Time]

What is w3's school god?.

[Spookerzz]

A programming website which taught me everything I know...

And with lots of practise I may be able to make my Steam clan website

[Gilcrow]

there are hundreds of books and html sites, this is ripped just not from w3