03-Practicas de HTML

TABLA DE CONTENIDO

Práctica No. 1. ETIQUETAS DE APERTURA....................................................................................3

Práctica No. 2. ESTRUCTURA BÁSICA............................................................................................3

Práctica No. 3. PÁRRAFOS............................................................................................................4

Práctica No. 4. ENCABEZADOS.....................................................................................................5

Práctica No. 5. CENTRADO...........................................................................................................6

Práctica No. 6. SEPARADOR HORIZONTAL....................................................................................6

Práctica No. 7. SEPARADOR HORIZONTAL ANCHO.......................................................................7

Práctica No. 8. SEPARADOR NOSHADE.........................................................................................7

Práctica No. 9. SEPARADOR NOSHADE SIZE.................................................................................8

Práctica No. 10. DERECHA............................................................................................................8

Práctica No. 11. IZQUIERDA..........................................................................................................9

Práctica No. 12. ETIQUETAS ANIDADAS........................................................................................9

Práctica No. 13. SALTO DE LÍNEA................................................................................................10

Práctica No. 14. TEXTO CON TAMAÑO MENOR..........................................................................11

Práctica No. 15. TEXTO CON TAMAÑO MAYOR..........................................................................12

Práctica No. 16. NEGRITAS Y CURSIVAS......................................................................................13

Práctica No. 17. Tipo de fuente..................................................................................................14

Práctica No. 18. TEXTO PREFORMATEADO.................................................................................15

Práctica No. 19. TAMAÑO DE FUENTE........................................................................................17

Práctica No. 20. CITA TEXTUAL...................................................................................................19

Práctica No. 21. VIÑETAS............................................................................................................21

Práctica No. 22. ANIDAR VIÑETAS..............................................................................................22

Práctica No. 23. VIÑETAS CUADRADAS.......................................................................................23

Práctica No. 24. VIÑETAS CON NÚMEROS ROMANOS................................................................24

Práctica No. 25. COLOR DE TEXTO..............................................................................................25

Práctica No. 26. COLOR DE FONDO............................................................................................26

Práctica No. 27. IMAGEN DE FONDO..........................................................................................27

Práctica No. 28. IMAGEN DE BOTÓN..........................................................................................28

Práctica No. 29. ANCLAS O MARCADORES.................................................................................29

Práctica No. 30. ENLACE CON UNA PÁGINA DE INTERNET.........................................................31

Práctica No. 31. ENLACE DE CORREO ELECTRÓNICO..................................................................32

Práctica No. 32. ENLAZAR A OTRA PÁGINA UTILIZANDO UNA IMAGEN.....................................33

1

MAGN Alberto Karim Gómez Vázquez

Práctica No. 33. TEXTO ALTERNATIVO........................................................................................34

Práctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN.........................35

Práctica No. 35. ENLACE A UN DOCUMENTO.............................................................................36

Práctica No. 36. ENLACE TEXTO A UNA IMAGEN.......................................................................37

Práctica No. 37. TEXTO CON RESPECTO A LA IMAGEN..............................................................38

Práctica No. 38. LETRAS Y CARACTERES ESPECIALES..................................................................39

Práctica No. 39. TABLAS.............................................................................................................41

Práctica No. 40. TABLAS CON BORDE.........................................................................................42

Práctica No. 41. COLOR DE BORDE.............................................................................................43

Práctica No. 42. SEPARACIÓN ENTRE LAS CELDAS DE UNA TABLA.............................................44

Práctica No. 43. SEPARACIÓN ENTRE EL CONTENIDO Y EL BORDE DE LA CELDA........................46

Práctica No. 44. DIMENSIONES DE TABLA Y CELDAS..................................................................48

Práctica No. 45. TABLAS FILAS DESIGUALES...............................................................................50

Práctica No. 46. IMAGEN EN UNA TABLA...................................................................................51

Práctica No. 47. TÍTULO DE LA TABLA.........................................................................................53

Práctica No. 48. CELDAS DE CABECERA......................................................................................55

Práctica No. 49. CELDAS QUE ABARCAN A OTRAS CELDAS.........................................................56

Práctica No. 50. UNA CELDA OCUPE EL ESPACIO DE VARIAS FILAS............................................57

Práctica No. 51. POSICIÓN DEL CONTENIDO DENTRO DE LA CELDA...........................................58

Práctica No. 52. ALINEACIÓN DE TEXTO EN UNA CELDA ARRIBA O ABAJO................................60

Práctica No. 53. DIMENSIONES DE LAS CELDAS..........................................................................61

Práctica No. 54. COLOR DE FONDO DE LA TABLA.......................................................................62

Práctica No. 55. COLOR DE FONDO DE LAS CELDAS...................................................................63

Práctica No. 56. IMAGEN DE FONDO DE LA TABLA....................................................................64

Práctica No. 57. IMAGEN DE FONDO DE LA CELDA....................................................................65

2


PRÁCTICAS DE HTML

HTML es un lenguaje de hipertexto, Nos sirve para modelar texto, Trabaja con etiquetas y cada etiqueta indicará algo.

<etiquetas>< abre>cierra

Su extensión es HTML

