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