Thursday, December 22, 2011

How to Use HTML in blog posts

Well, the WYSIWYG-editor can act strange by posting images, and it doesn't allow fine-tuning on its size. Since I once learned programming, but before the internet was common, I decided to do some investigations on HTML. And in order to do some easy copy and paint, I made a text-file. Then I thought it might be handy for some starting HTML-ers as well  ;-)

<!--------  LeftFloatImage 1/2  -------->
<a href=" ImgURLzzzzzzzzz " imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" width="320"
src=" ImgURLzzzzzzzz "   />  </a>

- The text between  <!--  and  -->  is just comment, to keep your program clear,;because as I've been thought: a good program is not only one that works, but one you still understand after a long period, in order to make modifications, without hours of studying the program.
- The ImgURLzzzzzzzzz  is where you paste the images URL: right click on the image, and choose "Copy URL"; I added the zzzzzzzzz to make it easy to find where you have to replace, and I made a one word of it, so double clicking allows you an easy replacement  :-)


<!--------  TitelsAndereTalen  -------->
<span class="Apple-style-span" style="color: #bf9000; font-size: large;"><b>
(NL) NederlandseTekstzzzzzzzz </b></span><br />

<span class="Apple-style-span" style="color:   #45818e; font-size: large;"><b>
(FR) TexteFrançaiseZzzzzzzzz </b></span><br /><br />



<!--------  LeftFloatImage 2/3  -------->
<a href=" ImgURLzzzzzzzzz " imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" width="430"
src=" ImgURLzzzzzzzz "   />  </a>


<!--------  myTextColours  -------->
<span class="Apple-style-span" style="color: #6aa84f;">

(ENG) EnglishTextzzzzzzzz </span><br /><span style="color: #bf9000;">
(NL) NederlandseTekstzzzzzzzz </span><br /><span style="color: #45818e;">
(FR) TexteFrançaiseZzzzzzzzz</span><br />


<!--------  goToLineUnderFloatingImage -------->
<br clear="all"></br> <!-- Go To Line Under Floating Image -->

<!--------  addAPageBreak -------->
<!--more--><br />

<!--------  2equalWidthsImages  -------->
<a href="  ImgURLzzzzzzzzzTwoEqualWidths111zzzzzzzz " imageanchor="1" style=""><img border="0" width="320"
src="  ImgURLzzzzzzzzzTwoEqualWidths111zzzzzzzz  "  /></a> &nbsp;
<a href="  ImgURLzzzzzzzzzTwoEqualWidths222zzzzzzzz  " imageanchor="1" style=""><img border="0" width="320"
src="  ImgURLzzzzzzzzzTwoEqualWidthszzzzzzzz   "  /></a> <br/>

<!--------  littleBIGlittleImages -------->
<a href=" ImgURLzzzzzzzzzLittle111zzzzzzzz  " imageanchor="1" style=""><img border="0" width="155"
src=" ImgURLzzzzzzzzzLittle111zzzzzzzz  "  /></a> &nbsp;
<a href=" ImgURLzzzzzzzzzBigBetweenzzzzzzzz  " imageanchor="1" style=""><img border="0" width="320"
src=" ImgURLzzzzzzzzzBigBetweenzzzzzzzz  "  /></a> &nbsp;
<a href=" ImgURLzzzzzzzzzLittle222zzzzzzzz   " imageanchor="1" style=""><img border="0" width="155"
src=" ImgURLzzzzzzzzzLittle222zzzzzzzz   "  /></a> <br/>

<!--------  highligtGoldish -------->
<span class="Apple-style-span" style="background-color: #ffe599; ">
TextToHighlightzzzzzzzz  </span>

<!--------  linkInText -------->
<a href="httpLinkToGozzzzzzzz">   LinkNameWillShow</a>

No comments:

Post a Comment

thanks for commenting :-D

Related Posts Plugin for WordPress, Blogger...