Introducción a HTML

1
By: Elar E., HANCCO QUISPE www.elarcorp.com
Serie Práctica de Computación
HTML - DREAMWEAVER
Creado, Producido, Dirigido y Escrito por el Elar Edgar, HANCCO QUISPE de Puno -
Perú
¡Hola! Les saluda Elar Edgar, HANCCO QUISPE de Juliaca - Puno - Perú. A lo largo de
muchos años de experiencia en la enseñanza de computación a personas de todo tipo:
estudiantes, secretarias, contadores, gerentes, ingenieros, maestros, amas de casa, sacerdotes,
etc., ya sea en clases grupales, particulares o vía Internet siempre hubo un eje común
respecto a las necesidades de mis alumnos ¡Aprender a usar la computadora ¡lo antes
posible! ¿Para qué? ¡Para aplicarla en su área de trabajo o tarea en particular!
Este hecho tan notorio y algunas veces descuidado por muchos profesores de computación
me obligo de alguna manera a escribir un conjunto de separatas que intentan en lo posible de
enseñar de la computación sólo lo útil, lo que se usa más frecuentemente, mi intención es que
Ud. aprenda lo antes posible lo necesario para poder desenvolverse satisfactoriamente en
cualquier área de trabajo donde se emplee la computadora, mi intención no es convertirlo en
un ingeniero o científico de la computación como yo, mi intención es sólo convertirlo en un
experto práctico en el uso de la computadora, tan necesario en nuestros tiempos donde la
computadora está en todos lados.
Estas separatas a las cuales he denominado la “Serie Práctica de Computación del Profesor
Hancco” están publicados en mi página Web www.elarcorp.com y pueden bajárselos
gratuitamente e imprimirlos con toda libertad, se los obsequio, siempre y cuando respeten el
derecho de Autor y prometan aprender de ellos o enseñar con ellos y si es religioso me
mencione en algunas de sus oraciones.
Esta serie de separatas consta de los siguientes títulos:
 Introducción a las páginas web
 Html
 Dreamweaver
 Joomla
Atentamente
El Profesor Hancco
Sugerencia: Si Ud. nunca ha usado una computadora entonces le recomiendo que empiece
con mi primera separata “Introducción a la computación”. Además en mi página
www.elarcorp.com también encontrará separatas para diseñadores gráficos y programador es
desde el nivel más básico hasta el nivel más avanzado (sólo para genios).
Hecho en Perú – Made in Perú

2
INTRODUCCIÓN AL LENGUAJE HTML
En esta primera entrega de este Curso completo de HTML haremos un primer estudio del
lenguaje HTML y analizaremos las herramientas que son necesarias o al menos
recomendables para realizar una página web. Además aprenderemos qué es y qué no es el
lenguaje HTML; cual es la estructura de una página web; como dar un título a nuestra página
y como crear encabezados y texto en ella.
INTRODUCCIÓN
QUE ES HTML.- significa Hipertext Markup Lenguaje (lenguaje de manipulación de
hipertextos). Es el lenguaje en que se reciben los millones de documentos que hoy existen en
el World Wide Web (Internet). Cuando accedemos a uno de estos documentos.
Este es un lenguaje muy sencillo que se basa en el uso etiquetas, consistentes en un texto
ASCII encerrado dentro un par de paréntesis angulares (<...>). El texto incluido dentro de los
paréntesis nos dará una explicación de la utilidad de la etiqueta. Así por ejemplo la etiqueta
<TABLE> nos permitirá definir una tabla.
Todos los componentes que aparecen en una página web se llaman etiquetas (tags) o
elementos. Esas etiquetas nos indican lo que el código hará y colocara el texto de los doc. De
HTML. La mayoría de estas etiquetas vienen en pares y hay otras que viene solas ya que
posteriormente estaremos descubriendo esas etiquetas solas y pares ya que nos daremos
cuenta de las diferencias entre los dos.
Una etiqueta de apertura marca el principio de un código HTML y una de cierre lo hace con
su final. La etiqueta de inicio contiene el nombre de la misma entre los caracteres de “menor
que” (<) y “mayor que”(>). La etiqueta de cierre es muy similar a la de la apertura con al
única diferencia se debe añadir una diagonal (/) delante del nombre de la etiqueta.
El objetivo de este manual es proporcionar un conocimiento acerca de la construcción de
Paginas Web, bajo el lenguaje HTML. El que nos ofrece el sistema operativo Windows (Bloc
de Notas)

