vanessagalore | COOL HTML TRICKS (Reply)

This is where Vanessa stores all the cool HTML she's learned.

How to use this: copy the coding you're interested in to your own post, and replace my crap with whatever you want. Go to the next entry to see these codings in action.

LJ REFERENCES: TYPE THIS ON LJ

LJ REFERENCES: TYPE THIS ON DREAMWIDTH

USER = VANESSAGALORE (LJ)
<user name="vanessagalore" site="livejournal.com">

COMMUNITY = VERONICAMARSFIC (LJ)
<span lj:user="veronicamarsfic" style="white-space: nowrap;"><a href="http://community.livejournal.com/veronicamarsfic/profile"><img width="17" height="17" src="http://l-stat.livejournal.com/img/community.gif" alt="[community profile] " style="vertical-align: text-bottom; border: 0pt none; padding-right: 1px;" /></a><a href="http://community.livejournal.com/veronicamarsfic/"><b>veronicamarsfic</b></a></span>

DW REFERENCES: TYPE THIS ON DW
<user name="vanessagalore">
<user name="vmfictitious">

DW REFERENCES: TYPE THIS ON LJ

USER = VANESSAGALORE(DW)
<span  lj:user='vanessagalore' style='white-space: nowrap;'><a href='http://vanessagalore.dreamwidth.org/profile'><img src='http://s.dreamwidth.org/img/silk/identity/user.png' alt='[personal profile] ' width='17' height='17' style='vertical-align: text-bottom; border: 0; padding-right: 1px;' /></a><a href='http://vanessagalore.dreamwidth.org/'><b>vanessagalore</b></a></span>

COMMUNITY = VMFICTITIOUS(DW)
<span  lj:user='vmfictitious' style='white-space: nowrap;'><a href='http://vmfictitious.dreamwidth.org/profile'><img src='http://s.dreamwidth.org/img/silk/identity/community.png' alt='[community profile] ' width='16' height='16' style='vertical-align: text-bottom; border: 0; padding-right: 1px;' /></a><a href='http://vmfictitious.dreamwidth.org/'><b>vmfictitious</b></a></span>

THIS IS A LINE ACROSS THE PAGE
<hr />

THIS IS A LINE ACROSS THE PAGE IN A DIFFERENT COLOR
<hr color="red" />

