Neopets Meridiano - Guia HTML

Guia HTML

Guía HTML - Introducción

¿Te gustaría poder diseñar tu propia página web? La respuesta es HTML!

Resulta muy fácil de aprender y cualquiera puede hacerlo. No tienes que ser programador y no es necesario que hayas utilizado un ordenador antes. Hemos creado una guía HTML detallada que te enseñará tanto el nivel básico como el nivel avanzado de HTML, que es el que utilizamos en el sitio de Neopets Meridiano

Insertar texto:

Éstas son algunas de las etiquetas más comunes:

<b>	</b>	Esta cambia el texto a negrita
<br>	-	Inserta un salto de línea
<center>	</center>	Esta pone en el centro tu texto
<i>	</i>	Ésta cambia el texto a cursiva
<u>	</u>	Subraya el texto
<marquee>	</marquee>	Esta agrega movimiento a tu texto
<s>	</s>	~~Esta ralla tu texto~~

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>

Neopets Meridiano - Guía HTML

Guía HTML - Texto con movimiento

Una de las cosas que hace tu web más atractiva son los mensajes o imágenes con movimiento, para esto no es necesario usar Flash o programas de diseño como photoshop, simplemente usa estos códigos que harán tus textos e imágenes más atractivos:

<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="30" width="100%">Aquí va tu texto</font></marquee>
Aquí va tu texto
<marquee behavior="alternate">Aquí va tu texto</marquee>
Aquí va tu texto

Neopets Meridiano - Guía HTML

Guía HTML - Colores

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>

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:

Rojo claro	FF0000
Morado	CC00CC
Rosa	FF66FF
Azul claro	CCCCFF
Verde lima	99FF99

Para utilizar el código hexadecimal, escribe:

<font color="FF66FF">texto aquí</font>

Neopets Meridiano - Guía HTML

Guía HTML - Imágenes

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á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)

Cuando unas el código, éste tendrá el siguiente aspecto:

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.

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:

Neopets Meridiano - Guía HTML

Guía HTML - Adornos para las imágenes

Agregar un marco:

<img src="URL" style="border-color:#000066;border-style:dashed;border-width:5;">

Marco con puntos:

<img src="URL" style="border-color:#000066;border-style:dotted;border-width:5;">

Neopets Meridiano - Guía HTML

Guía HTML - Enlaces

Todo aquello que aparece en tu sitio puedes convertirlo en un enlace a otro lugar:

<a href="neopetzmeridiano.es.tl" target="_blank">Neopets Meridiano</a>

Imágenes de enlace:

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="neopetzmeridiano.es.tl">
<img src="https://img.webme.com/pic/n/neopetzmeridiano/botonnm.bmp"></a>

Neopets Meridiano - Guía HTML

Guía HTML - Tablas

Es muy sencillo crear este tipo de tablas para tu web, y puede servirte de gran ayuda sobre todo si quieres tener todos tus contenidos mucho mejor organizados:

<table>
<tr> - Empieza
<td>Celda 1</td>
<td>Celda 2</td>
</tr> - Finaliza
<tr> - Empieza
<td>Celda 3</td>
<td>Celda 4</td>
</tr> - Finaliza
</table>

Textareas:

<textarea>TU TEXTO VA AQUÍ</textarea>

<textarea cols="7" rows="1">TU TEXTO VA AQUI</textarea>

Neopets Meridiano - Guía HTML