Rainmaker Web Design » HTML http://rainmakerwebdesign.com Web Design & Development - from Athens, GA Thu, 22 Dec 2011 05:38:41 +0000 en hourly 1 http://wordpress.org/?v=3.1 WordPress HTML Cheat-sheet http://rainmakerwebdesign.com/html/wordpress-html-cheat-sheet/ http://rainmakerwebdesign.com/html/wordpress-html-cheat-sheet/#comments Fri, 26 Feb 2010 19:35:40 +0000 Wade Sonenberg http://rainmakerwebdesign.com/?p=432 I’m putting this little post together to help my clients on WordPress, and hopefully a few other folks out there when composing WordPress posts and pages.  Please comment below with questions/additions, as I’ll continue updating this post.

Audience:
This cheat-sheet is intended for users using the WordPress CMS, and would like to have a bit more control over the layout and formatting.  It is not a complete guide to HTML, rather is focused on HTML formatting for using the WordPress post and page functions.

Scope:
We will be reviewing how to better format content within the Visual and HTML tabs for WordPress pages and posts, relying on WP’s built in rich text editor, a few HTML snippets, and a basic synopsis of CSS styles as they are relevant. Things such as Doctype and <head> tags that are not editable from the editor will not be covered.

Image styling & galleries

Uploading and inserting an image in WordPress is very straightforward (see here if you have trouble).  Styling it once it’s in the post:

Floating an image

Floating means that all other page content including text, etc., will wrap around the floated element (an image in this case).

Code:

<img style=”float:right;” src=”http://rainmakerwebdesign.com/wp-content/uploads/2010/02/wordpresslogo1.png” alt=”Wordpress Logo” />

Example:

Wordpress LogoThis is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Giving it a border and/or padding

A simple way to dress images up a bit, is to give them a border and/or padding. Borders can be any pixel amount in width, either solid, dotted, or dashed, and can be colored using HTML hex codes or by simply declaring white, red, blue, etc as is done below in the background style.
Code:

<img style=”border:2px solid #1D3A4F;background:white;padding:5px;float:right;” src=”http://rainmakerwebdesign.com/wp-content/uploads/2010/02/wordpresslogo1.png” alt=”Wordpress Logo” />

Example:

Wordpress LogoThis is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Margins: the key to using white space

Text bumping up against images and other elements can sometimes be confusing to the eye, a simple way to fix this is by using margins. Remember, margin values are are like a clock, they start at 12 O’clock high and run clockwise. (e.i. – top, right, bottom, left)
Code:

<img style=”margin:20px 15px 15px 50px;float:right;” src=”http://rainmakerwebdesign.com/wp-content/uploads/2010/02/wordpresslogo1.png” alt=”Wordpress Logo” />

Example:

Wordpress LogoThis is example text: “Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inserting Galleries

Inserting photo galleries could not be easier since WP 2.5. Simply use your upload/insert button to upload your images to a post. Simply use the “Gallery” tab to select options, or use the HTML syntax below:
Code:

[/gallery columns="4"/]
or link to the file:
[/gallery link="file" columns="4"/]
* you have to remove the slashes (/) for it to work!

Example:

wordpresslogo1 wordpresslogo2 wordpresslogo3
Or, link to file
wordpresslogo1 wordpresslogo2 wordpresslogo3

Text styling

Boxes = Div’s

There are any number of scenarios in which you’ll want to create a box.  Boxes in HTML are made using the <div> tag, and can contain text, images, and nearly anything.  You may add margin, padding, borders, and background just like the images above. Here’s a couple examples:
Code:

<div style=”height:50px;width:400px;border:2px solid red;background:pink;padding:10px;”>Alert: This could be an error message!</div>

Example:

Alert: This could be an error message!

Code:

<div style=”width:80%;border:3px dashed green;background:white;padding:10px 30px 10px 30px;”>Congrats: This could be an success message!</div>

Example:

Alert: This could be an error message!

Paragraphs

Just like in a book or a magazine, paragraphs are blocks of texts that you may style to your liking. You may add borders, backgrounds, padding, and margins just like above. Also, you may add text indentation, line height, text alignment, etc.
Code:

<p style=”text-indent:50px;”>This is a paragraph with the text indented 50 pixels. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.</p>

Example:

This is a paragraph with the text indented 50 pixels. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.

Code:

<p style=”line-height:50px;text-align:center;”>This is a paragraph using a line height of 50 pixels and centering the text. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.</p>

