[ShadowAce]

[PGalt]

Great post. Thanks. HTML education (I could use some) BUMP!

[BykrBayb]

2015 has some very informative posts. http://www.freerepublic.com/focus/f-chat/3242857/posts?page=150#150

[exit82]

Thanks, Shadow Ace—this is very helpful.

I learned a few new things here.

I think I’ll try some of these things in 2016.

Happy New Year to you!

[raybbr]

Why does it always have to be in a sandbox? I hate playing in the sand - can't stand the way it sticks to me.

[Yo-Yo]

Has the quote and apostrophe problem been fixed yet!

[Mycroft Holmes]

Screen Sizes

With the proliferation of display devices, screens now come in a wide variety of sizes and aspect ratios. The image below illustrates the range of screens possible. Differing aspect ratios are shown on the diagonal lines with the ratio in circles towards the lower right.

Given the wide variation in screen resolution and size when we step from mobi to fondleslab to display to HDTV it is lunacy to specify screen position in term of pixels. There is no way to know what sized screen you are imaging to so it is best to reference screen sizes and positions in percentages instead. The resulting size is the percentage of the width (or height) of the enclosing container. This is most useful when specifying positions and sizes of tables and images. The HTML for the image above looks like:

<img src="http://upload.wikimedia.org/wikipedia/commons/4/44/Vector_Video_Standards5.svg" width="95%">

The width="95%" part sets the image width to 95% of the width of the enclosing container. We leave the height unspecified so that the computer will figure out the correct value so as not to distort the image. If you wish to distort the image you may specify a height as well.

Things that are text related, such as the whitespace around a paragraph or header and text sizes are best specified in em. One em was originally the width of an M in the current font. In a multi-lingual world where not all alphabets have an M in them, the meaning has evolved to mean the height of the current font. As the user changes the magnification on a page the size of an em changes with it. This produces a pleasing scaled effect to the eye not possible when spacing objects in pixels.

Other unit values available are in inch, cm centimeter, mm millimeter, ex x-height of a font (x-height is usually about half the font-size), pt point - 1/72 of an inch, pc pica - 12 points and px pixels - a single dot on the screen. If no units are specified pixels are used by default. Best results across the broad spectrum of displays are achieved by exclusively using em and percent to specify size and distance. Try not to do anything else.

HTML 4.01

Any element (anything between tags) can be explicitly positioned by either putting it in a table or centering it <center></center>. Beyond that, explicit positioning is purposefully made as difficult as possible so that you won't do it. Your page will be displayed on a variety of devices of differing sizes and the less you constrain where the elements are positioned the better the general result will be across the broad spectrum of displays.

Inside tables you can use the attribute <td align="right"> ("left|right|center|justify|char") are acceptable values. The "char" option is mishandled by all the major browsers so it doesn't see much use. Align can also be used with images and horizontal rule, <img src="http://mumble.com/image.jpg" align="right"> will work. So will <hr align="right"> This is all in the HTML 4.01 idiom that we are trying to make go away.

To summarize, using HTML you can Center an element or put it in a table to control its position. This is why tables are wildly overused.

	Freedom ≠ Free Stuff☭
	I, for one, welcome our new Cybernetic Overlords /.
Mash Dobbshead® for HTML, bop Hello_Cthlhu for XAMPP

[novemberslady]

bkmk

[Made In The USA]

Thank you for this!

[Eddie01]

Thanks!
Bookmark.

[ThePatriotsFlag]

Thank you ... any way to make sure an image isn’t a couple of feet wide so it doesn’t mess up the entire thread with tiny, unreadable font?

[upchuck]

It's the name of the page or the picture that you see, the www.http:// stuff.

Shouldn't that be http://www. ?

[Fiddlstix]

HTML Help Threads & Other Info for Newbies
(And Anyone Else Who Needs It )
Just Click The Links Below For The Threads

• The HTML Campfire

• Formatting Messages with Outlook Express (HTML Bootcamp)

• HTML Sandbox (Original Thread)

• HTML Sandbox (Thread Two)

• HTML Sandbox (Thread Three)

• HTML Sandbox (Thread Four)

• HTML Sandbox (Thread Five)

• HTML Sandbox 2008

• HTML Sandbox 2010

• HTML Sandbox 2011

• HTML Sandbox 2013

• HTML Sandbox 2014

• HTML Sandbox 2015

• HTML Sandbox 2016

• Reference HTML Cheatsheet

These are the current active threads.
Most of the older HTML Bootcamp and
HTML Campfire Threads are no longer active links.
Those have been removed over time.

Fiddlstix ©

Also This for New Freepers

• Fifth Edition of the Lexicon of FreeRepublic * A helpful FR dictionary for newcomers

• FREEREPUBLIC LEXICON (FReeper Lingo, Dictionary, Lore Handbook)

• Updated FR Excerpt and Link Only or Deny Posting List due to Copyright Complaints

• Way too many duplicates and vanities. Please read - again. (Welcome Newbies)

• Posting refresher course - Please read

• The Proper Care and Feeding of the Free Republic Keyword Feature

Fiddlstix ©

Even More Info For New Freepers

• Nully's Quick FR HTML Guide

• HTML Goodies Tutorials

• HTML Special Characters

• HTML Colors Chart

• Windows Keyboard Shortcuts

• FReeper Mycroft_Holmes FR Page
  (Very Good Info HTML, Java, SQL, Etc.)

Fiddlstix ©

[IronJack]

bookmark for reference

[keat]

bfl

[tubebender]

BOOKMARKED!!!

[ColdOne]

Thank you....bookmarked.

[tubebender]

I use Flickr for FR photos and it formats the HTML for me

[going hot]

img src =”https://upload.wikimedia.org/wikipedia/en/thumb/f/f4/Daffy_Duck.svg/300px-Daffy_Duck.svg.png “ />

[Grampa Dave]

Great post!

Thanks and Happy New Year!