HTML se traduce al español como Lenguaje de Marcas de Hipertexto y es el código en el que están escritas casi todas las páginas Web. A pesar de su complicado nombre, el código en sí es muy sencillo. Antes de empezar a aprender HTML, hay una cosa importante que debes saber.
Todos los comandos se escriben entre paréntesis triangulares: < >. Se llaman etiquetas. Cuando escribes algo entre estas etiquetas, significa que deseas iniciar un comando. Si deseas cerrar un comando, debes cerrar las etiquetas. Para cerrar una etiqueta, escribe </command>. Es decir, añade / tras el primer <.
El comando <b>una palabra</b> hace que una palabra aparezca en negrita en tu página. Puesto que las etiquetas están cerradas, todo lo que escribas después de "una palabra" no aparecerá en negrita.
Hay unas cuantas excepciones que no es necesario cerrar, pero ya nos ocuparemos de ellas más adelante. El concepto de las etiquetas es lo más difícil de entender en HTML. Cuando hayas comprendido que cada comando tiene que estar dentro de < estas etiquetas > estarás en el buen camino para dominar completamente la creación de páginas Web.
|
Casi todas las páginas Web están compuestas por texto. Si alguna vez has utilizado un teclado, entonces ya sabes cómo escribir texto en HTML. Para escribir algo en tu página Web, basta con que escribas aquello que deseas que aparezca. Tienes que utilizar etiquetas si quieres que el texto aparezca de alguna forma especial.
Éstas son algunas de las etiquetas más comunes:
<b> ésta cambia el texto a negrita </b> (es necesario cerrarla)
<br> inserta un salto de línea (como cuando pulsas Intro en un teclado)
<p> Ésta inicia un nuevo párrafo ésta resulta muy útil para dividir el texto
<i> Ésta cambia el texto a cursiva </i> (es necesario cerrarla)
<u> subraya el texto </u> (es necesario cerrarla)
Tamaño de la fuente:
también puedes cambiar el tamaño de la fuente. En HTML los tamaños van de 1 (muy pequeña) a 7 (muy grande). Para cambiar el tamaño de la fuente, tienes que escribir:
<font size=1>escribe tu texto aquí</font>
Tienes que cerrar la etiqueta de la fuente; de lo contrario, todo el texto que escribas después tendrá ese mismo tamaño.
Éstos son los distintos tamaños de fuente que puedes utilizar:
|
| Ahora que ya sabes cómo cambiar el tamaño del texto y añadir efectos especiales, ya estás preparado para aprender un lenguaje HTML más complicado. Haz clic en el botón Siguiente para acceder a la tercera lección. |
Cuando te hayas habituado al uso de etiquetas sencillas como la negrita o el subrayado, puedes empezar a aprender otras cosas que te permitirán hacer tu texto más atractivo. Aquí aprenderás a añadir viñetas, crear listas numeradas e insertar una línea horizontal.
Viñetas:
las viñetas son un poco más complicadas. En HTML, las viñetas se llaman listas desordenadas o ul (por el inglés "unordered lists").
Para iniciar las viñetas tienes que escribir <ul>.
Puesto que quieres que cada viñeta aparezca en una línea nueva, escribe <li> antes.
Cuando hayas acabado todas las viñetas, escribe </ul>
El código tendría este aspecto:
<ul>
<li>viñeta uno
<li>viñeta dos
<li>viñeta tres
</ul>
Esto es lo que aparerecía realmente en tu página Web:
* viñeta uno
* viñeta dos
* viñeta tres
Listas numeradas:
para crear listas numeradas se utiliza el mismo principio que para la creación de viñetas, pero se utiliza lista ordenada ("ordered list" en inglés) <ol> en lugar de <ul>. El código para una lista ordenada tendría el siguiente aspecto.
<ol>
<li>punto uno
<li>punto dos
<li>punto tres
</ol>
Esto es lo que aparecería realmente en tu página Web:
1. punto uno
2. punto dos
3. punto tres
Líneas horizontales:
si deseas dividir la página, un comando muy útil es la regla horizontal (hr por el inglés "horizontal rule"). La regla predeterminada se extiende a lo largo de la página y tiene el siguiente aspecto:
___________________________________________
Allí donde quieras añadir una línea para dividir una página, escribe <hr>. Puedes modificar muchas cosas para que tenga un aspecto diferente, como la anchura, la altura y el nivel de sombreado.
La anchura puede medirse en píxeles (una página Web normalmente tiene alrededor de 600 píxeles de ancho), aunque también puedes escribir el porcentaje de la pantalla que quieres que cubra. Para cambiar la anchura, basta con que escribas <hr width=300> o <hr width=50%>. Una regla horizontal de 300 píxeles de longitud tiene el siguiente aspecto:
_________________________________________
El tamaño hace referencia a la longitud de la regla horizontal. Puedes modificarlo de la misma forma que la anchura. Si quieres una línea de 10 píxeles de ancho, escribe <hr size=10> y su aspecto será el siguiente:
___________________________________________
___________________________________________
Las reglas horizontales aparecen sombreadas de forma predeterminada. Puedes crear una línea sin sombreado si escribes <hr noshade>. Su aspecto será aproximadamente el siguiente.
|
| __________________________________________ |
| Puedes combinar todas las variables posibles dentro de la misma etiqueta. Si deseas crear una regla de 300 píxeles de ancho que antes tenía 10 píxeles de ancho y no tenía sombreado, escribe <hr noshade width=300 size=10>. Su aspecto será aproximadamente el siguiente |
No importa el orden en el que aparezcan, lo esencial es que se encuentren dentro de las etiquetas < y >.
|
| Puedes cambiar fácilmente el color de la fuente. Si se trata de los colores utilizados con mayor frecuencia, puedes usar su nombre, por ejemplo red (rojo), black (negro), green (verde), blue (azul), gray (gris) y white (blanco). HTML utiliza la ortografía del inglés americano; si deseas cambiar el color de algo, tienes que escribir "color". Si quieres el color gris, tienes que escribir "Gray". Si quieres que una palabra aparezca en color rojo, debes escribir: <font color="red"> texto aquí </font> y aparecerá de la siguiente forma: |
| Si se trata de colores más complejos, puedes utilizar un código hexadecimal. Es un código exclusivo para cada uno de los tonos de un color. Todos los colores tienen una combinación de 6 números y letras que representan el tono exacto. Éstos son algunos de los códigos más comunes: |
| Para utilizar el código hexadecimal, escribe: <font color="FF66FF">texto aquí</font>. De esta forma, el texto aparecerá de color rosa: |
Si quieres cambiar el color y el tamaño de la fuente, puedes hacerlo en la misma etiqueta. Ejemplo:
<font size="1" color="red">escribe el texto aquí</font>
De esta forma, el texto aparecerá en un tamaño pequeño y de color rojo:
|
Color de fondo
Si quieres que tu página tenga un aspecto más atractivo, puedes cambiar el fondo de la misma. El color de fondo funciona de forma similar al color de la fuente, pero afecta a toda la página. Normalmente, los fondos son blancos (FFFFFF) o negros (000000), pero puedes utilizar el color que prefieras. Para cambiar el color de fondo, escribe esto cerca de la parte superior de tu página.
<body bgcolor="#FFFFFF"> o <body bgcolor="white">
No es necesario cerrar esta etiqueta porque afecta a toda la página, pero es aconsejable acostumbrarse a poner </body> en la parte inferior de la página para que todo esté bien ordenado.
Color de fondo en las tiendas
Si deseas cambiar ligeramente el color de fondo de tu tienda, puedes hacer una de estas dos cosas. El primer método consiste en utilizar una imagen de fondo. Escribe
|
| <body background="http://images.neopets.com/backgrounds/tm_chombybk.gif"> |
al inicio de la descripción de tu tienda y esta imagen quedará colocada como fondo para tu tienda. Puedes conseguir numerosos fondos de Neopets. Por otra parte, si quieres usar un color sólido o quieres un fondo de color únicamente en una parte, puedes utilizar una tabla. La tabla más sencilla consiste en escribir lo siguiente en la descripción de tu tienda:
<table background="http://images.neopets.com/backgrounds/tm_chombybk.gif">
o
<table bgcolor="red">
seguido de
<tr><td>
Escribe el texto aquí de la forma habitual y escribe las dos líneas siguientes para cerrar la tabla.
</td></tr>
</table>
No te olvides de incluir estas dos últimas líneas; de lo contrario, la tabla quedará incompleta. Ahora ya deberías ser capaz de añadir un color de fondo o una imagen a tu tienda  Si deseas colocar la tabla en el centro de la página, basta con que añadas las palabras align=center después de <table. Por ejemplo, <table align=center bgcolor="red">. |
Las imágenes pueden darle un toque especial a tu página Web y son una forma estupenda de enseñar tu trabajo a los demás. Si has creado una imagen y quieres utilizarla en tu sitio, tienes que guardarla en alguna parte de la Web. Cuando sepas dónde está almacenada tu imagen, te resultará muy sencillo añadirla a tu sitio Web. Puedes utilizar cualquier imagen que se encuentre en el sitio de Neopets o bien una imagen de cualquier otra parte de la Web.
Cuando sepas dónde están almacenadas tus imágenes, ya puedes escribir el código. El código para insertar una imagen está compuesto por tres elementos:
<img src = " (este comando le pide al ordenador que busque una imagen)
http://www.neopets.com/mypicture.gif (éste le dice al ordenador dónde puede encontrar tu imagen)
"> cierra la etiqueta
Cuando unas el código, éste tendrá el siguiente aspecto:
<img src="http://www.neopets.com/mypicture.gif"> La etiqueta de una imagen es especial porque no tienes que cerrarla; esto es lo único que debes hacer para que aparezca una imagen. Si ahora miras tu página Web, ya deberías poder ver la imagen.
Hay muchas otras cosas que puedes añadir al código para mejorar el aspecto de la imagen, incluida la etiqueta del borde. Mediante esta etiqueta puedes elegir el grosor del borde que aparecerá alrededor de la imagen, en caso de que quieras un borde. Éstos son algunos de los bordes básicos:
Border="0" sin borde
Border="1" borde fino
Border="2" borde más grueso
Basta con que escribas border="2" dentro de la etiqueta después de escribir la ubicación de tu imagen de este modo:
<img src="http://www.neopets.com/mypicture.gif" border="2">
De esta forma, tu imagen aparecerá con un borde grueso alrededor.
Para conocer más detalles sobre cómo colocar tu imagen dentro de la página y cómo añadir imágenes de fondo, ve a la siguiente lección...
Colocar la imagen:
también puedes cambiar la posición de la imagen en la página. Las posiciones más habituales son izquierda, derecha y centro. Para que una imagen aparezca centrada, escribe esto antes de la etiqueta de la imagen:
<div align=center>
Todo lo que escribas después de esto aparecerá centrado, de modo que tienes que escribir las etiquetas de la imagen. Cuando hayas cerrado la etiqueta de la imagen y no desees que todo aparezca centrado, basta con que cierres la etiqueta de centrado de la siguiente forma:
</div>
Para alinear algo a la izquierda o a la derecha, se utiliza el mismo código, pero hay que sustituir la palabra "center" (centro) por "left" (izquierda) o "right" (derecha).
Imágenes de fondo:
también puedes colocar una imagen como fondo en lugar de utilizar un color sólido. Esto funciona bien con imágenes sencillas y de colores claros. Le da alegría a la página y se puede leer claramente el texto. Para colocar una imagen como fondo, escribe:
<body background="http://www.neopets.com/mypicture.gif">
De esta forma, tu imagen aparecerá como fondo.
|
Todo aquello que aparece en tu sitio puedes convertirlo en un enlace a otro lugar. Si tu juego favorito de Neopets es Tiroo los dados, puedes crear un enlace de texto o imagen a la página de Tiroo los dados. Puesto que ya sabes cómo insertar imágenes o texto en tu página Web, te resultará muy sencillo convertir éstos en enlaces. En primer lugar, debes tener una URL para realizar el enlace; en este ejemplo, vamos a utilizar la URL de Neopets. Nuestro propósito es que el texto haz clic aquí nos lleve a www.neopets.com, de modo que escribimos:
|
Lo único que aparecerá en la página Web será el texto haz clic aquí. A partir de ahora se puede hacer clic en este elemento. Al hacer clic con el ratón sobre él, accederás a la URL de Neopets. Puedes cambiar el tamaño o el color del texto y ponerlo en negrita o en cursiva, pero es necesario que abras y cierres las etiquetas en los lados del texto. Ejemplo: para que el enlace aparezca en negrita, escribimos:
|
 |
