E the first article we created the basic structure of a page with HTML5. Now is the time for adding content. We will see the new code, and then discuss the new developments.
\u0026lt;! DOCTYPE HTML> \u0026lt;html lang="es-es"> 
\u0026lt;head> \u0026lt;meta charset="UTF-8"> \u0026lt;link rel="stylesheet" type="text/css" href="estilo.css">
\u0026lt;title> Page title \u0026lt;/ title> \u0026lt;/ head>
\u0026lt;body>
\u0026lt;header> & # 160;
\u0026lt;h1> Title of page \u0026lt;/ h1>
\u0026lt;/ header>
<nav>  
<ul>  
<li><a href="#">Blog</a></li>  
<li><a href="#">About</a></li>  
<li><a href="#">Archivos</a></li>  
<li><a href ="#"> Contact \u0026lt;/ a> \u0026lt;/ li> \u0026lt;li
Subscribe via class="subscribe"> \u0026lt;a href="#">. RSS \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;/ ul>
\u0026lt;/ nav>
id="intro"> \u0026lt;section
\u0026lt;header>
\u0026lt;h2> you like to do? \u0026lt;/ h2>
\u0026lt;/ header>
\u0026lt;p> Comentanos your hobbies \u0026lt;/ p>
\u0026lt;/ section>
\u0026lt;section>
\u0026lt;article class="blogPost">
\u0026lt;header>
\u0026lt;h2> Title of post \u0026lt;/ h2>
datetime="2009-06-29T23:31:45+01:00"> \u0026lt;time \u0026lt;p> Posted September 5, 2010 \u0026lt;/ time> by \u0026lt;a href Xandru ="#"> Cancelasr \u0026lt;/ a> - href href="#comments"> 3 Reviews \u0026lt;/ a> \u0026lt;/ p>
\u0026lt;/ header>
\u0026lt;p> continue said .. \u0026lt;/ p>
\u0026lt;/ article>
\u0026lt;/ section>
\u0026lt;video src = "http://v17. lscache5.c.youtube.com/videoplayback? ip = 0.0.0.0 & sparams = id% 2Cexpire% 2Cip% 2Cipbits% 2Citag% 2Cratebypass% 2Coc% 3AU0dXR1dSTl9FSkNNN19PTFJB & FEXPO = 900161 & ITAG = 18 & ipbits = 0 & SVER = 3 & ratebypass = yes & expires = 1282770000 & key = t1 & signature = 97D02D5AA98C223F22168D150E5E1F7049CEFA22.9812D05BCFDD36E77A2719183C4DE85080C1538A & id = b44f53795df29936 "/>
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Nombre</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comentario</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
<aside>
<section>
<header>
<h3>CategorÃas</h3>
</header>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
\u0026lt;/ Section>
\u0026lt;section>
\u0026lt;header>
\u0026lt;h3> Files \u0026lt;/ h3>
\u0026lt;/ header>
\u0026lt;ul>
\u0026lt;li> \u0026lt;a href ="#"> August 2010 \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;li> \u0026lt;a href="#"> September 2010 \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;/ ul>
\u0026lt;/ section>
\u0026lt;/ Aside>
\u0026lt;footer>
\u0026lt;div>
\u0026lt;section id="about">
\u0026lt;header>
\u0026lt;h3> About \u0026lt;/ h3>
\u0026lt; / header>
\u0026lt;p> \u0026lt;a href="#"> Learn more about me \u0026lt;/ a> \u0026lt;/ p>
\u0026lt;/ section>
\u0026lt;section id = "blogroll ">
\u0026lt;header>
<h3>Blogroll</h3>
</header>
<ul>
<li><a href="#">Blogroll 1</a></li>
<li><a href="#">Blogroll 2</a></li>
</ul>
</section>
<section id="enlace">
<header>
<h3>Enlaces</h3>
\u0026lt;/ header>
\u0026lt;ul>
\u0026lt;li> \u0026lt;a href="#"> Link 1 \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;li> \u0026lt;a href ="#"> Link 2 \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;/ ul>
\u0026lt;/ section>
\u0026lt;/ div>
\u0026lt;/ footer>
\u0026lt;/ body>
\u0026lt;/ html>
- Pimero In section (intro) we see that the label header is added to specify a caption.
- In the middle section introduces a new tag "article" that tells us that this is a text that can be used and redistributed as feed, for example.
- Time indicates that this is a time or date. Breaking down their format:
or first shows the date format yyyy-mm-dd
o "T" indicates that you are using local time.
or below the local time in hh: mm: ss or GTM area in which we live. In our case will Madrid GMT +2.
- In the form we see that added two new types of inputs: email and url. Typing required as an attribute, the field will be mandatory for the user.
mini tutorial This concludes our introduction to HTML5. As soon as we tested new features we will inform you.
If in doubt about whether you should configure Apache to support HTML5, see the following article
.
0 comments:
Post a Comment