Example:

This is a paragraph with the text indented 50 pixels. Now for some sample text (disregard, for display only) to demonstrate how the next line falls back into place with regular padding and margins set up in your theme, etc.

Header tags (H1 – H6)

Header tags are a great way to organize your content. Use them to separate your posts and pages hierarchically with the H1 tag at the top, and lesser tags below. *Note: Most themes have styles already created for these tags, but you can always customize them using the style=”" attributes like above and below.
Code:

<h1>This is an H1 tag</h1>
<h2>This is an H2 tag</h2>
<h3>This is an H3 tag</h3>
<h4>This is an H4 tag</h4>
<h5>This is an H5 tag</h5>
<h6>This is an H6 tag</h6>

Example:

This is an H1 tag

This is an H2 tag

This is an H3 tag

This is an H4 tag

This is an H5 tag
This is an H6 tag

Italics

Just use the emphasis tag, <em>
Code:

<em>This is italic text<em>

Example:

This is italic text

Underlined Text

Easiest way to underline, is to add the “text-decoration” attribute:
Code:

<p style=”text-decoration:underline;”>This is underlined text<em>

Example:

This is underlined text

Strike through

Code:

<strike>This is text with a strike through</strike>

Example:

This is text with a strike through

Links

Hyperlinks, or links for short, are what make HTML different than any other medium. Links are handled with the <a> tag, and the “href” attribute is the address of the page you would like to link to. Here’s a simple example:
Code:

<a href=”http://google.com”>Take me to google</a>

Example:

Take me to google

Title attribute

When a visitor hovers over your link, it’s nice to have give them a little info about what they would be clicking on if they do so. Different browsers (IE, Firefox, Safari) handle this a little differently, however it usually hovers a tooltip with the title of the link near the mouse pointer.
Code:

<a href=”http://google.com” title=”If you’re reading this, you are seeing this link’s title”>Take me to google</a>

Example:

Take me to google

Opening in a new window

Though it’s not always recommended, sometimes you want to open links in a new window or browser tab. For example, if you want to open a link that goes away from your website or blog. It’s done by setting a target attribute for the link, we’ll use blank as it’s the most common (and don’t forget the preceding underscore). *It’s highly discouraged to ever use new windows with links that go to within the same site
Code:

<a href=”http://google.com” target=”_blank”>Take me to google</a>

Example:

Take me to google in a new window

A note about Microsoft Word

This cheat-sheet is intended for users using the WordPress CMS, and would like to have a bit more control over the layout and formatting.  It is not a complete guide to HTML, rather is focused on HTML formatting for using the WordPress post and page functions.  Hint: it’s the icon with the clipboard and MS Word logo on it.

]]> http://rainmakerwebdesign.com/html/wordpress-html-cheat-sheet/feed/ 0 Internet Explorer 6's last nail in the coffin: Google http://rainmakerwebdesign.com/html/internet-explorer-6s-last-nail-in-the-coffin-google/ http://rainmakerwebdesign.com/html/internet-explorer-6s-last-nail-in-the-coffin-google/#comments Wed, 03 Feb 2010 03:55:35 +0000 Wade Sonenberg http://rainmakerwebdesign.com/?p=422 What’s the #1 reason I enjoy doing back end programming instead of front end design? No, it’s not my lackluster aptitude at graphic design - it’s internet explorer version 6.

See, IE6 thinks it’s better than everybody else, and I’m thankful to the lord that even Big G is now backing up.  It ignores internet wide standards like xhtml and css, and follows it’s own rules. Yesterday, Google announced that it is ending it’s support for IE 6!  The version 6 basher’s list is long and somewhat illustrious, even including it’s developer – Microsoft.

In short, I’ll save you guys the techno explanation of why IE6 is bain of all web designers’ existence – and just say that over 20% of front-end development time goes into bug fixing and hacking custom scripts and styles for a program that was released before those bastards took out the twin towers.

At some point, we’re going to have to enact a surcharge for IE 6 compliance – and I wonder how many other firms are already doing this or forgetting IE 6 entirely?

]]> http://rainmakerwebdesign.com/html/internet-explorer-6s-last-nail-in-the-coffin-google/feed/ 0 States HTML Select List w/ PHP Selected Value http://rainmakerwebdesign.com/html/states-html-select-list-w-php-selected-value/ http://rainmakerwebdesign.com/html/states-html-select-list-w-php-selected-value/#comments Sun, 31 Jan 2010 21:39:03 +0000 Wade Sonenberg http://rainmakerwebdesign.com/?p=405 I always have trouble finding this, so here it is. The if statement in the checkState() function can be replaced with anything you like to select the option by default…

