Tuesday, April 3, 2012

Some Blog HTML

Yep, as promised, I made this little post to help you with some HTML codes.

Some small notes (Please Read):
  • In HTML, there are some values that are put in quotation marks. Make sure you leave in the quotation marks where they appear in the code.
  • Where there is all caps in the code is where you'll be able to put what ever content you want. So for a URL, it will say in the code INSERT URL HERE; you would delete INSERT URL HERE and put in whatever URL you want.




Text Boxes/Text Areas



Some Notes: Cols is the width of the textbox, and rows is the height. Where the # is in the code is where you put a number that you want for the width or height (leave in the quotations)


Blog Button Code
Welcome to Elegance of Fashion
Some notes: Height and Width refer to the image's height and width. Alt is the text that appears when you hover your cursor over the image. Technically, you are supposed to have height, width, and alt for the image, but I've gotten away with not including them. The # you replace with the number of pixels high or wide the image is.

Resizing an Image/Thumbnails
Original Image:


Smaller Image:


There are two ways to do this, either by width or by height.
By width


By height

Some Notes: You can do either by width or by height, but not both unless you know the exact measurements for both. If you don't have the exact measurements for both the picture will be distorted. And the number that you put in (#) is the number of pixels wide or high.

Borders
 


Some Notes: The border on the above picture is 2 pixels, so where the # is you would put 2. The default for any image is 0, which would be no border. The default color should be black.

Change Border Color

Some Notes: Please read this before using the code. For the border, I had to use a * because the number sign is very important in this code. So, where the * is in the code, put a number for the width of the border you want. Now, where it says #------ is where you would put in the color code for the border. You can find these codes here. Once you've selected a color, insert the code into the dashes. LEAVE THE #. So if you wanted to use the color 0EFF2A (which would be green), the code should look like "...border-color: #0EFF2A;...".
 
Line Break

Some Notes: Very small code for a simple line. This can be very useful if you want to break up paragraphs or sections.

Marquee
There is lace at stake!

Some Notes: The motion will not show up in the post, but if you preview it and post it, it should work. Be careful how you use this: if you use it too much, it can be distracting and busy. You can also apply any text effect to the marquee text and if you like you can even do images in a marquee: where it says TEXT HERE simply paste the image code.



If there is anything that is unclear in my instructions or there is some problem with your code, leave a comment so I can correct whatever errors I made. 

And, of course, if enough people suggest what else they would like to see in HTML, I can do a second post about more Blog HTML. Again, just leave a comment.
 
God Bless,
 God Bless, Miss Elizabeth Bennet

No comments:

Post a Comment