1 Docente: Jineth HurtadoTALLER DE HTML Docente: Jineth Hurtado
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.
4 Continuación: Todo el documento debe estar entre las etiquetas Y . 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: Texto La etiqueta del cuerpo será: Texto La etiqueta del título será:
6 Continuación: La estructura básica de las partes de una página Web son:
7 FORMATO DEL TEXTO Podemos poner color al fondo utilizando la siguiente instrucción: 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: Coloresxx 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: 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: Otros colores son:#FF0000 rojo #00FF00 verde #0000FF azul Otros colores son: #FFFFFF blanco # negro #FFFF00 amarillo
10 Continuación: Otras instrucciones:Para definir párrafos: Texto
Texto Centrar texto:
Texto Para el color del texto utiliza el comando: Texto Debemos recordar que estas instrucciones hay que desactivarlas.
11 Continuación: Aspecto de letra: Tamaño de letra:Texto negrilla Texto Texto Texto cursiva Texto superíndice Textosubíndice Tamaño de letra: Texto
Texto
Texto
Texto
Texto
Texto
12 Ejemplo: El mayor Tamaño 2 Tabla 1 Tabla 2 Tamaño 3< H1 > El mayor < /H1 > El mayor < H4 > Tamaño 4 < /H4 > Tamaño 4 < H2 > Tamaño 2 < /H2 > Tamaño 2 < H5 > Tamaño 5 < /H5 > Tamaño 5 < H3 > Tamaño 3 < /H3 > Tamaño 3 < H6 > Tamaño 6 < /H6 > Tamaño 6 Tabla 1 < b > Negrita < /b > < strong > Negrita < /strong > Negrita Negrita < i > Cursiva < /i > < em > Cursiva < /em > Cursiva Cursiva < strike > Tachada < /strike > Tachada < sup > Superíndice < /sup > NormalSuperíndice < kbd > Máquina < /kbd > Máquina < sub > subíndice < /sub > Normalsubíndice Tabla 2
13 Continuación: Otros códigos ñ ñ Ñ Ñ ü ü &Uumi; ÜCaracteres especiales á á é é í í ó ó ú ú Á Á É É Í ĺ Ó Ó Ú Ú Otros códigos ñ ñ Ñ Ñ ü ü &Uumi; Ü ¿ ¿ ¡ ¡
14 Continuación: MovimientoPuede dar movimiento al texto, gráficos y otros. La instrucción a usar es la siguiente: (instucción básica) Establece el númeo de milisegundos entre cada “scroll” Scrolldelay=“200” Scrolldelay=“100” Scrolldelay=“5”
15 Continuación:
16 LISTAS Listas desordenadas (unordered list)Útiles para crear una lista de asuntos o cosas que no tienen un orden. Instrucciones a utilizar:
17 Continuación: Listas ordenadas (ordered lists)Utilizadas para mostrar información en un orden. El resultado aparecerá automáticamente enumerado. Instrucciones a utilizar:
18 Continuación: Listas de definiciónApropiadas para glosarios, definiciones o términos Cada renglón consiste de dos pates: Término se ha de definir. *
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: Pulse aquí para ir a ejercicio1
20 Continuación: Enlace con una dirección de Internet:Periódico El Nuevo Día Enlace con una dirección de correo electrónico: Puede utilizar una imagen, gráfico o foto como enlace. Enlace utilizando una imagen:
21 TABLAS Celda de data. Elementos de una tabla
22 Continuación: Tabla básica: Habre la instrucción de tabla.
Cierra la tabla. Comenzar una fila en la tabla. Cierra la fila. Habre una celda de data. (aquí puede entrar su texto, gráfico, foto, enlace, etc.) Cierra la celda de data.