Curso Práctico de HTML

Conceptos Básicos

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.  

Fundamentos sobre como trabajar con HTML

recurso para explicar fundamentos de HTML

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...

html desarrollo web lenguaje html conceptos

Elementos multimedias,texto y complementarios que tiene una pagina web

Resumen de elementos que van dentro de un página web

html desarrollo web multimedias elementos

Características básicas para etiquetar en lenguaje HTML

aqui nos habla sobre las caracteristicas que tiene el lenguaje de html

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.

html sus caracteristicas