Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Curso HTML 5 en Español

225 visualizaciones

Publicado el

Curso HTML 5

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Curso HTML 5 en Español

  1. 1. SITIOS WEB HTML 5 CSS 3 JSFRON T END PHP 5 MYSQ L JS BACK END
  2. 2. HTML 5. Introducción. ¿Os interesa hacer sitios web? ¡No busques más! Con HTML5 y CSS3, dos de los lenguajes en los que están basados los sitios web tendrás las bases adecuadas. Los veremos en este curso. El diseño web puede ser fascinante. Crear sitios web atractivos y profesionales es el sueño de millones de diseñadores de todo el mundo que utilizan las tecnologías de Internet. Un sitio web debe ser sobre todo accesible, intuitivo y agradable. La organización inicial es muy importante para poder utilizar eficazmente las herramientas y tomar decisiones oportunas. Debe iniciarse con la concepción del diseño web, explicar las estrategias de diseño y cómo organizar las ideas. El comprender el proyecto desde ésta etapa, permite un ahorro significativo de recursos en el momento de la implementación. HTML es divertido, y será el pan de cada día si ingresas al mundo del desarrollo web profesional. Sin embargo HTML es sólo un ingrediente del pastel (un sitio web profesional e interactivo en Internet), así que te recomiendo que primero te familiarices con el Diseño Gráfico, eso mejorará tu creatividad, diseña tus propios bocetos en Gimp e Inkscape para tus futuros sitios web, e impleméntalos poco a poco junto con CSS. Después que ya estás un poco más avanzado con lo antes mencionado, échale javascript y php. Es posible que pensés que no estás hechos para aprender el lenguaje informático, pero no os preocupéis: El HTML y el CSS son lenguajes simples. Las últimas versiones de estos lenguajes, HTML5 y CSS3, ofrecen posibilidades increíbles. Con ellos pedrés añadir texto a un sitio web, construir un menú de navegación, añadir imágenes, efectos gráficos y mucho más. ¿Estás preparados para hacer un sitio web desde cero? ¡Sigamos adelante! Lo mejor para practicar es pensar un proyecto. Imagina una página que quieras crear, bosquéjala como te gustaría, aunque algunas cosas no sepas como hacerlas. Después intenta llevarla a cabo y cuando te encuentras con desafíos vas aprendiendo las cosas que te hacen falta, te vas a encontrar con CSS, quiza con librerías tipo bootstrap, cuando quieras ponerle un comportamiento o animaciones con JavaScript ... y asi. No esperes a saber todo para comenzar tu proyecto... por que nunca vas a saber todo. Lo único que falta saber para poder estar en la web es aprender el lenguaje de la web; HTML. Para practicar, lo ideal es que montes un servidor web casero. Es mucho mas simple de lo que parece, hay paquetes por Internet que integran un servidor web Apache, un interprete php y una motor de base de datos MySql
  3. 3. ¿Para que todo eso? Pues porque en html aprenderás lo básico de "como hacer las páginas", pero solo la parte "visible". Luego necesitarás php y mysql (hay otras soluciones, pero esta es la más popular) para unir html con javascript, php y gestores de bases de datos. Las páginas modernas salvo pocas excepciones no son "estáticas", sino dinámicas. La diferencia está precisamente en esos otros lenguajes y la base de datos. Por ejemplo, el paquete WAMP valdría perfectamente para muchas cosas. Las páginas web. El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas web. Posiblemente el término página web sea el más utilizado en Internet, precisamente porque cuando se navega por la red se hace a través de páginas web. Las páginas web son el soporte de la información en la web. Una de las características más importantes de las páginas web es que son hipertextuales. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante enlaces hipertexto. Gracias a estos enlaces el navegante de Internet puede pulsar sobre un texto de una página para navegar hasta otra página. Será cuestión del desarrollador de la página inicial decidir que palabras o frases serán activas y a donde conducirá pulsar sobre estas. Por otro lado, los componentes que caracterizan una página web son: imágenes, textos y otros contenidos multimedia (sonido, video, etc.) Las secciones internas se encuentran enlazadas de manera que el usuario puede navegar de una página a otra utilizando hipervínculos, un concepto de interactividad surgido con el fenómeno Internet. Actualmente se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones, etc; es decir cualquier elemento de una página. Aún así, el término original no se ha extinguido todavía. Los sitios web Un sitio web es una localización en la web que contiene varias páginas web organizadas jerárquicamente. Cada sitio tiene una página de inicio que corresponde a la página principal, conocida en Inglés como Home Page y cuyo nombre de fichero sería index. Es la primera página que se visualiza cuando se accede a un sitio tecleando el nombre del dominio en la barra del navegador.
  4. 4. Un sitio tiene generalmente más de una página web y su objetivo principal es ofrecer la información que necesitan los usuarios y proporcionársela de manera que puedan asignarla fácilmente. Elementos que componen una página web. Una página web está compuesta por: 1. Texto. 2. Imágenes. 3. Hipervínculos. 4. Videos. 5. Animaciones. 6. Sonidos. 7. Formularios. El texto es el elemento más significativo de cualquier sitio web porque los usuarios navegan por la web fundamentalmente en busca de información expresada en hipertexto. Imágenes: Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal. Hipervínculos: Por sí misma, una página web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces. Video: Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios. Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine en la web para ponerlo al alcance de todos. Sonidos: Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales móviles como el iPhone ha potencializado este elemento. Además de incorporar sonido en la página web puede descargar de ellas archivos de audio para sus dispositivos móviles. El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión. Formulario: Zona para introducir datos o comentarios en espacios vacíos para llenarse con alguna finalidad. También se utiliza para referirse al conjunto de campos solicitados por un determinado programa, los cuales se almacenan o reciben para su manipulación o uso posterior. El éxito de un sitio depende de la forma en que se combinan contenidos, arquitectura del sitio, diseño e interactividad; los cuales determinan en gran medida la rapidez con que se genera y ofrece la información, y por supuesto el éxito de un sitio. Estos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar actualizaciones y atractivo visualmente para los usuarios, interesante para su audiencia, práctico para realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni comportamientos inadecuados.
  5. 5. ¿Cómo se hace una página Web? Cuando los diseñadores del WWW se hicieron esta pregunta decidieron que se debían cumplir, entre otras, las siguientes características:  La web tenía que ser distribuida: La información repartida en páginas no muy grandes enlazadas entre sí.  La web tenía que ser hipertextual y debía ser fácil para navegar por ella.  Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.)  Debía ser dinámica: El proceso de cambiar y actualizar la información debía ser ágil y rápido. Estas características son las que marcaron el diseño de todos los elementos del WWW incluido la creación de páginas web. Como respuesta a todos estos requisitos se creo el lenguaje HTML. Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.
  6. 6. HTML. HTML son las siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc. HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión, se introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha prestado especial atención a la definición de claros criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad. HTML5 se desarrolló para simplificar, especificar y organizar el código. Para lograr estos propósitos, se añadieron algunos atributos y etiquetas y se integró HTML con CSS Javascript. Estas incorporaciones y mejoras de versiones anteriores afectan no sólo a nuevos elementos, si no también a como usamos los viejos. La especificación actual de HTML 5 la podemos consultar en (http://dev.w3.org/html5/spec/Overview.html). Podemos seguir los cambios que se hacen a la especificación del HTML 5 en Twitter (http://twitter.com/HTML5). Los integrantes del grupo de trabajo para definir las especificaciones del HTML 5 pertenecen a muchas empresas y los podemos ver en (http://www.w3.org/2000/09/dbwg/details?group=40318&public=1). Se pueden escribir páginas en HTML5 utilizando el mismo software que se utiliza para escribir páginas HTML. No es necesario ningún programa especial para crear una página web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: editTM en MS-DOS, block de notas en Windows, viTM en UNIX, etc. Hay que tener en cuenta que deberemos guardar el archivo en modo texto con la extensión .html. ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html . Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html. En realidad, la estructura básica de una página HTML5 es tan sencilla que se puede utilizar cualquier editor web, para crearla, incluso si el editor web no está diseñado para HTML5. A continuación algunos de los navegadores que soportan gran parte de HTML5:  Internet Explorer 9 y versiones superiores  Firefox 3.5 y versiones superiores  Google Chrome 8 y versiones superiores  Safari 4 y versiones superiores  Opera 10.5 y versiones superiores
  7. 7. Existen alternativas que facilitan la creacion de páginas web. Son los editores HTML. Podemos dividir estos editores en los grupos:  Asistentes: Ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo HotDogTM (Window), HomeSiteTM (Windows), HTML EditorTM (Mac OS), QuantaTM (Linux, KDE) o BluefishTM, (Linux, GNOME.)  Conversores: Programas que permiten convertir a HTML, tales como Microsoft WordTM , Quark XPressTM y PageMakerTM .  Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): Editores que permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Adobe DreamweaverTM, HotMetalTM o Microsoft FrontpageTM. Tags, elementos y estructura de documentos HTML. HTML significa "Hyper Text Markup Language", es decir "Lenguaje de marcado de hipertexto". Este lenguaje describe una página web usando marcas o tags. A continuación vemos un ejemplo de código fuente de una página Web o documento HTML: <html> <head> <title>Hola Mundo</title> </head> <body> <h1>Hola clase 2018</h1> <p>Bienvenidas a nuestra primera <br/> web.</p> </body> </html> El código HTML está compuesto por caracteres englobados dentro de paréntesis angulados "< >" - que se llaman elementos o etiquetas. Html5 contiene un número de etiquetas considerable. Es importante como recomendación: escribirlas en minúsculas (excepto DOCTYPE), cerrar siempre las etiquetas, poner comillas en los atributos de las etiquetas, no omitir las etiquetas básicas (html, head, body.) Los archivos que contienen etiquetas html deben tener la extensión .html (aunque .htm se acepta también). Hay que tener especial cuidado con los nombres de los ficheros, ya que los servidores web son sensibles a minúsculas y mayúsculas. Tag HTML. Cada palabra rodeada por los símbolos "<" y ">" en el código fuente anterior es llamada tag. Existen 3 tipos de Tags:
  8. 8.  Tag de inicio o apertura. Ejemplo: <h1>  Tag de fin o cierre. Ejemplo: </h1>  Tag de inicio y cierre. Ejemplo: <br/> Los elementos están compuestos, generalmente, por una etiqueta de inicio y una de cierre. La etiqueta de cierre tiene una barra diagonal extra; "/>" Cada elemento informa al navegador sobre la información contenida dentro de esas etiquetas. Es decir las etiquetas están formadas por la siguiente estructura: <NOMBRE_ETIQUETA> O bien esta otra: <NOMBRE_ETIQUETA>TEXTO</NOMBRE ETIQUETA> Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas. Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir: <hr> Así de sencillo. Pero las etiquetas no se limitan a indicar ordenes, en ocasiones tienen parámetros. Por ejemplo la etiqueta <hr> daría lugar a que el navegador dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador. Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera: <etiqueta atributo="valor"> Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado. En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que permite controlar el grosor de la línea que será dibujada en pantalla. El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. Por ejemplo: <hr size=5> En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre.
  9. 9. Elemento HTML El html es un conjunto de etiquetas que se usan para formatear el contenido de una página web. Hay una etiqueta que se pone al principio del texto a formatear y otra al final (con una barra /) y estas tienen ciertos atributos: <etiqueta atributo="valor">Texto</etiqueta>. Los navegadores interpretan esas etiquetas y visualizan el contenido transformado de la página web. Un tag de inicio y su correspondiente tag de fin componen un elemento HTML. Ejemplo: <title>Hola mundo</title> Lo que esta entre un tag de inicio y su correspondiente tag de fin es el contenido del tag. Un tag de inicio y cierre por si solo compone un elemento HTML. Ejemplo: <br/> Pronto nos daremos cuenta de la sencillez de este lenguaje lo que le convierte en un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún. Primeros pasos con HTML Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas y para crear nuestra primera página. Estructura básica de un documento HTML El primer tag HTML de una web debería ser <html> y el último </html>. En otras palabras toda la pagina web debe estar contenida en un elemento HTML. Dentro del elemento HTML existen el elemento header que contendrá información de configuración y el elemento body que contendrá todo lo que es visible en nuestra página. El elemento title define el titulo de la página que podemos ver en la pestaña superior del navegador usado. Dentro de body no solo está la información a ser representada en la página web sino que existen marcadores o tags que indican como representar la información. Lista de elementos HTML en orden alfabético: Etiqueta Descripción <!--...--> Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!-- y --> dentro del cuerpo de la página, será ignorados por el navegador. <!DOCTYPE>Define el tipo de documento <a> Principalmente utilizado como hipervínculo. <abbr> Define una abreviación <acronym> Permite a los autores indicar claramente una sequencia de caracteres que componen un acrónimo o abreviación de una palabra. No soportado en HTML5.
  10. 10. <address> Define información de contacto del propietario del documento <applet> Esta etiqueta define un applet embebido dentro del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01. <area> Esta etiqueta define un área dentro de un mapa de imagen <article>* Define una composición independiente dentro de un documento, página, aplicación o web, que puede ser distribuida independientemente o reutilizada. <aside>* Define contenido secundario al contenido de la página. <audio>* Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5, puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o el elemento <source>. <b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita. <base> Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la página <basefont> Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01 <bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal. <bdo> Este elemento es utilizado para sobreescribir la dirección del texto. <big> Este elemento define texto grande. No soportado en HTML5. <blockquote> Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede reconocer porque está identado. <body> Este elemento es utilizado para definir el cuerpo del documento. <br> Define un salto de línea. <canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript) <caption> Defines el título de una tabla <center> Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No soportado en HTML5. Declarado en desuso en HTML 4.01. <cite> Especifica una cita o referecia a otro lugar <code> Indica que el texto englobado es código de programación. <col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear. <colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato. <command>* Define un botón comando al que el usuario puede llamar. <datalist>* Especifica una lista de opciones predefinidas para una caja de texto input <dd> Define una descripción de un item en una lista de definición <del> Define texto que ha sido eliminado de un documento. <details>* Define detalles adicionales que el usuario puede ver o esconder. <dfn> Define un término de una definición. <dialog>* Define una caja de diálogo o ventana. <dir> Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML 4.01. <div> Define una sección en un documento.
  11. 11. <dl> Define una lista de definición. <dt> Define un término (un item) dentro de una lista de definición. <em> Define énfasis en un texto. <embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML) <fieldset> Agrupa elementos relacionados en un formulario. <figcaption>* Define un título para un elemento <figure> <figure>* Especifica contenido independiente. <font> Define fuente, color y tamaño para un texto. No soportado en HTML5. <footer>* Define un footer para un documento o sección. <form> Define un formulario HTML para datos del usuario. <frame> Define una ventana dentro de un frameset. No soportado en HTML5. <frameset> Define un conjunto de "frames". No soportado en HTML5. <h1> -<h6> Define encabezados en HTML <head> Define información sobre el documento <header>* Define un encabezado para un documento o sección <hgroup> Agrupa elementos del encabezado (<h1> -<h6>) <hr> Define un cambio temático en el contenido <html> Define la raiz de un documento HTML <i> Este elemento se usa para representar un texto con un estilo de fuente en itálica <iframe> Define un documento HTML dentro de otro documento HTML <img> Define una imagen <input> Este elemento se utiliza para ingresar datos por parte del usuario <ins> Define el texto que ha sido insertado dentro del documento <kbd> Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado <keygen>* Define un campo generador de claves en formularios <label> Define una etiqueta para un elemento <input> <legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details> <li> Define un item de una lista <link> Este elemento define la relación entre el documento y un recurso externo (normalmente utilizado con hojas de estilo) <main>* Especifica el contenido principal del documento <map> Define un mapa de imagen en el lado del cliente <mark>* Define un texto resaltado en el documento <menu> Define un menu <meta> Define metadata de un documento HTML <meter>* Define una medida escalar dentro de un rango determinado <nav>* Define links de navegación <noframes> Especifica el contenido alternativo para los navegadores que no soportan frames. No soportado por HTML5.
  12. 12. <noscript> Especifica un contenido alternativo para navegadores que no soportan scripts. <object> Define un objeto embebido <ol> Este elemento especifica una lista ordenada <optgroup> Especifica un grupo de opciones en una lista desplegable. <option> Este elemento define una opción en una lista desplegable. <output>* Especifica el resultado de un cálculo <p> Especifica un párrafo <param> Este elemento especifica un parámetro para un objeto <pre> Define un texto con formato previo <progress>* Representa el progreso de una tarea <q> Define una cita de texto corta(en una línea) <rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby <rt>* Este elemento define la pronunciación de caracteres (para tipografía del este asiático) <ruby>* Define una anotación ruby (para tipografía del este asiático) <s> Esta etiqueta define texto con un estilo de fuente tachado <samp> Muestra un mensaje de un programa o script <script> Define un script dentro del documento <section>* Define una sección en un documento <select> Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista desplegable <small> Se utiliza para presentar un texto con un estilo de fuente pequeña <source>* Define las fuentes para los elementos multimedia como video y audio. <span> Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después darles formato con la hoja de estilo. <strike> Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No soportado en HTML5. Declarado en desuso en HTML 4.01. <strong> Se utiliza para representar texto importante <style> Este elemento define el estilo del documento <sub> Representa un subíndice <summary>* Define un encabezado para el elemento <details> <sup> Representa un superíndice <table> Define una tabla <tbody> Agrupa el contenido del body de una tabla <td> Define una célda de una tabla <textarea> Este elemento especifica una área para escribir texto <tfoot> Agrupa el contenido del footer de una tabla <th> Representa la celda del encabezado de una tabla <thead> Agrupa el contenido del encabezado de una tabla <time>* Define la fecha y hora
  13. 13. <title> Define el título de un documento <tr> Define una fila dentro de una tabla <track>* Define determinadas características para las pistas de texto de elementos multimedia como; vídeos o audios. <tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5. <u> Define texto con un estilo de fuente subrayado. <ul> Define una lista no ordenada <var> Define una variable <video>* Define un video o película <wbr>* Define donde un texto se puede romper para cambios de línea Elementos HTML ordenados por función: Esto nos ayudará a saber que elemento utilizar en cada caso para poder facilitar el desarrollo de páginas web compatibles con distintos navegadores y plataformas. Básicos: Etiqueta Descripción <!--...--> Define un comentario. Cualquier información que se ponga dentro de las etiquetas <!-- y --> dentro del cuerpo de la página, será ignorados por el navegador. <!DOCTYPE>Define el tipo de documento <html> Define la raiz de un documento HTML <title> Define el título de un documento <body> Este elemento es utilizado para definir el cuerpo del documento. <h1> -<h6> Define encabezados en HTML <p> Especifica un párrafo <br> Define un salto de línea. <hr> Define un cambio temático en el contenido Secciones o estilo: Etiqueta Descripción <style> Este elemento define el estilo del documento <div> Define una sección en un documento. <span> Agrupa varios elementos en línea seguidos dentro de un mismo bloque, para después darles formato con la hoja de estilo. <header>* Define un encabezado para un documento o sección
  14. 14. <footer>* Define un footer para un documento o sección. <section>* Define una sección en un documento <article>* Define una composición independiente dentro de un documento, página, aplicación o web, que puede ser distribuida independientemente o reutilizada. <aside>* Define contenido secundario al contenido de la página. <details>* Define detalles adicionales que el usuario puede ver o esconder. <dialog>* Define una caja de diálogo o ventana. <summary>* Define un encabezado para el elemento <details> Información meta: Etiqueta Descripción <head> Define información sobre el documento <meta> Define metadata de un documento HTML <base> Define cuál es la URL absoluta para todos aquellos enlaces que sean relativos en la página <basefont> Especifica un color, tamaño y fuente por defecto, para todo el texto del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01 Formato: Etiqueta Descripción <acronym> Permite a los autores indicar claramente una sequencia de caracteres que componen un acrónimo o abreviación de una palabra. No soportado en HTML5. <abbr> Define una abreviación <address> Define información de contacto del propietario del documento <b> Este elemento indica que el texto englobado tiene que ser mostrado en negrita. <bdi>* Aisla una parte del texto que puede tener un formato diferente del texto principal. <bdo> Este elemento es utilizado para sobreescribir la dirección del texto. <big> Este elemento define texto grande. No soportado en HTML5. <blockquote> Este elemento se utiliza para designar una cita de texto larga. Normalmente, se puede reconocer porque está identado. <center> Este elemento hace que el texto englobado esté centrado dentro de los márgenes. No soportado en HTML5. Declarado en desuso en HTML 4.01. <cite> Especifica una cita o referecia a otro lugar <code> Indica que el texto englobado es código de programación. <del> Define texto que ha sido eliminado de un documento.
  15. 15. <dfn> Define un término de una definición. <em> Define énfasis en un texto. <font> Define fuente, color y tamaño para un texto. No soportado en HTML5. <i> Este elemento se usa para representar un texto con un estilo de fuente en itálica <ins> Define el texto que ha sido insertado dentro del documento <kbd> Este elemento se utiliza para avisar al usuario que tiene que introducir datos por teclado <mark>* Define un texto resaltado en el documento <meter>* Define una medida escalar dentro de un rango determinado <pre> Define un texto con formato previo <progress>* Representa el progreso de una tarea <q> Define una cita de texto corta(en una línea) <rp>* Define que mostrar en los navegadores que no soportan anotaciones ruby <rt>* Este elemento define la pronunciación de caracteres (para tipografía del este asiático) <ruby>* Define una anotación ruby (para tipografía del este asiático) <s> Esta etiqueta define texto con un estilo de fuente tachado <samp> Muestra un mensaje de un programa o script <small> Se utiliza para presentar un texto con un estilo de fuente pequeña <strike> Este elemento se utiliza para representar un texto con un estilo de fuente tachado. No soportado en HTML5. Declarado en desuso en HTML 4.01. <strong> Se utiliza para representar texto importante <sub> Representa un subíndice <time>* Define la fecha y hora <tt> Define texto con un estilo de fuente en teletipo. No soportado en HTML5. <u> Define texto con un estilo de fuente subrayado. <ul> Define una lista no ordenada <var> Define una variable <wbr>* Define donde un texto se puede romper para cambios de línea Formularios: Etiqueta Descripción <form> Define un formulario HTML para datos del usuario. <input> Este elemento se utiliza para ingresar datos por parte del usuario <textarea> Este elemento especifica una área para escribir texto <button> Se utiliza para crear botones de un formulario <select> Muestra varias opciones al usuario y permite que elija entre ellas una o más en una lista desplegable
  16. 16. <optgroup> Especifica un grupo de opciones en una lista desplegable. <option> Este elemento define una opción en una lista desplegable. <label> Define una etiqueta para un elemento <input> <fieldset> Agrupa elementos relacionados en un formulario. <legend> Este elemento define un título para un elemento <fieldset>, <figure> o <details> <datalist>* Especifica una lista de opciones predefinidas para una caja de texto input <keygen>* Define un campo generador de claves en formularios <output>* Especifica el resultado de un cálculo Tablas: Etiqueta Descripción <table> Define una tabla <caption> Defines el título de una tabla <th> Representa la celda del encabezado de una tabla <tr> Define una fila dentro de una tabla <td> Define una celda de una tabla <thead> Agrupa el contenido del encabezado de una tabla <tbody> Agrupa el contenido del body de una tabla <tfoot> Agrupa el contenido del footer de una tabla <col> Define una columna dentro de una tabla y se utiliza para agrupar y alinear. <colgroup> Especifica un grupo de una o más columnas de una tabla para darles formato. Listas: Etiqueta Descripción <u> Define texto con un estilo de fuente subrayado. <ol> Este elemento especifica una lista ordenada <li> Define un item de una lista <dir> Define una lista directorio. No soportado en HTML5. Declarado en desuso en HTML 4.01. <dl> Define una lista de definición. <dt> Define un término (un item) dentro de una lista de definición. <dd> Define una descripción de un término en una lista descriptiva <menu> Define un menu <command>* Define un botón comando al que el usuario puede llamar.
  17. 17. Enlaces Etiqueta Descripción <a> Principalmente utilizado como hipervínculo. <link> Este elemento define la relación entre el documento y un recurso externo (normalmente utilizado con hojas de estilo) <nav>* Define links de navegación Imágenes: Etiqueta Descripción <img> Define una imagen <map> Define un mapa de imagen en el lado del cliente <area> Esta etiqueta define un área dentro de un mapa de imagen <canvas>* Utilizada para dibujar gráficos, mediante scripts. (normalmente JavaScript) <figcaption>* Define un título para un elemento <figure> <figure>* Especifica contenido independiente. Audios y videos: Etiqueta Descripción <audio>* Se utiliza para representar contenido de audio en los documentos. Añadido en HTML5, puede contener diferentes fuentes de audio, representadas utilizando el atributo "src" o el elemento <source>. <source>* Define las fuentes para los elementos multimedia como video y audio. <track>* Define determinadas características para las pistas de texto de elementos multimedia como; vídeos o audios. <video>* Define un video o película Marcos o frames: Etiqueta Descripción <frame> Define una ventana dentro de un frameset. No soportado en HTML5. <frameset> Define un conjunto de "frames". No soportado en HTML5. <noframes> Especifica el contenido alternativo para los navegadores que no soportan frames. No soportado por HTML5. <iframe> Define un documento HTML dentro de otro documento HTML
  18. 18. Programación: Etiqueta Descripción <script> Define un script dentro del documento <noscript> Especifica un contenido alternativo para navegadores que no soportan scripts. <applet> Esta etiqueta define un applet embebido dentro del documento. No soportado en HTML5. Declarado en desuso en HTML 4.01. <embed>* Se utiliza para declarar un contenedor para una aplicación externa (no- HTML) <object> Define un objeto embebido <param> Este elemento especifica un parámetro para un objeto * Etiqueta añadida en HTML5. DOCTYPE. Es la declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html. Ahora con el HTML 5 se simplifica esta sección con la siguiente sintaxis: <!DOCTYPE HTML> Es importante agregar el DOCTYPE, de esta forma el navegador puede saber que estamos utilizando la especificación del HTML 5. Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea. Ejemplo de uso de DOCTYPE con HTML 5. <!DOCTYPE HTML> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> <p>Si vemos el código fuente de esta página veremos la forma de declarar el DOCTYPE en HTML5.</p> </body> </html>
  19. 19. <html> Después de declarar el tipo de documento, se construye la estructura del árbol con HTML. El elemento raiz del árbol es el elemento <html>. Deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente. Este elemento engloba todo el código HTML. <!DOCTYPE html> <html lang="es"> </html> El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando - en este caso, es para Español. HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su desarrollo. El elemento <html> puede ser incluido sin atributos o no ser incluido. Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas básicas, siguiendo un manual de buenas prácticas. El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo. La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML. <head> Sigamos con la construcción de nuestras páginas. El código HTML incluido en las etiquetas <html> tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear dos secciones en el código, utilizando esos dos elementos; <head> y <body>. En la cabecera de la página se introduce toda aquella información que afectará a toda la página. El elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de apertura y otro de cierre. <!DOCTYPE html> <html lang="es"> <head> </head> </html>
  20. 20. El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags" <head>, definiremos el título de nuestra página, declararemos la codificación de caracteres, incluiremos cualquier información general que queramos sobre el documento e incorporaremos archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página. Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del navegador dedicada a mostrar el contenido. A excepción del título y algunos iconos, el resto de la información incluida en el documento dentro de las etiquetas <head> no será visible. <body> La siguiente sección que forma parte de la organización principal del documento HTML es el "body". Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>; el cuerpo es el siguiente gran bloque de nuestro documento HTML. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser texto, imágenes, tablas, etc. Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML: <!DOCTYPE html> <html lang="es"> <head> </head> <body> </body> </html> NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito. <meta> A continuación vamos a desarrollar la cabecera del documento. Existen algunas modificaciones e innovaciones dentro de esta sección, y una de ellas es la etiqueta que define la codificación de los caracteres del documento. Es la etiqueta meta y especifica como se debe presentar el texto dentro de la pantalla. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> </head> <body> </body> </html>
  21. 21. La modificación para este elemento de HTML5, es como en muchos casos, una simplificación. La etiqueta meta nueva para la codificación de caracteres es más corta y más simple. Igualmente, se puede cambiar utf-8 por la codificación que se prefiera, y se pueden añadir otras etiquetas meta como "description" o "keywords", tal y como se ve a continuación: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Esto es un ejemplo de HTML5"> <meta name="keywords" content="HTML5"> </head> <body> </body> </html> Nota: La etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de estos valores serán mostrados en la pantalla. En HTML5, no es necesario poner una barra de cierre, pero se recomienda por razones de compatibilidad. <title> La etiqueta <title>, especifica el título del documento y no hay nada nuevo en HTML5. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Esto es un ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Título del documento</title> </head> <body> </body> </html> Cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción agregar a favoritos, añadirá el nombre que le hemos dado a nuestra página con <title>. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia. Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana. <link>
  22. 22. Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de <link>, es insertar un archivo CSS externo: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Esto es un ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Título del documento</title> <link rel="stylesheet" href="styles.css"> </head> <body> </body> </html> En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por lo que el atributo type ha sido eliminado. Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El atributo rel se refiere a la relación entre el documento y el archivo que estamos incluyendo. En este caso tiene el valor= "stylesheet", lo que le indica al navegador que el archivo styles.css es un archivo CSS con estilos necesarios para mostrar la página. Nota: Una hoja de estilos es un conjunto de reglas de formato que nos ayuda a cambiar la presentación de nuestro documento - por ejemplo, el tamaño o el color del texto. Sin estas reglas, el texto y otros elemento se mostrarán en la pantalla utilizando los estilos estándares suministrados por los navegadores (tamaño y colores por defecto.) Estructura del cuerpo- HTML5 La estructura del cuerpo (el código entre los tags <body>) generará la parte visible de nuestro documento. Será el código que genere nuestra página web. HTML ofrece diferentes formas para construir y organizar la información en el cuerpo del documento. Uno de los primeros elementos que ofrece HTML para este propósito es <table>. Las tablas, aunque no fueran ideadas para eso, permiten organizar data, texto, imágenes dentro de filas y columnas.
  23. 23. Con el tiempo y gradualmente, otros elementos han reemplazado la función de las tablas, aportando diferentes maneras de hacer lo mismo con menos código y de una manera más rápida, facilitando la creación, portabilidad y mantenimiento. El elemento <div> empezó extenderse y dominar este campo. Sin embargo, el elemento <div> o <table>, no suministran mucha información sobre las partes del cuerpo que están representando. Cualquier cosa puede ir dentro de las etiquetas de apertura y cierre <div>, desde imágenes, menúes, textos, enlaces, scripts, formularios, etc. Para los usuarios, saber que hay dentro de las etiquetas no es importante, pero para los navegadores es crucial saberlo para hacer la correcta interpretación de los documentos. Teniendo esto en cuenta, HTML5 ha incorporado nuevos elementos que ayudan a identificar cada parte del documento y a organizar el cuerpo. Como utilizar estos nuevos elementos, es cosa nuestra, pero las palabras clave seleccionadas para cada uno, ayudará a saber cuál es su función. Normalmente una página web o aplicación web está dividida en diferentes áreas visuales para poder mejorar la experiencia del usuario y su interactividad. Las palabras clave que representan cada elemento nuevo de HTML5, están relacionadas a estas áreas visuales. Organización Cada diseñador crea sus propios diseños, pero en general podremos identificar dentro de cada página web las siguientes secciones: Cabecera Barra de navegación
  24. 24. Información principal Barra lateral Institucional  Arriba del todo, tenemos la cabecera, que es el lugar donde solemos tener el logo, nombre, y pequeñas descripciones de nuestra página web.  Debajo de la cabecera, podemos ver la barra de navegación, en la que casi cualquier desarrollador ofrece un menú o lista de enlaces para navegar por el sitio web. Los usuarios son llevados desde esta barra a diferentes páginas o documento, normalmente en el mismo sitio web. El contenido más importante de la página se localiza normalmente en el medio de la distribución. Esta sección muestra la información importante y links. Casi siempre está dividida en varias filas y columnas.  La sección de información principal, podría tener una lista de artículos, descripciones de productos, entradas de blog y cualquier otra información importante.  La barra lateral podría tener por ejemplo, una lista de enlaces apuntando a cada uno de estos elementos.  Abajo del todo, tenemos una barra llamada barra institucional. Se llama así porque es el área de la página donde tenemos información general del sitio web, el autor o la compañía, además de enlaces con referencia a términos y condiciones, mapas e información adicional que el desarrollador cree importante compartir. La barra institucional es el complemento de la cabecera, y es considerada como una parte esencial de la estructura de la página.
  25. 25. Elementos HTML semánticos. El HTML 5 introduce una serie de elementos estructurales que facilitarán tanto el desarrollo de las páginas como también el análisis de las mismas por buscadores. Los elementos de HTML 5 que ayudan a estructurar la parte semántica de la página son: header: El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc) El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página) Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase: <p> Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... </p> nav: El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación. No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación. section: El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado. Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc. footer: El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc. aside: El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa. El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página.
  26. 26. article: El elemento article representa una entrada independiente en un blog, revista, periódico etc. Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario. Ejemplo de página añadiendo estos elementos semánticos: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Elementos semánticos del HTML5</title> </head> <body> <header> <h1>Encabezado de la página</h1> </header> <nav> <p>enlaces de navegación</p> </nav> <section> <p>Sección 1</p> </section> <section> <p>Sección 2</p> </section> <aside> <p>Publicidad</p> </aside> <footer> <p>Pié de página</p> </footer> </body> </html> Estructura del cuerpo en HTML5. Etiqueta <header> HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y declararlos. Con ello podemos informar al navegador, la función de cada sección. A continuación tenemos una representación visual de la organización de las secciones utilizando las etiquetas HTML5. La primera de estas etiquetas es <header>:
  27. 27. <header></header> <nav></nav> <section></section> <aside></aside> <footer></footer> <header> Uno de los nuevos elementos incorporados en HTML5 es <header>. No debe ser confundido con la etiqueta <head>, que hemos utilizado anteriormente. De la misma manera que la etiqueta <head>, la etiqueta <header> aporta información introductoria (como títulos, subtítulos, logos....), pero en otro ámbito. Mientras que la etiqueta <head> tiene la función de suministrar información sobre todo el documento, la etiqueta <header> aporta información del cuerpo del documento o de alguna sección dentro del cuerpo. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5">
  28. 28. <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Hola mundo</h1> </header> </body> </html> En el código, vemos que definimos el título de la página web, utilizando la etiqueta <header>. Recuerde que este título no es el mismo que el título general del documento definido previamente en el <head>. La inserción del elemento <header> representa el principio del cuerpo y de la parte visible del documento. Nota: El elemento <h1> es un elemento de HTML utilizado para definir un títular. El número indica la importancia del titular y su contenido. El elemento <h1> es el de mayor importancia y <h6> es el de menor, por lo que el <h1> será utilizado para mostrar el título principal y el resto para títulos secundarios. Estructura del cuerpo en HTML5. Etiqueta <nav> HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y declararlos. Con ello podemos informar al navegador, la función de cada sección. A continuación tenemos una representación visual de la organización de las secciones utilizando las etiquetas HTML5. Vamos aprender sobre la primera de estas etiquetas, <nav>; <header></header> <nav></nav>
  29. 29. <section></section> <aside></aside> <footer></footer> <nav> La siguiente sección a explicar es la barra de navegación. Esta es generada en HTML5 con la etiqueta <nav>. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul>
  30. 30. </nav> </body> </html> Como vemos en el código anterior, el elemento <nav> se encuentra dentro de las etiquetas <body>, pero después de las etiquetas de cierre de header (</header), no entre las etiquetas <header>. Esto es porque el <nav> no forma parte del header, si no que es una nueva sección. HTML5 es muy versátil y nos suministra los parámetros y elementos básicos con los que podemos trabajar. Como utilizar esos elementos para crear nuestra estructura y el orden que escojamos es una decisión nuestra. Un ejemplo de esta versatilidad es la etiqueta <nav>, que podemos insertar o bien dentro del elemento <header> o bien dentro de cualquier otra sección del cuerpo. Igualmente, hay que tener en cuenta, que estas etiquetas nuevas se han creado para proveer a los navegadores con más información y así ayudar a cualquier programa nuevo o dispositivo del mercado a identificar las partes más relevantes del documento. Para mantener nuestro código portable y legible, recomendamos seguir los estándares y mantenerlo lo más ordenado posible. El elemento <nav> está hecho para incluir ayudas a la navegación como el menú principal o los bloques principales de navegación y se debería utilizar para este propósito. Nota: En este ejemplo, haremos una lista con las opciones de menú de nuestra página web. Entre las etiquetas <nav>, existen dos elementos que se utilizan para crear una lista. Utilizamos el elemento <ul> para definir la lista. Dentro de estas etiquetas <ul> vemos varias etiquetas <li> con diferente texto, que representan las opciones de menú. Estas etiquetas <li>, se utilizan para definir cada elemento de la lista. Estructura del cuerpo en HTML5. Etiqueta <section> HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y declararlos. Con ello podemos informar al navegador, la función de cada sección. A continuación tenemos una representación visual de la organización de las secciones utilizando las etiquetas HTML5. Vamos aprender sobre la etiqueta <section>: <header></header> <nav></nav>
  31. 31. <section></section> <aside></aside> <footer></footer> <section> Siguiendo nuestro diseño estandar tenemos la barra de contenido principal que contiene la información más relevante del documento que puede disponerse, por ejemplo, en varios bloques o columnas. Dado que el propósito de estas columnas o bloques es más general, el elemento HTML5 que lo especifica se llama simplemente <section>. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li>
  32. 32. <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> Tutoriales para la web </section> </body> </html> Igual que la barra de navegación, la barra de contenido principal es una sección separada del resto. Por lo tanto esta sección se localiza debajo de la etiqueta de cierre </nav>. IMPORTANTE: Las etiquetas que representan cada sección del documento aparecen listadas dentro del código, una encima de la otra, pero en las páginas web algunas de estas secciones aparecerán una al lado de la otra. (Por ejemplo las columnas de Contenido principal y la Barra lateral.) En HTML5, la presentación en pantalla se delega a CSS. El diseño se llevará a cabo asignando un estilo CSS a cada elemento. Estructura del cuerpo en HTML5. Etiqueta <aside> HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y declararlos. Con ello podemos informar al navegador, la función de cada sección. A continuación tenemos una representación visual de la organización de las secciones utilizando las etiquetas HTML5. <header></header> <nav></nav>
  33. 33. <section></section> <aside></aside> <footer></footer> <aside> En una distribución estándar de una página web, la barra lateral está situada al lado de la barra de contenido principal. Es una columna o sección que normalmente contiene datos relacionados con el contenido principal pero con una relevancia o importancia menor. En el diseño estándar de un blog, la barra lateral contiene una lista de enlaces. La información dentro de esta barra está relacionada con el contenido principal de la página pero no es relevante por si sola. Siguiendo con el ejemplo del blog, podemos decir que las entradas del blog son importantes, pero los enlaces y resúmenes de esas entradas son sólo una ayuda navegacional y no en lo que el lector o usuario está más interesado. En HTML5, podemos diferenciar este tipo de información secundaria con el elemento <aside>. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header>
  34. 34. <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> Tutoriales para la web </section> <aside > English Version </aside> </body> </html> El elemento <aside> puede estar localizado en cualquier parte del diseño; la etiqueta no define la posición, como vemos en el ejemplo. El elemento <aside> sólo describe la información que engloba, no un lugar en la estructura y se puede utilizar siempre que el contenido no quiera ser considerado como el contenido principal del documento. Podemos utilizar el elemento <aside>, por ejemplo, dentro de un elemento <section>, o incluso dentro de una sección con información relevante - en un cita dentro de un texto. Hay que recordar que en HTML5, la presentación en pantalla de estos elementos ha sido delegado a CSS. El diseño se consigue asignando estilos CSS a cada elemento. Estructura del cuerpo en HTML5. Etiqueta <footer> HTML5 tiene una estructura y un diseño básicos y aporta nuevos elementos para diferenciarlos y declararlos. Con ello podemos informar al navegador, la función de cada sección. A continuación una representación visual de la organización de las secciones utilizando las etiquetas HTML5. Vamos aprender sobre la etiqueta <footer>: <header></header>
  35. 35. <nav></nav> <section></section> <aside></aside> <footer></footer> <footer> Para dar por concluido nuestra plantilla o estructura básica de nuestro documento HTML5, sólo falta un elemento más. Para cerrar el diseño debemos darle terminación al cuerpo del documento. HTML5 tiene un elemento específico para este fin llamado <footer>: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul>
  36. 36. <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> Tutoriales para la web </section> <aside > English Version </aside> <footer> Copyright &copy; 2005 - 2018 </footer> </body> </html> En el diseño estándar de una página web (ver Estructura del cuerpo - HTML5), la sección llamada barra institucional será definida con etiquetas <footer>. Se llama así porque la barra representa el fin (o pie) de nuestro documento y esta parte de la página web es utilizada normalmente para compartir información general sobre el autor o la compañía que ha creado el proyecto; como copyright, términos y condiciones, etc. Normalmente, el elemento <footer> representa el fin del cuerpo de nuestro documento y tiene el propósito antes descrito. Sin embargo, la etiqueta <footer> puede ser usada varias veces dentro del cuerpo para representar el fin de las diferentes secciones. (La etiqueta <header> también puede ser utilizada varias veces dentro del cuerpo.) Contenido del cuerpo. Etiqueta article. El cuerpo de nuestro documento ya está completo. La estructura básica de la página web está terminada y ahora tenemos que trabajar en el contenido. Los elementos HTML5 que hemos visto nos ayudan a identificar cada sección del diseño y asignar una función intrínseca para cada uno de ellos, pero lo que es realmente importante es lo que hay dentro de cada una de esas secciones. La mayoría de los elementos ya estudiados fueron creados para dar una estructura a la página web que los navegadores y nuevos dispositivos puedan identificar. Las etiquetas <body> son para declarar el cuerpo o las partes visibles del documento, las etiquetas <header> son para englobar información importante para el cuerpo, las etiquetas <nav> para aportar ayuda a la navegación, las etiquetas <section> contienen el contenido más importante y las etiquetas <aside> y <footer> suministran información adicional.
  37. 37. Pero ninguno de estos elementos declaran algo sobre el contenid. Todos tienen una función estructural muy específica. Cuanto más profundizamos en el documento, más nos acercamos a la definición del contenido. Esta información estará compuesta por elementos visuales diferentes como títulos, textos, imágenes, videos y aplicaciones interactivas entre otras. Necesitamos poder diferenciar estos elementos y establecer relaciones entre ellos. <article> De las misma manera en que los blogs están divididos en entradas, las páginas webs están divididas en partes que tienen características similares. El elemento <article> permite identificar cada una de estas partes. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> <article> VIDEO TUTORIALES HTML Tutoriales de HTML para principiantes o iniciación. Aquí aprenderemos desde cero . Algunos de los conceptos que veremos son básico, pero los veremos siempre en el entorno web. </article> <article> VIDEO TUTORIALES CSS Tutoriales de CSS para principiantes. Aquí aprenderemos como utilizar el lenguaje de estilos en cascada CSS.
  38. 38. </article> </section> <aside > English Version </aside> <footer> Copyright &copy; 2005-2018 </footer> </body> </html> Como podemos ver en el código, las etiquetas <article> están dentro de las etiquetas <section>. Las etiquetas <article> pertenecen a esa sección. Son sus hijos, de la misma manera que las etiquetas que están dentro de las etiquetas <body> son hijos del cuerpo. Pero como con todo hijo del nodo cuerpo, las etiquetas <article> son colocadas una después de la otra, ya que cada una de ellas es una parte independiente de <section>. Como hemos dicho, la estructura HTML puede ser descrita como un árbol, con el elemento <html> de raíz. Otra forma de describir las relaciones entre los elementos es denominarlos, padres, hijos o hermanos según la posición en la estructura del árbol. Por ejemplo, en un documento HTML típico, el elemento <body> es el hijo del elemento <html> y hermano del elemento <head>. Tanto, <body> como <head>, tiene el elemento <html> como padre. El elemento <article> no sólo habla de artículos. <article> está creado para contener una unidad independiente de contenido, por lo que puede llevar un post de un foro, un artículo de una revista, una entrada de un blog, un comentario de un usuario, etc. Este elemento agrupará unidades de información relacionadas entre sí, sin tener en cuenta la naturaleza de la información. Como parte independiente del documento, el contenido de cada elemento <article> tendrá su estructura independiente. Para definir esta estructura podemos sacar ventaja a la versatilidad de las etiquetas <header> y <footer> ya estudiadas anteriormente. Estas etiquetas son portables y pueden ser utilizadas fuera del cuerpo, en todas las secciones del documento. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul>
  39. 39. <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> <article> <header> <h1>VIDEO TUTORIALES HTML</h1> </header> Tutoriales de HTML para principiantes o iniciación. Aquí aprenderemos desde cero . Algunos de los conceptos que veremos son básico, pero los veremos siempre en el entorno web. <footer> <p>comments (0)</p> </footer> </article> <article> <header> <h1>VIDEO TUTORIALES CSS</h1> </header> Tutoriales de CSS para principiantes. Aquí aprenderemos como utilizar el lenguaje de estilos en cascada CSS. <footer> <p>comments (0)</p> </footer> </article> </section> <aside > English Version </aside> <footer> Copyright &copy; 2005-2018 </footer> </body> </html> Esto sería un ejemplo de una unidad de información creada con <article>, con una estructura propia. Primero con la etiqueta <header> que contiene el título definido con <h1>. A continuación, el contenido propiamente dicho, un texto describiendo el tutorial. Y finalmente, después del texto, la etiqueta <footer> especificando el número de comentarios. Contenido del cuerpo. Etiqueta hgroup.
  40. 40. Ya hemos incorporado etiquetas <h1> para especificar el título, dentro de un elemento <header>, al principio del cuerpo o al principio de cada <article>. Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. <h1> son necesarios para crear el encabezado de cada parte del documento. A veces necesitamos también añadir subtítulos o más información para describir el contenido de la página web o de alguna sección. <header> está hecho para incluir otros elementos - como por ejemplo, una tabla de contenidos, formularios de búsqueda, logos o textos cortos. Para construir encabezados, podemos utilizar las ventajas que nos dan el resto de las etiquetas H: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. <h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6> NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Hay que destacar que los encabezados de h1 a h4 pueden ser usados como títulos ya que los navegadores suelen usar un tamaño de letra mayor que el habitual para mostrarlos. Sin embargo los encabezados h5 y h6 suelen ser mostrados con letra más pequeña aún que el texto y por esta razón se usan como notas a pie de página o comentarios de poca importancia. Pero para propósitos de procesamiento interno, y para evitar generar múltiples secciones o subsecciones durante la interpretación del documento, estas etiquetas se deben agrupar. Para esto el HTML5, proporciona <hgroup>. <hgroup> <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body>
  41. 41. <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> <article> <header> <hgroup> <h1>VIDEO TUTORIALES HTML </h1> <h2>Primer programa, con Visual Studio Code en Español. Como maquetar con HTML </h2> </hgroup> </header> Este tutorial es el primero de una serie de tutoriales en los que aprenderemos los conceptos básicos del lenguaje HTML. <footer> <p>comments (0)</p> </footer> </article> </section> <aside > English Version </aside> <footer> Copyright &copy; 2005-2018 </footer> </body> </html> Las etiquetas H deben guardar su jerarquía, lo que significa que primero se declara el título con la etiqueta <h1>, y después se utiliza el <h2> para el subtítulo, etc. Sin embargo, al contrario de versiones más antiguas de HTML, HTML5 nos permite reutilizar las etiquetas H y construir esta jerarquía las veces que se quiera en cada sección del documento. El elemento <hgroup> es necesario cuando tenemos un título y subtítulo o más de una etiqueta H junta en el mismo <header>. Este elemento sólo puede contener etiquetas H. Si solamente tenemos una etiqueta <h1>, no hace falta agruparlo. Por ejemplo en el <header> del cuerpo no hemos utilizado este elemento ya que sólo tenemos un elemento H en el interior. Hay que recordar que el elemento <hgroup> está hecho para agrupar etiquetas H, tal y como indica su nombre.
  42. 42. Los navegadores y programas que ejecutan y renderizan páginas web, leen el código HTML y crean su propia estructura interna para interpretar y procesar cada elemento. Esta estructura interna se divide en secciones que no tienen relación con las divisiones en el diseño o en el elemento <section>. Estas son secciones conceptuales generadas durante la interpretación del código. El elemento <header> no crea solamente una de estas secciones conceptuales; esto significa que los elementos dentro del <header> representarán diferentes niveles y pueden generar internamente diferentes secciones. El elemento <hgroup> se creó con el propósito de agrupar las etiquetas H y así evitar que el navegador hiciera malas interpretaciones. Contenido del cuerpo. Párrafos en HTML. Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio, pero es innegable que esta forma de actuar es necesaria y concuerda con el carácter descriptivo de HTML. La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc. <h1>El conductor del coche le pregunto si se encontraba mal</h1> <h1> El conductor del coche le preguntó si se encontraba mal </h1> <h1> El conductor del coche le pregunto si se encontraba mal </h1> En estos ejemplos podemos observar diversos saltos de línea y separaciones en el texto, sin embargo el navegador mostrará un solo espacio entre las palabras y producirá saltos de línea donde sea necesario en función del tamaño de la ventana. Conocida esta característica es momento de adentrarse en las distintas etiquetas que permiten tener un mayor control sobre el texto de nuestras páginas. Saltos de línea. En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br /> . Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo:
  43. 43. Estaba internándose en lo desconocido. <br /> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo… En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br /> . Cómo se insertan párrafos. Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta p , situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin </p> tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo: <p>Estaba internándose en lo desconocido.</p> <p>Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con temor de estar cometiendo...</p> Otra opción hubiera sido crear un único párrafo e insertar un salto de línea tras la primera frase: <p> Estaba internándose en lo desconocido. <br /> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... </p> Uso incorrecto de la etiqueta p. La etiqueta p es usada en muchas páginas de forma incorrecta. El error consiste en emplearla simple- mente para introducir un espacio (vertical) entre líneas. La forma adecuada es introducir las instrucciones de inicio y fin para marcar el comienzo y el fin de un párrafo. Espacio entre líneas. Para introducir un espacio vertical entre líneas debe usarse la etiqueta <br> . Si se ponen varias seguidas no se mostrará más espacio, pero esto puede solucionarse insertando entre las etiquetas la cadena " ". Por ejemplo para insertar tres líneas en blanco puede usarse: <br> &nbsp;
  44. 44. <br> &nbsp; <br> &nbsp; Líneas horizontales para separar párrafos. Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del Inglés Horizontal Rule (línea horizontal.) Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal. NOTA: No abusar de las líneas horizontales. Es conveniente no usar mucho las líneas horizontales, limitándolas al comienzo y fin de la página. La razón de esto es que las líneas en medio de la página dificultan la lectura de esta. Si se desea separar secciones un espacio vertical del tamaño adecuado es más efectivo. La etiqueta <blockquote> ... </blockquote> Otra etiqueta relacionada con el formato de párrafos en HTML es <blockquote> , que consta de una instrucción de inicio y una de fin y que indica que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador mostrará el texto en un nuevo párrafo con márgenes a la izquierda y a la derecha. Mi poema favorito es aquel de Federico García Lorca que dice: <blockquote> Mi corazón, como una sierpe <br /> se ha desprendido de su piel, <br /> y aquí la miro entre mis dedos <br /> llena de heridas y de miel <br /> </blockquote> Enlaces. Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos: 1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site.) Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra.
  45. 45. Un ejemplo de un enlace interno es: /hobbies/index.html 2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo: http://www.otroservidor.com/hobbies/index.html Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero. La etiqueta <a> ... </a> Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ’href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto el enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es: <a href="dirección_URL"> Texto que será sensible (hipertexto) </a> Los navegadores gráficos resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como LynxTM resaltan los enlaces hipertexto cambiando el color del texto y de su fondo. El enlace podría ser algo así: También puedes conocer mis <a href="hobbies.html"> hobbies </a> NOTA: Si no funciona un link conviene comprobar la sintaxis del código HTML. Un error común es no cerrar las comillas que tras poner la dirección de la página enlazada. Si se comete este error, además de no funcionar el enlace, es posible que desaparezcan otros elementos de la página al visualizarla. Páginas en otros directorios Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario indicar el directorio (o ruta de directorios, path) donde está. Si en el ejemplo anterior la página hobbies.html estuviese en el directorio varios, el ejemplo anterior debería sustituirse por:
  46. 46. También puedes conocer mis <a href="varios/hobbies.html">hobbies</a> Como vemos, para separar el nombre del directorio del nombre del archivo se usa el símbolo "/". También se usaría, si fuese necesario, para separar varios directorios. Enlaces externos. La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsación por información que se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los enlaces externos. NOTA: Algunos diseñadores web recomiendan que no se creen enlaces externos desde la página principal o home page de nuestro sitio web para no incitar al visitante a que se vaya de la página. La creación de uno de estos enlaces es muy similar a la creación de los enlaces locales. El único cambio radica en que el valor dado al atributo ’href’ es la dirección completa de Internet, sea otra página web, una imagen o cualquier otro archivo. Por ejemplo, para incluir un enlace desde cualquier página a la de DMOZ (Open Directory Project) puede emplearse: Enlace a <a href="http://www.dmoz.org"> Directorio DMOZ </a> Así de fácil. Para referirse a un archivo específico del servidor de DMOZTM hay que especificar la ruta de directorios y el nombre del archivo. Un ejemplo de uso podría consistir en construir un enlace a la sección sobre Internet de este buscador. Para ello hay que incluir el siguiente link: <a href="http://www.dmoz.org/Computers/Internet/">Sección de Internet de DMOZ </a> Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios, pero no el nombre del archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los servidores web tienen un archivo por defecto de manera que si no se introduce el nombre ninguno ese archivo será el mostrado. En la mayoría de servidores el nombre elegido es index.html por lo que la dirección usada antes sería equivalente a: http://www.yahoo.com/computers/internet/index.html NOTA: Si un sitio web consta de varias páginas es usual incluir todos los enlaces externos en una página especial dedicada a ellos. Anclas. Después de realizar nuestra primera práctica continuamos los enlaces hipertexto con unos elementos muy relacionados con ellos: las anclas, que nos permitirán crear enlaces especificando a que lugar concreto de una página queremos saltar.
  47. 47. Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a esa ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora. Dicho de otra forma, usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee. Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo, no debe confundirse el lector porque, aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos, las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo. A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo: <a name="nombreAncla">Comienzo</a> Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma que el texto de alrededor. Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su lugar se usa otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella. Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S. En este caso se detallan todas las secciones del web ordenadas alfabéticamente. Al principio de la página hay un listado con todas las letras del abecedario de manera que al pulsar sobre una letra vas al lugar de la página donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto? Es muy sencillo, el proceso consta de dos pasos: 1. Primero hay que insertar el ancla en el lugar de la página donde se quiere poder saltar. Tomando como ejemplo una una página web que contiene un diccionario se emplearía el siguiente código: <a name="S"></a> Salud Santa Claus Seguridad 2. En segundo lugar se crea un enlace al principio de la página un que apunte al ancla. En este ejemplo el código usado es: <a href="#S"> S</a>
  48. 48. En este ejemplo al pulsar sobre la letra S se salta directamente al lugar de la página donde se encuentra la palabra salud, que es la primera de las que comienzan con “S”, que es el efecto deseado. Para especificar que el enlace apunta a un ancla se ha incluido un signo # seguido del nombre del ancla. Elemento Figure. La etiqueta <figure> ha sido creada para ayudarnos a ser más específicos en la declaración del contenido del documento. Antes que se introdujera este elemento, no podíamos identificar el contenido que era parte de la información pero independiente a la vez como por ejemplo las imágenes, ilustraciones, videos, etc. Normalmente estos elementos son parte del contenido principal pero se pueden mover sin perjudicar al flujo del documento. Cuando existe este tipo de información, hay que utilizar las etiquetas <figure> para identificarlas. <figure> <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="description" content="Ejemplo de HTML5"> <meta name="keywords" content="HTML5"> <title>Bienvenidos</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Lenguajes para la web</h1> </header> <nav> <ul> <li>Lenguaje HTML</li> <li>Lenguaje CSS</li> <li>Lenguaje JavaScript</li> <li>Lenguaje XML</li> <li>Lenguaje PHP</li> </ul> </nav> <section> <article> <header> <hgroup> <h1>VIDEO TUTORIALES HTML </h1> <h2>Primer programa, con Visual Studio Code en Español. Como maquetar con HTML </h2>
  49. 49. </hgroup> </header> <figure> <iframe src="http://www.youtube.com/embed/RUTadelVideo"></ iframe> <figcaption> Este es el video del primer tutorial de HTML para principiantes. </figcaption> </figure> <footer> <p>comments (0)</p> </footer> </article> </section> <aside > English Version </aside> <footer> Copyright &copy; 2005-2018 </footer> </body> </html> En el ejemplo, se insertó un video (<iframe src="http://www.youtube.com/embed/RUTadelVideo"></iframe>), después del texto. Esto se hace frecuentemente; comúnmente el texto se enriquece con imágenes o videos. Las etiquetas <figure> permite encapsular estos complementos visuales y diferenciarlos así del resto del contenido. En el código que vemos en el ejemplo, podemos ver un elemento extra dentro de <figure>. Comúnmente las unidades de información como imágenes o videos se describen con un texto corto debajo. HTML5 nos provee con un elemento para colocar e identificar esta leyenda. Las etiquetas <figcaption> encapsulan la leyenda relacionada a la <figure> y establece una relación entre los dos elementos y el contenido. Audio Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlight o Java.
  50. 50. El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au) Un ejemplo de disponer el elemento audio dentro de una página sería: <audio src="sonido.ogg" autoplay controls loop></audio> Las propiedades que podemos utilizar con la marca audio son:  src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca en el mismo directorio donde se almacena la página.  autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de cargarse la página sin requerir la intervención del visitante.  loop: El archivo de audio se ejecuta una y otra vez.  controls: Indica que se deben mostrar la interface visual del control en la página (este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)  autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el cliente antes de comenzar a ejecutarse. Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento audio nos permite agregarle distintas fuentes: <audio controls autoplay loop> <source src="sonido.ogg"> <source src="sonido.mp3"> <source src="sonido.wav"> <source src="sonido.au"> </audio> El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo. El orden que disponemos estas fuentes es importante. Primero el navegador busca la primera fuente y verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente. Una página que muestra el control de audio: <!DOCTYPE HTML> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> <audio controls> <source src="http://www.misitioweb.com/mis-audios/gallo.ogg"> <source src="http://www.misitioweb.com/mis-audios/gallo.mp3"> <source src="http://www.misitioweb.com/mis-audios/gallo.wav"> </audio> </body>
  51. 51. </html> Según el navegador el control de reproducción de audio puede variar. En el caso que solo necesitemos reproducir un único formato de archivo podemos evitar los elementos HTML "source" y disponer la propiedad src directamente en la etiqueta "audio": <audio controls src="http://www.misitioweb.com/mis-audios/gallo.mp3"> </audio> Video. El elemento VIDEO permite mostrar un video sin la necesidad de plugin (Flash). En este momento los navegadores permiten mostrar formatos como mp4, webm y ogv. FireFox permite mostrar videos en formato ogv (formato de vídeo de código abierto Ogg/Theora.) Luego para visualizar un video con este formato en FireFox tenemos: <video width="640" height="360" src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv" controls> Este navegador no permite tag video </video> Las propiedades más importantes de la marca video son:  src: Dirección donde se almacena el video.  controls: Se visualiza el panel de control del video: botón de inicio, barra de avance del video etc.  autoplay: El video se inicia inmediatamente luego que la página se carga en el navegador.  width: Ancho en píxeles del video.  height: Alto en píxeles del video. Como no hay un formato de video universalmente adoptado por todos los navegadores el elemento video nos permite agregarle distintas fuentes: <video width="640" height="360" controls> <source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"> <source src="http://videos.mozilla.org/firefox/3.5/overview/overview.mp4"> </video> Esto es similar al elemento AUDIO visto anteriormente. La siguiente página muestra un video llamado "video1.mp4": <!DOCTYPE HTML>
  52. 52. <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> <video width="640" height="360" controls src="http://www.misitioweb.com/mis-videos/video1.mp4"> </video> </body> </html> Nuevamente según el navegador nos muestra una interfaz visual distinta, pero nos permite reproducir el video. Las etiquetas más utilizadas Hay un conjunto de etiquetas que se utilizan a menudo:  Enlaces a páginas web locales o externas.<a href="https://www.google.com" >Enlace</a>  Imágenes web. <img src="/images/tutoriales/raspberry/truco2.png" />  Líneas horizontales. <hr>  Salto de línea. <br>  Citar un texto. <blockquote>  División o bloque.<div>Bloque de contenido</div>  Listas no numerada de items. <ul><li>Item 1</li><li>Item 2</li></ul>  Listas numerada de items. <ol><li>Item 1</li><li>Item 2</li></ol>  Texto en negrita. <strong>texto</strong> Elementos eliminados Los siguientes elementos de HTML 4.01 han sido eliminados de HTML5:  <acronym>  <applet>  <basefont>  <big>  <center>  <dir>  <font>  <frame>  <frameset>  <noframes>  <strike>  <tt>
  53. 53. Etiqueta <table> Esta etiqueta permite definir tablas; es decir una cuadricula de casillas o celdas, divididas en filas y columnas. Para crear las tablas se usan las siguientes etiquetas internas: Etiqueta Descripción <table> Definición de una tabla. <th> Definición de cabecera de tabla. <tr> Define una fila en la tabla. <td> Define una celda en la tabla. <caption> Define el nombre o título de la tabla. <colgroup> Especifica un grupo de una o más columnas para aplicar formato. <col> Especifica las propiedades de una columna de las columnas definidas en un elemento colgroup. <thead> Define la cabecera de la tabla. <tbody> Define el cuerpo de la tabla. <tfoot> Define el pie de la tabla

×