Edición html

Page 1

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> GRUPO ODIN </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> <!-- (Cabecera del documento) --> <TITLE> TÌTULO DEL PROGRAMA</TITLE> <!-- (Aparece el nombre del archivo en la barra de tìtulo) --> </HEAD> <BODY> Entre estas etiquetas pondremos el contenido de nuestra pàgina web </BODY> </HTML>

1

Prof: Juan Carlos Araujo Herrera

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>

2

Prof: Juan Carlos Araujo Herrera

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>

3

Prof: Juan Carlos Araujo Herrera

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 HORIZONTAL Es 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>

4

Prof: Juan Carlos Araujo Herrera

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>

5

Prof: Juan Carlos Araujo Herrera

Práctica No. 9. SEPARADOR NOSHADE SIZE Podemos 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> </HTML> 6

Prof: Juan Carlos Araujo Herrera

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"> <HTML> <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>

7

Prof: Juan Carlos Araujo Herrera

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>

8

Prof: Juan Carlos Araujo Herrera

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>

9

Prof: Juan Carlos Araujo Herrera

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>

10

Prof: Juan Carlos Araujo Herrera

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ﾃ前 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>

11

Prof: Juan Carlos Araujo Herrera

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>

12

Prof: Juan Carlos Araujo Herrera

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". 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>

13

Prof: Juan Carlos Araujo Herrera

14

Prof: Juan Carlos Araujo Herrera

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>

15

Prof: Juan Carlos Araujo Herrera

16

Prof: Juan Carlos Araujo Herrera

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>

17

Prof: Juan Carlos Araujo Herrera

18

Prof: Juan Carlos Araujo Herrera

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á.

19

Prof: Juan Carlos Araujo Herrera

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>

20

Prof: Juan Carlos Araujo Herrera

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>

21

Prof: Juan Carlos Araujo Herrera

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 <LI>TRAMA <LI>DESENLACE </UL> </UL> </BODY> </HTML>

22

Prof: Juan Carlos Araujo Herrera

Práctica No. 25. COLOR DE TEXTO Para establecer un color, utilizamos el formato RGB(rojo, verde, azul) Cada color va representado por un par Colores primarios COLOR ROJO VERDE AZUL BLANCO NEGRO AMARILLO

CÓDIGO HEXADECIMAL #FF0000 #00FF00 #0000FF #FFFFFF #000000 #FFFF00

Con las etiquetas: <BODY TEXT="#RRVVAA"> <BODY LINK="#RRVVAA"> <BODY VLINK="#RRVVAA"> <BODY ALINK="#RRVVAA">

Color del texto Color de los enlaces Color de los enlaces una vez visitados 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>

23

Prof: Juan Carlos Araujo Herrera

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>

24

Prof: Juan Carlos Araujo Herrera

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="D:/cascada.jpg" TEXT="FFFF00"> <center> <FONT SIZE="48"> CASCADA </FONT> </center> </BODY> </HTML>

25

Prof: Juan Carlos Araujo Herrera

Prรกctica No. 28. IMAGEN DE BOTร N <HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="d:/cascada.jpg"> <center> Conoce el logo del IMC:<P> <img src="D:/logo_mar_de_cortes.jpg" WIDTH ="70"HEIGHT=100"> </center> </BODY> </HTML>

26

Prof: Juan Carlos Araujo Herrera

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> 27

Prof: Juan Carlos Araujo Herrera

<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>

28

Prof: Juan Carlos Araujo Herrera

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.carlosaraujo.webpin.com>IMC</A> <HTML> <HEAD> <TITLE>VINCULO A UNA PAGINA DE INTERNET</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="5"> <HR> <CENTER>WEB PERSONAL</CENTER> <HR> VISITA LA PÀGINA WEB PERSONAL DEL PROFESOR JUAN CARLOS ARAUJO HERRERA PARA ELLOS DAR CLIC EN EL SIGUIENTE ENLACE <A HREF= http://www.carlosaraujo.webpin.com>DAR CLIC AQUI</A> </FONT> </BODY> </HTML>

29

Prof: Juan Carlos Araujo Herrera

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 HREF=mailito.nfernand97@hotmail.com>nfernand97@hotmail.com</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: coordinacion.ccee@gmail.com"> coordinacion.ccee@gmail.com</A> </FONT> </BODY> </HTML>

