Quick and Dirty Guide to Making a Madden Franchise Site

The following was written up in 2003. So much has changed that I'm not sure this is of any use, but here it is anyway.

Before we begin I'll point out a few things:

• All of the layout examples are done using tables. Anyone reading this that knows about current webdesign knows this is a Bad Thing^tm, as do I. But, at this point, CSS is a bitch to use for layouts for a novice, so I'd rather make my life easier and use tables since they Just Work^tm
• You're free to use (and modify) the example layouts I present in this tutorial. It's not cool to rip off the design of my Chargers site. It might not be brilliant, but I spent a lot of time creating it, so just respect that and come up with a design of your own if you don't like my layout examples.
• Like most people, I'm a busy guy, so if this tutorial seems rushed or half-assed, I apologize, but I don't have the time to put together a really top notch one.

-Things You'll Need-

• A team with which you'll be playing a Madden franchise
• Web hosting. There are many free ones. I don't keep up with them. Hit up Google
• An idea of what information you'll put on your site
• A text editor
• A little patience and a working knowledge of English

-The World Wide Web is Paved With HTML-

I have no idea how many people are left that haven't heard of HTML, but if you haven't until now, welcome to a wonderful little technology. HTML stands for Hyper-Text Markup Language. "Hyper-Text" is the links you click everyday while on the web. "Markup" refers to the fact that you use HTML 'tags' to markup your content, so it can be displayed in a browser. Using HTML isn't programming, (sorry to say) and it's also very easy; I've taught HTML to 8 year olds (seriously). Anyway, none of that really matters to be able to use it. I'm going to offer a little intro to HTML here, but nothing too big. Half the web is devoted to HTML tutorials, so I don't really need to retool that. If you already know some HTML and are just looking for some assistance with making an actual site, you can skip ahead, of course.

Note:

All of my HTML examples will be on separate pages. To view the HTML for the examples just right click your mouse and choose "View Source".

-The Standard HTML Page-

Firstly, HTML is written as plain text. I use a text editor called EditPlus, but you can just use Notepad if you like. Don't use a word processor, use a text editor. Save your files with an .html extension. The main page of your site should be called index.html. Browser's automatically load that file when you hit a website. That's why you can type in www.maddenmania.com instead of www.maddenmania.com/index.html

Every HTML page starts with a common framework of HTML tags. View the standard HTML template here.
The <title></title> tags surround the text that you want to show up in the title bar of the browser. Everything you want to show up in the browser goes inbetween the body tags.

Tags

Pretty much all of HTML is made up of tags. Anything inside of these brackets: < > is a tag. Everything that isn't a tag is just plain old fashioned English (or whatever language you're writing the page in). All tags (ok, all but one or two) begin with the form:
< tag name >
and end with the form:
</ tag name >.
Tags surround the text that they are modifying (or rather, marking up). I'll start with the really simply tags and you'll get the idea of how to use tags in general.

-A Note On Linebreaks and Whitespace-

When your HTML is loaded into a browser, the browser pays absolutely no attention to how many times you've hit the enter key (to start a new line) or how many times you've pressed the spacebar or tab key (to indent a paragraph, perhaps). If I hit the space bar 12 times before starting a new sentence, there will still only be one space when it is rendered in the browser. Similarly tabs are displayed as a single space. When you hit enter it is also rendered as a single space. Luckily enough HTML provides us with convenient ways to start a new line. The easiest is the linebreak tag: <br> which works exactly like hitting enter does in Notepad. The other is a set of tags called the paragraph tags: <p></p> Which put a blank space before and after whatever text is inside the tags.

-Let's Start With The Easy Tags-

Let's look at what HTML is required to reproduce the following sentence:

In week 9, the 49ers were able to beat the heavily favoured Cardinals 42-0.

There are different HTML tags being used to create that paragraph. You can probably pick out what the three are, even without HTML knowledge. You can see the week # is bolded, the team names are italicized, and the score is underlined. The tags for doing these simple manipulations of text are all easy. I also centered the paragraph and wrapped it in paragraph tags so you can see how those are used. You can see the HTML for the above sentence here

-Headings/Titles-