3
WWW (World Wide Web) es un sistema que contiene una cantidad de información casi
infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea
posible encontrar lo que se busca. La unidad básica donde está almacenada esta información
son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes,
animaciones... e incluso sonido y video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto
quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante
los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar
sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para
navegar hasta otra página. Será cuestión del programador de la página inicial decidir que
palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

4
ESTRUCTURA DE HTML:
La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los
documentos que queremos sean considerados en el lenguaje HTML:
a. Inicio de la página web:
 <HTML> : inicio del documento.
 </HTML> : fin del documento.
b. Además del inicio y fin del documento, cualquiera documento en HTML se divide en
dos partes fundamentales: la cabecera y el cuerpo, separados por las etiquetas:
 <HEAD> : inicio de la cabecera.
 </HEAD> : fin de la cabecera.
 <BODY> : inicio del cuerpo.
 </BODY> : fin del cuerpo.
c. Dentro de la cabecera se incluye el título del documento marcado por las etiquetas:
 <TITLE> : inicio del título.
 </TITLE> : fin del título.
d. Dentro del cuerpo se incluye el “Grosor” de la tabla.
 <BORDER>

5
Ejemplo Nº 1
<Html>
<Head>
<Title>
Agustin Pilco Sanca
</Title>
</Head>
<Body>
<H1> <Center>Mi Primera Página</Center></H1>
<Hr>Esta es una Segunda Página sencilla
</Body>
</Html>
Resultado:
PASOS PARA CREAR UNA PÁGINA EN BLOC DE NOTAS
Generalmente, un documento HTML consta de dos partes: la cabecera y el cuerpo. En la
primera se incluyen algunas cosas que no se ven al principio pero que puede llegar a ser muy
importante, mientras que en al segunda estará la pagina en si.
INGRESAR A BLOC DE NOTAS:
 Clic en menú inicio.
 Clic en programas - todos los programas

6
 Accesorios.
 Bloc de notas
 Muestra la ventana de códigos. Para crear una página sigue estos pasos que son muy
sencillos de entenderlos:
1. En el bloc de notas, digita el texto siguiente:
GUARDAR UNA WEB
2. Luego procede a guardarlo la página. Para ello haz clic en el menú Archivo -
Guardar Como.
3. En el cuadro de lista Guardar En: elegir una carpeta en donde guardaremos nuestra
pagina para ellos en este caso elegimos la unidad D:
4. Y en el cuadro nombre, ingresa el nombre del archivo por ejemplo (Agustin.html), y
no olvides asignarle la extensión HTML.

7
5. Y por ultimo has clic en el Botón Guardar. Con este paso, el archivo quedara
almacenado en la carpeta elegida.
6. Para que la Página se visualice en el navegador Microsoft Internet Explorer, abre el
explorador de Windows, navega hasta que la Carpeta En La Que Guardaste El
Archivo y Has Doble Clic en el icono del archivo por ejemplo se muestra de la
siguiente manera.
7.- Desde luego nos saldrá la ventana de Internet Explorer: y el resultado.
PÁRRAFO.- Cuando escribimos en el documento el texto que queremos que aparezca en la
pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del
carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que

