Curso de HTML5 y CSS3

#dato{ width:300px; margin:10px; border-radius:5px; background:#F1F1F1; }
#codigo{
background:#999;
color:#FFF;
padding:5px;
margin:5px;
border-radius:5px;
}

Curso de HTML5 y CSS3

Hola amigos en este curso de html5 como crear mi web les trae otra nueva entrega pero esta vez con lo que está de moda un curso de HTML5 y CSS3 que es lo que esta ahora en el diseño y programacion de páginas web, el HTML5 y CSS3, en esta ocasión vamos a aprender a armar nuestra propia página web, con HTML5 y CSS3 y que sea autoajustable o mejor dicho Responsive Web Design o diseño auto ajustable.

Para maquetar nuestra página en este Curso de HTML5 y CSS3 necesitamos un editor puede ser simple y un navegador para ir viendo los las transformaciones que vamos haciendo yo en lo particular utilizo como editor de código Sublime Text y Notepat++ pero bueno el editor es su elección y por el navegador recomiendo que sean firefox o chrome y en caso que utilicen internet Explorer descárguense la última versión.

Bueno con estos puntos claros podemos empezar a armar la estructura de nuestra página web
Lo primero que vamos hacer en este curso de HTML5 y CSS3 es el código HTML5 para lo que crearemos un documento en blanco con el nombre de “index.html” y luego los estilos CSS3, bueno empezamos

Escribimos la cabecera de la página

<!DOCTYPE html/>
<html lang=”es”>
<head>
<meta charset=”utf-8″ />
<meta name=”description”content=”Curso de HTML5” />
<title>Curso de HTML5 y CSS3 </title>
<link rel=”stylesheet” href=” stylo.css” />
</head>

Bueno esta es la parte de la cabecera de nuestra web ahora le explico cómo funciona primero pusimos la etiqueta <!DOCTYPE html/> esto significa que empezamos a programar nuestra web con HTML5.
Luego escribimos la etiqueta de apertura <html lang=”es”> y le establecemos el lenguaje español en nuestro caso esto es para que nos res conozca los caracteres latinos y no tengamos problemas con esos signos raros.

Luego abrimos y serramos la etiqueta <head> </head> y en ella escribimos el <meta charset=”utf-8″ /> para los signos de puntuación también una meta con la descripción de nuestra página web que es esta <meta name=”description”content=”Curso de HTML5” />

También incluimos el titulo de nuestra pagina con la etiqueta <title>El titulo de tu web </title>
Una vez añadida la etiqueta title enlazamos una hoja de estilo con el nombre “stylo.css” en la cual estará el código CSS3 que vamos a crear para maquetar nuestra web <link rel=”stylesheet” href=” stylo.css” /> luego serramos la etiqueta </head> y continuamos con el cuerpo de la página, y estaría estructurado de la siguiente manera solo tenemos que agregar el siguiente código.

<body>
</body>
</html>

Con esto ya tenemos el cuerpo de nuestra página programada en HTML ahora empezamos a introducir el contenido con etiquetas HTML5 obvio que pensaban que era con HTML4 bueno lo primero que creamos es la cabecera de nuestra página con la etiqueta <header></header>

Y dentro de este header creamos un div e introducimos un texto para describirlo en este caso nuestra cabecera seria la siguiente.

<header>
<h1>Esta es la cabecera de nuestro sitio web</h1>
</header>

Ahora creamos una etiqueta <nav></nav> para la botonera y quedaría así

<nav>
Esta es nuestra botonera
</nav>

Ahora creamos el cuerpo del la mayor parte del contenido de nuestra web para esto creamos una etiqueta <section></section> y dentro de esta metemos otro section parecido pero con id diferentes y también agregamos las etiquedas <article></article> y <aside></aside>

En este caso nuestro código HTML5 quedaría así

<section id=”contenedor”>
<section id=”principal”>
Esto es una seccion
<article>
Esto es un article
</article>
</section>
<aside>
Esto es un aside
</aside>
</section>

Ahora lo que nos falta es el pie de página y para esto utilizamos las etiquetas </footer></footer>
Que el código sería el siguiente

<footer>
Este es el pie de nuestra página
</footer>

Bueno con todo esto explicado ahora les pongo el código HTML5 complete para que lo estudien y vean como está estructurado y para pasar a maquetar con CSS3 .

Ahora procedemos a maquetar nuestra página HTML5 con puro código CSS3 y que todo se ajuste a cualquier pantalla donde se esté visualizando.

Bueno empecemos lo primero que vamos a definir e el atributo de todo el HTML para esto lo primero que hacemos es un * y entre llaves ponemos el código que queremos establecerle al documento completo en este caso yo solo les voy a establecer dos valores que es el margen y el padding

*{
margin: 0;
padding: 0;
}

Ahora establecemos la tipografía de nuestro sitio web para eso tenemos que utilizar la el atributo de CSS 3 que es @font-face y lo que les vamos a establecer a este atributo son 2 mandatos que el tipo de letras y el estilo sea normal

