HTML 101
Updated September 11, 2003
Created September 10, 2003

Autogenerated Site Map
Search this Site!:
Search this site powered by FreeFind
Notes on programming in HTML.

Software?

vi (actually use vim because it color codes your document)
weblint -- weblint-1.020-8
htmlview -- htmlview-2.0.0-6
gimp -- gimp-1.2.3-9 -- gimp is great for doing image maps -- especially if you need a polygon. gimp will generate all the x,y pairs in image map form as you go happily clicking along.

Which editor to use:

I prefer to use a plain text editor to create and maintain my web pages.

I find that most all WYSIWYG (What You See Is What You Get) HTML editors just throw in all kinds of extra tags that just make it seem way too complicated to ever learn HTML. I have been told that dreamweaver doesn't put as many unnecessary tags into your HTML document.

HTML is really simple. Here is a set of tags to start with:

<html>
<head>
<title>My Page</title>
</head>
<body>
<center><h1>This is my page<h1></center>
</body>
</html>

Then you should learn about <br>, <hr>. Try putting a few on your own, they will provide line breaks and divider lines. You can see their liberal use throughout this page.

Also for me to show this to you so far, I have to put the following items: "&", "<", ">", and double quotes " in this web page as "&amp;", "&lt;", "&gt;", and "&quot;"

The following replace command is useful in vi:

This does this one line:
:s/&/\&amp;/g
:s/</\&lt;/g
:s/>/\&gt;/g

This does a range of lines:
:set nu
:3,5s/&/\&amp;/g

This does all lines
:%s/&/\&amp;/g

This does from beginning of doc. to here
:1,s/&/\&amp;/g

This does from here to end of this doc.
:,$s/&/\&amp;/g

Let's say you want to put <br> tags on all the lines or a range of lines:
:%s/$/<br>/
:8,10s/$/<br>/

Also there are fonts, sizes, colors. And bold, underline, subscript, and superscript.
<font size="5"> this text is in size 5 </font>
<font size="5"> this text is in blue </font>
this text is <b> bold </b>
this text is <u> underlined </u>
this text is <sup> superscript </sup>
this text is <sub> subscript </sub>
Another vi tip, here is a short help list for vi:
gg Jump to beginning of doc
G Jump to end of doc
/ Search for string
n Jump to next instance of string you searched for
N Jump to previous instance of string you searched for
:q! Let me out, I goofed! This is the "abort my edits" command.
:w Save my changes
:wq Save and exit
u Undo
CTRL+r Redo (redo an undo)
i or I Insert before cursor or Insert at beginning of line
a or A Append after cursor or Append at end of line
o or O Open a new line below or above the cursor
yy Yank (copy) this line
p or P paste below or above. can also be paste before or after depending on what was yanked.
dd or D Delete this line or Delete to end of line
2yy Yank (copy) 2 lines
10p paste 10 times
r or R replace 1 character or enter replace mode
Then there are tables, tr, td.

Let's say you want to create a table, so you start off with:
<table>

You need to close that table too, so (with your cursor on the <table> tag)
you do yy p a / ESC (yank, paste, append, forward slash character, escape key)

By typing the above yy p a / ESC, you create your closing table tag, so now you have:

<table>
</table>

Now you need a <tr> tag:

<table>
<tr>
</table>

Do the same yy p a / ESC for the <tr> tag:

<table>
<tr>
</tr>
</table>

And you need a <td> tag inside the <tr> tag. You can type in <td>
or to speed things up in the long run you can copy the <tr> tag,
paste it, then replace the "r" in "tr" with a "d" to make "td".
Here are 2 methods for copying, pasting, then changing the "r" to a "d":

yy p END LEFT r d
yy p $ h r d

Both methods are exactly the same until you are working in a session where END and LEFT aren't correctly mapped -- then you'll be glad you remember $ and h. The END/HOME/LEFT/RIGHT/UP/DOWN and other keys may not always be mapped correctly, so it is important to know about ^/$/h/l/k/j for maneuvering in vi.


<table>
<tr>
<td>
</tr>
</table>

