{"id":13412,"date":"2015-04-09T05:03:22","date_gmt":"2015-04-08T19:03:22","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13412"},"modified":"2015-04-09T05:03:22","modified_gmt":"2015-04-08T19:03:22","slug":"html-whitespace-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-whitespace-primer-tutorial\/","title":{"rendered":"HTML Whitespace Primer Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Whitespace Primer Tutorial<\/p><\/div>\n

Whitespace in HTML can be a very confusing area for web developers, especially when HTML elements float<\/i><\/a>. Even though there are lots of facilities in CSS to overcome the whitespace issues to do with margin<\/i><\/a>, padding<\/i><\/a> and even border<\/i><\/a> (in a less direct way), lots of times we like the more direct ideas of WYSIWYG<\/a> and try to fix issues just using HTML methods, and this sounds fair enough to me … but consider the Good Look Vs Bad Look (of HTML Canvas Golf Accuracy Game Primer Tutorial<\/a>) below …<\/p>\n

——————- Good Look below ————————-<\/p>\n

The HTML Canvas<\/a> element is great for games where you draw your own graphics based on interaction from the user … a great tool to have in your GUI toolbox … <\/p>\n

\nyou download an app and start playing.\n<\/p><\/blockquote>\n

<\/p>\n

A lot of the logic of these games stem from when a user clicks on the canvas<\/i> element … translation:
\n <\/p>\n

\ndon’t read any rules of the game and just start clicking away man<\/strike> … person.\n<\/p><\/blockquote>\n

<\/p>\n

Lots of these games are based on sport … translation:
\n 
\n 
\n 
\n <\/p>\n

\ndoh! show me the ball! show me the ball!\n<\/p><\/blockquote>\n

<\/p>\n

And quite often that sport is golf … translation:
\n 
\n 
\n <\/p>\n

\npass me the plus fours man<\/strike> … person … and forget the rules … show me the ball! show me the ball!\n<\/p><\/blockquote>\n

<\/p>\n

Today, if you’d like to play<\/a>, we get the user to click twice to simulate the start and end position of their golf shot, the direction and size of which is predetermined, and shown to them … translation:
\n <\/p>\n

\nwhat?! no ball … well then, show me the wrestler.\n<\/p><\/blockquote>\n

<\/p>\n

Today we don’t show a ball, as such … it’s too small … translation:
\n 
\n <\/p>\n

\nwe need this room for another meeting.
\n \n<\/p><\/blockquote>\n

<\/p>\n

Hope you enjoy playing the game derived from golfshotcanvas.html<\/a> … you start with score of 3000 and excel by how many goes you survive with a score … translation: <\/p>\n

\nbye.
\n 
\nturn out the lights as you go.\n<\/p><\/blockquote>\n

<\/p>\n

If you’re looking for grass<\/a> man<\/strike> … person … the free background image came from http:\/\/all-free-download.com\/free-photos\/<\/a> and then was modified for use here via Gimp (good old Gimp … reduction in Opacity to 40%) … thanks … translation:\n<\/p>\n

<\/p>\n

There are night golf ranges you know!!!!<\/p>\n

——————- Bad Look below ————————–<\/p>\n

The HTML Canvas<\/a> element is great for games where you draw your own graphics based on interaction from the user … a great tool to have in your GUI toolbox … <\/p>\n

\nyou download an app and start playing.\n<\/p><\/blockquote>\n

<\/p>\n

A lot of the logic of these games stem from when a user clicks on the canvas<\/i> element … translation: <\/p>\n

\ndon’t read any rules of the game and just start clicking away man<\/strike> … person.\n<\/p><\/blockquote>\n

<\/p>\n

Lots of these games are based on sport … translation: <\/p>\n

\ndoh! show me the ball! show me the ball!\n<\/p><\/blockquote>\n

<\/p>\n

And quite often that sport is golf … translation: <\/p>\n

\npass me the plus fours man<\/strike> … person … and forget the rules … show me the ball! show me the ball!\n<\/p><\/blockquote>\n

<\/p>\n

Today, if you’d like to play<\/a>, we get the user to click twice to simulate the start and end position of their golf shot, the direction and size of which is predetermined, and shown to them … translation: <\/p>\n

\nwhat?! no ball … well then, show me the wrestler.\n<\/p><\/blockquote>\n

<\/p>\n

Today we don’t show a ball, as such … it’s too small … translation: <\/p>\n

\nwe need this room for another meeting.<\/p>\n<\/blockquote>\n

<\/p>\n

Hope you enjoy playing the game derived from golfshotcanvas.html<\/a> … you start with score of 3000 and excel by how many goes you survive with a score … translation: <\/p>\n

\nbye.<\/p>\n

turn out the lights as you go.\n<\/p><\/blockquote>\n

<\/p>\n

If you’re looking for grass<\/a> man<\/strike> … person … the free background image came from http:\/\/all-free-download.com\/free-photos\/<\/a> and then was modified for use here via Gimp (good old Gimp … reduction in Opacity to 40%) … thanks … translation:\n<\/p>\n

<\/p>\n

There are night golf ranges you know!!!!<\/p>\n

\n 
\n 
\n 
\n——————— HTML Code Looks Like ——————————-<\/p>\n\n\n\n
Good Look of Code<\/th>\nBad Look of Code<\/th>\n<\/tr>\n
\n
\n<p>Lots of these games are based on sport ... translation:
\n&nbsp;
\n&nbsp;
\n&nbsp;
\n&nbsp;
\n<blockquote class=\"rightbq\">
\ndoh! show me the ball! show me the ball!
\n<\/blockquote>
\n<\/p>
\n<\/code>\n<\/td>\n		\n
\n<p>Lots of these games are based on sport ... translation:
\n 
\n 
\n 
\n 
\n<blockquote class=\"rightbq\">
\ndoh! show me the ball! show me the ball!
\n<\/blockquote>
\n<\/p>
\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n

The only difference between these looks is to do with the use (or not) of non-breaking space<\/i><\/a> (functionality) via the (use of) HTML entity<\/a> &nbsp;<\/i> in the “Good Look” version, only … without resorting to CSS (and only using HTML) and coming across the need to insert a blank line (that takes up space), with the current rendering rules of the web browsers, this is the solution to the problem of lack of whitespace when you need it … and you guess that if &nbsp;<\/i> has been used a lot and you want less whitespace about, it may be that to substitute the “&nbsp;<\/i>” for “” solves your problem.<\/p>\n

Here is a Wikipedia list<\/a> of XML and HTML entities, and we talked a bit about all this with HTML Entities Primer Tutorial<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n