PRACTICA DE HTML-ultimo

INSTITUTO CIMAS PROFESOR: MAIKE JAUREGUI
PRACTICA DE HTML
ETIQUETAS BASICAS
TITULOS EN DIFERENTES TAMAÑOS

<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<h1>Título de tamaño h1</h1>
</body>
</html>
ESCRIBIR UN PARRAFO
Ejemplo 1:
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos,
hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las
bases de datos.
</p>
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>Parrafo</title>
</head>
<body>
<center><h3>Bienvenido a mi pagina personal</h3></center>
<p align="left"> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que
se alinea a la izquierda. </p>
<p align="right"> Pero esta línea quiero que salga a la derecha</p>
<p align="center"> Y ahora en el centro</p>
</body>
</html>
-1-
SALTO DE LINEA
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
PONER UN COMENTARIO EN EL CODIGO

<html>
<head>
<title></title>
</head>
<body>

<p>Los comentarios no se visualizan</p>

</body>
</html>
DIBUJAR UNA LINEA HORIZONTAL

Ejemplo 1:
<html>
<head>
<title><hr></title>
</head>
<body>
<p>Las líneas horizontales son muy útiles para separar secciones.</p>
Sección 1
<hr>
Sección 2
<hr>
Sección 3
</body>
</html>
Ejemplo 2:
<html>
<head>
<title>
Deportistas Latinos
</title>
</head>
<body>
<p>
En Latinoamérica existen muchos personajes que día a día se destacan en su labor dejando bien en
alto ante el resto del mundo el nombre de nuestros países.
-2-
<br>
Vamos aqui a presentar unicamente a deportistas que con su labor, tanto dentro como fuera de la
cancha, nos hacen sentir orgullosos a todos los latinos:
<br> Beisbol:
<br>
Andres Galarraga
<br>
Samuel Sosa
<br>
Omar Vizquel
<br>
Ivan Rodriguez
<br>
Vinicio Castilla
<br>
Edgardo Alfonso
<hr size="5">
Futbolistas:
<br>
Roberto Carlos
<br> Marco a. Etcheverry
<br>
Carlos Valderrama
<br>
Jose L. Chilavert
<br>
Gabriel Batistuta
<br>
<hr color="blue" size="10" >
</body>
</html>
Ejemplo 3:
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<hr>
<br>
<hr size=10>
<br>
<hr width=50>
<br>
<hr width=50%>
<br>
<hr align=left width=50%>
<br>
<hr align=right width=50%>
</body>
</html>
-3-
Ejemplo 4:
<html>
<head>
</head>
<body>
<p align="center">ejemplo
<hr width=50% align=center</p>
<br><br>
<p align="left">Se ven las diferentes características de las
líneas separadoras horizontales:</p>
<br>
<p align="left">Anchura del 50% y justificación a la izquierda
<hr width=50% align=left></p>
<br>
<p align="center">Anchura del 70%, justificación al centro y
grosor de 5 píxels
<hr width=70% align=center size=5></p>
<br>
<p align="center">Anchura de 200 píxels, justificación al
centro, grosor de 10 píxels, relleno sólido
<hr width=200 align=center size=10 noshade></p>
<br>
<p align="right">Anchura de 200 píxels, justificación a la
derecha, grosor de 20 píxels
<hr width=300 align=right size=20></p>
</body>
</html>
Ejemplo 5:
<html>
<head>
</head>
<body>
<hr noshade>
<hr width=250 size=3>
<hr width=250 size=6>
<hr noshade width=400 size=4>
</body>
</html>
Ejemplo 6:
<html>
<head>
</head>
<body>
<hr color="#0000ff" width="300" align="left" size="30" >
<hr color="#00ff00" width="300" align="center" noshade>
</body>
</html>
-4-
FORMATOS DE TEXTO
TEXTO EN NEGRITA
<html>
<head>
<title>Texto en Negrita</title>
</head>
<body>
Texto normal -
<b>Texto en negrita</b>
</body>
</html>
TEXTO EN ITALICA
<html>
<head>
<title>Texto en Itálica</title>
</head>
<body>
Texto normal -
<i>Texto en itálica</i>
</body>
</html>
TEXTO SUBRAYADO
<html>
<head>
<title>Texto Subrayado</title>
</head>
<body>
Texto normal -
<u>Texto subrayado</u>
</body>
</html>
TEXTO TELETIPO
<html>
<head>
<title>Texto en Teletipo</title>
</head>
<body>
Texto normal -
<tt>Texto en teletipo</tt>
</body>
</html>
TEXTO POR DEBAJO

<html>
<head>
<title>Texto por Debajo</title>
</head>
<body>
-5-
Texto normal -
<sub>Texto por debajo</sub>
</body>
</html>
TEXTO POR ENCIMA

<html>
<head>
<title>Texto por Encima</title>
</head>
<body>
Texto normal -
<sup>Texto por encima</sup>
</body>
</html>
TEXTO TACHADO
<html>
<head>
<title>Texto Tachado</title>
</head>
<body>
Texto normal -
<strike>Texto tachado</strike>
</body>
</html>
TEXTO ENFATIZADO- TEXTO FUERTE (<EM> <STRONG>)