And of course we still need a closing </td> tag, so it's time again for yy p a / ESC

<table>
<tr>
<td>
</td>
</tr>
</table>

Now let's say you know you want 2 columns, between the table row tags you need 2 sets of table data tags:

Quicker Coding Tips (place cursor on first TD tag then try one of the following):
M1) 2yy UP p
M2) 2yy k p
M3) V DOWN (to highlight the set of TD tags) y UP p
M4) V j (to highlight the set of TD tags) y k p

<table>

<tr>
<td>
</td>
<td>
</td>
</tr>

</table>

Now let's say you want 3 rows. Highlight the entire TR tag set (let's include the blank line after the tag set too), yank (copy), move up one, then do a "2 paste".

Quicker Coding Tips (with cursor on first TR tag do one of the following):
M1) V jjjjjj (to highlight from <tr> down to the blank line folowing </tr>) y k 2p
M2) 7yy UP 2p
M3) 7yy k 2p

<table>

<tr>
<td>
</td>
<td>
</td>
</tr>

<tr>
<td>
</td>
<td>
</td>
</tr>

<tr>
<td>
</td>
<td>
</td>
</tr>

</table>

So in summary you can easily convert an HTML open tag to a close tag with yy p a / ESC, you can copy/paste an old tag with yy p and then modify it with r (replace). Note that r replaces 1 character, while R (capital r) places you in replace mode. And finally you can duplicate a section of code by yanking (copying) and then specifying how many times you wish to paste it (be sure your cursor is positioned right before pasting).

If you are writing a web page about HTML tags, then the following 5 lines are very useful. Let's say I just finished adding new lines from 351 to 455 (vi can tell you by using :set nu) and they have HTML tags I want to show the reader. None of them will show until I make the following changes. The following changes will also add the <br> tag to the end of each lines. Also note that these lines (351 - 455) don't have any real HTML tags, only ones I want to show on the final page. Otherwise those tags would get converted just the same:

:351,455s/&/\&amp;/g
:351,455s/</\&lt;/g
:351,455s/>/\&gt;/g
:351,455s/"/\&quot;/g
:351,455s/$/<br>/




a href
a href="mailto:?&"

images
image maps
For doing image maps gimp will give you the polygon image map support you need. All you do is just click on the image and gimp will produce an html image map X,Y coordinate section for you, ready for you to cut/paste into your web page.

a name="section"
a href="#section"

ol, bl, ul, li

Page automation with shell scripts:
Nitely cron jobs that pick up new pages (find -newer ~/lastchecked.tmp / touch ~/lastchecked.tmp)
The new or updated pages are then merged with template header and footer files which display
date page created, last updated date, etc.
cgi pages can be created through bash (shell scripting)

More on vi
v Visual (highlighting) Mode, selects a character at a time
V Visual (highlighting) Mode, selects a line at a time
CTRL+v Visual (highlighting) Mode, selects a rectangular block
V = Will attempt to auto-indent the highlighted section based on rules for the detected type of document
gg=G or G=gg Auto indent the entire document
V > Indent the highlighted line(s) 1 time
V < Remove 1 indent from the highlighted line(s)
V 5> Indent the highlighted line(s) 5 times
? Reverse search (opposite of /)
i CTRL+t CTRL+t in insert mode will insert a tab at the front of this line (cursor does not have to be positioned at the front of this line)
V :s/.*/<li>&<\/li>/ This demonstrates running a substitute command against a range of lines without having to specify their line numbers. Merely highlight the appropriate lines with V (Visual Mode), then start the :s/// (substitute command). You will notice that you automatically get extra junk on the command line which looks like this :'<,'> don't delete it, just add your s/// to the end of it. This particular s/// command adds list item tags (<li> and </li>) to the range specified.
:nohls stop the current highlighting (maybe from a search or a match) / you could also search for something that doesn't exist
s or S delete 1 character and enter insert mode or delete this line and enter insert mode. Also works with visual mode.




echo word | aspell -a
Search this Site!:
Search this site powered by FreeFind
Homepage: http://www.cpqlinux.com
Site Map: http://www.cpqlinux.com/sitemap.html