Login box tutorial (Using valid XHTML & CSS)

Falken · Post by **Falken** » Tue Sep 29, 2009 9:39 am

As a few people might want to learn some XHTML and CSS I thought I would write a little tutorial. All code is completly XHTML and CSS valid.
This is the end result:

Ok, so lets get started!

Table Of Contents:
Step 1: Creating the files
Step 2: Creating the basic html page
Step 3: Creating the basic box layout

Falken · Post by **Falken** » Tue Sep 29, 2009 9:40 am

Step 1: Create the files

We start by creating 2 files:
index.htm
style.css

Place those 2 in the same folder.

Step 2: Basic XHTML file

Open up the file "index.htm" in a text editor, I use Notepad++.

Enter the following XHTML code:

Code: Select all

<!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/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Webbased RPG</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	</head>
	
	<body>
	</body>
</html>

The first line, starting with "<!DOCTYPE" tells the the browser that we use XHTML code. This is very important in many cases to get the page to render, especially in Internet Explorer. Sometimes when stuff looks messed up in IE, it in surprisingly many cases works by just adding this line

Next we have the <html> tag which indicates that our page begins here, we also added the XML type we are using. (Part of the XHTML standard). This is also required for XHTML validation!

Then we have the <head> tag inside of the head tags we mainly put information about the website, such as the page title, what characterset we are using. We can also include files here, such as css and javascript files that the page will use.

<link rel... is where we define where our css file is located, if they are not in the same directory, change the href value. Remeber to use a relative path! (Ex. "/styles/style.css" rather than "C:\my pages\styles\style.css").

The <meta... line is where we define what our character encoding we are using, as mentioned above, I choosed to use utf-8, which is one of the most common.

We also have the <body> tag, this is where we soon will put all our page design.

Falken · Post by **Falken** » Tue Sep 29, 2009 10:02 am

Step 3: Creating the basic box layout

Now we are going to create the basic layout of the page.

We start by adding the header/name of the webpage at the top, in my case "Falken MMO". We are using the <h1> tag, which is a basic Header 1 style text.

Code: Select all

<!-- Add this code between <body> and </body> in index.htm -->
<h1>Falken MMO</h1>

Next we want to create the basic box:

Code: Select all

<!-- Add this code after the <h1></h1> tags -->
<div id="login_box">
</div>

This simply creates a layer called "login_box".

Now open up your "style.css" file.

We will first set the background color and center everything. In the css file write: (/* and */ is comments in CSS.)

Code: Select all

body
{
     background-color: #024A68; /* Sets the background color to #024A68 (A dark blue color) */
     text-align: center;               /* Center everything on the page */
     margin-top: 50px;               /* Put the header 50px from the top */
}

Now we are going to set the style of our header "Falken MMO". This code goes just beneth the previous in the "style.css" file.

Code: Select all

h1
{
	font-family: Helvetica, sans-serif;    /* Set the font of the header */
	color: #FFFFFF;                                /* Set the color of the text to white */
}

the h1 means that it is applied to ALL <h1> tags.
We enter both Helevetica and sans-serif, because if the user don't have the first font, it will use the second. Also the CSS validationr requires you to have atleast one serif font.

Next we will set the properties of the login box

Code: Select all

#login_box
{
	margin: 0 auto;                      /* This is used to center the layer in the middle of the page */
	text-align: left;                      /* This aligns all text inside the layer to the left, else it would also be centered */
	width: 350px;                         /* Here we simply adjust set how wide the box should be */
	
	background-color: #FFFFFF;    /* Set the background color in the layer/box to white */
	border: 1px solid black;          /* Set the border to be 1 pixel wide and be black */
}

The # infront of "login_box" says that this style will be applied to elements with the ID "login_box".
We set the border to be 1 pixel wide and have a black color. The "solid" attribute defines that it should be a solid line, you for example also use dotted instead to get a dotted border.

You should now have the basic layout done. In the next step we will start creating the header of the login box.

Post by **hallsofvallhalla** » Tue Sep 29, 2009 1:56 pm

wow thanks Falk! Very nice tut. I will make a sticky of all tuts to make them easy to find.

Falken · Post by **Falken** » Tue Sep 29, 2009 7:51 pm

hallsofvallhalla wrote:wow thanks Falk! Very nice tut. I will make a sticky of all tuts to make them easy to find.

Next part coming up tomorrow hopefully

Hutch · Post by **Hutch** » Tue Sep 29, 2009 11:26 pm

I am very thankful of the tut. I haven't been able to research much about css as I have been working on my php. I hope this will go much further than this one.

Thanks Falken. Looking forward to learning more.

Sakar · Post by **Sakar** » Tue Sep 29, 2009 11:53 pm

Nice tut Falken! I'm sure this will help many people here.

Falken · Post by **Falken** » Sat Oct 03, 2009 9:37 am

The next part has been a bit delayed, got a little sick, which also means more catching up at university

But prob I will have it done by start of next week

neronix17 · Post by **neronix17** » Sun Dec 06, 2009 3:42 pm

Before I go through it properly, is this a box that appears over the page you are currently on or a new page altogether? Ive had a quick look through and looks like this is a damn good tut

Timpan · Post by **Timpan** » Sat Dec 03, 2011 11:48 pm

Falken wrote:The next part has been a bit delayed, got a little sick, which also means more catching up at university

But prob I will have it done by start of next week

va hände? du skulle väl fortsätta? xD skulle iaf va väldigt tacksam om du gjorde färdigt din tut x) jaja ha d gött x)

Login box tutorial (Using valid XHTML & CSS)

Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)

Re: Login box tutorial (Using valid XHTML & CSS)