amh-guía_curso_html5_v2

Semana Académica 2015

Curso Básico

Desarrollo de páginas web

=== Guía de apoyo ===

Instructor: Ing. Angel Méndez Hernández Julio 2015

Material elaborado con recopilaciones diversas de información personal para la Semana Académica Mantenimiento 2015 de la Universidad Tecnológica de Gutiérrez Zamora

Contenido

Introducción................................................................................................................................. 3

¿Qué es el internet?.................................................................................................................. 3

¿Cómo funciona la web?...........................................................................................................3

Objetivo del curso..................................................................................................................... 4

Requerimientos para este curso...............................................................................................4

1.- Módulo HTML5 básico.............................................................................................................5

Mejor estructura....................................................................................................................... 5

Estructura básica HTML5..........................................................................................................9

Etiquetas de estructura..........................................................................................................10

La cabecera <head>..............................................................................................................10

Párrafos en el cuerpo <body>................................................................................................11

Párrafos y encabezados..........................................................................................................12

Usando todos los encabezados...............................................................................................13

Añadiendo imágenes..............................................................................................................14

Haz clic en esa imagen...........................................................................................................15

Imágenes y enlaces................................................................................................................16

Listas...................................................................................................................................... 16

Tablas..................................................................................................................................... 17

Ejercicios módulo 1................................................................................................................. 20

Introducción

El HTML5 (HyperText Markup Language) es la quinta revisión del lenguaje de programación “básico” de la World Wide Web. Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el código actualizándolo a nuevas necesidades que demanda la web de hoy en día.

Muchas empresas ya están desarrollando sus sitios webs en esta versión del lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad.

¿Qué es el internet?Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras, sino que interconecta redes de computadoras entre sí. Una red de computadoras es un conjunto de máquinas que se comunican a través de algún medio (cable coaxial, fibra óptica, radiofrecuencia, líneas telefónicas, etc.) con el objeto de compartir recursos.

De esta manera, Internet sirve de enlace entre redes más pequeñas y permite ampliar su cobertura al hacerlas parte de una "red global". Esta red global tiene la característica de que utiliza un lenguaje común que garantiza la intercomunicación de los diferentes participantes; este lenguaje común o protocolo (un protocolo es el lenguaje que utilizan las computadoras al compartir recursos) se conoce como TCP/IP.

Internet es un acrónimo de INTERconected NETworks (Redes interconectadas). Para otros, Internet es un acrónimo del inglés INTERnational NET, que traducido al español sería Red Mundial.

¿Cómo funciona la web?La World Wide Web o www nace a principios de los años 90 en Suiza. Su función es ordenar y distribuir la información que existe en internet. La World Wide Web se basa en hipertextos, es decir, páginas en las que se pueden insertar hipervínculos. Estos conducen al usuario de una página web a otra o a otro punto de esa web.

Existen sistemas de escritura para las páginas llamados "Lenguaje de marcado". El más utilizado es el HTML o "Hyper Text Markup Lenguaje" (Lenguaje de marcas de hipertexto). Con esta escritura se dan las órdenes para que la información se presente de uno u otro modo en las páginas web. Las marcas ("tags" o etiquetas) permiten dar formato al texto y combinarlo con otros elementos multimedia. Esta página es un hipertexto HTML.

El protocolo HTTP se creó para que los hipertextos, hipervínculos e hipermedias cumplan su función. Son las siglas de Hypertext Transfer Protocol o Protocolo de Transferencia de Hipertexto. Funciona siguiendo cuatro pasos básicos: la conexión, la solicitud, la respuesta y la desconexión.

Es considerado un protocolo sin estado porque no guarda información sobre las transacciones que hace.

El direccionamiento URL sirve para nombrar la localización de la información a la que queremos acceder en internet a través de un sistema estándar de caracteres. Cada uno de los recursos de información en la red tiene una URL única. Con esta dirección el navegador accede a la página y nos la muestra.

Para navegar por internet se necesita un programa que pueda acceder a las páginas web. Estos programas se llaman navegadores y los más conocidos son Internet Explorer, Mozilla Firefox y Google Chrome. Las páginas web pueden alojar información de todo tipo y pueden contener texto, vídeo, imágenes, o diferentes aplicaciones. Para encontrar los datos deseados si no se conoce la URL haremos uso de los servidores de búsqueda o buscadores. Los más conocidos son Google y Yahoo.

