Tutorial rápido de HTML / XHTML

Zootropo — Fri, 26 Feb 2010 10:12:18 +0000

Este es un pequeño tutorial de HTML (y XHTML) en el que intentaré explicar lo más importante del lenguaje de forma concisa.

HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto).

La última versión de HTML es HTML 4.01, de Diciembre de 1999, aunque ya existe un borrador de HTML 5, y algunos de los navegadores más populares están empezando a implementar poco a poco parte de este nuevo estándar.

Como su nombre indica, HTML es un lenguaje de marcas, no un lenguaje de programación, es decir, no existe el concepto de variables, condicionales o bucles. Su objetivo no es otro que la creación de documentos, utilizando etiquetas para especificar la estructura y la semántica del contenido (pero NO el aspecto; para esto utilizaremos CSS).

Las etiquetas son palabras o caracteres rodeados por corchetes angulares (el signo menor que, ‘<’, y mayor que, ‘>’). Un ejemplo de etiqueta sería que se utiliza para marcar un texto como enfatizado. Por defecto los navegadores mostrarían este texto enfatizado en cursiva, a menos que indiquemos otra cosa utilizando CSS. El texto que queremos marcar irá entre la etiqueta de inicio y la etiqueta de cierre .

Hola mundo

Por cada etiqueta de inicio, existe una etiqueta de cierre correspondiente, con una barra oblicua después del signo menor que.

Una etiqueta puede contener, además de texto simple, otras etiquetas. En ese caso hay que tener cuidado con cerrar primero la etiqueta que se abrió en último lugar. En este ejemplo se utiliza la etiqueta
, que marca el texto etiquetado como un párrafo, y por lo tanto añade un margen antes y después del texto, combinada con la etiqueta

Hola mundo

Además las etiquetas pueden tener atributos con los que especificar distintos aspectos relevantes para su funcionamiento. Para crear un enlace, por ejemplo, se utiliza la etiqueta , de anchor, ancla, y su atributo href. El valor del atributo va después del signo igual (=).

Visita Mundo geek

Para que un documento HTML o XHTML sea válido las etiquetas deben seguir un orden y unas reglas determinadas, dependiendo del tipo del documento. Dentro del estándar HTML 4.01 tenemos 3 tipos de documentos: strict, transitional y frameset.

Frameset incluye todas las etiquetas y atributos del estándar, incluidas las que han sido marcadas como obsoletas, y la etiqueta frameset, para crear frames. Para indicar que un documento debe renderizarse teniendo en cuenta las reglas definidas por este tipo, la primera línea del documento deberá ser:

Transitional incluye todas las etiquetas del anterior, a excepción de la etiqueta frameset. Para utilizar este tipo la primera línea de nuestro archivo HTML deberá consistir en lo siguiente:

Strict es, como su nombre indica, el tipo más estricto: no acepta la etiqueta frameset, ni las etiquetas y atributos que han sido marcados como obsoletos. Si vamos a utilizar este tipo la primera línea del documento será:

El tipo de documento puede tener enormes consecuencias en cómo se visualizará la página. Si no indicamos ningún tipo, o indicamos un tipo muy antiguo, el navegador entraría en lo que se conoce como quirks mode (literalmente, modo rarezas), un modo de renderizado pensado para mantener la compatibilidad con las prácticas y los navegadores antiguos. Los doctypes HTML 4.01 transitional y frameset lanzarían el modo de renderizado “casi-estándar” en la mayoría de los navegadores.

Después de la línea de doctype tendremos una etiqueta , utilizada para marcar el principio y fin del documento. Esta contendrá a su vez una etiqueta (la cabeza del documento) y una etiqueta (el cuerpo del documento). Dentro de la etiqueta podemos hacer cosas como indicar la codificación de caracteres mediante la etiqueta (“simulando” una cabecera HTTP), o el título de la página con la etiqueta </code>, título que se mostrará en la parte superior de la ventana del navegador. Dentro de la etiqueta <code><body></code> tendremos el contenido que se mostrará en el navegador.</p> <p>De esta forma el documento HTML válido más sencillo que podemos encontrar tendría el siguiente aspecto:</p> <pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Ejemplo
Hola Mundo
Para probar este documento HTML basta abrir un editor de texto cualquiera, pegar el código, guardar el archivo con extensión .htm o .html, y abrir el fichero resultante en un navegador web. Para que otras personas pudieran ver este archivo, tendríamos que enviárselo de alguna manera, o subirlo a un servidor. Mundo geek, por ejemplo, está alojado en los servidores de RedCoruna (aunque Mundo geek está escrito en un lenguaje de programación llamado PHP, que permite generar HTML de forma dinámica). Etiquetas HTML de uso común Podemos añadir comentarios, entre Hola Mundo Para asociar una o más hojas de estilo CSS (para definir el aspecto de la página) y un favicon (el icono que se muestra en la barra de direcciones y la pestaña) al documento actual, aunque también tiene otros usos, se utiliza la etiqueta , etiqueta que sólo puede insertarse dentro de . Con el atributo rel se indica el tipo de relación que tiene el documento enlazado con el actual, y con href la dirección en la que se encuentra el documento (que puede ser relativa o absoluta). También se puede utilizar el atributo media para usar un recurso u otro dependiendo del medio que utilice el usuario. En el siguiente código, por ejemplo, utilizamos una hoja de estilo u otra dependiendo de si el usuario está viendo la página en una pantalla de ordenador (screen) o de si está viendo la vista previa antes de la impresión (print) También podemos ofrecer al usuario varias hojas de estilo alternativas, teniendo una etiqueta con rel="stylesheet" y otras con rel="alternate stylesheet". En las etiquetas de cada una de las hojas de estilo alternativas añadiremos un atributo title con el nombre tal y como queramos que aparezca en el navegador del usuario. Para incluir un script (en JavaScript u otro lenguaje) se utiliza, cómo no, la etiqueta Lo normal es escribir el código del script en un archivo externo e importarlo mediante el atributo src Para definir metadatos acerca del documento se utiliza la etiqueta , etiqueta que ya utilizamos anteriormente para especificar la codificación de caracteres que utilizaba nuestro archivo. Algunos usos que se le pueden dar a esta etiqueta son especificar una descripción del contenido de la página: o palabras clave que describan la página: Para dividir la página en secciones se utiliza la etiqueta . Esta etiqueta es la base de la maquetación utilizando CSS, aunque el siguiente ejemplo, al no utilizar ningún estilo, no resultará demasiado impresionante: Inicio Contacto Hola mundo Las cabeceras o títulos se indican con las etiquetas , , , , y . Estas etiquetas son especialmente útiles para el SEO (Search Engine Optimization, u optimización para buscadores) Título Subtítulo Sub-subtítulo Para insertar saltos de línea se utiliza (como vemos existen etiquetas en HTML que no necesitan ser cerradas; no así en XHTML, del que hablaremos más tarde) Primera línea Segunda línea Cuarta línea Para marcar un bloque de texto como una cita se utiliza . Esto hará, por defecto, que el bloque de texto tenga un cierto margen izquierdo. Y entonces él dijo: Le haré una oferta que no podrá rechazar Para marcar un texto como una cita inline se utiliza la etiqueta . Por defecto esto hará, simplemente, que el texto aparezca entrecomillado. Y entonces él dijo... ¡Vamos a aprender HTML! Para marcar un texto como código fuente se utiliza . Por defecto esto mostrará el texto con una fuente monoespacio. foreach($mensajes as $mensaje) echo $mensaje; se suele utilizar en conjunción con , que hace que se tengan en cuenta los espacios en blanco, tabuladores y retornos de carro del texto que encierra foreach($mensajes as $mensaje) echo $mensaje; Para dar el significado de una abreviatura: HTML Para indicar que una palabra o frase es especialmente importante (más que el texto marcado con ) se utiliza la etiqueta . Esto se traducirá, por defecto, en que el texto etiquetado se verá en negrita. HTML es un lenguaje de marcado Para mostrar una imagen se utiliza . Es conveniente dar una descripción alternativa a la imagen para los invidentes y los navegadores que no muestren imágenes utilizando el atributo alt Para crear listas se utiliza la etiqueta (de unordered list, o lista no ordenada). Cada elemento irá dentro de una etiqueta Lunes Martes Miércoles También se pueden crear listas ordenadas con , lo que hará que cada entrada de la lista venga precedida por un número (o una letra, un número romano… si así se especifica en la hoja de estilo) en lugar de una viñeta, como ocurriría con : Lunes Martes Miércoles Para crear tablas se utiliza la etiqueta . Dentro de esta tendremos una etiqueta (de table row) por cada fila, y a su vez, dentro de , una o más etiquetas , para celdas de datos, o , para celdas de la cabecera. Lenguaje Año HTML 1991 CSS 1996 XHTML 2000 Entidades de caracteres HTML Para evitar problemas con la codificación de caracteres podemos utilizar las llamadas entidades de carácter en sustitución de los caracteres que no pertenezcan a ASCII, como vocales acentuadas o la ñ. Entidad Carácter & & < < > > Á Á É É Í Í Ó Ó Ú Ú á á é é í í ó ó ú ú ñ ñ € € XHTML XHTML son las siglas de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). Se trata de una versión algo más estricta de HTML basada en XML. La última versión de este estándar es la 1.1, de Mayo de 2001. Para que un documento XHTML sea válido: Todas las etiquetas deben estar cerradas. Para elementos vacíos, como se puede cerrar la etiqueta añadiendo una barra invertida antes del signo de mayor que ( ) Todas las etiquetas y atributos deben ir en minúsculas Los valores de los atributos deben ir entre comillas El doctype para XHTML 1.1 será: Además la etiqueta debe tener un atributo xmlns indicando el espacio de nombres. Un ejemplo de documento XHTML válido sería, entonces: Ejemplo Hola Mundo Nuevo Firefox 3.6: ¿el mejor navegador del mercado? Zootropo — Thu, 21 Jan 2010 18:42:40 +0000 Ayuda -> Buscar actualizaciones, señores. ¿Novedades? Unas cuantas. Y MUY interesantes: Personas: una característica de la que ya podíamos disfrutar anteriormente en forma de extensión y que permite personalizar aún más el aspecto del navegador. Herramienta para el autocompletado de formularios Mayor soporte de HTML 5 y CSS 3 lo que a efectos prácticos nos trae, entre otras cosas, vídeo nativo en pantalla completa o gradientes con CSS Mejoras de rendimiento. Un 20% más rápido que Firefox 3.5. Herramienta de actualización de plugins Mejoras en el rendimiento de JavaScript Mejoras en la estabilidad Mejoras en el tiempo de arranque Y tú, ¿piensas usar Firefox 3.6 como navegador principal? ¿o crees que existen alternativas mejores? CHM en Linux Zootropo — Mon, 27 Aug 2007 11:00:52 +0000 Los ficheros con extensión chm son un formato de archivo creado por Microsoft para sus archivos de ayuda. En realidad se trata de un archivo que encapsula un conjunto de páginas HTML y añade la posibilidad de usar un índice. No en vano sus siglas provienen de Compiled HTML Help. Para poder ver archivos chm en Linux tenemos dos alternativas, extraer las páginas HTML que componen el archivo o bien utilizar una aplicación capaz de leer CHM. Para la primera opción podemos acudir al comando extract de la librería CHM. Para instalarlo: sudo aptitude install libchm-bin Para extraer extract_chmLib mi_archivo_chm.chm directorio dónde, como podéis haber adivinado, el primer argumento es el archivo chm que queremos extraer y el segundo el directorio en el que guardar los archivos extraídos. Dentro de la segunda categoría contamos con varias alternativas, como puede ser xchm, gnochm para Gnome o kchmviewer para KDE (todos en los repositorios de Ubuntu). JavaScript: Incluyendo el código JavaScript en documentos HTML Zootropo — Fri, 23 Jul 2004 20:00:40 +0000 El código JavaScript puede ejecutarse en el PC del cliente o en el servidor. Hay dos formas de incluir un código JavaScript en una página web de forma que el código se ejecute en el PC del cliente a través de su navegador: embebido dentro de la propia página web o en un archivo .js que importaremos. Usando la primera forma tendríamos un código parecido a este dentro de nuestro documento HTML: Como vemos el código JavaScript se incluye dentro de una etiqueta script de HTML, con atributos language, que define que lenguaje de script que estamos utilizando (y también la versión si queremos, aunque no es aconsejable ya que puede dar problemas) y type, que define el tipo MIME. language y type tienen la misma función: identificar qué tipo de script vamos a escribir, de forma que no es necesario escribir ambas. En principio si sólo queremos escribir uno de ellos es recomendable utilizar type, ya que es el estándar según la W3C, aunque no está de mas escribir ambas por los navegadores antiguos. Es aconsejable que el código JavaScript se incluya dentro de un comentario HTML (entre ) de forma que los navegadores antiguos que no reconocen la etiqueta script no impriman el código JavaScript como texto de la página web. Además tenemos que añadir //, que se utiliza como un comentario de una sola línea en JavaScript (para comentarios de varias líneas se utiliza /* mi comentario */ como en Java o C++) antes del –> ya que JavaScript reconoce . Finalmente cerramos la etiqueta con . La otra forma de incluir el código JavaScript, como comentamos, es importar el archivo js. Esto tiene como ventajas la claridad al separar el código HTML y el código JavaScript, además de mejora la rapidez de carga de la página, ya que el navegador normalmente añadirá el archivo js a la caché. Para incluir el código de esta forma utilizamos el atributo src (de source, fuente) de la etiqueta script, con el que indicamos la url del archivo javascript: Una última cosa a comentar al respecto es el uso de la etiqueta

Mundo Geek » html

Grafikart: un tema oscuro para NetBeans

Tutorial rápido de HTML / XHTML

Etiquetas HTML de uso común

Título

Subtítulo

Sub-subtítulo

Entidades de caracteres HTML

XHTML

Nuevo Firefox 3.6: ¿el mejor navegador del mercado?

CHM en Linux

JavaScript: Incluyendo el código JavaScript en documentos HTML