Sesion 1 HTML

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:
 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>  <TITLE> TTULO DEL PROGRAMA</TITLE>  </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

Sesion 1 HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Sesion 1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

CNAD

EXPECTATIVAS DEL CURSO

REGLAS DEL CURSO

DINMICA DE INTEGRACIN PRESENTACIN

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

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

Estructura bsica de HTML

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

Para incluir comentarios en la pgina Web se utiliza la orden .

SEPARADOR HORIZONTAL ANCHO

SEPARADOR NOSHADE SIZE

ALINEACIN DEL SEPARADOR HORIZONTAL

AADIENDOLO A LA ETIQUETA <HR>

TEXTO CON TAMAO MENOR

TEXTO CON TAMAO MAYOR

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

VIETAS CON NMEROS ROMANOS

Color de los enlaces

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

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

ENLACE CON UNA PGINA DE INTERNET

ENLACE DE CORREO ELECTRNICO

ENLACE UTILIZANDO UNA IMAGEN

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

ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN

TEXTO ARRIBA DE LA IMAGEN

TEXTO EN MEDIO DE LA IMAGEN

TEXTO ABAJO DE LA IMAGEN

IMAGEN CON TEXTO ALTERNATIVO

ENLAZAR TEXTO CON IMAGEN

Gracias por su atencin

Vous aimerez peut-être aussi