manual de html

ENTRANDO A TU PC HTML

Profesor: José Prada A. 2

HTML (HyperText Markup Language)

LENGUAJE DE MARCACIÓN DE HIPERTEXTO es un lenguaje muy sencillo que permite describir

hipertexto, es decir, texto presentado de forma estructurada y agradable,

con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información

relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en

especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal,

enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar

(especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico

determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un

navegador como internet explorer, Firefox entre otros.

Estructura de los documentos de HTML

La estructura básica de un documento HTML queda de la forma siguiente:

<html>

<head>

<title> Título de la página </title>

</head>

<body>

Texto del documento, menciones a gráficos, enlaces, etc.

</body>

</html>

Existen tres caracteres especiales

< Menor que, se usa para indicar el comienzo de un comando HTML.

> Mayor que, se usa para indicar el término de un comando HTML.

& Ampersand, se usa para escribir caracteres especiales (símbolos matemáticos, comerciales, así como el signo menor que y el mayor que entre otros) en un documento.

Para crear una Página Web

1. Abrir el programa block de notas, crear pagina 2. Guardar Página web, Ir a Archivo, guardar como: En la ventana que aparece seleccione

el lugar donde se desea guardar, con el "nombre de pagina.html"

Ejecutar una página web:

1. Cargar el navegador correspondiente 2. Ir a archivo, abrir o ejecutar desde el mismo archivo

Observación: Para ver su código en el block de notas, poner "ver código fuente", dándole un clic derecho en cualquier parte de la pantalla. Al hacer algo en el block de notas, grabar y luego poner actualizar en la Página Web

Comandos



Para escribir comentarios, los cuales son ignorados por el navegador.

<HTML> ... </HTML>

Indica que es un documento HTML, debe encerrar todo el Documento.

<HEAD> ... </HEAD>

Encabezados del Documento. Los siguientes son los parámetros del Comando head.

<title> ... </title>

Indica el Titulo del Documento. Aparece en la ventana del browser.

<BODY attributo1=".." attributo2=".."> ... </BODY>

Contiene el cuerpo del Documento, o el contenido de la Página.

ATRIBUTOS

BACKGROUND="..." Especifica el papel tapiz de la página. un Archivo *.jpg o *.gif.

BGCOLOR="..."Especifica el Color del Fondo del Documento.

Los colores son expresados en formato RGB(Red, Green,Blue), donde cada color tiene un valor desde el 0 (0) hasta el 255 (FF).

Amarillo = #FFFF00 Azul = #0000FF Azul Claro = #00CCFF Blanco = #FFFFFF Gris = #CC9999 Lila = #CC33FF Negro = #000000 Rojo = #FF0000 Verde = #00FF00

Insertar texto

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:

Tamaño de texto 1

Tamaño de texto 2

Tamaño de texto 3

Tamaño de texto 4

Tamaño de texto 5

Tamaño de texto 6

Tamaño de texto 7

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.

Texto más avanzado

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 aparecerí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:

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 >.

Colores de las fuentes

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:

texto aquí

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>. De esta forma, el texto aparecerá de color rosa:

texto aquí

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:

escribe el texto aquí.

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">. Teoría sobre los códigos de colores HTML

Formato de los códigos HTML:

Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan

en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el

número 255 en Decimal.

Significado de los símbolos:

Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan

la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto

número representan la intensidad del verde y el quinto y el sexto representan la intensidad

delazul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar

cualquier color que deseemos de corazón;)

Ejemplos: #FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro: #00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es: #0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es: #FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:



#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo: Aquí tienes un link para mezclar tus colores favoritos

http://adonay.name/log/selector-de-colores.html

Añadir 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á 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>

http://adonay.name/log/selector-de-colores.html



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.

Enlaces

Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro archivo. Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una dirección de correo electrónico o un programa 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: [email protected] debes escribir: <a href="mailto:[email protected]">[email protected]</a> De esta forma, aparecerá el texto [email protected]. Al hacer clic sobre él, aparecerá un mensaje de correo electrónico en blanco dirigido a [email protected] (exactamente igual que aquí: [email protected]). 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.

Añadir música

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.

mailto:[email protected]%3c/a



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>

Crear una imagen

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'.

Algunos comandos libres

<MARQUEE atributo1 atributo2>...< /MARQUEE> (IE) Fija un texto que se desplaza por la pantalla. Atributos: ALIGN="..."-- Especifica el alineaminto del texto. Loa valores posibles son "TOP", "MIDDLE", o "BOTTOM". BEHAVIOR="..."--Indica la forma de presentación "SCROLL" (omisión), "SLIDE", o "ALTERNATE". "SLIDE" hace que el texto se desplaze afuera y adentro , "ALTERNATE" muestra el texto adelante y atras repetidamente. BGCOLOR="..."-- Fija el color de fondo. DIRECTION="..."--Indica la Dirección "LEFT" (omisión) o "RIGHT". HEIGHT="..."-- Fija la altura del texto en Pixels o %. HSPACE="n"--Fija el margen en espacios a la derecha e izquierda del texto. LOOP="n"-- Fija el numero de repeticiones. Un valor de "-1" o "INFINITE" repite indefinidamente. SCROLLAMOUNT="n"-- Fija el Numero de pixel entre cada display. SCROLLDELAY="n"--Indica el tiempo de espera para mostrar cada texto. VSPACE="n"-- Fija el margen superior e inferior del texto. WIDTH="..."-- Fija el ancho del Marquee en pixels o %.

Ejemplos

TEXTO EN MOVIMIENTO DE ARRIBA ABAJO O VICEVERSA