Práctica No. 1. ETIQUETAS DE APERTURA

Todo documento HTML debe estar incluido dentro de las etiquetas <HTML></HTML>. Esto le indica al navegador en que lenguaje está creado el documento

<HTML>INSTITUTO MAR DE CORTES

</HTML>

Práctica No. 2. ESTRUCTURA BÁSICA

Dentro de las etiquetas <HTML></HTML>.

Existen dos partes fundamentales la cabecera del documento que son:

<HEAD> </HEAD>

<HTML> <HEAD> 

<TITLE> TÌTULO DEL PROGRAMA</TITLE>  </HEAD><BODY> Entre estas etiquetas pondremos el contenido de nuestra pàgina web </BODY></HTML>

3


Práctica No. 3. PÁRRAFOS

Cuando llegamos al final de la línea de texto, éste saltará automáticamente a la línea siguiente, pero si queremos crear párrafos separados por una línea en blanco utilizaremos la etiqueta <P>

<HTML><HEAD>

<TITLE> Párrafos </TITLE></HEAD><BODY>

<P>Esto es un párrafo dentro de una página web.<P> Esto es otro párrafo que está separado del anterior por una

línea en blanco.</BODY>

</HTML>

4


Práctica No. 4. ENCABEZADOS

También podemos crear encabezados (también llamados cabeceras) para el texto por ejemplo para señalar los distintos encabezados

<HTML> <HEAD>

<TITLE> Encabezados</TITLE> </HEAD><BODY> <H1> Encabezado 1 </H1> <H2> Encabezado 2 </H2> <H3> Encabezado 3 </H3> <H4> Encabezado 4 </H4> <H5> Encabezado 5 </H5> <H6> Encabezado 6 </H6></BODY></HTML>

5


Práctica No. 5. CENTRADO

Para centrar los elementos del documento HTML utilizamos las etiquetas <center></center>

<HTML> <HEAD>

<TITLE>Centrado</TITLE> </HEAD><BODY> <CENTER>INSTITUTO MAR DE CORTES</CENTER></BODY></HTML>

Práctica No. 6. SEPARADOR HORIZONTALEs posible colocar un separador horizontal con la instrucción <HR>.

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR> Podemos utilizar una lìnea horizontal para separar distintas partes de una pàgina Web, y para ello utilizaremos esta etiqueta </BODY> </HTML>

6


Práctica No. 7. SEPARADOR HORIZONTAL ANCHO

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL ANCHO</TITLE> </HEAD>

<BODY> <HR WIDTH="50%"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR WIDTH="50%"> </BODY></HTML>

Práctica No. 8. SEPARADOR NOSHADE

Si queremos que el separador horizontal aparezca incrustado en la página, podemos añadir la etiqueta <HR> el comando NOSHADE

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE> </HEAD>

<BODY> <HR NOSHADE> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR NOSHADE> </BODY></HTML>

7


Práctica No. 9. SEPARADOR NOSHADE SIZEPodemos hacer el que separador horizontal sea más grueso añadiendo el comando SIZE=”grueso en pixeles” a la etiqueta HR. Si queremos crear un separador horizontal con un grosor de 20 pixeles y con sombras tendríamos que escribir la siguiente línea de código <HR NOSHADE SIZE="20">

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE> </HEAD>

<BODY> <HR NOSHADE SIZE="20"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR NOSHADE SIZE="20"> </BODY></HTML>

Práctica No. 10. DERECHA

ALINEACIÓN DEL SEPARADOR HORIZONTAL

Podemos alinear el separador horizontal a la izquierda o a la derecha. si no especificamos la alineación, el separador aparecerá siempre centrado.

Para alinearlo a la izquierda utilizaremos el COMANDO ALINGN="LEFT" añadiendo a la etiqueta <HR>, tal y como puede verse en el ejemplo <HR WIDTH="50%" ALIGN="LEFT">

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD>

<BODY> <HR WIDTH="50%" ALIGN="RIGHT"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR WIDTH="50%" ALIGN="RIGHT"> </BODY>

8


</HTML>

Práctica No. 11. IZQUIERDA

Para alinearlo a la izquierda utilizaremos el comando align="left" añadiendo a la etiqueta <hr>, tal y como puede verse en el ejemplo <HR WIDTH="50%" ALIGN="LEFT">

<HEAD><TITLE>SEPARADOR HORIZONTAL</TITLE></HEAD><BODY><HR WIDTH="50%" ALIGN="LEFT"><CENTER>INSTITUTO MAR DE CORTES </CENTER><HR WIDTH="50%" ALIGN="LEFT"></BODY></HTML>

Práctica No. 12. ETIQUETAS ANIDADAS

<HTML> <HEAD> <TITLE>ETIQUETAS ANIDADAS</TITLE> </HEAD> <BODY> ETIQUETAS ANIDADAS <CENTER><H1>CURSO HTML</H1></CENTER> <CENTER><H2>CURSO HTML</H2></CENTER> <CENTER><H3>CURSO HTML</H3></CENTER> <HR> </BODY></HTML>

9


Práctica No. 13. SALTO DE LÍNEA

<HTML> <HEAD> <TITLE>SALTO DE LÌNEA</TITLE> </HEAD> <BODY> SALTOS DE LÌNEA <BR> <HR> <CENTER><H1>CARRERA</H1></CENTER> <BR> <BR> <BR> <CENTER><H1>INFORMATICA</H1></CENTER> <BR> <BR> <BR> <HR> </BODY></HTML>

10


Práctica No. 14. TEXTO CON TAMAÑO MENOR

Con las etiquetas <TT> y </TT> conseguimos un texto con un tamaño menor y con la apariencia de un texto escrito a máquina, pero en este caso no se formatea el texto, sólo afecta al tipo de letra.

<HTML> <HEAD> <TITLE>Texto con tamaño menor</TITLE> </HEAD> <BODY> TEXTO CON TAMAÑO MENOR <HR> <CENTER><H1><B><I>CARRERA</I></B></H1></CENTER> <CENTER><H1>INFORMATICA</H1></CENTER> <HR> <TT> Podemos crear un texto que parezca haber sido escrito con una màquina de escribir, el texto aparecerà con el tipo de letra de las màquinas de escribir antiguas (tipo Courier) respetarà los espacios en blanco y los saltos de lìnea sin necesidad de incluir ninguna etiqueta màs. </TT> </BODY></HTML>

11


Práctica No. 15. TEXTO CON TAMAÑO MAYOR

<HTML> <HEAD> <TITLE>Texto con tamaño mayor</TITLE> </HEAD> <BODY> TEXTO CON TAMAÑO MAYOR <HR> <CENTER><H1><B><I>CARRERA</I></B></H1></CENTER> <CENTER><H1>INFORMATICA<H1></CENTER> <HR> <BASEFONT SIZE=”10”> Podemos crear un texto con tamaño mayor </BODY> </HTML>

12


Práctica No. 16. NEGRITAS Y CURSIVAS

(<B>) TEXTO EN NEGRITAS (</B>) (<I>) TEXTO EN CURSIVAS (</I>)

<HTML> <HEAD> <TITLE>NEGRITAS Y CURSIVAS</TITLE> </HEAD> <BODY> <HR> TEXTO CON TAMAÑO MAYOR, ENCABEZADO H1, NEGRITAS Y CURSIVA <HR> <CENTER><H1><B><I>INSTITUTO MAR DE CORTES</I></B></H1></CENTER> <BR> <BR> <BR> <CENTER><H1>TERCER SEMESTRE</H1></CENTER> <BR> <BR> <BR> </BODY> </HTML>

13


Práctica No. 17. Tipo de fuente

<FONT></FONT> ESTA ETIQUETA ADMITE VARIOS ATRIBUTOS: TAMAÑO DE FUENTE, TIPO DE FUENTE AÑADIREMOS A ESTA ETIQUETA EL ATRIBUTO size=”Nùmero tamaño letra”. Los tamaños de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:

<P><FONT FACE=”arial”>Fuente arial</FONT>

Ejemplo:

<HTML> <HEAD> <TITLE>TIPO DE FUENTE</TITLE> </HEAD> <BODY> TIPO DE FUENTE <P> <HR> <CENTER><H1><B><I>INSTITUTO MAR DE CORTES</I></B></H1></CENTER> <HR> <CENTER><H1>Tipo de fuente</H1></CENTER> <HR> <H3> <FONT face="Arial"> Fuente Arial <BR> </FONT> <FONT face="Arial Black"> Fuente Arial Black <BR> </FONT> <FONT face="Comic Sans MS"> Fuente Comic Sans MS <BR> </FONT> <FONT face="Courier New"> Fuente Courier New <BR> </FONT> <FONT face="Georgia"> Fuente Georgia <BR> </FONT> <FONT face="Impact"> Fuente Impact <BR> </FONT> <FONT face="Times New Roman"> Fuente Times New Roman <BR> </FONT> <FONT face="Trebuchet MS"> Fuente Trebuchet MS <BR> </FONT> <FONT face="Verdana"> Fuente Verdana <BR> </FONT> </H3> </BODY> </HTML>

14


Práctica No. 18. TEXTO PREFORMATEADO

Podemos crear un texto que aparezca haber sido escrito con una máquina de escribir, para ello utilizamos las etiquetas <PRE></PRE>

El texto aparecerá con el tipo de letra de las máquinas de escribir antiguas (tipo Courier) Y respetará los espacios en blanco y los saltos de línea sin necesidad de incluir ninguna etiqueta más.

<HTML> <HEAD> <TITLE>Texto preformateado</TITLE></HEAD> <BODY> Podemos crear un texto que aparezca haber sido escrito con una màquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE". El texto aparecerà con el tipo de letra de las màquinas de escribir antiguas (tipo curier) respetarà los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta màs <HR> <CENTER><H1><B><I>LENGUAJE DE MARCADO DE HIPERTEXTO</I></B></H1></CENTER> <CENTER><H1>TEXTO PREFORMATEADO</H1></CENTER> <HR> <PRE> Podemos crear un texto que aparezca haber sido escrito con una màquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE".

15


