Vous êtes sur la page 1sur 99

CNAD

CNAD

CURSO DE: Creacin de Pginas WEB dinmicas con PHP, MySQL y Dreamweaver

CNAD

Objetivo General
Utilizando las herramientas de HTML, Dreamweaver, MySQL, el participante conectar una base de datos, con la finalidad de elaborar pginas Web dinmicas.

CNAD

PROPOSITO
Elaborar pginas Web dinmicas.

CNAD

CONTENIDO
1. 2. 3. 4. HTML DREAMWEAVER MySQL y PHP BASES DE DATOS DINMICAS

CNAD EVALUACIN

CRITERIOS DE EVALUACIN
Asistencia Prcticas Proyecto final 20% 20% 60%

CNAD

EXPECTATIVAS DEL CURSO


El participante expondr sus expectativas respecto al curso.

CNAD

REGLAS DEL CURSO


Disposicin al trabajo Respeto y tolerancia con los compaeros Saber escuchar Solicitar la palabra en las intervenciones Ser breve, preciso y conciso Puntualidad (horarios)

CNAD

COMPROMISOS
SE SOLICITA A LOS PARTICIPANTES EXPONER SUS COMPROMISOS DEL CURSO.

CNAD

DINMICA DE INTEGRACIN PRESENTACIN

CNAD

EVALUACIN DIAGNSTICA
Se les entregar cuestionario, en instrucciones para que conozcan, no toda la evaluacin. a los participantes un donde seguirn las contestar las preguntas es necesario contestar

CNAD

PRESENTACIN DE LA SESIN 1
Objetivo de sesin:
El participante de manera individual realizar diferentes ejercicios con las etiquetas bsicas de HTML, para la creacin de una pgina Web esttica.

CNAD

QU ES HTML?
El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de pginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer. Bsicamente, HTML consta de una serie de rdenes, que indican al visor que se est utilizando, la forma de representar los elementos (texto, grficos, etc...) que contenga el documento.

CNAD Las rdenes de HTML pueden ser de dos tipos, cerradas o abiertas. Las rdenes cerradas son aquellas que tienen una palabra clave que indica el principio de la orden y otra que indica el final.

Entre la orden inicial y la final se pueden encontrar otras ordenes.

CNAD Las rdenes abiertas constan de una sola palabra clave. Para diferenciar las rdenes del resto del texto del documento se encierran entre los smbolos <y> Las rdenes cerradas incluyen el carcter / antes de la palabra clave para indicar el final de la misma. Una orden puede contener "parmetros". Estos parmetros se indican a continuacin de la palabra clave de la orden.

CNAD

Ejemplos:
Orden cerrada <CENTER> Una pgina ejemplo </CENTER> Orden abierta
<HR>

Orden con parmetros <BODY bgcolor="#FF00FF"> </BODY>

CNAD

Estructura bsica de HTML


Un documento escrito en HTML contendra bsicamente las siguientes rdenes:
<HTML>
Indica el inicio del documento.

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

Inicio de la cabecera.
Inicio del ttulo del documento. Final del ttulo del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento.

CNAD

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>
CENTRO NACIONAL DE ACTUALIZACIN DOCENTE

</HTML>

CNAD

ESTRUCTURA BSICA
Dentro de las etiquetas <HTML></HTML>. Existen dos partes fundamentales la cabecera del documento que son: <HEAD> </HEAD>

CNAD
<HTML> <HEAD> (Cabecera del documento)
<TITLE> TTULO DEL PROGRAMA</TITLE> (Aparece el nombre del archivo en la barra de ttulo)

</HEAD>
<BODY> Entre estas etiquetas pondremos el contenido de nuestra pgina web </BODY>

CNAD

Para incluir comentarios en la pgina Web se utiliza la orden <!-- -->.

COMENTARIOS

Ejemplo:
<!-- Esto es un comentario sobre mi pgina Web --> Los comentarios no sern mostrados por el visor y son tiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento.

CNAD
<HTML> <HEAD> <!-- Cabecera del documento --> <TITLE> TTULO DEL PROGRAMA</TITLE> <!-- Aparece el nombre del archivo en la barra de ttulo--> </HEAD> <BODY> Entre estas etiquetas pondremos el contenido de nuestra pgina Web </BODY> </HTML>