<marquee id="ejemplo" direction="up"> AQUI VA EL TEXTO QUE DESEES </marquee><a href="javascript:void(0);"

onclick="getElementById('ejemplo').direction='down';"> Hacia abajo </a>--- <a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';"> Hacia arriba </a> <APPLET atributo1 atributo2> parametros1 parametros2 ... < /APPLET> Inserta un applet de Java en el documento. Cualquier texto dentro del comando APPLET se mostrará en los browser que no soportan JAVA. Atributos: ALIGN="..."-- Fija el alineamiento del applet, los parametros son "LEFT", "RIGHT", "TOP", "MIDDLE", o "BOTTOM". ALT="..."--Muestra un mensaje cuando el brwoser no puede ejecutar el applet. CODE="..."--Especifica el nombre del applet. CODEBASE="..."--Especifica la dirección de inicio del applet. El directorio donde se encuentra el applet. DOWNLOAD=n--Especifica el orden de descarga de la imagenes. HIGHT="..."--Especifica la altura del applet en pixels o %. HSPACE="n"--Especifica los margenes en espacios fuera del applet en pixels. NAME="..."-- Indica el nombre de un applet (rutina), si hay mas applets en una misma página. VSPACE="n"--Especifica el margen superio e inferior del applet. WIDTH="..."--Fija el ancho del applet en pixel o en %. Parametros: Estos son los parametros especificaos de cada applet, que son pasasdos como argumentos. Se expresan como comandos así <PARAM NAME="..." VALUE="..." > <EMBED atributo1 atributo2>< /EMBED> Inserta un objeto multimedia, como un corto de video o sonido, en la página. En los browser modernos se mantiene por compatibilidad. Atributos: AUTOSTART="..."--Especifica si iniciar la ejecución o No."TRUE" o "FALSE". HIGHT="..."-- Especifica el tamañ en pixels o %. LOOP="..."-- Fija el numero de repeticiones. Los valores son "TRUE" o "FALSE". NAME="..."-- Indica el nombre del Objeto, en caso de haber otros en la página. SRC="..."-- Indica la ubicación del archivo. WIDTH="..."--Especifica el ancho donde se mostrará el objeto. <SCRIPT atributo> ...sentencias script ... < /SCRIPT> Encierra el codigo de programación que se ejecuta en la pagina. Para matener compatibilidad los comandos están marcados como cometarios, () Atributos: LANGUAGE="..."--Especifica el elnguaje usado en el script, como "VBScript" Visual Basic Script o "JavaScript" Java Script. b> SRC="..."-- Indica la ubicación del archivo que contiene un script. Se usa si ud. no quiere tener el codigo de programación en la página.



<NOSCRIPT> ... < /NOSCRIPT> Muestra todo lo que quiera diferente a codigo de programación. Este comando va dentro del comando SCRIPT. Direcciones (Links): <A atributo="...">...< /A> Cuando se usa con el atributo HREF, el texto o la grafica apunta a otro documento o función. Cuando se usa el atributo NAME, el texto o la grafica identifica el nombre del documento. Atributos: HREF="..."--Especifica la URL (ubicación) al documento señalado. NAME="..."--Especifica el nombre del encadenamiento. onClick="-- Especifica un codigo script cunado se hace click con el mouse. onMouseOver="--Activa un codigo script cuando el mouse está sobre el link. REL="..."-- Especifica una relación Directa. REV="..."--Especifica una relación Inversa. TARGET="..."--Especifica la ventana donde se mostrará la página. El contenido puede ser el nombre de un Frame pre-definido o alguno como sigue: Valores: "_blank"--Carga la página en una ventana en blanco. "_parent"--Craga la página en la ventana del documento que lo llamó. "_self"--Carga la página en la misma ventana. (Omisión) "_top"--Carga la página en toda la ventana, sin importar el frame. TITLE="..."--Especifica una leyenda que aparece cuando se ubica sobre el link, pero que aun no se ha seleccionado. Listas (Lists:): <LI atributo> Este comando enumera los parrafos como una lista de palabras usando los siguientes sub-comandos: <DIR>,<MENU>, <OL>, o <UL>. Atributos: TYPE="..." --Especifica el tipo de indicador de la lista. Los valores mas comunes son: DISC, CIRCLE, SQUARE, A, a, I, i, 1. VALUE="..."--Especifica el valor asignado a un item. <DIR>...< /DIR> Convierte el texto encerrado por <LI>, en una lista de directorio. <MENU>...< /MENU> Convierte el texto encerrado por <LI>, en una lista de menus. <OL atributo>...< /OL>



