programming4us
programming4us
WEBSITE

Smashing Html5 : Organizing a Page - Getting Your Stuff Organized (part 2) - Grouping without fracturing, Figures and captions

- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019

Grouping without fracturing

One of the grouping elements that you probably shouldn’t use for more than grouping the head from the rest of the page (if even that) is the <hr> tag. The hr element (horizontal rule) is simply a line, but it should be used judiciously and sparsely. Take for example, the following excerpt from the poem “Kubla Khan” by Samuel Taylor Coleridge:

In Xanadu did Kubla Khan

A stately pleasure-dome decree:

Where Alph, the sacred river, ran

Through caverns measureless to man

Down to a sunless sea.

So twice five miles of fertile ground

With walls and towers were girdled round;

And there were gardens bright with sinuous rills,

Where blossomed many an incense-bearing tree;

And here were forests ancient as the hills,

Enfolding sunny spots of greenery.

But oh! that deep romantic chasm which slanted

Down the green hill athwart a cedarn cover!

A savage place! as holy and enchanted

As e’er beneath a waning moon was haunted

By woman wailing for her demon-lover!

The three stanzas are divided by a simple double space, as is the title.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

/*A1A680,D9D7BA,D90404,8C0303,590202 */

body {

background-color:#A1A680;

color:#590202;

font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;

font-size:8px;

}

h4 {

background-color:#D9D7BA;

color:#8C0303;

font-family:Tahoma, Geneva, sans-serif;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Too many HRs</title>

</head>

<body>

<header>

<h4>&nbsp;Kubla Khan</h4>

</header>

<article>

<hr>

In Xanadu did Kubla Khan<br>

A stately pleasure-dome decree:<br>

Where Alph, the sacred river, ran<br>

Through caverns measureless to man<br>

Down to a sunless sea.<br>

<hr>

So twice five miles of fertile ground<br>

With walls and towers were girdled round;<br>

And there were gardens bright with sinuous rills,<br>

Where blossomed many an incense-bearing tree;<br>

And here were forests ancient as the hills,<br>

Enfolding sunny spots of greenery.<br>

<hr>

But oh! that deep romantic chasm which slanted<br>

Down the green hill athwart a cedarn cover!<br>

A savage place! as holy and enchanted<br>

As e’er beneath a waning moon was haunted<br>

By woman wailing for her demon-lover! </article>

</body>

</html>

As you can see, the <hr> tags are all within the article element, while the title is part of the header element. However, in Figure 3, the page is shown in a mobile device, and the horizontal rules do nothing to clarify and everything to fragment.

Where your page has a major division, a horizontal rule may be appropriate. However, even then you should add CSS3 to lighten the hr element so that it’s subtle — even adding transparency will help. Good designers know how to use horizontal rules sparingly and subtly, but non-designers can easily make a mess of their Web pages with overuse of <hr> tags.

Figures and captions

One of the more frustrating elements in HTML5 is the use of <figure> and <figcaption> together. By placing a figcaption element inside of a figure element container, you might assume that they form a single object for layout and design. The figcaption element is considered a child of the figure when the figcaption is nested inside of a figure element. However, that doesn’t mean that they’ll appear on the page together. In fact, aligning a figure with its caption can be tricky.

977279-fg0508.eps

Figure 3: Horizontal rules can fragment meaning.

In more sophisticated CSS3 formatting, the figure and its caption can be treated as an object with a parent-child relationship. Just because figure and figcaption are part of HTML5’s grouping elements that doesn’t mean they’re formatted on the page together; instead, it means that they can be referenced as a single flow in the main content of the page.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

/* 732D3F,A66879,D9C3B0,260101,F2F2F2 */

body {

background-color:#D9C3B0;

color:#732D3F;

font-family:Verdana, Geneva, sans-serif;

font-size:11px;

}

aside {

margin-left:260px;

}

h1 {

font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;

background-color:#F2F2F2;

color:#A66879;

text-align:center;

}

figcaption {

color:#A66879;

background-color:#F2F2F2;

}

img {

margin:5px;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Figure and Caption Grouping</title>

</head>

<body>

<header>

<h1>Memories of Baja</h1>

</header>

<article>

<figure> <img src=”PuntaBufeo250.png” alt=”Punta Bufeo”><br>

<figcaption>&nbsp;Landing Strip on the Beach in Punta Bufeo&nbsp;</figcaption>

</figure>

<section>

<p>Trips to the best places in Baja are accessible either by reinforced off-road vehicles or small airplanes. The beaches are pristine, uncrowded, and uncluttered. Fishing is most rewarding when the fish are cooked up in fish tacos—a delicacy not to be missed. The <i>Sea of Cortez</i> (known also as the <i>Gulf of Baja</i> and <i>Vermillion Sea</i>) is a bright and clear blue. Of course the beaches are uncrowded and free of debris left by others.</p>

</section>

</article>

</body>

</html>

You can begin to think about elements and their descendants. In this case, the figcaption element is a descendant of the figure element. Figure 5-9 shows the caption under the picture, both within the <figure> container.

As you can see clearly in Figure 4, the <figcaption> is differently styled, even though it’s a descendant of the <figure> container. However, you can’t assume that a figcaption element will be correctly positioned as in Figure 5-9 just because it’s a child of the figure element that it captions.

977279-fg0509.eps

Figure 4: Figure and figcaption used with a graphic.

Other  
  •  Smashing Html5 : Organizing a Page - A Design in Sections
  •  Smashing Html5 : The Top of the HTML5 Document
  •  The Alfa Romeo Mito – A Usable And Fun Package
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 8) - SEO Page Optimization - Edit Display Templates
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 7) - SEO Page Optimization - Edit Master Pages
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 6) - SEO Page Optimization - Upload Design Files
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 5) - SEO Page Optimization - XML Site Map, Site Design Manager
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 4) - SEO Page Optimization - Page-Level SEO, Site Collection SEO
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 3) - Using the Content Search Web Part, Managed Navigation
  •  Publishing and Web Content Management : New in SharePoint 2013 (part 2) - Catalog Enable List/Library
  •  
    Top 10
    Free Mobile And Desktop Apps For Accessing Restricted Websites
    MASERATI QUATTROPORTE; DIESEL : Lure of Italian limos
    TOYOTA CAMRY 2; 2.5 : Camry now more comely
    KIA SORENTO 2.2CRDi : Fuel-sipping slugger
    How To Setup, Password Protect & Encrypt Wireless Internet Connection
    Emulate And Run iPad Apps On Windows, Mac OS X & Linux With iPadian
    Backup & Restore Game Progress From Any Game With SaveGameProgress
    Generate A Facebook Timeline Cover Using A Free App
    New App for Women ‘Remix’ Offers Fashion Advice & Style Tips
    SG50 Ferrari F12berlinetta : Prancing Horse for Lion City's 50th
    - Messages forwarded by Outlook rule go nowhere
    - Create and Deploy Windows 7 Image
    - How do I check to see if my exchange 2003 is an open relay? (not using a open relay tester tool online, but on the console)
    - Creating and using an unencrypted cookie in ASP.NET
    - Directories
    - Poor Performance on Sharepoint 2010 Server
    - SBS 2008 ~ The e-mail alias already exists...
    - Public to Private IP - DNS Changes
    - Send Email from Winform application
    - How to create a .mdb file from ms sql server database.......
    programming4us programming4us
    programming4us
     
     
    programming4us