30

Prof: Juan Carlos Araujo Herrera

Práctica No. 32. ENLAZAR A OTRA PÁGINA UTILIZANDO UNA IMAGEN <A HREF=”nombrepagina.html”>Texto</A> <A HREF=http://www.carlosaraujo.webpin.com>IMG.SRC=”foto1.jpg”</A> <HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> <center> Visita la pàgina del IMC:<P> <A HREF="http://www.carlosaraujo.webpin.com"> <img src="d:/foto1.jpg"> </A> </center> </BODY> </HTML>

31

Prof: Juan Carlos Araujo Herrera

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://www.carlosaraujo.webpin.com"> <img src="D:/foto1.jpg" ALT="Logo IMC"> </A> </center> </BODY> </HTML>

32

Prof: Juan Carlos Araujo Herrera

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="D:/foto02.jpg"> <img src=" D:/foto02.jpg">"> </A> </BODY> </HTML>

33

Prof: Juan Carlos Araujo Herrera

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>

34

Prof: Juan Carlos Araujo Herrera

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>

35

Prof: Juan Carlos Araujo Herrera

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>

36

Prof: Juan Carlos Araujo Herrera

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> Í <LI> Ó <LI> Ú <LI> ¿ <LI> & <LI> ¡ </UL> </BODY> </HTML>

37

Prof: Juan Carlos Araujo Herrera

38

Prof: Juan Carlos Araujo Herrera

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>

39

Prof: Juan Carlos Araujo Herrera

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> <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>

40

Prof: Juan Carlos Araujo Herrera

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> <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>

41

Prof: Juan Carlos Araujo Herrera

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>

42

Prof: Juan Carlos Araujo Herrera

43

Prof: Juan Carlos Araujo Herrera

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> <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>

44

Prof: Juan Carlos Araujo Herrera

45

Prof: Juan Carlos Araujo Herrera

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> <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> </center> </BODY> </HTML>

46

Prof: Juan Carlos Araujo Herrera

47

Prof: Juan Carlos Araujo Herrera

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 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD> </TR> <TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> <TD>CELDA4 FILA3</TD> </TR> </table> </center> </BODY> </HTML>

48

Prof: Juan Carlos Araujo Herrera

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>

49

Prof: Juan Carlos Araujo Herrera

50

Prof: Juan Carlos Araujo Herrera

Práctica No. 47. TÍTULO DE LA TABLA HTML> <HEAD> <TITLE>TABLAS TITULO ARRIBA</TITLE> </HEAD> <BODY> <TABLE> <table border="5"> <!-- El nùmero indica el grosor del borde podemos manejar valores desde 1--> <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"> <!-- El nùmero indica el grosor del borde podemos manejar valores desde 1--> <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>

51

Prof: Juan Carlos Araujo Herrera

52

Prof: Juan Carlos Araujo Herrera

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>

53

Prof: Juan Carlos Araujo Herrera

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> <!-- COLSPAN indica el nùmero de columnas a combinar --> </tr> <tr> <TD>Celda1 Fila2</TD> <TD>Celda2 Fila2</TD> <TD>Celda2 Fila2</TD> </TR> </table> </BODY> </HTML>

54

Prof: Juan Carlos Araujo Herrera

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>

55

Prof: Juan Carlos Araujo Herrera

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>

56

Prof: Juan Carlos Araujo Herrera

57

Prof: Juan Carlos Araujo Herrera

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>

58

Prof: Juan Carlos Araujo Herrera

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” WIDTH="30%" HEIGHT="50%"> <TR> <TD WIDTH="70%"> Celda 1 fila 1 </TD> <TD WIDTH="30%"> Celda 2 fila 1 </TD>

CELLPADDING=”3”

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

59

Prof: Juan Carlos Araujo Herrera

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> </tr> </table> </BODY> </HTML>

60

Prof: Juan Carlos Araujo Herrera

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> </tr> </table> </BODY> </HTML>

61

Prof: Juan Carlos Araujo Herrera

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> <TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td> </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>

62

Prof: Juan Carlos Araujo Herrera

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> <TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td> </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>

63

Prof: Juan Carlos Araujo Herrera

64

Prof: Juan Carlos Araujo Herrera

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.