An E-Card On Your Website
| In this tutorial you will create an e-card greeting webpage for your website. Just about everyone online has sent or received an online e-card greeting. But what most people don't think about is how it works. When you send an e-card greeting, you don't really send someone the actual e-card. You send them an email message that contains a link to the webpage that displays the online e-card greeting. These e-card web pages are made from simple HTML code. I thought that it would be a nice holiday project to create your very own e-card greeting for your website. Click here to view the finished e-card. Of course, your e-card will be nicer than those commercial e-cards because it won't have all that advertising attached. And you can tell all your family and friends that you made it yourself. Just like any online e-card, you will be able to email the web address for your e-card to everyone on your list. But you will need some holiday web graphics for this e-card. So I've made a nice background image for the webpage and a small "Season's Greetings" animation. Let's make a special folder for your online e-card and call this folder "Holiday". Then you can put the images and the webpage itself in this folder and upload the whole thing to your website. When the holidays are over, you can delete the folder and it won't have any affect on your main website at all. Download these images into your "Holiday" folder. Right click on the images below and save to your folder.
OK, open your text editor and let's get started. Step 1. Starter HTML. Write the basic HTML code that goes on every HTML webpage. Need help? Step 2. A title for your e-card. Type the title for your e-card between the <title> and </title> tags. Step 3. Meta tags. For this assignment we are not concerned with search engines finding and listing this webpage so you can leave the values for the meta tags blank (""). Step 4. Body tag. One of the images that you downloaded was a background image for your e-card webpage. It was called SeasonsGreetingsbg.jpg. So let's add the background attribute to the body tag.
Step 5. Let's make a table. We will use a simple HTML table that has three rows, one table cell in each row, and the border set to zero. We also need to set the align attribute to center and the valign attribute to bottom for each table cell. Finally we want the table to 100 % of the width of the webpage. Need help? Step 6. Add the animation. Now you are ready to add the animation that you downloaded. (SeasonsGreetings.gif) As you can see the animation is a gif file and is treated like any gif image file by the browser. You will put this animated image in the second row of the table. Do you remember the HTML code for an image?
 indicates that the code is wrapped to a second line and should really be all on one line.Next → | |||||
This site needs an editor - click to learn more!
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.
