Username: Save?
Password:
Home Forum Links Search Login Register*
    News: Welcome to the TechnoWorldInc! Community!
Recent Updates
[March 06, 2024, 02:45:27 PM]

[March 06, 2024, 02:45:27 PM]

[March 06, 2024, 02:45:27 PM]

[March 06, 2024, 02:45:27 PM]

[February 14, 2024, 02:00:39 PM]

[February 14, 2024, 02:00:39 PM]

[February 14, 2024, 02:00:39 PM]

[February 14, 2024, 02:00:39 PM]

[February 08, 2024, 10:26:18 AM]

[February 08, 2024, 10:26:18 AM]

[February 08, 2024, 10:26:18 AM]

[February 08, 2024, 10:26:18 AM]

[November 27, 2023, 06:32:12 PM]
Subscriptions
Get Latest Tech Updates For Free!
Resources
   Travelikers
   Funistan
   PrettyGalz
   Techlap
   FreeThemes
   Videsta
   Glamistan
   BachatMela
   GlamGalz
   Techzug
   Vidsage
   Funzug
   WorldHostInc
   Funfani
   FilmyMama
   Uploaded.Tech
   MegaPixelShop
   Netens
   Funotic
   FreeJobsInc
   FilesPark
Participate in the fastest growing Technical Encyclopedia! This website is 100% Free. Please register or login using the login box above if you have already registered. You will need to be logged in to reply, make new topics and to access all the areas. Registration is free! Click Here To Register.
+ Techno World Inc - The Best Technical Encyclopedia Online! » Forum » THE TECHNO CLUB [ TECHNOWORLDINC.COM ] » Programming Zone » HTML
  Learn HTML Through Theft & Mutilation
Pages: [1]   Go Down
  Print  
Author Topic: Learn HTML Through Theft & Mutilation  (Read 1134 times)
Daniel Franklin
TWI Hero
**********


Karma: 3
Offline Offline

Posts: 16647


View Profile Email
Learn HTML Through Theft & Mutilation
« Posted: September 26, 2007, 01:58:38 PM »




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.

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."

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.

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.

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.

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.

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.

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 on the internet for learning HTML in depth. Do a word search on "learn HTML" or "HTML tags".

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 tag before the text, then follow the bolded text with .

8. Other tags don't require an ending such as
, which gives you a line break, and

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 and unbold 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!

Got the hang of it? Steal, mutilate and and learn.

Articles Source - Free Articles

Logged

Pages: [1]   Go Up
  Print  
 
Jump to:  

Copyright © 2006-2023 TechnoWorldInc.com. All Rights Reserved. Privacy Policy | Disclaimer
Page created in 0.099 seconds with 24 queries.