Actividad I Html5

Todos tenemos una estructura basica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy facil de hacer ya que HTML5 tiende a ser una estructura muy semantica y es lo mejor de todo, sus etiquetas son muy básicas por eso vamos a ver como es una Estructura basica de un documento de HTML5. Este lenguaje tiende a hacerse mas simple y humano al escribir el código.

Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.

1
2
3
4
5
<!DOCTYPE html>

<html lang="es">

<head>
Muy sencillo para empezar ¿no?, ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.

En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.

1
2
3
<title>Titulo de la web</title>

<meta charset="utf-8" />
Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO.

REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.

1
2
3
4
5
<link rel="stylesheet" href="estilos.css" />

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />
Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.

Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER.

1
2
3
4
5
<body>
<header>
<h1>Mi sitio web</h1>
<p>Mi sitio web creado en html5</p>
</header>
Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo.

1
2
3
4
5
6
<section>
    <article>
        <h2>Titilo de contenido<h2>
        <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
    </article>
</section>
SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o “articulo”

Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella.

1
2
3
4
<aside>
<h3>Titulo de contenido</h3>
<p>contenido</p>
</aside>
ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”

Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.

1
2
3
<footer> </span>
<p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></p>
<span style="color: #333399;"></footer>
FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”

Ahora veamos nuestro código completo:

			<!DOCTYPE html>

			<html lang="es">

			<head>

			<title>Titulo de la web</title>

			<meta charset="utf-8" />

			<link rel="stylesheet" href="estilos.css" />

			<link rel="shortcut icon" href="/favicon.ico" />

			<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />

			</head>

			<body>

			    <header>

			       <h1>Mi sitio web</h1>

			       <p>Mi sitio web creado en html5</p>

			    </header>

			    <section>

			       <article>

			           <h2>Titilo de contenido<h2>

			           <p> Contenido (ademas de imagenes, citas, videos etc.) </p>

			       </article>

			    </section>

			    <aside>

			       <h3>Titulo de contenido</h3>

			           <p>contenido</p>

			    </aside>

			    <footer>

			        Creado por mi el 2011

			    </footer>

			</body>

			</html>

<!DOCTYPE html>

<html lang="es">

<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />
</head>

<body>
    <header>
       <h1>Mi sitio web</h1>
       <p>Mi sitio web creado en html5</p>
    </header>
    <section>
       <article>
           <h2>Titilo de contenido<h2>
           <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
       </article>
    </section>
    <aside>
       <h3>Titulo de contenido</h3>
           <p>contenido</p>
    </aside>
    <footer>
        Creado por mi el 2011
    </footer>
</body>
</html>
Y si se preguntan por compatibilidad en los navegadores, solo basta decir que Internet Explorer 6 es compatible solo hay que convertir en bloques las etiquetas HEADER, SECTION, ARTICLE y FOOTER y ademas usar el HTML5 Enabling Script.

Si por alguna razón no pueden aplicarlo, aqui en este mismo sitio pronto encontraran un nuevo tutorial explicando como. Es algo demasiado sencillo y de verdad no es difícil, espero les sirva de inicio para nuevos proyectos.

Aporte personal:

Tomado de:https://www.ohio.edu/PEOPLE/sd152308/vico361/exercise03/html5.html

Resumen:

Actividad I Html5

Contacto