Skip to main content

Posts

Showing posts with the label learn

learn advanced html Embedded Content: Video, Audio, and Canvas

The simplest embedded (foreign) content is an image, applied to a web page with the  img element. In the olden days,  object , along with various plugins and proprietary devil dust, was used to bash and smash video and audio into submission. Although not without its (compatibility) problems, there is now a much better method for using various types of media in web pages.

learn html 5 Forms Pt. 1: Input Types

Additional input types Basic form fields created using the  input element include text, password, checkbox, radio, and submit,  which have already been covered in the HTML Beginner section . These types have been extended in HTML5 to accommodate more specific fields:

learn advanced html : Accessible Forms

Labels Each form field should have its own explicit label . The  label  tag sorts this out, with a  for attribute that associates it to a  form  element: < form > < label for = "yourName" > Your Name </ label > < input name = "yourName" id = "yourName" > <!-- etc. -->

learn advanced html : Accessible Links

Tabbing Users who do not or cannot use pointing devices can  tab  through links and, as such, links should be in a logical tabbing order. The  tabindex attribute allows you to define this order although if the HTML is linear, as it should be, a logical tabbing order should automatically fall into place.

learn advanced html Tables: Columns, Headers, and Footers

The Columns Strike Back Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite rejected. Luckily for those eager columns though, the colgroup  and  col  tags have come to their rescue. These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or colored differently, as, without this, you would need to target individual cells.

learn advanced html :Conditional Comments

Older versions of Internet Explorer are frequently either inept or naughty. Or both. But they are still popular so we don’t want to ignore them. Conditional comments , which are nothing more than simple HTML comments that IE (up to version 9) happens to take a peep at, are used to throw a chunk of HTML at these browsers and only these browsers. Other well behaved, top-of-the-class browsers will simply see them as unremarkable comments and move along. This web site currently uses conditional comments to make a handful of amendments for IE 8 and below, including a small extra stylesheet, and the HTML5 Shiv required for these browsers to take notice of some HTML5 elements. Go ahead - view the source. They have become a commonly used method of latching extra CSS to a document to plaster over holes in these browsers’ display capabilities. So, for example, you might add something like this inside your  head  element: < link href = "everything.css" rel = "styles...

learn advanced html Text: Time, Mark, and "Presentational"

Time time  is by far the chocolate ice cream sexiest sweet sugar lovely of these tags and is used to make dates and times super-semantically rich and mmm. The text sandwiched in the middle of the opening and closing tag can be any format of date of time - the whole precise lot, or just one part, such as a day. It is made more helpful, however, by the  datetime  attribute, the value of which should be a machine-readable date and/or time. < p > Written by Doctor Who on < time datetime = "2052-11-21" > Thursday 21st November 2052 </ time > . </ p > Valid  datetime  values can take the format of a year-month-day date (as above), of as a “fuzzy” date, such as “2052-11”, of a time, such as “09:30” (always using a 24-hour clock) or a combination, such as “2052-11-21 09:30”. This can also accommodate time zones and durations. If the textual content of the  time  element is already machine readable, you don’t need the datet...

html intermediate tutorial : Sectioning

Whereas div elements can be used to contain sections , used primarily as scaffolding on which to hang CSS, they don’t hold a great deal of meaning . Sectioning involves a handful of tags that can be used to define specific parts of a page, such as  articles ,  headers ,  footers , and navigation . Articles and Sections An  article  element can be used to mark up a standalone section  of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles. A  section  element represents a more  general section  and could be used to split up an article, or to represent chapters, for example. < article > < section id = "intro" > < p > [An introduction] </ p > </ section > < section id = "main_content" > < p > [Content] </ p > ...