8
no tiene su correspondiente etiqueta de cierre </P>)
Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos
modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>,
que puede tomar los valores siguientes.
LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
CENTER: el párrafo es centrado.
RIGHT: el párrafo es justificado a la derecha.
Sintaxis: <p align= “center”>Agustín PILCO SANCA </p>
ENCABEZAMIENTO.- HTML dispone de seis cabeceras, o tipos de letra predefinidos de
distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan
con el comando <Hn> y se desactivan con </Hn>, donde “n” es un número de 1 a 6. Siendo el
número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
<H1>Nivel de encabezado 1</H1>
Puede experimentar en el ejemplo anterior, cambiando el número para comprobar el efecto
que se logra.
Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea,
aunque no se le indique.
Ejemplo Nº 2
<HTML>
<HEAD>
<TITLE> Mi Página Web Nº 2 </title>

9
</HEAD>
<BODY>
Este es el primer párrafo<p>
Aquí Va en segundo Párrafo
</BODY>
<HTML>
LÍNEAS HORIZONTALES.- La marca <HR> permite trazar una líneas horizontales para
separar distintas secciones de una página HTML
Por defecto, las líneas horizontales van de la parte izquierda de la ventana del visualizador a la
derecha. Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una
sensación de relieve.
Esta marca sólo requiere la etiqueta de comienzo.
Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la línea horizontal
(ancho, longitud,...).
Ejemplo Nº 3
<HTML>
<HEAD>
<Title> Ejemplo Nº 3</Title>
</Head>
<Body>
<H1><Center>Mi Primera Página Web.</Center></H1>
<HR>Esta es una segunda opción <p>

10
Aquí va un segundo Párrafo
</BODY>
</HTML>
FUENTES:
Tipos de letras.- Algunas de las marcas que permiten especificar la tipografía de los
caracteres son las siguientes:
<B> Negrita </B>
<I> Cursiva </I>
<U> Subrayado </U>
<BLINK> Parpadeante </BLINK>
<TT> Tamaño fijo </TT>
<EM> Énfasis </EM>
<STRONG> Gran énfasis </STRONG>
Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.
Tamaño del Texto.- Para modificar el tamaño se utiliza el atributo SIZE de la marca
<FONT>, de la manera siguiente:
<FONT SIZE="tamaño">Texto</FONT>, El comando <FONT> requiere la etiqueta de
cierre.
Tipo De Fuente.- nos permite cambiar el tipo de letra que nosotros queramos en nuestra
página web su código es <FONT FACE>.
<FONT FACE= “Arial”> Texto… </FACE>
Color De Texto.- Los colores de texto en HTML se puede cambiar de dos formas básicas que
se detalla posteriormente: Esta forma de definir los colores como combinación de los colores
rojo, verde, y azul se denomina RGB (Red - Green - Blue).
Hexadecimal.- Estos números están en numeración hexadecimal. Esta numeración se

11
caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos
dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Ejemplo <FONT COLOR = “FF00FF”>
Colores en hexadecimal
000000 Negro
0000FF Azul
00FF00 Verde
00FFFF Celeste
FF0000 Rojo
FF00FF Magenta
FFFF00 Amarillo
FFFFFF Blanco
Ingles.- son los colores que puedes utilizar en el idioma ingles:
Black Negro
White Blanco
Red Rojo
Green Verde
Blue Azul
Yellow Amarillo
Cyan Celeste
Magenta Magenta
Color De Texto
<FONT COLOR="color">Texto</FONT>
<FONT COLOR="Red">Texto</FONT>
Todo El Texto
<BODY TEXT=“blue”>
Color De Fondo:
<BODY BGCOLOR=“blue”>
Centrar texto: Para centrar una parte del documento, se delimita lo que se desea centrar

