Tutorial: ¿Que es XHTML?
Introducción
En este curso y tutorial de maquetación vamos a aprender en forma intensiva a armar la estructura visual de un sitio web. Para hacerlo se requieren ganas de aprender y conocimientos básicos de informática en Windows (Instalar un programa, usar el bloc de notas, el explorador de windows, etc). Intentaremos evitar conceptos y palabras demasiado técnicas al principio y abusaremos un poco de la metáfora y el lenguaje coloquial.
Un sitio web se compone de una parte de programación (El sistema SiteUp basado en Jaws, en nuestro caso) y un frente visual. Es como si fuera el frente de la casa y el decorado del interior, es lo que se ve cuando la visitas, detrás de ella hay muchísimas cosas que el visitante no ve, cañerías, instalación eléctrica, cimientos que corresponderían a la programación.
XHTML es un lenguaje de con el que pueden armarse estos diseños o estructuras visuales para sitios webs. CSS es un lenguaje que permite definir la estética de un XHTML.
XHTML simplemente dice que cosa es que en una página web.
Vamos a dar unos ejemplos, es la mejor forma de aprender, directo al grano.
Puedes usar el bloc de notas de windows, o si quieres uno un poco mejor te recomendamos notepad++
Comenzando:
Abre un bloc de notas o archivo en notepad++ y comenzamos con la hoja en blanco.
Lo primero que debemos hacer es indicar en el texto que estamos haciendo una página web para que el navegador la entienda cuando la abra.
Comenzamos con algo como esto: (los colores están solo para facilitar la lectura)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n</html>
No te preocupes mucho por que quiere decir cada palabra del código, lo que importa es que sepas que estamos diciendole al navegador que estamos haciendo un documento de página web.
En XHTML definimos un elemento de la siguiente forma:
<elemento> contenido del elemento </elemento>
Es decir, el nombre del elemento entre signos menor y mayor para comenzar, y luego el nombre del elemento entre signos menor y mayor y una barra (/) para finalizarlo.
En caso de que el elemento no tenga contenido dentro (Por ejemplo, un salto de línea, no tiene nada dentro, es un salto de linea y ya está). Se pone la barra antes del signo mayor.
De forma que ahora pondremos cosas dentro del elemento <html>. A los textos entre signos mayor y menor los llamaremos etiquetas o tags.
Dentro del elemento <html> van dos elementos mas: <head> y <body> . En <head> van datos sobre la página y en <body> el cuerpo de la página propiamente dicha. Luego, cada uno de ellos dos aceptan elementos distintos dentro.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n </head>^n <body>^n </body>^n</html>
<b></b>: pone en negrita el texto dentro del elemento
<u></u>: subrraya el texto dentro del elemento
<i></i>: pone itálica o cursiva al texto dentro del elemento
<p></p>: define un párrafo
<br />: produce un salto de línea (poner un enter no funciona como salto de linea en xhtml)
Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n </head>^n <body>^n <p>Bienvenido a mi <b>primera pagina web</b></p>^n <p>^n En este parrafo mostrare^n como^n los <i>saltos de linea</i> no influyen y los espacios cuando son mas de dos^n tampoco, para que haya un verdadero^n <i><u>salto de linea</u></i> debemos poner <br /> y alli <br /> <u>si</u> <br /> habra^n un salto de linea de verdad.</p>^n </body>^n</html>
Puedes probar el código con el Espacio de Pruebas. Modifica el código como quieras agregando y quitando párrafos, subrayados, negritas, cursivas, etc, y sigue probando diferentes formas hasta comprender la estructura del XHTML. En el próximo capítulo pondremos un poco de color a los elementos. Para verlo en una página hecha por ti mismo, pon este código o uno que hayas hecho en un bloc de notas o notepad++, guardalo con extensión .html y luego ábrelo con el navegador o hazle doble click.
Espacio de pruebas
Trackback URI: http://www.siteup.com.ar/index.php/trackback/9
Fuentes XML de comentario: RSS | Atom
Dejar un comentario