Tema 1. HTML                       Diseño y Programación para el Internet. PBM                                           H...
Tema 1. HTML                      Diseño y Programación para el Internet. PBM                   Tamaño mayor <H1>         ...
Tema 1. HTML                          Diseño y Programación para el Internet. PBM    El resultado será:    Texto 1, texto ...
Tema 1. HTML                      Diseño y Programación para el Internet. PBM       <HR NOSHADE WIDTH=400 SIZE=4>   5) Com...
Tema 1. HTML                   Diseño y Programación para el Internet. PBM                    Cabecera 1                  ...
Tema 1. HTML                       Diseño y Programación para el Internet. PBM    4. Estilos Lógicos , estilo de párrafo  ...
Tema 1. HTML                   Diseño y Programación para el Internet. PBM                                                ...
Tema 1. HTML         Diseño y Programación para el Internet. PBM                                    <li>Fichero de sonido<...
Tema 1. HTML                  Diseño y Programación para el Internet. PBM            El número que se pone en el atributo ...
Tema 1. HTML                      Diseño y Programación para el Internet. PBMVI. HiperenlacesEl elemento <A> se utiliza pa...
Tema 1. HTML                        Diseño y Programación para el Internet. PBMVII. TablasLa estructura de una tabla se de...
Tema 1. HTML                    Diseño y Programación para el Internet. PBM    Ejemplo:                        Vocales    ...
Tema 1. HTML                     Diseño y Programación para el Internet. PBM      Ejemplo:                                ...
Tema 1. HTML                       Diseño y Programación para el Internet. PBM    4. Las imágenes externas: Este tipo de i...
Tema 1. HTML                       Diseño y Programación para el Internet. PBM                        ROWS es una lista de...
Tema 1. HTML           Diseño y Programación para el Internet. PBM           SCROLLING: Indica si la zona debe poseer una...
Tema 1. HTML                      Diseño y Programación para el Internet. PBM                           o   _parent, indic...
Tema 1. HTML                          Diseño y Programación para el Internet. PBM                                         ...
Tema 1. HTML                   Diseño y Programación para el Internet. PBM       <FORM METHOD="pot" ACTION=" cgi_bin/inscr...
Tema 1. HTML                      Diseño y Programación para el Internet. PBM                                      <form> ...
Tema 1. HTML                      Diseño y Programación para el Internet. PBM                                  <option>Cob...
Upcoming SlideShare
Loading in …5
×

2. html