12
mediante el comando.
<CENTER> Agustín </CENTER>.
FONDOS DE UNA IMAGEN: El fondo de una imagen puedes ser también una imagen, ya
sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera
analógica al tapiz de Windows.
<BODY BACKGROUND="imagen.gif">
<BODY BACKGROUND="imagen.jpg">
IMAGINES:
Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG> y es
necesario indicarle el nombre y la localización del fichero que contiene la imagen. Existen dos
formatos de imágenes que todos los navegadores actuales reconocen, son las imágenes GIF y
JPG.
<IMG SRC="imagen.jpg ó gif">
Tamaño De Imagen.- los tamaños de imagen pueden configurarse de acuerdo a lo que el
usuario quiera, para ello tenemos dos códigos que so:
 WIDTH : Permite agrandar el Ancho de una imagen u tabla
 HEIGHT : permite agrandar el Alto de una imagen u tabla.
<TD><IMG SRC= “AGUSTIN.JPG” WIDTH= “200” HEIGHT= “200”> </TD>
LISTAS EN HTML.- Junto con los párrafos y los encabezados, las listas son uno de los
elementos HTML más comúnmente usados en las páginas web. Tras este capítulo sabremos,
no sólo crear listas, sino crear varios estilos de estas, una para cada ocasión.
Lista con puntos:
<UL>
<LI>Fútbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>
Listas ordenadas:

13
Un buen equipo adaptado a las nuevas tecnologías consta de Números:
<OL>
<LI>CPU rápida
<LI>Impresora a color de buena definición.
<LI>Altavoces y cámara de vídeo.
<LI>Módem de velocidad 28K o superior.
</OL>
Lista con puntos:
<UL>
<LI> elemento 1
<LI> elemento 2
<LI> elemento n
</UL>
Lista con círculo.- ten en cuenta la minúscula
<UL>
<Li type=circle> Otorgar confianza
<li type=circle> Letra de cambio
<li type=circle> El cheque
<li type=circle> El pagare
</UL>
Lista con números romanos:
<OL TYPE=I>
<LI> Redacción Comercial
<LI> Redacción Bancaria
<LI> Redacción Social
<LI> Redacción Legal
<LI> Redacción Laboral
</OL>
Lista con letras
<OL TYPE=a>
<LI> Otorgar fianza

14
<LI> Letra de cambio
<LI> El cheque
<LI> El pagare
</OL>
Lista con cuadrados
<UL>
<LI type=square> Procesador Pentium 166
<LI type=square> CD-ROM 8x
<LI type=square> Tarjeta de sonido 16 bits
<LI type=square> Tarjeta de vídeo con 2 Mb
</UL>
LISTAS ORDENADAS O DEFINIDAS.- El tercer tipo lo forman las listas de definición.
Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la
lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos
visto, cada renglón de la lista tiene dos partes:
O El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term).
O La definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).
<DL>
<DT> Una cosa a definir
<DD> La definición de esta cosa
<DT> Otra cosa a definir
<DD> La definición de esta otra cosa
</DL>
TEXTOS CON ANIMACIONES
Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del
lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc.
MARQUESINAS (MARQUEES)

15
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son
válidas para el Explorer de Microsoft.
Ejemplos
1. <MARQUEE>texto que se desplaza a la izquierda</MARQUEE>
2. <MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho
de la pantalla y tiene una altura de 60 pixels </MARQUEE>
3. <MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!"
estará alineada con la parte inferior de la marquesina</MARQUEE>
4. <MARQUEE BEHAVIOR=ALTERNATE>Este texto se mueve a un lado y otro, sin
desaparecer</MARQUEE>
5. <MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa
</MARQUEE>
6. <MARQUEE DIRECTION=RIGHT> Este texto se dirige hacia la derecha
</MARQUEE>
7. <MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
8. <MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto
</MARQUEE>
9. <MARQUEE BGCOLOR="FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>
10. <MARQUEE DIRECTION="UP"> Texto con movimiento hacia Arriba
</MARQUEE>
11. <MARQUEE DIRECTION="DOWN"> Texto con movimiento hacia Abajo
</MARQUEE>
12. <Marquee Behavior="Scroll" Direction="Left"><img src="C:Documents and
SettingsAll UsersDocumentosMis imágenesImágenes de muestraPuesta de sol.jpg"
width="100" height="100" alt="smile" /></marquee>