CNAD

PRRAFOS
Cuando llegamos al final de la lnea de texto, ste saltar automticamente a la lnea siguiente, pero si queremos crear prrafos separados por una lnea en blanco utilizaremos la etiqueta <P>

CNAD
<HTML> <HEAD> <TITLE> Prrafos</TITLE> </HEAD> <BODY> <P>Esto es un prrafo dentro de una pgina Web. <P> Esto es otro prrafo que est separado del anterior por una lnea en blanco. </BODY> </HTML>

CNAD

ENCABEZADOS
Tambin podemos crear diferentes tamaos de encabezados (tambin llamados cabeceras) para el texto por ejemplo para sealar los distintos encabezados tenemos los siguiente:

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

CNAD

CENTRADO
Para centrar los elementos del documento HTML utilizamos las etiquetas

<center></center>

CNAD
<HTML> <HEAD> <TITLE>Centrado</TITLE> </HEAD> <BODY> <CENTER>CNAD</CENTER> </BODY> </HTML>

CNAD

SEPARADOR HORIZONTAL
Podemos utilizar una lnea horizontal para separar distintas partes de una pgina Web, y para ello utilizaremos la etiqueta <HR>

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <CENTER>CBTis No. 51</CENTER> <HR> Podemos utilizar una lnea horizontal para separar distintas partes de una pgina Web, y para ello utilizaremos esta etiqueta </BODY> </HTML>

CNAD

SEPARADOR HORIZONTAL ANCHO


Se puede hacer ms ancha la lnea de separador horizontal, utilizando la etiqueta:

<HR WIDTH="50%">

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL ANCHO</TITLE> </HEAD>
<BODY> <HR WIDTH="50%"> <CENTER>CBTis No. 51</CENTER> <HR WIDTH="50%"> </BODY> </HTML>

CNAD

SEPARADOR NOSHADE
Si queremos que el separador horizontal aparezca incrustado en la pgina, podemos aadir a la etiqueta <HR> el comando NOSHADE

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE> </HEAD> <BODY> <HR NOSHADE> <CENTER>C N A D</CENTER> <HR NOSHADE> </BODY> </HTML>

CNAD

SEPARADOR NOSHADE SIZE


Podemos hacer que el separador horizontal sea ms grueso aadiendo el comando SIZE=grueso en pxeles a la etiqueta HR. Si queremos crear un separador horizontal con un grosor de 20 pxeles y con sombras tendramos que escribir la siguiente lnea de cdigo <HR NOSHADE SIZE="20">

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <HR NOSHADE SIZE="20"> <CENTER>C N A D</CENTER> <HR NOSHADE SIZE="20"> </BODY> </HTML>

CNAD

ALINEACIN DEL SEPARADOR HORIZONTAL


Se puede alinear el separador horizontal a la izquierda o a la derecha. Si no se especifica la alineacin, el separador aparecer siempre centrado. Para alinearlo a la izquierda utilizaremos el comando
ALIGN="LEFT Aadiendo a la etiqueta <HR>, <HR WIDTH="50%" ALIGN="LEFT">

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <HR WIDTH="50%" ALIGN="LEFT"> <CENTER>C N A D</CENTER> <HR WIDTH="50%" ALIGN="LEFT"> </BODY> </HTML>

CNAD

ALINEACIN DERECHA
PARA ALINEAR EL SEPARADOR A DERECHA UTILIZAREMOS EL COMANDO ALIGN=" RIGHT " LA

AADIENDOLO A LA ETIQUETA <HR>

CNAD
<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <HR WIDTH="50%" ALIGN=" RIGHT "> <CENTER>C N A D</CENTER> <HR WIDTH="50%" ALIGN=" RIGHT "> </BODY> </HTML>

CNAD

ETIQUETAS ANIDADAS
Son aquellas rdenes que se encuentran dentro de una orden general.

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

CNAD

SALTO DE LNEA
Para conseguir que las lneas no sean continuas, utilizaremos la etiqueta

<BR>