Objetivo del cursoEn este curso el participante aprenderá a manejar los elementos básicos del código HTML5, hojas de estilos CSS3, así como de otras tecnologías que se implementan para la creación de páginas web.

Va dirigido a público en general interesados en el diseño de sitios web, así como código HTML5.

Requerimientos para este cursoDe usuario:

Conocimientos básicos de sistema operativo Windows. No se requiere conocimientos previos de diseño gráfico o programación.

De infraestructura:

Pc con sistema operativo Windows. Conexión a internet. Editor de texto: Sublime Text / Bloc de notas. Navegador web. Administrador de servidor; Wamp, Xampp, Appserv. PHP, MySQL. Gestor FTP Filezilla. Acceso a Cpanel. Memoria USB. Programas portables.

1.- Módulo HTML5 básico

Mejor estructuraActualmente es abusivo el uso de elementos DIV para estructurar una web en bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración estableciendo qué es cada sección, eliminando así <div> innecesarios.

Este cambio en la semántica hace que la estructura de la web sea más coherente y fácil de entender por otras personas y los navegadores podrán darle más importancia a según qué secciones de la web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación que interprete sitios web. Las webs se dividirán en los siguientes elementos:

<! DOCTYPE html>

Doctype es el encargado de indicarle al navegador web que el documento que está abriendo es un documento html. En esta versión el Doctype es mucho más simplificado y compatible con HTML y XHTML.

Anteriormente:

<header></header>

Elemento <header> representa un grupo de artículos introductorios o de navegación.

<nav></nav>

El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación. En otras palabras es la barra de navegación con su correspondiente botonera.

No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>.

Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>.

<article></article>

El elemento <article> representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido.

Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>.

<section></section>

Se utiliza para representar una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1 – h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web. Si comparamos con un blog, aquí estarían todas las entradas de un post.

<aside></aside>

Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página.

<footer></footer>

El elemento <footer> representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

Es importante aclarar que las etiquetas <div></div> aún pueden ser utilizadas. Siempre deben usarse cuando necesites una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico.

Ahora veamos cómo quedaría estructurada una página con las nuevas etiquetas de HTML5 que anteriormente hemos especificado.

Ejemplo de una página con HTML 4 Ejemplo de una página con HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Mi primera página con estilo</title></head>

<body>

<ul class="navbar"> <li><a href="indice.html">Página principal</a> <li><a href="meditaciones.html">Meditaciones</a> <li><a href="ciudad.html">Mi ciudad</a></ul>

<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.También tiene enlaces, aunque no te lleven aningún sitio…

<p>Debería haber más cosas aquí, pero todavía no séqué poner.

<address>Creada el 5 de abril de 2004<br> por mí mismo.</address>

</body></html>

<!DOCTYPE html> <html >

<head> <title>Titulo de la web</title> <meta charset="utf-8" /></head>

<body>

<header><h1> Sitio web creado en html5</h1><h2>Curso desarrollo de páginas web</h2></header>

<nav><ul class="navbar"> <li><a href="indice.html">Página principal</a> <li><a href="meditaciones.html">Meditaciones</a> <li><a href="ciudad.html">Mi ciudad</a></ul>

</nav>

<section><article>Aquí va un post, con su título en h2</article></section>

<aside>Aquí va la Barra lateral con los últimos posts, enlaces destacados, nube de etiquetas, etc.</aside>

<footer>Aquí va el nombre del desarrollador, Diseñador, Copyright, lo que siempre va al pie de una página o lo que quieras colocar.</footer></body></html>

Estructura básica HTML5La primera cosa que debemos hacer es configurar el esqueleto de la página o estructura básica HTML5.

<!DOCTYPE html> <html lang="es">

<head> <title>Titulo de la web</title> <meta charset="utf-8" /> </head>

<body><header>

<h1>header</h1> <p>Sitio web creado en html5 por (escribe tú nombre completo)</p>

</header><nav>

