arranged by:
Hasanuddin Tamir aka
bOki®
Last updated on 11/02/1997 04:33:45 PM UTC+0700
This page is
Software: Super NoteTab
Version: 2.63e
Author: Eric G.V. Fookes
Features: Clipbook Template
|
The Clipbbok is one of the cool features of "Super NoteTab". I've been writing HTML with Windows Notepad for almost a year and enjoying it so far. I did try some text-based HTML editors but they didn't fit my need. So I kept using Notepad. What made me tired was that I had to open another window to open another file and my task bar would be full soon as I need to open more files at once. Not to mention if a file is written in UNIX/Linux system, the "word wrap" won't help. And sometimes I just opened a file without looking at its size and I got message: This file is too large for Notepad to open. Do I really have to use WritePad???
Then I found this Super NoteTab and my life changed. Opening many and big files is not problem and it won't fill up the task bar. We can even use its system tray. No need to worry anymore about those little black squares when I open a file from Linux and vice versa, when switching to Linux, you won't see the DOS carriage return character, ^M. Changing font? No problem. Go ahead and use your favorite font. And this is the coolest: Clipbook! It's sometimes still hard to believe that I have MY OWN HTML EDITOR, and I can re-configure it as I like and need.
So I made my HTML Clipbook and like to share it to everyone. Well, HTML is the only thing that I have better knowledge so I hope this is useful for you. A little note that in writing HTML I prefer to use lowercase for tags and omit the quotes for some of the values of the attributes. I divided the tags into some categories which is not W3C stardard. You may directly take a look at the clipbook code in text file. Well, I can't say that it is really HTML 3.2 because I didn't cover all the features of it. And I'm sure that I didn't write it nicely, so any comments are always welcome. There are also some buttons I made. You may freely use them if you like. Finally, again I hope this is useful and welcome to the community!
That's all folks |
h= full html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>^?[TITLE]</title>
.
</head>
<!-- this page is created/made/built/coded/generated/edited with Super NoteTab -->
.
<body
bgcolor=
text=
link=
alink=
vlink=
background=>
.
^&
</body>
</html>
Note:
The only prompt is for the TITLE, so we fill the BODY attributes after the item is implemented.
h= simple html
<html>
<title>^?[TITLE]</title>
.
<body>
.
^&
</body>
</html>
Note:
I use it when I need to write a simple html file that only needs TITLE element. However when I need more elements in this section, I'll take it from the other items.
h= simplest html
<html>
<body>
.
^&
</body>
</html>
Note:
I'm afraid that it's useless because most browsers has reserved the <html> ... </html> and <body> ... </body> elements when rendering a html file that omits those tags.
h= snt comment
<!-- this page is created/made/built/coded/generated/edited with Super NoteTab -->
.
Note:
Don't be shy to put this item :-)
h= snt button
<center>This page is created/made/built/coded/generated/edited with<br>
<a href="http://www.unige.ch/sciences/terre/geologie/fookes/notetab.htm"><img src="^?[Button Source]" border=0></a></center>
Note:
So, you have a button for SNT? Great, be proud to put this on your page. I am.
h= tags
<^?[TAG Options=_HTML^=html|HEAD^=head|TITLE^=title|BODY^=body|SCRIPT^=script|STYLE^=style]>
^&
</^?[TAG Options]>
Note:
A set of tags you can choose for the "top section".
h= body
<body
bgcolor=
text=
link=
alink=
vlink=
background=>
^&
</body>
h= meta NAME
<meta name="^?[NAME=_author|description|generator|keywords]" content="^?[Content]">
h= meta HTTP-EQUIV
<meta http-equiv="^?[HTTP-EQUIV=expires|keywords|_refresh|reply-to]" content="^?[Content]">
Note:
I split the NAME and HTTP-EQUIV attributes because each of them has their own values.
h= script
<script language="^?[SCRIPT LANGUAGE=_JavaScript|VBScript]">
<!--
^&
//-->
</script>
h= style
<style type="^?[TYPE=_CSS^=text/css|JASS^=text/javascript]">
<!--
^&
-->
</style>
h= comment
<!-- ^?[Want to put some comments?=^&] -->
.
Note:
This item only works in v2.63e. If you still use older version, you know what to do. You only need "^&" instead of "^?[Want to put some comments?=^&]".
h= base
<base^?[Attributes=font size= face= color=|_ target=| href=]>
Note:
It offers three different BASE elements: BASE HREF for URL, BASE TARGET, commonly used in framing, and BASEFONT, currently for Internet Explorer only. There is a space before "target" and "href" because they are attributes for BASE element. But BASEFONT is a stand alone element and has attributes as FONT element has.
h= date and time
^?[Format=_Date Time^= ^[mm/dd/yyyy hh:nn:ss AM/PM^] |ShortDateFormat^= [ddddd^] |LongDateFormat^= ^[dddddd^] |ShortTimeFormat^= ^[t^] |LongTimeFormat^= ^[tt^] |ShortDayNames^= ^[ddd^] |LongDayNames^= ^[dddd^] |ShortMonthNames^= ^[mmm^] |LongMonthNames^= [mmmm^] |OneDigitDay^= ^[d^] |TwoDigitsDay^= ^[dd^] |OneDigitMonth^= ^[m^] |TwoDigitsMonth^= ^[mm^] |TwoDigitsYear^= ^[yy^] |FourDigitsYear^= ^[yyyy^] |OneDigitHour^= ^[h^] |TwoDigitsHour^= ^[hh^] |OneDigitMinute^= ^[n^] |TwoDigitsMinute^= ^[nn^] |OneDigitSecond^= ^[s^] |TwoDigitsSecond^= ^[ss^] ]
Note:
Wow, is it really that crowd?
h= tag entities <^?[TAGS=^&]>
Note:
Only works in v2.63e. See also the comment.
Sometimes I really need this.
h= heading
<^?[Heading Level=_H1^=h1|H2^=h2|H3^=h3|H4^=h4|H5^=h5|H6^=h6]>^&</^?[Heading Level]>
h= physical
<^?[Physical Face=_Bold^=b|Italic^=i|Underline^=u|Blinking^=blink|Strike^=strike|
Subscript^=sub|Superscript^=sup|Teletype^=tt]>^&</^?[Physical Face]>
h= logical
<^?[Logical Face=_Cite^=cite|Code^=code|Definition^=dfn|Emphasize^=em|
Keyboard^=kbd|Sample^=samp|Strong^=strong|Variable^=var|XMP^=xmp]>^&</^?[Logical Face]>
h= font
<font ^?[Attributes=size= face= color=]>
^&
</font>
h= text blocks
<^?[Options=Address^=address|Blockquote^=blockquote|Center^=center|_P^=p|Pre^=pre]>
^&
</^?[Options]>
Note:
A set of tags to implement on the selected section.
h= div
<div align=^?[ALIGN=_left|center|right]>
^&
</div>
Note:
It should be the same as above but DIV has attributes.
h= br
<br^?[Attributes=_none^=|all^= clear=all|left^= clear=left|right^= clear=right]>
Note:
Maybe it'll be simpler if we just type <br> unless some attribute is needed. If none is selected, the <br> is closed right away, but if we take one of the attributes, a space is put after the "r", e.g. <br clear=all>.
h= h-rule
<hr^?[Attributes=_none^=| align= width= size=]>
Note:
Same as BR things, just remember the default values: center alignment, width=100% and size=2.
h= listing
<^?[Listing Type=_List^=li|Ordered List^=ol|Unordered List^=ul|Definition List^=dl|Definition Term^=dt|Definition^=dd|Directory List^=dir|Menu Item List^=menu]>
^&
</^?[Listing Type]>
Note:
Here is a set of listing tags. See below for some elements that take attributes
h= ordered list
<ol^?[Attributes=_none^=|COMPACT^= compact|START^= start=]^?[TYPE=_none^=|Alpha UC^=
type=A|Alpha LC^= type=a|Roman UC^= type=I|Roman LC^= type=i|Arabic number^= type=1]>
^&
</ol>
Note:
This is when I need some attributes for OL. I pick from the listing if I only need simple ordering list.
h= unordered list
<ul^?[Attributes=_none^=|COMPACT^= compact]^?[TYPE=_none^=|
disc^= type=disc|circle^= type=circle|square^= type=square]>
^&
</ul>
Note:
Same as above (SAA).
h= list for OL
<li^?[TYPE=_none^=|Alpha UC^= type=A|Alpha LC^= type=a|Roman UC^= type=I|
Roman LC^= type=i|Arabic number^= type=1]^?[VALUE=_none^=| value=]>
^&
</li>
h= list for UL
<li^?[TYPE=_none^=|disc^= type=disc|circle^= type=circle|square^= type=square]>
^&
</li>
Note:
However the </li> may be omitted.
There is a different type between LI for OL and for UL so I splited it.
h= alignment
^?[Type=_Horizontal^=align=|Vertical^=valign=]
^?[Alignment=_left|right|center|top|middle|bottom]
Note:
Anybody needs alignment?
h= they're pairs
^?[Choose that fit your need=_width= height=|rows= cols=|name= value=|
cellpadding= cellspacing=|vspace= hspace=|rowspan= colspan=]
Note:
Well, sometimes they aren't used in pairs.
h= colors
^?[Choose that fit your need=bgcolor=|text=|link=|alink=|vlink=|_color=|bordercolor=]
Note:
What's the color for?
h= miscellaneous
^?[Choose that fit your need=alt=|background=|border=|class=|checked|face=|
name=|maxlength=|multiple|selected|_size=|src=]
Note:
If you forget something or change your mind, don't type, just click.
h= anchors
<a ^?[Attributes=name=|_href=]>^&</a>
h= target
target="^?[TARGET=_A frame or window name^=|Blank^=_blank|Display^=_display|New^=_new|
Parent^=_parent|Self^=_self|Top^=_top]"
Note:
If the target is a frame or window name, simply replace the text with their name.
h= image
<img src="^?[Source]" alt="^?[Alternative Text]"^?[Attributes= border= width= height=
vspace= hspace= usemap= ismap]^?[ALIGN=_none^=|Left^= align=left|Right^= align=right|Center^= align=center|Middle^= align=middle|Top^= align=top|Bottom^= align=bottom]>
.
Note:
Some of the attributes can be used together, so just remove that you don't need.
h= simple image
<img src="^?[Source]" alt="^?[Alternative Text]">
.
Note:
Or use this one, it only prompts for source image and alternative text.
h= embed
<embed src="^?[Source]" ^?[Dimension=width= height=]^?[Properties= loop= nosave= hidden= autostart=]>
.
Note:
All properties can be used together so remove what you don't need. Please remember that set the HIDDEN properties true (which is default) will make the embedded object zero-sized and override the values of HEIGHT and WIDTH atrributes.
h= bgsound
<bgsound src="^?[Source]" loop=^?[Loop=infinite]>
.
h= table
<table^?[Attributes=_none^=| width= height= cellspacing= cellpadding= border=]>
^&
</table>
Note:
We can use simple table without any attribute. However if we do need some, there's a lot of them avalaible in ATTRIBUTES FOR ALL.
h= row
<tr align=^?[ALIGN=_left|center|right] valign=^?[VALIGN=top|_center|bottom]>
^&
</tr>
Note:
SAA
h= data
<td align=^?[ALIGN=_left|center|right] valign=^?[VALIGN=_top|center|bottom]
^?[Attributes=_none^=| rowspan= colspan= width= height=]>
^&
</td>
Note:
SAA
h= heading
<th align=^?[ALIGN=_left|center|right] valign=^?[VALIGN=top|_center|bottom]
^?[Attributes=_none^=| width= rowspan= colspan=]
^&
</th>
Note:
SAA
h= table elements
<^?[Elements=_Table^=table|Row^=tr|Data^=td|Heading^=th|Caption^=caption]>
^&
</^?[Elements]>
Note:
Just in case I need to insert one of them.
h= framing
<frameset ^?[Position=_rows=*,*|cols=*,*]^?[Attributes=_none^=|
frameborder= framespacing= framecolor= border=]>
^&
</frameset>
Note:
No special note unless for attributes usage which has been explained above.
h= frame
<frame src=^?[Source]^?[Attributes=_none^=| noresize name= scrolling=]^?[Margin=_none^=| marginheight= marginwidth=]>
.
h= framing attributes
^?[Attributes=frameborder= framespacing= framecolor= border=|_noresize name= scrolling= marginheight= marginwidth=]
Note:
And here you go when you need to add one or more attributes, whether for the FRAMESET or the FRAME elements.
h= noframe
<noframe>
^&
</noframe>
h= form
<form action="^?[ACTION]"^?[METHOD=_none^=|POST^= method=post|GET^= method=get]>
^&
</form>
h= input
<input type=^?[TYPE=checkbox|file|hidden|image|password|radio|reset|submit|_text]
^?[Attributes=_name= value= size= maxlength= checked|src= border= align=]>
.
h= textarea
<textarea ^?[Attributes=name= wrap=physical-virtual] ^?[Dimension=rows= cols=]>
^&
</textarea>
h= select
<select ^?[Attributes=name= size= multiple]>
^&
</select>
h= option
<option>^?[Content]
.
h= applet
<applet code="^?[CODE].class"^?[CODEBASE=_codebase=|none^=] ^?[Position=width= height= align=]>
^&
</applet>
h= param
<param name=^?[NAME] value=^?[VALUE]>
.
|
arranged by: Last updated on 11/02/1997 04:33:45 PM UTC+0700 |
This page is |