Lección 2 PROGRA WEB

Lección 2: Conceptos básicos de HTML, XHTML y CSS

Objetivos:
En esta lección conocerás los conceptos básicos de HTML, XHTML y CSS. Juntos, estos tres sistemas de codificación conforman la estructura y el estilo visual de las páginas web.
Cómo se representa el código HTML en el navegador

Para entender mejor la relación entre el código HTML y lo que vemos en el navegador al abrir el archivo, eneste ejemplo se muestra la conexión entre ambos:


A. Doctype. Esta línea indica al navegador que debe interpretar todo el código que sigue de acuerdo
con un conjunto de reglas específico.
B. Elemento HTML. Este elemento contiene a los demás y le indica al navegador que contiene un documento HTML.
C. Elemento HEAD. En esta sección aparece información sobre la página, pero no se muestra en lapantalla.
D. Elemento TITLE. Cualquier contenido dentro de las etiquetas "title" se muestra en la parte superior del navegador. Es lo que se utiliza cuando un usuario marca una página como "favorito" en el navegador.
E. Elemento BODY. Todo el contenido dentro del body se muestra en la ventana principal del navegador.
F. Elemento HEADING 1. El primero de seis elementos de cabecera. El contenido dentrode un heading de nivel 1 se muestra en tipografías grandes y en negrita.
G. Elemento IMAGE: enlaza a un archivo de imagen y la muestra en pantalla.
H. Elemento PARAGRAPH: por defecto, el navegador añade un salto antes y después de este elemento, que suele contener varias líneas de texto.
I. Elemento STRONG: el texto dentro de él se muestra en negrita.
J. Elemento ORDERED LIST: abre una lista deelementos en forma de líneas numeradas por orden.
K. Elemento LIST: cada línea con esta etiqueta recibe automáticamente un número ordinal empezando por el 1.

¿Qué es XHTML?

XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML , que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso con las cada vez más abundantesherramientas basadas en XML . XHTML extiende HTML 4.0 combinando la sintaxis de HTML, diseñado para mostrar datos, con la de XML, diseñado para describir los datos.
¿Para qué sirve?
Ante la llegada al mercado de un gran número de dispositivos, XHTML surge como el lenguaje cuyo etiquetado, más estricto que HTML, va a permitir una correcta interpretación de la información independientemente del dispositivodesde el que se accede a ella. XHTML puede incluir otros lenguajes como MathML , SMIL o SVG , al contrario que HTML.
¿Cómo funciona?
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos básicos a cumplir en lo que a código se refiere. Entre estos requisitos básicos se puede mencionar una estructuración coherente dentro del documento donde se incluirían elementoscorrectamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc.
Detalles de la sintaxis de XHTML
Hay una diferencia esencial entre HTML 4.0 y XHTML 1.0 – los dos estándares más recientes publicados por el W3C.
Tal y como está definido el XHTML, las páginas escritas en XHTML se pueden ver también en los navegadores que muestran laspáginas HTML actuales. Las etiquetas y atributos de XHTML y HTML siguen siendo las mismas, pero la sintaxis del código XHTML es más estricta.
Las diferencias más importantes entre XHTML y HTML son estas:
En XHTML, todas las etiquetas deben escribirse en minúsculas.
XHTML exige que todas las etiquetas de apertura lleven su correspondiente etiqueta de cierre, es decir, siempre debe existir una etiqueta alprincipio y otra al final de cualquier elemento, sea un título, párrafo, imagen u otro.
Todas las etiquetas XHTML deben tener cierre, aun en el caso de etiquetas especiales que técnicamente no necesitan etiquetas de apertura y cierre. Por ejemplo, la etiqueta
, que inserta un salto de línea, utiliza una sintaxis especial de autocierre. Una etiqueta que se cierra ella misma tiene este...