16
13. <marquee behavior="scroll" direction="left"><img src="Nenúfares.jpg" width="100"
height="100"></marquee>
HIPERENLACES
Uno de los pilares fundamentales sobre los que ostentan la WWW es el enlace, también
llamado vínculo, hipervínculo, hiperenlaces link. Los enlaces son marcas que se sitúan dentro
de las páginas Web y que conducen a un contenido diferente, como puede ser una imagen,
una dirección de correo electrónico, un archivo de sonido o incluso otra pagina Web.
Para incluir un hiperenlaces se utiliza la directiva <A></A>. El texto o la imagen que se
encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si
pulsamos con el Mouse sobre el, se efectúa la función de hiperenlaces indicada por la
directiva <A> </A>.
TIPOS DE ENLACES
1. Enlaces internos dentro de la misma página
2. Enlaces internos con otras páginas
3. Enlaces externos con una pagina fuera de nuestro sistema
4. Enlaces externos con una dirección E-mail.
ENLACES INTERNOS DENTRO DE LA MISMA PÁGINA
Un enlace también nos puede llevar a una zona de nuestra página. Para elle debemos marcar
en nuestra página las diferentes sensaciones en las que se divide. El texto marcado con destino
se sustituye por #marca, en donde marca es una etiqueta para referenciar del salto. Entonces
tomara la siguiente estructura:
<A HREF = #MARCA”></A>
<A HREF= "disco E:nombre de la pagina (.html)">ir a la Siguiente pagina</A>.
<A HREF= “Ejemplo1.html”>ir al final</A>.
Ejemplo Nº 4 dentro una página misma
<HTML>
<HEAD>
<TITLE> Ejemplo 3 - Enlaces locales</TITLE>
</HEAD>

17
<BODY>
<H2>Enlaces locales</H2>
<H3><A NAME="indice">Indice</A></H3>
<UL>
<LI><A HREF="#uno">Sección uno</A>
<LI><A HREF="#dos">Sección dos</A>
<LI><A HREF="#tres">Sección tres</A>
<LI><A HREF="#cuatro">Sección cuatro</A>
<LI><A HREF="#cinco">Sección cinco</A>
<LI><A HREF="#seis">Sección seis</A>
<LI><A HREF="#siete">Sección siete</A>
<LI><A HREF="#ocho">Sección ocho</A>
</UL>
<H3><A NAME="uno">Sección uno</A></H3>
<P>Esta es la sección 1 de la pagina de enlaces locales</P>
<P>Click aqui para <A href="#indice">volver al índice</A>
<H3><A NAME="dos">Sección dos</A></H3>
<H3><A NAME="tres">Sección tres</A></H3>
<H3><A NAME="cuatro">Sección cuatro</A></H3>
<H3><A NAME="cinco">Sección cinco</A></H3>
<H3><A NAME="seis">Sección seis</A></H3>

18
<H3><A NAME="siete">Sección siete</A></H3>
<H3><A NAME="ocho">Sección ocho</A></H3>
</BODY>
</HTML>
Ejemplo Nº 5 otras páginas
<HTML>
<HEAD>
<TITLE> Mi pagina del Web </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis paginas favoritas </H1>
</CENTER>
<HR>
Estas son mis páginas favoritas:
<P><A HREF="http://home.netscape.com"> Netscape </A>
<BR> <A HREF="http://www.microsoft.com"> Microsoft </A>
<BR> <A HREF="http://www.yahoo.com"> Yahoo </A>
<BR> <A HREF="http://www.Google.com"> Google </A>
<BR> <A HREF="http://www.Hotmail.com.com"> Hotmail </A>
<BR> <A HREF="http://www.drepuno.gob.pe">Drep </A>
<BR> <A HREF="http://www.ugelsanroman.gob.pe"> San Román! </A>
</BODY>
</HTML>

