94408
Curso Práctico de HTML
Descripción
Sin etiquetas
Información de los módulos
Descripción
Sin etiquetas
Mostrar más
12. Conceptos básicos de HTML
Mark Norman Francis. 8 de julio del 2008. Última modificación: 13 de marzo de 2017 (equipo docente del grado de Multimedia). Publicado en: en línea, atributo, html, elemento, etiqueta.
En este apartado aprenderemos los conceptos básicos de HTML: qué es, qué hace, un resumen de su historia y qué estructura tiene un documento en HTML. Los apartados que encontraréis después de éste explican cada una de las partes específicas de HTML con mucho más detalle.
12.1. Qué es el HTML
La mayoría de las aplicaciones de escritorio que pueden leer y escribir ficheros utilizan un formato de fichero especial. Por ejemplo, Microsoft Word entiende los ficheros .doc y Microsoft Excel entiende los .xls. Estos ficheros contienen las instrucciones para reconstruir el documento cuando se vuelve a abrir y para saber cuál es su contenido, además de los "metadatos" sobre el artículo, como por ejemplo el autor, la fecha de la última modificación del documento e incluso cosas como la lista de cambios realizados con el fin de poder recuperar todas sus diferentes versiones.
El HTML (HyperText Markup Language) es un lenguaje para describir el contenido de los documentos de la web. Utiliza una sintaxis especial que contiene marcadores (conocidos como "elementos") que rodean al texto que hay dentro del documento para indicar a los agentes de usuario cómo deben interpretar esta parte del documento.
Utilizamos el término técnico agentes de usuario en lugar de navegadores web. Un agente de usuario es cualquier software que se utilice para acceder a las páginas web en nombre de los usuarios. Aquí debemos hacer una distinción muy importante: todos los tipos de navegadores de escritorio (Internet Explorer, Opera, Firefox, Safari, etc.) y los navegadores alternativos para otros dispositivos (como el canal de Internet de la Wii y los navegadores para teléfonos móviles como Opera Mini y WebKit para el iPhone) son agentes de usuario, pero no todos los agentes de usuario son navegadores. Los programas automatizados que utilizan Google y Yahoo! para indexar la web y que ejecutan en sus motores de búsqueda también son agentes de usuario, pero no hay ningún ser humano que los controle directamente.
12.2. Aspecto del HTML
El HTML es sólo una representación textual del contenido y de su significado general. Por ejemplo, el código para el encabezamiento "Aspecto del HTML" es el siguiente:
<h2 id="htmllooks">Aspecto del HTML </h2>
La parte <h2> es un marcador (que se conoce como "etiqueta") que significa "lo que sigue se debe considerar como un título de segundo nivel". </h2> es una etiqueta que indica dónde acaba el título de segundo nivel (y se conoce como "etiqueta de cierre"). La etiqueta de apertura, la etiqueta de cierre y todo lo que hay entre ellas se conoce como "elemento". Mucha gente utiliza los términos elemento y etiqueta indistintamente, lo cual no es del todo correcto. id="htmllooks" es un atributo; ya hablaremos de los atributos más adelante.
La mayoría de los navegadores incorporan una opción "Código fuente" o "Ver el código fuente", normalmente bajo el menú "Ver". Si vuestro navegador incorpora esta opción, seleccionadla y dedicad unos momentos a mirar el código fuente HTML de esta página.
Mostrar menos
Elemento multimedia
Contexto
Descripción
Sin etiquetas
Mostrar más
12.4. La estructura de un documento HTML
El documento HTML válido más pequeño posible sería algo similar a esto:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Página de ejemplo</title> </head> <body> <h1>Hola mundo</h1> </body> </html>
El documento empieza con un elemento de tipo de documento o doctype. Este elemento describe el tipo de HTML que se utiliza para que los agentes de usuario puedan determinar cómo se debe interpretar el documento y saber si sigue las normas que dice que seguirá.
Ved también
El doctype se describe con más detalle en el apartado 14 de este módulo.
A continuación, se puede ver la etiqueta de apertura del elemento html. Éste es un elemento que incluye a todo el documento. La etiqueta html de cierre es lo último que hay en cualquier documento HTML.
Dentro del elemento html está el elemento head. Éste es un elemento que contiene información sobre el documento (los metadatos). Este elemento se describe más detalladamente en el apartado siguiente. En la cabecera está el elemento title, que define el título "Página de ejemplo" de la barra del menú.
Después del elemento head está el elemento body, que es el elemento que incluye el contenido real de la página; en este caso sólo hay un elemento de encabezamiento de nivel uno (h1), que contiene el texto "Hola mundo". Y éste es todo nuestro documento.
Como se puede ver, a menudo los elementos contienen otros elementos. El cuerpo del documento incluirá inevitablemente muchos otros elementos. Las divisiones de página crean la estructura general del documento y contendrán subdivisiones. Éstas contendrán títulos, párrafos, listas, etc. Los párrafos pueden contener elementos que creen enlaces hacia otros documentos, citas, énfasis, etc. A medida que vayáis avanzando en esta serie, iréis sabiendo más cosas sobre estos elementos.
12.5. La sintaxis de los elementos HTML
Como ya hemos visto, un elemento básico en HTML consiste en dos marcadores al principio y al final de un bloque de texto. Hay algunos elementos que no rodean al texto y, en la mayoría de los casos, los elementos pueden contener subelementos (como html que contiene head y body en el ejemplo anterior).
Los elementos también pueden tener atributos, que pueden modificar el comportamiento del elemento e introducir un significado adicional.
<div id="masthead"> <h1>Conceptos básicos del <abbr title="lenguaje de marcado de hipertexto">HTML</abbr> </h1> </div>
En este ejemplo hay un elemento div (división de página, una manera de partir los documentos en bloques lógicos) con un atributo id añadido que tiene el valor de masthead. El elemento div contiene un elemento h1 (encabezamiento de primer nivel o más importante), que al mismo tiempo contiene texto. Parte de este texto está incluido en un elemento abbr (que se utiliza para especificar la expansión de las siglas), que tiene el atributo title, cuyo valor está definido como lenguaje de marcado de hipertexto (Hypertext Markup Language).
Muchos de los atributos de HTML son comunes para todos los elementos, aunque algunos son específicos de uno o varios elementos concretos. Éstos tienen siempre la forma palabraclave="valor". El valor debe aparecer siempre entre comillas simples o dobles (en algunas circunstancias se pueden omitir las comillas, pero no es una práctica recomendable con respecto a la predictibilidad, la comprensión y la claridad; se deben poner siempre los valores entre comillas).
La mayoría de los atributos y sus valores posibles están definidos por las especificaciones HTML; no es posible crear atributos propios sin invalidar el HTML, ya que ello puede confundir a los agentes de usuario y provocar problemas a la hora de interpretar correctamente la página web. Las únicas excepciones reales son los atributos id y class; sus valores están totalmente bajo vuestro control, ya que sirven para añadir significado y semántica propias a vuestros documentos.
Un elemento que se encuentra dentro de otro elemento se conoce como "hijo" de este elemento. Así pues, en el ejemplo anterior, abbr es hijo del elemento h1, que al mismo tiempo es hijo de div. Y al revés, el elemento div sería "padre" del elemento h1. Este concepto de padre/hijo es muy importante, ya que es la base de CSS y se utiliza mucho en JavaScript.
12.6. Elementos de bloque y en línea
En el HTML hay dos categorías generales de elementos que corresponden a dos tipos de contenidos y estructuras que representan estos elementos: elementos de bloque y elementos en línea.
Los elementos de bloque son elementos de nivel superior y normalmente definen la estructura del documento. Puede ser útil ver los elementos de bloque como aquellos que empiezan en una línea nueva y que representan una ruptura con lo anterior.
Algunos elementos de bloque comunes incluyen los párrafos, las listas, los títulos y las tablas.
Los elementos en línea son aquellos que se encuentran incluidos en los elementos estructurales de bloque y que incluyen sólo partes pequeñas del contenido del documento, y no párrafos enteros ni grupos de contenido.
Un elemento en línea no hará que aparezca una línea nueva en el documento; son los tipos de elementos que aparecen dentro de un párrafo de texto. Algunos elementos en línea comunes son los vínculos de hipertexto, las palabras o frases destacadas o las citas breves.
12.7. Referencias de carácter
Un último aspecto que hay que mencionar de un documento HTML es la manera de incluir caracteres especiales. En el HTML, los caracteres <, > i & son especiales. Estos caracteres inician y finalizan partes del documento HTML, y no representan los caracteres de "menor que", "mayor que" y "et".
Uno de los primeros errores que puede cometer un autor de webs es utilizar un carácter "et" en un documento y entonces ver que aparece algo inesperado. Por ejemplo, si se escribe la frase "Imperial units measure weight in stones&pounds" puede ser que en algunos navegadores se vea "...stones£s".
Esto sucede porque en HTML la cadena literal "&pound;" éses en realidad una referencia de carácter. Una referencia de carácter es una manera de incluir en un documento un carácter que es difícil o imposible de escribir desde un teclado, o en una codificación de documento concreta.
El símbolo "et" (&) introduce la referencia, y el punto y coma (;) la acaba. No obstante, muchos agentes de usuario pueden ser muy condescendientes a la hora de perdonar errores en el HTML, como por ejemplo el de olvidar el punto y coma, e interpretarán "&pound" como una referencia de carácter. Las referencias pueden ser números (referencias numéricas) o palabras abreviadas (referencias de entidades).
Un símbolo "et" se debe introducir en un documento como "&amp;", que es la referencia de entidad de carácter, o como "&#38;" que es la referencia numérica. En la web del W3C encontraréis una tabla completa de las referencias de caracteres.
Mostrar menos
Conjunto de Diapositivas
recurso para explicar fundamentos de HTML
Contexto
Descripción
Sin etiquetas
Descripción
Sin etiquetas
Mostrar más
El formato de las etiquetas HTML
Las etiquetas HTML se escriben encerradas entre ángulos. Normalmente se utilizan dos etiquetas: una de inicio y otra de fin para indicar que ha terminado el efecto que queríamos presentar. La única diferencia entre ambas es que la de cierre lleva una barra inclinada "/" antes del código.
<etiqueta>texto que presentará el efecto</etiqueta>
Por ejemplo:<b>Esto va en negrita</b> lo veremos así: Esto va en negrita
Es probable que una de las primeras preguntas que te hagas sea si es obligatorio escribir las etiquetas en minúsculas o en mayúsculas.
Hoy por hoy es indiferente escribirlas de una u otra manera: salvo raras excepciones los navegadores las interpretan correctamente en ambos casos.
Sin embargo, las últimas especificaciones emitidas por el W3C indican la necesidad de que vayan escritas siempre en minúsculas para considerar que el documento está correctamente creado. Así pues ya que es algo que no nos cuesta trabajo acataremos la norma emitida por el W3C.
La estructura básica de una página WEB
Para que un navegador reconozca que lo que está viendo es una página WEB se utiliza la siguiente estructura:
<html> (Etiqueta que indica que lo que viene a continuación es un documento HTML)
<head>(Etiqueta de apertura de la cabecera)
Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecera en la barra de título de la parte superior
</head>(Etiqueta de cierre de la cabecera)
<body>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se presente en pantalla.
</body>(Etiqueta de cierre del cuerpo)
</html>(Etiqueta de cierre del documento)
Antes de comenzar los ejercicios prácticos crea una carpeta con el nombre "CursoHTML" para poder almacenar en ella el resultado de tu trabajo.
Abrir el bloc de notas.
Escribir las etiquetas necesarias para crear el documento HTML.
Darle contenido al cuerpo escribiendo un renglón y pulsando la tecla INTRO para saltar al siguiente párrafo.
Escribir otro renglón y pulsar dos veces la tecla INTRO.
Escribir un tercer renglón y salvar el fichero en la carpeta CursoHTML con el nombre practica1.htm cambiando el tipo a Todos los archivos (*.*).
Cargar en el navegador el documento que acabamos de salvar y comprobar los resultados.
Mostrar menos
Mapa Mental
aqui nos habla sobre las caracteristicas que tiene el lenguaje de html