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.
