texto

texto

Formato de texto html

...

se verán afectados todos los elementos de la lista, si por el contrario, lo añadimos a la etiqueta
• solo se verá afectado ese elemento de la lista. Ejemplo:
  • Juan
  • Pedro Pablo
  • Javier
  
  
  LISTAS ORDENADAS 11
  
  Este tipo de listas se delimitan con las etiquetas
  ...
  y cada elemento de la lista, se encuentra entre las etiquetas
• Elemento de la lista
. Las listas ordenadas admiten los siguientes atributos: START="n" : "n" es un número que indica a partir de que número va a empezar la lista TYPE="1" : Indica orden numérico. TYPE="a" : Indica orden alfabético con minúsculas. TYPE="A" : Indica orden alfabético con mayúsculas. TYPE="i" : Indica orden numérico con números romanos en minúsculas. TYPE="I" : Indica orden numérico con números romanos en mayúsculas. En el caso de que el atributo START se quiera aplicar a una etiqueta
• , en lugar de START se pondrá VALUE y afectará a los elementos de la lista que vengan a continuación. Ejemplo:
  1. Juan
  2. Pedro Pablo
  3. Javier
  
  
  LISTAS DE DEFINICIÓN Las listas de definición son listas a dos niveles, cada elemento se descompone en un nombre que ocuparía la primera línea y una definición que ocuparía las siguientes. Generalmente aparece formateada con el nombre pegado al borde izquierdo y la definición ligeramente tabulada a partir del borde izquierdo
  
  12
  
  Este tipo de lista está delimitado por la directiva

  ...

  , el título por
  TITULO
  y la definición por
  DEFINICIÓN
  La etiqueta permite definir el título de la lista, que es opcional y aparecerá en la parte superior de la misma. Esta etiqueta puede usarse como título para cualquiera de las listas. Ejemplo:

  Catalunya

  Barcelona

  Andalucia

  Córdoba

  Madrid

  Madrid

  
  
  TABLAS Las tablas permiten la representación de los datos por filas y columnas y la ubicación de los elementos dentro de un documento HTML. Se recomienda usar tablas para distribuir los elementos de la página web. En una tabla podemos introducir todo tipo de elementos : imágenes, enlaces, texto, cabeceras, formularios, etc. Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Para delimitar las tablas se utilizan las etiquetas ... . Los atributos que se emplean con la etiqueta son opcionales y modifican la tabla completa: •
  
  ALIGN: Forma en que se alineará la tabla. Solo admite valores left y right.
  
  13
  
  •
  
  BACKGROUND: permite especificar una imagen de fondo para la tabla.
  
  •
  
  BGCOLOR: permite especificar un color de fondo para la tabla.
  
  •
  
  BORDER: define el grueso de los bordes de la tabla. Por defecto será 0, sin bordes
  
  •
  
  BORDERCOLOR: permite especificar un color a los bordes de la tabla. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  BORDERCOLORLIGHT: permite el uso de un color claro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  BORDERCOLORDARK: permite el uso de un color oscuro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  CELLPADDING: es el espacio entre el borde de la celda y el contenido de esta, por defecto es 1. Si se indica 0, las celdas aparecerán sin separación.
  
  •
  
  CELLSPACING: indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto será 2. Si se indica 0 no habrá ningún espacio entre las celdas.HEIGHT: definirá el alto de la tabla, se puede indicar como valor absoluto o como porciento.
  
  •
  
  TITLE: para información, cuando se pasa el mouse por encima de la tabla, aparece como un ToolTip.
  
  •
  
  VALIGN: permite alinear verticalmente el texto mostrado en las celdas de la tabla. Admite valores top, bottom o center. 14
  
  •
  
  WIDTH: será el ancho de la tabla, se puede indicar como valor absoluto o como porciento del ancho del documento.
  
  Cada fila se ....
  
  encuentra
  
  delimitada
  
  por
  
  las
  
  etiquetas
  
  Atributos de las filas de las tablas: •
  
  ALIGN: indicará la forma en que se alinearán los textos dentro de las filas de la tabla. Admite valores center, left y right.
  
  •
  
  BGCOLOR: permite especificar un color de fondo para la fila.
  
  •
  
  BORDERCOLOR: permite especificar un color a los bordes de la fila. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  BORDERCOLORLIGHT: permite el uso de un color claro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  BORDERCOLORDARK: permite el uso de un color oscuro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0.
  
  •
  
  TITLE: para información, cuando se pasa el mouse por encima de la fila, aparece como un ToolTip.
  
  •
  
  VALIGN: permite alinear verticalmente el texto mostrado en las celdas de la fila. Admite valores top, middle, bottom.
  
  Para definir cada una de las celdas de tipo cabecera se utiliza la etiqueta Existirá una columna por cada elemento 18
  
  
  
  COLSPAN=2
  
  BGCOLOR=#FFFFFF
  
  

  Listado de Productos

  . Estas etiquetas de las tablas deben aparecer tras los elementos
  que se incluya. Aunque se puede indicar la 15 etiqueta de cierre implícitamente. no es necesario pues se asume • ALIGN: indicará la forma en que se alinearán los textos dentro de las celdas de la tabla. Admite valores center, left y right. • BGCOLOR: permite especificar un color de fondo para la celda. Por defecto el valor es 1. • HEIGHT: es usado para definir el alto exacto de la celda en pixels o en porciento. Solo es necesario determinar este valor en una celda de la fila. • NOWRAP: si aparece en cualquier celda, significa que las líneas de texto dentro de las celdas no se pueden romper en varias líneas. Por tanto si la línea es muy larga ella fijará el ancho de la celda. • ROWSPAN: especifica cuántas filas de la tabla va a ocupar esta celda en la misma columna. Por defecto el valor es 1. • VALIGN: permite alinear verticalmente el texto mostrado en las celdas de la fila. Admite valores top, middle, bottom . • WIDTH: es usado para definir el ancho exacto de la celda en píxel o en porciento. Solo es necesario determinar este valor en una celda de la fila. TABLAS (CONT...) La etiqueta	definirá cada una de las celdas de las tablas. Atributos para las celdas de las tablas: • ALIGN: indicará la forma en que se alinearán los textos dentro de las celdas de la tabla. Admite valores center, left y right. • BACKGROUND: permite especificar una imagen de fondo para la celda. • BGCOLOR: permite especificar un color de fondo para la celda. 16 • BORDERCOLOR: permite especificar un color a los bordes de la celda, es necesario que se haya definido el atributo BORDER <> 0. • BORDERCOLORLIGHT: permite el uso de un color claro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0. • BORDERCOLORDARK: permite el uso de un color oscuro independiente para dar la sensación de 3 dimensiones. Para usar este atributo es necesario que se haya definido anteriormente el atributo BORDER <> 0. • COLSPAN: especifica cuántas columnas de la tabla va a ocupar la celda actual. Por defecto el valor es 1. • HEIGHT: para definir la latura de la celda en píxel o en porciento. Solo es necesario determinar este valor en una celda de la fila. • NOWRAP: las líneas de texto dentro de las celdas no se pueden romper en varias líneas, si la línea es muy larga ella fijará el ancho de la celda. • ROWSPAN: especifica cuántas filas de la tabla va a ocupar esta celda en la misma columna, la celda se expandirá ocupando tantas filas de la tabla inicial como se especifique. Por defecto el valor es 1. • TITLE: para información, cuando se pasa el mouse por encima de la fila, aparece como un ToolTip. • VALIGN: permite alinear verticalmente el texto mostrado en las celdas de la fila. Admite valores top, middle, bottom. • WIDTH: para definir el ancho de la celda en píxel o en porciento. Solo es necesario determinar este valor en una celda de la fila. 17 Ejemplo: < TABLE BORDER=2 CELLPADDING=10 CELLSPACING=0>
  Producto	Almacen 1	Almacen 2
  Queso	7	2
  Aceite	42	15
  Lata de tomate	23	20
  Total	50	49
  Gran Total	99

  
  
  ENLACES Los enlaces son sumamente importantes cuando se trata de la web ya que ellos permiten unir los distintos documentos repartidos por toda la red, sin ellos hacer una página web sería algo así como la publicación de documentos de texto en Internet. Los enlaces generalmente tienen la siguiente estructura: Texto donde "destino" es el destino del enlace y Texto el texto que aparecerá en la pantalla del enlace,caracterizado por un color especial y que además esta subrayado. Por medio de los enlaces hipertextos podemos realizar enlaces dentro de una misma página, enlaces con otras páginas de un mismo sitio web, enlaces a otros sitios web y enlaces con una dirección de correo electrónico.
  
  ENLACES DENTRO DE LA MISMA PÁGINA Se utiliza para el caso en que tenemos una página muy extensa y necesitamos hacer un salto a una posición determinada. :Lo que hemos llamado "destino" es el destino del enlace, es una posición dentro de la misma página y se identifica porque lleva delante el un signo #, seguido del nombre de la marca. Lo que hemos llamado antes Texto es la palabra (o palabras) que 19
  
  aparecerán en la pantalla en un color diferente al resto del texto y en forma de hipertexto. Su estructura es: Texto Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: Supongamos que queremos poner un enlace para ir al comienzo del documento, la etiqueta entonces quedará de la siguiente forma: Inicio Y en el principio del documento debemos poner la etiqueta: La primera etiqueta sería la orden de ir a una posición determinado y la segunda es esa posición.
  
  ENLACES CON OTRA PÁGINA DEL MISMO SITIO WEB Lo más común es que tengamos un sitio web con varias páginas. Para los enlaces entre páginas sustituimos lo que hemos denominado "destino" (el destino del enlace) por el nombre del fichero. Texto Digamos que queremos establecer enlaces hacia la página 2 desde otras páginas. Pues en cada página se debe escribir los siguiente: Ir a la pág 2 Si queremos que vaya a una posición concreta de otra página tenemos que colocar una marca y completar el enlace con la referencia a esa marca exactamente detrás del nombre de la pagina: (Este es un ejemplo de una marca que se debe poner en la página 2) 20
  
  De esta forma se hace referencia a la marca anterior. Ir a la marca posición en la pág 2 desde otra página
  
  ENLACES CON UNA PÁGINA FUERA DE NUESTRO SITIO Si se quiere enlazar alguna página que no forma parte de nuestro sitio web es necesario conocer su URL(Uniform Resource Locator). Una vez conocida la dirección (URL), la colocamos como destino de nuestro enlace. Ejemplos de enlaces a url reales a las cuales usted puede acceder con sólo poner estos enlaces en una página. http://www.comandos-linux.we.bs http://www.negocio-rentable.we.bs
  
  ENLACES CON UNA DIRECCIÓN DE E-MAIL Sustituimos el destino del enlace por mailto: seguido de la dirección de correo electrónico. La estructura de la etiqueta quedaría: Texto del enlace
  
  dirección
  
  electrónica
  
  Se abrirá el programa de correo predeterminado con la dirección escrita. Podemos lograr que el asunto del mensaje aparezca, se debe agregar lo siguiente: ?subject=Asunto deseado Quedando la etiqueta de la siguiente forma: Nombre 21
  
  IMÁGENES QUE SIRVEN COMO ENLACES Se puede utilizar una imagen como enlace a otra página. Se utilizan imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen. La sintaxís para estos enlaces es la siguiente: Ejemplo:
  
  ENLACES A SONIDO La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML: Saludo de Bienvenida
  
  URL Para definir el destino de los hiperenlaces se utilizan las URL , sirevn para referenciar imágenes y cualquier otro fichero que quiera incluir dentro de un documento HTML. Su sintaxis es la siguiente:
  
  servicio://máquina.dominio:puerto/camino/fichero servicio: http: Esta parte de la url es el servicio invocado para transmitir páginas web y el que se usa en los enlaces. Máquina.dominio : Este componente de la url Indica el servidor que proporciona el recurso, puede ser, o bien una serie de cuatro números entre 0 y 255 (123.3.5.65) o bien algo más fácil de recordar como es una serie de palabras separadas por puntos . Ej www.yahoo.com Puerto: Generalmente no se indica, ya que el servicio 22
  
  predetermina uno. Camino: Se refiere a una serie de directorios separados por el símbolo /. http://www.comandos-linux.we.bs http://www.negocio-rentable.we.bs
  
  URL absolutas y relativas Una url absoluta es aquella en la cual se indican todas sus partes, mientras que en las url relativas se toma todo aquello que falte de la url en la cual esta en enlace, siempre comienza por un nombre de directorio o por un nombre de fichero asumiendo el servicio y el servidor actual. Las url relativas puede comenzar por: •
  
  Una barra / , que indica que el camino del fichero se especifica desde el directorio raíz del servidor.
  
  •
  
  Dos puntos y una barra ../ significa subir un nivel en la estructura del directorio.
  
  •
  
  Un nombre de fichero o directorio, considerándose este a partir del directorio actual.
  
  Formularios Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en el que se desee la interacción con el usuario. En los formularios se podrán definir distintos tipos de recuadros de diálogo, botones de selección, menús de múltiples opciones..., para permitir obtener los datos de una manera más intuitiva. Los formularios están delimitados por la directiva
  y su cierre
  23
  
  Estructura de los formularios
  ...
  
  
  METHOD="metodo"
  
  •
  
  ACTION="action". Donde "action" es la dirección URL del programa CGI que va a interpretar la entrada del usuario.
  
  •
  
  METHOD="metodo". Donde "metodo" es el método de transferencia de datos, en principio puede ser cualquiera de los métodos reconocidos por http.
  
  •
  
  ENCTYPE="enctype". mecanismo utilizado formulario.
  
  Donde "enctype", define para codificar el contenido
  
  el del
  
  El cuerpo de los formularios, esta compuesto por una etiqueta por cada uno de los datos que integremos en el formulario y dependiendo de lo que necesitemos, por <SELECT> y . Su formato general es: <INPUT TYPE="type" SIZE="size"> •<br /> <br /> NAME="name"<br /> <br /> VALUE="value"<br /> <br /> TYPE="type". Donde "type" es el tipo de datos que vamos a introducir en formulario, puede tomar los siguientes valores: ○<br /> <br /> TEXT. Es el valor por defecto de este atributo, e indica que se trata de una entrada de datos formada por una línea de texto. El atributo NAME define el nombre que recibe la variable en la que se almacenará la entrada; SIZE es el tamaño en caracteres de la ventana de visualización, podemos añadir un atributo MAXSIZE, que es el tamaño máximo de caracteres que se pueden introducir, Con el atributo VALUE se puede dar un valor inicial aunque no es lo usual.<br /> <br /> 24<br /> <br /> Ejemplo: <form> <input type=“text” maxlength=15> </form> ○<br /> <br /> name="Carnet"<br /> <br /> size=10<br /> <br /> PASSWORD. Ttexto en el que se enmascaran los datos, sustituyéndose por asteriscos, tiene los mismos atributos que el tipo TEXT.<br /> <br /> Ejemplo: <form> <input type="password" name "pwd"> </form> ○<br /> <br /> CHECKBOX. Casilla de selección de los formularios. Solo tiene dos valores, si el usuario la marca, la variable se igualará a ON. Se añade el atributo CHECKED para marcar la casilla desde el inicio.<br /> <br /> Ejemplo: <form> <input type="checkbox" value="linux">Linux <input type="checkbox" value="windows">Windows </form> ○<br /> <br /> name="PC1" name="PC2"<br /> <br /> RADIO. Permite elegir una opción entre varias. Para todas las opciones, el atributo NAME será el mismo, el atributo VALUE almacenará el nombre de cada opción y será el valor que reciba la variable. NAME="name". Como ya hemos visto antes "name" es el nombre de la variable donde vamos a recibir el dato. VALUE="value". Donde "value" representa el valor por defecto que tomará la variable. En el caso de que el tipo sea text se visualizará y en los otros casos no.<br /> <br /> Ejemplo: 25<br /> <br /> <form> <input type="radio" name="media" value="cd" checked>CD-ROM <input type="radio" name="media" value="dk">Disquete </form><br /> <br /> Etiqueta TEXTAREA Esta etiqueta es muy utilizada en los formularios, es una variante de la etiqueta input, del tipo text, muestra un área de múltiples líneas. Su formato es el siguiente: <TEXTAREA NAME="name" ROWS="rows">Texto
  
  COLS="cols"
  
  "name" es el nombre de la variable que va a almacenar el texto, "cols" es el numero de caracteres por línea y "rows" es el numero de líneas. Ejemplo:
  Observaciones:
  
  
  rows=7
  
  Etiqueta SELECT Esta etiqueta de formularios nos permite hacer una lista desplegable Su formato es: <SELECT NAME="name"> Opcion 1 Opcion 2 Opcion 3 26
  
  El atributo NAME representa la variable que va a recibir el valor VALUE de la opción escogida, SELECTED indica la opción por defecto. Ejemplo: <select name="Colores" size="1"> Rojo Amarillo Verde Azul Blanco Violeta
  
  Botones de envío y borrado en formularios formato: •
  
  "type" : Puede ser SUBMIT que se emplea en los formularios para envíar los datos ó RESET cuya finalidad es borra los datos introducidos restableciéndo el formulario al estado original.
  
  •
  
  "value" : Es la descripción que aparecerá en el botón.
  
  Marcos ó Frames Un marco es una ventana independiente dentro de la ventana del navegador. Cada marco tiene sus bordes y sus barras de desplazamiento. Cada página se dividirá en varias páginas independientes. Para crear los marcos se necesita remos una página web específica, llamado documento de definición de marcos. En él se especifica el tamaño y posición de cada marco y el documento HTML que contendrá. 27
  
  En el documento de definición de marcos, el cuerpo del documento se inserta entre las marcas y . La etiqueta < FRAMESET ... > define el tamaño, cantidad y forma de los marcos a utilizar. Los marcos pueden ser horizontales o verticales y se pueden cambiar los porcentajes del tamaño de dichos marcos tanto como se desee siempre y cuando sumen 100%. Los atributos ROWS y COLS del permiten precisar la forma de los diferentes paneles. ROWS: Se utiliza para dividir la zona en subzonas horizontales. Su 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: •
  
  n: indica la altura de la subzona en píxels.
  
  •
  
  n%: indica la altura de la subzona expresada en porcentajes del tamaño de la zona madre.
  
  •
  
  n*: n es opcional. El carater * indica al browser que debe dar a la zona todo el espacio aún disponible.
  
  COLS: Se utiliza para dividir la zona en subzonas verticales. Su sintaxis es: COLS="altura_zona_1, altura_zona_2,...,altura_zona_n" Ejemplo: Uso de los marcos para dividir una zona en tres. ... ... 28
  
  El FRAMEBORDER, cuya sintaxis es FRAMEBORDER="n", sirve para definir la barra de separación entre frames. n es un valor en pixeles, si es cero el borde desaparece
  
  Etiqueta La etiqueta < FRAME > se emplea con los marcos para definir la información que será desplegada en cada una de las partes en que fue dividida la pantalla, siempre de izquierda a derecha. Primero se muestra la información del marco de la izquierda con el contenido del documento HTML especificado y después el marco de la derecha. Debe existir una etiqueta < FRAME > por cada marco definido en FRAMESET. Es la etiqueta utilizada en los marcos para caracterizar las subzonas definidas, tiene los siguientes atributos: •
  
  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"
  
  •
  
  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_zona"
  
  •
  
  MARGINWIDTH: Se utiliza para precisar el número de píxeles entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. Su sintaxis es : MARGINWIDTH="n"
  
  •
  
  MARGINHEIGHT: Se utiliza para precisar el número de píxeles entre los bodes superior e inferior de la zona y el documento HTML a visualizar. Su sintaxis es: MARGINHEIGHT="n"
  
  •
  
  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
  
  29
  
  browser (SCROLLING="auto"). Su sintaxis es: SCROLLING="yes/no/auto"
  
  •
  
  NORESIZE: No permite que el usuario modifique el tamaño de la zona. Cuando se hace uso de marcos y este atributo no se precisa es posible variar una zona desplazandola mediante el ratón.
  
  Etiqueta Esta etiqueta utlilizada en los marcos indica a todo navegador 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 . Los navegadores ignorarán las marcas FRAMESET y NOFRAMES no así el texto comprendido entre ellas. Si el navegador es capaz de gestionar paneles interpretará estas etiquetas y sabrá que debe ignorar el texto comprendido entre ellas. <TITLE>Un documento con marcos 30
  
  31