19
TABLAS
Las tablas esta conformado por filas y columnas llamada celdas, pueden parecer un modo
sencillo de disponer el texto en columnas o quizás de añadir un titular a una ilustración, pero
hay modos de sacar un gran partido de una característica aparentemente sencilla. La etiqueta
<TABLE> puede ser una poderosa herramienta de formato. Se puede hacer por ejemplo, no
mostrar el borde de una tabla en absoluto. También se puede hacer uso de la etiqueta
<TABLE> para ubicar texto e imágenes con precisión, en prácticamente casi cualquier lugar
de una página.
Estructura de una tabla
<TABLE> : Es la etiqueta general, que engloba a todas las demás.
<TABLE BORDER= “N”> : Presenta los datos tabulados con un borde, haciendo las tablas
más atractivas, y el grosor es de n pixeles
<TR> : Permite crear filas de la tabla.
<TD> : Es utilizada para crear las columnas
FILAS <TR>.- en necesario insertar las etiquetas <TR>…</TR> y cerrar, por cada una de las
filas de la tabla. Esta etiqueta deberán insertarse entre las etiquetas <TABLE> y cerrar
</TABLE>
Sintaxis
<TABLE BORDER "1">
<TR>1</TR>
</TABLE>
COLUMNAS <TD>.- es necesario insertar las etiquetas <TD> y cerrar </TD> para cada una
de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar
esas etiquetas entre las etiquetas <TR> y cerrar </TR>.
Sintaxis
<TABLE BORDER "1">
<TD>1</TD>
</TABLE>

20
Ejemplo Nº 6
<TABLE BORDER "1">
<TR>
<TD> Columna 1 Fila 1 </TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Ejemplo Nº 7
<TABLE BORDER "1">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
Ejemplo Nº 8
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>

21
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
</TR>
<TR>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
</TR>
</TABLE>
Ejemplo Nº 9
<TABLE BORDER "1">
<TR>
<TD> Microsoft Word</TD>
<TD> FrontPage</TD>
</TR>
<TR>
<TD> Html</TD>
<TD> JavaScript</TD>
</TR>
<TR>

22
<TD> Macromedia Flash</TD>
<TD> Macromedia Dreamweaver</TD>
</TR>
<TR>
<TD> Php</TD>
<TD> Joomla</TD>
</TR>
</TABLE>
Ejemplo Nº 10
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>

23
</TR>
<TR>
<TD>19</TD>
<TD>20</TD>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
<TD>24</TD>
</TR>
</TABLE>
TRABAJO
Crear las siguientes tablas:
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
1 2 3 4 5
6 7 8 9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25
26 27 28 29 30
31 32 33 34 35
36 37 38 39 40
DAROS DE MES MEJORES AMIGOS
 Agustín
 Juan
 Elder
 Alex
I. Marisol
II. Nilda
III. Julia
IV. Nélida

24
a. Gloria
b. Blanca
c. Luz Delia
d. Sandra
1. Gabino
2. Wilber
3. Juan René
4. Hernán
Ejemplo Nº 11
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
Ejemplo Nº 12
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Ejemplo Nº 13
<TABLE BORDER "1">
<TR>

25
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
</TR>
<TR>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
</TR>
<TR>
<TD>17</TD>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
</TR>
<TR>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
<TD>24</TD>

26
</TR>
</TABLE>
TAMAÑO DE LA TABLA.- Por defecto el tamaño de la tabla viene dado por el texto o los
gráficos que contiene. Sin embargo, es posible que en ocasiones queramos cambiar la anchura
de nuestra tabla.
Anchura.- La forma de establecer una anchura fija en una tabla es utilizar el modificador
WIDTH dentro de la etiqueta <TABLE>. La sintaxis es:
<TABLE WIDTH="Anchura">……… </TABLE>
<TABLE BORDER= “1” WIDTH="100%">……… </TABLE>
<TABLE BORDER "1" WIDTH="100%" HEIGHT="100%">
Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o
bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del
documento del navegador.
A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una
anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse
íntegramente.
CELDAS DE DIFERENTES TAMAÑOS.- Por defecto, todas las celdas que constituyen
una tabla en HTML tienen el mismo tamaño. Sin embargo, es posible establecer el tamaño de
una determinada celda mediante dos modificadores de la etiqueta <TD>, que son WIDTH y
HEIGHT:
 WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar
como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la
tabla.
 HEIGHT: establece la altura de una celda individual.
No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La
única forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de

27
WIDTH y HEIGHT.
Ejemplo Nº 14 con Anchura
<TR>
<TD WIDTH="10%">1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>6</TD>
<TD>7</TD>
</TR>
<TR>
<TD>10</TD>
<TD>11</TD>
<TD WIDTH="10%">12</TD>
</TR>
<TR>
<TD WIDTH="10%">13</TD>
<TD>14</TD>
<TD>15</TD>
<TD WIDTH="10%">16</TD>
</TR>
</TABLE>
Ejemplo Nº 15 Con Altura:
<TR>
<TD HEIGHT="2%">1</TD>

28
</TR>
<TR>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
</TR>
<TR>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
</TR>
</TABLE>
Ejemplo Nº 16 Con Anchura Y Altura
<TR>
<TD WIDTH="5%"HEIGHT="2%">1</TD>
</TR>
<TR>
<TD>5</TD>

29
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
</TR>
<TR>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
<TD WIDTH="5%"HEIGHT="2%">13</TD>
</TR>
</TABLE>
CONBINACION DE CELDAS.- Podemos desear que una de nuestras celdas ocupe varias
filas y/o columnas. La forma de hacerlo es introducir los modificadores COLSPAN y
ROWSPAN en la etiqueta <TD>:
 COLSPAN: especifica la altura de una celda en concreta en función de la altura de las
celdas adyacentes. Se especifica en número de celdas adyacentes. Sirven para
Combinar Filas.
 ROWSPAN: especifica la anchura de una concreta en función de las celdas que están
debajo. Se especifica en número de celdas de debajo. Sirven para Combinar
Columnas.
COLOR DE CADA CELDA.- Para especificar el color de cada celda de la tabla se utiliza el
modificador BGCOLOR en la etiqueta <TD>. Como formato de colores se acepta el
hexadecimal o una cadena de caracteres.

30
Ejemplo Nº 17
<TR>
<TD BGCOLOR ="red"WIDTH="5%"HEIGHT="2%">1</TD>
<TD BGCOLOR ="yellow"HEIGHT="2%">2</TD>
<TD BGCOLOR ="green"HEIGHT="2%">3</TD>
<TD BGCOLOR ="ff00ff"HEIGHT="2%">4</TD>
</TR>
Combinación de Filas:
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD colspan="2">3</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
</TR>
<TR>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD>12</TD>
</TR>
<TR>
</TR>
</TABLE>
Combinación de columnas:

31
<TABLE BORDER "1">
<TR>
<TD rowspan="2">1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>7</TD>
</TR>
<TR>
<TD>9</TD>
<TD>11</TD>
<TR>
<TD>13</TD>
<TD>15</TD>
</TR>
</TABLE>
Combinación de filas y columnas:
<TABLE BORDER "1">
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD>5</TD>
<TD colspan="2" rowspan="2">6</TD>
<TD>8</TD>
</TR>

32
<TR>
<TD>9</TD>
<TD>12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
</TR>
</TABLE>
TRABAJO
Realiza los siguientes ejemplos:
1
6
7 8 9
10
12
1
6 7 8 9 10
11
12
15
16 20
21 25
26 30
31 35
36 37 38 39 40

Introducción a HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Introducción a HTML

Similar a Introducción a HTML (20)

Más de Elar Hancco Quispe

Más de Elar Hancco Quispe (13)

Último

Último (20)

Introducción a HTML