El texto aparecerà con el tipo de letra de las màquinas de escribir antiguas (tipo curier) respetarà los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta màs </PRE> </BODY></HTML>

16


Práctica No. 19. TAMAÑO DE FUENTE

<FONT></FONT> ESTA ETIQUETA ADMITE VARIOS ATRIBUTOS: TAMAÑO DE FUENTE, TIPO DE FUENTE AÑADIREMOS A ESTA ETIQUETA EL ATRIBUTO size=”Nùmero tamaño letra”. Los tamaños de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:

<P><FONT SIZE=”5”>Tamaño 5</FONT>

El tamaño por defecto es el 3 y podemos cambiar el texto con respecto a este tamaño base utilizando -1 para un tamaño algo menor, +1 para un tamaño algo mayor que el 3 y +2 para un tamaño aún mayor. Ejemplo:

<P><FONT>el tamaño base </FONT>

<P><FONT SIZE=”-1”>menor</FONT><P><FONT SIZE=”+1”>mayor</FONT><P><FONT SIZE=”+2”>Tgrande 5</FONT>

Ejemplo:

<HTML> <HEAD> <TITLE>TAMAÑO DE FUENTE</TITLE> </HEAD> <BODY> TAMAÑO DE FUENTE <P><FONT SIZE="48"> <HR> <CENTER><H1><B><I>INTERFAZ GRAFICA DE USUARIO</I></B></H1></CENTER> <HR> <CENTER><H1>VANNEVAR BUSH</H1></CENTER> <HR> Desarrolla a nivel teórico el concepto de ordenador personal incluyendo además el concepto de hipertexto, como propuesta para un modelo de información interconectada. </FONT> </BODY> </HTML>

17


18


Práctica No. 20. CITA TEXTUAL

Utilizando las etiquetas <BLOCKQUOTE>.</BLOCKQUOTE>

<HTML> <HEAD> <TITLE>CITA TEXTUAL</TITLE> </HEAD> <BODY> CITA TEXTUAL <HR> <CENTER><H1><B><I>INTERFAZ GRAFICA</I></B></H1></CENTER> <CENTER><H1>PRECURSORES</H1></CENTER> <HR> <H3> El primer periodo de la historia del interfaz está marcado por la investigación y la búsqueda de un paradigma de interacción definitivo y óptimo. <BR> <BLOCKQUOTE> Theodor Holm Nelson <BLOCKQUOTE> Introduciría el concepto de hipermedia, virtualidad, hipertexto (1963). </BLOCKQUOTE> Alan Kay <BLOCKQUOTE> Sus aportaciones están relacionadas con el lenguaje orientado a objetos, Smaltalk, desarrollado en el centro de investigación Xerox Parc. </BLOCKQUOTE> </BLOCKQUOTE> </H3> </BODY> </HTML>

19


20


Práctica No. 21. VIÑETAS

<HTML> <HEAD> <TITLE>LISTA CON VIÑETAS</TITLE> </HEAD> <BODY> <HR> LISTA CON VIÑETAS <HR> <BR> <BR> <UL> <LI>CAPITULO 1 <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML>

El resultado será.

21


Práctica No. 22. ANIDAR VIÑETAS

<HTML> <HEAD> <TITLE>LISTA CON VIÑETAS ANIDADAS</TITLE> </HEAD> <BODY> <HR> <CENTER><H1><B><I>IMC</I></B></H1></CENTER> <CENTER><H1>VIÑETAS ANIDADAS</H1></CENTER> <HR> <UL> <LI>TEMA 1 <UL> <LI>SUBTEMA 1 <LI>SUBTEMA 2 <LI>SUBTEMA 3 </UL> <LI>TEMA 2 <LI>TEMA 3 </UL> </BODY> </HTML>

22


Práctica No. 23. VIÑETAS CUADRADAS

<HTML> <HEAD> <TITLE>LISTA CON VIÑETAS CUADRADAS</TITLE> </HEAD> <BODY> <BR> <BR> LISTA CON VIÑETAS CUADRADAS <BR> <BR> <HR> <CENTER><H1><B><I>IMC</I></B></H1></CENTER> <HR> <UL> <LI>CAPITULO 1 <UL TYPE="square"> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> </UL> <UL> <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML>

23


Práctica No. 24. VIÑETAS CON NÚMEROS ROMANOS

<HTML> <HEAD> <TITLE>LISTA CON VIÑETAS ANIDADAS</TITLE> </HEAD> <BODY> LISTA CON VIÑETAS ANIDADAS <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>MECATRÒNICA</H1></CENTER> <HR> <UL TYPE="I"> <LI>CAPITULO 1 <UL> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 2 <UL>

<LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 3 <UL> <LI>INICIO

24


<LI>TRAMA <LI>DESENLACE </UL> </UL> </BODY> </HTML>

25


Práctica No. 25. COLOR DE TEXTOPara establecer un color, utilizamos el formato RGB(rojo, verde, azul)Cada color va representado por un par

Colores primarios

COLOR CÓDIGO HEXADECIMALROJO #FF0000VERDE #00FF00AZUL #0000FFBLANCO #FFFFFFNEGRO #000000AMARILLO #FFFF00

Con las etiquetas:

<BODY TEXT="#RRVVAA"> Color del texto<BODY LINK="#RRVVAA"> Color de los enlaces<BODY VLINK="#RRVVAA"> Color de los enlaces una vez visitados<BODY ALINK="#RRVVAA"> Color de los enlaces activos

(el que se ve al hacer clic sobre él)

<HTML> <HEAD> <TITLE>ATRIBUTO FACE</TITLE> </HEAD> <BODY TEXT="#0000FF"> <font face="Comic Sans MS,">Este texto tiene otra tipografìa</font> <HR> <CENTER>IMC</CENTER> <HR> <CENTER>ATRIBUTO FACE</CENTER> <HR> Podemos crear un texto que aparezca muy colorido con la etiqueta TEXT y con el atributo face, podemos cambiar el tipo de letra. </BODY> </HTML>

26


Práctica No. 26. COLOR DE FONDO

Cambiar el color de fondo utilizando el atributo <BGCOLOR=”#RRVVAA”> dentro de la etiqueta <BODY>. Por ejemplo si escribimos la siguiente línea de código <BODY BGCOLOR="#00FF00">

<HTML> <HEAD> <TITLE>Colores de fondo</TITLE> </HEAD> <BODY TEXT ="FF0000" BGCOLOR="00FF00"> <FONT FACE="ARIAL" SIZE="12"> <HR> <CENTER>IMC</CENTER> <CENTER>COLOR DE FONDO</CENTER> <HR> Para cambiar el color de fondo de toda la página utiliza el atributo BGCOLOR seguido de un número hexadecimal de 6 posiciones. Los dos primeros son para el rojo, los siguientes dos para el verde y los últimos dos para el azul. </FONT> </BODY> </HTML>

27


Práctica No. 27. IMAGEN DE FONDO

La sintaxis para incluir una imagen como fondo sería:

BODY BACKGROUND=”IMÁGENES/nombre de la magen.gif”>

Ejemplo:

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="imagenes/cascada.jpg" TEXT="FFFF00"> <center> <FONT SIZE="48"> CASCADA </FONT> </center> </BODY> </HTML>

28


Práctica No. 28. IMAGEN DE BOTÓN

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="imagenes/cascada.jpg"> <center> Conoce el logo del IMC:<P> <img src="imagenes/logo_mar_de_cortes.jpg" WIDTH ="70"HEIGHT=100"> </center> </BODY> </HTML>

29


HIPERVÍNCULOS

Una de las características fundamentales de las páginas web es la posibilidad de enlazar distintos documentos

La sintaxis para crear un enlace es:

<A HREF=”yahoo.com.mx”>Enlace</A>

Entre comilla se pone la ruta de la página a la que queremos dirigir el enlace. Podemos distinguir 4 tipos de enlaces que son:

Enlaces dentro de la misma página Enlace con otra página de forma local Enlace con una página ya publicada en Internet Enlaces con una dirección de correo electrónico

Práctica No. 29. ANCLAS O MARCADORES

Cuando el contenido de una página es muy largo tendremos que facilitar la navegación al usuario creando enlaces dentro de la propia página para que éste pueda ir a una parte concreta del documento. En este caso, en vez de poner entre comillas el nombre de otra página, pondremos el nombre de la marca que se señale

<A NAME=”marca”>texto</A>

<HTML> <HEAD> <TITLE>Vìnculo de ANCLAS</TITLE> </HEAD> <BODY> Esta pàgina es un ejemplo de vìnculo de anclas. <A name="principio">Este es el principio del documento!!<a> <BR> <A HREF="#final">Vamos al final del documento</A> <br> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

30


<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> <font face="ARIAL" SIZE"14"><A name="seccion2">Esta es la secciòn 2</A></FONT> <A HREF="#principio">Vamos al principo del documento</A> <BR> <BR> <a name="final">Este es el final del documento!!</a> </BODY> </HTML>

31


Práctica No. 30. ENLACE CON UNA PÁGINA DE INTERNET

Para crear un enlace que se dirija a una página de internet tendremos que poner entre comillas la dirección de dicha página. Por ejemplo si queremos hacer un enlace desde nuestra página a la web de CNAD escribiremos el siguiente código:

<A HREF=http://www.institutomardecortes.edu.mx>IMC</A>

<HTML> <HEAD> <TITLE>VINCULO A UNA PAGINA DE INTERNET</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="14"> <HR> <CENTER>IMC</CENTER> <HR> VISITA LA PÀGINA DEL INSTITUTO MAR DE CORTES DANDO CLICK EN EL SIGUIENTE ENLACE <A HREF=http://www.institutomardecortes.edu.mx>IMC</A> </FONT> </BODY> </HTML>

32


http://www.institutomardecortes.edu.mx/

Práctica No. 31. ENLACE DE CORREO ELECTRÓNICO

La sintaxis para crear un enlace a una dirección de correo electrónico es la siguiente:

<A [email protected]>[email protected]</A>

