HTML5 several design and modification page examples are shared

Time:2021-11-24

To understand and get familiar with the new semantic elements in HTML5, the best way is to take a classic HTML document as an example, and then enrich some fresh nutrients of HTML5. The following is the page we want to transform. The page is very simple and contains only one article.

ApocalypsePage_ Original.html, which is a very standardized page. All styles come from external style sheets.

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <html lang=“zh-CN”>  
  3. <head>  
  4.   <meta charset=“utf-8”>  
  5.   <title>Apocalypse Now</title>  
  6.   <link rel=“stylesheet” href=“ApocalypsePage_Original.css”>  
  7. </head>  
  8.   
  9. <body>  
  10. <div class=“Header”>  
  11.   <h1>How the World Could End</h1>  
  12.   <p class=“Teaser”>Scenarios that spell the end of life as we know</p>  
  13.   <p class=“Byline”>by Ray N. Carnation</p>  
  14. </div><!– end Header –>  
  15.   
  16. <div class=“Content”>  
  17.   <p><span class=“LeadIn”>Right now</span>, you’re probably feeling pretty good. After all, life in the developed world is comfortable<span class=“style1”></span>probably more comfortable than it’s been for the average human being throughout all of recorded history.</p>  
  18.   <p>But don’t get too smug. There’s still plenty of horrific ways it could all fall apart. In this article, you’ll learn about a few of our favorites.</p>  
  19.      
  20.   <h2>Mayan Doomsday</h2>  
  21.   <p>Skeptics suggest that the Mayan calendar simply rolls to a new 5,126-year era after 2012, and doesn’t actually predict a life-ending apocalypse. But given that the long-dead Mayans were wrong about virtually everything else, why should we trust them on this?</p>  
  22.      
  23.   <h2>Robot Takeover</h2>  
  24.   <p>Not quite as frightening as a Vampire Takeover or Living-Dead Takeover, a robot rebellion is still a disquieting thought. We are already outnumbered by our technological gadgets, and even Bill Gates fears the day his Japanese robot slave turns him over by the ankles and asks (in a suitably robotic voice) “Who’s your daddy now?”</p>  
  25.      
  26.   <h2>Unexplained Singularity</h2>  
  27.   <p>We don’t know how the universe started, so we can’t be sure it won’t just end, maybe today, and maybe with nothing more exciting than a puff of anti-matter and a slight fizzing noise.</p>  
  28.      
  29.   <h2>Runaway Climate Change</h2>  
  30.   <p>Dismissed by some, Al Gore’s prophecy of doom may still come true. If it does, we may have to contend with vicious storms, widespread food shortages, and surly air conditioning repairmen.</p>  
  31.      
  32.   <h2>Global Epidemic</h2>  
  33.   <p>Some time in the future, a lethal virus could strike. Predictions differ about the source of the disease, but candidates include monkeys in the African jungle, bioterrorists, birds and pigs with the flu, warriors from the future, an alien race, hospitals that use too many antibiotics, vampires, the CIA, and unwashed brussel sprouts. Whatever the source, it’s clearly bad news.</p>  
  34.   
  35. </div><!– end Content –>  
  36.   
  37. <div class=“Footer”>  
  38.   <p class=“Disclaimer”>These apocalyptic predictions do not reflect the views of the author.</p>  
  39.   <p>  
  40.     <a href=“AboutUs.html”>About Us</a>  
  41.     <a href=“Disclaimer.html”>Disclaimer</a>  
  42.     <a href=“ContactUs.html”>Contact Us</a>  
  43.   </p>  
  44.   <p>Copyright © 2014</p>  
  45. </div><!– end Footer –>  
  46. </body>  
  47. </html>  

Before adding any CSS style sheets, the effect is as follows:

The page is divided into three parts by three < div >, the header at the top, the content in the middle and the footer at the bottom.

The style sheet in this example is very simple. The maximum width of the whole page is set to 800 pixels to avoid long text on the widescreen display. The header is located in a box with a blue border, the inner margin is added on both sides of the content area, and the footer is centered at the bottom of the whole page.

ApocalypsePage_ The content of the original.css style file is as follows:

XML/HTML CodeCopy contents to clipboard
  1. @charset “utf-8”;   
  2. /* CSS Document */   
  3. body{   
  4. /*font-family   To use safe fonts, follow the principle of special before general,
  5. First give the font you want, and then a safer font,
  6. Finally   sans-serif   End of font*/
  7.   font-family: “Lucida sans Unicode”, “Lucida Grande”, Geneva, sans-serif;   
  8. max-width:   800px;  /* Maximum width not exceeding   eight hundred   Pixel*/
  9. }   
  10. /*Title area style at the top of the page*/
  11. .Header {   
  12. background-color:  # 7695FE;  /* Any color value is acceptable*/
  13. border:   thin  # three hundred and thirty-six thousand six hundred and ninety-nine   solid;  /* Multi in one   border   Attributes*/
  14. padding:   10px;  /*  The inner margin of 10 pixels, the distance between the border and the content*/
  15. margin:   10px;  /*  The outer margin of 10 pixels, the distance between the border and the surrounding elements*/
  16. text-align:   center;  /* Center header text*/
  17. }   
  18. /*Title in header<h1>Style*/
  19. .Header h1{   
  20.   margin: 0px;   
  21.   color: white;   
  22. font-size:   xx-large;  /* Precise control can be in pixels or em units*/
  23. }   
  24. /*Header subheader style*/
  25. .Header .Teaser{   
  26.   margin: 0px;   
  27.   font-weight: bold;   
  28. }   
  29. /*Signature line style in header*/
  30. .Header .Byline{   
  31.   font-style: italic;   
  32.   font-size: small;   
  33.   margin: 0px;   
  34. }   
  35. .Content{   
  36.   font-size: medium;   
  37.   font-family: Cambria, Cochin, Georgia, “Times New Roman”, Times, serif;   
  38. /*Maximum left and right inner margin*/
  39.   padding-top: 20px;   
  40.   padding-right: 50px;   
  41.   padding-bottom: 5px;   
  42.   padding-left: 50px;   
  43. line-height:   120%;  /* The distance between two adjacent lines of text*/
  44. }   
  45. .Content .LeadIn{   
  46.   font-weight: bold;   
  47.   font-size: large;   
  48.   font-variant: small-caps;   
  49. }   
  50. .Content .h2{   
  51.   color: #24486C;   
  52.   margin-bottom: 2px;   
  53.   font-size: medium;   
  54. }   
  55. .Content p{   
  56.   margin-top: 0px;   
  57. }   
  58. .Footer{   
  59.   text-align: center;   
  60.   font-size: x-small;   
  61. }   
  62. .Footer .Disclaimer{   
  63.   font-style: italic;   
  64. }   
  65. .Footer p{   
  66.   margin: 3px;   
  67. }  

In this way, our style sheet has been bent. Now let’s see what the result will be? As shown below:

Use HTML5 to construct pages

< div > is still a necessary element of web design. It is an intuitive and multi-purpose container that can be used to apply styles to any block in the page. The problem with < div >, however, is that it itself does not reflect any information related to the page.

To improve this situation with HTML5, you can replace < div > with elements with more descriptive semantics.

ApocalypsePage_ In revised.html, the class attribute has been replaced by < header > and < footer >, and some codes are as follows:

XML/HTML CodeCopy contents to clipboard
  1. <header>  
  2.   <h1>How the World Could End</h1>  
  3.   <p class=“Teaser”>Scenarios that spell the end of life as we know</p>  
  4.   <p class=“Byline”>by Ray N. Carnation</p>  
  5. </header>  
  6. …   
  7. <footer>  
  8.   <p class=“Disclaimer”>These apocalyptic predictions do not reflect the views of the author.</p>  
  9.   <p>  
  10.     <a href=“AboutUs.html”>About Us</a>  
  11. …   
  12.   </p>  
  13.   <p>Copyright © 2014</p>  
  14. </footer>  

Of course, the corresponding apocalypsepage_ The revised.css file also needs to be modified to replace. Header and. Footer with header and footer. Some codes are as follows:

XML/HTML CodeCopy contents to clipboard
  1. /*Title area style at the top of the page*/
  2. header {   
  3. background-color:  # 7695FE;  /* Any color value is acceptable*/
  4. border:   thin  # three hundred and thirty-six thousand six hundred and ninety-nine   solid;  /* Multi in one   border   Attributes*/
  5. padding:   10px;  /*  The inner margin of 10 pixels, the distance between the border and the content*/
  6. margin:   10px;  /*  The outer margin of 10 pixels, the distance between the border and the surrounding elements*/
  7. text-align:   center;  /* Center header text*/
  8. }   
  9. /*Title in header<h1>Style*/
  10. header h1{   
  11.   margin: 0px;   
  12.   color: white;   
  13. font-size:   xx-large;  /* Precise control can be in pixels or em units*/
  14. }  

Finally, another element needs to be used in the sample file, that is, the < article > element, which represents a complete and self-contained content.

The < ariticle > element should contain the content of the news report or article, including the title, signature and body. Therefore, the structure after adding the < article > element is as follows:

XML/HTML CodeCopy contents to clipboard
  1. <article>  
  2.   <header>  
  3.   <h1>How the World Could End</h1>  
  4.   <p class=“Teaser”>Scenarios that spell the end of life as we know</p>  
  5.   <p class=“Byline”>by Ray N. Carnation</p>  
  6.   </header>  
  7.   <div class=“Content”>  
  8.   <p><span class=“LeadIn”>Right now</span>, you’re probably feeling pretty good. After all, life in the developed world is comfortable<span class=“style1”></span>probably more comfortable than it’s been for the average human being throughout all of recorded history.</p>  
  9. …   
  10.   </div><!– end Content –>  
  11. </article>  

After the redesign, the page structure is as follows:

Add illustrations with < figure >

Many pages contain pictures. However, the concept of figure and picture is not exactly the same. Although the illustration is independent of the text, it will be mentioned in the text.

Generally speaking, illustrations should be floating, and there will be floating picture questions. The following is the HTML tag for adding illustrations in the article, which is located between the first paragraph and the second paragraph of the body. Part of the code is as follows:

XML/HTML CodeCopy contents to clipboard
  1. …   
  2. <div class=“Content”>  
  3. <p><span class=“LeadIn”>Right now</span>, you’re …</p>  
  4. <div class=“FloatFigure”>  
  5. <img src=“human_skull.jpg” alt=“Human skull”>  
  6. <p>Will you be the last person standing if one of these apocalyptic   
  7. scenarios plays out?</p>  
  8. </div>  
  9. <p>But don’t get too smug. There’s…</p>  
  10. …  

The corresponding style sheet rules are as follows:

XML/HTML CodeCopy contents to clipboard
  1. .FloatFigure{   
  2.   float: left;   
  3.   margin: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure p{   
  6.   max-width: 300px;   
  7.   font-size: small;   
  8.   font-style: italic;   
  9.   margin-bottom: 5px;   
  10. }  

The following figure shows the appearance of this example. The illustration floats on the left side of the following text just after the first paragraph of text. We limit the width of the text of the picture title to make the picture title display very rich and elegant.

A < figure > element is provided in HTML5. The figure title can be placed in the < figcaption > element in < figure >. After transformation, the code is as follows:

XML/HTML CodeCopy contents to clipboard
  1. <figure class=“FloatFigure”>  
  2.   <img src=“human_skull.jpg” alt=“Human skull”>  
  3.   <figcaption>Will you be the last person standing if one of these apocalyptic   
  4.    scenarios plays out?</figcaption>  
  5. </figure>  

Of course, the selector in the style sheet can be modified accordingly.

XML/HTML CodeCopy contents to clipboard
  1. .FloatFigure{   
  2.   float: left;   
  3.   margin: 0px 20px 0px 0px;   
  4. }   
  5. .FloatFigure figcaption{   
  6.   max-width: 300px;   
  7.   font-size: small;   
  8.   font-style: italic;   
  9.   margin-bottom: 5px;   
  10. }  

Finally, the alt attribute in the < img > element can be deleted because the picture title contains a complete description of the picture.

Add notes with < aside >

The new < aside > element represents content that is not closely related to the text around it. It can be used to introduce another related topic or explain a point raised in the main document. It can also be used to place advertisements, related content links.

The following example will be used as a pull quote. Using the < div > element can create this effect, but using the < aside > element makes the tag more meaningful:

Some codes are as follows:

XML/HTML CodeCopy contents to clipboard
  1.   <p>… (in a suitably robotic voice) “Who’s your daddy now?”</p>  
  2.   
  3. <aside class=“PullQuote”>  
  4.   <img src=“quotes_start.png” alt=“Quote”>  
  5.   We don’t know how the universe started, so we can’t be sure it won’t just end, maybe today.   
  6.   <img src=“quotes_end.png” alt=“End quote”>  
  7. </aside>  
  8.   
  9. <h2>Unexplained Singularity</h2>  

The corresponding style sheet contents are as follows:

XML/HTML CodeCopy contents to clipboard
  1. .PullQuote{   
  2.   float: right;   
  3.   max-width: 300px;   
  4.   border-top: thin black solid;   
  5.   border-bottom: thick black solid;   
  6.   font-size: 30px;   
  7.   line-height: 130%;   
  8.   font-style: italic;   
  9.   padding-top: 5px;   
  10.   padding-bottom: 5px;   
  11.   margin-left: 15px;   
  12.   margin-bottom: 10px;   
  13. }   
  14. .PullQuote img{   
  15.   vertical-align: bottom;   
  16. }  

Recommended Today

Seven solutions for distributed transactions

1、 What is distributed transaction Distributed transaction means that transaction participants, transaction supporting servers, resource servers and transaction managers are located on different nodes of different distributed systems. A large operation is completed by more than n small operations. These small operations are distributed on different services. For these operations, either all of them are […]