logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

An E-Card On Your Website

Guest Author - Diane Cipollo

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.


1. Animation:
SeasonsGreetings.gif

2. Background:
SeasonsGreetingsbg.jpg


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.

<body background="SeasonsGreetingsbg.jpg">


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?

<img src="SeasonsGreetings.gif" width="200" height="200"
border="0" alt="ECard">
Note--The arrow 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!

Add An+E%2DCard+On+Your+Website to Twitter Add An+E%2DCard+On+Your+Website to Facebook Add An+E%2DCard+On+Your+Website to MySpace Add An+E%2DCard+On+Your+Website to Del.icio.us Digg An+E%2DCard+On+Your+Website Add An+E%2DCard+On+Your+Website to Yahoo My Web Add An+E%2DCard+On+Your+Website to Google Bookmarks Add An+E%2DCard+On+Your+Website to Stumbleupon Add An+E%2DCard+On+Your+Website to Reddit




RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor