Html
Upcoming SlideShare
Loading in...5
×
 

Html

on

  • 2,878 views

Etiquetas básicas de HTML

Etiquetas básicas de HTML

Statistics

Views

Total Views
2,878
Views on SlideShare
2,325
Embed Views
553

Actions

Likes
1
Downloads
148
Comments
0

6 Embeds 553

http://liqui-compu1.blogspot.com 343
http://www.liqui-compu1.blogspot.com 166
http://nfernandezcnad.weebly.com 33
http://localhost 9
http://www.weebly.com 1
http://liqui-compu1.blogspot.com.ar 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html Html Presentation Transcript

  • CNAD
    Lic. Norma Fernández Osorio
  • CNAD
    CURSO DE:
    HTML
    Tiene una duración de 40 horas, y se divide en 5 sesiones de 8 horas c/u
  • CNAD
    Objetivo General
    Utilizando las herramientas de HTML, el participante realizará el diseño de una página Web estática.
  • CNAD
    PROPOSITO
    Elaborar páginas Web estáticas.
  • CNAD
    CONTENIDO
    ESTRUCTURA GENERAL DE HTML
  • EVALUACIÓN
    CNAD
    CRITERIOS DE EVALUACIÓN
    Participación 10%
    Prácticas 30%
    Proyecto final 60%
  • CNAD
    EXPECTATIVAS DEL CURSO
    El participante expondrá sus expectativas respecto al curso.
  • CNAD
    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
    COMPROMISOS
    SE SOLICITA A LOS PARTICIPANTES EXPONER SUS COMPROMISOS DEL CURSO.
  • CNAD
    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
    • Materias que imparte
    • Hobby preferido
  • CNAD
    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
    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
    ¿QUÉ ES HTML?
    El HTML(HyperTextMarkupLanguage) 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
    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 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 "parámetros". Estos parámetros se indican a continuación de la palabra clave de la orden.
  • CNAD
    Ejemplos:
    Orden cerrada
    <CENTER> Una página ejemplo </CENTER>
    Orden abierta
    <HR>
    Orden con parámetros
    <BODY bgcolor="#FF00FF"> </BODY>
  • CNAD
    Estructura básica de HTML
    Un documento escrito en HTML contendría básicamente las siguientes órdenes:
  • 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 ACTUALIZACIÓN DOCENTE
    </HTML>
  • CNAD
    ESTRUCTURA BÁSICA
    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> 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>
    </HTML>
  • CNAD
    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
    <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
    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
    <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
    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
    <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 línea horizontal para separar distintas partes de una página Web, y para ello utilizaremos la etiqueta
    <HR>
  • CNAD
    <HTML>
    <HEAD>
    <TITLE>SEPARADOR HORIZONTAL</TITLE>
    </HEAD>
    <BODY>
    <CENTER>CBTis No. 83</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
    SEPARADOR HORIZONTAL ANCHO
    Se puede hacer más ancha la línea 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. 83</CENTER>
    <HR WIDTH="50%">
    </BODY>
    </HTML>
  • CNAD
    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
    <HTML>
    <HEAD>
    <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE>
    </HEAD>
    <BODY>
    <HR NOSHADE>
    <CENTER>CNAD</CENTER>
    <HR NOSHADE>
    </BODY>
    </HTML>
  • CNAD
    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="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
    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="LEFT“
    Añadiendo 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
    ALINEACIÓN DERECHA
    PARA ALINEAR EL SEPARADOR A LA IZQUIERDA UTILIZAREMOS EL COMANDO
    ALINGN=" RIGHT "
    AÑADIENDOLO 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 LÍNEA
    Para conseguir que las líneas no sean continuas, utilizaremos la etiqueta
    <BR>
  • CNAD
    <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
    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
    <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
    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>
  • <HTML>
    <HEAD>
    <TITLE>Texto con tamaño mayor</TITLE>
    </HEAD>
    <BODY>
    TEXTO CON TAMAÑO mayor
    <HR>
    <CENTER><H1>CNAD</H1></CENTER>
    <CENTER><H1>Mecatronica</H1></CENTER>
    <HR>
    <BASEFONT SIZE=5>
    Podemos crear un texto con tamaño 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>MECATRÓNICA</H1></CENTER>
    <BR>
    <BR>
    <BR>
    <HR>
    </BODY>
    </HTML>
  • CNAD
    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
    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
    <HTML>
    <HEAD>
    <TITLE>TAMAÑO DE FUENTE</TITLE>
    </HEAD>
    <BODY>
    TAMAÑO 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 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. </P>
    </FONT>
    </BODY>
    </HTML>
  • CNAD
    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
    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>
    </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 AÑOS, NO IMPORTA CUANTOS EXACTAMENTE, ALLÁNDOME CON POCO O NINGÚN DINERO EN LA BOLSA 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>
  • CNAD
    VIÑETAS
    Para poner una lista con viñetas se utilizarán las siguientes etiquetas:
    <UL>
    <LI>
    <LI>
    <LI>
    </UL>
  • <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>
  • CNAD
    VIÑETAS CUADRADAS
    Para agregar una lista con viñetas cuadradas se utilizará la etiqueta:
    <UL TYPE="square">
  • <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="square">
    <LI>INICIO
    <LI>TRAMA
    <LI>DESENLACE
    </UL>
    <LI>CAPITULO 2
    <LI>CAPITULO 3
    </UL>
    </BODY>
    </HTML>
  • CNAD
    VIÑETAS CON NÚMEROS ROMANOS
    Con la etiqueta
    <UL TYPE="I">
    Se podrá poner una lista con números romanos.
  • <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="I">
    <LI>INICIO
    <LI>TRAMA
    <LI>DESENLACE
    </UL>
    <LI>CAPITULO 2
    <LI>CAPITULO 3
    </UL>
    </BODY>
    </HTML>
  • CNAD
    VIÑETAS ANIDADAS
    Son listas de varios niveles que pueden combinar diferentes tipos de listas.
  • <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>
  • CNAD
    ATRIBUTO FACE
    Define el tipo de letra.
    <fontface="Comic SansMS,arial,verdana">Este texto tiene otra tipografía</font>
  • CNAD
    <HTML>
    <HEAD>
    <TITLE>ATRIBUTO FACE</TITLE>
    </HEAD>
    <BODY fontcolor text=“#ff">
    <fontface="Comic Sans MS">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
    </BODY>
    </HTML>
  • CNAD
    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 "primarios", rojo, verde y azul. El código de color se antecede del símbolo #.
  • CNAD
    LOS COLORES
    COLORES PRIMARIOS
  • 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 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
    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
  • 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
    IMAGENDE FONDO
    La sintaxis para incluir una imagen como fondo sería:
    <BODY BACKGROUND=”IMÁGENES/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 PÁGINA PONDREMOS UNA IMAGEN DE FONDO.
    </FONT>
    </BODY>
    </HTML>
  • CNAD
    IMAGEN DE BOTÓN
    Simple forma de insertar una imagen en un botón.
    <CENTER><imgsrc="IMAGENES/YARIS.jpg"WIDTH ="144"HEIGHT=140"></CENTER>
  • CNAD
    <HTML>
    <HEAD>
    <TITLE>IMAGEN DE BOTÓN</TITLE>
    </HEAD>
    <BODY>
    <FONT FACE="ARIAL"SIZE="14">
    <HR>
    <CENTER>CNAD</CENTER>
    <CENTER>Mecatronica</CENTER>
    <CENTER><imgsrc="IMAGENES/YARIS.jpg"WIDTH ="144"HEIGHT=140"></CENTER>
    <HR>
  • CNAD
    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>
     
  • CNAD
    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
    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 hiperenlace:
    <A HREF="#final">Vamos al final del documento</A>
  • <HTML>
    <HEAD> VINCULO DE ANCLAS</HEAD>
    <BODY>
    Esta página es un ejemplo de vínculos 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 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>
  • <HTML>
    <HEAD>
    <TITLE>VINCULO A UNA PÁGINA DE INTERNET</TITLE>
    </HEAD>
    <BODY TEXT="#RRVVAA">
    <FONT FACE="ARIAL"SIZE="14">
    <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>
  • CNAD
    ENLACE DE CORREO ELECTRÓNICO
    La sintaxis para crear un enlace a una dirección de correo electrónico es la siguiente:
     
    <A HREF=mailto:nfernand97@hotmail.com>nfernand97@hotmail.com</A>
  • <HTML>
    <HEAD>
    <TITLE>VINCULO A UN CORREO ELECTRÓNICO</TITLE>
    </HEAD>
    <BODY TEXT="#RRVVAA">
    <FONT FACE="ARIAL"SIZE="12">
    <HR>
    <CENTER>CNAD</CENTER>
    <HR>
    <CENTER>Mecatronica</CENTER>
    <HR>
    <BR>
    <BR>
    Contáctanos en la siguiente dirección:
    <BR>
    <a href="mailto:nfernand97@hotmail.com">nfernand97@hotmail.com</a>
    </FONT>
    </BODY>
    </HTML>
  • 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>Encontrarás mucho más 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 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>
  • <html>
    <head>
    <title>
    Vínculos con imagen
    </title>
    </head>
    <body>
    <center>
    Visita la página del CNAD:<P>
    <a href="http://www.cnad.edu.mx">
    <imgsrc="imagenes/YARIS.jpg">
    </a>
    </center>
    </body>
    </html>
  • <html>
    <head>
    <title>
    Vínculos con imagen
    </title>
    </head>
    <body>
    <center>
    Visita la página 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">
    <imgsrc="imagenes/VICKY.jpg">
    </a>
  • <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="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
    <imgsrc="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 LÍNEA 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>
    </HTML>
  • <HTML>
    <AHEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=”40”>
    <BR>
    <BR>
    <BR>
    EXPRESE UN COMENTARIO RESPECTO A LA PÁGINA<TEXTAREA NAME="QUE LE PARECIO LA PÁGINA" ROWS="10" COLS="30"></TEXTAREA>
    <BR>
    <BR>
    <BR>
    <INPUT TYPE="SUBMIT" VALUE="ENVIAR">
    <INPUT TYPE="RESET" VALUE="BORRAR">
    </FORM>
    </BODY>
    </HTML>
  • CNAD
    TABLAS
    Las tablas son fundamentales para organizar las páginas web. No solo sirven para ordenar datos, sino que también nos permiten DIVIDIR LA PÁGINA
     
    La etiqueta que define la tabla completa es
    <TABLE></TABLE>
    Y dentro de las etiquetas
    <TR> </TR>
  • Para crear una tabla con bordes, formada por 3 filas y con 3 celdas en cada fila escribiremos lo siguiente dentro del cuerpo del documento:
    <HTML>
    <HEAD> <TITLE> TABLAS</TITLE></HEAD>
    <BODY>
    <TABLE>
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    Tabla con bordes
    Para agregar los bordes de una página utilizaremos la siguiente etiqueta:
    <TABLE BORDER="2">
  • <HTML>
    <HEAD> <TITLE> TABLAS</TITLE></HEAD>
    <BODY>
    <TABLE BORDER="2">
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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="5" BORDERCOLOR=“#RRVVAA”>
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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.
  • <HTML>
    <HEAD> <TITLE> TABLAS</TITLE></HEAD>
    <BODY>
    <TABLE>
    <TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING=“12">
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2" CELLPADDING="12">
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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>
    <TABLE>
    <TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2" CELLPADDING="12" WIDTH="50%">
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    <TD>CELDA 3 FILA2</TD>
    </TR>
    <TR>
    <TD>CELDA1 FILA3</TD>
    <TD>CELDA 2 FILA3</TD>
    <TD>CELDA 3 FILA3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    IMAGEN EN UNA TABLA
    Para ilustrar las tablas utilizaremos la etiqueta siguiente:
    <TD> </TD>
  • <HTML>
    <HEAD> <TITLE> TABLAS</TITLE></HEAD>
    <BODY>
    <TABLE>
    <TABLE BORDER="2" BORDERCOLOR=”#FFFF00” CELLSPACING="2" CELLPADDING="12" width="100%">
    <TR>
    <TD>
    <center><IMG SRC="IMAGENES/YARIS.jpg "WIDTH="200"HEIGHT="200"></center>
    </TD>
    <TD>
    <FONT FACE="Arial" SIZE="7">ESTA ES OTRA FORMA DE ORGANIZAR EL CONTENIDO DE UNA PÁGINA WEB. PODEMOS UTILIZAR TABLAS PARA ORDENAR LOS ELEMENTOS DE NUESTRA PÁGINA
    </FONT>
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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>
    <TABLE>
    <TABLE BORDER="2">
    <TR>
    <TD>CELDA 1 FILA1</TD>
    <TD>CELDA 2 FILA1</TD>
    <TD>CELDA 3 FILA1</TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA2</TD>
    <TD>CELDA 2 FILA2</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • TÍTULO DE LA TABLA ARRIBA
    <HTML>
    <HEAD> <TITLE> TITULO DE LA TABLA ARRIBA</TITLE></HEAD>
    <BODY>
    <TABLE BORDER>
    <CAPTION ALIGN=“top”>Titulo arriba</CAPTION>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • TÍTULO DE LA TABLA ABAJO
    <HTML>
    <HEAD> <TITLE> TITULO DE LA TABLA ABAJO</TITLE></HEAD>
    <BODY>
    <TABLE BORDER>
    <CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
    <TR>
    <TH>Enero</TH>
    <TH>Febrero</TH>
    <TH>Marzo</TH>
    </TR>
    <TR>
    <TD>Celda 1</TD>
    <TD>Celda 2</TD>
    <TD>Celda 3</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    TABLAS CON 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 etiquetas
    <TH></TH>
  • CNAD
    <HTML>
    <HEAD> <TITLE> TITULO DE LA TABLA ARRIBA</TITLE></HEAD>
    <BODY>
    <TABLE BORDER>
    <TR>
    <TH>TÍTULO 1</TH> <TH>TÍTULO 2</TH> <TH>TÍTULO 3</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>
  • CELDAS COMBINADAS
    <HTML>
    <HEAD> <TITLE> CELDAS COMBINADAS</TITLE></HEAD>
    <BODY>
    <TABLE>
    <TABLE BORDER=”2” BORDERCOLOR=”#000000”>
    <CELLSPACING=”2” CELLSPADING=”3”>
    <TR>
    <TD COLSPAN=”3”> Celda 1 final1 </TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA 2</TD>
    <TD>CELDA 2 FILA 2</TD>
    <TD>CELDA 3 FILA 2</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • COMBINACION DE CELDAS VERTICALES
    <HTML>
    <HEAD> <TITLE> COMBINACION DE CELDAS 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>
  • CNAD
    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)
  • CNAD
    <HTML>
    <HEAD> <TITLE>ALINEACION HORIZONTAL DEL CONTENIDO DE UNA CELDA</TITLE></HEAD>
    <BODY>
    <TABLE BORDER=”2” BORDERCOLOR=”#000000” CELLSPACING=”2” CELLPADDING=”3” WIDTH="50%">
    <TR>
    <TD ALIGN="CENTER"> Celda 1 fila 1 </TD>
    <TD ALIGN="LEFT"> Celda 2 fila 1 </TD>
    <TD ALIGN="RIGHT"> Celda 3 fila 1 </TD>
    </TR>
    <TR>
    <TD>CELDA 1 FILA 2</TD>
    <TD>CELDA 2 FILA 2</TD>
    <TD>CELDA 3 FILA 2</TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • ALINEACIÓN VERTICAL DEL TEXTO EN UNA CELDA
    <HTML>
    <HEAD> <TITLE> ALINEACION VERTICAL DEL TEXTO DE UNA CELDA</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=“MIDDLE"> Celda 2 fila 1 </TD>
    <TD VALIGN="BOTTOM"> Celda 3 fila 1 </TD>
    <TD Celda 3 fila 1 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    DIMENSIONES DE LAS CELDAS
    También se puede 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.
  • CNAD
    <HTML><HEAD> <TITLE>Dimensiones de la celdas</TITLE></HEAD><BODY><TABLE BORDER=“2” BORDERCOLOR=“0000FF” CELLPADDING=“3” WIDTH="30%" HEIGHT=“60%”> <TR> <TD WIDTH=“60%"> Celda 1 fila 1 </TD> <TD WIDTH=“20%"> Celda 2 fila 1 </TD> </TR></TABLE></BODY></HTML>
  • CNAD
    COLOR DE FONDO DE LA TABLA
    Utilizaremos el atributo
    “BGCOLOR=”#RRVVAA”
    dentro de la etiqueta TABLE para establecer el color de fondo de la tabla completa.
  • <HTML>
    <HEAD> <TITLE> COLOR DEL FONDO DE LA TABLA</TITLE></HEAD>
    <BODY>
    <TABLE BGCOLOR=”#00FFFF” BORDER="4">
    <TR>
    <TD> Celda 1 fila 1 </TD>
    <TD> Celda 2 fila 1 </TD>
    <TD> Celda 3 fila 1 </TD>
    </TR>
    <TR>
    <TD> Celda 1 fila 2 </TD>
    <TD> Celda 2 fila 2 </TD>
    <TD> Celda 3 fila 2 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    COLOR DE FONDO DE LAS CELDAS
    Para establecer un color de fondo en una celda determinada aplicaremos el atributo
    BGCOLOR=”#RRVVAA”
  • <HTML>
    <HEAD><TITLE>TABLAS</TITLE></HEAD>
    <BODY BGCOLOR="#FFFF00">
    <TABLE BGCOLOR=”#FFFFF0” BORDER="2">
    <TR>
    <TD BGCOLOR="#00FF00">Celda 1 fila 1</TD>
    <TD> Celda 2 fila 1</TD>
    <TD> Celda 3 fila 1</TD>
    </TR>
    <TR>
    <TD> Celda 1 fila 2 </TD>
    <TD> Celda 2 fila 2 </TD>
    <TD> Celda 3 fila 2 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • IMAGEN DE FONDO DE LA TABLA
    <HTML>
    <HEAD><TITLE>IMAGEN DE FONDO EN TABLAS</TITLE></HEAD>
    <BODY BGCOLOR="#FFFF00">
    <TABLE BACKGROUND="IMAGENES/YARIS.jpg" WIDTH="44" HEIGHT="44" BORDER="2" BORDERCOLOR=”#FF0000”>
    <TR>
    <TD WIDTH="100%">Celda 1 fila 1</TD>
    <TD WIDTH="100%">Celda 2 fila 1</TD>
    <TD WIDTH="100%">Celda 3 fila 1</TD>
    </TR>
    <TR>
    <TD> Celda 1 fila 2 </TD>
    <TD> Celda 2 fila 2 </TD>
    <TD> Celda 3 fila 2 </TD>
    </TR>
    <TR>
    <TD> Celda 1 fila 3 </TD>
    <TD> Celda 2 fila 3 </TD>
    <TD> Celda 3 fila 3 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    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.
  • <HTML>
    <HEAD><TITLE>imagen de fondo de celda</TITLE></HEAD>
    <BODY>
    <BODY BGCOLOR="#FFFF00">
    <TABLE BGCOLOR=”#FFFFF0” BORDER="2">
    <TR>
    <TD WIDTH="50" BACKGROUND="IMAGENES/yaris.jpg">Celda 1 fila 1</TD>
    <TD> Celda 2 fila 1</TD>
    <TD> Celda 3 fila 1</TD>
    </TR>
    <TR>
    <TD> Celda 1 fila 2 </TD>
    <TD> Celda 2 fila 2 </TD>
    <TD> Celda 3 fila 2 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>
  • CNAD
    CALCULO DE COLORES EN FORMATO HEXADECIMAL
    Utilizando los programas que toda PC con Windows tiene disponibles podemos averiguar el código hexadecimal de un color determinado.
    PAINT
    Abrimos el programa PAINT
  • CNAD
    Doble clic en la paleta de colores
  • CNAD
    Aparece la siguiente ventana
  • CNAD
    Dar doble clic en la opción Definir colores personalizados y la ventana se ampliará de la siguiente manera
  • CNAD
    En esta parte se elegirá el color deseado, haciendo las siguientes anotaciones
  • CNAD
    FORMULARIOS
    La manera más eficaz de conseguir que los usuarios de nuestra página se comuniquen con nosotros es a través de un formulario.
     Hay dos formas de recibir la información que introduce el usuario: recibirla directamente en nuestra dirección de correo o utilizar un programa que gestione los datos y después nos los incluya en una bd.
  • ESTRUCTURA GENERAL DE UN FORMULARIO
    Etiqueta de inicio:
    <FORM ACTION=”mailito: dirección@correo.com”
    METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
    El atributo ACTION indica al navegador que el formulario se enviará a la dirección de correo electrónico que determinaremos.
     
    El atributo METHOD=”POST” indica que los datos serán enviados por correo electrónico inmediatamente después de que en usuario pulse el botón de envió.
     
    El atributo ENCTYPE=”(TEXT/PLAIN” consigue que recibamos la respuesta en formato de fichero de texto y si codifica.
  • CNAD
    En el cuerpo del formulario: incluiremos los distintos elementos de introducción de datos.
    Botones de envió y de borrado.
    La etiqueta de cierre de formulario
    </FORM>
  • CNAD
    ELEMENTOS DE INTRODUCCIÓN DE DATOS
    La etiqueta base para crear elementos de introducción de datos es la siguiente:
    <INPUT TYPE=”tipo del elemento” NAME=”nombre del elemento” VALUE=”valor predeterminado”>
  • CNAD
    Si queremos crear un campo de texto en el que el usuario debe introducir su nombre la línea de código que tendríamos que incluir dentro de las etiquetas <FORM></FORM> (en el cuerpo del documento HTML) sería la siguiente:
    Introduzca su nombre: <INPUT TYPE=”text” NAME=”nombre”>
  • CNAD
    <HTML>
    <HEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    Introduzca su nombre: <INPUT TYPE="text"NAME="nombre">
    <BR>
    Ponga su dirección: <INPUT TYPE="text"NAME="dirección">
    <BR>
    Ponga su Teléfono: <INPUT TYPE="text"NAME="telefono">
    </FORM>
    </BODY>
    </HTML>
  • CNAD
    Campo de texto más largo
    La longitud por defecto de un campo de texto de una línea es de 20 caracteres.
    Para crear un campo de texto más largo utilizaremos el atributo size=”número”, dentro de la etiqueta del elemento.
  • <HTML>
    <AHEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    Introduzca su nombre: <INPUT TYPE="text"NAME="nombre" SIZE="50">
    <BR>
    <BR>
    <BR>
    Ponga su dirección: <INPUT TYPE="text"NAME="dirección" SIZE="50">
    <BR>
    <BR>
    <BR>
    Ponga su Teléfono: <INPUT TYPE=“INT"NAME="teléfono" SIZE=“15">
    </FORM>
    </BODY>
    </HTML>
  • CNAD
    CAMPO LIMITADO PARA CARACTERES
    También podemos limitar el número de caracteres utilizando el atributo maxlenfth=número”. Si se escribe:
     
    NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=”40”>
     
    El usuario sólo podrá incluir 40 caracteres en el campo de texto y sólo 20 caracteres se verán dentro del mismo.
  • CNAD
    <HTML>
    <HEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH="30">
    </FORM>
    </BODY>
    </HTML>
  • CNAD
    Contraseñas
    También se puede crear un campo de texto codificado, es decir que el usuario sólo vería asteriscos al escribir el texto. Esto es muy útil para contraseñas de usuario.
    Para ello cambiamos el atributo
    TYPE=”text” por TYPE=”password”:
  • CNAD
    CAMPO DE COMENTARIOS
    Si lo que queremos es que el usuario escriba sus comentarios o que introduzca un texto largo, utilizaremos la siguiente etiqueta:
    <TEXTAREA NAME="nombre del elemento" ROWS="número de filas" COLS="número de columnas"></TEXTAREA>
  • CNAD
    BOTÓN DE ENVÍO
    Es importante al menos crear un botón para que el usuario envíe el formulario. La etiqueta sería la siguiente:
    <INPUT TYPE="SUBMIT" VALUE="ENVIAR">
  • <HTML>
    <AHEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=”40”>
    <BR>
    <BR>
    <BR>
    EXPRESE UN COMENTARIO RESPECTO A LA PÁGINA<TEXTAREA NAME="QUE LE PARECIO LA PÁGINA" ROWS="10" COLS="30"></TEXTAREA>
    <BR>
    <BR>
    <BR>
    <INPUT TYPE="SUBMIT" VALUE="ENVIAR">
    </FORM>
    </BODY>
    </HTML>
  • CNAD
    BOTÓN DE BORRADO
    Aunque no es necesario, si es habitual y recomendable incluir además un botón de borrado de los datos por si el usuario se ha equivocado al escribirlos.
     
    Para ello utilizamos la etiqueta:
     
    <INPUT TYPE="reset" VALUE="BORRAR">
  • <HTML>
    <AHEAD>
    <TITLE>FORMULARIOS</TITLE>
    </HEAD>
    <BODY>
    <FORM>
    INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=”40”>
    <BR>
    <BR>
    <BR>
    EXPRESE UN COMENTARIO RESPECTO A LA PÁGINA<TEXTAREA NAME="QUE LE PARECIO LA PÁGINA" ROWS="10" COLS="30"></TEXTAREA>
    <BR>
    <BR>
    <BR>
    <INPUT TYPE="SUBMIT" VALUE="ENVIAR">
    <INPUT TYPE="RESET" VALUE="BORRAR">
    </FORM>
    </BODY>
    </HTML>
  • Gracias por su atención