TALLER DE HTML
-
Upload
dante-donovan -
Category
Documents
-
view
37 -
download
1
description
Transcript of TALLER DE HTML
![Page 1: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/1.jpg)
TALLER DE HTML
Ing Adrian Espinosa
![Page 2: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/2.jpg)
¿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.
![Page 3: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/3.jpg)
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.– <xxx> Inicio de una etiqueta.– </xxx> Cierre de una etiqueta.
![Page 4: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/4.jpg)
Continuación:
• Todo el documento debe estar entre las etiquetas <HTML> Y </HTML>.
• 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.
![Page 5: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/5.jpg)
Continuación:
• La etiqueta del encabezamiento se trabajará de la siguiente manera:– <HEAD>Texto</HEAD>
• La etiqueta del cuerpo será: – <BODY>Texto</BODY>
• La etiqueta del título será:– <TITLE>Texto</TITLE>
![Page 6: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/6.jpg)
Continuación:
• La estructura básica de las partes de una página Web son:
<HTML>
<HEAD><TITLE>título </TITLE></HEAD>
<BODY>Es la información que mostrará la página al usuario </BODY>
</HTML>
![Page 7: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/7.jpg)
FORMATO DEL TEXTO
• Podemos poner color al fondo utilizando la siguiente instrucción:– <BODY BGCOLOR=“xxyyzz”>
• 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”.
![Page 8: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/8.jpg)
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:
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.
![Page 9: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/9.jpg)
Continuación:
• Los colores primarios son:#FF0000 rojo
#00FF00 verde
#0000FF azul
• Otros colores son:#FFFFFF blanco
#000000 negro
#FFFF00 amarillo
![Page 10: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/10.jpg)
Continuación:
• Otras instrucciones:– Para definir párrafos: <P>Texto</P>– Línea en blanco: <BR>Texto</BR>– Centrar texto: <CENTER>Texto </CENTER>– Línea horizontal: <HR>Texto</HR>
• Para el color del texto utiliza el comando:– <FONT COLOR=“#xxyyzz”>Texto</FONT>
• Debemos recordar que estas instrucciones hay que desactivarlas.
![Page 11: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/11.jpg)
Continuación:
• Tamaño de letra:– <H1>Texto</H1>– <H2>Texto</H2>– <H3>Texto</H3>– <H4>Texto</H4>– <H5>Texto</H5>– <H6>Texto</H6>
• Aspecto de letra:– <b>Texto</b> negrilla– <strong>Texto</strong>– <strike>Texto</strike>– <i>Texto</i> cursiva– <sup>Texto
</sup>superíndice– <sub>Texto</sub>subíndice
![Page 12: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/12.jpg)
Ejemplo:
< 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 >
NegritaNegrita
< i > Cursiva < /i >< em > Cursiva < /em >
CursivaCursiva
< strike > Tachada < /strike >
Tachada< sup > Superíndice < /sup
>NormalSuperíndice
< kbd > Máquina < /kbd > Máquina < sub > subíndice < /sub > Normalsubíndice
Tabla 2
![Page 13: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/13.jpg)
Continuación:
• Caracteres especialesá á
é é
í í
ó ó
ú ú
Á Á
É É
Í ĺ
Ó Ó
Ú Ú
• Otros códigosñ ñ
Ñ Ñ
ü ü
&Uumi; Ü
¿ ¿
¡ ¡
![Page 14: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/14.jpg)
Continuación:
• Movimiento – Puede dar movimiento al texto, gráficos
y otros.– La instrucción a usar es la siguiente:
• <marquee></marquee> (instucción básica)• <marquee scrolldelay=n></marquee>
– Establece el númeo de milisegundos entre cada “scroll”
» Scrolldelay=“200”» Scrolldelay=“100”» Scrolldelay=“5”
![Page 15: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/15.jpg)
Continuación:
• <marquee scrollamount=n></marquee>– scrollamount=“1”– scrollamount=“5”– scrollamount=“10”– scrollamount=“50”– scrollamount=“100”
• <marqueeloop=n></marquee>• <blink><marquee><</marquee></blink>
![Page 16: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/16.jpg)
LISTAS
• Listas desordenadas (unordered list) – Útiles para crear una lista de asuntos o
cosas que no tienen un orden.• Instrucciones a utilizar:
<UL><LI><LI></UL>
» <LI> Esta instrucción se repite tantas veces como sea
necesario, hasta terminar la lista.
![Page 17: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/17.jpg)
Continuación:
• Listas ordenadas (ordered lists)
• Utilizadas para mostrar información en un orden. El resultado aparecerá automáticamente enumerado.– Instrucciones a utilizar:
<OL>
<LI>
<LI>
</OL>
![Page 18: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/18.jpg)
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.– <DT> (definition
term)
• Definición del término.– <DD> (definition
definition)
• Instrucción a utilizar:<DL>
<DT>
<DD>
<DT>
<DD>
</DL>*<DT> Y <DL> Se
repetirán tantas veces como sea necesario.
![Page 19: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/19.jpg)
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:– <A HREF=“ejercicio2.html”>Pulse aquí para
ir a ejercicio1</A>
![Page 20: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/20.jpg)
Continuación:
– Enlace con una dirección de Internet:• <A HREF=www.endi.com>Periódico El Nuevo
Día</A>
– Enlace con una dirección de correo electrónico:
• <A HREF=MAILTO:“[email protected]”> Envía un mensaje a la conferenciante</A>
– Puede utilizar una imagen, gráfico o foto como enlace.
– Enlace utilizando una imagen:• <A HREF=“ejercicio3.html”><IMG SRC=“nombre del
gráfico y extensión”></A>
![Page 21: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/21.jpg)
TABLAS
• Elementos de una tabla
<TR></TR> Fila de una tabla.
<TD></TD> Celda de data.
<TH></TH> Usado para los títulos de las columnas. (Básicamente hace
la misma función de fila.)
![Page 22: TALLER DE HTML](https://reader030.fdocumento.com/reader030/viewer/2022032612/568130b4550346895d96cd90/html5/thumbnails/22.jpg)
Continuación:
• Tabla básica:<TABLE> Habre la instrucción de tabla.<TR> Comenzar una fila en la tabla.<TD> Habre una celda de data.
(aquí puede entrar su texto, gráfico, foto, enlace, etc.)
</TD> Cierra la celda de data.</TR> Cierra la fila.</TABLE> Cierra la tabla.