@font-face {
font-weight:normal;
font-style:normal;
}

Si has hecho todo bien nuestro índex tendría que estar quedando así

De lo contrario revisa el código no valla hacer que has cometido un error , Bueno uno vez con esto así en caso de que no hayas cometido ningún error proseguimos con el curso.

Y ahora continuamos con el siguiente bloque de código CSS3 que corresponde al body en este caso al bodi lo primero que les vamos a decir es que tenga un background blanco un color de letras naranja una tipografía o tipo de letra Helvética, Verdana y un tamaño de letras de 2em entonces nuestro código CSS3 sería el siguiente

body{
background: #FFF;
color:#F60;
font-family:Helvetica, Verdana;
font-size: 2em;
}

Ahora lo que hacemos es que al h1 que está dentro del <header> es establecerles los parámetros de cómo queremos que sea para estos le ponemos el siguiente código CSS3.

h1{
color:#F60;
margin:0.25em auto;
text-align:center;
text-shadow: 5px 5px 10px rgba(255,255,255,o.5);
}

En este código lo primero que establecimos fue el color de las letras del <h1> en este caso (color:#F60;) que corresponde al naranja, luego el margin es espacio que va a tener de los demás elementos. También establecimos el text-aling:cener; esto es para alinear el texto al centro y algo muy importante que no se puede quedar es el atributo (text-shadow: ) que ya lo explique en un post anterior por eso creo que no hay necesidad de explicarlo aquí nuevamente.

Como ya agregamos los estilos del <body> y del <h1> que está dentro del <header> nuestra página tendría que estar quedando de la siguiente manera.

Si se fijan nuestro documento HTML a cambiado mucho y en el h1 se nota una sombra la cual la establecimos con el atributo (text-shadow: ) si tu imagen va quedando igual que esta sigamos adelante, en caso contrario te recomiendo volver atrás y revisar el código haber en que has fallado.

Bueno seguimos maquetando nuestro index.html ahora vamos a establecer el color de fondo de la cabecera que en este caso seria nuestra etiqueta <header></header> para ello vamos a ponerle un background:#DEDEDE; que corresponde a un gris también un border-radius:0.25em; para ponerles los bordes medio redondeados en margin que va a tener de los otros elementos donde les ponemos (margin:0.25em auto) con esto les indicamos al <header> que tome un margin de arriba de 0.25em y a los lados se centre con el atributo (auto).

Y algo nuevo que incorpora CSS 3 para que nuestros sitios puedan ser auto ajustables es el (max-width ) y el ( min-height) con estos atributos no le establecemos márgenes variables a nuestros documentos HTML donde les indico que le tamaño máximo o max-width va hacer el que queramos y el tamaño mínimo min-height también va hacer el que le establezcamos, o sea ya nuestros documentos no van a tener un tamaño fijo si no que van a varias dependiendo el tamaño de la pantalla que los este visualizando.

Con esto claro solo queda establecer el padding y alinear el texto lo cual lo hacemos con las etiquetas ( padding:0.25em;) y (text-aling:center;)
Con esto el código para nuestro <header> seria el siguiente.

header {
background:#DEDEDE;
border-radius:0.5em;
margin: 0.5em auto;
max-width:960px;
padding:0.25em;
text-align:center;
}

Ahora si visualizamos nuetro documento tendría que tener el siguiente aspecto

Bueno si todo va bien seguimos maquetando nuestro sitio, y se nos presenta el siguiente problema si se han fijado la botonera y el pie de página vendrían siendo algo parecido a la etiqueta < header> </header> si te lo imaginaste estas en lo correcto y para ahorrar tiempo y en escribir todo este código nuevamente solo tendremos que agregar a la etiqueta header las las etiquetas nav y footer que quedaría de la siguiente manera.

header ,nav,footer{
background:#DEDEDE;
border-radius:0.5em;
margin: 0.5em auto;
max-width:960px;
padding:0.25em;
text-align:center;
}

Si visualizamos nuestro documento esto quedaría asi.

 Si vemos a nuestro sitio ya le falta muy poco por maquetar solo el <section></section> y el <aside></aside> lo cual vamos a explicar de inmediato.

Si nos fijamos en el index creamos un <section> con un ID contenedor o sea este <section id=”contenedor”> y otro <section id=”principal”> bueno como como tenemos identificados nuestros section lo que vamos hacer es crear en la hoja de estilo lo estilos correspondiente pero en este caso vamos a ponerle una armoadilla o gato (#) al cual vamos hacer referencias de la siguiente manera section#contenedor y section#principal.

Primero escribimos el section#contenedor y les ponemos un margin de 0.2em y auto a los lados para que se centre, luego max-width:960px; les decimos que el tamaño máximo que va a tener este section es de 960px, les ponemos un padding de 0 y un tex-aling: center para que el contenido se centre.

En conclusión nuesto código CSS3 para el section contenedor sería el siguiente

section#contenedor{
margin:0.2em auto;
max-width:960px;
padding:0;
text-align:center;
}

Ahora seguimos con el section#principal. A este le decimos que tenga un background o color de fondo un border-radius para que tenga border curvos, y otro atributo que añade CSS 3 es display:inline-block; esto le indica a nuestro section que todo lo que venga dentro del será visto como bloques y les añadimos el atributo vertical-align:top este nuevo atributo de CSS3 viene a sustituir al float del css anterior esto le indica a nuestro section que alinee todo verticalmente y que sea en la parte superior.

Luego les indicamos que tome un tamaño de un 65% del section contenedor lo otro ya lo sabemos por eso no lo explico y les pongo el siguiente código.

Si notan que puse el <aside> en este código es porque quiero que tenga la misma forma que el section principal solo que a este les vamos a dar un tamaño mas pequeño en la parte de abajo

section#principal, aside{
background:#F1F1F1;
border-radius:0.5em;
display: inline-block;
margin:0.25em auto;
max-width:960px;
min-height:200px;
padding:0.25em;
text-align:center;
vertical-align:top;
width:65%;
}

