Download Introducción al HTML
Document related concepts
Transcript
Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña INTRODUCCIÓN A HTML H TML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario, siendo hoy en día la interfaz más extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto. Versiones del HTML Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere decir que es un lenguaje de hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, el programa de ayuda en Windows “Help Center”), una seria de páginas con instrucciones del sistema y lo que tienen en común es que todos poseen enlaces a otros temas más específicos. Versión Características 2 Cuando se produjo la explosión de Internet, el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos será capaz de interpretarlo hoy día. Prácticamente todo lo que veamos en los próximos capítulos está contemplado por este estándar. 3 y 3.2 Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de herramientas para tener un control en las páginas. No se consideró necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno más bien a la actividad académica y el contenido se basaba sobre el diseño. Debido a ello, Netscape (líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar. Por estos problemas, el IETF, (el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resultó ser demasiado grande para la época, lo que atrasó su aceptación en el mercado. Esto llevó a una serie de compañías (entre Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 1 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña ellas Netscape, Microsoft, IBM, Sun, etc.) a crear un nuevo comité llamado W3C y 508, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, que incluía muchas de las mejoras que los principales navegadores (Netscape y Explorer) habían introducido en Internet, como son las tablas, los applets, etc. Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso a trabajar en la elaboración del siguiente estándar: el 4.0. 4 En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado. HTML 5 incluye novedades significativas en diversos ámbitos. 5 Estructura del cuerpo: Permite agrupar todas estas partes de una web en nuevas etiquetas que representarán cada uno de las partes típicas de una página. Etiquetas para contenido específico: Hasta ahora se utilizaba una única etiqueta para incorporar diversos tipos de contenido enriquecido, como animaciones Flash o vídeo. Ahora se utilizarán etiquetas específicas para cada tipo de contenido en particular, como audio, vídeo, etc. Bases de datos locales: el navegador permitirá el uso de una base de datos local, con la que se podrá trabajar en una página web por medio del cliente y a través de un API. Web Workers: son procesos que requieren bastante tiempo de procesamiento por parte del navegador, pero que se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar la página. Aplicaciones web Offline: Existirá otro API para el trabajo con aplicaciones web, que se podrán desarrollar de modo que funcionen también en local y sin estar conectados a Internet. Geolocalización: Las páginas web se podrán localizar geográficamente por medio de un API que permita la Geolocalización. Nuevas APIs para interfaz de usuario: temas tan utilizados como el "drag & drop" (arrastrar y soltar) en las interfaces de usuario de los programas convencionales, serán incorporadas al HTML 5 por medio de un API. Fin de las etiquetas de presentación: todas las etiquetas que tienen que ver con la presentación del documento, es decir, que modifican estilos de la página, serán eliminadas. La responsabilidad de definir el aspecto de una web correrá a cargo únicamente de CSS. Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 2 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña Mi primera página El código Nuestra primera página se guardará con el nombre index.html <HTML> <HEAD> <TITLE>MI primer página</TITLE> </HEAD> <BODY> <CENTER><H1>Mi Primera página</H1></CENTER> <HR> <P>Esta es mi primera página. Por el Momento no sé qué tendrá, pero dentro de poco Pondré aquí muchas cosas interesantes. </P> </BODY> </HTML> El cuerpo del documento En esta área vamos a indicar el contenido de nuestra página de internet. Lo Primero será indicar que estamos en el cuerpo del documento: <BODY>... </BODY> <HR> La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varían los atributos de un texto, sino que insertan un elemento. Formato básico Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear ciertos caracteres dentro del párrafo. Formato del párrafo Estas son las etiquetas más importantes (excluyendo algunas que se verán más adelante) Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 3 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña Se muestra a continuación el listado completo de las etiquetas HTML, se citan como obsoletas aquellas no son soportadas por el estándar W3C, es recomendable al programar una página WEB trabajar con dicho estándar, el cual proporciona el lenguaje de etiquetas XHTML estricto. Para referenciar lo antes dicho se indica en la siguiente lista la correcta utilización de cada etiqueta mediante los siguientes acrónimos: • DTD: Document Type Definition. • S: Strict, Para HTML estricto. • T: Transitional, para HTML transicional. • F: Frameset, para HTML con marcos. Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 4 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 5 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña Listas Existen varios tipos de listas en HTML. Todas ellas se pueden mezclar unas dentro de otras. Listas desordenadas La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Por ejemplo: <UL> <LI>Primer elemento <LI>Segundo elemento </UL> La etiqueta <UL> admite estos parámetros: Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 6 Escuela de Enseñanza Secundaria Técnica N° 3 Prof.: Carlos Acuña Listas ordenadas por números La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. Por ejemplo: <OL> <LI>Primer elemento </LI> <LI>Segundo elemento </LI> </OL> La etiqueta <OL> admite estos parámetros: Laboratorio de Aplicaciones, Introducción a la maquetación en HTML 7