Bienvenido a Tecnohackers

Tecnohackers » Programacion » Programacion Webmaster (Moderador: Zentraedi)
 » 

Guia Detallada de HTML, Aprende Este Lenguaje Desde 0



Autor Tema: Guia Detallada de HTML, Aprende Este Lenguaje Desde 0  (Leído 2057 veces)

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
« en: Julio 19, 2009, 07:59:35 am »
Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
 
 
Contenido
 
1.- Elementos del lenguaje HTML
 
2.- Estructura de un documento HTML
 
Marca de inicio y fin
Cabecera , , <META>, <BASE> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Cuerpo < BODY> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Comentarios <!-- comentario --> </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>3.- Separadores de bloques de texto</strong></span><br /> <br /><strong><span style="color: yellow;" class="bbc_color">Párrafos <P> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Saltos de línea <BR> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Bloques tabulados <BLOCKQUOTE> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Línea horizontal <HR> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Divisiones <DIV> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Texto prefomateado <PRE> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Direcciones <ADDRESS> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Centrado de bloques <CENTER> </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>4.- Tipos de letras</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Cabeceras <Hn> </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Tamaño, color y tipo de letra <FONT> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Tamaño por defecto de la letra <BASEFONT> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Estilos de caracteres</span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>5.- Colores</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Texto de colores <FONT> </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Colores del entorno (fondo, texto y enlaces) <BODY> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Tabla de códigos de colores </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>6.- Hiperenlaces</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Explicaciones sobre los hiperenlaces </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Definición de ancla <A> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Ancla de partida El atributo HREF </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Ancla de llegada El atributo NAME </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Apertura de una nueva ventana El atributo TARGET </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Enlaces a puntos internos a un documento </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Aplicación a notas al pie de página </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Aclaraciones sobre los enlaces </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Servicios de Internet (otros URL) [/li]<br />[/list]</span></strong><br /><span style="color: yellow;" class="bbc_color"><strong>7.- Listas</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Introducción </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Listas sin orden <UL> <LI> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Listas ordenadas <OL> <LI> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Listas de directorio <DIR> <LI> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Listas de menu <MENU> <LI> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Listas de definición <DL> <DT> <DD> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Anidamiento de listas (ejemplos) </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Ejemplo de listas de definición </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>8.- Tablas</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Definición de la tabla <TABLE> </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Marca de comienzo de una nueva fila <TR> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Marca de comienzo de una nueva celda <TD> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Celdas con texto de cabecera <TH> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Tablas con título <CAPTION> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Pequeño tutorial de tablas </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>9.- Frames</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Introducción a los frames </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Definición de un bloque de frames <FRAMESET> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Definición de cada frame <FRAME> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Mensaje para browsers sin frames <NOFRAMES> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Enlaces entre frames El atributo TARGET </span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>10.- Formularios</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Introducción </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Atributos comunes </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Marca de comienzo y fin <FORM> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Campos de entrada de texto y botones <INPUT> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Listas de selección <SELECT> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Ventanas de texto con barras de desplazamiento <TEXTAREA></span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>11.- Imágenes</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>Introducción </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Inserción de imágenes <IMG> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Alineación de imágenes El atributo ALIGN </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Extensiones del Netscape para la alineación de imágenes </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Imágenes como fondo de página <BODY> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Imágenes como marcas de una lista <IMG> <DL> </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Animaciones </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">Imagenes y Enlaces</span></strong><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>12.- Simbolos</strong></span><br /> <br /><span style="color: yellow;" class="bbc_color"><strong>¿Por qué hay que usar códigos? </strong></span><br /> <br /> <br /> <br /> <br /><span style="font-size: 1.35em;" class="bbc_size"><span style="color: red;" class="bbc_color"><strong>Fuente de esta excelente y completisima guia: carlmycol en Portal Hacker</strong></span></span></div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_4846"> « <em>Última modificación: Julio 19, 2009, 10:28:55 am por zolo</em> » </div> <div class="smalltext reportlinks"><div style="float: left;"><g:plusone></g:plusone></div> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/ip.gif" alt="" /> En línea </div> <div class="signature" id="msg_4846_signature"><div align="center"><img src="http://www.dmtinc.cl/imagenes/dL360.gif" alt="" class="bbc_img" /></div></div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg4848"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/useroff.gif" alt="Desconectado" /> <a href="http://www.tecnohackers.net/index.php?action=profile;u=3" title="Ver perfil de SAT">SAT</a> </h4> <ul class="reset smalltext" id="msg_4848_extra_info"> <li class="membergroup">Administrator</li> <li class="postgroup">Gran Experto</li> <li class="stars"><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /></li> <li class="avatar"> <a href="http://www.tecnohackers.net/index.php?action=profile;u=3"> <img class="avatar" src="http://www.tecnohackers.net/index.php?action=dlattach;attach=11;type=avatar" alt="" /> </a> </li> <li class="postcount">Mensajes: 4889</li> <li class="profile"> <ul> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/post/xx.gif" alt="" /> </div> <h5 id="subject_4848"> <a href="http://www.tecnohackers.net/index.php?topic=3111.msg4848#msg4848" rel="nofollow">Elementos del lenguaje HTML</a> </h5> <div class="smalltext">« <strong>Respuesta #1 en:</strong> Julio 19, 2009, 08:29:02 am »</div> <div id="msg_4848_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_4848"><span style="font-size: 1.45em;" class="bbc_size"><span style="color: darkorange;" class="bbc_color"><strong>1.- Elementos del lenguaje HTML</strong></span></span><br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>A las instrucciones que forman el lenguaje HTML las denominaremos elementos. Se distinguen dos tipos de elementos:</strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><span class="bbc_u"><em>Elementos llenos:</em></span></strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Estos elementos se forman mediante una marca de inicio y otra de final. En HTML las marcas se demilitan con los signos < (inferior a) y > (superior a). La marca de fin es idéntica a la inicial pero con el añadido de la barra inclinada, /, justo antes del nombre de la misma. Un texto marcado tendrá por tanto este aspecto: </strong></span></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><em>...texto normal <marca> texto afectado por la marca </marca> resto del texto...</em> </strong></span></div> <br /> <br /><div style="text-align: left;"><strong><span style="color: yellow;" class="bbc_color">Por ejemplo, para resaltar un texto en negrita, se emplea la marca <B> de la siguiente forma: </span></strong></div> <br /> <br /><div style="text-align: left;"><em><span style="color: yellow;" class="bbc_color"><strong>...texto normal <B> texto en negrita </B> resto del texto... </strong></span></em></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Si en este ejemplo nos hubiesemos olvidado de la marca de final, el resto de la página estaría también en negrita.</strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><span class="bbc_u"><em>Elementos vacíos:</em></span></strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Estos elementos no requieren de la marca final, ya que normalmente no producen un efecto sobre el texto en sí, sino que definen separadores. </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Por ejemplo el elemento <HR> que sirve para mostrar una línea horizontal en la pantalla, se escribirá: </span></strong></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><HR></strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><span class="bbc_u"><em>Elementos con argumentos:</em></span></strong></span></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Algunos elementos tienen argumentos, los cuales son denominados atributos. Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es alfanumérico: </strong></span></div> <br /> <br /><div style="text-align: left;"><em><span style="color: yellow;" class="bbc_color"><strong><marca atributo1 atributo2=numerico atributo3="alfanumetrico"> </strong></span></em></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong><span class="bbc_u"><em>Ejemplos:</em></span></strong></span></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Código:</strong></span><br /><span style="color: yellow;" class="bbc_color"><strong><HR NOSHADE></strong></span><br /><strong><span style="color: yellow;" class="bbc_color"><TABLE WIDTH=300> ... </TABLE></span></strong><br /><strong><span style="color: yellow;" class="bbc_color"><A HREF="/home/default.html"> ... </A></span></strong></div> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Si se quieren utilizar caracteres como < o > en el texto normal, habrá que acudir a un artificio para que el browser no intente interpretarlos como marca. Estos caracteres así como otros símbolos utilizados en el código HTML se reemplazarán por los siguientes grupos de caracteres: </strong></span></div> <br /><br /><ul class="bbc_list"><li type="disc"><span style="color: yellow;" class="bbc_color"><strong>el caracter < será reemplazado por < </strong></span><br /></li><li type="disc"><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>el caracter > será reemplazado por ></strong></span></div></li></ul><strong><span style="color: #ff0000;" class="bbc_color">Fuente: carlmycol en Portal Hacker</span></strong></div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_4848"> « <em>Última modificación: Julio 19, 2009, 10:31:12 am por zolo</em> » </div> <div class="smalltext reportlinks"> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/ip.gif" alt="" /> En línea </div> <div class="signature" id="msg_4848_signature"><div align="center"><img src="http://www.dmtinc.cl/imagenes/dL360.gif" alt="" class="bbc_img" /></div></div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg4849"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/useroff.gif" alt="Desconectado" /> <a href="http://www.tecnohackers.net/index.php?action=profile;u=3" title="Ver perfil de SAT">SAT</a> </h4> <ul class="reset smalltext" id="msg_4849_extra_info"> <li class="membergroup">Administrator</li> <li class="postgroup">Gran Experto</li> <li class="stars"><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /><img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/1starred.gif" alt="*" /></li> <li class="avatar"> <a href="http://www.tecnohackers.net/index.php?action=profile;u=3"> <img class="avatar" src="http://www.tecnohackers.net/index.php?action=dlattach;attach=11;type=avatar" alt="" /> </a> </li> <li class="postcount">Mensajes: 4889</li> <li class="profile"> <ul> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.tecnohackers.net/Themes/thedarkness_20/images/post/xx.gif" alt="" /> </div> <h5 id="subject_4849"> <a href="http://www.tecnohackers.net/index.php?topic=3111.msg4849#msg4849" rel="nofollow">Estructura de un documento HTML</a> </h5> <div class="smalltext">« <strong>Respuesta #2 en:</strong> Julio 19, 2009, 08:33:41 am »</div> <div id="msg_4849_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_4849"><span style="font-size: 1.45em;" class="bbc_size"><span style="color: darkorange;" class="bbc_color"><strong>2.- Estructura de un documento HTML</strong></span></span><br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>Opcionalmente los documentos escritos en HTML empezarán por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez. </strong></span><br /><strong><span style="color: yellow;" class="bbc_color">Los documentos escritos en HTML están estructurados en dos partes diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>). </span></strong></div> <br /><div style="text-align: left;"><strong><span style="color: yellow;" class="bbc_color">Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos: </span></strong></div> <br /><div style="text-align: left;"><strong><span style="color: yellow;" class="bbc_color"><TITLE> para dar nombre al documento; </span></strong><br /><strong><span style="color: yellow;" class="bbc_color"><META> para forzar a la página activa a ser cargada cada cierto tiempo. </span></strong><br /><strong><span style="color: yellow;" class="bbc_color"><BASE> para prefijar la dirección base de los documentos referenciados mediante un URL relativo. </span></strong><br /><strong><span style="color: yellow;" class="bbc_color">El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser. </span></strong></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>HEAD, TITLE, META, BASE</strong></span></div> <br /> <br /><div style="text-align: left;"><span style="color: yellow;" class="bbc_color"><strong>La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Normalmente esta información no se ve cuando se navega por el documento. </strong></span></div> <br /><div style="text-align: left;"><strong><span style="color: yellow;" class="bbc_color">Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y . El uso de TITLE es obligatorio ya que además de un carácter informativo tiene otras razones para existir:

 

  • Es el texto que el browser almacenará en el fichero hotlist o bookmark.
  • Es lo que se indica en la lista que aparece en la orden Go de la barra de menu.
  • Es lo que aparece en la esquina superior izquierda cuando se imprime el documento.
  • En un contexto Xwindow, cuando se minimiza la ventana, el título será tomado como nombre por el icono.
