|
Taller
|
| >> Taller >> Curso de HTML by BenKo >> Cap. 1, Lo + básiko. |
Después de toda esa aburrida teoría, vamos a seguir con más. XD . Paciencia. Rekuerda ke: "Sólo un caballero jedi totalmente entrenado y con la Fuerza como su aliado, conseguirá la victoria sobre el Lado Oscuro". Ya sabes, ajo y agua.
<HTML>
<HEAD>
<TITLE> Título de la web </TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Podemos distinguir dos partes bien diferenciadas:
Cabecera del documento. Aquí se pone el título a la web, (que es obligatorio ponerlo). El título es eso que aparece en una esquinita al imprimir alguna web y también aparece en la barra de título de nuestro navegador.
En la cabecera, también se pone información adicional, como el generador de la web, el autor, el marco base, palabras clave para buscadores, scripts, etc., pero ahora no vienen al caso.
La información que hay en la cabecera NO será visible en la web, así que no importa mucho lo que pongas ahí.
Cuerpo del documento. Aquí es donde va la "chicha". El BODY contiene las etiquetas que definen el aspecto de la web. Por eso esta es la parte más trabajada.
Muy fácil. Sin ninguna etiqueta. El texto aparecerá con el tamaño, fuente y color por defecto del navegador. Suele ser tamaño 3 en letra Times New Roman y color negro.
Ta bien. Una de las primeras etiquetas que la gente aprende son las headings (cabeceras). La etiqueta es <Hx> con la de cierre </Hx>, donde x es un número del 1 al 6 que indica el tamaño, siendo el 1 el más grande. No olvides poner el mismo número en la etiqueta de cierre ;-). Ahí van unos ejemplillos:
<H1>Cabecera 1</H1>
<H2>Cabecera 2</H2>
<H3>Cabecera 3</H3>
<H4>Cabecera 4</H4>
<H5>Cabecera 5</H5>
<H6>Cabecera 6</H6>
Las cabeceras insertan automáticamente saltos de línea, por lo que no puedes poner dos tamaños en la misma línea (con esta etiqueta). Como ves, las cabeceras son ideales para poner títulos (ke es lo ke yo hago), pero para ello las tienes que centrar, para eso usamos...
Como su nombre indica, esta etiqueta centra todo lo que contenga: texto, tablas, imágenes...Su sintaxis es muy simple. Un ejemplillo:
<CENTER>
<H1> BenKo es genial ; ) </H1>
</CENTER>
Y nada mejor para poner debajo de un título que una...
Son esas líneas tan populares que suelen aparecer en las webs. La etiqueta (no tiene cierre) es <HR>. Una línea simple queda así:
Si queremos que pierda el aspecto 3D a la etiqueta hay que añadirle el parámtreo NOSHADE. Así:
<HR NOSHADE>
Hay otros otros parámetros: WIDTH (ancho) y COLOR. El ancho se puede expresar de manera absoluta (en píxels) o relativa (en % que okupan en la pantalla). Yo uso el %. El color se puede poner en hexadecimal o en inglés. Los colores hexadecimales los dejaré para más adelante, así que los pondremos en inglés.
<HR COLOR="red" WIDTH="90%">
NOTA 1: Hay un parámetro más (HEIGHT) que define la altura, pero casi nadie lo usa. La altura base es dos píxels.
NOTA 2: El orden de los parámetros no afecta al resultado final (huy, propiedad conmutativa, como en la suma).
NOTA 3: El parámetro COLOR no sirve para el Netscape Navigator. Así es la vida : (
Y después de todo esto, sólo nos quedan por ver:
Normalmente, cuando la gente escribe lo hace en párrafos. En HTML los párrafos se indican con la etiqueta <P> (no hace falta cierre porke se supone que cuando empiezas un párrafo acabas el anterior).
Para insertar un salto de línea (retorno de carro) se utiliza la etiqueta <BR> (también sin cierre). Y, por último, para insertar varias líneas en blanco se hace uso combinado de <P> y <BR>. Y como muestra un botón:
<P>TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTexto
<BR>TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
<P>
<P><BR>
<P><BR>
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto
Como podéis observar, al dejar varias líneas en blanco, en la primera no se pone <BR>, sólo <P>.
Ufffff. ya hemos terminado este capítulo. Ké aburrido ¿no? Sorry pero las cosas son así. A ver si en los siguientes soy más escueta.
Al final de cada capítulo, hay un ejercicio práctico, con el objetivo de ir haciendo una página web sobre DIV Games Studio según vayamos aprendiendo cosas.
El código HTML lo tendrás que copiar en el Bloc de Notas, luego guardarlo con la extensión .html y abrirlo con el navegador (con la opción Archivo/Abrir). Para seguir mejor el curso, lo mejor es que hagas una carpeta en el disco duro para ir guardando todos los archivos de la web. Ten en cuenta que todos los ejercicios junto con las imágenes tienen que estar en el mismo directorio.
Weno, ahí va el código:
<HTML>
<HEAD>
<TITLE>Home</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>BenKo's DIVPage</H1>
<HR COLOR="blue" WIDTH="90%">
</CENTER>
<P>Wenas, internautas. Esta es mi página web no oficial de DIV Games Studio, el lenguaje de programación
de videojuegos creado en España por Daniel Navarro. Aquí encontrarás noticias, links y
un download.
<P>Por ahora, esta página está en construcción. Más adelante iré añadiendo más cosas.
</BODY>
</HTML>
Guarda el archivo con el nombre de home.html y visualízalo con el navegador. Sí, ya sé que es deprimente, ¿pero ké esperabas? ; )
En la página principal (home) la gente indica el propósito de la web, las últimas actualizaciones, noticias MUY importantes, etc. Algunos webmasters (personas que realizan webs) ponen un contador en Home para poder saber cuánta gente visita la página (y deprimirse) y también describen brevemente las secciones. También es muy recomendable poner aquí tu dirección de e-mail, para que los visitantes puedan contactar contigo en caso de encontrar algún fallo en la web. Ten siempre en cuenta de que la sección Home es siempre la primera que ve la gente y hay que convencer a los demás en unas pocas líneas de que vean nuestra web y (lo más importante) que vuelvan.
NOTA: En vez de BenKo's DIV Page pon el título ke kieras. También puedes cambiar el texto o el color y longitud de la HR (línea horizontal). Ten en cuenta de que esta es TU web, y no la mía.
NOTA 2: Ah, ¿sabías que en el HTML da igual usar mayúsculas o minúsculas en las etiquetas? Tampoco importan los retornos de carro (porque se guarda como texto sin preformatear). Por eso, podríamos poner todo en la misma línea o incluso un carácter en cada línea, pero nadie lo hace por motivos obvios ¿no querrás ser la excepción que confirma la regla?¿O sí?
P' atrás | Principio | P' alante