HTML Tags

HTML Tags

Return To Utilities

Table Of Contents

Whitespace

Comments

Paragraphs

...

Text Alignment within a paragraph

Line Breaks within a paragraph

Drop Caps

Miscellany (for example Italicize )

Indented Quotations

In-Line Quotation Boxes

The new

tag

Images in general

Images without captions

Image margins

Images with captions

Caption editing

Image size

Image Thumbnails

Special Characters (for example, ¥)

W3C Icons ()

Whitespace

Whitespace is ignored in HTML.

So ...

Sea ne ludus omnes, ius ea volutpat posidonium.

Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.

... produces

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.

This allows you to format your HTML for readability, which I highly recommend.

Comments

Comments begin with

So ...

This is the following text

... produces

This is the following text

Paragraphs

Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs.

So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim,

ea

diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui

habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique

abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum

dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim,

ea

diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique

abhorreant

solum

dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut

quod

tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis,

est

hinc

fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere

recusabo

intellegebat

duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse

assueverit deterruisset, nobis

philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te

pro

choroduis choro et.

... produces

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea

diam

quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique

abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum

dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

Possible Values For text-align

Value

Description

left

Aligns the text to the left

right

Aligns the text to the right

center

Centers the text

justify

Right-justifies the text (default)

Line Breaks

produces a line break within paragraphs.

So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas

ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est

hinc

fastidii an

... produces

Sea ne ludus omnes, ius ea volutpat posidonium.

Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.

Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one.

Use

instead of

when you want two segments of a single paragraph to flow around an image.

Drop Caps

The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces

John Bogle ...

Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ?

Blockquotes

The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim,

ea

diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

,

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique

abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum

dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea

diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique

abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum

dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

In-Line Quotation Boxes

style="width: 175px; padding:5px;border-collapse: separate;border-spacing: 7px;*border-collapse: expression('separate', cellSpacing =

'7px');background-color:#ffffcc; margin:10px;" border="1">

src="https://www.philadelphia-reflections.com/images/startquote.gif" alt="{top quote}" /> Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. src="https://www.philadelphia-reflections.com/images/endquote.gif" alt="{bottom quote}" />

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below.

(The caption is optional.)

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there.

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there.

Bertrand Russell

If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from

blog 810).

style="width: 175px; padding:5px;border-collapse: separate;border-spacing: 7px;*border-collapse: expression('separate', cellSpacing =

'7px');background-color:#ffffcc; margin:10px;" border="1">

src="https://www.philadelphia-reflections.com/images/startquote.gif" alt="{top quote}" /> DESCRIPTION: HTML Tags src="https://www.philadelphia-reflections.com/images/endquote.gif" alt="{bottom quote}" />

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there.

Defense lawyers frequently suggest reforms of the law which would make their job easier

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there.

Dr. Fisher

The new

tag

Please note that you can shift the image

to the left with

to the right with

Miscellaneous Tags

Source

Output

Teletype text

Teletype text

Italic text

Italic text

Bold text

Bold text

Big text

Big text

Small text

Small text

Underlined text

Underlined text

This text contains _subscript

This text contains subscript

This text contains ^superscript

This text contains superscript

 ... 

Presented exactly as typed in

(horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically:

OK: Bold, italic

Not OK: Bold, italic

Images

Images are inserted using the tag. There are 3 required attributes:

src= specifies source of the image. Either

a URL (https:// ...) ,which pulls in a picture from the Internet

r else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website

alt= provides keywords for Google and other search engines to use to index the image (5 or fewer)

the /> at the end

So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols HTML Tags Return To Utilities Table Of Contents Whitespace Comments Paragraphs

...

Text Alignment within a paragraph Line Breaks within a paragraph
Drop Caps Miscellany (for example Italicize ) Indented Quotations

In-Line Quotation Boxes The new

tag Images in general Images without captions Image margins Images with captions Caption editing Image size Image Thumbnails Special Characters (for example, ¥) W3C Icons () Whitespace Whitespace is ignored in HTML. So ... Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. ... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. This allows you to format your HTML for readability, which I highly recommend. Comments Comments begin with So ... This is the following text ... produces This is the following text Paragraphs Paragraphs should always begin with

and end with

. These tags provide line breaks between the paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Paragraph tags can have style="..." attributes to format the paragraph. For example,

Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. Possible Values For text-align Value Description left Aligns the text to the left right Aligns the text to the right center Centers the text justify Right-justifies the text (default) Line Breaks
produces a line break within paragraphs. So ...

Sea ne ludus omnes, ius ea volutpat posidonium.
Vis an omnium consulatu. Omnes eleifend consequuntur ne mel.
Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex.

Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Putting

in the middle of a paragraph looks the same as ending one paragraph and starting a new one. Use

instead of

when you want two segments of a single paragraph to flow around an image. Drop Caps The easiest way to give a paragraph a drop cap is as follows:

John Bogle ...

... which produces John Bogle ... Sometimes images or links preceding the first letter of a paragraph cause problems with the simple method. In that case, use the following:

John Bogle ...

John Bogle ... ? Blockquotes The

tag defines the start of a long quotation, indented. It surrounds one or more paragraphs.

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et.

... produces Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Qui habeo decore consequuntur an, ad nec nemore signiferumque. Ut munere recusabo intellegebat duo, ex tota rebum everti cum. Tibique abhorreant appellantur pro cu, eius salutandi id duo. Est cu noluisse assueverit deterruisset, nobis philosophia ad per. Eos ea quis solum dicant, duo dolore meliore indoctum an. Nam ne erant latine, te pro choro aliquyam intellegat, qui quod duis choro et. In-Line Quotation Boxes

Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric.

Bertrand Russell

If you put this sequence into a blog, Modify An Existing Blog will transform it into what you see below. (The caption is optional.) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Do not fear to be eccentric in opinion, for every opinion now accepted was once eccentric. We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Bertrand Russell If you would like simply to pull the blurb (description, RSS, whatever you call it) into the ILQ for you, you say the following (drawn from blog 810).

DESCRIPTION: HTML Tags

Dr. Fisher

We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Defense lawyers frequently suggest reforms of the law which would make their job easier We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Dr. Fisher The new

tag

Please note that you can shift the image to the left with

to the right with

Miscellaneous Tags Source Output Teletype text Teletype text Italic text Italic text Bold text Bold text Big text Big text Small text Small text Underlined text Underlined text This text contains _subscript This text contains subscript This text contains ^superscript This text contains superscript

 ... 

Presented exactly as typed in (horizontal rule/line)

---

These tags can be combined, just be sure to nest them symmetrically: OK: Bold, italic Not OK: Bold, italic Images Images are inserted using the tag. There are 3 required attributes: src= specifies source of the image. Either a URL (https:// ...) ,which pulls in a picture from the Internet or else "images/...", which pulls the image in from the "images" folder of the Philadelphia Reflections website alt= provides keywords for Google and other search engines to use to index the image (5 or fewer) the /> at the end So ...

images/vanguard_investments_logo.gif

... is a basic image tag Images can be left or right adjusted, and they can be with or without captions. Left and right adjustment without captions

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Notice that the only difference is the inclusion of class="right". Nothing else is different. Image Margins Images have the space around them defined by the website's style sheets. If you want all images to behave in a different way, I can change the style sheet and the every image in the website will be affected. This is the beauty of style sheets and they are generally preferable to styling individual elements. However, if there is a compelling reason to control the space around a particular image, include the following parameter, where npx means n pixels. You can also say nin to use inches instead of pixels. style="margin-top: npx; margin-bottom: npx; margin-left: npx; margin-right: npx" style="margin: npx" does all 4 margins in one fell swoop If you want to get really fancy, you should know that the space around an image is actually defined in two "layers": A margin around the image A border inside the margin (The books will tell you about a third layer, padding, that separates the image from the border but it doesn't work for images in IE 4.0+, so if you use padding with images you will get unpredictable results.) The border can have the following properties: none hidden dotted dashed solid double groove ridge inset outset For example:

images/1787.jpg

... produces (background color made "gray" here just to illustrate) We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Guess what? You can control the color and width of the border, too ... go to https://www.w3schools.com/ if you're starting to get hooked on this stuff. Left and right adjustment with captions

(please note: tables can't be inside a

)

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Whereas ...

images/vanguard_investments_logo.gif

This is the caption

Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an.

... produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. This is the caption Sea ne ludus omnes, ius ea volutpat posidonium. Vis an omnium consulatu. Omnes eleifend consequuntur ne mel. Ut quod tantas ancillae vim, ea diam quidam causae nec, dicunt habemus philosophia mel ex. Vero phaedrum no vis, sea ea illum singulis, est hinc fastidii an. Please note that you will often have to break the captioninto segments using
because it won't wrap the way you want it to automatically. Width and height of images sometimes need to be adjusted (the numbers are in pixels):

images/vanguard_investments_logo.gif

...produces We can't paste this image from the Clipboard, but you can save it to your computer and insert it from there. Obviously, aspect ratio needs to be considered (I have a handy little thing called Screen Ruler which pops up a translucent pixel ruler to measure these things with on a screen, which is how I came up with 145 and 60) Image Thumbnails 50 pixel thumbnails Float to the right 50 pixels tall class="tn-r-h50" 50 pixels wide class="tn-r-w50" Float to the left 50 pixels tall class="tn-l-h50" 50 pixels wide class="tn-l-w50" 100 pixel thumbnails Float to the right 100 pixels tall class="tn-r-h100" 100 pixels wide class="tn-r-w100" Float to the left 100 pixels tall class="tn-l-h100" 100 pixels wide class="tn-l-w100" 200 pixel thumbnails Float to the right 200 pixels tall class="tn-r-h200" 200 pixels wide class="tn-r-w200" Float to the left 200 pixels tall class="tn-l-h200" 200 pixels wide class="tn-l-w200" Escape Characters Many symbols do not appear on your keyboard (€) while some have special meaning to HTML (<) and can cause problems in certain instances. For such characters, there are escape codes. The complete list can be found at https://www.theukwebdesigncompany.com/articles/entity-escape-characters.php, some common ones are listed here. You can use either the "Code" or the "Entity Name" (if there is one), the latter makes for more readability inside your code and is preferred: Symbol Code Entity Name € € & & & < < < > > > @ @ Non-breaking space     ¡ ¡ ¡ ¢ ¢ ¢ £ £ £ ¤ ¤ ¤ ¥ ¥ ¥ § § § © © © ª ª ª « « ¬ ¬ ¬ ­ ­ ® ® ® ° ° ° ± ± ± ² ² ² ³ ³ ³ ´ ´ ´ µ µ µ ¶ ¶ ¶ ¹ ¹ ¹ º º º » » » ¼ ¼ ¼ ½ ½ ½ ¾ ¾ ¾ ¿ ¿ ¿ Æ Æ Æ ß ß ß æ æ æ ÷ ÷ ÷ œ œ W3C Icons W3C HTML predefined icon-like symbols This part is where you enter your content

The text below demonstrates the use of various HTML tags; replace it with your own.

Quasi ego id curem, quid ille aiat aut neget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An potest, inquit ille, quicquam esse suavius quam nihil dolere? Verba tu fingas et ea dicas, quae non sentias? Duo Reges: constructio interrete. Videamus igitur sententias eorum, tum ad verba redeamus. Num quid tale Democritus? Quis est tam dissimile homini. Quantum Aristoxeni ingenium consumptum videmus in musicis?

1. Totum autem id externum est, et quod externum, id in casu est.
2. Summum a vobis bonum voluptas dicitur.
3. Praeclare Laelius, et recte sofñw, illudque vere: O Publi, o gurges, Galloni! es homo miser, inquit.
4. Quo tandem modo?
5. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus?

Tibi hoc incredibile, quod beatissimum. Cum audissem Antiochum, Brute, ut solebam, cum M. Aperiendum est igitur, quid sit voluptas; Sed tamen est aliquid, quod nobis non liceat, liceat illis.

• Estne, quaeso, inquam, sitienti in bibendo voluptas?
• Sunt enim quasi prima elementa naturae, quibus ubertas orationis adhiberi vix potest, nec equidem eam cogito consectari.
• Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio.

Ait enim se, si uratur, Quam hoc suave! dicturum.

Sit enim idem caecus, debilis. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Re mihi non aeque satisfacit, et quidem locis pluribus. An tu me de L.

Ego autem tibi, Piso, assentior usu hoc venire, ut acrius aliquanto et attentius de claris viris locorum admonitu cogitemus.

Originally published: Wednesday, July 31, 2019; most-recently modified: Thursday, August 08, 2019