<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se
colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan operaciones
matemáticas, por ejemplo, códigos de identificación, números de documentos, números telefónicos.
Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros,
negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia
a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos:
float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date
(fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p>
</body>
</html>
ADDRESS
<html>
<head>
<title>Etiqueta Address</title>
</head>
<body>
-6-
<address>
DistritoWeb. Todos los derechos reservados. info@DistritoWeb.net
</address>
</body>
</html>
BLOCKQUOTE
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>Ejemplo:</p>
<blockquote>
<blockquote>
<p>es una etiqueta que se utiliza para encerrar un texto parafraseado, una cita, un ejemplo, etc. y
conseguir con ella un efecto de sangrado de texto. Tanto el margen izquierdo, como el derecho, se
amplían automáticamente.
</p>
</blockquote>
</blockquote>
</body>
</html>
CITE
<html>
<head>
<title>Etiqueta Cite</title>
</head>
<body>
La <cite> especificación del HTML 4.01 </cite> dice: <blockquote> Nota. Recomendamos
que las implementaciones de hojas de estilo porporcionen un mecanismo para insertar
signos de puntuación de citas antes y después de una cita delimitada por un BLOCKQUOTE
de un modo apropiado según el contexto del idioma actual y el grado de anidamiento de
las citas. </blockquote>
</body>
</html>
PRE
Ejemplo1:
<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
-7-
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</p>
</body>
</html>
Ejemplo2:
<html>
<head>
<title>Espacios en blanco arbitrarios</title>
</head>
<body>
<h2>Características de los planetas</h2>
<pre>
Nombre Diametro relativo Período orbital Número de lunas
--------------------------------------------------------------------------------------
Mercurio 0,382 0,24 años 0
Venus 0,949 0,62 años 0
Tierra 1 1 año 1
Marte 0,532 1,88 años 2
Júpiter 11,209 11,86 años 49
Saturno 9,449 29,46 años 52
Urano 4,007 84,01 años 27
Neptuno 3,883 164,80 años 13
</pre>
</body>
</html>
NOBR
<html>
<head>
<title>Ejemplo de </title>
</head>
<body>
<nobr>HTML (HyperText Markup Language) es un lenguaje de programación que se utiliza para la
creación de páginas en la WWW. Por página entenderemos el documento que aparece en el
visualizador. Para hacer una pagina web solo se necesita un editor de texto desde el block de notas
hasta programas hechos exclusivamente para editar paginas web(Frontpage, Visual
Interdev,Dreamweaver, etc). </nobr>
</body>
</html>
DIV
<html>
<head>
<title>Texto Tachado</title>
</head>
<body>
-8-
<div align="center">Bienvenidos a mi pagina.</div>

<div>Aqui encontraras cursos de formacion muy interesantes.</div>
</body>
</html>
CARACTERES ESPECIALES
&NBSP
<html>
<head>
<title>Ejemplo de </title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y otro tipo de espaciado.</p>
</body>
</html>
&AACUTE, &EACUTE; &IACUTE; &OACUTE; &UACUTE;

Ejemplo 1:
<html>
<head>
<title>caracteres especiales</title>
</head>
<body>
Es más útil, además sabré cómo viví
</body>
</html>
Ejemplo 2:
<html>
<head>
<title> Página de ejemplo </title>
</head>
<body>
Este es el contenido del documento. Puedo escribir lo que
desea, en <b>negrita</b>, <em>cursiva</em>, o
<big>letra más grande</big>.
Si escribo esto, seguirá siendo el mismo

párrafo, aunque haya una línea en blanco.
<p>En cambio, si escribo una etiqueta de párrafo
nuevo, se separará.
<br> Si lo que
deseo es un párrafo como en castellano, tendré que
poner un salto de línea y cinco espacios en blanco
«protegidos».
</body>
</html>
-9-
ACRONYM
<html>
<head>
<title>Ejemplo de Acronimo
</title>
</head>
<body>
La <acronym title="World Wide Web" lang="en">WWW es un sistema de documentos de
hipertexto y/o hipermedios enlazados y accesibles a través de Internet. Con un navegador Web, un
usuario visualiza páginas web que pueden contener texto, imágenes, vídeos u otros contenidos
multimedia, y navega a través de ellas usando hiperenlaces</acronym>
</body>
</html>
- 10 -
FORMATO DE TEXTO
ETIQUETA BASEFONT
Ejemplo:
<html>
<head>
<title>Ejemplo de basefont</title>
<head>
<body>
El texto por defecto tiene tamaño 3.
<basefont size=5>
A partir de ahora tendrá tamaño 5.
<body>
</html>
Ejemplo:
<html>
<head>
<title>Ejemplo de basefont</title>
</head>
<body>
<basefont size=7>
<p>A esta página le hemos puesto como <em>fuente base</em> un tamaño 7.</p>
<p>Si usamos <small> el texto queda más pequeño, disminuye en relación al tamaño base:
<small>más pequeño</small>.</p>
</body>
</html>
ETIQUETA FONT
Ejemplo:
<html>
<head>
<title>Ejemplo de font</title>
</head>
<body>
<font size=1> fuente de tamaño 1</font><br>
</body>
</html>
Ejemplo:
<html>
<head>
<title>Ejemplo de font</title>
</head>
<body>
texto de tamaño 3
- 11 -
<font size="+3">
texto de tamaño 6
</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>ejemplo de font</title>
</head>
<body>
texto normal (tamaño 3)
<font size="+1">
texto de tamaño 4
</font>
<font size="+1">
este texto sigue teniendo tamaño 4
</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>ejemplo de font y basefont</title>
</head>
<body>
<basefont size="3">
esto es texto de tamaño 3,
<font size="+3">
esto es de tamaño 6,
</font>
<font size="+4">
y esto es de tamaño 7
</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>ejemplo de font y basefont</title>
</head>
<body>
<basefont size="4">
esto es texto de tamaño 4,
<font size="+3">
esto es de tamaño 7,
</font>
<font size="+4"
y esto sigue siendo de tamaño 7
- 12 -
</font>
</body>
</html>
COLOR DEL TEXTO

Ejemplo:
<html>
<head>
<title>ejemplo de color</title>
</head>
<body>
<font color=red>Color rojo</font>
<font color=green>Color verde</font>
<font color=#0000ff>Color azul</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>ejemplo de color</title>
</head>
<body>
<h1>
<font color="fuchsia">
colores en el web
</font>
</h1>
ya podemos decir que sabemos poner colores en las páginas web,
<font color="green">
verde
</font>,
<font color="blue">
azul
</font>
<font color="red">
rojo
</font>,
etc. ninguno se nos resiste.
</body>
</html>
TIPO DE FUENTE
Ejemplo:
<html>
<head>
<title>ejemplo de tipos de fuentes</title>
</head>
<body>
Fuente por defecto
<font face="arial">Fuente Arial</font>
<font face="times">Fuente Times</font>
- 13 -
<font face="helvetica">Fuente Helvetica</font>

</body>
</html>
Ejemplo:
<html>
<head>
</head>
<body>
<font face="arial" size="2" color="#0088AA">
Estudio estadounidense concluye que para el cerebro es saludable navegar por Internet. La red
puede ser especialmente provechosa para las personas mayores, al ayudarles a mantener una
actividad adecuada en sus neuronas.
</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>colores</title>
</head>
<body>
<font color=orange size=7>
colores<br>
</font>
<font color="#33ff00" size=+2>
ejemplo 1<br>
</font>
<font color="#ff00ff">
ejemplo 2<br>
</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>fuentes</title>
</head>
<body>
<font color=red size=7 face="comic sans ms,arial">
ejercicio 5<br>
</font>
<font color="#33ccaa" size=5>
atributos<br>
</font>
<font color="#bb22ff" size=+3 face="courier new">
html<br>
</font>
- 14 -
</body>
</html>
Ejemplo:
<html>
<head>
<title>estilo de letras</title>
</head>
<body>
<center>
<h2>práctica tamaño, color y tipo de letras</h2>
<hr width=250><br>
</center>
<h1><font color="#ffff00">práctica de tamaño, color y tipo de
letras. color amarillo</font></h1>
<p align="center"><font size=5>texto en tamaño 5</font><br>
<font size=-1>texto algo menor</font><br>
<font size=+2>texto aún mayor</font><br><br>
<hr width=500><br></p>
<font color="#ff0000"><b>este texto es de color rojo y en
negrita</b></font><br>
<font color="0000ff"><u>este texto es de color azul y
subrayado</u></font><br><br>
<font face="verdana" color="00ff00" size=6>este texto se verá
con la fuente verdana, color verde y tamaño 6</font>
</body>
</html>
Ejemplo:
<html>
<head>
<title>ejemplo</title>
</head>
<body>
<b><font color="red">texto rojo </font>
<br>
<font color="blue">texto azul </font>
<br>
<font color="navy">texto azul marino </font>
<br>
<font color="green">texto verde </font>
<br>
<font color="olive">texto oliva </font>
<br>
<font color="yellow">texto amarillo </font>
<br>
<font color="lime">texto lima </font>
<br>
<font color="magenta">texto magenta </font>
<br>
<font color="purple">texto purpura </font>
<br>
- 15 -
<font color="cyan">texto cyan </font>

<br>
<font color="brown">texto marron </font>
<br>
<font color="black">texto negro </font>
<br>
<font color="gray">texto gris </font>
<br>
<font color="teal">texto teal </font>
<br>
<font color="white">texto blanco </font>
<br>
</b>
</body>
</html>
- 16 -
VINCULOS
CREAR UN VINCULO SIMPLE

Ejemplo:
<html>
<head>
<title><a href=...></a></title>
</head>
<body>
<a href="http://www.google.com/">Google.</a>
</body>
</html>
MARCAPAGINAS DE UN DOCUMENTO
Ejemplo:
<html>
<head>
<title>Marcapáginas en el documento</title>
</head>
<body>
<a href="#sec5">Ir a la sección 5</a>
<h3>Sección 1</h3>
<p>Texto, texto y más texto.</p>
<h3>Sección 2</h3>
<h3>Sección 3</h3>
<h3>Sección 4</h3>
<h3><a name="#sec5">Sección 5</a></h3>
<h3>Sección 6</h3>
<h3>Sección 7</h3>
<h3>Sección 8</h3>
</body>
</html>
Ejemplo:
Archivo: ej3.htm
<html>
<head>
<title>ejemplo 3</title>
</head>
<body>
<a name="arriba"><h1>página de enlaces</h1></a>
<a href="#abajo">ir abajo</a><br>
<a href="ej4.htm">ir a ejemplo 4</a><br><br>
<a href="http://www.google.com.pe/">ir a google</a><br>
- 17 -
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<a name="abajo"><br></a>
<a href="#arriba">ir arriba</a>
</body>
</html>
Ejemplo:
Archivo: ej4.htm
<html>
<head>
</head>
<body>
<h1>página de enlaces</h1>
<a href="ej3.html"> volver a ejemplo 3</a>
</body>
</html>
Ejemplo:
<html>
<head>
</head>
<body>
<h1>diferentes tipos de urls</h1>
enlace a <a href="http://www.google.com.pe">google</a>.
<br>
enlace al servidor de ftp
de <a href="ftp://ftp.mozilla.org/pub/mozilla/">mozilla</a>.
<br>
enlace a <a href="mailto:maikejauregui66@hotmail.com">
direccion de correo del profesor</a>.
<br>
enlace a las <a href="news://msnews.microsoft.com">news de microsoft</a>.
<br>
</body>
</html>
Ejemplo:
<html>
<head>
<title>
Ejemplo de Bookmark
</title>
</head>
<body>
<p>Un ejemplo de bookmark es mostrado a continuacion:</p>
<p><a href="#Desarrollando Webs 1">Desarrollando Webs 1</a></p>
- 18 -

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a name="Desarrollando Webs 1"></a>Desarrollando Webs 1</p>
<p>Este es un ejemplo de bookmark. Cuando haces clic en " Desarrollando Webs 1
"
en la parte superior de esta ventana estaras siendo enviado al subtitulo que esta en la parte
inferior del texto. Este tipo de pagina
es muy util para crear paginas "FAQ" (Preguntas frecuentemente contestadas
). Se pueden agregar muchos bookmarks a cualquier tipo de pagina que se desee
tambien.</p>
<p><a href="#top">Regresar arriba</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
"
tambien.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
"
tambien.</p>
<p> </p>
<p> </p>
<p> </p>
- 19 -
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
ABRIR UN VINCULO EN UNA NUEVA VENTANA

<html>
<head>
<title>Un vínculo que se abre en otro página del navegador</title>
</head>
<body>
<a href="http://www.google.com/" target="_blank">Google</a>
</body>
</html>
ABRIR UN VINCULO EN EL MISMO FRAME

<html>
<head>
<title>Vínculo que se abre en este recuadro</title>
</head>
<body>
<a href="http://www.google.com/" target="_self">Google</a>
</body>
</html>
ABRIR UN VINCULO EN UNA VENTANA DE TAMAÑO COMPLETO

<html>
<head>
<title>Vínculo que se abre en ventana completa</title>
</head>
<body>
<a href="http://www.google.com/" target="_top">Google</a>
</body>
</html>
- 20 -
IMÁGENES
COLOCAR UNA IMAGEN EN EL DOCUMENTO
<html>
<head>
<title><img src=...alt=...></title>
</head>
<body>
<img src="http://www.virtualnauta.com/graficos/foto1.jpg" alt="Dos niñas caminando de la
mano">
</body>
</html>
MODIFICAR LAS MEDIDAS DE UNA IMAGEN

<html>
<head>
<title>Modificamos la altura de la imagen</title>
</head>
<body>
<img src="http://www.virtualnauta.com/graficos/foto1.jpg" height="200px" width="50px">
</body>
</html>
ALINEACION DE IMAGENES
<html>
<head>
</head>
<body>
<p>
Esto es un parrafo con una imagen
<img src="Imagenes/ranita.gif" align="left" width="55" height="55" alt=""> a la izquierda del
texto( la imagen flotará a la izquierda del parrafo).
</p>
<p>
<img src="Imagenes/ranita.gif" align="right" width="55" height="55" alt=""> Esto es un parrafo
con una imagen a la derecha (la imagen flotará a la derecha del parrafo).
</p>
<p>
<img src="Imagenes/ranita.gif" width="55" height="55" alt=""> Una imagen antes del texto
</p>
<p>
una imagen despues del texto <img src="Imagenes/ranita.gif" align="top" width="55" height="55"
alt=""></p>
<p>
esto es una imagen incluida <img src="Imagenes/ranita.gif" align="middle" width="55"
height="55" alt=""> en el texto
</p>
</body>
</html>
- 21 -
BORDES Y MARGENES
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>
<img src="Imagenes/rana.gif" border="2" width="79" height="78" alt="rana">
</td>
</tr>
</table>
<p><br></p>
<table border="1">
<tr>
<td>
<img src="Imagenes/rana.gif" border="2" hspace="40" vspace="60" width="79" height="78"
alt="rana">
</td>
</tr>
</table>
</body>
</html>
DOCUMENTO CON IMÁGENES

<html>
<head>
</head>
<body>
<p>Esto es una imagen en movimiento (un <I>gif<I> animado): <img height="104" alt="animada"
src="Imagenes/agolpes.gif" width="140"> </p>
<p><br></p>
<p>Los atributos <b>src</b> y <b>alt</b> son obligatorios</p>
</body>
</html>
TAMAÑO
<html>
<head>
</head>
<body>
<p>Variando los valores de los atributos
<b>width</b> y <b>height</b> se puede
ampliar o reducir una imagen.</p>
<p><br></p>
<p>Esto es una imagen normal:
<img src="Imagenes/rana.gif" width="79" height="78" alt="">
</p>
<p><br></p>
- 22 -
<p>Esto es una imagen ampliada:

<img src="Imagenes/rana.gif" width="150" height="150" alt="">
</p>
<p><br></p>
<p>Esto es una imagen reducida:
<img src="Imagenes/rana.gif" width="50" width="50" height="40">
</p>
</body>
</html>
IMAGEN CON TEXTO ALTERNATIVO

<html>
<head>
</head>
<body>
<h2>imagen con texto alternativo</h2>
<p><br></p>
<p>Situa el cursor sobre la imagen
<img src="Imagenes/rana.gif" alt="Imagen de una rana" title="Imagen de una rana" width="79"
height="78">
</p>
<p><br></p>
<p>El texto alternativo, dado mediante el atributo <b>alt</b> debe permitir interpretar la mision de
la imagen aun en el caso de que esta no sea visible</p>
</body>
</html>
MAPA DE IMÁGENES
<html>
<head>
</head>
<body>
<map name="MAPA">
<area shape="rect" coords="0,0,50,50" href="verde.htm">
<area shape="circle" coords="78,75,25" href="violeta.htm">
<area shape="rect" coords="0,80,40,99" href="rojo.htm">
</map>
Ejemplo de una mapa interactivo. Pica en el cuadro para acceder a las paginas verde, violeta y rojo
<br>
<center><a><img src="Imagenes/cuadro.gif" usemap="#Mapa"></a></center>
</body>
</html>
Rojo
<html>
<head>
</head>
<body bgcolor="FF0000">
<center>ROJO</center>
- 23 -
</body>
</html>
Verde
<html>
<head>
</head>
<body bgcolor="#00FF00">
<center>VERDE</center>
</body>
</html>
Violeta
<html>
<head>
</head>
<body bgcolor="ff00ff">
<center>VIOLETA</center>
</body>
</html>
CREAR UN MAPA DE UNA IMAGEN

<html>
<head>
<title>Uso de imagenes</title>
</head>
<body>
<map name="map1">
<area
href="cuadrado.htm" alt="Cuadrado" shape=rect coords="0,75,100,175">
<area
href="circulo.htm" alt="Círculo" shape=circle coords="175,50,50">
<area
href="triangulo.htm" alt="Triángulo" shape=poly coords="125,250, 225,250, 175,165">
</map>
<img src="http://www.virtualnauta.com/graficos/cuaredtri.gif"
border="0" width="225" height="251"
usemap="#map1">
</body>
</html>
Cuadrado.htm
Escribir un texto de color azul
Circulo.htm
Escribir un texto de color rojo
Triangulo.htm
Escribir un texto de color verde
- 24 -
TABLAS
TABLA DE TRES COLUMNAS Y DOS FILAS

<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
TABLA CON LA CELDA 2 EXPANDIDA DOS FILAS

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
TABLA CON LA CELDA 1 EXPANDIDA DOS FILAS

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
</TR>
</TABLE>
TABLA CON LA CELDA 2 EXPANDIDA DOS COLUMNAS

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
</TR>
</TABLE>
TABLA CON HEADERS

<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
- 25 -
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
EJEMPLO DE COLSPAN MÁS HEADERS QUE SE EXPANDEN DOS COLUMNAS

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
TABLA DE MÚLTIPLES HEADERS, MÁS COLSPAN, CON UN PAR EXPANDIDO EN

DOS COLUMNAS
<TABLE BORDER> <TR>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
EJEMPLOS DE TABLAS CON HEADERS LATERALES

<TABLE BORDER>
<TR> <TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item3</TD></TR>
<TR> <TH>Head2</TH>
<TR> <TH>Head3</TH>
</TABLE>
- 26 -
EJEMPLOS DE HEADERS LATERALES, MÁS ROWSPAN, CON UN HEADER

EXPANDIÉNDOSE EN DOS FILAS
<TABLE BORDER>
<TR> <TH ROWSPAN=2>Head1</TH>
<TD>Item 4</TD>
</TR>
<TR>
<TD>Item 8</TD>
</TR>
<TR> <TH>Head2</TH>
<TD>Item 11</TD>
</TR>
</TABLE>
TABLA DE EJEMPLO, COMBINANDO TODO LO ANTERIOR

<TABLE BORDER=1>
<TR> <TH ROWSPAN=4>Promedio</TH>
</TR>
<TR>
<TD COLSPAN=2> <TD> <TH>Altura</TH> <TH>Peso</TH>
</TR>
<TR> <TH ROWSPAN=2>Género</TH>
<TH>Hombres</TH> <TD>1.9</TD> <TD>0.003</TD>
</TR>
<TR> <TH>Mujeres</TH> <TD>1.7</TD> <TD>0.002</TD>
</TR>
</TABLE>
UTILIZANDO MARGENES Y BORDES

UNA TABLA SIN BORDES
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
TABLA CON BORDE DE 10

<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>
- 27 -
CELLPADDING y CELLSPACING
LA SIGUIENTE TABLA SE HARÁ USANDO CELLPADDING, PERO NO

CELLSPACING
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>

<TR>
</TR>
<TR>
</TR>
</TABLE>
LA SIGUIENTE TABLA SE HARÁ USANDO CELLSPACING, PERO NO

CELLPADDING
<TABLE BORDER CELLSPACING=10 CELLPADDING=0 >

<TR>
</TR>
<TR>
</TR>
</TABLE>
LA SIGUIENTE TABLA SE HARÁ USANDO CELLSPACING Y CELLPADDING
<TABLE BORDER CELLSPACING=5 CELLPADDING=10 >

<TR>
</TR>
<TR>
</TR>
</TABLE>
CELLPADDING define el espacio entre los bordes de la celda y el contenido de la misma

CELLSPACING define el espacio entre las celdas de la tabla
TABLA CON MÚLTIPLES LÍNEAS DE TEXTO EN LAS CELDAS
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Esta es la celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda,<br> celda 3</TD>
- 28 -
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y ahora esta<br>es celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Como la tabla y las celdas carecen de ancho (width) el navegador determina éste según la longitud
del texto en cada celda.
ALIGN=LEFT|RIGHT|CENTER
TABLA QUE MUESTRA DIFERENTES POSIBILIDADES DE ALINEAMIENTO DE

TEXTO
Nota: este formato se puede aplicar a celdas individuales o a todas las filas.
<TABLE BORDER=1 WIDTH=100%>

<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierda</TD>
</TR>
</TABLE>
VALIGN=TOP|BOTTOM|MIDDLE
TABLA QUE MUESTRA DIFERENTES POSIBILIDADES DE ALINEAMIENTO

VERTICAL DE TEXTO Y ALINEAMIENTO DENTRO DE LAS CELDAS DE LA TABLA
Nota: este formato se puede aplicar a celdas individuales o a todas las filas.
<TABLE BORDER=1 WIDTH=100%>

<TR>
<TH>Enero</TH>
<TH>Febrero</HT>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>y esta es<br>la celda 2</TD>
- 29 -
<TD>Celda 3</TD>
</TR>
<TR HEIGHT=50>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto,<br>centro</TD>
</TR>
</TABLE>
CAPTION=TOP|BOTTOM [TÍTULO]
TABLA CON CAPTION ARRIBA
<TABLE BORDER> <CAPTION ALIGN=top><B>CAPTION [TÍTULO]

arriba</B></CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
TABLA CON CAPTION ABAJO
<TABLE BORDER>
<CAPTION ALIGN=bottom><B>CAPTION [TÍTULO] abajo</B></CAPTION>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
</TABLE>
- 30 -
ANCHO DE LA TABLAS Y UBICACIÓN:
DIFERENTES ANCHOS DE TABLA.
TABLA CON ANCHO DE 50% (DEL ANCHO DE LA PÁGINA)
<TABLE BORDER WIDTH="50%">

<TR> <TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR> <TD>3</TD><TD>4</TD>
</TR>
</TABLE>
SI LAS CELDAS TIENEN CONTENIDOS DIFERENTES, ESTO AFECTA EL ANCHO DE

CADA CELDA EN RELACIÓN CON EL ANCHO DE LA TABLA

<TR> <TD>Esta tiene texto que amplía el ancho de la celda.</TD><TD>2</TD>
</TR>
</TR>
</TABLE>
TAMBIÉN SE PUEDE COLOCAR EL ANCHO DE LA TABLA EN PIXELES, EN ESTE

CASO 300
<TABLE BORDER WIDTH="300">

<TR> <TD>Width=300</TD><TD>2</TD>
</TR>
</TR>
</TABLE>
CENTRANDO UNA TABLA
<CENTER>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>
ANCHO (WIDTH) DE TABLA EN TABLAS ANIDADAS
SE OBSERVA DOS TABLAS ANIDADAS, UTILIZANDO EL ATRIBUTO DE ANCHO DE

LA TABLA INICIAL PARA DETERMINAR EL ANCHO DE LA SEGUNDA TABLA
- 31 -

<TR> <TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
ALTURA (HEIGHT)
TABLA CON ALTURA DE 50% (REFERENTE A LA PARTE DE LA PÁGINA QUE SE

VE.)
<TABLE BORDER WIDTH="50%" HEIGHT="50%">

<TR> <TD>HEIGHT=50%</TD> <TD>Item 2</TD>
</TR>
</TR>
</TABLE>
TAMBIÉN SE PUEDE COLOCAR LA ALTURA DE LA TABLA EN PIXELES, EN ESTE

CASO 100
<TABLE BORDER WIDTH="50%" HEIGHT="100">

<TR> <TD>HEIGHT=100</TD> <TD>Item 2</TD>
</TR>
</TR>
</TABLE>
TABLA
<html>
<head>
<title>título</title>
</head>
<body>
<table border=0>
<td>
<table border=1 align=left>
<caption>Tabla básica</caption>
<tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr>
</table>
</td>
- 32 -
<td>
<caption>Tabla hueca</caption>
<tr> <td>2,1</td> <td> </td> <td>2,3</td> </tr>
</table>
</td>
<td>
<caption>Tabla con colspan</caption>
<tr> <td colspan=3 align=center>1,x</td> </tr>
</table>
</td>
<td>
<table border=1>
<caption>Tabla con rowspan</caption>
<tr> <td rowspan=3>x,1</td> <td>1,2</td> <td>1,3</td> </tr>
<tr> <td>2,2</td> <td>2,3</td> </tr>
<tr> <td>3,2</td> <td>3,3</td> </tr>
</table>
</td>
</table>
</body>
</html>
- 33 -
MARCOS (Frames)
Marcos en Vertical
Marco.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="30%,40%,30%">
<frame src="ejframe1.htm">
</frameset><noframes></noframes>
<noframes></noframes>
</html>
Ejframe1.htm
<html>
<head>
<title>Primer Frame</title>
</head>
<STYLE type=text/css>BODY {
BACKGROUND-COLOR: blue
}
</STYLE>
<body>
<H3>Frame 1</H3>
</body>
</html>
Ejframe2.htm
<html>
<head>
</head>
BACKGROUND-COLOR: yellow
}
</STYLE>
<body>
<H3>Frame 2</H3>
</body>
</html>
Ejframe3.htm
<html>
<head>
- 34 -
</head>
BACKGROUND-COLOR: red
}
</STYLE>
<body>
<H3>Frame 3</H3>
</body>
</html>
Marcos en horizontal
<html>
<frameset rows="30%,40%,30%">
<frame src="ejframe1.html">
</frameset>
</html>
Marcos y Contenido alternativo