<h1>nav</h1></nav>

<section> <h2>section</h2>

<article> <h2>article</h2>

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

</section>

<aside> <h3>aside</h3> </aside>

<footer>footer

</footer>

</body></html>

Etiquetas de estructuraPara aprender más HTML, debemos aprender cómo hablar sobre HTML. Ya viste que usamos mucho los símbolos <>.

Las cosas adentro de <> se llaman etiquetas. Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y una etiqueta de cierre.

Un ejemplo de una etiqueta de inicio: <html>

Un ejemplo de una etiqueta de cierre: </html>

Imagina que las etiquetas son como paréntesis; cuando abres uno, debes cerrarlo. Las etiquetas también pueden anidarse, así que debes cerrarlas en el orden correcto: la etiqueta abierta más recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.

<primera etiqueta><segunda etiqueta>¡Algún texto!</segunda etiqueta></primera etiqueta>

La cabecera <head>Todo dentro de nuestro archivo HTML irá en medio de las etiquetas de inicio <html> y de cierre </html>. El archivo siempre consiste de dos partes: la cabecera y el cuerpo . Vamos a concentrarnos en la cabecera.

a. Tiene una etiqueta de inicio y una de cierre.

b. La cabecera incluye información importante, como el título de la página web.

c. El título son las palabras que vemos en la etiqueta (por ejemplo, el título de esta página es "Introducción a HTML").

Párrafos en el cuerpo <body>Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en medio de las etiquetas, el trozo completo de código es llamado un elemento.

elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>

¡Observa que ahora tenemos las dos etiquetas del título y del cuerpo! El contenido en el cuerpo es lo que será visible en la página real.

<!DOCTYPE html><html>

<head><title>

</title>

</head>

<body> <p> El contenido del primer párrafo </p> <p> El contenido del segundo párrafo</p></body>

</html>

Instrucciones:

1) Escribe el nombre de tu página en medio de las etiquetas del título. ¡Puede ser cualquier cosa!

2) Coloca las etiquetas de cierre y de inicio del cuerpo debajo de la etiqueta de cierre de cabecera.

3) ¡Vamos a crear párrafos dentro del cuerpo! Cada párrafo requiere etiquetas de inicio y de cierre: <p> y </p>. Colocamos el contenido en medio de las etiquetas.

4) En medio de las etiquetas de cuerpo, crea dos párrafos y escribe contenido en cada párrafo. (Para esto se requerirán 2 pares de etiquetas p).

5) En la última línea siempre debe terminar con </html>.

Párrafos y encabezados¡Definitivamente estamos haciendo un buen progreso! Hemos aprendido cuándo y por qué usamos HTML. También hemos aprendido cómo:

a) Configurar un archivo HTML con etiquetasb) Ponerle un título a la página web (en la cabecera, o <head>)c) Crear párrafos (en el cuerpo, o <body>)

El siguiente paso es colocarle encabezados a nuestros párrafos, usando las etiquetas de encabezado. Vamos a comenzar con la etiqueta <h1>, que marca una cosa como la más importante. (¡Todos saben que la fuente más importante es la más grande!).

Instrucciones:

1) Pregúntate a ti mismo: ¿cuál es el título de esta página?2) Crea un encabezado en la sección del cuerpo. Para hacerlo, crea una etiqueta <h1>.3) Ponle un encabezado a tu contenido. ¡Puede ser cualquier cosa!4) Cierra el elemento con una etiqueta de cierre </h1>. (Tu encabezado ahora debe estar en

medio de <h1> y </h1>.)5) Debajo del encabezado, crea dos párrafos con el contenido que quieras.

Recuerda: los párrafos requieren etiquetas <p></p>!


<head><title>

Encabezados y Párrafos</title>

</head><body><h1>Contenido principal</h1><p>Crea un encabezado en la

sección del cuerpo. Para hacerlo, crea una etiqueta, Ponle un encabezado a tu contenido.<p>

<p>Cierra el elemento con una etiqueta de cierre </h1>. (Tu encabezado ahora debe estar en medio).<p>

</body></html>

HTML nos permite tener más de un tamaño de encabezado. Hay seis tamaños de encabezado: ¡<h1> es el jefe de todos y <h6> es un enclenque!

