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

Resources

This first blog entry is an overview of the process, including links for necessary tools.

Note: When you make your own blog on blogger.com or any other free blog site, make sure to select the HTML tab (not Compose) and use the same markup tags that you have learned to use from w3schools.com. Get into the habit of using HTML whenever you have the opportunity for practice, including email markup. Always look for the HTML tab. If you try HTML mark-up for email, send yourself a test copy first to see how your mark-up will appear to the recipient.

Here are the free online resources I use. Some of them offer applications to download.

The Home for The Pages

Get a domain. Find a host to register a domain (something.com) for you and host it for a total of not much over 100.00 per year. I don't spend more than about 150.00 per year total on my web sites. My favorite most economical host provider, giving me email accounts, online space, tutorials, and free applications: bluehost.com

Free Tutorials

Start learning a little code. If all you need is a simple business-card web page, you can do it with HTML (hypertext markup language for content) and CSS (cascading style sheets for layout and appearance). If you want to interact with your users, maybe play games or do calculations for them, you will need at least some Javascript. If you want to master the universe online, all you need is PHP (hypertext preprocessor) and MySQL (a free open source structured query language). PHP is a comprehensive programming language to get the most out of online computing, not only taking the place of Javascript, it is used to create the most dynamic web pages. (It is a server-side language, unlike Javascript, meaning that it processes code on your server before it gets to your user's machine. Javascript is processed on your user's machine, which saves your server processing work, but takes the code out of your total control.) Experts use PHP to instantaneously build unique web pages depending on user input. For the most interactive web pages, you need a structured query language like MySQL to create and manage databases for online use, for example for product inventory records or customer data storage. My go-to online reference for basic HTML, CSS, Javascript, PHP, and MySQL: w3schools.com

A Word Processor for Web Pages

Start writing code. Download a text editor. Probably the most popular free text-editing program for writing and editing in all the high-scripting languages for the internet: notepad-plus-plus.com

Learning Models

Find learning examples. Go to any web page, at first the simpler the better, especially private pages like the one you want to make. Find the page source option in your specific browser. In Google Chrome, in the far upper right, select the drop down menu option for Tools and then View source. You may have to hunt for this view option in other browsers. (In later versions of Internet Explorer you have to use the Developer Tools in Settings. In Firefox, you can prefix any URL with view-source: such as view-source:http://www.eslwise.com). Then you can see the HTML markup. The more commercial the site, the more complex the mark-up. Keep in mind that what you see is how your browser renders the page on your computer, not how the page is originally written, so viewing the source of pages with "server-side" script will not show you that script. But you will learn a lot of basic HTML this way, and you will see examples of all kinds of poor markup, so don't imitate everything you see!

Testing Pages

If your page inludes only HTML markup, and the images and CSS exist in the same folder on your local machine, open that folder and try double clicking on your index.html file. If you are lucky, your browser will show you what index.html will look like online. I am able to do this because Google Chrome is my default browser. Maybe Firefox will work too. Let me know if it does. :)

Publishing

Upload pages to your remote folder with your host. Download an FTP (file transfer protocol) application. An extremely popular free application is from the Mozilla people: filezilla

Perfecting

Check for errors in your code. As you become more experienced and use more third-party plug-ins, you will know the difference between a serious fundamental code error and code that certain internet authorities just don't approve of yet but still work. A lot of bad code will slow or crash the pages you want to serve to users. A big operator online for validation: w3validator.org

Tracking

See the traffic your pages get. An essential tool: Google Analytics