<html>
<head>
</head>
<frameset cols="50%,50%">
<frameset rows="60%,40%">
</frameset>

<noframes>
<body>
<h3>Su navegador no admite marcos</h3>
</body>
</noframes>
</frameset>
</html>
Iframe alineado a la derecha

<html>
<head>
<title>iframes</title>
</head>
<body>
<h2>Iframe alineado a la derecha</h2>
<iframe src="http://www.yahoo.com" width="50%" align="right"></iframe>
</body>
</html>
- 35 -
Iframe sin bordes

<html>
<head>
</head>
<body>
<h2>Iframe sin bordes</h2>
<iframe src="http://www.yahoo.com" width="50%" frameborder="0"></iframe>
</body>
</html>
Definir la altura del iframe

<html>
<head>
</head>
<body>
<h2>Iframe con altura de 60 pixels</h2>
<iframe src="http://www.yahoo.com" height="60px"></iframe>
</body>
</html>
Definir el ancho del iframe

<html>
<head>
</head>
<body>
<h2>Iframe con un ancho del 80%</h2>
<iframe src="http://www.yahoo.com" width="80%"></iframe>
</body>
</html>
Mostrar un iframe sin la barra de desplazamiento

<html>
<head>
</head>
<body>
<h2>Iframe sin barras de desplazamiento</h2>
<iframe src="http://www.yahoo.com" width="80%" height="200px" scrolling="no"></iframe>
</body>
</html>
- 36 -
Formularios
Campo de Texto
<html>
<head>
<title>campo de texto </title>
</head>
<body>
<p>Nombre:
<input type="text" name="nombre">
<br>Apellidos:
<input type="text" size="35"
name="apellidos"></p>
</body>
</html>
Opciones Simples
<html>
<head>
<title>opciones simples </title>
</head>
<body>
<p>Tienes television:
<input type="checkbox" name="ele" value="television"
checked="checked">
<br>
Tienes video:
<input type="checkbox" name="ele" value="video">
<br>
Tienes DVD:
<input type="checkbox" name="ele" value="DVD"></p>
</body>
</html>
Opciones Excluyentes
<html>
<head>
<title>opciones excluyentes</title>
</head>
<body>
<p>Hombre:
<input type="radio" name="sexo" value="masc">
<br>
Mujer:
<input type="radio" name="sexo" value="fem"
checked="checked"></p>
</body>
</html>
Lista de Opciones
<html>
<head>
<title>lista de opciones </title>
- 37 -
</head>
<body>
<p>Selecciona tu color preferido:<br>
<select name="color">
<option value="amarillo">Amarillo</option>
<option value="azul">Azul</option>
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="otro" selected="selected">
Otro</option>
</select>
<br><br>
Selecciona tus frutas predilectas:<br>
<select name="frutas" size="7" multiple="multiple">
<option value="melon">Melón</option>
<option value="piña">Piña</option>
<option value="uvas">Uvas</option>
<option value="pera">Pera</option>
<option value="manzana">Manzana</option>
<option value="naranja">Naranja</option>
<option value="platano">Platano</option>
</select></p>
</body>
</html>
Area de Texto
<html>
<head>
<title>area de texto</title>
</head>
<body>
<p>
<textarea rows="10" cols="30" name="texto">
Aquí puedes escribir el texto que quieras.
El elemento <textarea> sólo puede
contener texto.
</textarea>
</p>
<p><br>Los atributos <b>rows</b> y <b>cols</b>
del elemento <b><textarea></b> son
obligatorios.</p>
</body>
</html>
Botones de acción
<html>
<head>
<title>botones de accion</title>
</head>
<body>
<p>Un botón
<input type="button" value="Inicial">
- 38 -
</p>
</body>
</html>
Etiquetas de campos de formularios