CNAD
<HTML> <HEAD> <TITLE>SALTO DE LNEA</TITLE> </HEAD> <BODY> SALTOS DE LNEA <BR> <HR> <CENTER><H1>CNAD</H1></CENTER> <BR> <BR> <BR> <CENTER><H1>MECATRNICA</H1></CENTER> <BR> <BR> <BR> <HR> </BODY> </HTML>

CNAD

TEXTO CON TAMAO MENOR


Con las etiquetas <TT> y </TT> conseguimos un texto con un tamao menor y con la apariencia de un texto escrito a mquina, pero en este caso no se formatea el texto, slo afecta al tipo de letra.

CNAD
<HTML> <HEAD> <TITLE>Texto con tamao menor</TITLE> </HEAD> <BODY> TEXTO CON TAMAO MENOR <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>Mecatronica</H1></CENTER> <HR> <TT> Podemos crear un texto que parezca haber sido escrito con una mquina de escribir, el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. </TT> </BODY> </HTML>

CNAD

TEXTO CON TAMAO MAYOR


Se puede cambiar el tamao base para toda la pgina, poniendo al comienzo del documento (a continuacin de la etiqueta <BODY>) esta etiqueta que cambiara el tamao base de 3 a 5: <BASEFONT SIZE=5>

<HTML> <HEAD> <TITLE>Texto con tamao mayor</TITLE> </HEAD> <BODY> TEXTO CON TAMAO mayor <HR> <CENTER><H1><B><I>CNAD</I></B></H1></C ENTER> <CENTER><H1>Mecatronica</H1></CENTER> <HR> <BASEFONT SIZE=5> Podemos crear un texto con tamao mayor </BODY> </HTML>

CNAD

NEGRITAS Y CURSIVAS
Para aplicar el formato de texto en negritas y cursivas, se utilizaran las siguientes etiquetas:

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

CNAD
<HTML> <HEAD> <TITLE>NEGRITAS Y CURSIVAS</TITLE> </HEAD> <BODY> <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <BR> <BR> <BR> <CENTER><H1>MECATRNICA</H1></CENTER> <BR> <BR> <BR> <HR> </BODY> </HTML>

CNAD

TIPO DE FUENTE
<FONT></FONT> Esta etiqueta admite varios atributos: tamao de fuente, tipo de fuente aadiremos a esta etiqueta el atributo size=Nmero del tamao de la letra. Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente: <P><FONT SIZE=5>Tamao 5</FONT>

CNAD
El tamao por defecto es el 3 y podemos cambiar el texto con respecto a este tamao base utilizando -1 para un tamao algo menor, +1 para un tamao algo mayor que el 3 y +2 para un tamao an mayor. <P><FONT>el tamao base </FONT> <P><FONT SIZE=-1>menor</FONT> <P><FONT SIZE=+1>mayor</FONT> <P><FONT SIZE=+2>Tgrande 5</FONT>

CNAD
<HTML> <HEAD> <TITLE>TAMAO DE FUENTE</TITLE> </HEAD> <BODY> TAMAO DE FUENTE <P><FONT SIZE="48"> <HR> <CENTER>CNAD</CENTER> <CENTER>Mecatronica</CENTER> <HR> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. </FONT> </BODY> </HTML>

CNAD

TEXTO PREFORMATEADO
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas <PRE></PRE>

El texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) Y respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms.

<HTML> <HEAD> <TITLE>texto preformateado</TITLE> </HEAD> <BODY> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>Mecatronica</H1></CENTER> <HR> <PRE> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. </PRE> </BODY> </HTML>

CNAD

CITA TEXTUAL
Se insertar una cita textual utilizando las etiquetas: <BLOCKQUOTE>.</BLOCKQUOTE>

<HTML> <HEAD> <TITLE>CITA TEXTUAL</TITLE> </HEAD> <BODY> CITA TEXTUAL <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>Mecatronica</H1></CENTER> <HR> <BLOCKQUOTE> ISAMEL. HACE AOS, NO IMPORTA CUANTOS EXACTAMENTE, ALLNDOME CON POCO O NINGN DINERO EN LA BOLSA Y SIN NADA DE ESPECIAL INTERS QUE ME TUVIERA EN TIERRA, PENS QUE LO MEJOR SERA DARME A LA MAR POR UNA TEMPORADA PARA VER LA PARTE ACUTICA DEL MUNDO. </BLOCKQUOTE> </BODY> </HTML>

CNAD

VIETAS
Para poner una lista con vietas se utilizarn las siguientes etiquetas: <UL>
<LI> <LI> <LI>

</UL>

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

CNAD

VIETAS CUADRADAS
Para agregar una lista con cuadradas se utilizar la etiqueta:
<UL TYPE="square">

vietas

<HTML<
<HEAD>
<TITLE>LISTAS CON VIETAS CUADRADAS</TITLE>

</HEAD> <BODY>
<BR> <BR> LISTAS CON VIETAS CUADRADAS <BR> <BR> <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>MECATRNICA</H1></CENTER> <HR> <UL>
<LI>CAPITULO 1 <UL TYPE="square"> <LI>INICIO <LI>TRAMA <LI>DESENLACE

</UL>
<LI>CAPITULO 2 <LI>CAPITULO 3

</UL>

</BODY>

</HTML>

CNAD

VIETAS CON NMEROS ROMANOS


Con la etiqueta <UL TYPE="I"> Se podr poner una lista con nmeros romanos.

<HTML> <HEAD> <TITLE>LISTAS CON VIETAS DE NMEROS ROMANOS </TITLE> </HEAD> <BODY> LISTAS CON VIETAS DE NMEROS ROMANOS <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>MECATRNICA<H1></CENTER> <HR> <UL> <LI>CAPITULO 1 <UL TYPE="I"> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML>

CNAD

VIETAS ANIDADAS
Son listas de varios niveles que pueden combinar diferentes tipos de listas.

<HTML< <HEAD> <TITLE>LISTAS CON VIETAS ANIDADAS</TITLE> </HEAD> <BODY> <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>MECATRNICA<H1></CENTER> <HR> <UL> <LI>CAPITULO 1 <UL> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML>

CNAD

ATRIBUTO FACE
Define el tipo de letra. <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografa</font>

CNAD
<HTML> <HEAD> <TITLE>ATRIBUTO FACE</TITLE> </HEAD> <BODY fontcolor text=#ff"> <font face="Comic Sans MS">Este texto tiene otra tipografa</font> <HR> <CENTER>CNAD</CENTER> <HR> <CENTER>Mecatronica</CENTER> <HR> Podemos crear un texto que aparezca muy colorido con las siguientes etiquetas </BODY> </HTML>

CNAD

LOS COLORES
El cdigo de color es un nmero compuesto por tres pares de cifras hexadecimales que indican la proporcin de los colores "primarios", rojo, verde y azul. El cdigo de color se antecede del smbolo #.

CNAD

LOS COLORES
COLORES PRIMARIOS
COLOR ROJO VERDE AZUL BLANCO VERDE AMARILLO CDIGO HEXADECIMAL #FF0000 #00FF00 #0000FF #FFFFFF #000000 #FFFF00

CNAD

Colores de fondo
Si se desea cambiar el color de fondo se utilizar la etiqueta del atributo <BGCOLOR=#RRVVAA> dentro de la etiqueta <BODY>.

<HTML> <HEAD> <TITLE>Colores de fondo</TITLE> </HEAD> <BODY BGCOLOR="#00FF00"> <FONT FACE="ARIAL"SIZE="14"> <HR> <CENTER>CNAD</CENTER> <CENTER>Mecatronica</CENTER> <HR> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. </FONT> </BODY> </HTML>

CNAD

COLOR DE TEXTO
Para establecer un color, utilizamos el formato RGB(rojo, verde, azul) Cada color va representado por un par de cifras hexadecimales de cada color.

CNAD

ETIQUETAS
<BODY TEXT="#RRVVAA"> Color del texto

<BODY LINK="#RRVVAA">
<BODY VLINK="#RRVVAA">

Color de los enlaces


Color de los enlaces una vez visitados

<BODY ALINK="#RRVVAA">

Color de los enlaces activos (el que se ve al hacer clic sobre l)

