Uploaded on

Curso básico de HTML. Etiquetas básicas

Curso básico de HTML. Etiquetas básicas

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,923
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
176
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CNAD
  • 2. BASE DE DATOS CON DREAMWEAVER y MySQL CURSO DE: Tiene una duración de 40 horas, y se divide en 5 sesiones de 8 horas c/u Instructora: Lic. Norma Fernández Osorio CNAD
  • 3. El participante creará bases de datos con Dreamweaver y MySQL utilizando las herramientas de APPSERVER, con la finalidad de elaborar páginas web dinámicas. Objetivo General CNAD
  • 4. PROPOSITO Elaborar páginas Web dinámicas. CNAD
  • 5. CONTENIDO
    • HTML
    • DREAMWEAVER
    • MySQL
    • BASES DE DATOS DINÁMICAS
    CNAD
  • 6. EVALUACIÓN
    • CRITERIOS DE EVALUACIÓN
          • Participación 10%
          • Prácticas 30%
          • Proyecto final 60%
    CNAD
  • 7. EXPECTATIVAS DEL CURSO
    • ¿Qué espera del curso?
    • ¿Qué conoce sobre el tema?
    • ¿Qué le gustaría aprender?
    • ¿En dónde pondría en práctica los conocimientos adquiridos?
    CNAD
  • 8. REGLAS DEL CURSO
    • Disposición al trabajo
    • Respeto y tolerancia con los compañeros
    • Saber escuchar
    • Solicitar la palabra en las intervenciones
    • Ser breve, preciso y conciso
    • Puntualidad (horarios)
    CNAD
  • 9. COMPROMISOS
    • SE SOLICITA A LOS PARTICIPANTES ESCRIBAN SUS COMPROMISOS DEL CURSO.
    CNAD
  • 10. DINÁMICA DE INTEGRACIÓN “PRESENTACIÓN”
    • Cada participante se presentará diciendo los siguientes datos y los de sus compañeros.
      • Nombre
      • Lugar de residencia
      • Plantel de procedencia
      • Materia que imparte
      • Hobby preferido
    CNAD
  • 11. EVALUACIÓN DIAGNÓSTICA
    • Se les entregará a los participantes un cuestionario, en donde seguirán las instrucciones para contestar las peguntas que conozcan, no es necesario contestar toda la evaluación.
    CNAD
  • 12. PRESENTACIÓN DE LA SESIÓN 1
    • Objetivo de sesión:
      • El participante de manera individual realizará diferentes ejercicios con las etiquetas básicas de HTML, para la creación de una página Web estática.
    CNAD
  • 13. ¿QUÉ ES HTML?
    • El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos.
    • Estos documentos pueden ser mostrados por los visores de páginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer.
    • Básicamente, HTML consta de una serie de órdenes, que indican al visor que se esté utilizando, la forma de representar los elementos (texto, gráficos, etc...) que contenga el documento.
    CNAD
  • 14.
    • 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
  • 15.
    • Las órdenes abiertas constan de una sola palabra clave.
    • Para diferenciar las órdenes del resto del texto del documento se encierran entre los símbolos
    • < y >
    • Las órdenes cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma.
    • Una orden puede contener &quot;parámetros&quot;. Estos parámetros se indican a continuación de la palabra clave de la orden.
    CNAD
  • 16. Ejemplos:
    • Orden cerrada
    • <CENTER> Una página ejemplo </CENTER>
    • Orden abierta
    • <HR>
    • Orden con parámetros
    • <BODY bgcolor=&quot;#FF00FF&quot;> </BODY>
    CNAD
  • 17. Estructura básica de HTML
    • Un documento escrito en HTML contendría básicamente las siguientes órdenes:
    CNAD <HTML> Indica el inicio del documento.
      • <HEAD>
    Inicio de la cabecera.
        • <TITLE>
    Inicio del título del documento.
        • </TITLE>
    Final del título del documento.
      • </HEAD>
    Final de la cabecera del documento.
      • <BODY>
    Inicio del cuerpo del documento.
      • </BODY>
    Final del cuerpo del documento. </HTML> Final del documento.
  • 18. 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 ACTUALIZACIÓN DOCENTE
    • </HTML>
    CNAD
  • 19. ESTRUCTURA BÁSICA
    • Dentro de las etiquetas <HTML></HTML>.
    • Existen dos partes fundamentales la cabecera del documento que son:
    • <HEAD> </HEAD>
    CNAD
  • 20.
    • <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>
    CNAD
  • 21. COMENTARIOS
    • Para incluir comentarios en la página Web se utiliza la orden
    • <!-- -->.
    • Ejemplo:
    • <!-- Esto es un comentario sobre mi página Web -->
    • Los comentarios no serán 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
  • 22.
    • <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>
    CNAD
  • 23. 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>
    CNAD
  • 24.
    • <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>
    CNAD
  • 25. ENCABEZADOS
    • También podemos crear diferentes tamaños de encabezados (también llamados cabeceras) para el texto por ejemplo para señalar los distintos encabezados tenemos los siguiente:
    CNAD
  • 26.
    • <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
  • 27. CENTRADO
    • Para centrar los elementos del documento HTML utilizamos las etiquetas
    • <center></center>
    CNAD
  • 28.
    • <HTML>
      • <HEAD>
        • <TITLE>Centrado</TITLE>
      • </HEAD>
      • <BODY>
        • <CENTER>CNAD</CENTER>
      • </BODY>
    • </HTML>
    CNAD
  • 29. SEPARADOR HORIZONTAL
    • Podemos utilizar una línea horizontal para separar distintas partes de una página Web, y para ello utilizaremos la etiqueta
    • <HR>
    CNAD
  • 30.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL</TITLE>
      • </HEAD>
      • <BODY>
        • <CENTER>CBTis No. 62</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>
    CNAD
  • 31. SEPARADOR HORIZONTAL ANCHO
    • Se puede hacer más ancha la línea de separador horizontal, utilizando la etiqueta:
    • <HR WIDTH=&quot;50%&quot;>
    CNAD
  • 32.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL ANCHO</TITLE>
      • </HEAD>
      • <BODY>
        • <HR WIDTH=&quot;50%&quot;>
        • <CENTER>CBTis No. 62</CENTER>
        • <HR WIDTH=&quot;50%&quot;>
      • </BODY>
    • </HTML>
    CNAD
  • 33. SEPARADOR NASHADE
    • Si queremos que el separador horizontal aparezca incrustado en la página, podemos añadir a la etiqueta <HR> el comando NOSHADE
    CNAD
  • 34.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE>
      • </HEAD>
      • <BODY>
        • <HR NOSHADE>
        • <CENTER>C E N A D</CENTER>
        • <HR NOSHADE>
      • </BODY>
    • </HTML>
    CNAD
  • 35. SEPARADOR NASHADE SIZE
    • Podemos hacer el que separador horizontal sea más grueso añadiendo el comando SIZE=“grueso en píxeles” a la etiqueta HR.
    • Si queremos crear un separador horizontal con un grosor de 20 píxeles y con sombras tendríamos que escribir la siguiente línea de código
    • <HR NOSHADE SIZE=&quot;20&quot;>
    CNAD
  • 36.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL</TITLE>
      • </HEAD>
      • <BODY>
        • <HR NOSHADE SIZE=&quot;20&quot;>
        • <CENTER>C E N A D</CENTER>
        • <HR NOSHADE SIZE=&quot;20&quot;>
      • </BODY>
    • </HTML>
    CNAD
  • 37. ALINEACIÓN DEL SEPARADOR HORIZONTAL
    • Se puede alinear el separador horizontal a la izquierda o a la derecha. Si no se especifica la alineación, el separador aparecerá siempre centrado.
    • Para alinearlo a la izquierda utilizaremos el comando
    • ALINGN=&quot;LEFT“
    • Añadiendo a la etiqueta <HR>, <HR WIDTH=&quot;50%&quot; ALIGN=&quot;LEFT&quot;>
    CNAD
  • 38.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL</TITLE>
      • </HEAD>
      • <BODY>
        • <HR WIDTH=&quot;50%&quot; ALIGN=&quot;LEFT&quot;>
        • <CENTER>C E N A D</CENTER>
        • <HR WIDTH=&quot;50%&quot; ALIGN=&quot;LEFT&quot;>
      • </BODY>
    • </HTML>
    CNAD
  • 39. ALINEACIÓN DERECHA
    • PARA ALINEAR EL SEPARADOR A LA DERECHA UTILIZAREMOS EL COMANDO
    • ALINGN=&quot; RIGHT &quot;
    • AÑADIENDOLO A LA ETIQUETA <HR>
    CNAD
  • 40.
    • <HTML>
      • <HEAD>
        • <TITLE>SEPARADOR HORIZONTAL</TITLE>
      • </HEAD>
      • <BODY>
        • <HR WIDTH=&quot;50%&quot; ALIGN=&quot; RIGHT &quot;>
        • <CENTER>C E N A D</CENTER>
        • <HR WIDTH=&quot;50%&quot; ALIGN=&quot; RIGHT &quot;>
      • </BODY>
    • </HTML>
    CNAD
  • 41. ETIQUETAS ANIDADAS
    • Son aquellas órdenes que se encuentran dentro de una orden general.
    CNAD
  • 42.
    • <HTML>
      • <HEAD>
        • <TITLE>ETIQUETAS ANIDADAS</TITLE>
      • </HEAD>
        • ETIQUETAS ANIDADAS
        • <CENTER><H1>CURSO HTML</H1></CENTER>
        • <CENTER><H2>CURSO HTML</H2></CENTER>
        • <CENTER><H3>CURSO HTML</H3></CENTER>
        • <HR>
      • </BODY>
    • </HTML>
    CNAD
  • 43. SALTO DE LÍNEA
    • Para conseguir que las líneas nos sean continuas, utilizaremos la etiqueta
    • <BR>
    CNAD
  • 44.
    • <HTML>
      • <HEAD>
        • <TITLE>SALTO DE LÍNEA</TITLE>
      • </HEAD>
      • <BODY>
        • SALTOS DE LÍNEA
        • <BR>
        • <HR>
        • <CENTER><H1>CNAD</H1></CENTER>
        • <BR>
        • <BR>
        • <BR>
        • <CENTER><H1>MECATRÓNICA</H1></CENTER>
        • <BR>
        • <BR>
        • <BR>
        • <HR>
      • </BODY>
    • </HTML>
    CNAD
  • 45. 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.
    CNAD
  • 46.
    • <HTML>
    • <HEAD>
    • <TITLE>Texto con tamaño menor</TITLE>
    • </HEAD>
    • <BODY>
    • TEXTO CON TAMAÑO 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 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>
    CNAD
  • 47. TEXTO CON TAMAÑO MAYOR
    • Se puede cambiar el tamaño base para toda la página, poniendo al comienzo del documento (a continuación de la etiqueta <BODY> ) esta etiqueta que cambiaría el tamaño base de 3 a 5:
    • <BASEFONT SIZE=5>
    CNAD
  • 48.
    • <HTML>
    • <HEAD>
    • <TITLE>Texto con tamaño mayor</TITLE>
    • </HEAD>
    • <BODY>
    • TEXTO CON TAMAÑO mayor
    • <HR>
    • <CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
    • <CENTER><H1>Mecatronica</H1></CENTER>
    • <HR>
    • <BASEFONT SIZE=5>
    • Podemos crear un texto con tamaño mayor
    • </BODY>
    • </HTML>
  • 49. 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
  • 50.
    • <HTML>
    • <HEAD>
    • <TITLE>NEGRITAS Y CURSIVAS</TITLE>
    • </HEAD>
    • <BODY>
    • <HR>
    • <CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
    • <BR>
    • <BR>
    • <BR>
    • <CENTER><H1>MECATRÓNICA</H1></CENTER>
    • <BR>
    • <BR>
    • <BR>
    • <HR>
    • </BODY>
    • </HTML>
    CNAD
  • 51. 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 del tamaño de la 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>
    CNAD
  • 52.
    • 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.
    • <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>
    CNAD
  • 53.
    • <HTML>
    • <HEAD>
    • <TITLE>TAMAÑO DE FUENTE</TITLE>
    • </HEAD>
    • <BODY>
    • TAMAÑO DE FUENTE
    • <P><FONT SIZE=&quot;48&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <CENTER>Mecatronica</CENTER>
    • <HR>
    • Podemos crear un texto que aparezca haber sido escrito con una máquina de escribir,
    • para ello utilizamos las etiquetas
    • 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.
    • </FONT>
    • </BODY>
    • </HTML>
    CNAD
  • 54. 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.
    CNAD
  • 55.
    • <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
    • 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.
    • <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 máquina de escribir,
    • para ello utilizamos las etiquetas
    • 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.
    • </PRE>
    • </PRE>
    • </BODY>
    • </HTML>
  • 56. CITA TEXTUAL
    • Se insertará una cita textual utilizando las etiquetas:
    • <BLOCKQUOTE>.</BLOCKQUOTE>
    CNAD
  • 57.
    • <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 AÑOS, NO IMPORTA CUANTOS EXACTAMENTE, ALLÁNDOME CON POCO O NINGÚN DINERO EN LA BOLASA Y SIN NADA DE ESPECIAL INTERÉS QUE ME TUVIERA EN TIERRA, PENSÉ QUE LO MEJOR SERÍA DARME A LA MAR POR UNA TEMPORADA PARA VER LA PARTE ACUÁTICA DEL MUNDO.
        • </BLOCKQUOTE>
      • </BODY>
    • </HTML>
  • 58. VIÑETAS
    • Para poner una lista con viñetas se utilizarán las siguientes etiquetas:
    • <UL>
      • <LI>
      • <LI>
      • <LI>
    • </UL>
    CNAD
  • 59.
    • <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>
  • 60. VIÑETAS CUADRADAS
    • Para agregar una lista con viñetas cuadradas se utilizará la etiqueta:
    • <UL TYPE=&quot;square&quot;>
    CNAD
  • 61.
    • <HTML<
      • <HEAD>
        • <TITLE>LISTAS CON VIÑETAS CUADRADAS </TITLE>
      • </HEAD>
      • <BODY>
        • <BR>
        • <BR>
        • LISTAS CON VIÑETAS CUADRADAS
        • <BR>
        • <BR>
        • <HR>
        • <CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
        • <CENTER><H1>MECATRÓNICA<H1></CENTER>
        • <HR>
        • <UL>
          • <LI>CAPITULO 1
          • <UL TYPE=&quot;square&quot;>
          • <LI>INICIO
          • <LI>TRAMA
          • <LI>DESENLACE
      • </UL>
        • <UL>
          • <LI>CAPITULO 2
          • <LI>CAPITULO 3
        • </UL>
      • </BODY>
    • </HTML>
  • 62. VIÑETAS CON NÚMEROS ROMANOS
    • Con la etiqueta
    • <UL TYPE=&quot;I&quot;>
    • Se podrá poner una lista con números romanos.
    CNAD
  • 63.
    • <HTML<
    • <HEAD>
    • <TITLE>LISTAS CON VIÑETAS DE NÚMEROS ROMANOS
    • </TITLE>
    • </HEAD>
    • <BODY>
    • LISTAS CON VIÑETAS DE NÚMEROS ROMANOS
    • <HR>
    • <CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
    • <CENTER><H1>MECATRÓNICA<H1></CENTER>
    • <HR>
    • <UL>
    • <LI>CAPITULO 1
    • <UL TYPE=&quot;I&quot;>
    • <LI>INICIO
    • <LI>TRAMA
    • <LI>DESENLACE
    • </UL>
    • <LI>CAPITULO 2
    • <LI>CAPITULO 3
    • </UL>
    • </BODY>
    • </HTML>
  • 64. VIÑETAS ANIDADAS
    • Son listas de varios niveles que pueden combinar diferentes tipos de listas.
    CNAD
  • 65.
    • <HTML<
      • <HEAD>
        • <TITLE>LISTAS CON VIÑETAS ANIDADAS</TITLE>
      • </HEAD>
      • <BODY>
        • <HR>
          • <CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
          • <CENTER><H1>MECATRÓNICA<H1></CENTER>
        • <HR>
        • <UL>
          • <LI>CAPITULO 1
      • <UL>
          • <LI>INICIO
          • <LI>TRAMA
          • <LI>DESENLACE
      • </UL>
          • <LI>CAPITULO 2
          • <LI>CAPITULO 3
        • </UL>
      • </BODY>
    • </HTML>
  • 66. ATRIBUTO FACE
    • Define el tipo de letra.
    • <font face=&quot;Comic Sans MS,arial,verdana&quot;>Este texto tiene otra tipografía</font>
    CNAD
  • 67.
    • <HTML>
    • <HEAD>
    • <TITLE>ATRIBUTO FACE</TITLE>
    • </HEAD>
    • <BODY TEXT=&quot;#RRVVAA&quot;>
    • <font face=&quot;Comic Sans MS,&quot;>Este texto tiene otra tipografía</font>
    • <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
  • 68. LOS COLORES
    • El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores &quot;primarios&quot;, rojo , verde y azul . El código de color se antecede del símbolo # .
    CNAD
  • 69. LOS COLORES
    • COLORES PRIMARIOS
    CNAD COLOR CÓDIGO HEXADECIMAL ROJO #FF0000 VERDE #00FF00 AZUL #0000FF BLANCO #FFFFFF VERDE #000000 AMARILLO #FFFF00
  • 70. Colores de fondo
    • Si se desea cambiar el color de fondo se utilizará la etiqueta del atributo
    • <BGCOLOR=”#RRVVAA”>
    • dentro de la etiqueta <BODY>.
    CNAD
  • 71.
    • <HTML>
    • <HEAD>
    • <TITLE>Colores de fondo</TITLE>
    • </HEAD>
    • <BODY BGCOLOR=&quot;#00FF00&quot;>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;14&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <CENTER>Mecatronica</CENTER>
    • <HR>
    • Podemos crear un texto que aparezca haber sido escrito con una máquina de escribir,
    • para ello utilizamos las etiquetas
    • 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.
    • </FONT>
    • </BODY>
    • </HTML>
  • 72. 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
  • 73. ETIQUETAS CNAD <BODY TEXT=&quot;#RRVVAA&quot;> Color del texto <BODY LINK=&quot;#RRVVAA&quot;> Color de los enlaces <BODY VLINK=&quot;#RRVVAA&quot;> Color de los enlaces una vez visitados <BODY ALINK=&quot;#RRVVAA&quot;> Color de los enlaces activos (el que se ve al hacer clic sobre él)
  • 74.
    • <HTML>
    • <HEAD>
    • <TITLE>COLORES DE TEXTO</TITLE>
    • </HEAD>
    • <BODY TEXT=&quot;#RRVVAA&quot;>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;14&quot;>
    • <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
  • 75. IMAGENDE FONDO
    • La sintaxis para incluir una imagen como fondo sería:
    • <BODY BACKGROUND=”IMÁGENES/nombre de la imagen.gif”>
    CNAD
  • 76.
    • <HTML>
    • <HEAD>
          • <TITLE>IMAGEN DE FONDO</TITLE>
    • </HEAD>
    • <BODY BACKGROUND=&quot;IMAGENES/YARIS.jpg&quot;>
          • <HR>
          • IMAGEN DE FONDO
          • <HR>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;14&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <CENTER>Mecatronica</CENTER>
    • <HR>
          • EN ESTA PÁGINA PONDREMOS UNA IMAGEN DE FONDO.
    • </FONT>
    • </BODY>
    • </HTML>
  • 77. IMAGEN DE BOTÓN
    • Simple forma de insertar una imagen en un botón.
    • <CENTER><img src=&quot;IMAGENES/YARIS.jpg&quot;WIDTH =&quot;144&quot;HEIGHT=140&quot;></CENTER>
    CNAD
  • 78.
    • <HTML>
    • <HEAD>
    • <TITLE>IMAGEN DE BOTÓN</TITLE>
    • </HEAD>
    • <BODY>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;14&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <CENTER>Mecatronica</CENTER>
    • <CENTER><img src=&quot;IMAGENES/YARIS.jpg&quot;WIDTH =&quot;144&quot;HEIGHT=140&quot;></CENTER>
    • <HR>
    CNAD
  • 79. 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>
    •   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
    CNAD
  • 80. Distintos enlaces
    •   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
    CNAD
  • 81. 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>
    • Y para acceder a esa posición usaremos el siguiente hipernlace:
    • <A HREF=&quot;#final&quot;>Vamos al final del documento</A>
    CNAD
  • 82.
    • <HTML>
    • <HEAD>
    • VINCULO DE ANCLAS
    • <HEAD>
    • <BODY>
    • Esta página es un ejemplo de vínculos de anclas
    • <a name=&quot;principio&quot;>Este es el principio del documento!!</a>
    • <BR>
    • <A HREF=&quot;#final&quot;>Vamos al final del documento</A>
    • <BR>
    • <A HREF=&quot;#principio&quot;>Vamos al principio del documento</A>
    • <BR>
    • <a name=&quot;final&quot;>Este es el final del documento!!</a>
    • </BODY>
    • </HTML>
  • 83. 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.cnad.edu.mx >CNAD</A>
    CNAD
  • 84.
    • <HTML>
    • <HEAD>
    • <TITLE>VINCULO A UNA PÁGINA DE INTERNET</TITLE>
    • </HEAD>
    • <BODY TEXT=&quot;#RRVVAA&quot;>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;14&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <HR>
    • <CENTER>Mecatronica</CENTER>
    • <HR>
    • VISITA LA PÁGINA DEL CENTRO NACIONAL DE ACTUALIZACIÓN DOCENTE(CNAD), DANDO CLIC EN EL SIGUIENTE ENLACE
    • <A HREF=http://www.cnad.edu.mx>CNAD</A>
    • </FONT>
    • </BODY>
    • </HTML>
  • 85. ENLACE DE CORREO ELECTRÓNICO
    • La sintaxis para crear un enlace a una dirección de correo electrónico es la siguiente:
    •  
    • < A HREF= [email_address] >nfernand97@hotmail.com</A >
    CNAD
  • 86.
    • <HTML>
    • <HEAD>
    • <TITLE>VINCULO A UN CORREO ELECTRÓNICO</TITLE>
    • </HEAD>
    • <BODY TEXT=&quot;#RRVVAA&quot;>
    • <FONT FACE=&quot;ARIAL&quot;SIZE=&quot;12&quot;>
    • <HR>
    • <CENTER>CNAD</CENTER>
    • <HR>
    • <CENTER>Mecatronica</CENTER>
    • <HR>
    • <BR>
    • <BR>
    • Contáctanos en la siguiente dirección:
    • <BR>
    • <a href=&quot;mailto:nfernand97@hotmail.com&quot;>nfernad97@hotmail.com</a>
    • </FONT>
    • </BODY>
    • </HTML>
  • 87. ENLACE A UN ARCHIVO
    • La sintaxis para crear un enlace a un archivo existente es la siguiente:
    •  
    • <A href=&quot;TODO LO DE VINCULOS.html&quot;>RESUMEN DEL TEMA DE VINCULOS</A>.
    CNAD
  • 88. <HTML> <HEAD> <TITLE>VINCULO A UN ARCHIVO EXISTENTE</TITLE> <HEAD> <BODY> VINCULO A UN ARCHIVO EXISTENTE <P>Encontrarás mucho más en el ENLACE SIGUIENTE: <BR> <BR> <A href=&quot;TODO LO DE VINCULOS.html&quot;>RESUMEN DEL TEMA DE VINCULOS</A>. </BODY> </HTML> CNAD
  • 89. ENLACE UTILIZANDO UNA IMAGEN
    • PARA ENLAZAR A OTRA PÁGINA 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>
    CNAD
  • 90.
    • <html>
    • <head>
    • <title>
    • Vínculos con imagen
    • </title>
    • </head>
    • <body>
    • <center>
    • Visita la página del CNAD:<P>
    • <a href=&quot;http://www.cnad.edu.mx&quot;>
    • <img src=&quot;imagenes/YARIS.jpg&quot;>
    • </a>
    • </center>
    • </body>
    • </html>
  • 91.
    • <html>
      • <head>
        • <title>
          • Vínculos con imagen
        • </title>
      • </head>
      • <body>
      • <center>
      • Visita la página del CNAD:<P>
      • <a href=&quot;http://www.cnad.edu.mx&quot;>
      • <img src=&quot;imagenes/YARIS.jpg&quot;>
      • </a>
      • </center>
      • </body>
    • </html>
  • 92. ENLACE UTILIZANDO UNA IMAGENPARA VER OTRA IMAGEN
      • <a href=&quot;imagenes/YARIS.jpg&quot;>
      • <img src=&quot;imagenes/VICKY.jpg&quot;>
      • </a>
    CNAD
  • 93.
    • <html>
      • <head>
      • <title>
      • Vínculos con imágenes
      • </title>
      • </head>
      • <body>
      • <center>
      • Esta página utiliza un vinculo de una imagen para ver otra imagen:<P>
      • <a href=&quot;imagenes/YARIS.jpg&quot;>
      • <img src=&quot;imagenes/VICKY.jpg&quot;>
      • </a>
      • </center>
      • </body>
    • </html>
  • 94. TEXTO ARRIBA DE LA IMAGEN
    • <HTML>
    • <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
    • <BODY>
    •  
    • <P>YARELI
    • <IMG SRC=”IMAGENES/YARIS&quot; ALIGN=TOP>
    •  
    • </BODY>
    • </HTML>
    CNAD
  • 95. TEXTO EN MEDIO DE LA IMAGEN
    • <HTML>
    • <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
    • <BODY>
    •  
    • <P>YARELI
    • <IMG SRC=”IMAGENES/YARIS&quot; ALIGN= MIDDLE >
    •  
    • </BODY>
    • </HTML>
    CNAD
  • 96. TEXTO ABAJO DE LA IMAGEN
    • <HTML>
    • <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
    • <BODY>
    •  
    • <P>YARELI
    • <IMG SRC=”IMAGENES/YARIS&quot; ALIGN= MIDDLE >
    •  
    • </BODY>
    • </HTML>
    CNAD
  • 97. IMAGEN CON TEXTO ALTERNATIVO
    • <HTML>
    • <HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
    • <BODY>
    •   <P>YARELI
    • <BR>
    •   <IMG SRC=&quot;IMAGENES/YARIS.JPG&quot; ALT=&quot;AQUI VA UNA IMAGEN&quot;>
    • </BODY>
    • </HTML>
    CNAD
  • 98. ENLAZAR TEXTO CON IMAGEN
    • <HTML>
      • <HEAD>
        • <TITLE>
          • ENLAZAR TEXTO CON IMAGEN
        • </TITLE>
        • </HEAD>
    • <BODY>
    • <A HREF=&quot;IMAGENES/YARIS.jpg&quot;> De clic para ver la imagen</A>
    • </BODY>
    • </HTML>
    CNAD
  • 99. Gracias por su atención