<HTML> <HEAD> <TITLE>VINCULO A UN CORREO ELECTRONICO</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="12"> <HR> <CENTER>IMC</CENTER> <HR> <CENTER>Enlace de correo electrónico</CENTER> <HR> <BR> <BR> Contàctanos en la siguiente direcciòn: <BR> <A HREF="mailto:[email protected]">[email protected]</A> </FONT> </BODY> </HTML>

33


mailto:[email protected]

Práctica No. 32. ENLAZAR A OTRA PÁGINA UTILIZANDO UNA IMAGEN

<A HREF=”nombrepagina.html”>Texto</A>

<A HREF=http://www.cnad.edu.mx”>IMG.SRC=”cnad.jpg”</A>

<HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> <center> Visita la pàgina del IMC:<P> <A HREF="http://institutomardecortes.edu.mx"> <img src="imagenes/logo_mar_de_cortes2.jpg"> </A> </center> </BODY> </HTML>

34


http://www.cnad.edu.mx/

Práctica No. 33. TEXTO ALTERNATIVO<HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> <center> Visita la pàgina del IMC:<P> <A HREF="http://institutomardecortes.edu.mx"> <img src="imagenes/logo_mar_de_cortes2.jpg" ALT="Logo IMC"> </A> </center> </BODY> </HTML>

35


Práctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN

<HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> Conoce el logo del IMC:<P> <A HREF="imagenes/logo_mar_de_cortes.jpg"> <img src="imagenes/logo_mar_de_cortes2.jpg"> </A> </BODY> </HTML>

36


Práctica No. 35. ENLACE A UN DOCUMENTO<HTML> <HEAD> <TITLE>VINCULO A UN ARCHIVO EXISTENTE</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="12"> VINCULO A UN ARCHIVO EXISTENTE <P>Encontraràs información sobre la INTEFAZ GRAFICA DE USUARIO en el enlace siguiente: <BR> <BR> <A HREF="docs/02_interfaz_grafica.pdf">PULSA AQUI...</A> </FONT> </BODY> </HTML>

37


Práctica No. 36. ENLACE TEXTO A UNA IMAGEN

<HTML> <HEAD> <TITLE>ENLAZAR TEXTO CON IMAGEN</TITLE> </HEAD> <BODY> <A HREF="imagenes/logo_mar_de_cortes.jpg"> Da clic aqui para ver el logotipo </a> </BODY> </HTML>

38


Práctica No. 37. TEXTO CON RESPECTO A LA IMAGEN

<HTML> <HEAD> <TITLE>TEXTO CON RESPECTO A LA IMAGEN</TITLE> </HEAD> <BODY> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=BOTTOM> </A> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=MIDDLE> </A> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=TOP> </A> </BODY> </HTML>

39


Práctica No. 38. LETRAS Y CARACTERES ESPECIALES<HTML> <HEAD> <TITLE>LETRAS Y CARACTERES ESPECIALES</TITLE> </HEAD> <BODY> <HR> LETRAS Y CARACTERES ESPECIALES <HR> <BR> <BR> <UL> <LI> á <LI> é <LI> í <LI> ó <LI> ú <LI> Á <LI> É <LI> Í

40


<LI> Ó <LI> Ú <LI> ¿ <LI> & <LI> ¡ </UL> </BODY> </HTML>

41


Práctica No. 39. TABLAS

Las tablas son fundamentales para organizar las páginas web. No solo sirven para ordenar datos, sino que también nos permiten MAQUETAR LA PÁGINA

La etiqueta que define la tabla completa es <TABLE></TABLE>

Para crear una tabla formada por 3 filas y con 4 celdas en cada fila escribiremos lo siguiente dentro del cuerpo del documento:

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD>

</TR> <TR> <TD>COLUMNA1-FILA2</TD> <TD>COLUMNA2-FILA2</TD> <TD>COLUMNA3-FILA2</TD>

</TR>

<TR> <TD>COLUMNA1-FILA3</TD> <TD>COLUMNA2-FILA3</TD> <TD>COLUMNA3-FILA3</TD>

</TR> </table>

</BODY> </HTML>

42


Práctica No. 40. TABLAS CON BORDE

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER="2"> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD>


</TR>


</TR> </table>

</BODY> </HTML>

43


Práctica No. 41. COLOR DE BORDE

También podemos determinar un color para el borde de la tabla, bastará con añadir a la etiqueta table el atributo bordercolor=”#rrvvaa”, la misma tabla de antes con el borde de color negro tendría este código

<TABLE BORDER="5" BORDERCOLOR=”#RRVVAA”>

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER="4" BORDERCOLOR=”#RRVVAA”> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD>


</TR>


</TR> </table>

</BODY> </HTML>

44


Práctica No. 42. SEPARACIÓN ENTRE LAS CELDAS DE UNA TABLA

Si queremos que exista un espacio entre cada una de las celdas, añadiremos el atributo CELLSPACING=”No. De pixeles de la separación” a la etiqueta TABLE.

COMPROBAMOS QUE OCURRE SU A LA TABLA ANTERIOR LE AÑADIREMOS UNA SEPARACIÓN ENTRE CELDAS DE 2 PIXELES.

<TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2">

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE>

<table border="5" bordercolor="#ab4322" cellspacing="20"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>

</TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD>

</TR>

<TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> </TR> </table>

</BODY> </HTML>

45


46


Práctica No. 43. SEPARACIÓN ENTRE EL CONTENIDO Y EL BORDE DE LA CELDA

Añadimos el atributo CELLPADDING=”No. De pixeles de separación” a la etiqueta TABLE conseguimos separar el contenido de la celda del borde de la misma.

<TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2" CELLPADDING="12">

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE>

<table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>


</TR>


</BODY> </HTML>

47


48


Práctica No. 44. DIMENSIONES DE TABLA Y CELDAS

Utilizando el atributo WIDTH (ancho) en la etiqueta TABLE podemos establecer las dimensiones de la tabla completa. Podemos establecer un tamaño en pixeles o en centímetros

<TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2" CELLPADDING="12" WIDTH="50%">

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <center> <TABLE>

<table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="30%"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>


</TR>


</center>

</BODY> </HTML>

49


50


Práctica No. 45. TABLAS FILAS DESIGUALES

Hasta ahora hemos trabajado con tablas que tenían filas con igual números de celdas. Pero también existe la posibilidad de crear una tabla que tenga filas desiguales.

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <center> <TABLE>

<table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="30%"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>


</TR>

<TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> <TD>CELDA4 FILA3</TD>

</TR> </table>

</center> </BODY> </HTML>

51


Práctica No. 46. IMAGEN EN UNA TABLA

<HTML> <HEAD> <TITLE>IMAGEN EN UNA TABLA</TITLE> </HEAD> <BODY> <TABLE>

<table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="100%"> <TR> <TD>

<center><img src="imagenes/logo_mar_de_cortes.jpg" width="170" HEIGHT="200"></CENTER> </TD>

<TD> <FONT FACE="ARIAL" SIZE="7">ESTA ES OTRA FORMA

DE ORGANIZAR EL CONTENIDO DE UNA PAGINA WEB.

PODEMOS UTILIZAR TABLAS PARA ORDENAR LOS ELEMENTOS DE

NUESTRA PÀGINA </FONT>

</TD> </TR> </table> </BODY> </HTML>

52


53


Práctica No. 47. TÍTULO DE LA TABLA

HTML> <HEAD> <TITLE>TABLAS TITULO ARRIBA</TITLE> </HEAD> <BODY> <TABLE>

<table border="5"> 

<caption align=top>Tabla 1 Tìtulo arriba</caption> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>

</TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD>

</tr> </table>

<BR><BR>

<TABLE> <table border="3">  <caption align=bottom>Tabla 2 Tìtulo abajo</caption>

<TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD>

</TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD>

</tr> </table> </BODY> </HTML>

54


55


Práctica No. 48. CELDAS DE CABECERA

Podemos crear una serie de celdas de cabecera en la tabla. En este tipo de celdas aparecerá el texto en negritas y centrado, para crearlas utilizamos las etieTASD

<HTML> <HEAD> <TITLE>CABECERA EN TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH>Head1</th> <th>Head2</th> <th>head3</th> </tr> <tr> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </table> </BODY> </HTML>

56


Práctica No. 49. CELDAS QUE ABARCAN A OTRAS CELDAS

<HTML> <HEAD> <TITLE>CELDAS COMBINADAS</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="#000000"> <CELLSPACING="2" CELLSPADING="3"> <TR>

<TD COLSPAN="3">Celda1 fila1 </td>  </tr> <tr> <TD>Celda1 Fila2</TD> <TD>Celda2 Fila2</TD> <TD>Celda2 Fila2</TD> </TR> </table> </BODY> </HTML>

57


Práctica No. 50. UNA CELDA OCUPE EL ESPACIO DE VARIAS FILAS

<HTML> <HEAD> <TITLE>CELDAS COMBINADAS VERTICALES</TITLE> </HEAD> <BODY> <TABLE BORDER>

<TR> <TD ROWSPAN=2>Item 1 </td>

<TD>Item 2</td> <TD>Item 3</td> <TD>Item 4</td> </tr> <tr> <TD>Item 5</td> <TD>Item 6</td> <TD>Item 7</td> </TR> </table> </BODY> </HTML>

58


Práctica No. 51. POSICIÓN DEL CONTENIDO DENTRO DE LA CELDA

Por defecto el contenido de la celda aparece alineado a la izquierda. Para cambiar la alineación utilizaremos el atributo ALIGN dentro de la etiqueta TD. Este atributo ofrece tres posibilidades:

CENTER (contenido centrado)LEFT (contenido alineado ala izquierda)RIGHT(contenido alineado a la derecha)

<HTML> <HEAD> <TITLE>ALINEACION DEL CONTENIDO DE UNA CELDA</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="#000000" CELLSPACING="2" cELLPADDING="30" WIDTH="50%" HEIGTH="60%">

<TR> <TD ALIGN="CENTER"> Item 2</td>

<TD ALIGN="RIGHT"> Item 3</td> <TD ALIGN="LEFT"> Item 4</td> </tr> <tr> <TD>Item 5</td> <TD>Item 6</td> <TD>Item 7</td> </TR> </table> </BODY><HTML>

