Home » Simple login page with ASP engine

Simple login page with ASP engine

By Nate on Wednesday, 30th July 2003. More information. Comments.

This Tutorial deals with the basics of html.

This Tutorial deals with the basics of html.

All <>s have been replaced with []s
Please remember this when copying code examples

Introduction

HTML (hypertext markup language) is the base language used on the internet. It is not really considered a programming language by many hackers and programmers, but it gives you the idea of what programming is like and is also easy to start off with. When you are making a html page, you should only use notepad in windows and your favourite text editor in linux or any other os.
There are many programs which are available that let you make a html page without knowing any html at all. Microsoft Word now has this feature, for example, but these programs produce very messy html code which is hard to read and even harder to maintain.

I am going to guide you through this tutorial by example; at first i am going to explain some basic html tags and then i will show u some code and go through it step-by-step. As i progress through this tutorial, the code will become more complex, but this first chapter will be fairly easy stuff :

Basic tags

Now, Let's begin;

Firstly a tag, some of you may ask: what is a tag? Well a tag is like a command in a standard programming language.
All tags are enclosed between the [ and ] symbols. There are two types of tag an open tag [ ] and a close
tag [/]

[html] This tag tells the browser that it is a html document. Every html page will start with [html] and end
with [/html]

[head] [/head] The head tag is used for things such as code that you dont want to be seen on the page.

[title] [/title] The text between the title tags will be displayed on the title bar, which is the black coloured
bar at the top of every window, its the one at the very top with the X button on it

[body] [/body] This is where everything you want to display on the page is written

Now you know enough to write your first html page.

open notepad and type the following code (dont copy and paste it, type it out so you learn it) :

[html]
[head]
[title] My first webpage!![/title]
[/head]
[body]
Welcome, this is my first webpage, what do you think?
[/body]
[/html]

Fonts and colors

Now you may be thinking, what if i want to change the colour of the text or the background? or what if i want to change the font?

to customize your fonts you use the [font] tag
here is an example:
[font face=arial black color=#696969 size=5] Some text [/font]

[font face=arial black - - this specifies the type of font you want to use, when you are using fonts try to remember
that some fonts are not as popular as others and if someone does not have the correct font on their computer, it will
just show in the default browser font. You can specify multiple fonts by puttin a comma between the font names
e.g. [font face=arial black,times new roman,comic sans MS] remember to use fonts that are similar to eachother,
the three ive used are nothing alike.

[font color=#696969 - - this is the color you want your font to appear in, remember html uses color not colour so be
careful of the spelling!
ok the #696969 bit is a color number in hexidecimal format. Hex numbers contain the digits 1-9 and also the letters a-f.
The numbers refer to the amount of each color, red green and blue to use, so the first two numbers, or letters,
define the red, the second two the green, and the last the blue. here are some basic hex color codes:

#ff0000 - red
#00ff00 - green
#0000ff - blue
#ffff00 - yellow
#00ffff - light blue
#ff00ff - pink/purple
#696969 - grey
#ff9900 - orange

You can experiment and find a few for yourself too.
also, a color can be specified by its name e.g. [font color=green] but this will not give as good a range as hex.

[font size=5 - - this is the size of the font, which can range from 1-7, not much else i can say on this

Background colors and images

[body bgcolor=#000000] this specifies a background color for the page, and is also in hexidecimal format orcan be
used by name.

[body background=http://www.mysite.com/background.jpg] this allows you to use an image as a background.
Most images on the internet are either in .jpg or .gif format.

[a href=http://www.thepcspy.com]The Pc Spy.Com[/a] this is the basic structure of a link in html. [a href
tells the browser it is a link
which is followed by the full address of the file. after this you type what you want the link to say, in this case it is
The Pc Spy.Com and after you write [/a] to tell the browser you have finished the link.

[img src=http://www.mysite.com/image1.jpg] this tag tells the browser that you are going to specify an image.
src= is the address for the image. please note: if the image is in the same directory as your html page, the full addres
is not required, just the name of the file. Also, the [/img] tag is one of few tags in html whcih does not need a end tag.
e.g. there is no [/img]

[center] and [/center] are used to centre the text in the middle of the screen. The text you want centred is placed
between the two tags and any formatting of the text using the [font] and [/font] tags will go here too

[br] is used to make a carriage return in html, just hitting return will not do, [br] is also a tag which does not have
an end tag.

Now you know enough to write your own page with links and images. Now go try it...... Here is some sample code below:

[html]
[head]
[title]My Second webpage![/title]
[/head]
[body bgcolor=#696969]
[center]
[font face=arial black color=#ff9900 size=6]
Welcome to my second page, below is an image of myself:
[/font]
[br]
[img src=me.jpg]
[/center]
[font face=arial color=#ff9900 size=4]
Hello! my name is John Smyth and above is a picture of me, and this is my site, please feel free to look around.
[br]
[a href=page2.html] Another page on my site! [/a]
[br]
[a href=http://www.thepcspy.com] The PC Spy.Com [/a]
[br]
[/font]
[/body]
[/html]

Link colors and text formatting

Now, what do you do if you want to change the color of the links???
This is done in the body tag, there are different things you can do with link colors, here they are:

[body link=#0000ff alink=#00ff00 vlink=#ff0000]

link=#0000ff is the color of a standard link, again this is in hexidecimal format
alink=#00ff00 is the color of an active link, this is a link which is currently loading, or being requested
vlink=#ff0000 is the color of an already visited link

What do you do if you want to make text bold or underlined?

to make text bold insert it between the [b] and [/b] tags
to make text underlined use [u] and [/u]
and to make text italic use [i] and [/i]

In html everything you type in notepad will not normally be exactly displayed by the browser,
so if you type something with a bunch of spaces like this: Hello! how are you? ; it will just be shown in the
browser window as Hello! how are you? To get the browser to display more than one space you will have to use a code,
which is typed as & nbsp; but you will have to type it without the space between the & and the nbsp; because if i type
it here, it will just show as a space.

There is a way, to get the browser to show everything as you type it, for this you must use the [pre]
and [/pre] tags, this will make all carriage returns and spaces show exactly as you typed them.

Summary

This a summary of all tags used in this chapter, please be sure to learn them before moving on to chapter two

[html] - - specifies a html document
[head] - - mostly used for typing scripts that will not be outputted into the main document
[title] - - the title of the page, displayed at the top of the browser window
[body] - - the main segment of the page, where your links, images and text will go
[font] - - used to change the type of font used
[a href] - - used to specify a link
[img] - - used to put in a picture
[center] - - to center everything in between the [center] and [/center] tags
[br] - - a carriage return (move to next line)
[b] - - make text bold
[u] - - make text underlined
[i] - - make text italic
[pre] - - output text as it is typed, spaces, carriage returns

In the next chapter i will cover these tags in more detail and show you some new ones.