This guide aims to help noobs on HTML-code editing and various other stuff related to formatting.

Below is listed some of the stuff that can be done or used in HTML:

1. <span style="color: [color code/name];">[text]</span>

where [color code] refers to the hexadecimal code of the colour. For example, ffffff = pure black, while ff0000 = red. Thus: <span style="color: #000099">blue</span> gives us blue (000099).
where [color name] refers to the name of the color. For example, <span style="color: gold">gold</span> gives us gold.
Remember to add </span> at the end of a passage/word/sentence if you want to use different formatting for the next word without starting a new paragraph.

2. <span style="font-family: [font family];">[text]</span>

where [font family] refers to the type of font used in the paragraph. List of default fonts included in Blogger:

Default font - do not type anything
Arial - <span style="font-family: Arial, Helvetica, sans-serif;">
Courier - <span style="font-family: Courier New, Courier, monospace;">
Georgia - <span style="font-family: Georgia, Times New Roman, serif;">
Helvetica - <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Times New Roman - <span style="font-family: Times, Times New Roman, serif;">
Trebuchet MS - <span style="font-family: Trebuchet MS, sans-serif;">
Verdana - <span style="font-family: Verdana, sans-serif;">

These fonts CANNOT be used together.

3. <u></u>; <b></b>; <i></i>; <strike></strike>

where <u> and </u> are used in the formatting of underlined text.
For example, <u>Hello there!</u> will yield Hello there!.

where <b> and </b> are used in the formatting of bold text.
For example, <b>Hello there!</b> will yield Hello there!.

where <i> and </i> are used in the formatting of italic text.
For example, <i>Hello there!</i> will yield Hello there!.

where <strike> and </strike> are used in the formatting of text with a strikethrough.
For example, <strike>Hello there!</strike> will yield ~~Hello there!~~

These three can be used together.
For example, <u><b><i>Hello there!</i></u></b> will yield Hello there!.

Note that 1., 2. and 3. can be used together, as in the following example:

Hello there! My name is Marilyn monroe.
is HTML-formatted:

<span style="font-size: x-small;">Hello </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">there! </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-weight: bold;">My </span><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold;">name </span><span style="font-family: Verdana, sans-serif; font-size: x-small;"><strike style="font-style: italic; text-decoration: underline;">is</strike> </span><span style="color: red; font-family: Arial, Helvetica, sans-serif; font-size: large;">Marilyn </span><span style="color: purple; font-family: Times, Times New Roman, serif; font-size: xx-small;">monroe.</span><br />

Complicated, isn't it?

4. <br />; <hr />

where <br /> refers to the end of a line text. One of it is inputted every time you press Enter, into the previous paragraph of text.

where <hr /> refers to a horizontal

line that is inserted between text.

5.  

where   means "non-breaking space". It is added every even number of spaces you add between letters, words or sentences.

For example, in the following sentence:

"Hello there my friend!"

Between "Hello" and "there" is five spaces, "there" and "my" two spaces, and "my" and "friend" three spaces.

Thus the HTML might look like this:

"Hello     there  my   friend!"<br />

6. Special character sets

Below are some special characters that can be used in place of the ALT+[character code] format. Not all are included. For example, the section symbol § can be typed as such: §

The following information is obtained from this website.

`"`	"	Double quote
`&`	&	Ampersand ("and" sign)
`<`	<	Less-than
`>`	>	Greater-than
` `		un-linebreak-able space
`¡`	¡	Upside-down !
`¢`	¢	Cent sign (c crossed out)
`£`	£	Pound sign: the currency symbol not the tic-tac-toe telephone symbol, which is incorrectly called "pound".
`¤`	¤	circle with dashes at NE, SE, SW, and NW
`¥`	¥	Y crossed out
`¦`	¦	Vertical line, maybe with gap in middle
`§`	§	Section sign (like hurricane symbol on weather maps)
`¨`	¨	Two dots up in the air
`©`	©	Copyright sign (C in a circle)
`ª`	ª	lower case "a" up in the air
`«`	«	Two small less-than signs: the German open-quote
`¬`	¬	Not sign from classical logic
``		"Soft" hyphen: a dash
`®`	®	Registered sign (R in a circle)
`¯`	¯	Macron (horizontal line up in the air)
`°`	°	Degree sign
`±`	±	Plus-or-minus sign
`&sup2`	²	2 up in the air
`³`	³	3 up in the air
`´`	´	Little dash pointing to North-East
`µ`	µ	Micro sign, lower case Greek Mu
`¶`	¶	Paragraph sign (mirror image capital P with two legs and a black eye)
`·`	·	Decimal Point (English style, mid-level)
`¸`	¸	Small sickle shape, low down
`¹`	¹	1 up in the air
`º`	º	lower case "o" up in the air
`»`	»	Two small greater-than signs: the German close-quote
`¼`	¼	One quarter
`½`	½	One half
`¾`	¾	Three quarters
`¿`	¿	Upside-down ?
`×`	×	Times sign: narrow x without serifs
`÷`	÷	Division sign: a colon : with a dash through it