Convierte al texto encerrado por <LI>, en una lista numerada. Atributos: TYPE="..."--Especifica el tipo de numeracion para el indicador. Un tipo de indicador sería: A, a, I, i, 1. START="..."--Especifica el valor inicial de la numeración. <UL atributo>...< /UL> Convierte el texto encerrado por <LI>, en una lista indicada. Atributos: TYPE="..."--Especifica el tipo de indicador para la lista. Los valores comunes son: DISC, CIRCLE, SQUARE. <DL>...< /DL> Crea una lista definida. Donde, <DT> especifica un termino de la lista y <DD> especifica el contenido del termino. Particiones de Ventanas (Frames): <FRAMESET atributo1="..." atributo2="...">...< /FRAMESET> Define una serie de ventanas que forman una página. Los comandos FRAME, y NOFRAMES van dentro de FRAMESET. El comando FRAMESET se usa como el comando BODY. Se puede incluir un comando BODY dentro del comando NOFRAMES para aquellos browser que no soportan frames. Atributos: BORDER="..."--Indica el ancho (en pixels) del borde alrededor del frame.(Netscape) COLS="..."--Crea el frame como columnas y fija el tamaño de cada columna. El ancho se puede expresar en %, pixels, o en tamaño relativo (*). Por ejemplo, Si usted queire 3 frames de igual tamaño en forma de columna use el atributo COL así: COLS=33%,33%,* FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE) FRAMESPACING="..."--Especifica la separación en pixels entre frames. ROWS="..."--Al igual que COLS especifica frames en forma de filas. Por ejemplo, si desea un pequeño frame arriba de la página y uno grande debajo el atributo ROWS sería: ROWS=15%,* SCROLLING="..."--Indica si los frames llevan barra de desplazamiento. Los valores mas comunes son "yes", "no", y "auto". <FRAME atributo1="..." atributo2="..."> Define un frame simple. Atributos: BORDER="..."--Especifica el ancho en pixels del borde alrededor del frame.(Netscape) FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE) MARGINHEIGHT="..."--Especifica los margenes superior e inferior. MARGINWIDTH="..."--Especifica el margen izquierdo y derecho. NAME="..."--Asigna un nombre al frame. NORESIZE--Impide que el usuario cambie el tamaño. SCROLLING="..."--Indica si los frames llevan barra de desplazamiento. Los valores mas comunes son "yes", "no", y "auto".



SRC="..."--Indica el archivo que contiene el frame. <IFRAME atributo1="..." atributo2="...">< /IFRAME> (IE) Define un frame eventual. No necesita el comando FRAMESET. Atributos: ALIGN="..."--Especifica la posicion del texto alrededor del frame. Los valores posibles son TOP, MIDDLE, BOTTOM, LEFT, y RIGHT. FRAMEBORDER="..."--Especifica si se muestra el borde del frame en 3D o No. Los valores comunes son; 0 (sin borde) o 1 (Omisión).(IE) HEIGHT="..."--Especifica la altura del frame eventual. MARGINHEIGHT="..."--Especifica los margenes superior e inferior. MARGINWIDTH="..."--Especifica el margen izquierdo y derecho. NAME="..."--Asigna un nombre al frame. NORESIZE--Impide que el usuario cambie el tamaño. SCROLLING="..."--Indica si los frames llevan barra de desplazamiento. Los valores mas comunes son "yes", "no", y "auto". SRC="..."--Indica el archivo que contiene el frame. WIDTH="..."--Especifica el ancho del frame eventual. <NOFRAMES>...< /NOFRAMES> Se utiliza dentro de FRAMESET, cualquier objeto dentro de este comando se ve solo en browsers que no soportan frames.

TABLAS <TABLE atributo1="..." atributo2="...">...< /TABLE> Crea tablas compuesta por filas y columnas. Atributos: BORDER="..."--Especifica el ancho del borde alrededor de la tabla. Si se fija en 0, no presenta bordes. BACKGROUND="..."--Usa una imagen para el fondo de la tabla.(IE) BGCOLOR="..."--Fija el color de fondo de la tabla. BORDERCOLOR="..."--Fija el color del borde. BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE) BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE) WIDTH="..."--Especifica el ancho de la tabla en la página. CELLSPACING="..."--Especifica los espacios entre las celdas. CELLPADDING="..."--Especifica los espacios entre la celda y el texto. FRAME="..."--Especifica el borde que se debe mostrar.(IE) Tipos Posibles: VOID--No muestra los bordes exteriores. ABOVE--Muestra el borde encima de la tabla. BELOW--Muestra el borde debajo de la tabla. HSIDES--Muestra los bordes superio e inferior de la tabla. LHS--Muestra el borde de la izquierda. RHS--Muestra el borde de la derecha. VSIDES--Muestra el borde derecho e izquierdo. BOX--Muestra todos los bordes de la tabla.



BORDER--Muestra un borde en todos los lados de la tabla. HEIGHT="..."--Especifica la altura de la tabla en la página. RULES="..."--Especifica los bordes internos.(IE) Tipos Posibles: NONE--No muestra los bordes internos. GROUPS--Muestra los bordes como si fueran varias tablas y grupos THEAD, TFOOT, TBODY, y COLGROUP. ROWS--Muestra los bordes entre filas. COLS--Muestra los bordes entre columnas. ALL--Muestra todos los bordes tanto filas como columnas. <CAPTION atributo1="...">...< /CAPTION> Especifica una titulo para la tabla. Atributos: ALIGN="..."--Fija la posición del titulo. los valores usados son:LEFT, RIGHT, BOTTOM, o TOP. <TR atributo1="..." atributo2="...">...< /TR> Especifica los datos en filas de una tabla. Puede encerrar el encabezado y los datos. Atributos: ALIGN="..."--Indica el alineamiento de los datos en la fila. Por ejemplo; LEFT, RIGHT, y CENTER. BGCOLOR="..."--Fija un color de fondo para una fila. BORDERCOLOR="..."--Fija el color del borde de la fila. BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE) BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE) VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE. HEIGHT="..."--Especifica el alto de la celda. <TH atributo1="..." atributo2="...">...< /TH> Convierte una celda en encabezado de la tabla. Atributos: ALIGN="..."--Indica el alineamiento de los datos en la fila. Por ejemplo; LEFT, RIGHT, y CENTER. BGCOLOR="..."--Fija un color de fondo para una fila. BORDERCOLOR="..."--Fija el color del borde de la fila. BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE) BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE) VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE. HEIGHT="..."--Especifica el alto de la celda. NOWRAP--Previene el truncamineto del texto en la celda. ROWSPAN="..."--Especifica el numero de filas a unir. COLSPAN="..."--Especifica el numero de Columnas a unir. WIDTH="..."--Especifica el ancho de la celda. <TD atributo1="..." atributo2="..."> Se usa dentro del comando TR y define los datos en una celda. Se puede usar el cierre del comando.



