HTML

Page 1

ENTRANDO A TU PC

HTML

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

Profesor: José Prada A.

2

ENTRANDO A TU PC

HTML

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) Profesor: José Prada A.

3

ENTRANDO A TU PC

HTML

<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 Profesor: José Prada A.

4

ENTRANDO A TU PC

HTML

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. __________________________________________ Profesor: José Prada A.

5

ENTRANDO A TU PC

HTML

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. Profesor: José Prada A.

6

ENTRANDO A TU PC

HTML

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: Profesor: José Prada A.

7

ENTRANDO A TU PC

HTML

#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> Profesor: José Prada A.

8

ENTRANDO A TU PC

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 Profesor: José Prada A.

9

ENTRANDO A TU PC

HTML

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.

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. Profesor: José Prada A.

10

ENTRANDO A TU PC

HTML

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 Profesor: José Prada A.

11

ENTRANDO A TU PC

HTML

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);" Profesor: José Prada A.

12

ENTRANDO A TU PC

HTML

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, (<!-- comandos script... -->) 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. Profesor: José Prada A.

13

ENTRANDO A TU PC

HTML

<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 subcomandos: <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> Profesor: José Prada A.

14

ENTRANDO A TU PC

HTML

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". Profesor: José Prada A.

15

ENTRANDO A TU PC

HTML

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. Profesor: José Prada A.

16

ENTRANDO A TU PC

HTML

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. Profesor: José Prada A.

17

ENTRANDO A TU PC

HTML

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. Profesor: José Prada A.

18

ENTRANDO A TU PC

HTML

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> Profesor: José Prada A.

19

ENTRANDO A TU PC

HTML

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

á

á

Á

Á

é

é

É

É

í

í

Í

Í

ó

ó

Ó

Ó

ú

ú

Ú

Ú

ü

ü

Ü

Ü

Profesor: José Prada A.

20

ENTRANDO A TU PC

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 Dec Hex 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

ASCII Dec Hex 48 49 50 51 52 53 54 55 56 57 58 59

30 31 32 33 34 35 36 37 38 39 3A 3B

Símbolo ! " # $ % & ' ( ) * + , . /

Símbolo 0 1 2 3 4 5 6 7 8 9 : ;

HTML Numero   ! " # $ % & ' ( ) * + , - . / HTML Numero 0 1 2 3 4 5 6 7 8 9 : &#59;

Profesor: José Prada A.

HTML Nombre

"

&

HTML Nombre

Descripción 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

Descripción cero uno dos tres cuatro cinco seis siete ocho nueve dos puntos punto y coma

21

ENTRANDO A TU PC

60 61 62 63

3C 3D 3E 3F

ASCII Dec Hex 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

ASCII Dec Hex 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

ASCII Dec Hex 96

60

< = > ?

Símbolo @ A B C D E F G H I J K L M N O

Símbolo P Q R S T U V W X Y Z [ \ ] ^ _

Símbolo `

HTML

< = > ?

<

HTML Numero

HTML Nombre

>

@ A B C D E F G H I J K L M N O HTML Numero

`

Profesor: José Prada A.

Descripción símbolo arroba

HTML Nombre

P Q R S T U V W X Y Z [ \ ] ^ _ HTML Numero

signo de menor que signo de igual signo de mayor que signo de interrogación - cierre

Descripción

corchete izquierdo barra inversa corchete derecho signo de intercalación - acento circunflejo signo de subrayado HTML Nombre

Descripción acento grave

22

ENTRANDO A TU PC

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

ASCII Dec Hex 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

ASCII Dec Hex 128 129 130 131 132 133 134 135 136 137

HTML

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

HTML Numero

p q r s t u v w x y z { | } ~

p q r s t u v w x y z { | } ~

Símbolo

HTML Numero

80 81 82 83 84 85 86 87 88 89 Profesor: José Prada A.

HTML Nombre

Descripción

llave de apertura - izquierda barra vertical llave de cierre - derecho signo de equivalencia / tilde (no definido en estándar HTML 4) HTML Nombre

Descripción (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) 23

ENTRANDO A TU PC

138 139 140 141 142 143

8A 8B 8C 8D 8E 8F

ASCII Dec Hex 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159

(no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4)

Símbolo

HTML Numero

HTML Nombre

90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F

ASCII Dec Hex 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

HTML

A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF

ASCII Dec Hex

Descripción (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4) (no definido en estándar HTML 4)

HTML Numero

HTML Nombre

Descripción

® ¯

  ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯

  ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯

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

Símbolo

HTML Numero

HTML Nombre

Descripción

Símbolo ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬

Profesor: José Prada A.

24

ENTRANDO A TU PC

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

ASCII Dec Hex 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

