We’re going to start by assuming that you’ve installed Expression Engine successfully. If you haven’t, then you’re not in right place for technical support. Try referring to the installation instructions, or if you’re stuck, the Expression Engine forum for installation problems.

This tutorial is going to show you how to create your own personal webpage using basic HTML, introducing you to the concept of templates and template groups. So login into the control panel, and get ready for some toasty action!

Background Information

This tutorial takes you through the basic process of creating a HTML file within a template and displaying it on screen. Most websites, especially for businesses and other organisations have many things in common; they all have a logo, they’ll all have a heading, some text, a menu, and a footer. In this tutorial, we set about writing our website and the kind of elements it will have. In tutorial 2, we will show you how easy it is to take the results of this tutorial and make it look completely different.

As a site grows, you’re going to have more and more pages, all with the same common elements. This is where Expression Engine can come into its own. Future tutorials will show you how, by converting the content of your pages into a weblog (I use weblog to mean data container, rather than an online diary or journal), you can quickly modify the look of an entire site by just changing a single file.

Then, I’ll show you how you can set-up members so that colleagues, family or friends can write content for your site, leaving you to get on with designing the site.

But first, writing a HTML file…

Instructions

• Step 1: In order to create a webpage, you need to create a template group in Expression Engine. Click the templates button (shown below) at the top of your control panel.

• Step 2: You should now see, at the top right of your screen, the option to create a new template (shown below). Click this.

• Step 3: You'll see an option to name your template group. You'll want to choose a name that is meaningful. Since this is the front page of your site, you may want to call it "site" or "frontpage".

• Step 4: If you want this page to be the page everyone sees first, then check the box to make it your site's home page. If you already have a site up and running, leave this unchecked. If you're using these tutorials to write your main site, then you may want to check this.

• Step 5: Hit submit and you'll be returned to the template screen. If you scroll to the bottom, you should now see your brand-new template group.

• Step 6: You can now view your template by going to www.yourdomain.com/index.php/yourtemplategroup. You should see a blank browser window just like mine. That's because we haven't written anything to display.

• This is a breakdown of how Expression Engine URLs correspond to templates and template groups. Note that you can rename your index.php file in apache using a .htaccess file. Find out how in the renaming main site file instructions. If you don't specify a template to load, Expression Engine will load the "index" template. If you don't specify a template group, Expression Engine will load the template set as your homepage (indicated by an asterix in the templates page of your control panel). Find out more by reading the template introduction in the Expression Engine manual.

• Step 7: Back in Expression Engine, you'll note that an index template has been created automatically (which cannot be deleted). This is what you could see in step 6. Now we're going to write something to display. Click "Edit" in the index row of your template group.

• Step 8: Right now, you should see two large boxes. The big one is where you type the text to be displayed. The little one is where you type your own notes and reminders. It's a good idea to write your own notes in these boxes, since it will help remind you what a template does when you come back to it after a while.

• Step 9: Now it's time for some good old HTML. If you've already got a HTML page that you wish to use, then just paste it into the top box, else, why not follow my example? If you're unsure about any line in the following code, then roll your mouse over and a little pop-up should appear explaining what it means. You may wish to indent each line, so that opening and closing tags have the same indentation. That helps you to avoid making mistakes like opening but not closing a tag (or closing a tag that isn't open). Unfortunately I don't have the space to indent my html here.

• Step 10: You can now view your new template by going to www.yourdomain.com/index.php/yourtemplategroup again. At first glance, your page might appear blank. But wait! Look at the title bar at the top of the page. You should see whatever you wrote for your title. Compare your site with mine.

• Step 11: Now lets write some content. The trick to writing HTML is to identify everything you write. We do this by using <div> tags. So, for example, if you were writing a book, then you would want to indicate the chapter headers by writing <div id="chapterheader">. Remember, once again, that all open tags need to be closed, this time by using </div>.

• Step 12: Have another look at your template. You should notice that a heading has appeared. Compare your site with mine. Notice that we've identified the header div, as well as an outer div. You'll usually want to surround any logical writing with a div tag.

• Step 13: Okay, lets finish things off by writing a few words of introduction, and then a footer to say who wrote the site. Remember that you want to keep surrounding all the logical parts of the code with <div> tags.

• Step 14: Have yet another look at your template. You should see a bunch of the text you've written above. Compare your site with mine. It does look a tad rubbish right now, but that's because we haven't written a stylesheet to make it look good. That's our next tutorial!

Got something to add? Add your comment to the 7 already made

Written by Leonard on Saturday 1st May 2004