Scribd
Cargar
8 vistas22 páginas

Presntacion HTML

El documento es un taller sobre HTML, que explica su definición, estructura básica y uso de etiquetas para crear páginas web. Se detallan elementos como encabezados, cuerpos, colores, formatos de texto, listas, enlaces y tablas. Además, se incluyen ejemplos prácticos de código para ilustrar cada concepto.

Cargado por

Yised Viviana Giraldo Gómez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPS, PDF, TXT o lee en línea desde Scribd
8 vistas22 páginas

Presntacion HTML

El documento es un taller sobre HTML, que explica su definición, estructura básica y uso de etiquetas para crear páginas web. Se detallan elementos como encabezados, cuerpos, colores, formatos de texto, listas, enlaces y tablas. Además, se incluyen ejemplos prácticos de código para ilustrar cada concepto.

Cargado por

Yised Viviana Giraldo Gómez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPS, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

TALLER DE HTML

Grado: Decimo
Julio 15 de 2010
Institución Educativa Tulio Ospina
Sede Francisco José de Caldas
¿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.
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.
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.
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>
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>
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”.
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:
0123456789A BCDEF
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.
Continuación:
• Los colores primarios son:
#FF0000 rojo
#00FF00 verde
#0000FF azul
• Otros colores son:
#FFFFFF blanco
#000000 negro
#FFFF00 amarillo
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.
Continuación:

• Tamaño de letra: • Aspecto de letra:


– <H1>Texto</H1> – <b>Texto</b> negrilla
– <H2>Texto</H2> – <strong>Texto</strong>
– <H3>Texto</H3> – <strike>Texto</strike>
– <H4>Texto</H4> – <i>Texto</i> cursiva
– <H5>Texto</H5> – <sup>Texto
– <H6>Texto</H6> </sup>superíndice
– <sub>Texto</sub>subíndice
Ejemplo:
< H1 > El mayor < /H1 > El mayor < H4 > Tamaño 4 < /H4
>
Tamaño 4

Tamaño 2 < H5 > Tamaño 5 < /H5


< H2 > Tamaño 2 < /H2 > Tamaño 5
>

< H6 > Tamaño 6 < /H6


< H3 > Tamaño 3 < /H3 > Tamaño 3 Tamaño 6
>

Tabla 1
< b > Negrita < /b >
Negrita < i > Cursiva < /i > Cursiva
< strong > Negrita <
Negrita < em > Cursiva < /em > Cursiva
/strong >

< strike > Tachada < < sup > Superíndice < /sup
Tachada NormalSuperíndice
/strike > >

< kbd > Máquina < /kbd > Máquina < sub > subíndice < /sub > Normalsubíndice

Tabla 2
Continuación:
• Caracteres especiales • Otros códigos
&aacute; á
&eacute; é
&ntilde; ñ
&iacute; í &Ntilde; Ñ
&oacute; ó &uuml; ü
&uacute; ú
&Aacute; Á
&Uumi; Ü
&Eacute; É &#191; ¿
&Iacute; ĺ &#161; ¡
&Oacute; Ó
&Uacute; Ú
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”
Continuación:

• <marquee scrollamount=n></marquee>
– scrollamount=“1”
– scrollamount=“5”
– scrollamount=“10”
– scrollamount=“50”
– scrollamount=“100”
• <marqueeloop=n></marquee>
• <blink><marquee><</marquee></blink>
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.
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>
Continuación:
• Listas de definición • Instrucción a
• Apropiadas para utilizar:
glosarios, <DL>
definiciones o <DT>
términos <DD>
– Cada renglón consiste <DT>
de dos pates: <DD>
• Término se ha de </DL>
definir. *<DT> Y <DL> Se
– <DT> (definition repetirán tantas
term) veces como sea
• Definición del término. necesario.
– <DD> (definition
definition)
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>
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>
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.)
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.

También podría gustarte