Para poder hacer clic en una imagen, utilizamos el mismo procedimiento, pero en lugar de escribir el texto, ponemos la etiqueta de la imagen. Ejemplo:
<a href="http://www.neopets.com">
<img src="http://www.neopets.com/mypicture.gif"></a>
Aparecerá automáticamente un borde fino alrededor de tu imagen. Para que sea más grueso o para eliminarlo, tienes que usar la etiqueta de borde (ver lección 5 - Insertar imágenes). Al usar esta opción, puedes elegir el grosor del borde que quieres para tu imagen.
Éstos son algunos bordes básicos:
Border="0" sin borde
Border="1" borde fino
Border="2" borde más grueso
Si no quieres ningún borde alrededor de la imagen, basta con que escribas border="0" dentro de la etiqueta después de haber escrito la ubicación de tu imagen de este modo:
<img src="http://www.neopets.com/mypicture.gif" border="0">
|
| Añadir la dirección de correo electrónico y el nombre de usuario |
Si tienes tu propia dirección de correo electrónico, puede que quieras que otras personas puedan ponerse en contacto contigo. Una manera estupenda de hacerlo consiste en incluir tu dirección de correo electrónico en tu sitio Web.
***Advertencia*** - Si incluyes tu dirección de correo electrónico en tu página Web, significa que cualquier persona podrá ponerse en contacto contigo a través del correo electrónico. Hazlo únicamente si estás seguro de querer hacerlo. Si eres menor de 13 años, consúltalo antes con tus padres.
El código es muy similar al utilizado para crear un enlace, pero en lugar de escribir la URL de la página que quieres como enlace, tienes que escribir la dirección de correo electrónico que deseas que aparezca. Por ejemplo, si quieres poner nuestra dirección de correo electrónico: info@neopets.com debes escribir:
<a href="mailto:info@neopets.com">info@neopets.com</a> De esta forma, aparecerá el texto info@neopets.com. Al hacer clic sobre él, aparecerá un mensaje de correo electrónico en blanco dirigido a info@neopets.com (exactamente igual que aquí: info@neopets.com). Además, puedes modificar el tamaño de la fuente, ponerla en negrita o cambiar su color. Para ello, escribe la etiqueta correspondiente en uno de los lados del texto de enlace.
Añadir tu nombre de usuario:
si vas a editar la página de inicio de tu Neopet, hay una forma muy sencilla para que aparezca tu nombre de usuario. Escribe #OWNERLOOKUP en mayúsculas y aparecerá como tu nombre de usuario. Esto sólo lo puedes hacer en la página de inicio de tu Neopet, pero no funcionará en ninguna otra página Web.
|
| La gente añade banners a sus sitios por diferentes motivos. Puede ser una buena forma de promocionar la página de un amigo, puede mejorar tu página Web e incluso proporcionarte NeoPuntos. Neopets cuenta con un programa de recomendaciones del que puedes conocer más detalles en al seccion de enlaces de esta web. Puedes recibir NeoPuntos y objetos por recomendar Neopets a otras personas a través de tu sitio Web. |
 |
