Primera landing con HTML5

Name: Primera landing con HTML5
Brand: Jose Aguilar
SKU: joseaguilarblog-3456
Availability: InStock
Rating: 5 (2 reviews)

En este artículo voy a explicar como he creado mi primera landing o página Web de pruebas con HTML5.

Veremos algunas nuevas etiquetas y algunas propiedades interesantes a nivel de CSS3 como los bordes redondeados de los contenedores.

La estructura que debemos emplear para crear una página en HTML5 es la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Si titutlo</title>
</head>
<body>
..
</body>
</html>

La estructura es muy similar a la del HTML simple. Lo que cambia principalmente son algunas etiquetas nuevas que añadiremos al <body> y alguna técnica CSS.

Estas etiquetas añadirán un valor semántico a nuestro código HTML.

Por ejemplo, vamos a ver como codificar en HTML5 la imagen siguiente:

Si nos fijamos bien, la landing está compuesta por 4 secciones: header, sidebar o menú lateral, contenido y footer.

La estructura HTML5 de esta estructura es la siguiente:

<div id="page">
    <header><h1>Mi primer sitio HTML5</h1></header>

    <nav>
        <ul>
            <li><a href="#">inicio</a></li>
            <li><a href="#">contacto</a></li>
            <li><a href="#">servicios</a></li>
        </ul>
    </nav>

    <section>
        <article>
            <header><h2>Titulo entrada 1</h2></header>
            <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
        </article>              
    </section>

    <footer>
        <small>
            Copyright &copy; 2012<br/>
            <a href="https://www.jose-aguilar.com/">Jose Aguilar</a>         
        </small>        
    </footer>
</div>

Si nos fijamos en el código, estamos empleando etiquetas como: <header>, <nav>, <section>, <article>, <footer> que no están incluidas en los tags de HTML y que aportan un valor semántico a nuestro código.

Para conseguir la visualización de la imagen, deberes añadir los siguientes estilos:

body {
    background-color:#f2f2f2;
    margin: 36px auto;
    width: 740px;
}

#page {
    box-shadow: 0 2px 5px #FF4500;
    float:left;
    width: 720px;
    padding:10px;
}

nav{
    float:left;
    width: 150px;
}

nav ul {
    list-style-type:none;
    margin: 0px;
    padding: 0px;        
}

nav ul li {
    margin: 5px;
    padding: 10px;
    text-transform:capitalize;
    font-size: 20px;
}

nav ul li:hover {
    background: #FFFFFF;
}

nav ul li a {
    color:#e34c26;
    text-decoration: none;
}

nav ul li {
    margin: 5px;
    padding: 10px;
    text-transform:capitalize;
    font-size: 20px;
    border-radius: 152px 304px 228px 152px;
    border-style: solid;
    border-width: 3px;
    border-color:#ffffff
}

section {
    float:left;
    width:570px;
}

article {
    margin-bottom:5px;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: 2px;
    border-color:#ffffff;
}

p {
    text-align:justify;
}

footer{
    border-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: 2px;
    float: right;
    text-align: center;
    width: 550px;
    padding:10px;
}

Ver el ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(2 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Primera landing con HTML5”

Juan Lophophora Williamsi dice:

06/05/2020 a las 18:11

Excelenete aporte, gracias!

Responder
juan carlos dice:

26/03/2017 a las 2:06

hola jose tu ejemplo esta exelente ,me gustaria preguntarte si me podrias ayudar con un logueo de facebook

Responder