HTML provides an easy way to insert headings (exactly like the ones I've been using in this tutorial) into your websites. You can use the following tags:

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

To get the following output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

-Links-

Links look a little wierd at first, but they aren't difficult to use. To make a link to MaddenMania, for instance, we'd write this:

<a href="http://www.maddenmania.com">MaddenMania</a>

And we'd get a link like so: MaddenMania
If I wanted to provide a link back to the front page of my site, I'd write this:

<a href="index.php">Home</a>

And I'd get this: Home

Note: When linking to a website that isn't part of your own (MaddenMania, EASports.com, etc.) you have to include the http:// in the link. Otherwise you'll get a link like this one: Broken MaddenMania Link

Images

What you'll need

• An image in either .jpg, .gif, or .png format.
• The name and location of the file.

The tag for inserting an image is one of the few that doesn't have a closing tag. The tag is really easy to use:

<img src="image_example.jpg">

Using the above you'll get:

Tables

In the current incarnation of HTML tables are for, unsurprisingly, tabluar data. Things like the list of stats for all NFL QBs, that kind of thing. In this section you're going to learn the basics of using tables, and it will all be in the spirit of correctness. When we get down to designing sites, I'll be using tables for layouts. As I said at the top, it's not really the correct way anymore. But dammit, it's easier and you'll run into fewer problems, so I'm going to do it anyway.

Creating tables is a multi-step process. There are three sets of tags you have to use to create a table: <table></table>, <tr></tr>, and <td></d>. The table tags, of course, wrap the entire table, the tr tags stand for Table Rows, and wrap each row in your table, and the td tags stand for Table Data, and wrap each cell in your table. Let's look at an example table:

Cell #1	Cell #2
Cell #3	Cell #4

The above table has two rows, and 4 cells. Tables have no border by default, but I've added a border of size 1, to make it easer to see how things are working. To do this I added border="1" to the table tag. To view the HTML for the table click here.

You can see in the HTML that tr tags each wrap a set of two table cells (td tags). Tables in HTML are always layed out via rows, not columns. There is now way to organize a table by columns via HTML. If you are going to use tables for layouts, you'll need a few more tricks. The first is using the colspan and rowspan properties to manipulate tables. An example:

Cell #1
Cell #2	Cell #3	Cell #4

In this example the top cell spans the bottom three cells. I did this via adding colspan="3" to the td tag of the top cell. I also added align="center" to center the cell's text in the cell. You can see how this was all done here. Similarly you can use rowspan to have a cell span rows like so. You can see in the rowspan example, that each cell has its own row, except the first and second which share a row (the first row).

Visual Style Of The Site

For a long time the visual style of a site was modified using properties in the body tag, but that is no longer the case. A nifty little invention called CSS has come along, and it provides more power than HTML has ever had. It's a little bit more daunting, but I'll explain enough so that you can set the background color of your site, the text color, and the color of links. From there, you're on your own to explore CSS.

'Connecting' Your HTML to CSS

CSS is best put in a separate file (with the extension .css). Typically, I just name my CSS files 'style.css'. To 'connect' an HTML file to the CSS you'll need to add the follow in directly above the title tags in the HTML file, like so:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>

You don't have to understand all of that, all it is doing is telling the browser is that any of the CSS that is used in the HTML document, is coming from style.css

A CSS document is divided into elements, that have a name and a set of attributes. Inside your HTML document you can access these elements via the 'class' property. However, all I'm going to show you how to use are the built in elements for setting the visual style of links on your site, and the overall style of the site. The following CSS snippet would set the background color of a site to black, and the text to white:

body
{
	background-color:	rgb(0, 0, 0);
	color:			rgb(255, 255, 255);
}
			

"background-color" is a property for, you guessed it, setting the background color. You can put any three values between 0-255 inside rgb(); This works the same as the color picker in Madden PC, or on any graphics program for Windows. "color" sets the text color of the entire page.

The following is a snippet directly from the style sheet (the CSS file) being used on the website you are viewing. It shows how to set a font family for the page, and also shows how to set attributes for links, visited links, and for when the mouse hovers over a link:

body
{
	background-color:	rgb(100, 200, 100);
	font-family:		verdana,sans-serif;
}

a
{
	color:			rgb(255, 255, 255);
	text-decoration:	none;
}

a:visited
{
	color:			rgb(75, 255, 75);
	text-decoration:	none;
}

a:hover
{
	text-decoration:	underline;
}

Visual Styles In Tables

If we're going to use tables for our site layouts, we better know how to change the colors and other visual elements of a table. I'll show you how to do this with CSS, and that will give you an idea on how to use CSS on other HTML elements.

Let's start with the table from our colspan example and make the background white, and the text blue:

Cell #1
Cell #2	Cell #3	Cell #4

To do this, I added class="whiteTable" to the first table tag, and then added the following to the CSS file:

.whiteTable
{
	background-color:	rgb(255, 255, 255);
	color:			rgb(0, 0, 200);
}

What we've done is create a visual element in CSS called "whiteTable" (the period in front is important), and then we've applied that visual style to our table by using class="whiteTable".

Let's, leave the background white, but make the top cell red, and cells 2 and 4 blue. We'll also change the font color in these cells, so it's still readable.

Cell #1
Cell #2	Cell #3	Cell #4

Now, this looks bloddy awful visually, but it demonstrates how we can manipulate the visual style of a table using CSS.

Finally, I'll show you how to give your tables a border, that looks nicer than the default HTML border:

Cell #1
Cell #2	Cell #3	Cell #4

I'll not talk much about borders, because they are pretty simple to use and play with. The HTML for all the above tables can be found here and the CSS file can be found here.

CSS is a pretty complicated beast, and there are quite a few properties you can assign to almost any element. The idea behind the two-headed beast of HTML and CSS is that you separate the visual style of your website from the content. It allows you to do things like what I've done on this site, where you can select between many different visual styles and layouts on the fly. That was not possible before CSS came along. A more practical application would be to offer printable versions of your content. It's possible to simply divide your HTML into various divisions (using the <div> tag), but it's a pain in the butt to work with, so I'm not going to try to talk about in this tutorial (half the layouts I try to make come about via trial and error. I'm no expert).

That concludes what I'm going to talk about relating to HTML and CSS. I haven't really introduced much, but it should get you comfortable enough to get started and then pursue further questions via one of the many websites out there (that all do a better job than I). The site I use while working on web content is W3 Schools Online Web Tutorials. They'll teach you everything you need to know, and more, about web design.

Let's Get to Designing a Franchise Site...