CNAD
<HTML> <HEAD> <TITLE>COLORES DE TEXTO</TITLE> </HEAD> <BODY TEXT="#RRVVAA"> <FONT FACE="ARIAL"SIZE="14"> <HR> <CENTER>CNAD</CENTER> <HR> <CENTER>Mecatronica</CENTER> <HR> Podemos crear un texto que aparezca muy colorido con las siguientes etiquetas </FONT> </BODY> </HTML>

CNAD

IMAGEN DE FONDO
La sintaxis para incluir una imagen como fondo sera:

<BODY BACKGROUND=IMAGENES/nombre de la imagen.gif>

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="IMAGENES/YARIS.jpg"> <HR> IMAGEN DE FONDO <HR> <FONT FACE="ARIAL"SIZE="14"> <HR> <CENTER>CNAD</CENTER> <CENTER>Mecatronica</CENTER> <HR> EN ESTA PGINA PONDREMOS UNA IMAGEN DE FONDO. </FONT> </BODY> </HTML>

CNAD

IMAGEN DE BOTN
Simple forma de insertar una imagen en un botn. <CENTER> <img src="IMAGENES/YARIS.jpg WIDTH="144 HEIGHT=140"> </CENTER>

CNAD
<HTML> <HEAD> <TITLE>IMAGEN DE BOTN</TITLE> </HEAD> <BODY> <FONT FACE="ARIAL"SIZE="14"> <HR> <CENTER>CNAD</CENTER> <CENTER>Mecatronica</CENTER> <CENTER><img src="IMAGENES/YARIS.jpg WIDTH=144 HEIGHT=140"></CENTER> <HR>

CNAD

HIPERVNCULOS
Una de las caractersticas fundamentales de las pginas web es la posibilidad de enlazar distintos documentos. La sintaxis para crear un enlace es: <A HREF=yahoo.com.mx>Enlace</A>

CNAD

Distintos enlaces
Podemos distinguir 4 tipos de enlaces que son: Enlaces dentro de la misma pgina Enlace con otra pgina de forma local Enlace con una pgina ya publicada en Internet Enlaces con una direccin de correo electrnico

CNAD

ANCLAS O MARCADORES
Cuando el contenido de una pgina es muy largo tendremos que facilitar la navegacin al usuario creando enlaces dentro de la propia pgina para que ste pueda ir a una parte concreta del documento. En este caso, en vez de poner entre comillas el nombre de otra pgina, pondremos el nombre de la marca que se seale. <A NAME=marca>texto</A> Y para acceder a esa posicin usaremos el siguiente hipernlace: <A HREF="#final">Vamos al final del documento</A>

<HTML> <HEAD> VINCULO DE ANCLAS <HEAD> <BODY> Esta pgina es un ejemplo de vnculos de anclas <a name="principio">Este es el principio del documento!!</a> <BR> <A HREF="#final">Vamos al final del documento</A> <BR> <A HREF="#principio">Vamos al principio del documento</A> <BR> <a name="final">Este es el final del documento!!</a> </BODY> </HTML>

CNAD

ENLACE CON UNA PGINA DE INTERNET


Para crear un enlace que se dirija a una pgina de internet tendremos que poner entre comillas la direccin de dicha pgina. Por ejemplo si queremos hacer un enlace desde nuestra pgina a la web de CNAD escribiremos el siguiente cdigo: <A HREF=http://www.cnad.edu.mx>CNAD</A>

<HTML> <HEAD> <TITLE>VINCULO A UNA PGINA DE INTERNET</TITLE> </HEAD> <BODY TEXT="#RRVVAA"> <FONT FACE="ARIAL"SIZE="14"> <HR> <CENTER>CNAD</CENTER> <HR> <CENTER>Mecatronica</CENTER> <HR> VISITA LA PGINA DEL CENTRO NACIONAL DE ACTUALIZACIN DOCENTE(CNAD), DANDO CLIC EN EL SIGUIENTE ENLACE <A HREF=http://www.cnad.edu.mx>CNAD</A> </FONT> </BODY> </HTML>

CNAD

ENLACE DE CORREO ELECTRNICO


