Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Estructura básica de una plantilla con HTML5 y CSS3
#1
Comenzaremos con este tutorial dando una introducción a lo que es HTML5.
Es la actualización de HTML, el lenguaje en el que es creada la web. También en éste se agrupan y utilizan las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div><span>, pero tienen un significado semántico, como por ejemplo <nav> y <footer>. Otros elementos que proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los navegadores más importantes.
Pero nosotros para aprender un poco del tan inmenso e increíble uso de HTML5 comenzaremos chaciendo una plantilla básica con HTML5, incluyendo elementos css, para darle estilo a la plantilla.

Estructura básica
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Example</title><!--Titulo de mi web-->
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/style.css">
         <meta name="author" content="Sandra Valencia">
    </head>
    <body>
        <header><!--Cabecera principal de mi sitio-->
            <div class="logo">
                <a href="#">
                    Example
                </a>
            </div><!--URL de Mi Logo-->
            <div id="menu-s">
                <nav class="menu"><!--Menu-->
                    <ul class="menu-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">UX</a></li>
                        <li><a href="#">CSS3</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">Linux</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!--Contenido del sitio-->
        <div class="head-image"><!--Slider-->
            <img src="img/geek.jpg">
        </div>
        <div class="fila">
            <section class="contenido">
                <article class="art">
                    <h1>Lorem imp?</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
                    </p>
                </article>
            </section>
            <aside class="sidebar">
                <h1>Publicidad</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </aside>
        </div>
        <footer class="footer">
            <p>
                Copyright 2014 Example | Creado y diseñado por <a href="#">Tingsystems</a>
            </p>    
        </footer>
    </body>
</html>
#2
a probar a ver.
#3
yo añadiría el meta viewport por si lo haces responsive:

<meta name="viewport" content="width=device-width, initial-scale=1">


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  APLICACIONES NATIVAS VS HTML5, ¿EN QUÉ LENGUAJE PROGRAMO MI APLICACIÓN? In Mundo Media 1 325 01-02-2016, 11:55 AM
Último mensaje: dormio
  problema joomla con plantilla efbsfcd 12 717 24-08-2015, 06:50 PM
Último mensaje: ArtuGar
  GameQue, plantilla De Juegos para Blogger quepelilat 0 886 08-10-2014, 06:21 PM
Último mensaje: quepelilat
Estrella Mi primera plantilla Blogger "Amor 2.0" faulti 4 760 02-06-2014, 10:58 AM
Último mensaje: Renguit0
  Plantilla Blogger Html5 y css gratis jhanzito 6 1,162 28-05-2013, 06:13 PM
Último mensaje: xDEdgar
  plantilla para peliculas blogger jhanzito 1 2,081 01-05-2013, 02:25 AM
Último mensaje: DUBSTER
  plantilla blogger megamusi Gratis gratis jhanzito 4 1,199 14-03-2013, 09:17 AM
Último mensaje: jhanzito
  Plantilla Yaske Blogger zeriam 0 2,100 22-12-2012, 01:13 AM
Último mensaje: zeriam
  Plantilla Para Blogger Tamatsipatse 2 1,375 08-07-2011, 07:47 PM
Último mensaje: Tamatsipatse



Usuarios navegando en este tema: 1 invitado(s)