Atributos: BACKGROUND="..."--Usa una imagen para el fondo de la celda.(IE) BGCOLOR="..."--Fija el color de fondo de la celda. BORDERCOLOR="..."--Fija el color del borde. BORDERCOLORLIGHT="..."--Fija el color claro del borde para el efecto 3D.(IE) BORDERCOLORDARK="..."--Fija el color obscuro del borde para el efecto 3D.(IE) WIDTH="..."--Especifica el ancho de la tabla en la página. HEIGHT="..."--Especifica el alto de la celda. NOWRAP--Previene el truncamineto del texto en la celda. ROWSPAN="..."--Especifica el numero de filas a unir. COLSPAN="..."--Especifica el numero de Columnas a unir. WIDTH="..."--Especifica el ancho de la celda. VALIGN="..."--Fija el alineaminto vertical de los datos en la fila. Los valores son; TOP, MIDDLE, BOTTOM, y BASELINE. ALIGN="..."--Especifica el alineamiento horizontal de la celda. Los parametros son; LEFT, RIGHT, and CENTER. <COLGROUP atributo1="..." atributo2="...">(IE) Especifica las propiedades de una o mas columnas. Este comando va despues del comando TABLE. Atributos: ALIGN="..."--Especifica la posición del texto dentro de la columna. Los parámetros son; CENTER, LEFT, RIGHT, BOTTOM, o TOP. SPAN="..."--Indica las colunas donde se aplica. <COL atributo1="..." atributo2="...">(IE) Se usa con el comando COLGROUP, y especifica la propiedad de una columna. Este comando omite cualquier atributo del comando COLGROUP anterior a el. Atributos: ALIGN="..."--Especifica la posición del texto dentro de la columna. Los parámetros son; CENTER, LEFT, RIGHT, BOTTOM, o TOP. SPAN="..."--Indica las colunas donde se aplica. <TBODY>...< /TBODY>(IE) Encierra el cuerpo de la tabla. Este comando es opcional si se usan los comandos THEAD o TFOOT. Util para separar las filas de la tabla de el encabezado y el pie de tabla. <TFOOT>...< /TFOOT>(IE) Encierra las filas que van a ser usadas como pie de tabla. Se usa despues del comando TBODY. <THEAD>...< /THEAD>(IE) Encierra las filas que serán usadas como encabezado. Se usa antes del comando TBODY. Formularios (Forms): <FORM atributo1="..." atributo2="...">.....< /FORM> Especifica un formulario (Form). Estos se usan para enviar información a un servidor. Atributos: ACTION="..."--Especifica la dirección de la acción de salida del Form. Usualmente es la dirección de un archivo CGI. También se puede especificau na dirección de correo.



METHOD="..."--Indica el metodo usado para enviar la información. Los valores posibles son: POST o GET. Cuando se usa GET, el servido adjunta los argumentos al final de la dirección fijada en ACTION. Cuando se usa POST, La información es enviada como un formato HTTP. TARGET="..."--Especifica la ventana donde se mostrará la información. El target puede ser un frame previamente definido o uno de los valores siguientes: Valores: "_blank"--Muestra el resultado en un página en blanco. "_parent"--Muestra el resultado en la pagina que lo invocó. "_self"--Muestra el resultado en la misma ventana. (por omisión) "_top"--Muestra el resultado en la ventana actual usando todo el espacio. ENCTYPE="..."--En browser futuros. Especifica el tipo de codificación. <INPUT atributo1="..." atributo2="..."> Especifica un control o un area de entrada del formulario, con el cual la información se enviará al servidor. Atributos: ALIGN="..."--Si el tipo es una imagen, especifica el alineamiento del texto alrrededor de la imagen. Por ejemplo: TOP, MIDDLE, BOTTOM, LEFT, o RIGHT. CHECKED--Usar este atributo en una caja de tipo RADIO o CHECKBOX, y será preselecionado cuando se cargue el formulario. MAXLENGTH="..."--Especifica el máximo número de caracteres en la caja de entrada. NAME="..."--Especifica el nombre del contro o la caja de entrada. (Parte de la información) SIZE="..."--Especifica el tamaño del texto que se muestra en la caja de entrada. SRC="..."--si es una imagen, especifica la ubicación de la imagen. VALUE="..."--Especifica el valor que se enviará con el nombre correspondiente de la información. Especifica el texto por omisión (TEXT). Para RESET y SUBMIT, especifica el texto que se mostrará en el boton tipo 3D. TYPE="..."--Especifica el tipo de control. Valores: CHECKBOX--Crea una caja de chequeo (checkbox). Si el usuario la selecciona, Se envía la información correspondiente al servidor. HIDDEN--No se muestra nada, pero la información es enviada de todas maneras. PASSWORD--Crea una linea de entrada tipo texto, la información aparece representada por * (No se permite visualizar). RADIO--Crea una lista de Botones de selección (radio) de los caules solo uno se puede selccionar. Las alternativas pueden tener el mismo nombre, pero pueden tener valores diferentes. RESET--Crea un boton 3D que borra el contenido del formulario. Se puede asignar un nombre diferente a RESET con el atributo VALUE. SUBMIT--Crea un botón 3D que envía el formulario. IMAGE--Al igual que el tipo SUBMIT, puede enviar un formulario inmediatamente cuando el usuario seleccione la imagen. Junto con la información normal, cuando se envía seleccionando la imagen, las coordenadas del punto de selección (en pixels desde el punto superior izquierdo) se envían tambien. La coordenada X se envía como ".x" junto a la coordenada Y ".y" al lado del nombre. TEXT--Crea una caja de entrada. Se puede especificar el tamaño con el atributo SIZE. <SELECT atributo1="..." atributo2="...">< /SELECT>



