Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MANUAL HTML BASICO.

6,257 views

Published on

Un sencillo manual que te permitira comprender el manejo en la creacion de paginas web dinamicas o planas con HTML.

Published in: Education
  • Be the first to comment

MANUAL HTML BASICO.

  1. 1. INTRODUCCIÓN A LAPROGRAMACIÓN WEB
  2. 2. ACTIVIDAD INTRODUCTORIA 1. ¿Qué es Website?En inglés Website o web site es un sitio (localización) en la World Wide Web quecontiene documentos (páginas web) contiene texto y/o gráficos que aparecen comoinformación digital en la pantalla de un computador. 2. ¿Qué es Intranet?Es una red de computadores privadas que utilizan tecnología Internet para compartirdentro de una organización parte de sus sistemas de información y sistemasoperacionales. 3. ¿Qué es extranet?Es una red privada que utiliza protocolos de comunicación y probablementeinfraestructura pública de comunicación. Una extranet es una Intranet que se extiendemas allá de los límites físicos de una corporación. 4. ¿Qué es Internet?Es un conjunto descentralizado de redes de comunicación interconectados que utilizanla familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que lascomponen funcionen como una red única de alcance mundial. 5. ¿Qué es Hosting?Alojamiento Web, es el servicio que provee a los usuarios de la Internet un sistema parapoder almacenar información, imagen, video o cualquier contenido aceptable en la web. 6. ¿Qué es Dominio?Es un conjunto de computadores conectados a una red que confía a uno de los equiposde dicha red la administración de los usuarios y los privilegios que cada uno de losusuarios tiene en dicha red. 7. ¿Qué es dominio geográfico?Indica el país de origen de una página web, indicando sus características propias comoel lenguaje, actividades, etc. Generalmente los dominios de servicio son de 3 letras y losgeográficos están compuestos por las 2 letras más representativas de su nombre. 8. ¿Qué es un protocolo de Internet?Es un conjunto de reglas usadas por computadores para comunicarse unas con otras através de una red. Transferencia de datos entre dos puntos finales.
  3. 3. 9. ¿Qué s TCP/IP?Se podría definir como el conjunto de protocolos básicos de comunicación, de redes,que permite la transmisión de i9nformacion en redes de ordenadores. 10. ¿Qué es HTTP?(Hyper Text Transfer Protocol). Este protocolo está diseñado para recuperarinformación y llevar a cabo búsquedas indexadas permitiendo con eficacia saltoshipertextuales, además, nos solo permite le transferencia de textos 11. ¿Qué es SMTP?(Simple Mail Transfer Protocolo). Protocolo simple de correo electrónico en u conjuntode reglas que rigen el formato y la transferencia de datos en envió de correo electrónico. 12. ¿Qué es FTP?(File Transfer Protocol). Protocolo para la transferencia remota de archivos. La cualsignifica la capacidad de enviar un archivo digital de un lugar local a uno remoto.INTRA NET (utilizados en edificios y oficinas)Interno RedEXTRA NET (utilizados dentro del perímetro de una ciudad)Externo RedHOSTING (Alojamiento para la página web)USUARIO INTRANET SERVIDOR WEBNESTOR VÁSQUEZ ROSSI Página 3
  4. 4. http://www.eluniversal.com.co 1 2 3 4 5 1. HTTP: Protocolo de transferencia de Hipertexto. 2. WWW: World Wide Web 3. NOMBRE DEL SITIO. 4. DOMINIO: a. COM: Comercial e. MIL: Militar. b. EDU: Educativo f. TV: Televisión. c. GOV: Gobierno g. NET: Tecnología. d. ORG: Organización. 5. DOMINIO GEOGRAFICO: a. CO. Colombia d. ES: España. b. AR: Argentina e. BR: Brasil c. MX: México.
  5. 5. Es el lenguaje oficial para la construcción de páginas web, el significado de la siguientees LENGUAJE DE MARCADO DE HIPERTEXTO.HTML está compuesto por un conjunto de instrucciones o comandos conocidos con elnombre de etiquetas, las cuales tiene la función de mostrar dentro de un navegador deInternet todos aquellos elementos que conforman la pagina web, los cuales son te4xtos,imagen, videos, animaciones, sonidos, etc.Las etiquetas están compuestas de la siguiente forma:<NOMBRE_ETIQUETA> </NOMBRE_ETIQUETA> Etiqueta de apertura Etiqueta de cierreLas páginas web están compuestas por un conjunto de etiquetas de las cuales 4 nospermiten desarrollar una página web rápidamente estas son: 1. <HTML> </HTML>: Su función es indagarle al navegador cual va a ser el principio y el final de la página. 2. <HEAD> </HEAD>: Representa la cabecera de la página, su función es mostrar diferentes tipos de información al inicio de una página web. Ejemplo: titulo, barra de navegador, un texto que pueda ser encontrado por los buscadores. 3. <TITLE> </TITLE>: Permite colocar un texto en la barra de titulo del navegador, esta etiqueta debe trabajar junto a la etiqueta de la cabecera. 4. <HEAD> </HEAD>: En él se coloca toda la información que necesitamos colocar en la página web.Ejemplo:<html> <head><title>MI SITIO WEB</title></head> <body>BIENVENIDO A MI PAGINA WEB </body><html>NESTOR VÁSQUEZ ROSSI Página 5
  6. 6. 1 2 3 5 1. BARRA DE MENÚ: Esta compuesta por un conjunto de opciones y herramientas que nos permite crear un nuevo documento, abrir, y guardar un documento, observa la pagina web en un navegado, etc. 2. BARRA DE HERRAMIENTAS: Contiene los diferentes botones de acceso rápido, los cuales nos permite realizar múltiples tareas. 3. SELECTOR DE DOCUMENTO: Muestra los archivos que se encuentran abiertos con el programa Textpad. 4. BIBLIOTECA DE RECORTES: Contiene una lista de opciones que nos permite insertar diferentes elementos como una etiqueta, un carácter especial, etc. 4 5. ÁREA DE TRABAJO: Es donde se escribe cada una de las etiquetas HTML, estas aparecen en diferentes colores siempre y cuando el archivo haya sido guardado con anterioridad para que se deben realizar los siguientes pasos: a. Menú archivo >> Guardar como. b. Seleccione la carpeta donde va a guardar el archivo. c. Escriba el nombre del archivo. d. Se selecciona el tipo de archivo en este caso Html. e. Clic en guardar.También para trabajar con HTML puedes trabajar con el Block de Notas, pero alguardar el archivo le debes colocar la extensión .HTML (punto HTML). Y cuando lovisualices aparece con el Icono del Internet Explores y te abrirá como una página Web.
  7. 7. Un atributo es cuando una de las propiedades o características que posee una etiqueta.Estos pueden ser modificados para cambiar la apariencia de la etiqueta dentro de lapágina web. Los atributos se escriben dentro de la etiqueta de apertura o de inicio, estosse encuentran separados por otros atributos por un espacio, a cada atributo se le debeestablecer un valor en cual debe estar encerrado entre comillas dobles.<ETIQUETA atributo1=”valor” atributo2=”valor”> Etiqueta de apertura.</ETIQUETA> Etiqueta de cierra. 1. BGCOLOR: Se utiliza para cambiar el color de fondo de la página web. 2. BACKGROUND: Permite colocar una imagen de fondo en una página web. 3. TEXT: Cambia el color del texto que se encuentra en la página web.Es utilizado dentro de los documentos o páginas web títulos o subtítulos en diferentesniveles o tamaños dándole el nivel más grande en 1 y el nivel más pequeño es 6.<H1> </H1><H12> </H2><H3> </H3><H4> </H4><H5> </H5><H6> </H6><B> </B> Coloca el texto en negrita<I> </I> Coloca el texto en cursiva.<S> </S> Coloca el texto en subrayado.<U> </U> Coloca el texto en subrayado.NESTOR VÁSQUEZ ROSSI Página 7
  8. 8. <BR> </BR> Salto de línea<CENTER> </CENTER> Centra la información.<P> </P> Crea párrafos de texto, tiene un atributo llamadoAling cuyos valores son left, rigth, center.<HR> </HR> Coloca una línea horizontal en la página web, susatributos son: a) Width: Cambia el ancho de la línea. b) Color: Cambia el color de la línea. c) Size: Cambia el grosor de la línea.<BLINK> </BLINK> Parpadeo<SUB> </SUB> Coloca el texto por debajo de la línea imaginaria<SUP> </SUP> Coloca el texto por encima de la línea imaginaria.Es aquella que representa todo el texto que se encuentra dentro del cuerpo de una páginaweb, estos permite cambiar 3 características las cuales son: a) Tipo de letra. b) Tamaño. c) Color.La etiqueta que representa la fuente es <FONT></FONT>ATRIBUTOS: 1. FACE: Permite indicar el tipo de fuente o letra que tendrá el texto dentro de la pagina. 2. SIZE: Permite modificar el tamaño de la fuente, su valor absoluto se encuentra en la escala de 1 a 7, donde 1 es la letra más pequeña y 7 la letra más grande 3. BGCOLOR: Especifica el color de la letra la cual debe ser escrito en Inglés.
  9. 9. EJEMPLO:<html> <head><title>::ANIMACIONES::</title> </head> <body bgcolor=”yellow”> <hr width=”80%”> <center><b><Font face=”snap itc” size=”7” color=”red”> MARKETING Y PUBLICICDAD </font></b></center> </hr width=”80%”> <i><font face=”book Antiqua” size=”5” color=”green”> 1º INTERNET </font></i></br> <s><font face=”cardana” size=”4” color=”orange”> 2º REDES SOCIALES </font></s><br> </body><html>Para incluir comentarios en la página Web se utiliza la etiqueta <!-- -->.Ejemplo:<!-- Esto es un comentario sobre mi pagina Web -->Los comentarios no serán mostrados por el navegador y son útiles para realizaranotaciones en el documento HTML que nos indiquen lo que estamos haciendo en unadeterminada parte del documento.Se utiliza dentro de la página web para darle movimiento a los objetos (Imágenes otextos) de una forma vertical u horizontal.ATRIBUTOS: 1. WIDTH: Ancho de la marquesina.NESTOR VÁSQUEZ ROSSI Página 9
  10. 10. 2. HEIGHT: Alto de la marquesina. 3. BGCOLOR: Color de fondo de la marquesina, el color va en inglés. 4. BEHAVIOR: Determina el tipo de movimiento, sus valores son: a. Scroll: Se desplaza dentro de la página web. b. Alternate: Rebota dentro de la pagina web. c. Slider: Se desliza dentro de la página. d. Direction: Dirección del desplazamiento de la marquesina. i. Rigth: derecha. ii. Left: Izquierda iii. Up: Arriba. iv. Down: Abajo. 5. LOOP: 6. SCROLLAMOUNT: Determina la velocidad de desplazamiento. 7. SCROLLDELAY: Determina la velocidad de retardo de la marquesina. 8. HEIGHT: Anchura de la marquesina. 9. WIDTH: Altura de la marquesina 10. HSPACE y VSPACE: Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical. A continuación un ejemplo de marquesina sencilla: <marquee> Texto desplazandose </marquee>Que podremos ir complicando hasta conseguir algo cómo:Este ejemplo crea una marquesina vertical que se para al pasar el mouse por encima,utiliza las funciones marquesina.start() y marquesina.stop() para arrancar y parar lamarquesina y los eventos onmouseover y onmouseout para detectar la posición delmouse- <marquee direction="up" height="200" width="100%" onmouseout="this.start()" onmouseo ver="this.stop()"> Texto desplazandose </marquee>Algunos ejemplos de marquee:<marquee width=200 direction=right>Marquesina a la derecha y con ancho</marquee><marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que semueve</marquee
  11. 11. ETIQUETA DE IMAGENEl uso de imágenes de la página web permite visualizar la información de una formaagradable para el usuario, para utilizar una imagen se debe tener en cuenta lo siguiente: 1. Ubicación del archivo de imagen: Las imágenes son archivos que deben estar guardados en una carpeta en la misma carpeta que esta la pagina web que se está construyendo, de no ser así las imágenes no aparecerán en la página web. 2. Nombre y extensión del archivo: Los archivos más utilizados para colocar imágenes son aquellos de extensión: JPG, GIF y PNG.La etiqueta que representa a las imágenes es <IMG> </IMG>ATRIBUTOS: 1. SRC: Permite escribir el nombre y la extensión del archive de imagen. 2. WIDTH: Ancho de la imagen. 3. HEIGHT: Alto de la imagen. 4. BORDE: Coloca un recuadro alrededor de la imagen.<IMG SRC="/gráficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Unbebé"> 5. ALT: Muestra un mensaje al pasar el puntero sobre la imagen. Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima. Este valor se incluye detrás de las comillas que contienen la URL de la imagen:<IMG SRC="URL DE LA IMAGEN" Alt="Texto a mostrar"> 6. ALIGN: Uno de los parámetros que podemos cambiar al insertar las imágenes es la alineación. Para ello tendremos que incluir el parámetro Align=”lugar”, que permite controlar la alineación de una imagen con respecto a una línea de texto. Los tres valores posibles son left, right, y middle Este valor se incluye detrás de las comillas que contienen la URL de la imagen: <IMG SRC="URL DE LA IMAGEN" Align="left"> 7. Imágenes que enlazan a otras webPodemos hacer que una imagen nos enlace a otra web poniendo un enlace normal, ydentro del campo del texto que habría que pinchar, poner la etiqueta de incrustar laimagen.NESTOR VÁSQUEZ ROSSI Página 11
  12. 12. La etiqueta sería la siguiente:<a href="URL DE LA WEB A LA QUE ENLAZAMOS" target="blanmk"><IMGSRC="URL DE LA IMAGEN" ></a>ETIQUETA DE VIDEOExisten dos formas de insertar un video en una página web: 1. A través de www.youtube.com. 2. Por medio de un archivo de video. Para este último se debe tener en cuenta la ubicación, el nombre y la extensión: AVI, MPG, WMV y DIVX.La etiqueta que representa los videos es la siguiente: <IMG> </IMG>.ATRIBUTOS: 1. DYNSRC: Indica el nombre y extensión del archivo de video. 2. LOOP: Número de veces que se repite el video, por defecto es indefinido. 3. WIDTH: Ancho del video. 4. HEIGHT: Alto del video. 5. START=”MOUSEOVER”: Reproduce el video cuando el puntero del mouse esta sobre él.ETIQUETA DE SONIDOA través de esta etiqueta podemos colocar un sonido de fondo a la página web<BGSOUND>.ATRIBUTOS: 1. SRC: Nombre y extensión del archivo de audio. Los formatos de audio deben ser: MP3, WAV, MID. 2. LOOP: Numero de veces en que se repite el sonido.Existen diversas formas de incluir un fichero de audio en una página, formas quedependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetaspara cada una de ellas.<BGSOUND SRC="imagine.mid" LOOP=INFINITE>
  13. 13. BGSOUNDLa etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que seejecutan automáticamente al cargarse la página. Es una etiqueta propietaria deMicrosoft, por lo que sólo es interpretada por Internet Explorer, admitiendo losformatos de audio MP3, MID y WAV,EMBEDNestcape Navigator implementó la etiqueta embed para incorporar ficheros de audio. Esésta una etiqueta de carácter general, que se usa para la inclusión en las páginas web detodos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecución dealgún plugins para su interpretación.Su sintaxis general, con sus atributos más importantes, es del tipo:<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>ATRIBUTOS:  SRC="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice el fichero en Internet.  LOOP="l" determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.  BALANCE="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.  VOLUME="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC.Ejemplo:<bgsound src=" “./sonidos/wav.wav" balance=0 volume=0></bgsound>La etiqueta bgsound admite muchas más propiedades (disabled, delay, id, class,controls, etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediantecódigo JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop,src, y volume, aunque ésta última sólo es accesible en plataformas PC. Para unainformación completa sobre todas las propiedades y funcionalidades de este etiquetapodéis visitar la página correspondiente de Microsoft:NESTOR VÁSQUEZ ROSSI Página 13
  14. 14. EJEMPLO:<html> <head><title>::APLICATIVO MULTIMEDIA::</title> </head> <body bgcolor=”yellow”> <center> <hr> <img src=”zzz.jpg” width=”30%” height=”30%”>&nbsp <img src=”xxx.jpg” width=”30%” height=”30%”>&nbsp <img src=”bbb.jpg” width=”30%” height=”30%”>&nbsp <img dynsrc=”aaa.mwv” width=”30%” height=”30%”> <bgsound src=”kalimba”.mp3” loop=”4”> </center> </body><html>La estructura en HTML para hacer un listado de elementos es bien simple, y lo mismolos distintos valores que podemos asignar a sus atributos para tener un total controlsobre estas etiquetas HTML. Las listas HTML serían lo que son “Numeración yviñetas” en los procesadores de texto.LISTAS NO ORDENADAS O NO NUMERADAS:Etiqueta: <ul></ul>Elemento: <li></li>Atributo: type=
  15. 15. Para comenzar siempre debe indicarse que comienza una lista mediante <ul> y parafinalizar </ul>. Si no indicamos el atributo type por defecto la lista se mostrará con uncírculo relleno. Lo más común es que dicho atributo se le asigne a la lista pero tambiénse le puede añadir a cada elemento en particular. La etiqueta <li> que indica un nuevoelemento en la lista. Con el atributo “type” se indica que viñeta debe visualizarsepudiendo ser un círculo vacío, un cuadrado relleno o un círculo relleno.Atributo type=: “circle”, “disc” o “square”Ejemplo:<ul type=”disc”><li>Manzanas</li><li>Naranjas</li><li>Peras</li></ul>Resultado:  Manzanas  Naranjas  PerasVamos con un pequeño ejemplo en código: <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul>Cuyo resultado visual será el que veremos a continuación: o Esto es un tipo de punto.  Este es otro.  Y este es otro diferente.NESTOR VÁSQUEZ ROSSI Página 15
  16. 16. LISTAS ORDENADAS O NUMERADAS:Etiqueta: <ol></ol>Elemento: <li></li>Atributo: type=Atributo: value=Atributo: start=Es más amplio lo que puede hacerse con las listas ordenadas ya que tiene tres atributos.El atributo start es utilizado para los elementos, mientras que type y value para la lista.Atributo type: define el tipo de lista ordenada y sus valores pueden ser “I” para que lanumeración sea de números romanos en mayúscula; “i” números romanos enminúscula; “A” o “a” para obtener ordenamiento alfabético; “1″ para numeración connúmeros.Atributo value: establece a partir de qué valor comienza la lista. Su valor sólo puedeser numérico; Ej.: value=”4″ como resultado la el primer elemento de la lista será “4.”.Puede utilizarse conjuntamente con el atributo type en la etiqueta de la lista <ol>.Atributo start: su valor sólo puede ser numérico. Al utilizarlo al comienzo de la lista seasume que la misma es del tipo numérica y sirve para indicar a partir de qué número seempieza. No es combinable con los otros atributos.Algunos ejemplos:<ol type=”A” start=”1″><li>Manzanas</li><li>Naranjas</li><li>Peras</li></ol>Resultado: A. Manzanas B. Naranjas C. Peras<ol type=”I”><li>Manzanas</li><li>Naranjas</li><li>Peras</li></ol>Resultado: I. Manzanas II. NaranjasIII. Peras
  17. 17. <ol><li>Manzanas</li><li>Naranjas</li><li>Peras</li></ol>Resultado: 1. Manzanas 2. Naranjas 3. PerasLas listas pueden anidarse, lo que implica simplemente crear otra lista dentro de unalista. Hay otro tipo de lista, la llamada lista de definición <dl> que no se usa casi nuncapero vale mencionarla.<ol type=”I” start=”5″><li>Manzanas</li><li>Naranjas</li><li>Peras</li></ol>Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemosescribir lo siguiente:<ol><li value="20">Este será el número 20. </li><li>Este será el 21. </li><li> Este será el 22. Y así sucesivamente. </li></ol>Y el resultado será el siguiente: 1. Este será el número 20. 2. Este será el 21. 3. Este será el 22. Y así sucesivamenteNESTOR VÁSQUEZ ROSSI Página 17
  18. 18. Un hipervínculo es una herramienta utilizada para vincular o unir 2 o más páginas web,la etiqueta que la representa es:<A> </A>ATRIBUTOS: 1. HREF: Permite especificar el nombre del archivo de la pagina web que deseamos vincular. 2. NAME: Se utiliza para darle un nombre a un ancla o marcador dentro de una página web. 3. TITLE: Permite que al pasar el puntero del mouse sobre el hipervínculo aparezca el mensaje con información.Existen 3 clases de hipervínculos las cuales son: 1. HIPERVINCULO DENTRO DEL DOCUMENTO: Este permite que el usuario se pueda desplazar o mover dentro del mismo documento, ejemplo: <H1>Tabla de Contenidos</H1> <P><A href="#seccion1">Introducción</A><BR> <A href="#seccion2">Antecedentes</A><BR> <A href="#seccion2.1">Experiencias personales</A><BR> ...el resto de la tabla de contenidos... ...el cuerpo del documento... <H2><A name="seccion1">Introducción</A></H2> ...sección 1... <H2><A name="seccion2">Antecedentes</A></H2> ...sección 2... <H3><A name="seccion2.1">Experiencias personales</A></H3> ...sección 2.1...
  19. 19. 2. HIPERVÍNCULOS ENTRE PAGINAS: Las paginas implicadas deben estar vinculas dentro de la misma carpeta, los nombres de las paginas no pueden contener espacios, ni caracteres especiales.<html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LA TECNOLOGIA</center> <a href=”PAGINA2.HTML”>IR A LA CIENCIA</a> </body></html><html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LA CIENCIA</center> <a href=”PAGINA1.HTML”>IR A TECNOLOGIA</a> </body></html>LA TECNOLOGÍA LA CIENCIAIR A LA CIENCIA IR A TECNOLOGIA3. HIPERVÍNCULOS EXTERNOS: Estos permiten vincular una pagina creada por nosotros con una pagina que ya existe en Internet, ademas, podemos abrir o descargar y mostrar un programa de correo electrónico.NESTOR VÁSQUEZ ROSSI Página 19
  20. 20. EJEMPLO: Lo mas visto: HOTMAIL FACEBOOK DESCARGAR MÚSICA: CUMBIA COLOMBIANA<html> <head><title>::HIPERVINCULOS::</title> </head> <body bgcolor=”yellow”> <center>LO MAS VISTO</center> <a href=”http://www.hotmail.com”>HOTMAIL</a><br> <a href=”http://www.facebook.com”>FACEBOOK</a><br> <a href=”http://www.cumbia.mp3.com”> DESCARGAR MÚSICA: CUMBIA COLOMBIANA</a> </body><html>Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dosetiquetas definiremos la tabla, las celdas que queremos, las columnas y lascaracterísticas de cada uno de estos parámetros. Pero vamos a empezar explicándote laetiqueta <table>.Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemospredefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchosparámetros. Nosotros vamos a explicarte los principales.La tabla: <table>Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondode la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá uncolor de fondo, o "background" para poner una imagen de fondo. Recuerda que si laimagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con elparámetro "border". Como en todas los parámetros que ya hemos visto escribiremos:border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no
  21. 21. ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto,también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicandoel color que queramos para nuestro borde.El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner enpíxeles (width= "300") o con porcentaje (width= "100%").Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) ycellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentrode una celda).Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con uncellspacing de 10. El código quedaría de la siguiente forma. <table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table>Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de lasmismas.Las filas: <tr>Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> consu correspondiente cierre </tr>. El contenido de las columnas que están dentro de la filalo podemos alínear tanto horizontal como verticalmente.Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arribade la celda ("top"), en el centro ("middle") o debajo ("bottom").Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributopodremos alinear el contenido de las celdas en el centro ("center"), a la izquierda("left"), a la derecha ("right") o justificado ("justify").Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y elcolor del borde ("bordercolor").Las celdas <td>Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> ysu correspondiente cierre </td>.Al igual que en las filas, en las celdas podemos definir la alineación del contenido queestá dentro con los atributos "valign" y "align".Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantascolumnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo"colspan" y para agrupar celdas el atributo "rowspan".NESTOR VÁSQUEZ ROSSI Página 21
  22. 22. Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <tdcolspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <tdrowspan= "2"></td>.Las celdas <th>Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismosatributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenidoque esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla,por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todaslas cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualizacómo quedaría la tabla y luego mírala en el enlace siguiente: Ejemplo de tabla.<table width="100%" border="1" cellpadding="0" cellspacing="0"bordercolor="#000000"><tr><th>Encabezado 1</th><th>Encabezado 2</th><th>Encabezado 3</th></tr><tr><td rowspan="2" valign="middle" align="left">Este texto está alineado al centroverticalmente y a la izquierda horizontalmente</td><td>&nbsp;</td>nowrapnowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará alnavegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con esteatributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lohubiera, y respeta el ancho de la frase, ya que no puede partirla.Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todolo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrarácómo escribir este atributo en la etiqueta de la celda:<table width="400" border="1" cellpadding="10" cellspacing="0"bordercolor="#000000"><tr><td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xelesde la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;neael contenido de la misma, por lo que se estira para albergar toda la frase.</td></tr></table>Y a continuación podemos ver el efecto del atributo:
  23. 23. Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividirmediante saltos de línea el contenido de la misma, por lo que se estira para albergar todala frase.Etiqueta “caption”Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder elencabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top"para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplonosotros lo hemos puesto abajo.<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"bordercolor="#000000"><caption align="bottom">Encabezado de la tabla.</caption><tr><td align="center">Tablita de ejemplo para la etiqueta "caption"</td></tr></table>EJEMPLO:<table><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>RESULTADO:Celda 1 Celda 2 Celda 3Celda 4 Celda 5 Celda 6NESTOR VÁSQUEZ ROSSI Página 23

×