Aprendiendo Código: mayo 2013

HTML Básico V: Los atributos de HTML

Tal y como vimos en la segunda parte de este tutorial, los atributos representan información adicional para las etiquetas HTML

Entre los atributos más utilizados destacan los siguientes:

Id

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente). Por norma general se emplea el atributo id para referirse a un elemento por medio de terceros lenguajes de programación.

Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.

Class

El atributo "class" asigna un nombre de clase (o varios nombres de clases separados por espacios) al elemento contenedor. Es usado junto con hojas de estilo CSS y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Como he comentado la utilización del atributo class esta intimamente ligada con la utilización de CSS y se recomiendo que se utilice unicamente paraeste fin. de esta forma podremos distingir entre la apariencia grafica de nuestro elemento utilizando clases y el contenido del mismo utilizando "id".

Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia
Este artículo pertenece al curso de HTML básico de Aprendiendo Código y se le aplican los estilos de la clase referencia y después los estilos de la clase importante

Style

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos puede resultar útil y el resultado es igual al obtenido por las hojas de estilo CSS, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modo, se mejora la separación de las partes semántica y el contenido de tu documento.

Este es un párrafo escrito en azul.
Este es un párrafo escrito en rojo.
Y este es otro texto no tiene estilo y aparecerá en color negro siempre que siga siendo el color por defecto de nuestro body.

Title

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al pasar el ratón por encima del contenido del elemento. también resulta de utilidad a los buscadores a la hora de indexar los contenidos de la web.

No es un atributo necesario para el desarrollo de una página web.

<a title="Aprendiendocodigo.blogspot.com" href="http://aprendiendocodigo.blogspot.com">Aprendiendo Código</a>

Lang

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos HTML, utilizamos el atributo lang para especificar el lenguaje de un elemento.

Este atributo es util para indexar tú web en motores de busqueda o para que los sintetizadores de audio puedan transcribir correctamente la web. Otra posibilidad que aporta este atributo es el de aplicar distintos CSS a cada idioma de nuestra web. o mostrar mensajes personalizados en función del idioma configurado en el navegador del visitante de nuestra web.

This is a paragraph in English.
Este es un párrafo en Español.

Dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

RTL: derecha a izquierda.
LTR: izquierda a derecha.

<q lang="he" dir="rtl">...una cita en Hebreo...</q>

Charset

Especifica la codificación de caracteres del documento.

<a charset="utf-8" href="http://aprendiendocodigo.blogspot.com">Código HTML</a>

Además de estos atributos, hay muchos otros generalmente relacionados con el estilo gráfico de nuestra web que han caido en deshuso en favor del lenguaje CSS que veremos más adelante.

HTML Básico IV: La etiqueta body

La etiqueta <body> define el cuerpo de un documento y todo aquello que incluyamos dentro de ella representa el contenido que el ususario de nuestra web puede ver cuando accede a nuestro sitio web.

Si copiamos el siguiente código y lo probamos en un navegador podremos comprobar como cualquier texto que intrduzcamos dentro de la etiqueta body se muestra en pantalla.

<html>
<head>
<title>Título del documento</title>
</head>

<body>
Todo el contenido del documento...
</body>

</html>

Dentro del cuerpo del documento se incluye todo el contenido del mismo como por ejemplo: textos, enlaces, imágenes, tablas, etc. pero será necesario utilizar la etiqueta correspondiente para que el navegador lpueda mostrar el contenido según nuestros deseos.

Si te interresa conocer más sobre las etiquetas HTML, te recomiendo ver el tutorial avanzado de HTML 5 que estoy desarrollando con el fin de conocer todas las etiquetas que podemos utilizar y su función.

Aunque es posible por medio de los atributos definir dentro de las etiquetas valores como el color del texto, el tamaño del contenedor, etc. Actualmente y por cuestiones organizativas se utilizan archivos CSS para ese trabajo. De esta forma cuando desarrollemos una web tendremos archivos HTML con el contenido de nuestra web y archivos CSS con la apariencia de nuestra web.

HMTL Básico III: la etiqueta HEAD

La etiqueta <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la etiqueta <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro navegador de páginas Web.

Ejemplo :

<TITLE>Aprendiendo código</TITLE>

En el ejemplo anterior se definia el titulo de la página como "Aprendiendo código", de esta forma al abrir nuestra página web en la pestaña superior de la misma podremos comprobar como aparece el textro "Aprendiendo código".

Dentro de la cabecera de nuestro documento también podemos incluir otras etiquetas adicionales. La etiqueta <META> se utiliza para transmitir información sobre la propia página web.

Ejemplos :

El ejemplo anterior por tanto, indica al navegador el nombre de la página y sus contenidos principales. Esta información no tiene interes para el usuario de nuestra página web pero sin embargo, resulta vital para los buscadores de contenido (Google, Bing, etc) ya que ayudan a definir el contenido de nuestra web y relacionarlo con las busquedas que hacemos por internet.

En este caso, se indica al navegador las palabras clave que definen nuestra web, y por tanto, se le especifica al buscador que cuando alguién realice una busqueda que incluya las palabras claves definidas en el contenido de keywords incluya nuestra página web entre los resultados.

Otro uso de la etiqueta <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el navegador el documento en uso transcurridos los segundos indicados. Esto es util para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra pagina Web a una nueva dirección donde se encuentra una versión actualizada de nuestra pagina Web.

Ejemplo :

El código anterior, redireccionará nuestro navegador transcurridos 15 segundos a la web de aprendiendo código desde la web en la que nos encontremos actualmente.

HTML Básico II: Estructura de un documento HMTL

Para definir un documento como una estructura HTML basta con declarar las siguientes etiquetas en un documento de texto y guardarlo con extensión .html

Para ello abriremos un nuveo documento de texto y copiaremos el código anterior, es importante señalar que no es necesario tabular las distintas etiquetas para que el navegador las reconozca aunque resulta una práctica muy útil para entender el código.

Una vez copiado el código bastará con guardar el documento en formato html, en caso de que vuestro editor de texto no os de la opción de guardar como documento html, bastará con guardarlo como texto plano (archivo .txt o similar) y despues renombrar la extensión cambiando el .txt por .html.

De esta forma, si volvemos a abrir el archivo con el bloc de notas, veremos que en principio nada a cambiado. la unica diferencia radica en que si abrimos el arrchivo con un navegador nos mostrará una página web en blanco ya que aún no hemos añadido el contenido..

Como habreis podido observar, cada uno de los elementos que forman la web esta formado por una etiqueta de inicio y otra de cierre.

Ejemplo: <HTML> y </HTML>

De esta forma, podemos entender el código anterior de la siguiente forma:

<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro navegador a traves de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el navegador Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo :

http://www.http://aprendiendocodigo.blogspot.com.es/2013/04/entrada-de-prueba.html

Donde ....

http:// indica el protocolo de transferencia de hiper texto o lo que es lo mismo que intentamos acceder a una pagina Web

aprendiendocodigo.blogspot.com.es es el Dominio (nombre) del ordenador al que se quiere acceder

/2013/04/ es el Directorio dentro del ordenador donde se encuentra la información

entrada-de-prueba.html es el Fichero que contiene la página Webque deseamos ver.

HTML Básico I: Un lenguaje de etiquetas

La base esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags) como elemento estructural sobre el que colocar elementos. Existen multitud de etiquetas y cada una sirve para realizar funciones distintas principalmente relacionadas con el tipo de contenido a mostrar o la forma de organizarlo.

<ETIQUETA> inicio
[.......]
</ETIQUETA> cierre

Una etiqueta es una palabra (en mayúscula o minúscula), delimitada por los signos < (mayor que) y > (menor que).

Por regla general, las etiquetas forman bloques que se inician con una instrucción y finalizan con la misma instrucción a la que se le antepone una barra inclinada (/) para indicar su final

Cada elemento se divide por lo tanto en tres partes bien diferenciadas: una etiqueta inicial, el contenido, y una etiqueta final. Todo lo que hay entre la etiqueta de apertura y la etiqueta de cierre se ve afectado por esa etiqueta y se denomina contenido de esa etiqueta.

<ETIQUETA>
[... contenido ...]
</ETIQUETA>

A veces, es necesario agregar datos adicionales a una etiqueta, en ese caso, la etiqueta de apertura será la que contendrá esos parámetros llamados atributos y que nos permititan diferenciar una etiqueta de otra aunque sean del mismo tipo.

<ETIQUETA atributo1="valor" atributo2="valor">
... contenido ...
</ETIQUETA>

Eventualmente, ciertas etiquetas no forman bloques ya que son autosuficientes, en ese caso, la barra inclinada se agrega al final de esa única etiqueta separada de esta por un espacio en blanco.

Algunos de los ejemplos más significativos de este tipo de etiquetas son las que se encargan de mostrar imágenes o incluir saltos de línea.

Este concepto de etiquetas de apertura y cierre es la clave para entender un lenguaje como el HTML. Como cualquier elemento puede contener a otros elementos, las etiquetas deben abrirse y cerrarse en el mismo orden en que fueron creadas. Una página web está compuesta por elementos (objetos) metidos unos dentro de otros (anidados). El elemento principal, el que contiene a todos los demás es el documento HTML.

Tras la etiqueta <html>, es frecuente encontrar las etiquetas <head> y <body> sobre las que puedes encontrar más información a través del enlace correspondiente.

Puedes consultar más información sobre la estructura de una página web, en este enlace.

HTML Básico 0: Cómo crear un documento HTML

Cómo comenzar un documento HTML

Este tutorial está diseñado para principiantes, que nunca han escrito un documento en HTML manualmente y necesitan saber dónde escribirlo y cómo guardarlo. Este tutorial mostrará el proceso de crear un archivo HTML. Aún cuando este proceso no pertenece al lenguaje HTML en sí, de esta forma, intentaré dar una pequeña idea para aquellos que todavía no saben como crear un documento HTML en blanco.

Este tutorial esta orientado a usuarios de Windows XP o posteriores. [proximamente podrás consultar la versión Mac aquí]

Consideraciones previas

Un documento HTML es un simple archivo que contiene texto en un lenguaje de marcas específico. Ésta información, aún estando escrita en forma estructurada lo cual la hace encajar en el estándar del lenguaje, es una simple secuencia de caracteres que pueden ser encontrados en un teclado normal..

Un archivo que contiene un documento HTML puede tener diferentes extensiones. De echo, puede tener cualquier extensión que tu quieras, pero si lo colocas en un archivo con una extensión como "bmp" (usualmente asociada con los archivos de bitmap) puede no ser interpretada en la forma que queremos (como un documento HTML). Entonces listaremos solamente las extensiones que serán normalmente "leídas" por los agentes de usuario como documentos HTML.

Muchas veces puede encontrar al navegar la web que la dirección URL en tu navegador correspondiente al documento que estás justamente viendo tiene una extensión de archivo como "php", "asp", "pl" ó "cfm" (a veces seguida por un símbolo de pregunta "?" y muchas otras cosas). Aún siendo estas extensiones asociadas con diferentes lenguajes del lado servidor, al momento que llegan al lado cliente no son más que documentos HTML documents. Esto se da debido a que los archivos contienen originalmente scripts del lado servidor que son procesados cada vez que un agente de usuario los solicita (antes de ser enviados) y son allí transformados en documentos HTML normales.

Pero para comenzar a escribir código HTML usaremos dos extensiones: "htm" y "html". La diferencia entre estas dos extensiones es simplemente una letra ("html" no es soportada por sistemas operativos antiguos los cuales casi ni se utilizan en estos días), así que puedes utilizarlas como prefieras.

Práctica

Una vez que has decidido que extensión utilizar, puedes elegir un nombre de archivo y crear el archivo. El proceso de crear archivos es una tarea simple que involucra un pequeño conocimiento acerca de tu sitema operativo. Los sistemas operativos pueden diferir en la forma en que los usuarios pueden crear un archivo, pero no mucho. De todos modos, mostraré el proceso de crear un archivo en Windows XP y dejaré que tu deduzcas o investigues cómo hacerlo en otros sistemas operativos.

El primer paso es hacer un click derecho en el escritorio y selecciona "Nuevo" y luego "documento de texto". Esto creará un archivo de texto y automáticamente te permitirá ingresar su nombre. Allí colocarás el nombre de archivo y la extensión elegida (por ejemplo, "ejemplo.html").

Nota: Para cambiar satisfactoriamente la extensión del archivo de "txt" a "html", necesitarás configurar tu sistema operativo para que muestre extensiones, de otro modo sólo podrás cambiar el nombre. Para ello, abre una carpeta (por ejemplo, "Mis documentos"), ve al menú "Herramientas" y selecciona "Opciones de carpeta...". Una vez abierta la ventana de opciones debes seleccional la solapa "Vista" y desmarcar la casilla "Ocultar extensiones para tipos de archivo conocidos".

Ahora el nombre ha sido elegido (ejemplo.html) y el archivo ha sido creado: estás listo para comenzar a editar este nuevo archivo. Elije un editor y abre el archivo. Mi recomendación es que uses un editor de texto básico. La mayoría de los sistemas operativos modernos proveen editores de texto básicos que puedes utilizar para editar tus páginas web. También puedes utilizar otros editores pero sin agregar formato (por ejemplo, texto en negrita) y salvar el archivo como texto plano solamente. En este ejemplo usaremos el Bloc de notas de Windows para editar el archivo. Simplemente haz un click derecho en el archivo creado recientemente y elige "Abrir con" y luego "Bloc de notas". Esto abrirá el nuevo documento HTML en el editor de texto "Bloc de notas" de Windows.

Ahora estás listo para comenzar a escribir tu página web. En la mayoría de los sistemas operativos modernos puedes ver el documento resultante en tu navegador por defecto haciendo doble click en el archivo. De este modo puedes editar y probar tus archivo de una manera muy sencilla.

Recuerda que siempre puedes ver el código fuente de una página web abriéndola con el navegador y seleccionando la opción "ver código fuente". No es recomendable editar los archivos desde aquí a menos que lo guardes especificando el nombre y la ubicación, dado que estor archivos mostrados por el navegador son habitualmente archivos temporales difíciles de localizar.

Menu