Crea una lisat desplegable (drop-down). Los elementos de la lista se definen con OPTION dentro del comando SELECT. Atributos: MULTIPLE--Especifica que se pueden seleccionar multiples valores. NAME="..."--Especifica el nombre de la lista. SIZE="..."--Especifica cuantos elementos serán visibles. <OPTION value="...">item Especifica un elemento (Item) en la lista. Cualquier texto puede ser colocado dentro de este parametro. VALUE="..."--Especifica el valor que se retornará. (Parte de la información). SELECTED--Señala al item o elemento pre-seleccionado cuando se cargue la lista. <TEXTAREA atributo1="..." atributo2="...">...< /TEXTAREA> Crea una caja de netrada de varias líneas. Cualquier texto dentro de este comando se muestra como el valor por omisión. Atributos: COLS="..."--Especifica la longitud del texto. ROWS="..."--Especifica el numero de líneas. NAME="..."--Especifica un nombre a la caja de entrada. WRAP="..."--Especifica si el texto se truncará. Los valores posibles son "HARD", "SOFT", o "NONE".

Entidad HTML

Los caracteres especiales como signo de puntuación, letras con tilde o diéresis o símbolos del

lenguaje se deben convertir en entidad HTML para mostrarse en un navegador. La siguiente es

una lista de caracteres españoles y su correspondiente entidad HTML:

Carácter Entidad HTML Carácter Entidad HTML

á á Á Á

é é É É

í í Í Í

ó ó Ó Ó

ú ú Ú Ú

ü ü Ü Ü



ñ ñ Ñ Ñ

¡ ¡ ¿ ¿

Tabla de ASCII estándar, nombres de entidades HTML, ISO 10646, ISO 8879, ISO 8859-1 alfabeto romano numero 1 Soporte para browsers: todos los browsers

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

20

21

22

23

24

25

26

27

28

29

2A

2B

2C

2D

2E

2F

!

"

#

$

%

&

'

(

)

*

+

,

-

.

/

!

"

#

$

%

&

'

(

)

*

+

,

-

.

/

"

&

espacio

signo de cierre de exclamación / admiración

comillas dobles

signo de número

signo de dólar

signo de porcentaje

signo "&" / ampersand

comilla / apóstrofe

paréntesis izquierdo

paréntesis derecho

asterisco

signo de más / adición

coma

signo de menos / sustracción / guíon / raya

punto

barra oblicua - barra de división

ASCII HTML HTML


48

49

50

51

52

53

54

55

56

57

58

59

30

31

32

33

34

35

36

37

38

39

3A

3B

0

1

2

3

4

5

6

7

8

9

:

;

0

1

2

3

4

5

6

7

8

9

:

;

cero

uno

dos

tres

cuatro

cinco

seis

siete

ocho

nueve

dos puntos

punto y coma



60

61

62

63

3C

3D

3E

3F

<

=

>

?

<

=

>

?

<

>

signo de menor que

signo de igual

signo de mayor que

signo de interrogación - cierre

ASCII HTML HTML


64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

40

41

42

43

44

45

46

47

48

49

4A

4B

4C

4D

4E

4F

@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

@

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

símbolo arroba

ASCII HTML HTML


80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

50

51

52

53

54

55

56

57

58

59

5A

5B

5C

5D

5E

5F

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

P

Q

R

S

T

U

V

W

X

Y

Z

[

\

]

^

_

corchete izquierdo

barra inversa

corchete derecho

signo de intercalación - acento circunflejo

signo de subrayado

ASCII HTML HTML


96 60 ` ` acento grave



97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

61

62

63

64

65

66

67

68

69

6A

6B

6C

6D

6E

6F

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

a

b

c

d

e

f

g

h

i

j

k

l

m

n

o

ASCII HTML HTML


112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

70

71

72

73

74

75

76

77

78

79

7A

7B

7C

7D

7E

7F

p

q

r

s

t

u

v

w

x

y

z

{

|

}

~

p

q

r

s

t

u

v

w

x

y

z

{

|

}

~

llave de apertura - izquierda

barra vertical

llave de cierre - derecho

signo de equivalencia / tilde

(no definido en estándar HTML 4)

ASCII HTML HTML


128

129

130

131

132

133

134

135

136

137

80

81

82

83

84

85

86

87

88

89













138

139

140

141

142

143

8A

8B

8C

8D

8E

8F







ASCII HTML HTML


144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

90

91

92

93

94

95

96

97

98

99

9A

9B

9C

9D

9E

9F

















ASCII HTML HTML


160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

A0

A1

A2

A3

A4

A5

A6

A7

A8

A9

AA

AB

AC

AD

AE

AF

¡

¢

£

¤

¥

¦

§

¨

©

ª

«

¬

®

¯

¡

¢

£

¤

¥

¦

§

¨

©

ª

«

¬

®

¯

¡

¢

£

¤

¥

¦

§

¨

©

ª

«

¬

®

¯

espacio sin separación

signo de apertura de exclamación / admiración

signo de centavo

signo de Libra Esterlina

signo de divisa general

signo de yen

barra vertical partida

signo de sección

diéresis - umlaut

signo de derechos de autor - copyright

género feminino - indicador ordinal feminino

comillas anguladas de apertura

signo de no - símbolo lógico

guión débil

signo de marca registrada

macrón - raya alta

ASCII HTML HTML




176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

B0

B1

B2

B3

B4

B5

B6

B7

B8

B9

BA

BB

BC