A continuación se muestra un ejemplo del formato mínimo de la cabecera.

 
Código:


Aqui va el nombre del documento

Cuerpo del documento
...

 
El título del documento que está usted leyendo ahora mismo se encuentra en la parte superior de esta ventana y es "Estructura de un documento HTML", como usted mismo podrá comprobar.

En la cabecera puede utilizarse también el elemento que puede forzar a que la página activa se cargue cada cierto tiempo (indicado en segundos mediante el atributo CONTENT).

 
Código:

Título de la página


 
Este ejemplo hace que el browser vuelva a cargar la página cada 10 segundos. También puede hacerse a un servidor, así:

 
Código:

Título de la página


 
Esto ha de ser utilizado con mucha precaución ya que podrá sobrecargar el servidor. Si el contenido de la página no va a cambiar es inútil hacerlo, de hecho, solo tendrá utilidad en casos muy especiales.
El elemento define la información a prefijar a todo URL incompleto en el documento. Por ejemplo, el URL relativo "/html/test.html" corresponderá de hecho a "URL/html/test.html".

 
BODY

 
El resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre y . Esta es la estructura mínima que debe poseer todo documento HTML:

 
Código:


Estructura mínima de un documento HTML


Documento
...


 
 
Comentarios

 
En el código fuente de una página HTM, los comentarios se introducirán entre las marcas: . Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible.

Ejemplo:

 
Código:


Fuente: carlmycol en Portal Hacker
« Última modificación: Julio 19, 2009, 10:31:38 am por zolo »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
Separadores de bloques de texto
« Respuesta #3 en: Julio 19, 2009, 08:36:53 am »
3.- Separadores de bloques de texto
 
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Marcas de bloques:

 

  • Párrafos. <P>
  • Saltos de línea. <BR>
  • Bloques tabulados. <BLOCKQUOTE>
  • Línea horizontal. <HR>
  • Divisiones. <DIV>
  • Texto preformateado. <PRE>
  • Direcciones. <ADDRESS>
  • Centrado de bloques. <CENTER>
<P>

 
<P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>.

 
Ejemplos:

 
 
Código:
<P>
Este texto está contenido dentro del primer párrafo,
así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1,
párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.
</P>
<P>
Este otro texto está contenido dentro del párrafo 2,
párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2,
párrafo 2, párrafo 2.
</P>

 
Esto dará como resultado:

 
Citar
Este texto está contenido dentro del primer párrafo, así que lo denominaremos: parrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1, párrafo 1.

Este otro texto está contenido dentro del párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2, párrafo 2.

 
Normalmente no suele utilizarse la marca de fin de párrafo, </P> ya que el texto continuará hasta que encuentre otro comienzo de párrafo <P>.
Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes valores:

 

  • LEFT: Justifica el texto a la izquierda. (por defecto)
  • RIGHT: Justifica el texto a la derecha.
  • CENTER: El texto aparece centrado.
Ejemplo:

 
Código:
<P ALIGN=LEFT>
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda.
</P>
<P ALIGN=RIGHT>
Texto justificado a la derecha, texto justificado
a la derecha, texto justificado a la derecha,
texto justificado a la derecha.
</P>
<P ALIGN=CENTER>
Texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado, texto centrado.
</P>

 
Esto dará como resultado:

 
Citar

Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.

 
 
 

Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.

 
 
 
Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto centrado

 
<BR>

 
El elemento <BR> es vacío por lo que sólo tiene marca inicial. Indica un salto de línea.

Ejemplo:

 
Código:
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1, texto 1, texto 1, texto 1, texto 1,
texto 1, texto 1. <BR>
Texto 2, texto 2, texto 2, texto 2, texto 2.

 
Con esto tendremos como resultado:

 
Citar
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1.
Texto 2, texto 2, texto 2, texto 2, texto 2.

 
<BLOCKQUOTE>

 
El elemento <BLOCKQUOTE> sirve para representar párrafos tabulados, por la izquierda y la derecha.

Ejemplo:

 
Código:
Texto 1, texto 1, texto 1, texto 1, texto 1.
<BLOCKQUOTE>
Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.
</BLOCKQUOTE>

 
El resultado será:

 
Citar

Texto 1, texto 1, texto 1, texto 1, texto 1.

 
 
 

Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.

 
 
<HR>

 
<HR> es un elemento vacío por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal.
Se puede cambiar la apariencia de dicha línea mediante los siguientes atributos:

 

  • NOSHADE: Elimina el efecto de sombra de la línea.
  • WIDTH: Permite definir la longitud de la línea.
  • SIZE: Permite definir el grosor de la línea.
Ejemplos:

 
Código:
<HR NOSHADE>

 
Código:
<HR WIDTH=250 SIZE=3>

 
Código:
<HR NOSHADE WIDTH=400 SIZE=4>

 
<DIV>

 
Este elemento se comporta de forma muy parecida al salto de línea, <BR>, y a su vez admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite definir un bloque con los atributos de <P>, pero dejando tan solo un salto de línea entre un bloque y otro.

Ejemplos:

 
Código:
<DIV ALIGN=LEFT>
Texto justificado a la izquierda.
</DIV>
<DIV ALIGN=RIGHT>
Texto justificado a la derecha.
</DIV>
<DIV ALIGN=CENTER>
Texto centrado.
</DIV>

 
Esto dará como resultado:

 
Citar

Texto justificado a la izquierda.

 
 

Texto justificado a la derecha.

Texto centrado.

 
<PRE>

 
El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el browser, respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea, respetando los espacios y los saltos de carro.

Ejemplo:

 
Código:
<PRE>
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de

carro,
como podrán observar.
</PRE>

 
Resultado serà :

 
Citar
Esto es un texto preformateado, por tanto se
respetan los espacios y los saltos de

carro,
como podrán observar.

 
 
<ADDRESS>

 
El elemento <ADDRESS> se emplea para indicar que un texto representa una dirección o una firma mostrándolo, generalmente, en letra cursiva. Es muy utilizado para indicar toda la información respecto al autor del documento (dirección, teléfono, e-mail,...). Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir esta zona de dirección al final del documento.

Ejemplo:

 
Código:
<ADDRESS>
Tekin Tontu <BR>
77A Wellington Rd <BR>
Auburn 2144, NSW <BR>
Australia <BR>
e-mail You are not allowed to view links. Register or Login <BR>
</ADDRESS>

 
Esto Dara de Resultado:

 
Citar
Tekin Tontu
77A Wellington Rd
Auburn 2144, NSW
Australia
e-mail You are not allowed to view links. Register or Login

 
 
<CENTER>

 
El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios, ...

Ejemplo:

 
Código:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
<TR> <TD> Celda 1 <TD> Celda 2 </TR>
<TR> <TD> Celda 3 <TD> Celda 4 </TR>
</TABLE>
</CENTER>

 
El Resultado es Una Tabla centrada.

 
Código:
<CENTER>
<IMG SRC="You are not allowed to view links. Register or Login">
</CENTER>

 
El Resultado es Una Imagen Centrada.

 
Código:
<CENTER>
<P>Este último ejemplo es un párrafo de texto centrado
mediante el elemento CENTER. Como pueden observar
cada una de las líneas del párrafo aparecerá centrada.<P>
</CENTER>

 
Da como resultado:

 
Citar
Este último ejemplo es un párrafo de texto centrado mediante el elemento CENTER. Como pueden observar cada una de las líneas del párrafo aparecerá centrada.


Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:30:05 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
Tipos de letra
« Respuesta #4 en: Julio 19, 2009, 09:30:53 am »
4.- Tipos de letra


En este apartado se indica cómo definir cabeceras mediante el elemento <Hn>, y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento <FONT> y sus atributos SIZE y COLOR.
Se puede también cambiar el tamaño de letra por defecto (3) de toda la página mediante el elemento vacío <BASEFONT>.

