Build a Simple Business Card Page

We are going to start with a simple web page that has only html and body markup. No divisions. No header or footer containers. No side-bars. Just a background image (instead of a simple color) and some large colored text. You are going to practice using notepad++ to create and save html and css files. You are also going to see how different devices display your background image and text. This step by step article is intended only to get you STARTED. Then you will have something basic to modify on your own, based on what you learn from w3schools.com

1. Create a folder in My Documents with the same name as your web page. I will refer to this as the businesscard.com folder. (Web page creation involves various folders and applications all open at the same time. Get in the habit of minimizing ones not being used at the moment, or sizing them all to fit on your monitor. You will save time keeping everything open, but if you have an old computer your RAM may not be able to keep up with so much processing.) Minimize the businesscard.com folder so instead of hunting for it later, all you have to do is maximize it to make sure you saved to it correctly.
2. You will need a sample image to practice with, so download it from the link at the bottom of this post. Download the image to your businesscard.com folder. Check that folder to make sure road.jpg got downloaded to it. (My sample image dimensions are 976 x 1360 pixels. These dimensions happen to fit best on my smartphone, a Samsung Rugby Pro, held vertically. Later, I want you to see how this image looks on your desktop computer. This background image will help you start thinking about the problems of designing one website that looks good on both mobile devices and desktop computers.)
3. Copy the HTML 4.01 Transitional DOCTYPE markup from w3schools Doctypes. (It is not a waste of your time to find out a little about this first line of code. You are learning about the interactions between browsers and servers and browsers and users. So, maybe also on Wikipedia, read a little about what the doctype code does and why.)
4. Open Notepad++ or another text editor to a NEW file. Select HTML as the language. Paste the DOCTYPE at the very top of the file and save the file in your businesscard.com folder. Name the file index.html
5. Don't close index.html. Open another new file. Select CSS as the language. Save this empty file as businesscard.css in your businesscard.com folder, and don't close the file. Develop the habit of working on both the html file and the css file for your web page at the same time.
6. Optional: In your browser, to see what CSS does, play with the links you find on the left of this linked page: CSS Demo.
7. Back in your text editor in the open CSS file, paste the code you copied from the CSS Code box below. Save your changes to this CSS file but don't close it.
8. In your open HTML file, index.html, paste the code you copied from the HTML Code box below. Save your changes to this HTML file but don't close it.
9. Now you should be ready to either check your page with your own browser, or upload the entire contents of your businesscard.com folder to your public html folder at your domain. You can find my version for comparison at my version. Make sure to check my version on a mobile device too, so you can see how different devices "render" web page content differently. Notice that the wide view background image is grossly magnified and the top and bottom are chopped off.
10. If you downloaded the two alternative background images linked below, what CSS code do you need to change in your businesscard.css file so your index.html file displays one of the alternative background images?

CSS Code

html { min-height: 100%; background-image: url(road.jpg); background-repeat: no-repeat; background-position: center; } body { min-height:100%; } a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ h1 { color: green; }

HTML Code

<!--this is a comment in comment markup. This line is where your Doctype declaration should be in your index.html file. The carets, exclamation, and dashes prevent browsers from paying attention to the text inside these tags.--> <html> <head> <link href="businesscard.css" rel="stylesheet" type="text/css" > </head> <body> <h1>The Name of Your Business Here </h1> </body> </html>

Sample image for background: background

For alternative sample images for background to demonstrate some fun with GIMP (GNU Image Manipulation Program): background2 background3

Typical Mistakes I Still Make from Time to Time:

• White space above the doctype declaration
• Forgetting to SAVE changes made to files in notepad++
• In filezilla, uploading to the wrong folder on the domain server
• Forgetting to close an open markup tag, especially quotation marks
• A tiny little typo, like a comma instead of a period, that takes me forever to find.

Extra Reading:

• Aspect ratio calculator for resizing images: from andrew.hedges.name