0 Learn HTML Through Theft & Mutilation

Hello again we meet in article about anyone serious about having a website needs to know something about HTML, the computer code of websites.

HTML is a simple language - although some native speakers would argue that so is Swahili - it is made up of characters from your keyboard. No fancy heiroglyphics.

You can view the HTML code of any web page by right-clicking on a blank area of the web page, then selecting "View Source" or "View Page Source". A new window will open and you will see the HTML code.

Browser software, such as Internet Explorer or Mozilla Firefox, reads the HTML and creates a screen display according to instructions conveyed within "tags" in the HTML. These tags tell the browser how to display text and colored areas, and how to import and display pictures in specified ways to create eye-pleasing web pages.

You can learn HTML by saving this code to your computer and experimenting with it. Pick a simple-looking page to start with, preferably a home page. Home pages are very often named "index.htm" or "index.html."

You can tell your browser to read the version of the locally saved file by clicking "File/Open" or "File/Open File" with the browser open, and browsing to the file you just saved. If you have a browser with tabbed viewing, use a new tab for this so you can refer back to the original version hosted on the internet.

With the source code visible on your screen, you can save the web page to your computer by clicking "File/Save As" or "File/Save Page As". When you do this, place it in a new folder. Thus will help keep your learning project organized.

When you open the local version, you may notice mising graphics - the pictures may not have saved along with the HTML. If so, go back to the web version. Save each missing graphic individually by right clicking on the graphic and selecting "Save Image As", and save it in the folder you created earlier. Do not change the file name of the picture.

If you were advanced, you would create an identical subfolder and save the images there. But since you are a newbie, forget about it and live with what you have.

Go back to the browser view of the locally saved web page and refresh the screen by clicking the "Refresh" button or by pressing F5. If all goes well, the missing picture should render. An exception could be if, in the original website folder structure, the images are saved in a subfolder.

Theft Complete! Get started...

Now that you have recreated the web-based page locally, you can learn by observing and modifying the HTML. You will see the resulting change on the displayed page.

To do this, you will have the same HTML file open in the browser and also in Notepad. The browser should be pointed to the local HTML file as described above. Then, open Notepad and open the same HTML file in it. At the bottom of the Notepad window, where it says "Files of Type:" Be sure to select "All Files". If you don't do this, you will not even see the HTML file listed in the browse window.

Arrange the browser window and Notepad window so you can see both. I like to keep the browser maximized, and Notepad filling the bottom half of the screen "in front" of it. When I make changes in the Notepad file, I click "File/Save", then click the refresh button on the browser. The Notepad window minimizes by itself and you will have just enough time to see the changes you made modified in the browser display.

Don't worry if you make a mistake. If your change was unfortunate, reopen the Notepad file by clicking the appropriate button at the bottom of your screen, then, in Notepad, click "Edit/Undo" then "File/Save". Refresh the browser and the boo-boo should go away.

I will not be teaching HTML in this article. There are great resources for learning HTML in depth at Poingo Resources.

However, I will give you a few things to start with:

1. All HTML "tags" begin and end with characters known as "angle brackets", which are also used for "greater than" or "less than" in math equations. I can't place them in this article because they might cause your browser to go wacky. I will use { and } in this article instead to represent angle brackets.

2. All HTML files begin with {html} and end with {/html}

3. HTML files have two main portions, "head" and "body". The "head" portion begins with the tag {head} and ends with the tag {/head}.

4. The head contains a page title and "meta" data which is non-displayed information about the web page itself. The "head" portion of the page is non-essential. You can prove this to yourself:

In the Notepad file, remove the {head} and {/head}tags and everything between them. File/Save Notepad, refresh the browser, and see what happens. The appearance might change if, for example, the head contained a link to a separate style sheet, but the actual content should still be there.

5. The "body" portion begins with the tag {body} and ends with the tag {/body}. It contains your content, so it is quite essential.

6. In addition to the HTML tags described above, there are many other tags which format text, create tables, link to pictures, link to other sites and even open pre-written emails in your own email software.

7. Many tags, like the ones above, have starting and ending tags. For example, if I wanted to bold a portion of text, I would first place a {b} tag before the text, then follow the bolded text with {/b}.

8. Other tags don't require an ending such as {br}, which gives you a line break, and {p} which starts a new paragraph.

Mutilate Web Page Now!

You now have enough information to be dangerous. Let's put it to use.

Lesson One - Create Obscene Text

In the Notepad file, look for a chunk of recognizable text in the body section. Change the text to something funny, stupid or obscene, because education should be interesting. Click "File/Save" in Notepad and refresh the browser. Your funky text should display. You have now mutilated your first web page. Congratulations!

Lesson Two - Bold Your Obscene Text

In the Notepad file place begin-bold {b} and unbold {/b} tags around some text. Save the Notepad file and refresh the browser. See how it looks. You have now gone boldly where you have not before.

Lesson Three - Enlarge Your Obscene Text

To make your text really big, try surrounding it with {h1} and {/h1}. In addition to making your text ridiculously large, this tag tells search engines that you think this text is REALLY IMPORTANT!!!

Lesson Four - Disappear and Reappear a Picture

As we learned earlier, pictures are separate files. They are invoked by a special tag which can look like this: <img src="http://www.my-ftp.com/images/westgate.jpg"> Find something which looks like this and delete the entire expression, including both brackets. Save Notepad and refresh the browser. Goodbye picture!

Now go back to Notepad and click "Edit/Undo". Again save Notepad and refresh the browser. Hello again!

Artikel Terkait