Finalmente se definen los estilos de caracteres disponibles distinguiendo entre los estilos físicos (negrita, cursiva, ...) y los lógicos (variables, citas, ejemplos, ...).

<Hn>

El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6. Los más grandes tienen valor 1 y los más pequeños valor 6. El texto entre estas marcas se trata en negrita. Se inserta automáticamente un salto de párrafo, como puede comprobar en el siguiente ejemplo:

Código:

Texto antes de la cabecera. <H3>Cabecera</H3> Más texto.


Te dara como resultado lo siguiente:

Citar
Texto antes de la cabecera.
Cabecera
Mas Texto

<FONT>

El elemento <FONT> permite definir el tamaño, color y tipo de letra de un conjunto de caracteres mediante los siguientes atributos:

    * El atributo SIZE: Regula el tamaño de los caracteres (1 - 7).`
    * El atributo COLOR: Especifica el color de los caracteres. Para consultar los códigos de los colores que le interesen puede consultar la tabla de códigos de colores.
    * El atributo FACE: permite definir el tipo de letra: Algerian, Arial, Times New Roman, Courier, MS Serif, Symbol, System, Times New Roman, Windsort, ... este comando no lo reconocen todos los navegadores (netscape no lo reconoce)


Ejemplos:

Código:

<FONT SIZE=4 COLOR=#008000> Texto de color verde y tamaño 4.<FONT>


Te dara Como Resultado:

Citar
Texto de color verde y tamaño 4.

Código:

<FONT SIZE=6 COLOR=#FF0000> Texto de color rojo y tamaño 6.<FONT>


Te da como resultado:

Citar
Texto de color rojo y tamaño 6.

El atributo SIZE del elemento <FONT> tiene la peculiaridad de poder indicar el tamaño de letra deseado en función del tamaño definido por defecto para el documento.

Ejemplo:

Código:

Este texto tiene el tamaño por defecto (3). <BR>
<FONT SIZE=-1>Este texto es del tamaño 3-1=2.</FONT> <BR>
<FONT SIZE=+2>Este texto es del tamaño 3+2=5.</FONT>


Teniendo en cuenta que el valor por defecto definido inicialmente para un documento es 3, el resultado será:

Citar
Este texto tiene el tamaño por defecto (3).
Este texto es del tamaño 3-1=2.
Este texto es del tamaño 3+2=5.


El valor del tamaño por defecto puede ser modificado mediante el elemento <BASEFONT> que se explica a continuación.

<BASEFONT>

El elemento <BASEFONT> permite cambiar el tamaño por defecto de toda la página mediante el atributo SIZE.

Ejemplo:

Código:

<BASEFONT SIZE=5>


Con esta sentencia se conseguirá que el tamaño de letra por defecto del documento pase a ser 5, hasta que aparezca otro elemento <BASEFONT> que lo restaure o lo cambie por otro valor diferente.

Ejemplo de uso de <FONT> y <BASEFONT>:

Código:

Inicialmente el tamaño por defecto es 3.<BR>
<FONT SIZE=+2>Por tanto este texto está en 3+2=5</FONT><BR>
<BASEFONT SIZE=6>
Ahora el tamaño por defecto es 6.<BR>
<FONT SIZE=-2>Este texto está en 6-2=4</FONT><BR>


El resultado es:

Citar
Inicialmente el tamaño por defecto es 3
Por tanto este texto está en 3+2=5
Ahora el tamaño por defecto es 6
Este texto está en 6-2=4

Estilos de Caracteres

Los siguientes elementos llenos permitirán definir distintos estilos para el grupo de caracteres que se defina entre sus marcas de inicio y cierre.

Ejemplo:

Código:

<i> Texto en cursiva (itálica) </i>


Asi queda:

Citar
Texto en cursiva (itálica)

Código:

Este es el texto normal
<b>Este es el texto Negrilla</b>


Y el resultado es:

Citar
Este es el texto normal

Este es el texto Negrilla

Código:

<u>Texto Subrayado</u>


Citar
Texto Subrayado

Código:

<strike>Este es el texto Tachado</strike>


Citar
Este es el texto Tachado

Código:

Texto Normal <sup>Texto de Super Indice</sup>


Citar
Texto Normal Texto de Super Indice

Código:

Texto Normal <sub>Texto Subindice</sub>


Citar
Texto Normal Texto Subindice

Código:

Texto Normal <tt>Texto de Maquina de Escribir</tt>


Citar
Texto Normal Texto de Maquina de Escribir

Los estilos físicos indican explícitamente el tipo de caracteres a utilizar.
Se pueden anidar distintos estilos obteniendo resultados como estos:

Código:

<b><i> Negrita y cursiva </i></b>


Resultado:

Citar
Negrita y cursiva


Código:

<b><strike> Negrita y tachado </strike></b>


Resultado:

Citar
Negrita y tachado



Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 10:05:06 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
Colores
« Respuesta #5 en: Julio 19, 2009, 09:33:05 am »
5.- Colores
 
Los colores se identifican mediante el nombre del color en inglés o bien mediante un código del tipo #rrggbb donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo, verde y azul.
Ha de tener en cuenta que algunos colores no se verán o se verán mal si la máquina no soporta 256 colores.
Color del texto
En este apartado se indicará cómo cambiar el color de un grupo definido de caracteres en un texto mediante el elemento <FONT>.
Colores del entorno
Aquí se verá cómo cambiar los colores definidos por defecto para el fondo, el texto normal y los enlaces mediante el elemento <BODY>. Este elemento también permite utilizar una imagen como fondo de página.

 
Color del texto

 
Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR.
A continuación se muestran algunos ejemplos:

 
Código:
<FONT COLOR="red"> ROJO </FONT>

<FONT COLOR="blue"> AZUL </FONT>
<FONT COLOR="navy"> AZUL MARINO </FONT>
<FONT COLOR="green"> VERDE </FONT>
<FONT COLOR="olive"> OLIVA </FONT>
<FONT COLOR="yellow"> AMARILLO </FONT>
<FONT COLOR="lime"> LIMA </FONT>
<FONT COLOR="magenta"> MAGENTA </FONT>
<FONT COLOR="purple"> PURPURA </FONT>
<FONT COLOR="cyan"> CYAN </FONT>
<FONT COLOR="brown"> MARRON </FONT>
<FONT COLOR="black"> NEGRO </FONT>
<FONT COLOR="gray"> GRIS </FONT>
<FONT COLOR="teal"> TEAL </FONT>
<FONT COLOR="white"> BLANCO </FONT>

 
Resulta:

 
Citar
ROJO
AZUL
AZUL MARINO
VERDE
OLIVA
AMARILLO
LIMA
MAGENETA
PURPURA
CYAN
MARRON
NEGRO
GRIS
TEAL
BLANCO

[/COLOR]
Como se comentó en la introducción el color se puede indicar tanto mediante su nombre en inglés como por determinados códigos hexadecimales.

 
Colores del entorno

 
Un cierto número de atributos de la marca BODY permite controlar el color del fondo de la ventana del browser, el color de los caracteres del texto y, finalmente, el color de los enlaces:

 
Código:
< BODY atributo1 atributo2 atributo3 ... atributoN >

 
 
El atributo BGCOLOR

 
Este atributo permite establecer un color de fondo para el documento.

 
Código:
<BODY BGCOLOR="#C0C0C0">

Este ejemplo establecerá el colos gris claro (#C0C0C0) como color de fondo de página.

 
El atributo BACKGROUND

 
Este atributo permitirá se utilice una imagen residente en el servidor, o en un fichero local, como fondo de página.

 
Código:
<BODY BACKGROUND="fichero_gráfico.gif">

 
El Atributo Text

 
Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace.

Ejemplo:

 
Código:
<BODY TEXT="darkblue">

Este ejemplo hará que, por defecto, el texto del documento aparezca de color azul oscuro.

 
Los atributos LINK, VLINK y ALINK

 
Controlan el color de los enlaces:

 

  • LINK es el color de un enlace que aún no ha sido visitado.
  • ALINK es un color muy fugaz que aparece cuando se hace clic sobre el enlace.
  • VLINK es el color de un enlace que ya ha sido visitado.
Ejemplo:

 
Código:
<BODY LINK="blue" ALINK="red" VLINK="navy">


Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:28:51 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
Hyperenlaces
« Respuesta #6 en: Julio 19, 2009, 09:37:01 am »
6.- Hyperenlaces
 
El siguiente elemento es uno de los más importantes del HTML, ya que es el que realmente permite "navegar" por uno o varios documentos, que pueden residir en cualquier parte, dando, sin embargo, la impresión de que se trata de un solo documento.

Esto se consigue definiendo enlaces hipertextuales del Web mediante el elemento <A> y sus atributos: NAME, HREF y TARGET. El lector podrá por tanto explorar el documento picando con el ratón sobre las zonas activas definidas, denominadas hipertexto. Estas zonas activas pueden corresponder a un grupo de caracteres, una imagen, o bien una porción de imagen. En cualquier caso el principio es el mismo: asociar a la zona activa la dirección URL del documento que sustituirá al visualizado cuando se pulse con el ratón sobre esa zona. (Ver El protocolo de direccionamiento de documentos: URL)

Un puntero puede colocarse en cualquier lugar del texto. Puede ser un elemento de una lista, o texto normal; puede estar enriquecido con atributos de estilo físico, lógico o de párrafo. Sin embargo, no es necesario darle un atributo para hacerlo reconocible como tal: los enlaces activables se destacan automáticamente (color y subrayado), siempre y cuando el usuario no realice una parametrización especial del browser.

La definición por defecto del color de los enlaces de un documento puede ser modificada mediante el elemento <BODY> y los atributos LINK, ALINK y VLINK.

Para especificar la partida y la llegada de un enlace hipertexto se define:


  • Ancla de partida: es la zona activa sobre la que el lector pulsará con el ratón para llamar a una nueva página. Este ancla se define mediante el atributo HREF.
  • Ancla de llegada: es una zona inactiva que especifica el punto de llegada de un enlace de hipertexto. Esta es pues una dirección. Este ancla se define mediante el atributo NAME.
<A>
 
El elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Este elemento nunca se utiliza solo, por tanto siempre vendrá acompañado por, al menos, uno de sus dos atributos principales:
El atributo HREF que define un ancla de partida.
El atributo NAME que define un ancla de llegada.
Además permite El atributo TARGET para ordenar la apertura de una nueva ventana del browser con la página indicada por HREF.
A continuación se detallan cada uno de estos atributos.

El atributo NAME

Este atributo define un punto de llegada en el documento destino asignándole un nombre o etiqueta:

Código:
<A NAME=etiqueta"> Zona no activable </A>

Luego mediante el atributo HREF desde el fichero de partida se indicará el documento y la posición dentro de dicho documento a la que se quiere acceder:

Código:
<A HREF="documento#etiqueta"> Zona activable </A>

Hay que tener en cuenta que la etiqueta debe estar compuesta por un texto sin espacios en blanco, caracteres especiales ni caracteres codificados. Dicha etiqueta no deberá estar repetida dentro del mismo documento destino.

El atributo HREF

Este atributo define un ancla de partida hacia un enlace externo o interno, o sea, crea un enlace hacia un nuevo documento propuesto por dicho servidor o hacia un punto determinado dentro del documento actual. La sintáxis típica es:

Código:
<A HREF="url_de_destino">zona activable con atributos visuales</A>

 
Ejemplos:

Código:
<A HREF="You are not allowed to view links. Register or Login">
Logotipo del Departamento de Informática y
Sistemas de la ULPGC
</A>

También se pueden (o más bien se deben) usar direcciones relativas:

Código:
<A HREF="indice.htm"> Indice </A>

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba, respetando las mayúsculas y minúsculas. Si se escribiese el nombre del protocolo (You are not allowed to view links. Register or Login, del servidor (ccdis.dis.ulpgc.es/), o del fichero (logo.html) con alguna diferencia, la dirección sería errónea y el documento no sería encontrado.

Si se desea ir directamente a la home page (página local) de un servidor, el URL se compondrá únicamente del nombre del servidor.

Como puede comprobar en el ejemplo anterior la dirección URL comienza con el nombre del protocolo o tipo de servicio. En este caso se trata de http:// pero hay también otros tipos de Servicios de Internet.

El atributo TARGET

Este atributo ordena la apertura de una nueva ventana con el documento indicado por el atributo HREF.

Ejemplo:

Código:
<A HREF="indice.htm" TARGET="ventana2">
Nueva ventana
</A>

Enlaces a puntos internos a un documento

Como hemos visto hasta ahora el atributo HREF sirve para enlazar con otro documento que puede estar en un servidor o ser un fichero local. Dicho documento se presentará siempre desde la primera página.
Para acceder a un punto determinado de un documento se debe definir el ancla de llegada en el documento destino mediante el atributo NAME , como se vió anteriormente. Luego se debe indicar la dirección del documento destino y del punto de comienzo, en el documento de partida, mediante el atributo HREF. La sintáxis es:

Este codigo va en el punto donde quieres que valla el link:

Código:
<A NAME="etiqueta"> </A>

Recuerda cambiar el valor "Etiqeta" al valor que decees.

Este codigo va en el documento de partida:

Código:
<A HREF="destino.htm#etiqueta"> Zona activable </A>

Recuerda cambiar el valor "Etiqueta" al valor que escogiste.

De igual manera se puede referenciar un punto determinado dentro del mismo documento activo.
Todo esto es muy útil cuando se trabaja con documentos grandes llenos de secciones.

Aplicación a notas al pie de página

Un ancla puede admitir varios atributos simultáneamente. En este apartado se utilizará la analogía con una nota al pie de página en un texto impreso para estudiar la utilización de los atributos HREF y NAME especificados en el mismo ancla.
Una nota al pie de página se suele especificar mediante un superíndice, invitando al lector a desplazar la vista a la parte inferior de la página para leer una explicación complementaria. Sequidamente habrá que volver al punto donde se encontraba la referencia en cuestión para coninuar con la lectura.

Una página HTML puede ser muy larga, por lo que mirar una anotación de este tipo podría ser bastante tedioso, por tanto la implementación de una anotación a pie página en una página Web se hará de la siguiente forma:

En el texto actual se coloca un ancla activa y pasiva de la forma:

Código:
... texto <A HREF="#nota1" NAME="vuelta1"> <sup>1</sup> </A>

Al principio del bloque de texto que compone la nota:

Código:
<A HREF="#vuelta1" NAME="nota1">1.</A> Texto de la nota...

Aclaraciones

1.- El extremo de un enlace puede ser cualquier tipo de documento: Un fichero HTML, Una imagen GIF, JPEG o PostScript, un vídeo, Un texto

2.- Definir un enlace a una imagen es distinto que definir una imagen en línea ya que ésta última siempre se visualizará al cargar la página, mientras que el enlace visualizará la imagen tan solo cuando sea activado.

3.- Si en el documento de destino no existe el punto definido en el documento de origen, el visualizador presentará en pantalla la última línea del mismo.

4.- Al definir un enlace es preferible utilizar direcciones relativas. Si se utilizan direcciones absolutas habrá que modificar todas las direcciones si los ficheros cambian de localización.

5.- Si al definir un enlace no se especifica el nombre de un fichero después del nombre de la máquina, por defecto el servidor entenderá que se le pide la home page (página inicial).

6.- Si un servidor no tiene definida página inicial, simplemente mostrará una lista de todos los ficheros y directorios que tenga en el directorio definido como raíz.

7.- Si después de la dirección de la máquina en lugar de un nombre de fichero se pone el de un directorio, generalmente el servidor mostrará un simple listado de los ficheros y directorios que éste contenga.

8.- No sólo se puede crear un enlace sobre un texto, también se puede hacer sobre una imagen cualquiera. Es decir, después del enlace y antes de [/url] se puedes poner lo que se quiera. [/SIZE]

9.- El arte de escribir buen HTML reside en dar una buena estructura a la información. Siempre que se puedas hay que huir de crear páginas muy largas. Es preferible crear cuantas hagan falta, con buena estructura y enlázarlas con cuantos enlaces sean precisos

10.- Para utilizar direcciones absolutas con ficheros locales se deberá escribir: file:///C|/MIDIRECTORIO/mifichero.htm

Servicios de Internet

1.- HTTP:

Este es el protocolo del Web. Se utiliza para referenciar documentos residentes en servidores Web.

Citar
You are not allowed to view links. Register or Login

Ejemplo:

Citar
You are not allowed to view links. Register or Login

Esto, al omitir el nombre del fichero, hará referencia a la página local (home page) del servidor del Departamento de Informática y Sistemas de la ULPGC.

1.- FTP:

Ofrece servicios para la trasferencia de ficheros. Permiten proponer la copia, en el ordenador local, de un fichero residente en el espacio de un servidor Web.

Se puede proponer el acceso a un único fichero del servidor o bien proponer la totalidad de un directorio de servidor Web:

Especificación de un directorio:

Citar
You are not allowed to view links. Register or Login

Por ejemplo:

Citar
You are not allowed to view links. Register or Login

Especificación de acceso directo a un fichero:

Citar
You are not allowed to view links. Register or Login

Por ejemplo:

Citar
You are not allowed to view links. Register or Login

3.- News:

Las news son foros organizados en grandes ámbitos de interés donde cada uno puede participar en la discusión enviando y consultando artículos.

En un servidor temático puede ser interesante crear una página HTML que recoja los grupos de news en relación con los temas del servidor.

Su especificación es de la forma:

Citar
NEWS://nombre_del_grupo_de_news

Por Ejemplo:

Citar
news://news.ulpgc.es

4.- Telnet:

Este URL es utilizado para la conexión entre ordendores. Permite obtener el lanzamiento de una ventana TELNET que contendrá la invitación de conectarse a la máquina especificada.

Su especificación es de la forma:

Citar
TELNET://nombre_de_la_maquina

Por Ejemplo:

Citar
telnet://sopa.dis.ulpgc.es/

5.- Gopher:

Este URL permite una conexión a una sede gopher.

Citar
GOPHER://nombre_de_sede

Por ejemplo:

Citar
gopher://sopa.dis.ulpgc.es/

6.- MAILTO

Este URL no es soportado por todos los browsers. Cuando se llama, se proporciona al lector un cuadro de edición, que le permite escribir correo electrónico y poner la dirección en un campo especificado indicando su dirección electrónica. Este correo se envía a la dirección indicada en el URL.

Citar
MAILTO:nombre_del_destinatario@sede

Por ejemplo:

Citar
mailto:a1989@correo.dis.ulpgc.es

7.- FILE:

Para especificar direcciones absolutas de ficheros locales se utilizará la siguiente sintáxis:

Citar
file:///C|/directorio/subdirectorio/nombre_del_fichero.htm

Si se trabaja con direcciones relativas bastará con especificar el path a partir del directorio local. Hacer esto tiene la importante ventaja de no tener que cambiar las direcciones cuando se produce un movimiento de ficheros.

Por ejemplo:

Citar
indice.htm


Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:27:31 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
7 Listas
« Respuesta #7 en: Julio 19, 2009, 10:38:13 am »
7.-Listas
 
 
Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

HTML define varios tipos de listas:

* Listas sin orden, sin numeración: <UL> , <LI>
* Listas ordenadas, con numeración: <OL> , <LI>
* Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
* Listas de menú , similares a las listas sin orden: <MENU> , <LI>
* Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>

Cualquiera de los tipos de listas nombrados puede ser anidado. En el caso de las listas ordenadas no se consique una numeración escalonada al anidar una lista dentro de otra, como se vió en el ejemplo anterior. Las listas sin orden cambian el símbolo de comienzo al anidarse unas dentro de otras. Al final de esta página se muestran varios ejemplos de listas anidadas.
Como puede comprobar los primeros cuatro tipos de listas, denominados listas regulares, hacen uso de la marca <LI>. La cual se explica a continuación.

<LI> Y <UL>

<LI>
La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares. La sintáxis general de estas listas será:


Código:
<LI>
  <li> Primer elemento de la lista
  <li> Segundo elemento de la lista
  <li> ...
</LI>


<UL>
La marca <UL> permite generar listas no ordenadas, cada uno de los elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.

Ejemplo:


Código:
<UL>
  <LI>Fichero HTML</LI>
  <LI>Fichero de imagen</LI>
  <LI>Fichero de sonido</LI>
  <LI>Fichero de vídeo</LI>
  <LI>Fichero de ejemplo</LI>
</UL>


Resultado:


Citar
  • Fichero HTML
  • Fichero de imagen
  • Fichero de sonido
  • Fichero de vídeo
  • Fichero de ejemplo
Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se será:


Código:
<UL TYPE=CIRCLE>
  <LI>Primera línea
  <LI>Segunda línea
</UL>


También puede usarse el valor SQUARE. Así:


Código:
<UL TYPE=SQUARE>
  <LI>Primera línea
  <LI>Segunda línea
</UL>


<OL>
La marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista.

Ejemplo:


Código:
<OL>
<LI>Fichero HTML</LI>
<LI>Fichero de imagen</LI>
<LI>Fichero de sonido</LI>
<LI>Fichero de vídeo</LI>
<LI>Fichero de ejemplo</LI>
</OL>


Y como resultado da:


Citar
1.  Fichero HTML
2.  Fichero de imagen
3.  Fichero de sonido
4.  Fichero de vídeo
5.  Fichero de ejemplo



Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores:

TYPE=1
(por defecto) para números,
TYPE=A
para letras mayúsculas,
TYPE=a
para letras minúsculas,
TYPE=I
para numeración romana en mayúsculas,
TYPE=i
para numeración romana en minúsculas.
Esto es una lista ordenada con letras mayúsculas:

Ejemplo:


Código:
<OL TYPE=A>
<LI>Primera línea
<LI>Segunda línea
<LI>Tercera línea
<LI>Cuarta línea
</OL>


Resultado:


Citar
A.  Primera línea
B.  Segunda línea
C.  Tercera línea
D.  Cuarta línea



Asi susesivamente con todos los atributos TYPE.

En algunos casos puede interesarnos que la lista no comience por el número 1 (por ejemplo si es una lista que continua en otra página). Se puede conseguir con el atributo START combinado con TYPE.

Ejemplo:


Código:
<OL TYPE=A START=5>
  <LI>Primera línea
  <LI>Segunda línea
  <LI>Tercera línea
  <LI>Cuarta línea
</OL>


Esto es una lista ordenada con letras mayúsculas y que comienza por la E:


Citar
E.  Primera línea
F.  Segunda línea
G.  Tercera línea
H.  Cuarta línea



El número que se pone en el atributo START indica en que número o letra comenzará la lista. La E es la quinta letra.

<DIR>

Las listas de directorio son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <DIR>.

La marca <DIR> admite los mismos atributos que la marca <UL>.

Ejemplo:


Código:
<DIR>
  <LI>Español</LI>
  <LI>Inglés</LI>
  <LI>Francés</LI>
  <LI>Alemán</LI>
</DIR>


<MENU>

Las listas de menu son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintáxis del código donde en vez de utilizar la marca <UL> se utiliza la marca <MENU>.

La marca <MENU> admite los mismos atributos que la marca <UL>.


Código:
<MENU>
  <LI>Opción 1</LI>
  <LI>Opción 2</LI>
  <LI>Opción 3</LI>
</MENU>


Listas de Definicion

Una lista de definición es una lista no enumerada en la que se da una descripción de cada uno de sus elementos. Un ejemplo típico es un glosario. Las listas descriptivas están definidas por los siguientes elementos:

<DL>

El elemento <DL> abre una lista descriptiva y finaliza con </DL>. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar el elemento y definirlo.
El atributo COMPACT está asociado a la marca DL (<DL COMPACT>) y permite mostrar en la misma línea el elemento y su descripción.

<DT>

El elemento <DT> precede a cada item de la lista, el cual no puede sobrepasar la longitud de una línea. Este elemento no resalta el texto de cada item por lo tanto si quiere algún formato especial como negrita o cusiva habrá que especificarlo con sus correspondient es marcas.
No tiene final de marca.

<DD>

La marca <DD> corresponde a la zona de definición de cada item. El tamaño de esta zona no está limitado y cada línea se sangrará hacia la derecha.
No tiene final de marca.

La estructura de este modelo de lista será la siguiente:


Código:
<DL>
  <DT> Identificación del elemento <DD> Descripción del elemento
  <DT> ... <DD> ...
</DL>


Ejemplo de Lista de Definicion:


Código:
<dl compact>
  <dt>ASCII <dd> Juego de caracteres que asigna valores
numéricos estándar a las letras, cifras y signos de puntuación.
  <dt>EPS <dd> Formato de descripción de ficheros PostScript.
  <dt>FUENTE <dd> Conjunto de estilos que posee una categoría
de caracteres (negrita, cursiva, etc...).
</dl>


Anidamiento de Listas No Ordenadas

En el siguiente ejemplo el browser Netscape visualizará tres símbolos distintos en función del grado de anidamiento, y posteriormente utilizará el último símbolo (el cuadro vacío) para los siguientes niveles. El browser Mosaic, sin embargo, utilizará el mismo símbolo para todos los niveles:


Código:
<UL>
  <LI>Ficheros HTML
  <UL>
    <LI>Ejemplos
    <UL>
      <LI>Listas
      <LI>Tablas
      <LI>Estilos
      <UL>
        <LI>Cita
        <LI>Texto en énfasis
      </UL>
    </UL>
    <LI>En curso
    <LI>Prescritos
  </UL>
  <LI>Ficheros de imágenes
</UL>


Anidamiento de listas ordenadas

En el siguiente ejemplo se aprecia que la enumeración según el grado de anidamiento no es automática:


Código:
<OL>
  <LI>Fichero HTML
  <LI>Fichero de imágenes
  <OL>
    <LI>Naturalezas muertas
    <LI>Paisajes
    <OL>
      <LI>Verano
      <LI>Invierno
    </OL>
  </OL>
  <LI>Fichero de sonidos
</OL>


Anidamiento de listas ordenadas con listas no ordenadas

A continuación mostraremos un ejemplo de listas de varios niveles, en el que se muestra listas ordenadas con listas no ordenadas:


Código:
<UL>
  <LI>Ficheros HTML
  <OL>
    <LI>Ficheros de prueba
    <UL>
      <LI>prueba 1.html
      <LI>prueba 2.html
      <LI>prueba 3.html
    </UL>
    <LI>Ficheros de ejemplo
    <LI>Ficheros del servidor
  </OL>
  <LI>Ficheros de imágenes
  <LI>Ficheros de sonidos
  <LI>Ficheros de vídeo



Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:26:45 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
8. Tablas
« Respuesta #8 en: Julio 19, 2009, 10:40:36 am »
8.- Tablas
 
La estructura de una tabla se define mediante:

* una marca de inicio de la tabla (TABLE),
* una marca de comienzo de una nueva línea (TR) y
* una marca de comienzo de una celda (TD).

Al final de cada uno de estos elementos se deberá definir la marca de final correspondient
e.
Esta estructura es bastante simple y muy fácilmente modificable.
Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).
Una celda puede contener algunos de los siguientes elementos:

*texto
*listas
*otras tablas
*imágenes
*enlaces de hipertexto
*elementos de formulario

La representación de una tabla es actualmente muy dependiente del browser utilizado.

[/COLOR]
<TABLE>


La marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>.
Se puede indicar alguno de los siguintes atributos:
 
* BORDER: define el grosor del marco exterior (puede ser cero).
* CELLPADDING: define el espacio alrededor del texto de una celda.
* CELLSPACING: define el espacio entre celdas.

El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto.
El valor por defecto del atributo BORDER es cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no.
Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browser o definiendo un tamaño fijo en unidades, mediante los atributos:
 
* WIDTH: define el ancho de la tabla, bien en % o en unidades.
* HEIGTH: define el alto de la tabla, bien en % o en unidades.

[/COLOR]
Ejemplos:



Código:
<TABLE>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>
[/COLOR]
Código:
<TABLE BORDER>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>
[/COLOR]
Código:
<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>


Definiendo el ancho y alto de la tabla en %

[/COLOR]
Código:
<TABLE BORDER WIDTH=50% HEIGHT=30%>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>50%</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>30%</TD>
</TABLE>


Definiendo el ancho y alto de la tabla en unidades.

[/COLOR]
Código:
<TABLE BORDER WIDTH=300 HEIGHT=80>
<CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION>
<TR ALIGN="center">
<TH>Ancho (<I>WIDTH</I>)</TH>
<TD>300</TD>
<TR ALIGN="center">
<TH>Alto (<I>HEIGHT</I>)</TH>
<TD>80</TD>
</TABLE>



<TR>


La marca <TR> inicia una línea de la tabla que terminará con </TR>. Admite los atributos:

1. VALIGN: permite una alineación del texto en el sentido vertical de la celda.
Admite los valores: TOP, BOTTOM, MIDDLE

2. ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
Admite los valores: RIGHT, CENTER, LEFT

Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD> contradice esta alineación.

[/COLOR]
<TD>


La marca <TD> delimita el inicio de una celda. Admite los atributos:

1. VALIGN: permite una alineación del texto en el sentido vertical de la celda.
Admite los valores: TOP, BOTTOM, MIDDLE

2. ALIGN: permite una alineación del texto en el sentido horizontal de la celda.
Admite los valores: RIGHT, CENTER, LEFT

3. COLSPAN: define una celda con una anchura múltiplo de la columna básica.
ROWSPAN: define una celda con una anchura múltiplo de la fila básica.

4. NOWRAP: obliga al browser a inscribir todo el texto de la celda en una sola línea.

En las tablas el ajuste es automático, la anchura de una celda depende del texto más largo inscrito en una de las celdas de la columna. De modo predeterminado, si la línea es demasiado larga, el browser la cortará en varias líneas, no ser que esté presente el atributo NOWRAP.

[/COLOR]
<TH>


La marca <TH> es idética a <TD> pero el texto de las celdas se considera como texto de cabecera. Este texto se centra automáticamente y se pone en negrita. Admite los mismos parámetros que la marca <TD> (VALIGN, ALIGN, COLSPAN, ROWSPAN, NOWRAP).

[/COLOR]
CAPTION


Esta marca permite poner un título encima ( atributo ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla.

[/COLOR]
Ejemplos:




Código:
<CENTER>
<TABLE BORDER>
<CAPTION>Titulo Superior (por defecto)</CAPTION>
<TR>
   <TD></TD>
   <TH COLSPAN=3>Atributos de alineación, Align y VAlign</TH>
<TR>
   <TH>Alineación<BR>Vertical</TH>
   <TD VALIGN=top>Top</TD>
   <TD VALIGN=middle>Middle</TD>
   <TD VALIGN=bottom>Bottom</TD>
<TR>
   <TH>Alineación<BR>Horizontal</TH>
   <TD ALIGN=left>Left</TD>
   <TD ALIGN=center>Center</TD>
   <TD ALIGN=right>Right</TD>
</TABLE>
</CENTER>
[/COLOR]
Código:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN="bottom">Tabla 2.1.</CAPTION>
<TR ALIGN="center">
<TD></TD>
<TH>Ventana 1</TH>
<TH>Ventana 2</TH>
<TH>Ventana 3</TH>
<TR ALIGN="center">
<TH>Color<BR>Fondo</TH>
<TD>blanco</TD>
<TD>gris</TD>
<TD>amarillo</TD>
<TR ALIGN="center">
<TH>Color<BR>Texto</TH>
<TD>azul</TD>
<TD ROWSPAN=2> negro </TD>
<TD>negro</TD>
<TR ALIGN="center">
<TH>Color<BR>Símbolos</TH>
<TD>rojo</TD>
<TD>verde</TD>
</TABLE>
</CENTER>
[/COLOR]
Código:
<TABLE BORDER>
<TR>
<TD>Ejemplo: Atributo NOWRAP</TD>
<TD NOWRAP>Aquí hay una línea muy larga. Para que no sea cortada
utilizamos el atributo <I>NOWRAP</I>.</TD>
</TABLE>



Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:25:35 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
9. Frames
« Respuesta #9 en: Julio 19, 2009, 10:42:28 am »
9.- Frames
 
Los frames (en inglés frame = cuadro, bastidor, marco o panel) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla. Sin embargo, no hay que confundir paneles con tablas ya que existe una gran diferencia; en el caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames cada zona de la pantalla es un documento HTML propio. Se ve pues, simultáneamente, en la misma ventana de un browser, la página correspondient e a varios ficheros.
El concepto de frame elimina una de las limitaciones del Web ya que hasta ahora, cada nuevo documento destruía el anterior, y obligaba al usuario a usar demasiado el comando Back de los browsers. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener en una zona un menú que casi nunca será necesario recargar.

La estructura general de un documento dividido en varios paneles difiere de la de un documento clásico ya que en éstos el cuerpo se inserta en las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo del documento se inserta entre las marcas <FRAMESET> y </FRAMESET>;.

El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con FRAMESET.

La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos se utilizará el elemento <NOFRAMES> que permite ofrecer un texto alternativo en entorno normal.

Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el atributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace de hipertexto.

Al final de esta página se muestran diversos ejemplos de frames.

FRAMESET

Este elemento sustiye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalment e. Si no hay ninguna zona todavía, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos atributos:
 
1. ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:

ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

ROWS es una lista de valores enteros separados por comas. El número de elementos de la lista corresponde al número de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse según uno de los tres formatos siguientes, donde n es un entero:

A. n: indica la altura de la subzona en píxels.

B. n%: indica la altura de la subzona expresada en porcentajes del tamaño de la zona madre.

C. n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio aún disponible.

2. COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.

ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.


Código:
<FRAMESET ROWS="25%,25%,50%">...<FRAMESET>
<FRAMESET ROWS="*,*,2*">...<FRAMESET>


FRAME

Es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterización se realiza mediante los siguientes atributos:

1. SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estará vacía.

SCR="url"

2. NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:

NAME="nombre_de_la_z
ona"

3. MARGINWIDTH: Se utiliza para precisar el número de píxels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :
MARGINWIDTH="n"
 
4. MARGINHEIGHT: Se utiliza para precisar el número de pixels entre los bodes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:
MARGINHEIGHT="n"

5. SCROLLING: Indica si la zona debe poseer una barra de desplazamiento (SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta elección se deja en manos del browser (SCROLLING="auto"). La sintaxis es:
SCROLLING="yes/no/auto"

6. NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamaño de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratón.

NOFRAMES

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto irá entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignorarán las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre éstas últimas. Por el contrario un browser capaz de gestionar paneles interpretará las marcas <NOFRAMES> y </NOFRAMES> y sabrá que debe ignorar el texto comprendido entre ellas.

El atributo TARGET

Este nuevo atributo afecta a las marcas que caracterizan los enlaces de hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite precisar el nombre de la zona que debe recibir el documento correspondient e al enlace. Por ejemplo:


Código:
<A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>

El atributo TARGET existe para indicar al browser que, en respuesta a un clic, debe mostrar el documento dossier.html en el panel cuyo nombre es "zonadossier". De igual modo, el formulario definido por:


Código:
<FORM  ACTION="cgi_bin/test"  TARGET="zonascript"  METHOD="POST">
  ...
</FORM>


Mostrará sus resultados en el panel cuyo nombre es "zonascript".
El atributo TARGET puede tener tres valores diferentes:

* Un valor que corresponde al nombre de un panel existente.El documento asociado al enlace de hipertexto se muestra entonces en el panel en cuestión.

* Un valor que no corresponde a ninguno de los paneles existentes. El browser crea entonces una nueva ventana y muestra el documento. Esta nueva ventana se considera como un panel con el atributo TARGET del origen de su creación.

* TARGET puede tomar uno de los siguientes cuatro valores:

_blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto.

_self, indica que el documento se cargará en la misma zona donde se encuentra el enlace de hipertexto. Se trata del valor predeterminado cuando no se indica el atributo TARGET.

_top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal.

_parent, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta noción solo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas <FRAMESET>.

A continuación se expondrán algunos ejemplos para que queden claros todos los conceptos aprendidos.

Ejemplos

Un frame básico. Sintaxis general: En general, todas las páginas que contengan un frame deberán ser más o menos así:


Código:
<HTML>
<HEAD><TITLE> Mi titulo ></TITLE></HEAD>

<FRAMESET COLS=*,*>
     <NOFRAMES>
         <BODY>
             Su visualizador no soporta frames. Pulse
             <A HREF="indice.htm">aqui</A> para volver.
         </BODY>
    </NOFRAMES>

    <FRAME SRC="doc_a.htm" >
    <FRAME SRC="doc_b.htm" >

</FRAMESET>

</HTML>


Un frame de 3 áreas verticales (COLS)


Código:
<FRAMESET COLS=30%,20%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_b.htm">
   <FRAME SRC="doc_c.htm">
</FRAMESET>


Un frame de 3 áreas horizontales (ROWS)


Código:
<FRAMESET ROWS=25%,25%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_b.htm">
   <FRAME SRC="doc_c.htm">
</FRAMESET>


Un frame combinado de un área vertical y dos horizontales.
El frame A, no podrá ser redimensionado (NORESIZE).


Código:
<FRAMESET COLS=20%,*>
   <FRAME SRC="doc_a.htm" NORESIZE>
        <FRAMESET ROWS=40%,*>
           <FRAME SRC="doc_b.htm">
           <FRAME SRC="doc_c.htm">
        </FRAMESET>
</FRAMESET>


Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el texto (MARGINWIDTH MARGINHEIGHT)

Y se escribiría así:


Código:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="doc_a.htm">
   <FRAME SRC="doc_a.htm"
       MARGINWIDTH=50
       MARGINHEIGHT=50>
</FRAMESET>


Un frame con referencias cruzadas (NAME TARGET)


Código:
<FRAMESET COLS=50%,50%>
   <FRAME SRC="doc_aa.htm">
   <FRAME SRC="doc_bb.htm" NAME="VENTANA">
</FRAMESET>



Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:24:19 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
10. Formularios
« Respuesta #10 en: Julio 19, 2009, 10:45:08 am »
10.- Formularios
 
Los formularios generan en la pantalla cuadros de diálogo con el lector permitiendo así la interacción con el usuario para consultas de bases de datos, solicitudes de documentación, ...
Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc... El usuario rellenará estas zonas en su formulario las cuales se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va a tratar, éste recibe el identificador de cada zona y el valor introducido. A dichos programas se les suele denominar scripts, y se han de ejecutar en un espacio del servidor reservado a este efecto: el CGI o Common Gateway Interface.
El tratamiento de los datos recibidos en el servidor desde los formularios requiere conocer la tabla de conversión hexadecimal que utilizan la mayoría de los visualizadores. Dentro de un mismo parámetro las palabras aparecerán, en el destino, separadas por el signo +, y los parámetros entre sí por el símbolo&. Las letras acentuadas y otros caracteres especiales serán valores hexadecimales precedidos del símbolo %, como se muestran en la tabla de códigos hexadecimales del Netscape para Windows .
Para la creación de formularios se utilizarán las siguientes marcas, que permiten generar una interfaz de edición, sin hacer referencia aún a la programación de scripts de CGI:

* la marca FORM que delimita el comienzo y fin de la definición del formulario.

* la marca INPUT que permite crear diferentes tipos de entradas: campos de edición y diversos tipos de botones;

* la marca SELECT que permite crear listas: menús despegables y listas con barras de desplazamiento;

* la marca TEXTAREA que genera una zona de edición de texto libre.

 
Atributos comunes

 
Los siguientes atributos son comunes a las marcas que se definen en este apartado para generar formularios:

* El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

* El atributo VALUE puede ser definido para un campo de:

Texto: permite definir el contenido del campo.

Botón SUBMIT: indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: valor que se le asocia al botón cuando éste
está pulsado. El valor especificado por NAME identifica el bloque de botones.

 
FORM

 
La marca <FORM> y </FORM> definen un formulario y entre ellas se situarán todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

* El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los ejemplos.

* El atributo ACTION define la acción a ejecutar cuando se pulse el botón de sumisión, indicando el URL del programa (script) encargado de tratar los datos adquiridos desde el formulario.

<FORM METHOD=tipo_de_metodo ACTION=URL_del_script>

<FORM METHOD="post" ACTION=" cgi_bin/inscripcion">

 
Input

 
La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones.

Permite varios atributos además de los ya comentados de modo general:

A. El atributo SIZE define la longitud de la ventana de texto.

B. El atributo MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro de la ventana.

Ejemplo:

 
Código: You are not allowed to view links. Register or Login
<input name="identidad" size=10 maxlength=15>
Como se puede observar en este ejemplo, el número máximo de caracteres puede ser mayor que el tamaño de la ventana y viceversa

C. El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

* TEXT: es la opción seleccionada por defecto. Define una zona de entrada de texto simple. El texto definido en VALUE aparecerá en dicha zona, para poder ser completado o modificado por el usuario.

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="text" value="Champiñones">
</form>

* SUBMIT: desencadena el envío del formulario hacia el script; el texto definido en VALUE se escribirá en el botón:

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="submit" value="Salida">
</form>

* RESET: permite borrar los datos ya entrados:

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="reset" value="Borrar">
</form>

* PASSWORD: permite entrar una palabra clave de forma confidencial:

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="password" name "pwd">
</form>

* CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="checkbox" name="micro" value="mac">Macintosh
<input type="checkbox" name="micro" value="pc">PC
</form>

* RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones

 
Código: You are not allowed to view links. Register or Login
<form>
<input type="radio" name="media" value="cd" checked>CD-ROM
<input type="radio" name="media" value="dk">Disquete
</form>

 
* HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla.

 
Código: You are not allowed to view links. Register or Login
<input type="hidden" name=nombre_de_variable value=valor_de_la_variable>
* IMAGE: hace que el visualizador presente una imagen que es sensible al ratón. Lo que el formato envía al servidor es un registro cuyos campos son el nombre definido para la imagen seguido de los parámetros .x=n y .y=m donde n y m son los números de las coordenadas x,y del punto en el que estaba el ratón en el momento del envío. Para representar la imagen se utiliza el atributo SRC del elemento IMG. Por ejemplo:

 
Código: You are not allowed to view links. Register or Login
<form method="post" action="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi">
<input type=image name="imagen" src="sugeren.gif">
[COLOR=yellow]</form>

Una posible respuesta podría ser:

 
Código: You are not allowed to view links. Register or Login
imagen.x=7 & imagen.y=38
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo SUBMIT, ya que el formulario se cierra con la imagen.

 
SELECT

 
La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente, la lista se interpreta como un menu desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al atributo SIZE da entonces el número de líneas visibles en la ventana. La opción de seleción multiple se deriva de la presencia del atributo MULTIPLE.

 
Ejemplos:

 
Menú despegable:

 
Código: You are not allowed to view links. Register or Login
<form>
<select NAME="sede">
<option>Entrada indirecta
<option>Entrada lateral
<option SELECTED>Entrada directa
</select>
</form>

 
Ventana con barra de desplazamiento: ( con opción de selección múltiple )

 
Código: You are not allowed to view links. Register or Login
<form>
<select MULTIPLE NAME="lenguaje" SIZE="3">
<option SELECTED>Ada
<option>C++
<option>Cliper
<option>Pascal
<option>Fortran
<option>Cobol
</select>
</form>

 
La longitud de la ventana de selección se autoajusta al valor más largo de la lista. Se debe de procurar que los contenidos de los campos sean lo más cortos posibles; una excesiva longitud implica mayor tráfico por la red, pero se deben contruir las listas de forma clara, y que resulten de fácil lectura al usuario, lo que puede aumentar la longitud de los valores. Para solventar este dilema se utiliza el parámetro VALUE asociado al atributo OPTION, el cual permite enviar un valor diferente al que aparece en la lista.

Ejemplo:

A continuación se muestra una lista contenida en una ventana con barras de desplazamiento.

 
Código: You are not allowed to view links. Register or Login
<form>
<select name="lista" size=3>
<option> Pista 1
<option> Pista 2
<option> Pista 3
<option value="Pista 4"> Pista 4 (para novatos)
<option> Pista 5
<option> Pista 6
</select>
</form>

 
TEXTAREA

 
La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de esta ventana.

Es posible predefinir un texto (entre las marcas <TEXTAREA> y </TEXTAREA>) que el usuario podrá reemplazar o completar con su propio texto.

Ejemplo:

 
Código: You are not allowed to view links. Register or Login
<form>
<textarea name="comment" rows=5 cols=40>
Introduzca aquí sus comentarios
</textarea>
</form>

 
Ejemplo:

 
A continuación se muestra un típico y complejo formulario que contiene cada uno de los elementos estudiados anteriormente organizados mediante el uso de una tabla.

 
Código: You are not allowed to view links. Register or Login
<FORM ACTION="http://mecaniza.sestud.uv.es/cgi-bin/test2-cgi" METHOD=POST>
 
<CENTER>
<TABLE BORDER>
 
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
 
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>
 
<TR>
<TD>Calle y número:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
 
<TR>
<TD>Código Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>
 
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20> Teléfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>
 
<TR>
<TD>Estado Civil:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>Soltero
<OPTION>Casado
<OPTION>Divorciado
<OPTION>Otro
</SELECT>
<INPUT TYPE="radio" NAME="sexo" VALUE="H"> Hombre
<INPUT TYPE="radio" NAME="sexo" VALUE="M"> Mujer </TD>
 
<TR>
<TD>Idiomas:</TD>
<TD><INPUT TYPE="checkbox" NAME="idiomas" VALUE="E"> Español
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="A"> Alemán
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="F"> Frances
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="I"> Inglés </TD>
 
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD><TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>
 
<TR>
<TH>Pulse aquí:</TH>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
 
</TABLE>
</CENTER>
</FORM>

 
Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:19:21 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
11. Imagenes
« Respuesta #11 en: Julio 19, 2009, 10:47:16 am »
11.- Imagenes
 
Introduccion

 
Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráfico utilizado se pueden conseguir efectos realmente sorprendentes.
Existen dos formas de mostrar una imagen en una página HTML, la primera es mostrar la imágen en línea, o sea, la imagen se visualiza automáticamente al cargar la página; la segunda es mediante la activación de un enlace de hipertexto que provoque la visualización de la imagen.

Existen diversos formatos de imagenes . Los formatos GIF y JPEG son interpretados directamente por el visualizador. Se puede usar cualquier otro formato como el MPG (vídeo), pero en este caso el visualizador llamará a un programa auxiliar, que previamente se habrá definido, para que sea éste el que visualice el fichero. La desventaja de las imágenes en formatos no tratados por el propio visualizador es que no se verá el texto junto con la imagen, y por tanto no se podrá imprimir la página compuesta.

Para que todos los browsers puedan comprender el formato en el que está codificado la imagen, se ha hecho una normalización con el estándar GIF (Graphics Interchange Format). Se trata de un formato comprimido pensado para optimizar el tiempo de telecarga que permite el tratamiento de imágenes en colores (256 como máximo) o niveles de gris.

 
IMG

 
Este elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="dirección_URL_del_fichero_gráfico">
Ejemplos:

Imagen situada en un fichero local:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="images/wmelon.gif">
Imagen residente en un servidor:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="http://www.iconbazaar.com/misc/apple.gif">
Esta última opción de insertar una imagen de un servidor exterior en un texto no es muy recomendable ya que ralentiza mucho la carga de la página y además no se asegura que la imagen pueda ser siempre accedida. Realmente el resultado del ejemplo sería ver directamente la imagen, no un enlace a ésta, pero como se ha dicho anteriormente esto puede dar problemas al cargar la página. Esta opción, por tanto, se utiliza sólo en casos excepcionales de imágenes que son actualizadas periódicamente (p.e: un mapa metereológico).

Si el fichero indicado no es encontrado el browser mostrará un símbolo en lugar de la imagen, indicando el error. Por ejemplo:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="directorio/imagen.gif">
En los documentos HTML se suelen insertar diversos iconos con significados implícitos, como es el caso de "página en construcción":

Este elemento permite además los siguientes atributos:

* ALT: Define un texto alternativo que sustituirá a la imagen en caso de que el browser no sea capaz de tratar imagenes. Esto es importante sobretodo cuando la imagen soporta un enlace. Por ejemplo:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="http://www.tecnohacker.com/images/toucan.gif" ALT="Imagen de un TUCAN">
* ALIGN: Situa la imagen en la posición que se le indique respecto a la línea de texto en la que está. Este atributo se explica con mayor detalle en el apartado que viene a continuación.

 
El atributo ALIGN

 
Alinea la imagen, según la posición que se le indique, respecto a la línea de texto en la que está. Puede tomar los siguientes valores:

1. TOP: alinea la parte superior de la imagen con la línea actual.
2. MIDDLE: alinea el centro de la imagen con la línea actual.
3. BOTTOM: alinea la base de la imagen con la línea actual.

Ejemplos:

 
Código: You are not allowed to view links. Register or Login
Parte superior de la imagen <IMG SRC="http://www.tecnohacker.com/images/flor.gif" ALIGN="top">
alineada con el texto

 
Código: You are not allowed to view links. Register or Login
Parte central de la imagen <IMG SRC="flor.gif" ALIGN="middle">
alineada con el texto

 
Extensiones del Netscape

 
Estas extensiones no son reconocidas por HTML 2, sin embargo son bastante utilizadas por muchos autores de páginas HTML.

* ALIGN: Además de los valores ya definidos anteriormente para el atributo ALIGN , el Netscape permite la utilización de dos nuevos valores. Estos permitirán que el texto fluya alrededor de la imagen con una regulación del espacio vertical (atributo VSPACE) y del espacio horizontal (atributo HSPACE).

* WIDTH: Redefine el ancho de la imagen.

* HEIGHT: Redefine el alto de la imagen.

* BORDER: Dibuja un marco alrededor de la imagen.

* VSPACE: Define el margen vertical a dejar entre la imagen y el texto.

* HSPACE: Define el margen horizontal a dejar entre la imagen y el texto.

Para poder saltar la imagen y que el texto continue debajo de ésta se ha definido el atributo CLEAR para el elemento de salto de línea <BR>: <BR CLEAR>.

A continuación se mostrarán varios ejemplos para aclarar lo explicado en este apartado:

Ejemplos:

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="http://www.tecnohacker.com/images/sebastia.gif" ALIGN="right" HSPACE=20 VSPACE=5 WIDTH=30 HEIGHT=30>
Este texto ...

Este texto estará situado a la izquierda de dicha imagen puesto que se ha definido mediante el atributo ALIGN="right" que la imagen estará situada a la derecha. Los márgenes definidos tanto vertical (VSPACE=5) como horizontalmente (HSPACE=20) serán respetados. No se ha definido un borde para la imagen.

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="http://www.tecnohacker.com/images/sebastia.gif" ALIGN="left" HSPACE=30 VSPACE=10 WIDTH=50 HEIGHT=50 BORDER=2>
Este texto ...

Esta imagen estará rodeada de un borde color negro del ancho indicado por BORDER=2. Ahora se quiere que el texto continue pasada la imagen.
Por medio del elemento <BR> con su atributo CLEAR: <BR CLEAR> este texto continua debajo de la imagen.

 
Imágenes como fondo de página

 
Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página. El valor que deberá tomar dicho atributo es la dirección donde se encuentra el fichero que contiene la imagen. La sintaxis será:

 
Código: You are not allowed to view links. Register or Login
<BODY BACKGROUND="direccion_del_fichero_grafico">
Ejemplo:

 
Código: You are not allowed to view links. Register or Login
<BODY BACKGROUND="http://www.tecnohacker.com/images/blanco51.gif">
Esta sentencia es la utilizada para definir el fondo utilizado en este mismo documento.

 
Imágenes como marcas de una lista

 
Para obtener una lista adornada con algún tipo de icono se podrán utilizar las listas de definición de la siguiente forma:

 
Código: You are not allowed to view links. Register or Login
<DL>
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaroja.gif"> Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaroja.gif"> Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaroja.gif"> Línea de texto
</DL>

Incluso se podrán anidar como en el siguiente ejemplo:

 
Código: You are not allowed to view links. Register or Login
<DL>
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaroja.gif">Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaroja.gif">Línea de texto
<DL>
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaverd.gif">Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaverd.gif">Línea de texto
<DL>
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaazul.gif">Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaazul.gif">Línea de texto
<DL>
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaamar.gif">Línea de texto
<DT><IMG SRC="http://www.tecnohacker.com/images/bolaamar.gif">Línea de texto
</DL>
</DL>
</DL>
</DL>

 
Animaciones

 
Una nueva posibilidad de algunos browsers es la posibilidad de presentar gráficos con animación. Los gráficos animados en formato GIF permiten almacenar secuencias de imagenes en un solo fichero, las cuales forman animaciones que pueden ser visualizadas directamente por el browser. No hay que confundir estos gráficos con los vídeos en formato MPG que no son tratados por el browser sino por una herramienta auxiliar.
La forma de introducir estas animaciones en un documento es la misma que para una imagen fija.

 
Código: You are not allowed to view links. Register or Login
<IMG SRC="http://www.tecnohacker.com/images/frogani.gif">
Pulsando sobre el botón de Stop del browser la animación se detendrá en la imagen de la secuencia en la que esté.

Los visualizadores que no soportan este efecto representarán solamente la primera o la última de las imágenes de la secuencia. Por esto es conveniente no comenzar o terminar las secuencias con una imagen vacía.

 
Imágenes y enlaces

 
Los enlaces hipertexto pueden ser también definidos sobre imágenes de tal forma que al picar con el ratón sobre algún punto de la superficie de éstas, se pase al documento correspondiente. Esto suele ser utilizado sobre todo para introducir botones de navegación en las páginas HTML.
Ejemplos:

 
Código: You are not allowed to view links. Register or Login
<A HREF="forms.htm"><IMG SRC="http://www.tecnohacker.com/images/boton1.gif"></A>
<A HREF="#inicio"><IMG SRC="http://www.tecnohacker.com/images/boton2.gif"></A>
<A HREF="simbolos.htm"><IMG SRC="http://www.tecnohacker.com/images/boton3.gif"></A>

Una imagen que actúa de hiperenlace se distingue mediante un borde de color alrededor de ésta, como puede observarse en el ejemplo anterior.
Si en un enlace se indica la dirección de una imagen dicha imagen no será cargada junto con la página sino que será cargada sólo en el caso de que dicho enlace sea activado.

Ejemplo:


Código: You are not allowed to view links. Register or Login
<A HREF="http://www.tecnohacker.com/images/new.gif"> Enlace a una imagen </A>

Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 05, 2010, 11:03:11 pm por dyb »

Desconectado SAT

  • Administrator
  • Gran Experto
  • *****
  • Mensajes: 4889
12.- Símbolos
« Respuesta #12 en: Julio 19, 2009, 10:49:22 am »
12.- Símbolos
 
¿Por qué hay que usar códigos?


Existen diversos sistemas operativos dentro del mundo de los ordenadores. Estos sistemas no son otra cosa que unos programas especiales que se ejecutan inmediatamente después de encender el ordenador, y son los que se encargan de darle "vida" a la máquina.
Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales que coinciden con los caracteres que tiene su teclado y algunos más que no están en el mismo, pero que se pueden escribir en pantalla por otros medios. Estas tablas, desafortunadam
ente, no son siempre las mismas, y varían de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que desde un MACintosh, o una terminal UNIX, si se escriben directamente desde el teclado.

Dado que el HTML pretende ser un lenguaje universal, y que una página debe verse como su creador desea, sin importar si se está ante un ordenador que "habla" en inglés o en español, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" (en realidad están todos, pero generalmente sólo se usa para caracteres especiales) que se escriben con un código en lugar de pulsar la tecla que lo contiene directamente.

Por ejemplo, nuestra denostada en medio mundo "Ñ" se escribirá:

       

Código: You are not allowed to view links. Register or Login
&Ntilde;  o bien &#209;
Esto habrá que hacerlo con todos los caracteres que no sean las letras del alfabeto, los números y unos pocos signos, como el punto, la coma, el guión y algunos otros. Desde luego hay que codificar todas las letras acentuadas, eñes, cedillas, etc., etc.
A continuación se muestra una tabla con todos los caracteres, también están las letras, pero éstas sólo le serán útiles en caso de necesitar escribir textos un tanto raros.

Como puede comprobar, la tabla tiene una columna con el carácter deseado seguida de su código numérico, una descripción del carácter y después un nombre corto (una especie de alias) que para los más habituales se llegan a memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y esos hay que escribirlos con el código numérico.

Generalmente, se pueden escribir directamente desde teclado todos los que no tienen alias en la tabla, los que sí tienen normalmente darán problemas en sistemas diferentes al que se ha utilizado para escribir el documento. Si tiene la seguridad de que lo que escribe en HTML sólo va a ser utilizado como ficheros locales en máquinas similares a la suya, no será necesario complicarse la vida; pero si sus páginas van a residir en un servidor WWW, cualquier tipo de máquina podrá acceder a ellas, y su aspecto no será el adecuado en algunas.

Existen multitud de editores especiales para escribir HTML, y la mayoría de ellos tienen herramientas para convertir de forma automática los caracteres especiales a su correspondient
e código. También hay paquetes de "macros" para hacer lo mismo con procesadores de texto como Word o Word Perfect.

Tabla de Caracteres
You are not allowed to view links. Register or Login

Dentro de este documento se encuentran los codigos para poner todo tipo de caracteres en HTML


Fuente: carlmycol en Portal Hacker
« Última modificación: Mayo 07, 2010, 01:17:15 am por dyb »

Desconectado Spika

  • Recien Llegado
  • *
  • Mensajes: 4
Respuesta: Guia Detallada de HTML, Aprende Este Lenguaje Desde 0
« Respuesta #13 en: Octubre 05, 2009, 02:25:51 am »
olle..no....ufff....que fuerte..!!!!
estupendo post para los que se inician en el mundo HTML......(ojala ubiese existido antes....)....o talvez lo vea facil ps ya lo manejo...pero te pasas

y estaba en portal hacker....(y no lo vi....)
Hane!!!!

Tags:
Tags:

 


SMF 2.0.11 | SMF © 2015, Simple Machines
Paginas Afiliadas
Twitter - FaceBook - Daraxblog
Designed by Smf Personal