|
 MariaPia's HTML in 5 Minutes® & Tools - <HTML Webrings> <Home> Updated June 12, 2006 |
| Do this |
Type this |
Note this | |
|
Open the <HTML Generator> tool.
|
Enter a little information in some of the boxes. Click Generate Source. See your code in the bottom box. Continue entering code and generating source (no need to clear the box). View results each time.
|
Copy and paste* this code into a simple text editor like Notepad. Save to your Desktop as "myfirst.html". Close, double click and view in your Browser offline or online. |
| Open the <Table Generator> tool. |
Select variables and View Code. (Leave all these Windows open at the same time, and switch among them.) Copy and paste the code into the center of your 'HTML Generator' code anywhere below the BODY tag, type your information between the TD tags only and View. <Simple sample.> |
When satisfied, copy all and paste into Notepad, overwriting the code in 'myfirst.html'. Go online, copy into your Web Host's HTML page and you have a webpage. |
| *To copy and paste |
Swipe mouse down through the text with left button pressed. When highlighted, right-click on top of highlighted text. Select "Copy". Move to Notepad. Right-click. Select "Paste". |
Try again if it fails or you lose the highlight. It takes a little practice, but is a useful skill. | |
| Concludes Generation 1® - HTML in 5 Minutes® - Tools follow (all windows may be left open): |
|
|
| MariaPia's GENERATION 2® - Site is a week old, practice HTML |
| Try this |
Do this |
Note this | |
| Experiment with other tags. Try CENTER, IMG, ALIGN, BACKGROUND, FONT SIZE, FONT COLOR or OL for starters. |
See <HTML Wizards> for the best list of HTML tags. It doesn't tell you how to use them, though. Try <Ziff Davis> if you want a little description.
|
These tags add sophistication. Note that some have closing tags, like CENTER and /CENTER. |
| Place a PICTURE OR ANIMATION on your page. |
Right click any .GIF or .JPG picture you like on the Web (respecting copyright), select Save Picture, and upload to your site (using the FTP upload button provided to you on your Website Host's page for edit/creation of pages). Then use the IMG tag on your page. |
People enjoy pictures on your page, but balance it against long load times. Select small pictures or resize them. Or see <MariaPia's Animations> to see how to make your own. |
| Add a BUTTON. |
Buttons have several uses: opening a new page, sending the visitor elsewhere, opening email, and so forth. |
See <MariaPia's Forms> for a good list, examples and code! |
|
|
| |
|
| MariaPia's GENERATION 3® - Site is 3 months old, prepare for traffic |
| Try this |
Do this |
Note this |
|
| Add internal improvements. |
Use MariaPia's Guides or links for these additions:
Start making SUBDIRECTORIES. See <Web Guide>
<Create a banner> with a new logo.
Get instructions for adding a Guestbook from your Host's main page.
Add a <Message Board> from a site like Inside The Web.
|
These activities prepare you to maintain your site efficiently. |
| Open <Meta Tag Generator> tool. |
Create tags and copy/paste into the HEAD section of your page.
|
Meta Tags are are used by Search Engines to find and categorize your site. Now you are ready for the following step.
|
| Get the word out about your site. |
· Launch your BANNER at <LinkExchange>, for example.
· See <155 Ways To Get Hits> to submit your site.
· Apply to your Host for special listings or contests. See your Host's advertisements.
· Visit other sites' guestbooks, make positive comments, and leave your URL behind.
|
People will visit your site and write to you ... if you make it available to them.
|
|
|
| |
|
| MariaPia's GENERATION 4® - You're hooked on HTML, now branch out
|
| Try this |
Do this |
Note this | |
| Try a simple JAVASCRIPT (not Java applets). Open the <JavaScript Generator> and view scripts. |
There are a couple dozen on <MariaPia's JavaScripts> that are public domain. Right-click on the page, select View Source, and copy just the section(s) that you need for one script at a time. |
Follow the instructions embedded in comments surrounding the code. Some code is in the BODY section, and some may be in the HEAD section, too. CAUTION: Older machines and MACs cannot see Javascript. |
| Experiment with a FRAME. |
Today's generation of framed pages is without borders. See www.postofficeonline.com, for example. Note there is one or no Scrollbar. Visit <Ziff Davis> for a tutorial. |
CAUTION: These are tough to learn, but you will get it. Some visitors may have trouble using Frames or may simply dislike them. You will often see "Framed version or No Frames". |
| Add an IMAGE MAP. |
For a discussion and simple example to learn from, see <MariaPia's Image Maps>. You click in different places on a picture and are transported to different pages. |
Interesting addition to a page. Simpler than you think. |
| Use a STYLESHEET. |
See <MariaPia's Stylesheets> for this simple, elegant, useful, timesaving, easy technique . . . please! Make all your pages follow the same scheme. |
Excellent scripting experience and, again, easier than you think. However, they are Javascipt and the older machines or MACs cannot appreciate them. But don't miss the experience. |
|
| Concludes Generational Approach to HTML® |
| |
|
| REFERENCE
|
| Look here |
For this |
Note this |
|
| Complete set of MariaPia's Guides® |
|
These MariaPia's Designs pages will give you all the rest of the tools you need. Please <write> or put a note in the <guestbook> with questions. |
|
|