This brings me...to the last one I'm going to add.

7. Adding tables in HTML

This one is FAR more complicated than the previous six.

Basic tags

The basic HTML tags used in tables will be <table>, <tr> and <td>.

<table> marks the start of a table. </table> marks the end of a table.
<tr> marks the beginning of a row of table cells. </tr> marks the end of this row of cells.
<td> marks the start of a table cell. The text will be in between. </td> marks the end of this table cell.

Line breaks

Line breaks can be added with the <br /> tag between lines. They can be removed by adding non-breaking spaces (i.e.  ) between text.

Borders

Borders can be used to distinguish the table from the rest of the page. Use the border="[number]" tag in defining the number of pixels the border will occupy.

Thus the tag will appear like this: <table border="2"> ... </table>

Width

Width is normally determined by the system itself based on the content in the table cells. However they can also be defined with the width="[number/percentage]" tag.

The percentage will be the percentage of the page width, while the number will be the number of pixels.

Using it in the <table> tag will determine the width for the entire table. Using it in the <td> tag will determine the width for that column of cells.

Note that if the table width is smaller than the content size, the system will ignore the specified widths.

Alignment on Page

To align the table on the right of the page, the align="right" tag can be added to the <table> tag.

Example: <table width="220" align="right">

To have text cleared from the right side of the table, use the <br clear="right" /> tag after the </table> tag.

Alignment of Text in Cells

Text may be aligned in cells vertically or horizontally with the align="left/center/right" and valign="top/middle/bottom/baseline" tags in the td tag. The choices tell it all, so I do not need to explain.

By default, the text is vertically aligned in the middle and horizontally aligned to the left.

Changing of color of background of cells

The color of the background of table cells bay be changed with the bgcolor="[hexadecimal code]" tag. A picture may be applied with the background="[image url]" tag. Both tags are applied within the <td> tag.

If the picture is too big to fit into the cell, the system determines which corner is visible based on the align attribute stated in the same <td> tag.

Cell padding and cell spacing

Cell padding is the space between the cell's contents and its border, while cell spacing is the space between two borders of a cell.

The tags can be used as cellpadding/cellspacing="[number of pixels]" in the <table> attribute.

Column span and Row span

The last tags are the colspan and rowspan tags. They allow cells to span across other cells located in the same row/column. Use these tags in the <td> attribute.

Here is an example table:

	Life cycles
	Stage 1	Stage 2	Stage 3	Stage 4
Butterfly life cycle	Egg	Caterpillar	Pupa	Butterfly
Mosquito life cycle	Egg	Larva	Pupa	Mosquito

Nice right?

And here is the full HTML programming for the above table:

(lol)
<table align="center" border="2" cellpadding="5" cellspacing="2" style="width: 120px;">
<tbody>
<tr>
<td bgcolor="fe79ad" rowspan="2"></td>
<td align="center" bgcolor="fe79ad" colspan="4">Life cycles</td>
</tr>
<tr>
<td bgcolor="fe7ca5">Stage 1</td>
<td bgcolor="fe7ca5">Stage 2</td>
<td bgcolor="fe7ca5">Stage 3</td>
<td bgcolor="fe7ca5">Stage 4</td>
</tr>
<tr>
<td bgcolor="feaaaa">Butterfly life cycle</td>
<td bgcolor="feaaaa">Egg</td>
<td bgcolor="feaaaa">Caterpillar</td>
<td bgcolor="feaaaa">Pupa</td>
<td bgcolor="feaaaa">Butterfly</td>
</tr>
<tr>
<td bgcolor="feccce">Mosquito life cycle</td>
<td bgcolor="feccce">Egg</td>
<td bgcolor="feccce">Larva</td>
<td bgcolor="feccce">Pupa</td>
<td bgcolor="feccce">Mosquito</td>
</tr>
</tbody></table>
</div>

