API tools faq
paste
Advertisement
codeudi

taller 1 - HTML5/CSS3

codeudi
Feb 3rd, 2016
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.16 KB | None | 0 0
raw download clone embed print report
  1. /* 1.  ARCHIVO index.html (estructura HTML5 - LENGUAJE DE MARCADO DE HIPERTEXTO) */
  2.  
  3. <!DOCTYPE html>
  4. <html lang="es">
  5.  
  6.     <head>
  7.         <meta charset="utf-8">
  8.         <meta name="description" content="Ejemplo de HTML5 con CSS3">
  9.         <meta name="keywords" content="HTML5, CSS3, JavaScript">
  10.         <title>HTML5 y CSS3</title>
  11.         <link rel="stylesheet" href="estilos.css">
  12.     </head>
  13.     <body>
  14.         <div id="agrupar">
  15.             <header id="cabecera">
  16.                 <h1>Este es el título principal del sitio web</h1>
  17.             </header>
  18.             <nav id="menu">
  19.                 <ul>
  20.                     <li>principal</li>
  21.                     <li>fotos</li>
  22.                     <li>videos</li>
  23.                     <li>contacto</li>
  24.                 </ul>
  25.             </nav>
  26.             <section id="seccion">
  27.                 <article>
  28.                     <header>
  29.                         <hgroup>
  30.                             <h1>Título del mensaje uno</h1>
  31.                             <h2>Subtítulo del mensaje uno</h2>
  32.                         </hgroup>
  33.                         <time datetime="2011-12-10" pubdate>publicado 10-11-2013</time>
  34.                     </header>
  35.                         Este es el texto de mi primer mensaje
  36.                     <figure>
  37.                         <img src="http://minkbooks.com/content/myimage.jpg">
  38.                         <figcaption>
  39.                             Esta es la imagen del primer mensaje
  40.                         </figcaption>
  41.                     </figure>
  42.                     <footer>
  43.                         <p>comentarios (0)</p>
  44.                     </footer>
  45.                 </article>
  46.                 <article>
  47.                     <header>
  48.                         <hgroup>
  49.                             <h1>Título del mensaje dos</h1>
  50.                             <h2>Subtítulo del mensaje dos</h2>
  51.                         </hgroup>
  52.                         <time datetime="2011-12-15" pubdate>publicado 05-11-2013</time>
  53.                     </header>
  54.                         Este es el texto de mi segundo mensaje
  55.                     <footer>
  56.                         <p>comentarios (0)</p>
  57.                     </footer>
  58.                 </article>
  59.             </section>
  60.             <aside id="columna">
  61.                 <blockquote>Mensaje número uno</blockquote>
  62.                 <blockquote>Mensaje número dos</blockquote>
  63.             </aside>
  64.             <footer id="pie">
  65.                 &copy; Script BC Todos los Derechos Reservados  2013
  66.             </footer>
  67.         </div>
  68.     </body>
  69. </html>
  70.  
  71. 2.  ARCHIVO estilos.css (CSS3 - HOJA DE ESTILOS PARA APLICAR AL ARCHIVO index.html)
  72.  
  73. * {
  74. margin: 0px;
  75. padding: 0px;
  76. }
  77.  
  78. header, section, footer, aside, nav, article, figure, figcaption,
  79. hgroup{
  80. display: block;
  81. }
  82.  
  83. h1 {
  84. font: bold 20px verdana, sans-serif;
  85. }
  86. h2 {
  87. font: bold 14px verdana, sans-serif;
  88. }
  89.  
  90. body {
  91. text-align: center;
  92. }
  93.  
  94. #agrupar {
  95.     width: 90%; /*Ancho del contenedor*/
  96.     margin: 15px auto; /*auto= margen superior e inferior*/
  97.     text-align: left; /*text-align es hereditaria por lo tanto
  98.                         debemos regresarla a su configuración normal*/
  99. }
  100.  
  101. #cabecera {
  102.     background: #FFFBB9;
  103.     border: 1px solid #999999;
  104.     padding: 20px;
  105. }
  106.  
  107. #menu {
  108.     background: #CCCCCC;
  109.     padding: 5px 15px;
  110. }
  111. #menu li {
  112.     display: inline-block;
  113.     list-style: none;
  114.     padding: 5px;
  115.     font: bold 14px verdana, sans-serif;
  116. }
  117.  
  118. #seccion {
  119.     width: 70%;
  120.     margin: 20px;
  121.     float: left;
  122. }
  123.  
  124. #columna {
  125.     width: 20%;
  126.     margin: 20px 0px;
  127.     float: left;
  128.     padding: 20px;
  129.     background: #CCCCCC;
  130. }
  131.  
  132. #pie {
  133.     clear: both;
  134.     background: #CCCCCC;
  135.     text-align: center;
  136.     padding: 20px;
  137.     border-top: 2px solid #999999;
  138. }
  139.  
  140. article {
  141.     background: #FFFBCC;
  142.     border: 1px solid #999999;
  143.     padding: 20px;
  144.     margin-bottom: 15px;
  145. }
  146.  
  147. article footer {
  148.     text-align: right;
  149. }
  150.  
  151. time {
  152.     color: #999999;
  153. }
  154.  
  155. figcaption {
  156.     font: italic 14px verdana, sans-serif;
  157. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!