SUBTITLES (FOR FOREIGN LANGUAGE TRANSLATIONS
<span title="wtf is going on">Oh I'm inscrutable</span>

SPOILER CODES
<font style="background-color: black;"><font color="black">YOUR REVEAL GOES HERE</font></font>

TEXT BOXES
<textarea cols="30" rows="4">
THIS IS HOW TO MAKE A TEXT BOX, YOU CAN EDIT THE NUMBER OF ROWS AND INCREASE THE WIDTH BY PLAYING WITH THE NUMBER IN 'COLS'< /textarea >  <=take out spaces here

INSERT IMAGE ON RIGHT, TEXT FLOW AROUND IT, THE FIRST WAY
<img width="100" vspace="6" hspace="8" height="100" border="0" align="right" src="http://i259.photobucket.com/albums/hh302/VanessaGalore/ocean5100.jpg" alt="" />You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

INSERT IMAGE ON RIGHT, TEXT FLOW AROUND IT, THE SECOND WAY
<div style="float: right; padding-left: 10px;"><img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/ocean5100.jpg"></div>You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

INSERT IMAGE ON LEFT, TEXT FLOW AROUND IT
<img width="100" vspace="6" hspace="8" height="100" border="0" align="left" src="http://i259.photobucket.com/albums/hh302/VanessaGalore/ocean3100.jpg" alt="" />You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.   You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

INSERT IMAGE ON LEFT, TEXT FLOW AROUND IT, THE SECOND WAY
<div style="float: left; padding-right: 10px;"><img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/ocean5100.jpg"></div>You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

INSERT IMAGE ON RIGHT--CERTAIN LAYOUTS, SUCH AS TRANSMOGRIFIED, THAT NEED PADDING INSERTED MANUALLY
<img width="100" height="100" align="right" style="padding: 0pt 0pt 5px 10px;" src="http://www.dreamwidth.org/userpic/296128/293138" alt="" />You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.    You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

INSERT IMAGE ON LEFT--CERTAIN LAYOUTS, SUCH AS TRANSMOGRIFIED, THAT NEED PADDING INSERTED MANUALLY
<img width="100" height="100" align="LEFT" style="padding: 0pt 10px 5px 0pt;" src="http://www.dreamwidth.org/userpic/296128/293138" alt="" />You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.  You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.    You can write whatever you want for the text around the picture.  Yep.  Whatever you want.  La-di-dah.

BULLETED LIST
<ul><li>Topic One</li><li>Topic Two</li><li>Topic Three<ul><li>Subtopic one</li><li>Subtopic two</li></ul></li><li>Topic Four</li><li>Topic Four</li><li>Topic Five<ul class="bul"><li>Subtopic one with "bullet" symbol</li><li>Subtopic two</li></ul></li><li>Topic Six</li></ul>

NUMBERED LIST
<ol><li>First of all</li><li>Secondly</li><li>Finally</li></ol>

TABLE
<center><table width="624" border="0" cellpadding="35">
<tr>
<td><a href="http://vanessagalore.livejournal.com/129627.html?format=light"><img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/LINKPICSPAM.jpg" /></a></td>
<td><a href="http://vanessagalore.livejournal.com/130422.html#cutid1"><img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/LinkBigLebowski.jpg" /></a></td>
<td><a href="http://vanessagalore.livejournal.com/130251.html#cutid1"><img width="119" src="http://i259.photobucket.com/albums/hh302/VanessaGalore/LinkVsnotes.jpg" /></a></td>
<td><a href="http://vanessagalore.livejournal.com/128927.html#cutid1"><img src="http://i259.photobucket.com/albums/hh302/VanessaGalore/LinkChrefs.jpg" /></a></td>
</tr>   
</table></center>

CODING TO ADD TO BOTTOM OF LJ POSTS
<center><table width="870" bgcolor="#47394a" border="0">
<tr>
<td align="center"><FONT COLOR="#F1F1F1"><a href="http://vanessagalore.dreamwidth.org/xxxxx.html">Please click here to leave a comment at my Dreamwidth--anon commenting OK--commenting is locked here</a></font></td></tr>   
</table></center>

ADDING A BACKGROUND COLOR TO ENTRIES
<font color="white"><table width= "500" border="0" 
bgcolor="black"
cellpadding="10">
<tr>
<td>This is how to make an entry with a different background color than the default layout style.  It can be a cool effect.  You can use it instead of defining a background color for blockquotes in your CSS.  It shouldn't be overused.</td>
</tr>   
</table>
<font color=#000000><table width= "500" border="0" 
bgcolor="white"
cellpadding="10">
<tr>
<td>And this is the opposite, kind of a cool effect, once in a blue moon.  Again, you would use this instead of defining a background color for blockquotes in your CSS.  It shouldn't be overused.
</td>
</tr>   
</table>

THIS IS HOW TO ADD NAVIGATION LINKS IN YOUR ENTRY
<a name="Menu">
<u><a href="#1">FIRST TOPIC</a>
<a href="#2">SECOND TOPIC</a>
<a href="#3">THIRD TOPIC</a>
</u>

<b><u><a name="1"></a>TOPIC NUMBER ONE</u></b>

This is for a complicated entry with multiple options for navigation.  Useful if your reader is only going to read certain sections.

<i><a href="#Menu">RETURN TO TOP OF PAGE...</a></i>

<b><u><a name="2"></a>TOPIC NUMBER TWO</u></b>

So this is the second topic, and your reader is grateful because they got to skip all the boring stuff in Topic Number One.

<i><a href="#Menu">RETURN TO TOP OF PAGE...</a></i>

<b><u><a name="3"></a>TOPIC NUMBER THREE</u></b>

Now your readers are really ecstatic, because they skipped all that super-boring stuff in topic one and topic two.

<i><a href="#Menu">RETURN TO TOP OF PAGE...</a></i>

SOME BASIC STUFF, IN CASE YOU LOSE YOUR MIND.

<div align="right">right alignment text</div>

<div align="justify">justified alignment text</div>

<div align="center">centered alignment text</div>

<font size="1">teeny font</font>

<font size="7">biiiiig font</font>

<a href="http://mywebpage.com" target="_blank">My Fanfics Rock!</a>

<a href="mailto:myfanficsrock@me.com">Email me feedback!</a>

<a href="mailto:myfanficsrock@me.com?subject=Title of Fanfic">Email me feedback!</a>

<span style="background-color:#EB9C40;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="background-image:url('http://i259.photobucket.com/albums/hh302/VanessaGalore/linebackground.jpg') "><font color="white">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</font></span>

<span style="border:red solid 5px;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="color:#FF0000;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="font:bold italic 16px serif;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="font-size:17px;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="font-style:italic;">THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE THIS IS AN EXAMPLE</span>

<span style="font-variant:small-caps;">This is an example This is an example This is an example</span>

COOL HTML TRICKS

Post a comment in response: