En las entradas anteriores hemos visto de manera general como funciona el HTML con las hojas de estilos CSS, en ésta entrada estudiaremos un poco acerca de las etiquetas HTML y su función.

Como habrán notada en las entradas anteriores la parte del diseño que corresponde a HTML forma la estructura que tendrá nuestra página web y la parte del diseño que corresponde a CSS forma la presentación, estilo, color, tamaños, fuentes, entre otros que veremos en nuestra página web.

¿Qué es una etiqueta html?

Bien empecemos recordando que el HTML es un lenguaje de marcas, por lo tanto una etiqueta es una marca y deben ser vistos como fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.

Las etiquetas son la base principal de HTML, donde la página web sera un documento de texto con marcas que definirán la forma de su presentación.

¿Cómo se identifican las etiquetas HTML?

Las etiquetas HTML se identifican facilmente ya que siempre se escriben entre los signos menor que (<) y mayor que (>), y en su mayoría se usa una para indicar el inicio de la marca y otra para el final.

Por ejemplo: <b>Texto afecto con negrita</b> en éste caso la etique de inicio será <b> y la de cierre será </b> y el texto que está entre estas dos etiquetas será afectado con negrita.

No todas las etiquetas se cierran de la misma forma, existe un número considerable de ellas que solamente usan /> al final para indicar el cierre, por ejemplo: <img ...atributos.../>, existen otras que vamos a ir definiendo en el transcurso del curso.

Atributos de las etiquetas

Los atributos permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que asignemos y estos separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que asignamos al atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

Ejemplos:

img es el nombre de la etiqueta para insertar imagenes en el documento
src es el atributo para indicar la ubicación y el nombre de la imagen que insertaremos en el documento
width es el atributo que indica el ancho que tendrá la imagen insertada
height es el atributo que indica el alto que tendrá la imagen insertada

div es el nombre de la etiqueta que hará una división en nuestro documento web
id es el atributo que indica el identificador css de esa división (nosotros le llamaremos capa)
align es el atributo que hará posible que se alinie según el valor indicado

Algunas etiquetas importantes que debemos recordar.

<html> </html>

Indican al navegador que todo lo que se encuentra entre ellas debe ser interpretado como código HTML, por lo tanto deben usarse al principio y al final del documento web.

<head> </head>

Esta etiqueta se utiliza para configurar la cabecerá del documento web, en ella se configurará el título del documento web, la descripción del sitio, los datos del autor, juego de símbolos del lenguaje a utilizar, escripts (css, js, entre otros) y más.

<body> </body>

Entre estas dos marcas incluiremos los que queremos que forme parte del cuerpo de la página web, aquí se incluiran la mayoría de las etiquetas que conoceremos.

<title> </title>

Se usa para indicar el título de la página web se debe escibir entre <head> y </head>

<link />

Esta es importante ya que permitirá relacionar nuestro documento HTML con una hoja de estilos css o bien con una hoja de scripts de javascript, aquí les dejo un ejemplo de como usarla.

link es la etiqueta de relación de archivos
rel establece el tipo de relación en este caso una hoja de estilos
href indica la ubicación y el nombre del archivo relacionado, en este caso la ubicación es la carpeta css y el nombre del archivo es estilos.css
type indica cual es el tipo de archivo que usaremos en este caso es un archivo de texto, pero con configuración css.

<meta charset="utf-8" />

Este meta sirve para que nuestra página web no experimente problemas con las tíldes y eñes debemos configurar esta etiqueta con la códificación utf-8 que es una de las más conocidas y que incluye esos caracteres que siempre dan problemas en el diseño web (á, é, í, ó, ú, ñ, Ñ bien aunque no es del todo infalible).

UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres Unicode e ISO 10646 utilizando símbolos de longitud variable. UTF-8 fue creado por Robert C. Pike y Kenneth L. Thompson. Está definido como estándar por la RFC 3629 de la Internet Engineering Task Force (IETF). Actualmente es una de las tres posibilidades de codificación reconocidas por Unicode y lenguajes web, o cuatro en ISO 10646. Más información.

Meta tag “Keywords”

Este meta indica al buscador las palabras claves de nuestra página. Por ejemplo, nuestra página al ser un tutorial de html, sus palabras clave serán “tutorial” , “html”, “css”, “iptce” y “colegio”. Los keywords deben ir separados por comas y sin espacios entre ellos.

Meta tag “Description”

Este meta es también destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos. Esto lo haremos a través de frases cortas y separadas entre ellas por puntos. En nuestra página este meta quedaría de la siguiente manera:

Meta tag “language”

Este meta tag le indica al buscador el idioma en el que está escrita la página. En el caso de español en content se pone “es”, en inglés “en”, en francés “fr”… Nuestra página es española así que su meta será el siguiente:

Meta tag “Distribution”

Este meta es importante. Marac la distribución que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en “content” indicaremos “global”. Escribir este meta en global es lo más recomendable. Así pues nuestra página incluirá…

Etiquetas que van incluidas en <body> </body>

Para comenzar con esta sección debo aclarar que son muchas las etiquetas que pueden incluirse en ésta sección y que haré mención de algunas de ellas, y para hacerlo más dinámico mostraré el ejemplo y el resultado.

<h1>Texto afectado</h1>

Texto afectado

De estas etiquetas contamos con seis, mostraré un ejemplo más con la etiqueta <h6> </h6>

<h6>Texto afectado</h6>

Texto afectado

<b>Texto afectado</b>
Texto afectado

<i>Texto afectado</i>
Texto afectado

<a href="http://www.google.com" target="_new">ir a google</a>
ir a google

Existen como mencione al principio de ésta sección muchas más que las iremos conociendo en el transcurso de este blog.

jueves, 6 de septiembre de 2012

Etiquetas HTML

Texto afectado

Texto afectado

No hay comentarios:

Publicar un comentario