Si han hecho todo bien nuestro documento iría quedando de la siguiente manera corte la imagen para que puedan ver cómo va quedando el aside.

Como le explique arriba tenemos que establecerle el porcentaje que va a tomar el aside del section en este caso con un 30% quedaría bien mas debajo de ese código escribimos el siguiente

aside{
width:30%;
}

Ahora si actualizamos nuestro navegador todo se vería de la siguiente manera.

Bueno ahora solo nos falta darle estilo al article, este será sencillo solo tenemos que ponerle un color de fondo distingo a fondo actual para ellos les ponemos un brackground:#000; que corresponde al negro, luego un border-radius para las esquinas curvas y les ponemos un alto mínimo con el atributo min-height: de 140px; y un padding: de 0.25em con esto quedaría listo nuestro article.

article{
background:#011E30;
border-radius: 0.5em;
min-height:140px;
padding:0.25em;
}

Si has copiado bien todo el código esta tendría que ser la imagen final de nuestro documento.

Ahora si te fijas en el navegador reduciendo el tamaño de la ventana veras como todo se ajusta al tamaño de la ventana, esto lo obtuvimos porque trabamos con los tamaños en (em) y no en (px) también porque los atributos max-width y min-height.

Bueno aquí les dejo una toma de mi navegador reducido a lo que simula una pantalla de un celular.

Espero y les aya gustado el tutorial y será hasta la próxima gracias y dejen sus sugerencias así seguimos mejorando el blogs y colocando tutoriales de calidad.

Aquí les dejo los codigos del curso completo.

index.html

<!DOCTYPE html/>
<html lang=”es”>
<head>
    <meta charset=”utf-8″ />
    <meta name=”description”content=”Practica de html 5″ />
    <title>Curso de HTML5 y CSS3     </title>
    <link rel=”stylesheet” href=”stylo.css” />   
</head>
<body>
    <header>
        <h1>Esta es la cabecera de nuestro sitio web</h1>
    </header>
    <nav>
        Esta es nuestra botonera
    </nav>
    <section id=”contenedor”>
        <section id=”principal”>
            Esto es una seccion
        <article>
            Esto es un article
        </article>
    </section>
        <aside>
            Esto es un aside
        </aside>
    </section>
    <footer>
        Este es el pie de nuestra p&aacute;gina
    </footer>
</body>
</html>



stylo.css

*{
margin: 0;
padding: 0;
}
@font-face {
    font-weight:normal;
    font-style:normal;
}
body{
    background: #FFF;
    color:#F60;
    font-family:Helvetica, Verdana;
    font-size: 2em;
}
h1{
    color:#F60;
    margin:0.25em auto;
    text-align:center;   
    font-size:1.25em;
    text-shadow: 5px 5px 10px rgba(255,255,255,o.5);
}
header,nav,footer {
    background:#DEDEDE;
    border-radius:0.5em;
    margin: 0.5em auto;
    max-width:960px;
    padding:0.25em;
    text-align:center;   
}
section#contenedor{
    margin:0.2em auto;
    max-width:960px;
    padding:0;
    text-align:center;   
}
section#principal, aside{
    background:#F1F1F1;
    border-radius:0.5em;
    display: inline-block;
    margin:0.25em auto;
    max-width:960px;
    min-height:200px;
    padding:0.25em;
    text-align:center;
    vertical-align:top;
    width:65%;   
}
article{
    background:#000;
    border-radius: 0.5em;
    min-height:140px;
    padding:0.25em;
}
aside{
    width:30%;
}

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…

Comments

  1. By kriizme

  2. By Anónimo

  3. By Anónimo

  4. By Anónimo

  5. By Michael

  6. By Anónimo

  7. By Anónimo

  8. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.