Future Reference:
? = A color or font name goes here, should be easy to guess which.
# = A number goes here.
We will use examples which use parts of
MudWorld and the
Mud Connector.
Basic HTML Explanations:
<html> and </html> = These are the flags which mean the
stuff between them are HTML. Tell the browser you use it is web
viewable.
<head><title> and </title></head> = Between
these are the name/topic of the page, it will show on the top bar of
your browser.
<body bgcolor="?" text="?" link="?" vlink="?" alink="?" topmargin="#"
bottommargin="#" leftmargin="#" rightmargin="#" marginheight="#"
marginwidth="#" style="margin:#px" bgsound="?" background="?"> and
</body> = This is the area where the site content will go which is
seen on the page itself. You are able to change the colors of the
page and fonts you use.
<center> and </center> = This centers the content of the page which
are in between these markers.
<strong> and </strong> = This widens, as well as boldens, the content
of the page which are in between these markers.
<b> and </b> = (Bold) This boldens the content of the page which are
in between these markers.
<hr width="#" align="?" color="?"> = This places a line from left to
right on your page, best used to seperate sections.
<i> and </i> = (Italics) Italicizes whatever text is in between the
tags.
<br> = (Line Break) This moves content down to the next line.
<p> = (Paragraph Break) This moves content down to the next two lines.
Headliners, these are font sizes used for headlines, H1 is the biggest
and each progresses to a smaller size:
<h1> and </h1>
<h2> and </h2>
<h3> and </h3>
<font face="?" color="?" size="#"> = This allows you to set a design
of the text you use. There are thousands of font styles on the
planet. The most common English fonts are Arial, Verdana and System.
<a href="index.htm">Index</a> = This is an example of a basic on-site
link. In between the " " you put the filename and between the
"> </a> you put the name of the linking page.
<a href="http://blah.com/">?</a> = This is an example of a basic
off-site link. It works basicly the same as on-site links do, but
between the " " you put the site's http address and between the
"> </a> will go the name of the site it is linking to.
<A HREF="blah.html#test">test</A> + <A NAME="test">?</a> = Allows you
to direct a person to a particular place on a page.
<img src="blah.gif" alt="?" border="#"> = This allows you to insert
a graphic image onto a page.
This below allows float over text for both text links and non-links.
<ACRONYM TITLE="Float over content.">Link</ACRONYM>
<pre> and </pre> = (Preformat) This preformates text. It is used when
presenting something which is not in HTML format in its proper format.
<tt> and </tt> = (True Type) This is the traditional type writer font.
HTML replacements for <, >, a bullet and a space:
< = < (Less Than)
> = > (Greater Than)
• = Bullet
= Space
HTML reads the "lesser" and "greater" signs as markers in which HTML
commands are placed within. You have to use these above to go around
HTML, in a way, to display these characters. Extra spacing and
bullets also need HTML replacing. HTML, generally, only allows 1
space between anything on the page.
Advanced HTML Explanations:
The code below opens a new window with less code, fall back is that
it also causes the page opened on to refresh:
<a href="pageon.html" onclick="window.open('pageopen.html', 'pagename', 'width=600,height=400');">Page Link</a>
This shows the time of when the page is loaded.
<SCRIPT>document.write(Date()+"")</SCRIPT>
<!-- and --> = Comments out information from showing in HTML design.
Place this code atop the page when using the code below it. It allows
a specially sized window to open via JavaScript:
<script language="JavaScript">
<!--
function windowOpen() {
popupWin = window.open(amp, 'filename','scrollbars='+s+',width='+w+',height='+h);
}
-->
</script>
<a href="javascript:windowOpen(amp='filename',s='yes',w='100',h='100');">
test</a> = This is customizable to open another window for a specific
size with file inside.
False URL:
http://fake.domain.com&anyname@real.domain.com
Example:
http://www.mudworld.com&mudworld@www.mudworld.org/
Example of 5 part top/middle/bottom and left/right frames:
<frameset FRAMESPACING="0" frameborder="0" BORDER="0" border="no" rows="100,75,*">
<frame SRC="http://www.haslage.net/games/archives/MudWorld/includes/hne-menu.html" NAME="hne-menu" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" border="no">
<frame SRC="http://www.mudconnect.com/top.html" NAME="top" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" NORESIZE border="no">
<frameset border="0" border="no" frameborder="0" framespacing="0" marginheight="0" marginwidth="0" cols="130,*">
<frame SRC="http://www.mudconnect.com/menu.html" NAME="menu" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" border="no" target="main">
<frame SRC="http://www.haslage.net/games/archives/MudWorld/includes/ucmm.html" NAME="main" NORESIZE marginheight="0" marginwidth="0" scrolling="auto" frameborder="no" framespacing="0" border="no">
</frameset>
</frameset>
Example of 2 part top/bottom frames:
<frameset FRAMESPACING="0" frameborder="0" BORDER="0" border="no" rows="100,*">
<frame SRC="http://www.haslage.net/games/archives/MudWorld/includes/hne-menu.html" NAME="hne-menu" scrolling="no" NORESIZE marginheight="0" marginwidth="0" border="no">
<frame SRC="http://www.haslage.net/games/archives/MudWorld/includes/ucmm.html" NAME="ucmm" scrolling="auto" NORESIZE frameborder="no" framespacing="0" marginheight="0" marginwidth="0" border="no">
</frameset>
<frames> and </frames> = This allows you to limit content to those
browsers who can see frames.
<noframes> and </noframes> = This allows you to limit content to those
browsers who can not see frames.
Scroll Form:
<marquee behaviour="slide" direction="up" width="100%" height="100" scrolldelay="75" scrollamount="1">
Content goes here!
</marquee>
Stylesheet:
<link rel="stylesheet" href="http://www.haslage.net/games/archives/MudWorld/includes/style.css" type="text/css">
<a href="http://www.haslage.net/games/archives/MudWorld/" class="divisiontext">MudWorld</a>
.divisiontext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-decoration: none; font-weight: bold}
a.divisiontext:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #FFFFFF; text-decoration: underline}
.menutext { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-decoration: none}
a.menutext:hover { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; text-decoration: underline}
Text areas (Used for submission forms):
<textarea name="text" cols="#" rows="#" wrap="soft">
Content, if any.
</textarea>
Link Targets:
target="main" - This will change the information on the main page and
not the frame itself.
target="_top" - This will change the whole page.
target="_blank" - This will force a popup window.
target="_parent" - Changes site on parent/first opened browser.
target="newwindow" - Opens a new window.
Example: <a href="http://www.blah.com/" target="?">test</a>
Check Box:
<input type="checkbox" name="???" value="1">
Radio Circle:
<input type="radio" name="???" value="1">
<input type="radio" name="???" value="2">
<input type="radio" name="???" value="3">
Flash simulation:
<head>
<script language="JavaScript"><!--
var curmsg=-1
var messages=new Array()
function scrolltext() {
messages[0]="Blah!"
messages[1]="B"
messages[2]="Bl"
messages[3]="Bla"
messages[4]="Blah"
//add more messages as desired
slidemessage()
}
function slidemessage(){
if (curmsg<messages.length-1)
curmsg++
else
curmsg=0
document.slideshow.T1.value=messages[curmsg]
setTimeout("slidemessage()",2500)
}
// --></script>
</head>
Text scroll:
<body ONLOAD="scrolltext()"><form name="slideshow"><input type="text" name="T1" size="30"></form></body>
To add a "Back" button:
<FORM><INPUT TYPE="button" VALUE="Back" onClick="history.back()"></FORM>
Bullet counting:
<ol start="1">
<li></li>
</ol>
Making tables:
<table width="#" border="#" align="?" valign="?" cellpadding="#"
cellspacing="#" bordercolor="?" bgcolor="?" background="?"> and
</table> = Alot like how the "body" tag works, table is almost like a
small page in a page.
<tr> and </tr> = This tag can use the same options as the table
tag. This tag is what starts a new row in a table.
<td> and </td> = This tag can use the same options as the table
tag. This tag is what splits a column in a table.
Example:
<table width="80%" border="1" bordercolor="red" cellpadding="2" cellspacing="0" align="center" valign="center" bgcolor="white">
<tr align="center" valign="center">
<td width="50%">?</td>
<td width="50%">?</td>
</tr><tr align="center" valign="center">
<td width="50%">?</td>
<td width="50%">?</td>
</tr>
</table>
Using this Perl script at the shell prompt, you can change a common
line (old line = old.address.com) to a new line (new line =
new.address.com) in a file or many files (* = filename[s]):
perl -pi~ -e 's,old.address.com,new.address.com,g' *
Note: You must make a blank file named zzz using whatever suffix
you use when using this code, otherwise the last file in alphabetical
order will be errored. The zzz file must be in the directory where
you run the script. Add an additional /* for each sub directory.