BD

BE

BF

°

±

²

³

´

µ

¶

·

¸

¹

º

»

¼

½

¾

¿

°

±

²

³

´

µ

¶

·

¸

¹

º

»

¼

½

¾

¿

°

±

²

³

´

µ

¶

·

¸

¹

º

»

¼

½

¾

¿

signo de grado

signo de más o menos

superíndice dos - cuadrado

superíndice tres - cúbico

acento agudo - agudo espaciado

signo de micro

signo de fin de párrafo

punto medio - coma Georgiana

cedilla

superíndice uno

género masculino - indicador ordinal masculino

comillas anguladas de cierre

fracción un cuarto

fracción medio - mitad

fracción tres cuartos

signo de interrogación - apertura

ASCII HTML HTML


192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

C0

C1

C2

C3

C4

C5

C6

C7

C8

C9

CA

CB

CC

CD

CE

CF

À

Á

Â

Ã

Ä

Å

Æ

Ç

È

É

Ê

Ë

Ì

Í

Î

Ï

À

Á

Â

Ã

Ä

Å

Æ

Ç

È

É

Ê

Ë

Ì

Í

Î

Ï

À

Á

Â

Ã

Ä

Å

Æ

Ç

È

É

Ê

Ë

Ì

Í

Î

Ï

A mayúscula con acento grave

A mayúscula con acento agudo

A mayúscula con acento circunflejo

A mayúscula con tilde

A mayúscula con diéresis

A mayúscula con anillo

diptongo AE mayúscula (ligadura)

C cedilla mayúscula

E mayúscula con acento grave

E mayúscula con acento agudo

E mayúscula con acento circunflejo

E mayúscula con diéresis

I mayúscula con acento grave

I mayúscula con acento agudo

I mayúscula con acento circunflejo

I mayúscula con diéresis

ASCII HTML HTML


208

209

210

211

212

213

214

215

D0

D1

D2

D3

D4

D5

D6

D7

Ð

Ñ

Ò

Ó

Ô

Õ

Ö

×

Ð

Ñ

Ò

Ó

Ô

Õ

Ö

×

Ð

Ñ

Ò

Ó

Ô

Õ

Ö

×

ETH islandesa mayúscula

N mayúscula con tilde - eñe mayúscula

O mayúscula con acento grave

O mayúscula con acento agudo

O mayúscula con acento circunflejo

O mayúscula con tilde

O mayúscula con diéresis

signo de multiplicación



216

217

218

219

220

221

222

223

D8

D9

DA

DB

DC

DD

DE

DF

Ø

Ù

Ú

Û

Ü

Ý

Þ

ß

Ø

Ù

Ú

Û

Ü

Ý

Þ

ß

Ø

Ù

Ú

Û

Ü

Ý

Þ

ß

O mayúscula with slash

U mayúscula con acento grave

U mayúscula con acento agudo

U mayúscula con acento circunflejo

U mayúscula con diéresis

Y mayúscula con acento agudo

THORN islandesa mayúscula

s minúscula (alemán) - Beta minúscula

ASCII HTML HTML


224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

E0

E1

E2

E3

E4

E5

E6

E7

E8

E9

EA

EB

EC

ED

EE

EF

à

á

â

ã

ä

å

æ

ç

è

é

ê

ë

ì

í

î

ï

à

á

â

ã

ä

å

æ

ç

è

é

ê

ë

ì

í

î

ï

à

á

â

ã

ä

å

æ

ç

è

é

ê

ë

ì

í

î

ï

a minúscula con acento grave

a minúscula con acento agudo

a minúscula con acento circunflejo

a minúscula con tilde

a minúscula con diéresis

a minúscula con anillo

diptongo ae minúscula (ligadura)

c cedilla minúscula

e minúscula con acento grave

e minúscula con acento agudo

e minúscula con acento circunflejo

e minúscula con diéresis

i minúscula con acento grave

i minúscula con acento agudo

i minúscula con acento circunflejo

i minúscula con diéresis

ASCII HTML HTML


240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

F0

F1

F2

F3

F4

F5

F6

F7

F8

F9

FA

FB

FC

FD

FE

FF

ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

ú

û

ü

ý

þ

ÿ

ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

ú

û

ü

ý

þ

ÿ

ð

ñ

ò

ó

ô

õ

ö

÷

ø

ù

ú

û

ü

ý

þ

ÿ

eth islandesa minúscula

eñe minúscula - n minúscula con tilde

o minúscula con acento grave

o minúscula con acento agudo

o minúscula con acento circunflejo

o minúscula con tilde

o minúscula con diéresis

signo de división

o barrada minúscula

u minúscula con acento grave

u minúscula con acento agudo

u minúscula con acento circunflejo

u minúscula con diéresis

y minúscula con acento agudo

thorn islandesa minúscula

y minúscula con diéresis



HTML 4.01, ISO 10646, ISO 8879, alfabeto romano extendido A y B, Soporte para browsers: Internet Explorer > 4, Netscape > 4

HTML HTML


338

339

352

353

376

402

152

153

160

161

178

192

Œ

œ

Š

š

Ÿ

ƒ

Œ

œ

Š

š

Ÿ

ƒ

OE mayúscula (ligadura)

oe minúscula (ligadura)

S mayúscula con caron

s minúscula con caron - acento hacek

Y mayúscula con diéresis

f minúscula itálica - signo de función

HTML HTML


8211

8212

8216

8217

8218

8220

8221

8222

8224

8225

8226

8230

8240

8364

8482

2013

2014

2018

2019

201A

201C

201D

201E

2020

2021

2022

2026

2030

20AC

2122

Ŕ

ŕ

Ř

ř