<h1> - El Presidente Ejecutivo

<h2> - El Vicepresidente Elegante

<h3> - El director de algo

<h4> - El de gerencia intermedia

<h5> - El humilde asistente

<h6> - El que les lleva café a los demás

Usando todos los encabezadosDado que en total son seis tamaños de encabezados, deberíamos usarlos todos. (Incluso <h6>, nuestro humilde practicante encabezado que lleva café, necesita sentirse útil.)

Instrucciones:

1) Añade encabezados más al código, haciendo uso de <h2>, <h3>, <h4>, <h5> y <h6>. ¡Asegúrate de cerrar todas tus etiquetas!

2) Añade un párrafo corto debajo de cada encabezado. ¡No olvides que los párrafos necesitan etiquetas de inicio y de cierre <p></p>!

Aquí hay un resumen rápido de las cosas que hemos aprendido:

1) HTML se usa para dale estructura a los sitios web.2) Abrimos los archivos HTML usando un navegador, y el navegador traduce el archivo (nos

lo muestra).3) Los archivos HTML tienen una cabecera y un cuerpo (¡así como tú tienes una cabeza y un

cuerpo!)4) En la cabecera encontramos las etiquetas <title>, y las usamos para especificar el

nombre de la página web.5) Cómo hacer encabezados y párrafos.

Instrucciones:

1) Añade un título en medio de las etiquetas de título.2) Crea un encabezado de tamaño <h3> en el cuerpo. ¡Haz que tu encabezado diga lo que

quieras! (Pero no te olvides de cerrarlo.)3) Crea tres párrafos y llénalos con contenido (p.ej, sobre carros, tu mascota, tu ciudad

favorita para ir de viaje—¡lo que quieras!)


<head><title></title>

</head><body>

</body></html>

Añadiendo imágenesPuedes añadir imágenes a tus sitios web para hacer que se vean fantásticos. Solamente necesitas una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente a las demás. En vez de colocar el contenido en medio de las etiquetas, le dices a la etiquetas dónde está la imagen, usando src.

Mira bien la etiqueta a la derecha—¡le añade a la página una imagen de un pato de goma! ¿Ves la dirección web (o URL, por localizador de recursos uniforme) después de src=? Es "http://bit.ly/PK1euu". ¡Le dice a la etiqueta <img> de dónde obtener la imagen!



</head><body>

<img src="http://bit.ly/PK1euu"></img>

</body></html>

Es buena práctica poner texto alternativo a la imagen con el atributo alt.

<img src="casarural.jpg" alt="Los Tejos" />

Instrucciones:

1) Añade una segunda imagen debajo de la primera. (¡Asegúrate de que sea antes de la etiqueta de cierre de cuerpo!) Puedes escoger la imagen que quieras. Solamente busca una imagen en línea, y luego coloca la URL de esa imagen después de src= (asegúrate de ponerla entre comillas, como se muestra).

Haz clic en esa imagenAhora ya sabes cómo añadir imágenes a tu sitio web. Pero, ¿qué tal si quisieras darle clic a esa imagen para que te llevara a algún otro sitio?

La etiqueta <a></a> es la que se usa para crear hipervínculos (o simplemente enlaces) en las páginas web. ¡Éstas son las palabras o imágenes en las que haces clic que te lleven a una nueva página! Al igual que con <img>, <a> tiene un atributo que indica el enlace a donde vamos. En lugar de src, <a> usa href, de esta manera:

<a href="http://www.elcomercioengz.com/sa2015">¡Semana académica Mantenimiento</a>

src significa "source" (fuente). ¡Le dice al enlace <img> de dónde proviene la imagen!

href significa "hypertext reference" (referencia de hipertexto). el hipertexto (es decir, los enlaces) es texto sobre el cual puedes hacer clic. Href le dice a ese enlace a dónde ir, el texto después de href es la dirección web, y el texto en medio de <a> y </a> es el texto sobre el que haces clic.

Instrucciones:

1) Aquí está cómo convertir una imagen en un enlace: coloca una etiqueta <a href=""> antes de tus etiquetas <img> y una etiqueta </a> después de ellas. ¡En medio de las comillas después de href=, escribe la dirección de tu sitio web favorito!

