TALLER DE HTML

1
TALLER DE HTML

• Dra. María G. Rosa-Rosario

2
QUE ES HTML?

• Las siglas HTML se refieren a
• HyperText Markup Language
• Es uno de los lenguajes más utilizados en el Web
  Wide Web.
• Las páginas de Internet están escritas en este
  lenguaje.
• Le brinda al autor la oportunidad de integrar
  texto, fotos, sonidos y enlaces en un solo lugar.

3
UNA PÁGINA BÁSICA

• El lenguaje trabaja a base de etiquetas.
• La información que aparece dentro de estas estará
  influenciada por las mismas.
• ltxxxgt Inicio de una etiqueta.
• lt/xxxgt Cierre de una etiqueta.

4
Continuación

• Todo el documento debe estar entre las etiquetas
  ltHTMLgt Y lt/HTMLgt.
• El documento está dividido en dos partes
  principales
• El encabezamiento
• En este hay información que no se ve en la
  pantalla principal.
• Este debe ser corto y descriptivo, ya que será lo
  que verán las personas cuando añadan la página a
  sus favoritos.

5
Continuación

• La etiqueta del encabezamiento se trabajará de la
  siguiente manera
• ltHEADgtTextolt/HEADgt
• La etiqueta del cuerpo será
• ltBODYgtTextolt/BODYgt
• La etiqueta del título será
• ltTITLEgtTextolt/TITLEgt

6
Continuación

• La estructura básica de las partes de una página
  Web son
• ltHTMLgt
• ltHEADgtltTITLEgttítulo lt/TITLEgtlt/HEADgt
• ltBODYgtEs la información que mostrará la página al
  usuario lt/BODYgt
• lt/HTMLgt

7
FORMATO DEL TEXTO

• Podemos poner color al fondo utilizando la
  siguiente instrucción
• ltBODY BGCOLORxxyyzzgt
• Indica que lleva tres pares de valores que
  corresponden a R (rojo), G (verde), B (azul)
• Estos pueden tomar valores desde 00 a FF, si se
  combinan se obtendrán distintos colores.
• Ej. FAB894 anaranjado
• FA rojo, B8 verde y 94 azul.
• Para obtener BLANCO sería FFFFFF, el Negro
  000000 Y ROJO FF0000.

8
Continuación

• Colores
• xx es un número indicativo de la cantidad de
  color rojo.
• YY es un número indicativo de la cantidad de
  color verde.
• ZZ es un número indicativo de la cantidad de
  color azul.
• Los números están representados en numeración
  hexadecimal, esta numeración se compone de 16
  dígitos
• 0 1 2 3 4 5 6 7 8 9 A B C D E F
• Donde el número menor es 00 y el mayor es FF.
• Ejemplo el número rojo es el FF0000, debido a
  que tiene el máximo de rojo y cero de los otros
  dos colores.

9
Continuación

• Los colores primarios son
• FF0000 rojo
• 00FF00 verde
• 0000FF azul
• Otros colores son
• FFFFFF blanco
• 000000 negro
• FFFF00 amarillo

10
Continuación

• Otras instrucciones
• Para definir párrafos ltPgtTextolt/Pgt
• Línea en blanco ltBRgtTextolt/BRgt
• Centrar texto ltCENTERgtTexto lt/CENTERgt
• Línea horizontal ltHRgtTextolt/HRgt
• Para el color del texto utiliza el comando
• ltFONT COLORxxyyzzgtTextolt/FONTgt
• Debemos recordar que estas instrucciones hay que
  desactivarlas.

11
Continuación

• Aspecto de letra
• ltbgtTextolt/bgt negrilla
• ltstronggtTextolt/stronggt
• ltstrikegtTextolt/strikegt
• ltigtTextolt/igt cursiva
• ltsupgtTexto lt/supgtsuperíndice
• ltsubgtTextolt/subgtsubíndice