59


60


Práctica No. 52. ALINEACIÓN DE TEXTO EN UNA CELDA ARRIBA O ABAJO

<HTML><HEAD> <TITLE> TABLAS</TITLE></HEAD><BODY>

<TABLE BORDER=”2” BORDERCOLOR=”#000000” CELLSPACING=”2” CELLPADDING=”3” HEIGHT="60%">

<TR><TD VALIGN="TOP"> Celda 1 fila 1 </TD><TD VALIGN="BOTTOM"> Celda 2 fila 1 </TD><TD VALIGN=”MIDDLE”> Celda 3 fila 1 </TD>

</TR></TABLE></BODY></HTML>

61


Práctica No. 53. DIMENSIONES DE LAS CELDAS

Ya vimos que se pueden establecer el ancho y alto de la tabla completa, pero también podemos establecer un ancho y alto para la tabla. Obviamente, si hemos establecido la tabla con un ancho en pixeles de 250, la suma de ancho de las celdas no pueden ser mayor que el ancho total de la tabla.

También en este caso es aconsejable utilizar ancho y alto en porcentajes.

Para establecerlo utilizamos los atributos WIDTH Y HEIGHT aplicados a la etiqueta TD.

En el caso del atributo HEIGHT si ponemos un alto distinto en cada celda, las dos tendrán el mismo alto en el resultado.

EJEMPLO

<HTML><HEAD> <TITLE> TABLAS</TITLE></HEAD><BODY>

<TABLE BORDER=”2” BORDERCOLOR=”#0000FF” CELLPADDING=”3” WIDTH="30%" HEIGHT="50%">

<TR><TD WIDTH="70%"> Celda 1 fila 1 </TD><TD WIDTH="30%"> Celda 2 fila 1 </TD>

</TR></TABLE></BODY></HTML>

62


Práctica No. 54. COLOR DE FONDO DE LA TABLA

Para terminar con el tema de las tablas veremos cómo determinar el color de fondo de la tabla y el color de fondo de las celdas, así como la manera de colocar como fondo de la tabla o de una celda una imagen concreta.

Utilizaremos el atributo BGCOLOR=”#RRVVAA” dentro de la etiqueta TABLE para establecer el color de fondo de la tabla completa. El código quedaría así

EJEMPLO:

<HTML> <HEAD> <TITLE>COLOR DE FONDO DE LA TABLA</TITLE> </HEAD> <BODY> <TABLE BORDER="4" BORDERCOLOR="#00000ff" cELLPADDING="3" WIDTH="30%" HEIGTH="50%" bgcolor="#00ffff">

<TR> <TD WIDTH="70%"> Item 1</td> <TD WIDTH="30%"> Item 2</td>

</tr> <TR>

<TD WIDTH="70%"> Item 3</td> <TD WIDTH="30%"> Item 4</td>

</tr> <TR>

<TD WIDTH="70%"> Item 5</td> <TD WIDTH="30%"> Item 6</td>


63


Práctica No. 55. COLOR DE FONDO DE LAS CELDAS

Para establecer un color de fondo en una celda determinada aplicaremos el atributo BGCOLOR=”#RRVVAA”

<HTML> <HEAD> <TITLE>COLOR DE FONDO DE LA TABLA</TITLE> </HEAD> <BODY> <TABLE bgcolor="#fffff0" border="2"> <TR>

<TD bgcolor="#00ff00"> Item 1</td> <TD> Item 2</td>

</tr> <TR>

<TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td>

</tr> <TR>

<TD bgcolor="#0000ff"> Item 5</td> <TD> Item 6</td>


64


Práctica No. 56. IMAGEN DE FONDO DE LA TABLA

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO EN TABLAS</TITLE> </HEAD> <BODY> <TABLE background="imagenes/cascada.jpg" width="44%" Height="44%" border="2" bordercolor="ff0000"> <TR>

<TD> <img src="imagenes/logo_mar_de_cortes.jpg" width="100" HEIGHT="100"> </td>

<TD> Item 2</td> </tr> <TR>


</tr> <TR>

<TD bgcolor="#0000ff"> Item 5</td> <TD><img src="imagenes/logo_mar_de_cortes2.jpg" width="200"

HEIGHT="100"></td> </tr> </table> </BODY> </HTML>

65


Práctica No. 57. IMAGEN DE FONDO DE LA CELDA

Si utilizamos el atributo BACKGROUND=”imagen.gif” dentro de la etiqueta TD, solo la celda donde lo pongamos tendrá la imagen de fondo que determinemos, veamos el código.

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO EN TABLAS</TITLE> </HEAD> <BODY> <TABLE background="imagenes/cascada.jpg" width="44%" Height="44%" border="2" bordercolor="ff0000"> <TR>

<TD> Item 1</td> <TD> Item 2</td>

</tr> <TR>


</tr> <TR>

<TD bgcolor="#0000ff"> Item 5</td> <TD background="imagenes/logo_mar_de_cortes2.jpg" width="200"

Height="100">Item 6</td> </tr> </table> </BODY> </HTML>

66


67

Documents

03-Practicas de HTML