La sintaxis para crear un enlace a una direccin de correo electrnico es la siguiente:
<A HREF=mailto:nfernand97@hotmail.com> Enviar correo a nfernand97@hotmail.com </A>

<HTML> <HEAD> <TITLE>VINCULO A UN CORREO ELECTRNICO</TITLE> </HEAD> <BODY TEXT="#RRVVAA"> <FONT FACE="ARIAL"SIZE="12"> <HR> <CENTER>CNAD</CENTER> <HR> <CENTER>Mecatronica</CENTER> <HR> <BR> <BR> Contctanos en la siguiente direccin: <BR> <a href="mailto:nfernand97@hotmail.com">nfernand97@hotmail.com</a> </FONT> </BODY>

CNAD

ENLACE A UN ARCHIVO
La sintaxis para crear un enlace a un archivo existente es la siguiente:
<A href="TODO LO DE VINCULOS.html">RESUMEN DEL TEMA DE VINCULOS</A>.

CNAD
<HTML> <HEAD> <TITLE>VINCULO A UN ARCHIVO EXISTENTE</TITLE> <HEAD> <BODY> VINCULO A UN ARCHIVO EXISTENTE <P>Encontrars mucho ms en el ENLACE SIGUIENTE: <BR> <BR> <A href="TODO LO DE VINCULOS.html">RESUMEN DEL TEMA DE VINCULOS</A>.

</BODY>
</HTML>

CNAD

ENLACE UTILIZANDO UNA IMAGEN


PARA ENLAZAR A OTRA PGINA UTILIZANDO UNA IMAGEN SE UTILIZARA LA SIGUIENTE SINTAXIS:

<A HREF=nombrepagina.html>Texto</A> <A HREF=http://www.cnad.edu.mx>


<IMG SRC=cnad.jpg> </A>

<html> <head> <title> Vnculos con imagen </title> </head> <body> <center> Visita la pgina del CNAD:<P> <a href="http://www.cnad.edu.mx"> <img src="imagenes/YARIS.jpg"> </a> </center> </body> </html>

<html> <head> <title> Vnculos con imagen </title> </head> <body> <center> Visita la pgina del CNAD:<P> <a href="http://www.cnad.edu.mx"> <img src="imagenes/YARIS.jpg"> </a> </center> </body> </html>

CNAD

ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN


<a href="imagenes/YARIS.jpg"> <img src="imagenes/VICKY.jpg"> </a>

<html> <head> <title> Vnculos con imgenes </title> </head> <body> <center> Esta pgina utiliza un vinculo de una imagen para ver otra imagen:<P> <a href="imagenes/YARIS.jpg"> <img src="imagenes/VICKY.jpg"> </a> </center> </body> </html>

CNAD

TEXTO ARRIBA DE LA IMAGEN


<HTML> <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD> <BODY> <P>GATITOS <img src="imagenes/gatitos.jpg" align="top"> </BODY> </HTML>

CNAD

TEXTO EN MEDIO DE LA IMAGEN


<HTML> <HEAD> <TITLE> TEXTO AL CENTRO</TITLE></HEAD> <BODY> <P>YARELI <IMG SRC=IMAGENES/YARIS.JPG" ALIGN= MIDDLE > </BODY> </HTML>

CNAD

TEXTO ABAJO DE LA IMAGEN


<HTML> <HEAD> <TITLE> TEXTO EN LNEA BASE</TITLE></HEAD> <BODY> <P>YARELI <IMG SRC=IMAGENES/YARIS.JPG" ALIGN= BOTTOM > </BODY> </HTML>

CNAD

IMAGEN CON TEXTO ALTERNATIVO


<HTML> <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD> <BODY> <P>YARELI <BR> <IMG SRC="IMAGENES/YARIS.JPG" ALT="AQUI VA UNA IMAGEN"> </BODY> </HTML>

CNAD

ENLAZAR TEXTO CON IMAGEN


<HTML> <HEAD> <TITLE> ENLAZAR TEXTO CON IMAGEN </TITLE> </HEAD> <BODY> <A HREF="IMAGENES/YARIS.jpg"> De clic para ver la imagen</A> </BODY>

Gracias por su atencin