ASCII Dec Hex 208 209 210 211 212 213 214 215

D0 D1 D2 D3 D4 D5 D6 D7

HTML

° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿

° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿

° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿

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

Símbolo

HTML Numero

HTML Nombre

Descripción

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï

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

Símbolo

HTML Numero

HTML Nombre

Descripción

Ð Ñ Ò Ó Ô Õ Ö ×

Ð Ñ Ò Ó Ô Õ Ö ×

Ð Ñ Ò Ó Ô Õ Ö ×

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

Profesor: José Prada A.

25

ENTRANDO A TU PC

216 217 218 219 220 221 222 223

D8 D9 DA DB DC DD DE DF

ASCII Dec Hex 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

ASCII Dec Hex 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

HTML

Ø Ù Ú Û Ü Ý Þ ß

Ø Ù Ú Û Ü Ý Þ ß

Ø Ù Ú Û Ü Ý Þ ß

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

Símbolo

HTML Numero

HTML Nombre

Descripción

à á â ã ä å æ ç è é ê ë ì í î ï

à á â ã ä å æ ç è é ê ë ì í î ï

à á â ã ä å æ ç è é ê ë ì í î ï

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

Símbolo

HTML Numero

HTML Nombre

Descripción

ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

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

Profesor: José Prada A.

26

ENTRANDO A TU PC

HTML

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

Dec

Hex

Símbolo

HTML Numero

338 339 352 353 376 402

152 153 160 161 178 192

Œ œ Š š Ÿ ƒ

Œ œ Š š Ÿ ƒ

Símbolo

HTML Numero

Ŕ ŕ Ř ř ‚ Ŗ ŗ „ † ‡ • … ‰ € ™

– — ‘ ’ ‚ “ ” „ † ‡ • … ‰ € ™

Dec

Hex

8211 2013 8212 2014 8216 2018 8217 2019 8218 201A 8220 201C 8221 201D 8222 201E 8224 2020 8225 2021 8226 2022 8230 2026 8240 2030 8364 20AC 8482 2122

Profesor: José Prada A.

HTML Nombre

Descripción 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 Nombre

€

Descripción 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

27

ENTRANDO A TU PC

HTML

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. <!-- inicio de head--> <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,M ath.floor(message.length/2),i)}; for(i=Math.floor(message.length/2);i != message.length;i++){txt[i]=color(lightcolor2,lightcolor1,Math.floor(mess

Profesor: José Prada A.

28

ENTRANDO A TU PC

HTML

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[ibum2]+"'>"+message.charAt(i)+"</font>" }};if(bum != message.length){bum++;};else{bum=0};light.innerHTML=txt[message.le ngth+1];setTimeout("lightf1()",50)} </script> </head> <body bgcolor="#FFFFFF" background="globulos.jpg"> <!--inicio del body --> <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> <!--fin del body -->

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

Profesor: José Prada A.

29

ENTRANDO A TU PC

HTML

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=\"");

Profesor: José Prada A.

30

ENTRANDO A TU PC

HTML

document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } </script>

Profesor: JosĂŠ Prada A.

31

ENTRANDO A TU PC

HTML

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="+d ocument.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}

Profesor: José Prada A.

32

ENTRANDO A TU PC

HTML

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"> <!-body { cursor: crosshair} --> </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: Profesor: José Prada A.

33

ENTRANDO A TU PC

HTML

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:tunombre@tuservidor.com" 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:webmaster@pauluk.8k.com?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:

Profesor: José Prada A.

34

ENTRANDO A TU PC

HTML

<style> .animado {position:absolute;visibility:visible;top:-50px;fontsize:10pt;font-family:Arial;font-weight:bold;color:black;} </style> <script language=JavaScript> var x,y var tempo=10 var espera=0 var texto="www.CheNico.com" texto=texto.split("") var xpos=new Array() for (i=0;i<=texto.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=texto.length-1;i++) { ypos[i]=-50 } function seguir(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY espera=1 } function animar_cursor() { if (espera==1 && document.all) { for (i=texto.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+tempo ypos[i]=ypos[i-1] } xpos[0]=x+tempo ypos[0]=y for (i=0; i<texto.length-1; i++) { var camada = eval("span"+(i)+".style") camada.posLeft=xpos[i] camada.posTop=ypos[i] } } else if (espera==1 && document.layers) { for (i=texto.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+tempo ypos[i]=ypos[i-1] } xpos[0]=x+tempo ypos[0]=y for (i=0; i<texto.length-1; i++) { var camada = eval("document.span"+i) camada.left=xpos[i] camada.top=ypos[i]

Profesor: JosĂŠ Prada A.

35

ENTRANDO A TU PC

HTML

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

Profesor: JosĂŠ Prada A.

36

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.