<?
function checkState($state) {
  if ($row['state'] == $state) {
    echo ' selected="selected"';
  }
}
?>

<select name="state" id="state">
 <option value="--"<? checkState('') ?>>Select...</option>
 <option value="AL"<? checkState('AL'); ?>>Alabama</option>
 <option value="AK"<? checkState('AK'); ?>>Alaska</option>
 <option value="AZ"<? checkState('AZ'); ?>>Arizona</option>
 <option value="AR"<? checkState('AR'); ?>>Arkansas</option>
 <option value="CA"<? checkState('CA'); ?>>California</option>
 <option value="CO"<? checkState('CO'); ?>>Colorado</option>
 <option value="CT"<? checkState('CT'); ?>>Connecticut</option>
 <option value="DE"<? checkState('DE'); ?>>Delaware</option>
 <option value="DC"<? checkState('DC'); ?>>District Of Columbia</option>
 <option value="FL"<? checkState('FL'); ?>>Florida</option>
 <option value="GA"<? checkState('GA'); ?>>Georgia</option>
 <option value="HI"<? checkState('HI'); ?>>Hawaii</option>
 <option value="ID"<? checkState('ID'); ?>>Idaho</option>
 <option value="IL"<? checkState('IL'); ?>>Illinois</option>
 <option value="IN"<? checkState('IN'); ?>>Indiana</option>
 <option value="IA"<? checkState('IA'); ?>>Iowa</option>
 <option value="KS"<? checkState('KS'); ?>>Kansas</option>
 <option value="KY"<? checkState('KY'); ?>>Kentucky</option>
 <option value="LA"<? checkState('LA'); ?>>Louisiana</option>
 <option value="ME"<? checkState('ME'); ?>>Maine</option>
 <option value="MD"<? checkState('MD'); ?>>Maryland</option>
 <option value="MA"<? checkState('MA'); ?>>Massachusetts</option>
 <option value="MI"<? checkState('MI'); ?>>Michigan</option>
 <option value="MN"<? checkState('MN'); ?>>Minnesota</option>
 <option value="MS"<? checkState('MS'); ?>>Mississippi</option>
 <option value="MO"<? checkState('MO'); ?>>Missouri</option>
 <option value="MT"<? checkState('MT'); ?>>Montana</option>
 <option value="NE"<? checkState('NE'); ?>>Nebraska</option>
 <option value="NV"<? checkState('NV'); ?>>Nevada</option>
 <option value="NH"<? checkState('NH'); ?>>New Hampshire</option>
 <option value="NJ"<? checkState('NJ'); ?>>New Jersey</option>
 <option value="NM"<? checkState('NM'); ?>>New Mexico</option>
 <option value="NY"<? checkState('NY'); ?>>New York</option>
 <option value="NC"<? checkState('NC'); ?>>North Carolina</option>
 <option value="ND"<? checkState('ND'); ?>>North Dakota</option>
 <option value="OH"<? checkState('OH'); ?>>Ohio</option>
 <option value="OK"<? checkState('OK'); ?>>Oklahoma</option>
 <option value="OR"<? checkState('OR'); ?>>Oregon</option>
 <option value="PA"<? checkState('PA'); ?>>Pennsylvania</option>
 <option value="RI"<? checkState('RI'); ?>>Rhode Island</option>
 <option value="SC"<? checkState('SC'); ?>>South Carolina</option>
 <option value="SD"<? checkState('SD'); ?>>South Dakota</option>
 <option value="TN"<? checkState('TN'); ?>>Tennessee</option>
 <option value="TX"<? checkState('TX'); ?>>Texas</option>
 <option value="UT"<? checkState('UT'); ?>>Utah</option>
 <option value="VT"<? checkState('VT'); ?>>Vermont</option>
 <option value="VA"<? checkState('VA'); ?>>Virginia</option>
 <option value="WA"<? checkState('WA'); ?>>Washington</option>
 <option value="WV"<? checkState('WV'); ?>>West Virginia</option>
 <option value="WI"<? checkState('WI'); ?>>Wisconsin</option>
 <option value="WY"<? checkState('WY'); ?>>Wyoming</option>
</select>
]]> http://rainmakerwebdesign.com/html/states-html-select-list-w-php-selected-value/feed/ 0