‚

Ŗ

ŗ

„

†

‡

•

…

‰

€

™

–

—

‘

’

‚

“

”

„

†

‡

•

…

‰

€

™

€

raya corta

raya larga

comilla izquierda - citación

comilla derecha - citación

comilla de citación - baja

comillas de citación - arriba izquierda

comillas de citación - arriba derecha

comillas de citación - abajo

cruz

doble cruz

viñeta - bullet

puntos suspensivos

signo de pro mil

signo de euro

signo de marca registrada - trade mark

Trucos para tu Web

Crear un Título que cambia de colores:

Con este código podemos crear por ejemplo el título para nuestra Web o una de nuestras secciones.

 <script> mesk=new Array();mesk[10]="A";mesk[11]="B";mesk[12]="C";mesk[13]="D";mesk[14]="E";mesk[15]="F";A=10;B=11;C=12;D=13;E=14;F=15;let="ABCDEF";function mes(num){if(let.indexOf(num) != -1){return eval(num)};else{if(num < 10){return eval(num)};else{return mesk[num]}}};

function color(begin,einde,stappen,stap){ hh1=(mes(begin.charAt(0))*16)+mes(begin.charAt(1)); hh2=(mes(begin.charAt(2))*16)+mes(begin.charAt(3)); hh3=(mes(begin.charAt(4))*16)+mes(begin.charAt(5)); pp1=(mes(einde.charAt(0))*16)+mes(einde.charAt(1)); pp2=(mes(einde.charAt(2))*16)+mes(einde.charAt(3));

pp3=(mes(einde.charAt(4))*16)+mes(einde.charAt(5)); if(hh1 < pp1){ff1=hh1+Math.floor((pp1-hh1)/stappen*stap); ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1-(Math.floor(ff1/16)*16))+"\'");} ;else{ff1=hh1-Math.floor((hh1-pp1)/stappen*stap);

ff1=eval("\'"+mes(Math.floor(ff1/16))+"\'")+eval("\'"+mes(ff1-(Math.floor(ff1/16)*16))+"\'");} if(hh2 < pp2){ff2=hh2+Math.floor((pp2-hh2)/stappen*stap); ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2-(Math.floor(ff2/16)*16))+"\'");}

;else{ff2=hh2-Math.floor((hh2-pp2)/stappen*stap); ff2=eval("\'"+mes(Math.floor(ff2/16))+"\'")+eval("\'"+mes(ff2-(Math.floor(ff2/16)*16))+"\'");} if(hh3 < pp3){ff3=hh3+Math.floor((pp3-hh3)/stappen*stap); ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3-(Math.floor(ff3/16)*16))+"\'");}

;else{ff3=hh3-Math.floor((hh3-pp3)/stappen*stap); ff3=eval("\'"+mes(Math.floor(ff3/16))+"\'")+eval("\'"+mes(ff3-(Math.floor(ff3/16)*16))+"\'");} ;return ff1+ff2+ff3}

bum=0;bum2=0;txt=new Array();txt[0]="";function lightf(){ for(i=0;i != Math.floor(message.length/2);i++){txt[i]=color(lightcolor1,lightcolor2,Math.floor(message.length/2),i)}; for(i=Math.floor(message.length/2);i != message.length;i++){txt[i]=color(lightcolor2,lightcolor1,Math.floor(mess

age.length/2),(i-Math.floor(message.length/2)))}; lightf1()} function

lightf1(){txt[message.length+1]="";bum2=message.length-bum;for(i=0;i != message.length;i++){if(i+bum < message.length){txt[message.length+1]=txt[message.length+1]+"<font color='#"+txt[(i+bum)]+"'>"+message.charAt(i)+"</font>"};else{txt[m

essage.length+1]=txt[message.length+1]+"<font color='#"+txt[i-bum2]+"'>"+message.charAt(i)+"</font>" }};if(bum != message.length){bum++;};else{bum=0};light.innerHTML=txt[message.length+1];setTimeout("lightf1()",50)} </script> </head> <body bgcolor="#FFFFFF" background="globulos.jpg">  <center><h1><div id="light"></div></h1> <script> lightcolor1="FF0000" // color

lightcolor2="33CC66" // color message="Título que cambia de colores" // introduce el texto lightf() </script> </center> 

nsertar un sonido o música de fondo:

Si quieren que los visitantes escuchen una canción mientras visitan la Web, o simplemente recibirlos con una melodía estilo presentación, este es el código que estabas buscando. Solo tenés que guardar el sonido en el directorio raíz de tu servidor e insertar el siguiente código html:

<BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">

Se recomienda usar sonidos en formato "midi" que son los de menor peso.

Crear un link para download:

Si queremos poner archivos para que los visitantes los puedan descargar a sus computadoras, solo debemos subir ese archivo a nuestro servidor e insertar en nuestra Web el siguiente código HTML:

<a href="ejemplo.exe">Descripción del enlace </a>

No existe un comando que inicie la descarga. Lo que sucede es que, siempre que aparece un tipo de archivo no reconocido por el navegador, este comienza a



descargarlo automáticamente. Ejemplo: Si el navegador no logra abrir un archivo "zip" (compactado), inicia la descarga automáticamente.

Efecto nieve con cualquier imagen:

Con este truco podés hacer que caigan por la pantalla varias veces la misma imagen con un efecto estilo nieve.

Puedes cambiar la imagen reemplazando por una tuya alojada en el servidor poniendo su nombre donde está en rojo.

<script>

var no = 5; // snow number var speed = 15; // smaller number moves the snow faster var snowflake = "snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 400, doc_height = 500; if (ns4up) {

doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = 500; doc_height = 500; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables

xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers

if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");

Recomendar Pagina:

Con este código podemos hacer que si a un visitante le gustó nuestra Web, la recomiende a un amigo escribiendo su dirección de correo electrónico en la casilla, al hacer click en "Recomendar esta Web" se envía un mensaje de correo con el asunto "Pienso que te puede interesar esta página..." y en el cuerpo del mensaje aparece la dirección completa donde se encuentra el código y el título de la misma.

<form name="eMailer"> ENVÍA ESTA PÁGINA A UN AMIGO

<br> Indica su e-mail: <br> <input type="text" name="address" size="25"> <br> <input type="button" value="Recomendá esta Web!" onClick="mailThisUrl();"> </form> <script language="JavaScript1.2"> var good; function checkEmailAddress(field) { // the following expression must be all on one line... var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|

(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi); if (goodEmail){ good = true } else { alert('Por favor introduce un e-mail valido') field.focus() field.select() good = false } } u = window.location; m = "Pienso que te puede interesar esta página..."; function mailThisUrl(){ good = false checkEmailAddress(document.eMailer.address) if (good){ // the following expression must be all on one line... window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;

} } </script>

Subrayar un Link al pasar el mouse:

Con este código podemos lograr ese tan conocido efecto que al pasar el mouse sobre un link, este se subraye. Podemos hacer que tenga un color antes de visitar el link, y que tenga otro una vez visitado.

<STYLE type="text/css"> <!--

A:link {COLOR: red; TEXT-DECORATION: none}

A:visited {COLOR: gray; TEXT-DECORATION: none} A:active {TEXT-DECORATION: none} A:hover {COLOR: blue; TEXT-DECORATION: underline} --> </STYLE>

</p> <p><a href="l1.htm">El texto que quieras.</a><br> <a href="l2.htm">otro texto.</a><br> <a href="l3.htm">Otro texto.</a><br> </p>

Transformar el cursor en una mira:

Transformá la clásica flechita de Windows en una mira de disparo.

<style type="text/css">  </style>

Comentario sobre un link en la barra de estado:

Al pasar el mouse sobre el link deseado, veremos en la barra de estado un comentario sobre éste. Por ejemplo posicionen el mouse sobre Pauluk

Computación y vean en la barra de estado. (para verlo bien en ésta página pasen el mouse varias veces, ya que hay otro código parecido que lo obstruye).

<a href="http://www.CheNico.com" onmouseout="window.status=''" onmouseover="window.status='Acá aparece el mensaje que quieras';return true"> Pauluk Computación</a>

Establecer una página como inicio:

Este código html te sirve para crear un link para que el visitante pueda hacer que tu página sea la de inicio de su computadora. Con solo hacer clic sobre el link

creado, tu página se iniciará automáticamente cada vez que esa persona se conecte a Internet.

<A class=chlnk style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #004080; FONT-FAMILY: Verdana" onclick= "this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.CheNico.com');"> <FONT face=Arial color=#000000 size=-2><U> Establecer como página de inicio</U></FONT></A>

Crear un Formulario o Libro de Visitas:

http://www.suweb.net/pauluk

http://www.suweb.net/pauluk



Con este código podemos crear un formulario para que complete el visitante. O también un libro de visitas, luego que el visitante apriete el botón "enviar", los datos serán enviados a tu casilla de correo.

<H2>Libro de visitas de www.CheNico.com</H2> <FORM ACTION="mailto:[email protected]" METHOD="post"> <TABLE> <TD ALIGN=RIGHT>Nombre:</TD> <TD><INPUT type="text" size=36 name="nombre"></TD> <TR><TD ALIGN=RIGHT>Direccion E-mail:</TD> <TD><INPUT type="text" size=36 name="direccion"></TD> <TR><TD ALIGN=RIGHT>como llegaste hasta esta pagina?</TD> <TD><INPUT type="text" size=36 name="procedencia"></TD> <TR><TD ALIGN=RIGHT>Tus comentatios:</TD> <TD><TEXTAREA rows=5 cols=30

name="comentarios"></TEXTAREA></TD> </TABLE> <INPUT type="reset" value="Borrar todo"> <INPUT type="submit" value="Enviar"> </FORM>

Enviar un e-mail con Asunto y Mensaje:

Con este truco podés hacer que al hacer clic sobre una palabra, se abra el Outlook

para enviar un mensaje con tu dirección, el asunto que quieras y el texto que quieras. Por ejemplo: Hacé clic acá para mandarme un mensaje

<a href="mailto:[email protected]?subject=Prueba.&body=Estoy probando el truco...">Hacé clic acá para mandarme un mensaje</a>

Abrir un Link en una Ventana Nueva:

Cuando tenemos Links en nuestras páginas y alguien hace clic sobre ellos, automáticamente se abre esa dirección en nuestra ventana. Con este truco podemos hacer que al hacer clic sobre un determinado Link, esta dirección se abra

en una ventana nueva, quedando la nuestra también abierta:

<a href="http://www.CheNico.com" target="_blank">Pauluk Computación</a>

Texto que sigue al mouse:

Hacé que un texto cualquiera siga al mouse del visitante en tu página. Es un efecto fabuloso y fácil de incluir en las páginas. Incluye el siguiente código en tu página HTML:

mailto:[email protected]?subject=Prueba.&body=Estoy%20probando%20el%20truco...



} } var timer=setTimeout("animar_cursor()",30) }

</script> <script Language=JavaScript> for (i=0;i<=texto.length-1;i++) { document.write("<span id='span"+i+"' class='animado'>") document.write(texto[i]) document.write("</span>") }

if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = seguir;

animar_cursor() </script>

manual de html

Documents