470 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
470
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2. html

  1. 1. Tema 1. HTML Diseño y Programación para el Internet. PBM HTMLI. Marcas o tagsLas marcas delimitan elementos de un documento como cabeceras, párrafos, etc., y sonutilizadas para dar un tratamiento diferente al texto que se encuentre entre las marcas.En HTML las marcas se delimitan con los signos < (inferior a) y > (superior a). Un textomarcado tendrá por tanto este aspecto: ...texto normal <marca> texto afectado por la marca </marca> resto del texto...Un ejemplo podría ser resaltar un texto en negrita, para ello se emplea la marca <B> y quedaríade la siguiente forma: ...texto normal <B> texto en negrita </B> resto del texto...II. Atributos de las marcasAlgunas marcas pueden admitir atributos, pudiendo tener cada uno de estos atributos un valor.Este valor va entre comillas (") si dicho valor es alfanumérico. <marca atributo1=numérico atributo2="alfanumérico">Ejemplo: <pre width=50> <a href="/home/default.html">III. Estructura de los documentos 1. Cabecera: La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Dentro de la cabecera podemos destacar el título que indica el nombre del documento <TITLE> </TITLE>. <HTML> <HEAD> <TITLE> Bienvenido <TITLE> </HEAD> ….Cuerpo del documento </HTML> 2. Cuerpo: El resto del documento residirá entre las marcas <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML: <HTML><HEAD><TITLE>Bienvenido a la guía rápida</TITLE></HEAD> <BODY> Documento... </BODY> </HTLM> A continuación describiremos algunos elementos que pueden aparecer dentro del cuerpo. 3) Encabezado: Los encabezados se emplean para dividir los documentos en secciones o más concretamente para marcar los títulos de esas secciones. Las marcas son del tipo <H#> título </H#>, donde # puede ser un número cualquiera entre 1 y 6. Página 1 de 21
  2. 2. Tema 1. HTML Diseño y Programación para el Internet. PBM Tamaño mayor <H1> Tamaño mayor</H1> Tamaño menor <H6>Tamaño menor</H6>4) Definición de bloques: 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> 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>. 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. <PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el browser, respetando el formato con el que fue escrito en el fichero fuente HTML. Ejemplo: El resultado será: <PRE> Esto es un texto preformateado, por tanto se Esto es un texto preformateado, por tanto se respetan los espacios y los saltos de respetan los espacios y los saltos de carro, carro, como podrán observar. como podrán observar. </PRE> <ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado. Ejemplo: Esto dará como resultado: <ADDRESS> Tekin Tontu Tekin Tontu <BR> 77A Wellington Rd 77A Wellington Rd <BR> Auburn 2144, NSW Auburn 2144, NSW <BR> Australia Australia <BR> e-mail tekin@cis.com e-mail tekin@cis.com <BR> </ADDRESS> <BLOCKQUOTE> Sirve para representar párrafos tabulados por la izquierda o por la derecha. Ejemplo: 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> Página 2 de 21
  3. 3. Tema 1. HTML Diseño y Programación para el Internet. PBM El resultado será: 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. <BR> Este elemento solo tiene marca inicial e indica un salto de línea. Ejemplo: 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: 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. <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. Ejemplo: <DIV ALIGN=LEFT> Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda, </DIV> <DIV ALIGN=RIGHT> Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha, </DIV> <DIV ALIGN=CENTER> Texto centrado, texto centrado, texto centrado, texto centrado</DIV> Esto dará como resultado: 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 centrado, texto centrado, texto centrado, texto centrado <HR> Solo tiene marca inicial y se emplea para representar 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: <HR NOSHADE> <HR WIDTH=250 SIZE=3> <HR WIDTH=250 SIZE=6> Página 3 de 21
  4. 4. Tema 1. HTML Diseño y Programación para el Internet. PBM <HR NOSHADE WIDTH=400 SIZE=4> 5) Comentarios: Todo texto que empiece por <!...comentario...> será ignorado por el browser, y por lo tanto no será visible. Esto sirve al autor del documento para comentar su fichero fuente. <!-- Esto es una línea de comentarios -->IV. Fondos y colores de texto a) Fondos Un cierto número de atributos de la marca BODY permiten controlar el color del fondo de la ventana del browser, el color de los caracteres del texto, y finalmente el color de los enlaces: < BODY atributo1 atributo2 atributo3 ... atributoN >  El atributo BGCOLOR: Este atributo permite escoger un color para el fondo de la página <BODY BGCOLORS="#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.  El atributo BACKGROUND: Este atributo especifica una imagen residente en el servidor la cual se utilizará como fondo de página. <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. <BODY TEXT="#rrggbb">  Los atributos LINK, VLINK y ALINK: Controlan el color de los enlaces: LINK color del enlace que aún no ha sido visitado. <BODY LINK="#rrggbb"> ALINK: color muy fugaz que aparece cuando se hace clic sobre el enlace <BODY ALINK="#rrggbb"> VLINK es el color de un enlace que ya ha sido visitado <BODY LINK="#rrggbb"> <BODY LINK="blue" ALINK="red" VLINK="navy"> b) Letras 1. Título <Hn>: Es la marca que asigna el tamaño de los caracteres, donde n 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. Página 4 de 21
  5. 5. Tema 1. HTML Diseño y Programación para el Internet. PBM Cabecera 1 <h1> Cabecera 2 <h2> Cabecera 3 <h3> Cabecera 4 <h4> <h5> Cabecera 5 Cabecera 6 <h6>2. Tamaño de la letra y color <FONT>: La marca FONT permite actuar sobre bloques distintos de caracteres situados en la misma línea. a) El atributo TYPE: Especifica el tipo de letra: a. Times New Roman b. Windsor c. Algerian d. MS Sans Serif e. Roman f. Arial g.  (WingDings) b) El atributo SIZE: Regula la altura de los caracteres (1 a 7). Tamaños: 1 2 3 4 5 6765432 1 c) El atributo COLOR: Especifica el color de los caracteres. CO LO RE S . D E . L ET RA S Ejemplo: <font size=3 color=#008000> texto... <font>3. Estilo Físico o estilo de los caracteres Negrita <b> Cursiva <i> Subrayado <u> Resaltado <em> Destacado <strong> Código <code> Citas <cite> Máquina de escribir <kbd> Ejemplos <samp> Teletipo <tt> Variables <var> Negrita y cursiva <b><i> Página 5 de 21
  6. 6. Tema 1. HTML Diseño y Programación para el Internet. PBM 4. Estilos Lógicos , estilo de párrafo <CITE> Cita <CODE> Código fuente <DFN> Definido <EM> Enfatiza <KDB> Palabra clave <SAMP> Ejemplo <STRONG> Resalta <VAR> Variable 5. Combinación de tamaño y estilo: Todo browser trabaja bajo el efecto de sólo un par cerrado de marcas. Ejemplo: <i> <font size=5> <b>Hola,</b> cómo Hola, cómo estás? <font size=6> estás? </font> </font> </i>V. ListasLas listas se utilizan para dividir el documento así como para efectuar numeraciones de objetos,pero la diferencia con los procesadores de texto es que no permite la numeración automáticapara niveles jerárquicos diferentes: 1. Ficheros de sonido 1. Ficheros HTML 1.1 Ficheros WAV 2. Ficheros de texto 2. Ficheros de imágenes 3. Ficheros de imágenes 2.1 Ficheros GIF 2.2 Ficheros BMPEs posible automáticamente... No es posible automáticamente...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> 1. Lista de definición DL, DT, DD: El elemento DL abre una lista descriptiva. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar, designar cada uno de los elementos, la parte definición y el propio elemento. El atributo COMPACT asocia a la marca DL (<DL COMPACT>) permitirá al browser mostrar en la misma línea el elemento y la primera línea del bloque. Ejemplo: Página 6 de 21
  7. 7. Tema 1. HTML Diseño y Programación para el Internet. PBM Código correspondiente: ASCII juego de caracteres que asigna valores <dl compact> numéricos estándar a las letras, cifras y <dt>ASCII<dd> juego de caracteres que asigna signos de puntuación. valores numéricos estándar a las letras, cifras y signos de puntuación. FUENTE Conjunto de estilos que posee una categoría de caracteres (negrita, <dt>FUENTE<dd> Conjunto de estilos que posee cursiva...) una categoría de caracteres (negrita, cursiva...) </dl>2. Listas regulares LI,UL,OL : a) <LI> Esta marca precede a cada objeto de la lista. 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 sintaxis general de estas listas será: <marca de comienzo> <li> Primer elemento de la lista <li> Segundo elemento de la lista <li> ... <marca de cierre> b) <UL> Permite generar listas no ordenadas, cada uno de los elementos de la listas irá precedido por un símbolo que puede variar según el nivel de anidamiento de la lista. Ejemplo de lista no ordenada <H3>Ejemplo de lista no ordenada</H3> <UL>  Fichero HTML <LI>Fichero HTML</LI> <LI>Fichero de imagen</LI>  Fichero de imagen <LI>Fichero de sonido</LI>  Fichero de sonido <LI>Fichero de vídeo</LI>  Fichero de vídeo <LI>Fichero de ejemplo</LI>  Fichero de ejemplo </UL> Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se verá: o Primera línea <UL TYPE=CIRCLE> o segunda línea <LI>Primera línea <LI>Segunda línea </UL> También puede usarse el valor SQUARE. Así:  Primera línea <UL TYPE=SQUARE>  segunda línea <LI>Primera línea <LI>Segunda línea </UL> c) <OL> Esta marca se utiliza para listas ordenadas en las que cada marca LI incrementa el número que se visualizará delante del elemento de la lista. Ejemplo de lista ordenada: Código correspondiente: 1. Fichero de imagen 2. Fichero de sonido <ol> 3. Fichero de video <li>Fichero de imagen</li> Página 7 de 21
  8. 8. Tema 1. HTML Diseño y Programación para el Internet. PBM <li>Fichero de sonido</li> <li>Fichero de video</li> <ol>Las listas ordenadas no sólo se pueden ordenar con números. También sepueden utilizar letras y numeración romana tanto en mayúsculas comominúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con lossiguientes 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: <OL TYPE=A> <LI>Primera línea A. Primera línea <LI>Segunda línea B. Segunda línea <LI>Tercera línea C. Tercera línea <LI>Cuarta línea D. Cuarta línea </OL>Esto es una lista ordenada con letras minúsculas: <OL TYPE=a> <LI>Primera línea a. Primera línea <LI>Segunda línea b. Segunda línea <LI>Tercera línea c. Tercera línea <LI>Cuarta línea d. Cuarta línea </OL>Esto es una lista ordenada con numeración romanaen mayúsculas: <OL TYPE=I> <LI>Primera línea I. Primera línea <LI>Segunda línea II. Segunda línea <LI>Tercera línea III. Tercera línea <LI>Cuarta línea IV. Cuarta línea </OL>Esto es una lista ordenada con numeración romanaen minúsculas: <OL TYPE=i> <LI>Primera línea i. Primera línea <LI>Segunda línea ii. Segunda línea <LI>Tercera línea iii. Tercera línea <LI>Cuarta línea iv. Cuarta línea </OL>En algunos casos puede interesarnos que la lista no comience por el número 1(por ejemplo si es una lista que continúa en otra página). Se puede conseguircon el atributo START combinado con TYPE.Esto es una lista ordenada con letras mayúsculas yque comienza por la E: <OL TYPE=A START=5> <LI>Primera línea E. Primera línea <LI>Segunda línea F. Segunda línea <LI>Tercera línea G. Tercera línea <LI>Cuarta línea H. Cuarta línea </OL> Página 8 de 21
  9. 9. Tema 1. HTML Diseño y Programación para el Internet. PBM 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. 3. Listas anidadas Código: <ul> <li>Ficheros HTML  Ficheros HTML <ol> 1. Ficheros de prueba <li>Ficheros de prueba  prueba1.html <ul>  prueba2.html <li>prueba1.html</li>  prueba2.html <li>prueba2.html</li> 2. Ficheros de ejemplos <li>prueba2.html</li> 3. Ficheros del servidor </ul>  Ficheros de imágenes <li>Ficheros de ejemplos  Ficheros de sonido <li>Ficheros del servidor  Ficheros de vídeo </ol> <li>Ficheros de imágenes <li>Ficheros de sonido <li>Ficheros de vídeo </ul>4. Listas de Directorio 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 sintaxis 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 de lista de directorio <H3>Ejemplo de lista directorio</H3> <DIR> <LI>Español</LI>  Español <LI>Inglés</LI>  Inglés <LI>Francés</LI>  Francés <LI>Alemán</LI>  Alemán </DIR>5. Listas de Menús Las listas de menú son similares a las listas sin orden. En el Netscape no se ve diferencia entre una y otra. La única diferencia es la sintaxis 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>. Ejemplo de lista de menu <H3>Ejemplo de lista directorio</H3> <MENU> <LI>Opción 1</LI>  Opción 1 <LI>Opción 2</LI>  Opción 2 <LI>Opción 3</LI>  Opción 3 </MENU> Página 9 de 21
  10. 10. Tema 1. HTML Diseño y Programación para el Internet. PBMVI. HiperenlacesEl elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Esteelemento nunca se utiliza solo, por tanto siempre vendrá acompañado por, al menos, uno de susdos atributos principales:  El atributo HREF que define un ancla de partida. 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: <A HREF="documento#etiqueta"> Zona activable </A>  El atributo NAME que define un ancla de llegada en el documento destino asignándole un nombre o etiqueta: <A NAME="etiqueta"> Zona no activable </A>  Además permite El atributo TARGET para ordenar la apertura de una nueva ventana del browser con la página indicada por HREF. Ejemplo: <A HREF="indice.htm" TARGET="ventana2"> Nueva ventana </A>Un ancla, por lo tanto, sirve para especificar la partida y la llegada de un enlace hipertexto( <A> ). 1. El atributo HREF, ancla de partida hacia un enlace externo: Crea un enlace hacia un servidor situado en algún punto de Internet, o hacia un documento propuesto por dicho servidor. La marca especifica el atributo HREF cuyo valor precisa el URL del documento a recuperar: zona_activable <A HREF="url_de_destino"> zona_activable</A> 2. El atributo HREF, ancla de partida a un enlace interno: Crea un enlace a un punto determinado del fichero en ejecución. Para ello hay que colocar un ancla activa (ancla de partida) y un ancla inactiva (ancla de llegada). El ancla de partida se define de la siguiente forma: zona_activable_con_atributos_visuales <A HREF=#etiqueta>zona_activable_con_atributos_visuales</A> 3. El atributo NAME, ancla de llegada: Define el ancla de llegada, lugar que se podrá acceder haciendo un clic sobre un ancla de partida. zona_no_activable_sin_atributos_visuales <A NAME="label">zona_no_activable_sin_atributos_visuales</A> Página 10 de 21
  11. 11. Tema 1. HTML Diseño y Programación para el Internet. PBMVII. TablasLa 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 correspondiente. Estaestructura 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 1. La marca <TABLE>: Una tabla se define entre las marcas <TABLE> y </TABLE>. Esta primera marca regula la presentación general de la tabla mediante tres atributos: a) BORDER define el grosor del marco exterior b) CELLPADDING define el espacio alrededor del texto de una celda c) CELLSPACING define el espacio entre celdas d) WIDTH define la anchura de la tabla relativa a la anchura de la ventana del browser. e) HEIGTH: Define el alto de la tabla, bien en porcentaje o unidades. Ejemplo: <TABLE CELLPADDING=10 CELLSPACING=6 BORDER=6> <TR><TD>A</TD> A B <TD>B</TD> </TR> <TR><TD>C</TD> C D <TD>D</TD> </TR> </TABLE> 2. La marca <TR>: Las marcas que definen una nueva fila son <TR> y </TR> que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila:  VALIGN (alineación vertical) que puede tomar los valores: o TOP coloca el texto en la parte superior de la celda. o BOTTOM coloca el texto en la parte inferior de la celda. o MIDDLE en el centro de la celda.  ALIGN (alineación horizontal) que puede tomar los valores: o RIGHT coloca el texto a la derecha de la celda. o LEFT coloca el texto a la izquierda de la celda. o CENTER centra el texto en la celda. Página 11 de 21
  12. 12. Tema 1. HTML Diseño y Programación para el Internet. PBM Ejemplo: Vocales ... La mas usada a <TR ALIGN="center"> <TD>a</TD> La segunda e <TR VALIGN="top"> <TD>e</TD> <TR ALIGN="right" VALIGN="bottom"> La tercera i <TD>i</TD>3. La marca <TD>: Es el elemento de inicio de una columna. Puede completarse con los atributos VALIGN y ALIGN que será entonces prioritarios sobre los mismos valores definidos en la marca <TR>. Dos atributos suplementarios, COLSPAN y ROWSPAN permiten generar celdas cuya superficie es un múltiplo de la celda elemental. La matriz de la tabla que define el número de celdas elementales se calcula por el número de líneas de la tabla (número de instrucciones TR), multiplicado por el número de celdas (número de celdas TD) de la línea que define más celdas (mayor número de TD). El número de celdas por línea de la tabla se calcula sobre la línea que define el mayor número de celdas. El último atributo de TD es NOWRAP que impide dividir el texto de la celda en varias líneas. Ejemplo: ... <TR ALIGN="left"> Comida Bebida Postre <TD ALIGN=left>A</TD> A B C <TD ALIGN=center>B</TD> <TD ALIGN=right>C</TD> ...4. La marca <TH>: Esta marca funciona de forma similar a TD admitiendo los mismos atributos pero se considera como una marca de título de una celda. Automáticamente centra el texto y lo pone en negrita. Ejemplo: <TABLE BORDER> <TR> <TH>Artículo</TH><TH>Referencia</TH><TH>Precio</TH>Artículo Referencia Precio <TR>Libreta 17 120 <TD>Libreta</TD> <TD>17</TD> <TD>120</TD> </TABLE>5. La marca <CAPTION>: Esta marca permite poner un título encima (atributo ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla. Página 12 de 21
  13. 13. Tema 1. HTML Diseño y Programación para el Internet. PBM Ejemplo: <TABLE BORDER> <TR> <TH>Artículo</TH><TH>Referencia</TH><TH>Precio</TH> Artículo Referencia Precio <TR> <TD>Libreta</TD> Libreta 17 120 <TD>17</TD&lgt; Provisiones <TD>120</TD> <CAPTION ALIGN=bottom> <B>Provisiones</B></CAPTION> </TABLE>VIII. Imágenes 1. La marca <IMG> <IMG> es la marca que permite incluir una imagen. Esta marca irá siempre completada por el atributo SRC que permite dar la dirección del fichero gráfico que contiene la imagen: <IMG SCR=/directorio/subdirectorio/nombre_del_fichero:gráfico> El valor del atributo SCR permite especificar un URL y es por tanto correcto encontrar imágenes definidas como sigue: <IMG SCR="http://www.mipagina.mx/imagenes/flores/rosa.gif"> 2. Alineación de imágenes: La marca <IMG> admite el atributo ALIGN que permite situar la imagen en relación a la línea de texto actual y puede tomar los siguientes valores: a) TOP para alinear la parte superior de la imagen. b) MIDDLE para alinear el centro de la imagen. c) BOTTOM para alinear la base de la imagen. Ejemplo: Lo mas nuevo!!! <IMG SCR="new.gif" align=top> Lo mas nuevo!!! Lo más <IMG SCR="new.gif" align=middle> Lo mas nuevo!!! nuevo!!! <IMG SCR="new.gif" align=bottom> Lo mas nuevo!!! Lo más nuevo!!! 3. El atributo ALT: Hay ciertos browser como por ejemplo el Lynx que están orientados a terminales no gráficos en los que no se verá la imagen incluida en un documento HTML. Para que en este tipo de browser el documento tenga la misma información se añade el atributo ALT que contiene un texto alternativo a la imagen. <IMG SCR="foto1.gif" ALT="Foto de mi fiesta"> Página 13 de 21
  14. 14. Tema 1. HTML Diseño y Programación para el Internet. PBM 4. Las imágenes externas: Este tipo de imágenes no aparecen en la pantalla cuando se carga la página sino que se crea un enlace hipertexto cuyo extremo podrá ser: una imagen GIF, JPEG, BMP, XBM u otra. Ejemplo: Da click aquí para ver las imágenes mas nuevas Da <A HREF="images/new.gif"> click aqui </A> para ver las imágenes mas nuevas 5. Las imágenes como anclas: Se puede reemplazar el texto de un ancla por una marca que define una imagen. En este caso la imagen tiene un borde de color para indicar que se trata de un enlace hipertexto sobre el que se puede hacer un clic. Ejemplo: <A HREF="images/new.gif"> <IMG SCR=""images/info.gif> </A>IX. FramesLos frames (en inglés frame = cuadro, bastidor, marco o panel) es un elemento implementadopor Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y portanto 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 elcaso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que enel caso de los frames cada zona de la pantalla es un documento HTML propio.El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio dedos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados conFRAMESET.La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame noresulte opaca a ellos se utilizará el elemento <NOFRAMES> que permite ofrecer un textoalternativo en entorno normal.Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza elatributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace dehipertexto. 1. FRAMESET: Este elemento sustituye al elemento <BODY> y permite dividir una zona en subzonas, verticalmente, u horizontalmente. Esta marca posee dos atributos:  ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es: ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n" Página 14 de 21
  15. 15. Tema 1. HTML Diseño y Programación para el Internet. PBM 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. 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 dossubzonas superiores son de tamaño idéntico y la última es el doble de las anteriores. <FRAMESET ROWS="25%,25%,50%">...<FRAMESET> <FRAMESET ROWS="*,*,2*">...<FRAMESET> 2. FRAME: Es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterización se realiza mediante 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í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"  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" Página 15 de 21
  16. 16. Tema 1. HTML Diseño y Programación para el Internet. PBM  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"  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.3. 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>.4. El atributo TARGET: 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 correspondiente al enlace. Por ejemplo: <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: <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: o _blank, indica al browser que debe crear una nueva ventana con el fin de mostrar el documento. o _self, indica que el documento se cargará en la misma zona donde se encuentra el enlace de hipertexto. o _top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal. Página 16 de 21
  17. 17. Tema 1. HTML Diseño y Programación para el Internet. PBM o _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.Ejemplos:Un frame básico. Sintaxis generalEn general, todas las páginas que contengan un frame deberán ser más o menos así: <HTML> <HEAD> <TITLE> Mi titulo ></TITLE> </HEAD> <FRAMESET COLS=*,*> <NOFRAMES> <BODY> 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)Se vería así: Y se escribiría; así:A B C <FRAMESET COLS=30%,20%,50%> <FRAME SRC="doc_a.htm"> <FRAME SRC="doc_b.htm"> <FRAME SRC="doc_c.htm"> </FRAMESETUn frame de 3 áreas horizontales (ROWS)Se vería así: Y se escribiría así:A <FRAMESET ROWS=25%,25%,50%> <FRAME SRC="doc_a.htm">B <FRAME SRC="doc_b.htm">C <FRAME SRC="doc_c.htm"> </FRAMESET>Un frame combinado de un área vertical y dos horizontales. El frame A, no podrá serredimensionado (NORESIZE).Se vería así: Página 17 de 21
  18. 18. Tema 1. HTML Diseño y Programación para el Internet. PBM Y se escribiría así: <FRAMESET COLS=20%,*> <FRAME SRC="doc_a.htm" NORESIZE> B <FRAMESET ROWS=40%,*>A <FRAME SRC="doc_b.htm"> C <FRAME SRC="doc_c.htm"> </FRAMESET> </FRAMESET>Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para eltexto (MARGINWIDTH MARGINHEIGHT)Se vería así: Y se escribiría así: <FRAMESET COLS=50%,50%> AA <FRAME SRC="doc_a.htm">AAAA <FRAME SRC="doc_a.htm" AA MARGINWIDTH=50 MARGINHEIGHT=50> </FRAMESET>X. FormulariosUn formulario es una plantilla para representar un conjunto de datos y generar en la pantallacuadros de diálogo con el lector. Se podrán tener zonas en las que se introducirá un texto,casillas de verificación, listas de selección, etc.Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas juntocon servidores, ya que las acciones asociadas son programas (generalmente scripts de CGI).Estos programas deben funcionar en un servidor al que se le proporcionan los datos de unformulario para ser procesados. 1. Declaración del formulario <FORM>: La marca <FORM> y </FORM> definen un formulario y entre ellas se situaran todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos: a. 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.  METHOD=GET: La información que se manda por este método es anexada al final de la acción que fue solicitada. El programa CGI recibirá la información en un ambiente de variables denominado QUERY_STRING  METHOD=POST: Este método transmite la información antes del URI solicitado. Los resultados se reciben en forma codificada en un archivo STDIN. Es necesario saber cuanta información se debe leer de este archivo utilizando un entorno de variables llamado CONTENT_LENGTH. b. El atributo ACTION: que define el URL de un programa (script) encargado de tratar los datos adquiridos desde el formulario. <FORM METHOD=tipo_de_metodo ACTION=URL_del_script> Página 18 de 21
  19. 19. Tema 1. HTML Diseño y Programación para el Internet. PBM <FORM METHOD="pot" ACTION=" cgi_bin/inscripcion"> Todas las marcas que se definirán tienen los siguientes atributos comunes: c. 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 d. El atributo VALUE: 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 asociado al botón cuando está pulsado.  NAME identifica el bloque de botones2. Campos de entrada <INPUT>: La marca <INPUT> servirá para definir campos para entrar un texto y botones que permiten escoger opciones. Ejemplo: Definir una zona de entrada de texto simple. < input name="identidad" > a) 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. <form> Champiñones <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: <form> Salida <input type="submit" value="Salida"> </form>  RESET: permite borrar los datos ya entrados: <form> Borrar <input type="reset" value="Borrar"> </form>  PASSWORD: permite entrar una palabra clave de forma confidencial: Página 19 de 21
  20. 20. Tema 1. HTML Diseño y Programación para el Internet. PBM <form> <input type="password" name "pwd"> </form>  CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones: <form> Macintosh <input type="checkbox" name="micro" value="mac">Macintosh <input type="checkbox" name="micro" value="pc">PC PC </form>  RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones: <form> <input type="radio" name="media" value="cd" checked>CD-ROM CD-ROM <input type="radio" name="media" value="dk">Disquete </form> Disquete  HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla <input type="hidden" name=nombre_de_variable value=valor_de_la_variable>3. Campos de selección <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 ítems 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 menú 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 selección múltiple se deriva de la presencia del atributo MULTIPLE. Ejemplos: Menú despegable: <form> <select NAME="sede"> <option>Entrada indirecta Entrada directa <option>Entrada lateral <option SELECTED>Entrada directa </select> </form> Ventana con barra de desplazamiento: ( con opción de selección múltiple ) <form> <select MULTIPLE NAME="lenguaje" SIZE="3"> Ada <option SELECTED>Ada C++ Cliper <option>C++ <option>Cliper <option>Pascal <option>Fortran Página 20 de 21
  21. 21. Tema 1. HTML Diseño y Programación para el Internet. PBM <option>Cobol </select> </form> 4. Area de texto <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. Ejemplo: <form> <textarea name="comment" rows=5 cols=40> Introduzca aquí sus comentarios </textarea> </form> Estas líneas de código muestran la siguiente ventana:XI. Símbolos 1. Símbolos mas usados &amp; & &lt; < &gt; > &quot; " 2. Otros símbolos &aacute; á © © &#182 ¶ &eacute; é « « · · &iacute; í ¬ ¬ ¸ ¸ &oacute; ó ­ ¹ ¹ &uacute; ú ® ® º º ¡ ¡ ¯ ¯ » » ¢ ¢ ° ° ¼ ¼ £ £ ± ± ½ ½ ¥ ¥ ² ² ¾ ¾ ¦ ¦ ³ ³ ¿ ¿ § § ´ ´ × × ¨ ¨ µ µ ÷ ÷ Página 21 de 21

×