Resumen del Capítulo 1: Introducción
1.1. ¿Qué es HTML?
HyperText Markup Language (
HTML), Lenguaje de Marcado de Hipertexto, es lo que se utiliza para crear todas las páginas web de Internet.
1.2. Breve historia de HTML
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force).
En 1995 se consigue publicar HTML 2.0 es el primer estándar oficial de HTML. A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997.
HTML 4.0 se publicó el 24 de Abril de 1998.La novedad más destacada se encuentra las hojas de estilos CSS.
La publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML.
La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000.
1.3. Especificación oficial
El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML.
1.4. HTML y XHTML
XHTML no es más que una adaptación de HTML al lenguaje XML. Las páginas y documentos creados con XHTML son muy similares a las páginas y documentos HTML.
1.5. HTML y CSS
Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.
Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML.
Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.
Resumen de Capítulo 2: Características básicas
2.1. Lenguajes de etiquetas
Como los primeros archivos sólo contenían texto sin formato, la solución utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en números.
El proceso de transformación de caracteres en secuencias de números se denomina codificación de caracteres y cada una de las tablas que se han definido para realizar la transformación se conocen con el nombre de páginas de código. Es la codificación ASCII.
La solución que realmente se emplea para guardar la información con formato es mucho más sencilla:
<parrafo>Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial.</parrafo>
El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar más importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>.
2.2. El primer documento HTML
Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
<html>
<head><title>El primer documento HTML</title></head>
<body>
<p>El lenguaje HTML es tan sencillo que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
<html>: indica el comienzo y el final de un documento HTML.
<head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página.
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas)
2.3. Etiquetas y atributos
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página.
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Añadiendo información adicional mediante un atributo llamado href. Los atributos se incluyen dentro de la etiqueta de apertura. No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles.
- Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML.
- Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas.
- Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript.
- Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.
2.4. Elementos HTML
Un elemento HTML es mucho más que una etiqueta, ya que está formado por:
- Una etiqueta de apertura.
- Cero o más atributos.
- Texto encerrado por la etiqueta.
- Una etiqueta de cierre.
Si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre).
Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.
2.5. Sintaxis de las etiquetas XHTML
La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final son páginas con un código HTML desordenado, difícil de mantener y muy poco profesional. Afortunadamente, XHTML soluciona estos problemas añadiendo ciertas normas en la forma de escribir las etiquetas y atributos.
Las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas
3) El valor de los atributos siempre se encierra con comillas
4) Los atributos no se pueden comprimir
5) Todas las etiquetas deben cerrarse siempre
Resumen del Capítulo 3: Texto
El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicación de contenidos. De esta forma, HTML define etiquetas para estructurar el contenido en secciones y párrafos y define otras etiquetas para marcar elementos importantes dentro del texto.
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada párrafo y títulos de sección para delimitar cada una de las secciones que forman el texto.
3.1. Estructurar
La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.
3.1.1. Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>
3.1.2. Secciones
Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página.
El siguiente ejemplo muestra el uso de las etiquetas de título de sección:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>
</body>
</html>
3.2. Marcado básico de texto
Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc.
La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página.
Ejemplo:
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
más importantes</strong>.</p>
</body>
</html>
Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web.
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo
es una dirección URL que indica el documento original de la cita."</blockquote>
3.3. Marcado avanzado de texto
La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar las siglas o acrónimos del texto.
<p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado
por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
3.4. Marcado genérico de texto
La etiqueta <span> que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas.
La etiqueta <span> se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto es habitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su aspecto con CSS.
3.5. Espacios en blanco y nuevas líneas
HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).
La etiqueta <br> indica nueva línea. Se utiliza de la siguiente manera <br></br> o <br/>
Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el símbolo & al principio y el símbolo ; al final).
La etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas.
La etiqueta <code>, que se utiliza para mostrar código fuente de cualquier lenguaje de programación.
Resumen del Capítulo 4: Enlaces
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".
4.1. URL
El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
- Identificar de forma única a ese recurso
- Permitir localizar de forma eficiente ese recurso
El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes.
Si por ejemplo se considera la siguiente URL: http://www.librosweb.es/xhtml/capitulo4.html
Las partes que componen la URL anterior son:
- Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).
- Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.
- Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.
Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.
4.3. Enlaces básicos
Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla").
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.
El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.
4.4. Enlaces avanzados
Atributos propios:
- name = "texto" - Permite nombrar al enlace para que se pueda acceder desde otros enlaces
- href = "url" - Indica la URL del recurso que se quiere enlazar
- hreflang = "codigo_idioma" - Idioma del recurso enlazado
- type = "tipo_de_contenido" - Permite "avisar" al navegador sobre el tipo de contenido que se enlazar (imágenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenido
- rel = "tipo_de_relacion" - Describe la relación del documento actual con el recurso enlazado
- rev = "tipo_de_relacion" - Describe la relación del recurso enlazado con el documento actual
- charset = "tipo_de_charset" - Describe la codificación del recurso enlazado
Idioma del enlace (hreflang)
El enlace puede indicar al navegador el idioma del recurso que se enlaza. Para establecer el valor del idioma, se utiliza un código estandarizado de dos letras. Además del idioma genérico, también se puede indicar una variación idiomática
El enlace puede indicar al navegador el idioma del recurso que se enlaza. Para establecer el valor del idioma, se utiliza un código estandarizado de dos letras. Además del idioma genérico, también se puede indicar una variación idiomática
- alternate – Indica que es una versión alternativa al documento actual (puede ser una versión en otro idioma o una versión preparada para otro medio, como una impresora o un dispositivo móvil)
- stylesheet – Indica que se ha enlazado una hoja de estilos
- start – Indica que se trata del primer documento de una colección de documentos (por ejemplo el primer capítulo de un libro)
- next – Indica que es el documento que sigue al actual dentro de una secuencia lógica de documentos (por ejemplo, los capítulos de un libro)
- prev - Indica que es el documento que precede al actual dentro de una secuencia lógica de documentos (por ejemplo, los capítulos de un libro)
- contents – Indica que el recurso enlazado es el documento que contiene la tabla de contenidos de la colección de documentos (por ejemplo, el índice de un libro).
- bookmark – Establece el enlace actual como un "marcador" o "favorito". Un marcador es un enlace que constituye un punto de entrada muy importante dentro del documento.
4.5. Otros tipos de enlaces
HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automáticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la página web.
La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.
El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.
Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:
La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.
El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.
Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:
No hay comentarios:
Publicar un comentario