eAbhyas

Posts

Showing posts with the label HTML5

CSS margin property - Clarification margin: 0 0 10px;

In this post we will going to explain the CSS margin property margin: 0 0 10px; The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. CSS margin short hand code can be a bit confusing at first. margin: 0 0 10px; Top margin = 0 Right/Left margin = 0 Bottom margin = 10px or pixels margin: 30px; //All four margins are 30px margin: 10px 40px; //Top & Bottom margin = 10px, left & right = 40 margin: 10px 20px 30px; // top=10, left/right=20, bottom=30 margin: 10px 20px 10px 20px; // Top=10, Right=20, Bottom=10, Left=10

Country dropdown list - HTML select/dropdown snippet

Country dropdown list with country name as value: <!-- Country dropdown list by ahandy --!> <select> <option value="Afghanistan">Afghanistan</option> <option value="Albania">Albania</option> <option value="Algeria">Algeria</option> <option value="American Samoa">American Samoa</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Anguilla">Anguilla</option> <option value="Antartica">Antarctica</option> <option value="Antigua and Barbuda">Antigua and Barbuda</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Ar...

HTML5 Features - The Semantic Header and Footer

10. The Semantic Header and Footer Gone are the days of: view plain copy to clipboard print ? < div id = "header" > ... </ div > < div id = "footer" > ... </ div > Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with: view plain copy to clipboard print ? < header > ... </ header > < footer > ... </ footer > It’s fully appropriate to have multiple header s and footer s in your projects. Try not to confuse these elements with the “header” and “footer” of your website. They simp...

HTML5 Features - Email Inputs

9. Local Storage Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed. “localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.” - QuirksBlog While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists. via http://www.findmebyip.com/litmus/

HTML5 Features - Placeholders

8. Placeholders Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this. < input name = "email" type = "email" placeholder = "doug@givethesepeopleair.com" /> Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

HTML5 Features - Email Inputs

7. Email Inputs If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox. <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > untitled </ title > </ head > < body > < form action = "" method = "get" > < label for = "email" > Email: </ label > ...

HTML5 Features - Make your Content Editable

6. Make your Content Editable The new browsers have a nifty new attribute that can be applied to elements, called contenteditable . As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage. <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > untitled </ title > </ head > < body > < h2 > To-Do List </ h2 > < ul contenteditable = "true" > < li...

HTML5 Features - To Quote or Not to Quote.

5. To Quote or Not to Quote. That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself. < p class = myClass id = someId > Start the reactor. Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

HTML5 Features - No More Types for Scripts and Links

4. No More Types for Scripts and Links You possibly still add the type attribute to your link and script tags. < link rel = "stylesheet" href = "path/to/stylesheet.css" type = "text/css" /> < script type = "text/javascript" src = "path/to/script.js" > </ script > This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together. < link rel = "stylesheet" href = "path/to/stylesheet.css" /> < script src = "path/to/script.js" > </ script >

HTML5 Features - Redefined

3. <small> Redefined Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information. The small element now refers to “small print.”

HTML5 Features - The Figure Element

2. The Figure Element Consider the following mark-up for an image: < img src = "path/to/image" alt = "About image" /> < p > Image of Mars. </ p > There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts. < figure > < img src = "path/to/image" alt = "About image" /> < figcaption > < p > This is an image of something interesting. </ p > ...

HTML5 Features - New Doctype

1. New Doctype Still using that pesky, impossible-to-memorize XHTML doctype? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say. <!DOCTYPE html > In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype . Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.