<html>
<head>
<title>etiquetas de campos de formularios</title>
</head>
<body>
<p>
<label>
<b>Etiqueta</b>
</label>
<input type="text" name="nombre"
value="es un ejemplo" readonly>
</p>
</body>
</html>
Agrupación de campos
<html>
<head>
<title>agrupacion de campos </title>
</head>
<body>
<fieldset>
<legend>Ficha de compra</legend>
<label>Nombre</label>
<input type="text" name="nombre">
<br>
<label>Apellidos</label>
<input type="text" size="35"
name="apellidos">
<br><br>
<label>Television</label>
<input type="checkbox" name="TV">
<label>Vídeo</label>
<input type="checkbox" name="video">
<label>DVD</label>
<input type="checkbox" name="DVD">
</fieldset>
</body>
</html>
Texto oculto
<html>
<head>
<title> texto oculto</title>
</head>
<body>
- 39 -
<p>
Contraseña:
<input type="password" name="passw">
</p>
</body>
</html>
Cargar archivo
<html>
<head>
<title>cargar archivo </title>
</head>
<body>
<p>
<label>Archivo</label>
<input type="file" name="fname">
</p>
</body>
</html>
- 40 -
Control del número de visitas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text⁄javascript">
var cookie_nombre = 'usuarios'