• Tamaño de letra
• ltH1gtTextolt/H1gt
• ltH2gtTextolt/H2gt
• ltH3gtTextolt/H3gt
• ltH4gtTextolt/H4gt
• ltH5gtTextolt/H5gt
• ltH6gtTextolt/H6gt

12
Ejemplo
Tabla 1
Tabla 2
13
Continuación

• Caracteres especiales
• aacute á
• eacute é
• iacute í
• oacute ó
• uacute ú
• Aacute Á
• Eacute É
• Iacute l
• Oacute Ó
• Uacute Ú

• Otros códigos
• ntilde ñ
• Ntilde Ñ
• uuml ü
• Uumi Ü
• 191
• 161

14
Continuación

• Movimiento
• Puede dar movimiento al texto, gráficos y otros.
• La instrucción a usar es la siguiente
• ltmarqueegtlt/marqueegt (instucción básica)
• ltmarquee scrolldelayngtlt/marqueegt
• Establece el númeo de milisegundos entre cada
  scroll
• Scrolldelay200
• Scrolldelay100
• Scrolldelay5

15
Continuación

• ltmarquee scrollamountngtlt/marqueegt
• scrollamount1
• scrollamount5
• scrollamount10
• scrollamount50
• scrollamount100
• ltmarqueeloopngtlt/marqueegt
• ltblinkgtltmarqueegtltlt/marqueegtlt/blinkgt

16
LISTAS

• Listas desordenadas (unordered list)
• Útiles para crear una lista de asuntos o cosas
  que no tienen un orden.
• Instrucciones a utilizar
• ltULgt
• ltLIgt
• ltLIgt
• lt/ULgt
• ltLIgt Esta instrucción se repite tantas veces
  como sea necesario, hasta terminar la lista.

17
Continuación

• Listas ordenadas (ordered lists)
• Utilizadas para mostrar información en un orden.
  El resultado aparecerá automáticamente enumerado.
• Instrucciones a utilizar
• ltOLgt
• ltLIgt
• ltLIgt
• lt/OLgt

18
Continuación

• Listas de definición
• Apropiadas para glosarios, definiciones o
  términos
• Cada renglón consiste de dos pates
• Término se ha de definir.
• ltDTgt (definition term)
• Definición del término.
• ltDDgt (definition definition)

• Instrucción a utilizar
• ltDLgt
• ltDTgt
• ltDDgt
• ltDTgt
• ltDDgt
• lt/DLgt
• ltDTgt Y ltDLgt Se repetirán tantas veces como sea
  necesario.

19
ENLACES

• Para trabajar enlaces
• Es una forma de hacer que desde una página
  podamos acceder a otra página.
• Enlaces con otras páginas
• ltA HREFejercicio2.htmlgtPulse aquí para ir a
  ejercicio1lt/Agt

20
Continuación

• Enlace con una dirección de Internet
• ltA HREFwww.endi.comgtPeriódico El Nuevo Díalt/Agt
• Enlace con una dirección de correo electrónico
• ltA HREFMAILTOmrosa_at_aguadilla.inter.edugt Envía
  un mensaje a la conferenciantelt/Agt
• Puede utilizar una imagen, gráfico o foto como
  enlace.
• Enlace utilizando una imagen
• ltA HREFejercicio3.htmlgtltIMG SRCnombre del
  gráfico y extensióngtlt/Agt

21
TABLAS

• Elementos de una tabla

ltTRgtlt/TRgt Fila de una tabla.
ltTDgtlt/TDgt Celda de data.
ltTHgtlt/THgt Usado para los títulos de las columnas. (Básicamente hace la misma función de fila.)
22
Continuación

• Tabla básica
• ltTABLEgt Habre la instrucción de tabla.
• ltTRgt Comenzar una fila en la tabla.
• ltTDgt Habre una celda de data.
• (aquí puede entrar su texto, gráfico,
  foto, enlace, etc.)
• lt/TDgt Cierra la celda de data.
• lt/TRgt Cierra la fila.
• lt/TABLEgt Cierra la tabla.