| Home | Quickie | Links | Web Design | Music | Adventure | Photography |
| General Links | Web Design Links | Other Technical Links |
|
Below are two very basic exercises that will help you learn a bit about how to make a webpage, hands-on. I guarantee you can do both exercises within 15 minutes, even if you are merely a user of the internet. Web page design is not conceptually difficult. You can do this, right now.
I've been designing web pages for about 8 years, all of it using a text editor. HTML files are text files, by the way, even though they do some cool stuff, and though you may use a GUI (graphical user interface) program to create them. One of the first things you must learn is how to view a local page sitting on your computer. #1: Viewing and editing the bookmarks/favorites fileA great place to start is your browser's bookmark file, something you use all of the time, and naturally it will contain the beginnings of a personal web page anyway. How to Find the bookmarks/favorites fileIn Windows: Use the Windows Explorer program. The bookmark or favorites file is contained in Windows: Program Files folder; look inside either the Internet Explorer, Netscape or other browser's folder; it may be inside a Users folder, since most browsers these days can have more than one profile running. Use The Find or Search command in the start menu and search your local hard drives for files with names containing 'bookm' or fav'; or search for User or Profile or the name of your browser. Eventually you want to have the folder containing the bookmark or favorites file open.In MacOS: Use the Finder. The bookmark or favorites file is contained in the System Folder:Preferences:Netscape or System Folder:Preferences:Explorer folder (may be buried inside a User Profiles subfolder). Eventually you want to have the folder containing the bookmark or favorites file open. How to Make a Copy of the bookmarks/favorites file for this lessonIn MacOS: Make a copy of it (detailed directions below) and put it inside a desktop folder. For reasons which will become clear below, you don't want the file sitting on the desktop.Here's How: First, create the desktop folder. Then, hold down the option key while dragging the file from the source folder to the copy destination folder. Make sure it has a file suffix of .HTM or .HTML In Windows: First, create the desktop folder. Make a copy of it (detailed directins below) and put it inside a desktop directory/folder. For reasons which will become clear below, you don't want it sitting on the desktop. To 'control-drag' (hold down the control key while dragging the file from the source folder to the copy destination folder) the item. Make sure it has a file suffix of .HTM or .HTML Ready to Go?So now, all you need is
Here is a an example of my bookmark file Why do this? When you open the bookmark file as a plain HTML page, you can see how it displays, and how the browser is creating a different view for use inside the program. the code in this page isn't legal HTML, since it's missing some basic start tags like HTML, BODY, etc. However the contents are in HTML code. As long as you copied, instead of moved, the bookmark file, you can start playing with the code and learning by examining the file in a text editor. Use Notepad or MS Word on Windows, or use BBEdit Lite (a free download) and Simpletext on MacOS. This is how you start. Don't be afraid. erase everything and type something as an experiment. Refer to online web tutorials and learn a tiny bit of HTML and try it. Don't just read about HTML, your mind will quickly go numb. the only way to learn is hands-on. #2: View and use HTML source code from your favorite web pagesGo to your favorite web page, the one whose design you really like, and view the source (this command is usually in one of the menus).Save the file with a suffix of .html somewhere on your computer's hard drive (not the desktop, though; it will be easier if it's in a directory). Then, drag that file into your browser window from its place in Windows Explorer or MacOS Finder. Or use the Open File command of your favorite browser and open the saved HTML file and you will see the HTML code, probably without graphics. The reason those graphics don't appear is that the IMG tags use a 'source=""' setting that doesn't mention the hostname or IP address of the webserver, but instead, makes reference to filenames, and possibly directory names as well. OK, you are now about ready to use one my favorite rules of web design: Why code it when you can steal it? For your own non-commercial web design tasks, it's perfectly acceptable to use somebody else's code. Just save a copy so that you always have the original cool HTML that you liked so much. Then take copies of that file and play. You'll have to be very careful with any table, TR or TD tags you see. If you mess those up, you can keep the page from rendering. Remember that most HTML tags have opening and closing pairs. |