Tyler's Blog - Making a static calendar using HTML

Sunday, August 2nd, 2009

Making a static calendar using HTML

This post is part of my Web Development Tutorial series.

In the last tutorial you set up your development environment. Now it's time to actually start coding. The first thing you need to know to build a website is how websites actually work. I'll start with an overview, then I'll give a brief summary of some important HTML tags, and then we'll dive into the actual code.

How websites work

I'm going to go over what makes a basic website work. By "basic", I mean there there aren't any fancy plugins (like flash games or video). Most websites are made up of three main languages: HTML, CSS, and Javascript.

In this tutorial, we're just going to deal with HTML. We'll get to the other ones in future posts, but HTML is the programming language that defines the most basic and important aspects of a website: the content.

So what is HTML? It stands for "Hypertext Markup Language" and it's really just a system that lets you tell a web browser what should be included in a web page. HTML is made up of "tags" which are basically reserved words that mean special things to a web browser. I'll go over the most common tags later on.

Probably the biggest misunderstanding about HTML (and websites in general) is where the code is actually running. HTML is really just text that is sent to a web browser. So when you go to www.yahoo.com, yahoo sends you back a file with plain text. That file uses HTML tags to tell your browser what the website should look like. The main takeaway here is that HTML does not run on the server. It's nothing more than text that your computer interprets to create a webpage.

HTML Basics

All of this will seem pretty crazy until you actually see some code. If you feel like you're completely lost, it might help to skip ahead and take a look at the final version of the code for this tutorial.

There's a lot to learn about HTML, but there's no better way to learn than getting your hands dirty. Keep in mind though that I'm not really giving you an complete lesson here, so there will be holes that you'll have to fill later as you come across new problems.

Ok, so like I said, HTML uses tags. A tag starts with a "less than" sign (<) and ends with a "greater than" sign (>). For example, a paragraph tag looks like this: "<p>". Most tags need to be closed with a similar tag starting with "</". So to write a paragraph of text, you'd type:

<p>This is the sample text</p>

This same format is used for any HTML element that can contain other things inside. This might be confusing, but it will make sense soon enough.

Tags can also have attributes. Attributes are included in the opening tag. There are lots of different types of attributes, but just as an example, here's what a paragraph tag looks like if you want to use the "style" attribute to make the text color red, and the "align" attribute to center the text:

<p style='color:red' align='center'>This is the sample text </p>

While we're here, I should mention that single quotes (') and double quotes (") are both interpreted the same way in HTML tags. I'm completely inconsistent with which one I use, so please don't be confused. They mean the same thing. Just make sure that if you open an attribute with a certain type of quotation, you close it with the same type.

One more thing about tags. Some tags don't need to be closed. The reason you need to close a paragraph tag is because there is text inside and the browser needs to know when the paragraph is finished. Some tags don't have any content inside, so you treat them a little different. For example, the line break tag goes to a new line (like hitting "enter" in a text editor). Because it just goes to the next line and that's the end of it, line break tags are written like this: "<br />".

Notice that instead of having a closing tag, there's a "/" at the end. That tells the web browser not to look for a closing tag. That slash isn't actually required, but it's considered good practice to use it.

Ok, so that might not have made any sense, but keep reading anyway. Here are some of the common tags. Once again, this won't make sense until we get to the code, but you'll want to refer to this list when you forget something:

<p></p> - create a paragraph of text
<h1></h1> - this is the headline tag. Text inside will be very large. There's also h2 through h5 tags for smaller headline text.
<br /> - this starts a new line of text.
<div></div> - This is a pretty complicated element, but for now, think of it as a generic wrapper to put around things. I'll explain this more in some other tutorial.
<table></table> - If you need to make a grid, use a table just like you would in Word
<tr></tr> - "Table Row" - this tag opens rows inside of a table
<th></th> - "Table Header" - this tag opens a cell which will be the header of a column in a table
<td></td> - "Table Data" - this is just a normal cell in the table
<img /> - This includes an image file in your html
<a></a> - The "anchor" tag is how you create hyperlinks to other pages and websites.

There are way more tags than this, but you won't need to use any of them in this tutorial. For that matter, you won't even use these all in this tutorial, but I included them just to point you in the right direction if you want to learn more on your own.

Alright, it's go time.

Writing the Code

You should have set up your dev environment in the last tutorial so we're ready to start writing your calendar application. This is going to display a basic month view of the calendar. The first thing to do is set up the basic HTML file. Go to your index.php file and delete what you've got there. Replace it with this:

<html>
	<head>
		<title>My Calendar</title>
	</head>
	<body>
	</body>
</html>

You may be thinking that I never told you about the html, head, title, or body tags. That's because you always use them exactly like this. An HTML file always starts and ends with the "html" tags (to tell the browser that this is an HTML file). Inside that tag you see first a "head" and then a "body" tag. The "title" tag inside the head tells the browser what to call this page in the bar at the top of the browser.

So even if you don't understand what you've got in your index.php file yet, it doesn't matter because this exact same thing needs to go in every HTML file. You never need to get clever and change this.

Everything that you see on an HTML page goes in between the "body" tags. From now on, when I say you should type something, assume I mean you should put it in the body.

If you go to "http://calendardev" in a web browser, you should see a blank white page with "My Calendar" in as the name of the browser and in the start menu.

The first thing we'll do is make a header for the page. Add this to the file:

<h1>My Calendar: August 2009</h1>

Save index.php and reload the page in your browser. In the future, assume that after making a change to a file, you need to save it and reload the browser before the change will appear.

Your blank white page should now have large text saying "My Calendar: August 2009" at the top. So let's go over what you just did. Remember that above I said "h1" is the tag used to describe a headline. By surrounding the text with the h1 tag, you told the browser that you want to display that text as a headline and that's what you got.

The calendar itself needs 7 columns and 7 rows (including the headers). Which tag from above do you think is good for creating this layout? That's right, it's the "table" tag. But first, a quick aside:

There's an ongoing debate among web developers about whether or not table tags are ok to use. Some people just hate them for some reason. If one of those people sees your code and criticizes you for using tables, kick that person square in the nuts and tell them to shut the hell up.

Ok, so how do we set up the table? Tables are defined one row at a time, so you'll need to first make the table open and close tags. Then add seven opening and closing "tr" tags. This creates the seven rows. The first row will be headers, which are defined with the "th" tag. So inside the first "<tr></tr>", put seven "<th></th>" tags with the day of the week inside.

Now add seven "<td></td>" tags inside each of the remaining six "tr" tags. If you understand how this structure works, go ahead and put in the numbers for the appropriate days. If you don't know what I'm talking about, here's what the code should look like.

If you did everything correctly, you should see something like this:

I'm going to stop here because I think this tutorial is already too long. This calendar is obviously very basic, but we'll improve on it later. In the meantime, feel free to play around with the HTML on your own. Try to use online resources to figure out how you can use attributes to change how this calendar looks.

As always, post questions in the comments and I'll do what I can to help.

Posted by Tyler King

Tags: tutorial, web development, building a website from scratch

This post has 0 Comments

About this site

Hi, I'm Tyler King and this is my blog. It's about programming, graphic design, UI design, and anything else related to software development. You can read this post to learn a little bit more about what I'm trying to do here.

If you're interested in learning more about me, check out my Portfolio, Bio or Resume.

Tips

If you have any feedback about the site or you have a topic you'd like me to write about, send an email to tips@TylerKing.net.