Si optas por añadir un banner de Neopets a tu sitio, primero tienes que elegir la imagen que vas a utilizar. ve a la seccion "Banners" para ver qué banners hay disponibles en este momento. Debajo del banner que más te guste, aparecerá un código. Éste tendrá más o menos este aspecto:
<a href='http://www.neopets.com/refer.phtml?username=donna'>
<img src='http://images.neopets.com/creatives/paradise_468x60.gif'></a>
Basta con que copies ese código (resalta el texto y pulsa Ctrl-C) y lo copies en tu página Web o tienda (pulsa Ctrl-V). Ahora ya tienes un banner que te proporcionará NeoPuntos cada vez que alguien se inscriba tras hacer clic en él.
|
Esto es muy fácil de hacer y puede darle un toque muy especial a tu página Web. Hay muchas formas de añadir música. Puede sonar de fondo, sonar una sola vez, de forma continua o bien puedes dejar que la persona que está viendo la página decida qué hacer. En primer lugar tienes que tener un archivo de música almacenado en algún lugar de Internet. Basta con que sustituyas el texto http://images.neopets.com/help/beep.wav por la URL de tu archivo de música.
Cómo crear un reproductor
Puedes crear un pequeño reproductor de música en tu página; de esta forma, la persona que la visite podrá reproducir y detener la música siempre que quiera. El tipo de etiqueta dependerá de si quieres que la gente la vea en Netscape o Internet Explorer (es posible que no funcione con otros exploradores como Mozilla, Opera, etc.). Netscape es compatible con las etiquetas embed e IE es compatible con las etiquetas bgsound. Es mejor incluir las dos, pues de esta forma funcionará siempre.
<embed src="http://images.neopets.com/help/beep.wav" width=200 height=40>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav">
</noembed>
Reproducción continua
Puedes hacer que la música suene de forma continua si añades la etiqueta loop; éstas son ligeramente distintas en Netscape e IE. Si quieres que la música suene desde el momento en que alguien carga la página, escribe autostart=true en el código "embed". El siguiente código reproducirá tu música de forma automática y continua. Nota: a lo mejor no quieres utilizar esta opción en tu tienda, ya que podría resultar molesta para mucha gente
<embed src="http://images.neopets.com/help/beep.wav" width=200 height=40 autostart=true loop=true>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav" loop=infinite>
</noembed>
Música de fondo
Si quieres darle a tu página Web un aspecto más sutil, no hace falta que aparezca el reproductor. Si quieres que los visitantes no lo vean, utiliza la etiqueta hidden=true de este modo:
<embed src="http://images.neopets.com/help/beep.wav" hidden=true autostart=true>
<noembed>
<bgsound src="http://images.neopets.com/help/beep.wav" loop=infinite>
</noembed>
|
Si no encuentras ningún logotipo o banner que te guste, o simplemente quieres tener un diseño exclusivo, verás qué fácil es crear uno. Se aplican las mismas instrucciones si lo que quieres es crear tu propio participante para el concurso de belleza, un dibujo para la galería de arte o cualquier otra imagen. Si estás utilizando un ordenador con Windows, ya tienes instalado un programa de dibujo que se llama Paint. Para abrirlo, haz clic en el botón Inicio y, a continuación, en Programas --> Accesorios --> Paint. Paint no tiene tantos efectos como el programa Adobe Photoshop, pero es muy fácil de usar y casi todos los ordenadores lo incluyen.
Elegir el tamaño del dibujo
Paint se abre automáticamente con un área de trabajo de GRAN tamaño; puedes cambiar el tamaño del lienzo en función de lo que quieras crear. Para cambiar el tamaño del lienzo, haz clic en IMAGEN y, a continuación, en ATRIBUTOS. Se abrirá una ventana. Escribe el tamaño que quieras para el lienzo. A continuación, se incluyen algunos ejemplos de tamaños. Es MUCHO más sencillo si especificas el tamaño de tu dibujo antes de empezar a trabajar, así que piénsatelo bien.
Logos de Asociaciones - 100x100 píxeles
Banners - 120x60 píxeles o 468x60 píxeles
Participantes del Concurso de Belleza - 150x150 píxeles
Participantes en la Galería de Arte - 400x400 píxeles
Empezar a dibujar
Las herramientas son bastante sencillas: el lápiz sirve para dibujar, el cubo de pintura rellena de color las formas, la herramienta del círculo traza un círculo, etc. Puedes cambiar los colores haciendo clic en la paleta que hay en la parte inferior. Si te equivocas, utiliza el borrador o pulsa los botones Ctrl-Z para deshacer el trazo. Si tienes algún problema, haz clic en 'AYUDA' dentro del programa, donde puedes buscar archivos de ayuda hasta encontrar la respuesta a tu pregunta.
Guardar
Guarda la imagen con frecuencia. No hay nada peor que dar sin querer al botón de encendido y perder todo el trabajo después de haberte pasado 2 horas creando una imagen. Para guardar, haz clic en 'ARCHIVO' y después en 'GUARDAR'. A continuación, escribe un nombre de archivo para tu imagen y por último haz clic en 'GUARDAR'.
|
Si deseas colocar la tabla en el centro de la página, basta con que añadas las palabras align=center después de <table. Por ejemplo, <table align=center bgcolor="red">. 