 Siguiente |
Tal como dije anteriormente este mini-tutorial de xhtml no te va a volver un experto en el tema. Tampoco es lo que pretendo. Simplemente voy a dar unas nociones básicas para poder formatear un poco los textos y que queden minimamente bonitos antes de empezar a armar putadas :)
Las páginas web en XHTML requieren una cabecera que no requeráan esas en HTML. Además deben de cumplirse las siguientes normas (para que, además de ser HTML sea XML que es el objetivo de este lenguaje):
La cabecera es la siguiente:
Copiar y pegar. Nada más fácil. En esa cabecera ya tenemos ese primer elemento raíz. De cualquier forma en los ejemplos voy a escribirlo pero sin el atributo. Por favor, tener la delicadeza de cambiarlo cuando copieis y pegueis los ejemplos. Funcionará igualmente aunque no lo hagais pero ... un poco de seriedad.
Y a continuación el mínimo código HTML para hacer una página web. Estas tienen dos secciones: cabecera y cuerpo. En la cabecera se encuentra el título de la página, los meta-tags (no voy a explicarlos en este curso ... al menos no creo que los vaya a explicar), y normalmente es donde se colocan también unas cuantas funciones en Javascript y los links a páginas externas (CSS o JS). En el cuerpo es donde realmente va el contenido de nuestra página, lo que queremos mostrar.
Que nadie se moleste en copiar y pegar el código anterior. No vale para nada.
Para poner comentarios en medio del código HTML lo hacemos entre los símbolos: <!-- y -->. Todo lo que se encuentre entre esos símbolos no aparecerá por pantalla.
Ahora una página web con título y con contenido:
¿Empezais a sentir que ya sois alguien en este mundo? Ya sabeis crear una página web. Las compañías de informática se pelearán por vosotros, etc, etc, ... Seguir soñando majos.
Como estoy cansado de escribir ejemplos aquí viene una lista de tags relativos al formateo de texto con una pequeña explicación de su utilidad. No es una lista exhaustiva, sólo pongo los más utilizados.
Vale, es verdad, me he pasado. La mitad de esos tags no se usan para nada. Lo siento pero es que me aburro (en este maldito país que ojalá se hundiera).
Y aquí viene nuestra primera lección de CSS. Antes para centrar un texto disponíamos del tag <center>. Hoy en día también funciona pero está deprecated ( = obsoleto*1 ). Lo que debemos usar es el siguiente atributo: style="text-align: center" (en el ejemplo podremos ver cómo).
Y en la segunda lección de CSS (también bastante útil) explicaré como poner un gráfico o un color de fondo. Puede usarse en varios tags (lo mejor es experimentar) pero su uso más habitual es en el body. Para poner una imagen usamos el atributo style="background-image: url(file.ext)". En algunos sitios puede hacerse también a partir del atributo background pero de nuevo ese atributo esta obsoleto.
Poner un color de fondo es también muy fácil. Tan simple como usar el atributo style="background-color: color_code". El problema es ... ¿qué color_codes existen? Básicamente tres tipos que no voy a explicar con profundidad. Es mucho más divertido si experimentais probando combinaciones :). El primer tipo consistirí en usar el nombre (en inglés, por supuesto) del color que queréis poner. Funciona casi siempre. El segundo y tercer tipos consisten en hacer la combinación rgb del color a poner. Esas siglas vienen de: red green blue. A partir de la mezcla de estos tres colores se obtienen 256*256*256 = una burrada de colores distintos. Para indicar que estamos usando este sistema tenemos dos posibilidades. Escribir rgb (red,green,blue) donde red, green y blue son valores numéricos entre 0 y 255, o bien escribirlo en hexadecimal como: #RRGGBB donde hay que sustituir por un valor hexadecimal cada par de letras que indica el color. Ejemplo: #FFFFFF es el blanco y #000000 es el negro.
Para terminar la lección 1 de este curso un ejemplo en el que se usan algunos de los tags indicados ahí arriba.
Fin de la lección 1.
*1: Esto me recuerda que en segundo de carrera tuvimos un profesor que, para introducirnos en el apasionante mundo de la programación en COBOL, nos dió una primera lección titulada: Elementos Obsoletos en la Futura Revisión del COBOL. Increible. No teníamos ni idea de qué elementos tenía ese lenguaje ni para qué demonios servían y empezaba por los que se iban a eliminar.