| Anyone serious about having a website needs to | | | | Don't worry if you make a mistake. If your change |
| know something about HTML, the computer code of | | | | was unfortunate, reopen the Notepad file by clicking |
| websites. | | | | the appropriate button at the bottom of your screen, |
| HTML is a simple language - although some native | | | | then, in Notepad, click "Edit/Undo" then "File/Save". |
| speakers would argue that so is Swahili - it is made up | | | | Refresh the browser and the boo-boo should go |
| of characters from your keyboard. No fancy | | | | away. |
| heiroglyphics. | | | | I will not be teaching HTML in this article. There are |
| Browser software, such as Internet Explorer or Mozilla | | | | great resources for learning HTML in depth at Poingo |
| Firefox, reads the HTML and creates a screen display | | | | Resources. |
| according to instructions conveyed within "tags" in the | | | | However, I will give you a few things to start with: |
| HTML. These tags tell the browser how to display text | | | | 1. All HTML "tags" begin and end with characters |
| and colored areas, and how to import and display | | | | known as "angle brackets", which are also used for |
| pictures in specified ways to create eye-pleasing web | | | | "greater than" or "less than" in math equations. I can't |
| pages. | | | | place them in this article because they might cause |
| You can view the HTML code of any web page by | | | | your browser to go wacky. I will use { and } in this |
| right-clicking on a blank area of the web page, then | | | | article instead to represent angle brackets. |
| selecting "View Source" or "View Page Source". A | | | | 2. All HTML files begin with {html} and end with {/html} |
| new window will open and you will see the HTML | | | | 3. HTML files have two main portions, "head" and |
| code. | | | | "body". The "head" portion begins with the tag {head} |
| You can learn HTML by saving this code to your | | | | and ends with the tag {/head}. |
| computer and experimenting with it. Pick a | | | | 4. The head contains a page title and "meta" data |
| simple-looking page to start with, preferably a home | | | | which is non-displayed information about the web page |
| page. Home pages are very often named "index.htm" | | | | itself. The "head" portion of the page is non-essential. |
| or "index.html." | | | | You can prove this to yourself: |
| With the source code visible on your screen, you can | | | | In the Notepad file, remove the {head} and {/head}tags |
| save the web page to your computer by clicking "File | | | | and everything between them. File/Save Notepad, |
| Save As" or "File/Save Page As". When you do this, | | | | refresh the browser, and see what happens. The |
| place it in a new folder. Thus will help keep your | | | | appearance might change if, for example, the head |
| learning project organized. | | | | contained a link to a separate style sheet, but the |
| You can tell your browser to read the version of the | | | | actual content should still be there. |
| locally saved file by clicking "File/Open" or "File/Open | | | | 5. The "body" portion begins with the tag {body} and |
| File" with the browser open, and browsing to the file | | | | ends with the tag {/body}. It contains your content, so it |
| you just saved. If you have a browser with tabbed | | | | is quite essential. |
| viewing, use a new tab for this so you can refer back | | | | 6. In addition to the HTML tags described above, there |
| to the original version hosted on the internet. | | | | are many other tags which format text, create tables, |
| When you open the local version, you may notice | | | | link to pictures, link to other sites and even open |
| mising graphics - the pictures may not have saved | | | | pre-written emails in your own email software. |
| along with the HTML. If so, go back to the web | | | | 7. Many tags, like the ones above, have starting and |
| version. Save each missing graphic individually by right | | | | ending tags. For example, if I wanted to bold a portion |
| clicking on the graphic and selecting "Save Image As", | | | | of text, I would first place a {b} tag before the text, |
| and save it in the folder you created earlier. Do not | | | | then follow the bolded text with {/b}. |
| change the file name of the picture. | | | | 8. Other tags don't require an ending such as {br}, |
| Go back to the browser view of the locally saved | | | | which gives you a line break, and {p} which starts a |
| web page and refresh the screen by clicking the | | | | new paragraph. |
| "Refresh" button or by pressing F5. If all goes well, the | | | | Mutilate Web Page Now! |
| missing picture should render. An exception could be if, | | | | You now have enough information to be dangerous. |
| in the original website folder structure, the images are | | | | Let's put it to use. |
| saved in a subfolder. | | | | Lesson One - Create Obscene Text |
| If you were advanced, you would create an identical | | | | In the Notepad file, look for a chunk of recognizable |
| subfolder and save the images there. But since you | | | | text in the body section. Change the text to something |
| are a newbie, forget about it and live with what you | | | | funny, stupid or obscene, because education should be |
| have. | | | | interesting. Click "File/Save" in Notepad and refresh the |
| Theft Complete! Get started... | | | | browser. Your funky text should display. You have |
| Now that you have recreated the web-based page | | | | now mutilated your first web page. Congratulations! |
| locally, you can learn by observing and modifying the | | | | Lesson Two - Bold Your Obscene Text |
| HTML. You will see the resulting change on the | | | | In the Notepad file place begin-bold {b} and unbold {/b} |
| displayed page. | | | | tags around some text. Save the Notepad file and |
| To do this, you will have the same HTML file open in | | | | refresh the browser. See how it looks. You have now |
| the browser and also in Notepad. The browser should | | | | gone boldly where you have not before. |
| be pointed to the local HTML file as described above. | | | | Lesson Three - Enlarge Your Obscene Text |
| Then, open Notepad and open the same HTML file in it. | | | | To make your text really big, try surrounding it with {h1} |
| At the bottom of the Notepad window, where it says | | | | and {/h1}. In addition to making your text ridiculously |
| "Files of Type:" Be sure to select "All Files". If you don't | | | | large, this tag tells search engines that you think this |
| do this, you will not even see the HTML file listed in the | | | | text is REALLY IMPORTANT!!! |
| browse window. | | | | Lesson Four - Disappear and Reappear a Picture |
| Arrange the browser window and Notepad window | | | | As we learned earlier, pictures are separate files. They |
| so you can see both. I like to keep the browser | | | | are invoked by a special tag which can look like this: |
| maximized, and Notepad filling the bottom half of the | | | | {img src=" Find something which looks like this and |
| screen "in front" of it. When I make changes in the | | | | delete the entire expression, including both brackets. |
| Notepad file, I click "File/Save", then click the refresh | | | | Save Notepad and refresh the browser. Goodbye |
| button on the browser. The Notepad window | | | | picture! |
| minimizes by itself and you will have just enough time | | | | Now go back to Notepad and click "Edit/Undo". Again |
| to see the changes you made modified in the browser | | | | save Notepad and refresh the browser. Hello again! |
| display. | | | | Got the hang of it? Steal, mutilate and and learn. |