Imágenes y enlaces¡Bien hecho! Cerciórate de que entiendes las imágenes y los enlaces antes de continuar con el repaso.

Instrucciones:

1) Añade dos imágenes en medio de las etiquetas de cuerpo. Una debe ser un enlace; la otra no. El enlace puede conducir a cualquier sitio que quieras.

2) Después de las dos imágenes, crea un enlace que simplemente sea una línea de texto. Puede conducir a cualquier sitio que quieras.



</head><body>

</body></html>

Ayuda:

Las imágenes funcionan de esta manera: <img src="URL del sitio web"></img>

Los enlaces funcionan así: <a href="URL del sitio web"></a>

ListasAdemás de organizar la información en un documento html, las listas son imprescindibles en crear menús de navegación en una página web. La lista se delimita con las directivas: <ul> ... </ul> y <li> ... </li>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

TablasLas tablas vuelven a su función: presentar la información, especialmente numérica, desde la introducción de las hojas de calculo. El conjunto de una tabla se delimita de las directivas <table> ... </table>. Cada tabla está compuesta por filas y celdas. Las filas se construyen con la directiva <tr> y las celdas con la directiva <td>. Estas dos directivas no pueden existir una sin otra. Trabajan siempre juntas aunque hay que definir una sola fila o celda.

<table><tr><td>Directivas</td><td>Atributos?</td><td>Directiva nueva?</td></tr>

<tr><td>aside</td><td>no</td><td>si</td></tr>

<tr><td>p</td><td>no</td><td>no</td></tr>

<tr><td>img</td><td>src</td><td>no</td></tr>

<tr><td>a</td><td>href</td><td>no</td></tr>

</table>

Copia y pega en un archivo nuevo de sublime text, guarda el archivo y visualiza en el navegador.

<!DOCTYPE HTML><html><head><title>Mi primera pagina web</title></head>

<body>

<h1>Aprender Html</h1><h2>El maravilloso mundo de Html5</h2>

<img src="Logo_Html5.png" />

<p>HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. </p>

<p>HTML 5 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> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.</p>

<ul><li>Nuevas directivas en Html5

<ul><li>article</li><li>aside</li><li>foter</li><li>nav</li><li>section</li></ul>

</li></ul>

<table><tr><td>Directivas</td><td>Atributos?</td><td>Directiva nueva?</td></tr>

<tr><td>aside</td><td>no</td><td>si</td></tr>

<tr><td>p</td><td>no</td><td>no</td></tr>

<tr><td>img</td><td>src</td><td>no</td></tr>

<tr><td>a</td><td>href</td><td>no</td></tr>

</table>

<p>Nota: Para informacion detallada sobre Html5, por favor visita la pagina web <a href="http://www.showbizreal.com/">ShowbizReal</a>, el proyecto <a href="http://www.showbizreal.com/html5/">Html, simple y claro</a></p>

</body></html>

Ejercicios módulo 1Copia, pega en un archivo nuevo de sublime text, guarda y visualiza con un navegador.

Ejercicio A


<head><title>Result</title>

</head><body><h1>ME GUSTAN LOS SANDWICHES</h1><img src="http://bit.ly/RhrMEn" />

<p>Me gustan los huevos fritos.</p><p>Tengo hambre!</p><p>Pero más los sandwiches.</p>

</body></html>

Ejercicio B

<a href="http://www.google.es/"><http://www.digitaljournalist.org/images/google.jpg" width="50" height="18" border="0"></a>

Ejercicio C

<a href="http://wixusblogger.blogspot.com/" target="_blank"><img src="http://4.bp.blogspot.com/_U8ODEZi-HMk/TORe_N-c0MI/AAAAAAAAAF0/VfQ9EeXp0aA/s1600/wixus_logo.png"/></a>

Ejercicio D

< a href ="mailto:[email protected]">Escribe a HTMLpoint</a>

Ejercicio E

<a name="marca en el mismo documento">En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis: <a href="#ancora">Visita HTMLpoint</a>

amh-guía_curso_html5_v2

Documents