|
|
|
You can edit your page elements here and small snippets of code even a whole web page and make sure it works right here! If you scroll down on this page there is a quick reference library of code to use. |
*Copy and paste the code in red and blue into the left panel *Play with the code in blue
(1) left click, hold and drag to highlight the code (2) right click, click "copy" or just click "copy the code" (3) right click in the left panel, click "paste" (4) click "Generate Preview"
LINKS
link to an item on the same page note the # sign <A HREF="#where ever">my link</A> place this on the same page where you want to link to <A NAME="where ever"></A>
link to an item on a different page note the # sign <A HREF="http://www.blueletterbible.org/kjv/Jhn/Jhn003.html#16">my link</A> place this on the page where you want to link to <A NAME="16"></A>
FONTS Common Font Size 1 thru 7 Common Font Chart Common Font Color Chart insert 6 digit color code: example blue 0000FF
font string <FONT FACE="ARIAL" SIZE="1" COLOR="blue">text</FONT>
font open tag <FONT> font close tag </FONT> font type <FONT FACE="ARIAL">text type</FONT> font size <FONT SIZE="1">text size</FONT> font color <FONT COLOR="blue">text color</FONT>
bold <B> bold close </B> italicized <I> italicized close </I>
IMAGES
image string with a link <A HREF="http://www.blueletterbible.org/kjv/Jhn/Jhn003.html#16"><IMG SRC="http://www.thesoulshop.co.uk/images/jesus_inside.jpg" WIDTH="80" HEIGHT="100" ALT="T SHIRT"></A>
when it turns blue it's been copied, right click and paste to the left panel
image <IMG SRC="http://www.thesoulshop.co.uk/images/jesus_inside.jpg">
image with a link <A HREF="http://www.blueletterbible.org/kjv/Jhn/Jhn003.html#16"><IMG SRC="http://www.thesoulshop.co.uk/images/jesus_inside.jpg"></A>
image attributes in pixels width="80" height="100"
image attributes in percentage WIDTH="80%" HEIGHT="100%"
image alternate description mouse over description ALT="T SHIRT"
SOUNDS
play
automatically with visible large controls
<EMBED SRC="yoursound.mid"
width="145"
height="62"
autostart="true">
play
automatically with visible small large controls <EMBED
SRC="yoursound.mid"
height="15"
width="140"
controls="smallconsole"
autostart="true">
Where it say's autostart you can, put
autostart="false" so it won't autostart.
MOUSE OVER SOUNDS
BUTTONS
PAGE LAYOUT
horizontal line <HR> paragraph break <P> close paragraph </P> line break <BR> space without a line break (non breaking space) division container <DIV> close division container </DIV>
center <CENTER> end center </CENTER>
alignment left, center or right <DIV ALIGN="left">some stuff here</DIV> causes no line space break
alignment left, center or right <P ALIGN="left">some stuff here</P> causes a line space break
TABLES The example code below is a table with 3 rows and 3 columns You can insert an image or link between the <TD></TD> tags
table row <TR> close table row </TR> table data <TD> close table data </TD> table <TABLE> close table </TABLE>
TABLE WITH ROUNDED CORNERS A table with rounded corners is just a square table with 3 rows and 3 columns with rounded corner images in the 4 corners with the same color as the table background color.
BACKGROUND Common Background Color Chart insert 6 digit color code: example blue 0000FF
text background color example Quick Code Editor <FONT FACE="ARIAL" SIZE="3" COLOR="blue"><SPAN STYLE="BACKGROUND-COLOR=yellow">Quick Code Editor</SPAN></FONT>
background image <body background="http://www.thesoulshop.co.uk/images/jesus_inside.jpg">My Page
background color <body bgcolor="green">My Page
Here is some Java Script used on this page - Name: Click and Auto Copy in 2 steps
Step #1 Code goes between the <head></head> tags.
Insert the head code 1 time.
<!-- Begin
function copyit(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
therange=tempval.createTextRange()
therange.execCommand("Copy")
}
// End -->
</script>
Step #2 Code goes between the <body></body> tags.
Insert the code for each copy button, just change the form name in blue and the text in blue is what you want copied.
You can change what the button says by changing value= and the size of the text box by changing rows and columns.
<form
name="IT">
<div align="left">
<input onclick="copyit('IT.select1')" type="button"
value="Press to Copy the Text"
name="cpy">
<textarea name="select1" rows="1" cols="78">
If this is highlighted, then it has been copied.
</textarea>
</div>
</form>
I started this for my own quick reference so I could just copy and paste some code and see if it worked ok as an alternative to opening up a large cumbersome editor before I put it on my website. It is still being improved often and I hope you find it useful too. Please put this code on your page so you and others can find it. Thank you very much. It will look like this on your page Quick Code Editor