See how complicated it is?

Oh well, I won't dwell on that.

8. <a href="URL">[text]</a>

This tag is used to add and define links. "URL" defines the webpage that the link will go to, while "text" defines the text the readers will see where the link is.

Example link: GOOGLE
HTML coding: <a href="https://www.blogger.com/www.google.com"><span style="color: blue;"><u>GOOGLE</u></span></a><br />

9. <div> in shapes

This is a rectangle. It is formed with the
<div style="border: blah; width: blah; height: blah;"> tag.

where "blah" refers to a number, followed by "px", meaning the number of pixels.

where "border" refers to the type of the border drawn. In this case, the border is 6 pixels wide (6px), solid with no holes (solid) and dark blue in color (#004).

<div> is the second tag after <span> that allows customization and blah of things like text and that random rectangle I drew above. It is much more complicated. The following are some examples.

Hello there. This is a "curved rectangle". It is formed with the
<div align="blah" style="border-radius: blah; border: blah blah #colorcode; height: blah; width: blah;"> tag. Notice the difference of the border from the rectangle above? It will be explained.

Types of formatting for various tags: Shapes!

border & border-radius — Collaborations

If you calculate precisely, you may end up creating a circle:

What
the heck? The text does not
align itself properly in here...

Well anyway, here is the coding:
<div style="align: center; border-radius: 180px; border: 4px solid #FF0; height: 360px; text-wrap: tight; width: 360px;">

Though I don't know why "text-wrap" isn't working...

Notice in the above example, where height and width are the same the border-radius is exactly half of any one.

border: [thickness] [border type] [color code]

There are quite a few border types that can be used:

"none" — for invisible text boxes

"dotted" — makes the border look like square dots with equally large holes in between.

"dashed" — makes the border look like lines with equidistant holes in between.

"solid" — makes the border a single, dark line.

"double" — makes the border double-lined.

"groove" — makes the shape border look like it is pressed inward.

"ridge" — makes the shape border look like it juts out.

"inset" — makes the shape look like it is pressed inward.

"outset" — makes the shape look like it juts out.

"hidden" — similar to "none", for invisible text boxes. The border is still present though.

More about "border"

Here are the properties available for "border":

—Style (explained)
—Width (explained)
—Color (explained)
—Setting different borders on each side for all three properties.

Setting different borders on each side for all three properties, use the following tags:

<border-top-width>, <border-bottom-width>, <border-left-width>, <border-right-width><border-top-style>, <border-bottom-style>, <border-left-style>, <boder-right-style><border-top-color>, <border-bottom-color>, <border-left-color>, <border-right-color><border-top-right-radius>, <border-top-left-radius>,<border-bottom-left-radius>, <border-bottom-right-radius>

I know it's boring, strange and quite not nice, but still...

This IS an out-of-the-ordinary rectangle.
Study the code carefully below. The red rectangle is defined as the "outline" in the code.

<div style="border-bottom-color: #F0F; border-bottom-left-radius: 70px; border-bottom-right-radius: 40px; border-bottom-style: outset; border-bottom-width: 8px; border-left-color: #0FF; border-left-style: solid; border-left-width: 4px; border-right-color: #DDCB9F; border-right-style: ridge; border-right-width: 14px; border-style: 5px inset #F0F; border-top-color: #F0F00F; border-top-left-radius: 40px; border-top-right-radius: 90px; border-top-style: double; border-top-width: 5px; height: 150px; outline: 5px inset red; width: 600px;">

So, you see...it's not easy AT ALL even just to create just this simple fancy little rectangle.

Well...we still have n-sided polygons to go...other than zero and four. Teehee. That is left for you to discover!

10. <dd>

<dd style="blah"> is used to format the text itself.

However, if you add <dd> to a line of text it does something like TAB to it. Also, if you use <dd> with background color or text color it does something glitchy.

Example One

Like so!

Notice the first "Like so!". Simply using the code <dd style="background-color: white;">Like so!</dd><br /> gives us that TAB thingy. Note that there must be something at the "style" tab or <dd> will just cancel itself out.

Example Two

Like so! Number Two!

See the second one? It appears that you CAN'T type anything just below it, because I had used the margin-bottom tag to expand the margin at its bottom. Also available are the following: margin-left, margin-right and margin-top.

Well, also notice the different margin-left length from the first. Examine the code below:

<dd style="background-color: white; margin-bottom: 34px; margin-left: 10px;">Like so! Number Two!</dd>

Do you see the "margin-left" tag? That explains it, right? The margin is no longer the default one, but a modified (custom) one at 10 pixels.

Example Three

Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colo

See the difference now? Try highlighting JUST the first line of text! Try highlighting the untyped area of text in the first line, on the left, or in the second line, on the right!

You'll find that that's impossible...reason because I've just brought in the margin-top, margin-left and margin-right tags to show you how they look like.

Here's the code:

<dd style="background-color: yellow; margin-left: 120px; margin-right: 50px; margin-top: 165px;">Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colours! Like so! With colo</dd>

Note that <span style="blah"> can also be used for certain tags that <dd style="blah"> encompass, like background-color.

11. Before I head on to the interesting part of the guide, here's how to add pictures without uploading them.

Uploading pictures frequently FLOOD your Picasa Web Albums page. Doing this can prevent that:

<img border="0" src="http://www.reactionface.info/sites/default/files/images/1287666826226.png" height="91" style="float: right; margin-left: auto; margin-right: auto;" width="100" /> </div>

And you get THIS:

Well... erm...uh...as you can see this image is now aligned to the left. It was NOT uploaded onto Blogger from my computer. Well...actually no one can prove it since uploaded images are just EASIER TO UPLOAD without the thing mentioned in my guide...well...while these images used the same CSS coding. Note that these un-uploaded images, when you customarily edit their width and height, can cause some issues. I tried with another image and it JUST SHOT ALL THE WAY UP THERE...

(turns out THIS THING AT THE CENTER is a bug too, and that you

JUST can't edit the picture's placement without making it shoot up.)

And since that thing is aligned to the right WITH TEXT ALL OVER IT...oh well...I can't go on to my most interesting part YET. YET.

12. <float>

Look at the above image of the ugly face. Text is flowing around it.

This shouldn't be possible with normal images, without some HTML editing.

The float tag is used in the <image style="float: left/right;"> tag. "center" appears to be buggy. BTW <float> can also happen to edit the image's alignment on the screen (like left, center or right).

UGGGGGGHHHH...JUST ONE MORE!

UNLUCKY NUMBER. Tooltip

Tooltip Number One

<a class="toolTippedText" href="http://chs6gentleness.blogspot.sg/p/html-editing.html" title="NEVER DIG STRAIGHT DOWN.">Tooltip Number One</a>

Tooltip Number Two

<a class="toolTippedText" href="http://chs6gentleness.blogspot.sg/p/html-editing.html" title="READ THE PREVIOUS ONE.">Tooltip Number Two</a><br />

They're kinda boring since I don't know how to edit their hover boxes.
P.S. Do not click on the links...I tried removing href="" but it doesn't work.

OK FINALLY. 14. JAVASCRIPT!!!!!!!

The first thing you need to do is to include the following tags:

</script>

If you find a  tag anywhere near these two tags, DELETE THEM. They are not required for MOST javascript tags, and including them will require the presence of line breaks which are fatal in the use of Blogger. Note that you should remove ALL line breaks, even the ones the editor adds.

Here is some basic Javascript. For more advanced versions, please check the JAVASCRIPT GUIDE that will be coming up. The following information is retrieved from Codeacademy:

.length > Find the length of a word, or words. Thing must be in quotes (""). Spaces are counted, along with punctuations.
+ - * / > Do math sums with JavaScript!
confirm("Your Text Here") > Create a Confirmation popup in your browser.
prompt("Your Text Here") > Creates a Question-Answer popup in your browser, similar to the Confirmation popup.
Strings > Strings are basically lines of text that appear in your coding. Surround all of them with quotes.
Numbers > You know what numbers are...don't surround them with quotes.
Booleans (true / false) > Booleans are either true or false, in response to a certain statement. They are used in comparison by adding " > " or " < " with the spaces between things you want to compare. They can include length of text, or numbers. Other comparison symbols may include " <= ", " >= ", " === ", and " !== ".
console.log ("Your text Here")> the command that "logs" (prints out on screen) whatever you type in the brackets following it.
if ((Condition e.g. "Flood" >= 6)) { (action) } > The meaning deduces it all...
else > if can have two ways of
alert > Acts like confirm.

For more JavaScript titles check the upcoming guide...I'm tired.

And that's the end! YAYAYAYAYAYAYAYAYAYAYA

6 Gentleness Blog

Post formatting and editing