modulo 1 - introduccion a xhtml
DESCRIPTION
Modulo 1 - Introduccion a XHTMLTRANSCRIPT
Modulo 1RODRIGO ALFARO # WEB SOMETHING # [email protected]
Indice
Introduccion a XHTML.
Ejemplo sencillo pagina web.
Etiquetas y elementos.
Hipervinculos.
Doctype.
Ejemplo.
Ejercicios.
Introduccion a XHTML
XHTML, o lenguaje extensible de marcado de hipertexto, y su predecesor HTML, son los más ampliamente utilizados en la Web. Como su propio nombre indica, XHTML es un lenguaje de marcas, que puede sonar complicado, hasta que te das cuenta de que te encuentras con marcas cada día.
Al crear un documento en un procesador de texto, puede añadir estilos al texto para explicar el documento de estructura.
Por ejemplo, se pueden distinguir las partidas del cuerpo principal del texto con un estilo de título (por lo general con una fuente más grande). Puede utilizar la tecla Intro (o Retorno) para comenzar un nuevo párrafo.
Podemos insertar tablas en el documento para guardar datos, o crear listas con viñetas para una serie de puntos relacionados, y así sucesivamente.
Si bien esto no afecta a la presentación del documento, el propósito fundamental de este tipo de marcado es proporcionar una estructura que hace que el documento sea más fácil de entender.
Ejemplo sencillo pagina web
<html>
<head>
<title>Popular Websites: Google</title>
</head>
<body>
<h1>About Google</h1>
<p>Google is best known for its search engine, although
Google now offers a number of other services.</p>
<p>Google’s mission is to organize the world’s
information and make it universally accessible and
useful.</p>
<p>Its founders Larry Page and Sergey Brin started
Google at Stanford University.</p>
</body>
</html>
Etiquetas y elementos
Si nos fijamos en la primera y la última linea del código para el ejemplo anterior, podemos ver pares de paréntesis angulares que contiene las letras <html>.
Los dos soportes y todos los caracteres entre ellos se conocen como una etiqueta, y hay un montón de etiquetas en el ejemplo.
Todas las etiquetas de este ejemplo vienen en pares, hay etiquetas de apertura y etiquetas de cierre.
La etiqueta de cierre es siempre un poco diferente de la etiqueta de apertura, ya que tiene una barra diagonal después del corchete angular primera </ html>.
Etiquetas y elementos
Etiquetas y elementos
Cada vez que se escribe una página web en XHTML, la totalidad de la página se encuentra entre la apertura <html> y de cierre </html> Etiquetas, al igual que lo fue en el último ejemplo. Dentro del elemento <html>, todo archiv *.html consta de dos partes principales a la página:
1. El elemento <head>: A menudo se refiere como la cabecera de la página, contiene información sobre la página (este no es el contenido principal de la página). Se trata de información como un título y una descripción de la página, o las palabras clave que los motores de búsqueda pueden utilizar para indexar la página. Se compone de los la apertura de etiqueta head, el cierre </ head>, y todo lo demás.
2. El elemento <body>: A menudo se refiere como el cuerpo de la página, contiene la información que realmente ver en la ventana principal del navegador. Consiste en la <body> apertura, cierre </ body>.
Etiquetas y elementos
En el ejemplo inicial observamos que hay etiquetas anidadas, como el siguiente ejemplo:
<p>Lorem ipsum <em>dolor</em></p>
Estas sirven para recalcar una palabra, imagen, etc. que no necesariamente pertenezca a la herencia de la etiqueta madre.
Hipervinculos
Los Hipervinculos o hiperenlaces, son parte fundamental de la arquitectura de la World Wide Web, pero el concepto no se limita al HTML o a la Web.
Casi cualquier medio electrónico puede emplear alguna forma de hiperenlace.
Un hiperenlace consiste en una o más palabras diferenciadas por un formato diferente al resto del párrafo y que al pinchar sobre ella con el ratón permite navegar a un documento diferente que ampliará la información de las palabras del hiperenlace.
El formato más común para diferenciar el hiperenlace suele ser azul y subrayado.
Son palabras que te permiten navegar por el hipertexto, también los reconocemos porque al pasar el mouse por encima cambia de forma el puntero.
Hipervinculos
Doctype
XHTML es el sucesor de HTMl y emplea una sintaxis más estricto que su predecesor HTML.
Por ejemplo, el elemento y los nombres de atributos en XHTML todos deben ser escritos en minúsculas (mientras que las versiones anteriores de HTML eran no distingue entre mayúsculas y minúsculas), cada elemento que tiene algún contenido debe tener un elemento de cierre correspondiente.
Cada página XHTML comienza con una declaración DOCTYPE para indicar al navegador (o cualquier otro programa) la versión de HTML o XHTML que se está utilizando en esa página.
Hay 3 versiones XHTML
• 1.0 Transitional XHTML, que todavía se permite a los desarrolladores utilizar el tags obsoletos de HTML.
• XHTML 1.0 Strict, No permite mezclar tags de html obsoletos.
• XHTML 1.0 Frameset, Permite el uso de iframes en el sitio web.
Doctype
Ejemplo
Ver archivo ejemplo_modulo_1.html
Ejercicios
Crear una pagina web con cada uno de los doctypes vistos, ademas el archive debe mostrar el nombre del alumno entre etiquetas <h1> y que posea hipervinculos a otra pagina.
Bibliografia
Web programming with HTML, XHTML and CSS, 2nd Edition, Jon Duckett, Wiley Publishing Inc, paginas 4-15.