var cookie_contador = 'visitas'
⁄⁄si se desea que la cookie expire al terminar la sesion, poner a 0 esta variable
var fin_de_cookie = new Date (2040, 12, 31);
function enviar_cookie (nombre_de_cookie, valor_de_cookie, fin_de_cookie)

{
document.cookie = nombre_de_cookie + "=" + escape(valor_de_cookie) + ((fin_de_cookie ==
0) ? "" : ("; expires=" + fin_de_cookie.toGMTString()))
}
function consultar_cookie (nombre_de_cookie)

{
var buscar_cookie = nombre_de_cookie + "=";
if (document.cookie.length > 0)
{
i = document.cookie.indexOf(buscar_cookie);
if (i != -1)
{
i += buscar_cookie.length;
j = document.cookie.indexOf (";", i);
if (j == -1)
j = document.cookie.length;
return unescape (document.cookie.substring (i,j));
}
}
}
function obtener_nombre ()
{
if (!(nombre = consultar_cookie (cookie_nombre)))
{
nombre = window.prompt ('Escribe tu nombre por favor', '');
}
else
{
if (nombre == 'Desconocido')
{
nombre = window.prompt ('Escribe tu nombre por favor', '');
- 41 -
}
if (nombre == null || nombre == '')
{
nombre = 'Desconocido'
}
enviar_cookie (cookie_nombre, nombre, fin_de_cookie);
}
function contador ()
{
if (!(numero = consultar_cookie (cookie_contador)))
{
numero = 0;
numero++;
}
else
{
numero++;
}
enviar_cookie (cookie_contador, numero, fin_de_cookie);
}
function cookies ()
{
obtener_nombre ()
contador ()
nombre_de_usuario = consultar_cookie (cookie_nombre)

numero_de_visitas = consultar_cookie (cookie_contador)
document.write ('Bienvenido <b><font

color="#FF0000">'+nombre_de_usuario+'<⁄font><⁄b>.')
if (numero == 1)
{
document.write (' Has visitado esta página <b><font
color="#FF0000">'+numero+'<⁄font><⁄b> vez.')
}
else
{
document.write (' Has visitado esta página <b><font
color="#FF0000">'+numero+'<⁄font><⁄b> veces.')
}
}
<⁄script>
</head>
<body>
<p><script language="javascript">cookies()<⁄script><⁄p>
</body>
</html>
- 42 -
EJEMPLOS DE FORMULARIOS CON JAVASCRIPT
<html>
<head>
<script language="JavaScript">


</script>
</head>
<body>
<center><h3>EJEMPLOS DE FORMULARIOS CON JAVASCRIPT</h3></center><br>

<center>
<h5><font color="olive">Ejemplo número 1</font></h5>
<h3><font color="Blue">Seleccione el midi file que desea escuchar y pulse
Reproducir</font></h3>
<form>
<select name="Midis" size="4">
<option value="Barbara Streisand - Woman In Love.mp3">Midi File 1</option>
<option value="bangles-IF SHE KNEW WHAT SHE WANTS.mp3">Midi File 2</option>
<option value="Bangles - Manic Monday.mp3">Midi File 3</option>
<option value="bangles-WALKING DOWN YOUR STREET.mp3">Midi File 4</option>
</select>
<input type="button" value="Reproducir"
onclick="location.href=this.form.Midis.options[this.form.Midis.selectedIndex].value;">
- 43 -
</form>
</center>


<center>
<h3><font color="Blue">Seleccione la URL que desea visitar </font></h3>
<h4><font color="Red">Para visitar estas páginas debe estar conectado a la Red. </font></h4>
<form name="enlaces">
<select name="ir_a" size=1>
<option selected value="http://www.google.com/">la Web de google
<option value="http://www.altavista.com">la web de altavista
<option value="http://www.ra-ma.es">Editorial Ra-Ma
<option value="http://www.fut.es/">Tarragona Internet
</select>
<input type="button" value="Conectar con la página" onclick="conectar(this.form)">
</form>


<center>
<h3><font color="Blue">Seleccione la URL a visitar </font></h3>
<h4><font color="Red">Para visitar estas páginas debe estar conectado a la Red. </font></h4>
<form name="navegador">
<select name="enlaces" onchange="ir_abis(this.form)">
<option value="http://www.google.com">la Web de google
<option value="http://www.altavista.com">la web de altavista
<option value="http://www.ra-ma.es">Editorial Ra-Ma
<option value="http://www.fut.es/">Tarragona Internet
</select>
<input type="button" value="Conectar con la página" onclick="acceder(this.form)">
<input type="reset" value="Borrar Datos"><br>
<input type="text" name="enlace_usuario" size=50 value="Aquí puede ver la dirección del URL a
visitar"></form>
</body>
</html>
- 44 -

PRACTICA DE HTML-ultimo

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PRACTICA DE HTML-ultimo

Cargado por

Copyright:

Formatos disponibles

INSTITUTO CIMAS PROFESOR: MAIKE JAUREGUI

TITULOS EN DIFERENTES TAMAÑOS

PONER UN COMENTARIO EN EL CODIGO

DIBUJAR UNA LINEA HORIZONTAL

TEXTO POR DEBAJO

TEXTO POR ENCIMA

TEXTO ENFATIZADO- TEXTO FUERTE (<EM> <STRONG>)

<div align="center">Bienvenidos a mi pagina.</div>

&AACUTE, &EACUTE; &IACUTE; &OACUTE; &UACUTE;

Si escribo esto, seguir&aacute; siendo el mismo

COLOR DEL TEXTO

<font face="helvetica">Fuente Helvetica</font>

<font color="cyan">texto cyan </font>

CREAR UN VINCULO SIMPLE

<p><a href="#Desarrollando Webs 3">Desarrollando Webs 3</a></p>

ABRIR UN VINCULO EN UNA NUEVA VENTANA

ABRIR UN VINCULO EN EL MISMO FRAME

ABRIR UN VINCULO EN UNA VENTANA DE TAMAÑO COMPLETO

MODIFICAR LAS MEDIDAS DE UNA IMAGEN

DOCUMENTO CON IMÁGENES

<p>Esto es una imagen ampliada:

IMAGEN CON TEXTO ALTERNATIVO

CREAR UN MAPA DE UNA IMAGEN

TABLA DE TRES COLUMNAS Y DOS FILAS

TABLA CON LA CELDA 2 EXPANDIDA DOS FILAS

TABLA CON LA CELDA 1 EXPANDIDA DOS FILAS

TABLA CON LA CELDA 2 EXPANDIDA DOS COLUMNAS

TABLA CON HEADERS

EJEMPLO DE COLSPAN MÁS HEADERS QUE SE EXPANDEN DOS COLUMNAS

TABLA DE MÚLTIPLES HEADERS, MÁS COLSPAN, CON UN PAR EXPANDIDO EN

EJEMPLOS DE TABLAS CON HEADERS LATERALES

EJEMPLOS DE HEADERS LATERALES, MÁS ROWSPAN, CON UN HEADER

TABLA DE EJEMPLO, COMBINANDO TODO LO ANTERIOR

UTILIZANDO MARGENES Y BORDES

TABLA CON BORDE DE 10

LA SIGUIENTE TABLA SE HARÁ USANDO CELLPADDING, PERO NO

<TABLE BORDER CELLPADDING=10 CELLSPACING=0>

LA SIGUIENTE TABLA SE HARÁ USANDO CELLSPACING, PERO NO

<TABLE BORDER CELLSPACING=10 CELLPADDING=0 >

LA SIGUIENTE TABLA SE HARÁ USANDO CELLSPACING Y CELLPADDING

<TABLE BORDER CELLSPACING=5 CELLPADDING=10 >

CELLPADDING define el espacio entre los bordes de la celda y el contenido de la misma

TABLA CON MÚLTIPLES LÍNEAS DE TEXTO EN LAS CELDAS

TABLA QUE MUESTRA DIFERENTES POSIBILIDADES DE ALINEAMIENTO DE

<TABLE BORDER=1 WIDTH=100%>

TABLA QUE MUESTRA DIFERENTES POSIBILIDADES DE ALINEAMIENTO

<TABLE BORDER=1 WIDTH=100%>

TABLA CON CAPTION ARRIBA

<TABLE BORDER> <CAPTION ALIGN=top><B>CAPTION [TÍTULO]

TABLA CON CAPTION ABAJO

ANCHO DE LA TABLAS Y UBICACIÓN:

DIFERENTES ANCHOS DE TABLA.

TABLA CON ANCHO DE 50% (DEL ANCHO DE LA PÁGINA)

<TABLE BORDER WIDTH="50%">

SI LAS CELDAS TIENEN CONTENIDOS DIFERENTES, ESTO AFECTA EL ANCHO DE

<TABLE BORDER WIDTH="50%">

TAMBIÉN SE PUEDE COLOCAR EL ANCHO DE LA TABLA EN PIXELES, EN ESTE

<TABLE BORDER WIDTH="300">

CENTRANDO UNA TABLA

ANCHO (WIDTH) DE TABLA EN TABLAS ANIDADAS

SE OBSERVA DOS TABLAS ANIDADAS, UTILIZANDO EL ATRIBUTO DE ANCHO DE

<TABLE BORDER WIDTH="50%">

TABLA CON ALTURA DE 50% (REFERENTE A LA PARTE DE LA PÁGINA QUE SE

Si escribo esto, seguirá siendo el mismo