Lenguaje HTML

LENGUAJE HTML
HTML (HyperText Markup Language) es un lenguaje de programación muy sencillo que permite
describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con
inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la
estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones,
citas, etc.) así como los diferentes efectos que se quieren dar (especificar los lugares del
documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la
presentación final de dicho hipertexto se realice por un programa especializado como Internet
Explorer.
ESTRUCTURA DE UN DOCUMENTO HTML La estructura básica de un documento HTML queda de la

forma siguiente: <HTML> <HEAD> <TITLE> Título </TITLE> </HEAD> <BODY> Texto del
documento, menciones a gráficos, enlaces, etc. </BODY> </HTML>
<HTML> </HTML>: Indica el inicio y final de un documento HTML
<HEAD> </HEAD>: Contiene la información general del documento. Esta es presentada en el titulo
de la ventana del Explorador.
<TITLE> </TITLE>: Establece la información que desplegará en la barra de títulos de la ventana del
Explorador.
<BODY> </BODY>: En esta sección se realiza el cuerpo del documento que interactúa con el
usuario, por ejemplo: Links, Nombre de imágenes, listas, sonidos, etc.
Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial 
ETIQUETAS
Estas marcas serán fragmentos de texto destacado de una forma especial que permiten la
definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como
las distintas estructuras del lenguaje. Una etiqueta será un texto incluido entre los símbolos menor
que < y mayor que >. El texto incluido dentro de los símbolos será explicativo de la utilidad de la
etiqueta. También es conocida como Cabecera Base. Formato: <ATRIBUTO> Etiqueta
</ATRIBUTO> Ejemplo: <B>Texto que será en negrita</B>. <U>Texto que será subrayado </U>.
<i>Texto que será en cursiva </i>.
Obtendremos: Texto que será en negrita Texto que será subrayado Texto que será en cursiva
También existen otros atributos, tales como:
<P> párrafo
<BR> salto de línea
<IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin
afectar a otros elementos.
Ejemplos:
1.- Escribir el siguiente código <B> Mi primera Etiqueta </B> <B> Mi Segunda Etiqueta </B>
Obtendremos: Mi primera Etiqueta Mi Segunda Etiqueta
Entonces para obtener una salida de la siguiente manera: Mi primera Etiqueta Mi Segunda
Etiqueta
Se escribe el siguiente código: <B> Mi primera Etiqueta </B> <BR> <B> Mi Segunda Etiqueta </B>
2.- Para obtener la siguiente salida:
Se escribe el siguiente código <HTML> <HEAD> <TITLE> Pagina de Prueba </TITLE> </HEAD>
<BODY> <B> MI PRIMER BLOQUE </B> <BR> Mi Primera Etiqueta <BR> Mi Segunda Etiqueta
<BR> Mi Tercera Etiqueta </P>
<B> MI SEGUNDO BLOQUE</B> <BR> Mi Cuarta Etiqueta <BR> Mi Quinta Etiqueta </BODY>
</HTML>
Este código se puede realizar desde el accesorio de Windows que se llama “Bloc de Notas” o desde
cualquier otro editor que permita trabajar con códigos HTML.
Después de haber escrito este código, deberá guardar el archivo con el nombre que sea pero con
extensión htm. Ejemplo: Datos.htm
Resuelva el siguiente cuestionario en su cuaderno.
1.- ¿Qué es HTML?
2.- ¿Para qué se utiliza HEAD?
3.- ¿Para qué se utiliza BODY?
4.- ¿Para qué se utiliza TITLE? 5.- ¿Qué es una Etiqueta?
6.- ¿Escriba el nombre de 2 atributos que se pueden aplicar a una Etiqueta?
7.- ¿Cómo se debe guardar un documento Html?
ATRIBUTOS DE BODY
Como ya sabemos esta instrucción indica el inicio del documento que se desplegará en el
Explorador. Los atributos que más se utilizan son los siguientes: • TEXT • BGCOLOR •
BACKGROUND
TEXT: se utiliza para establecer el color que se mostrara en el Explorador. Formato: TEXT = color en
inglés Ejemplo: <BODY TEXT = Red>
BGCOLOR: se utiliza para establecer el color de fondo para el documento. Formato: BGCOLOR =
color en inglés Ejemplo: <BODY BGCOLOR = green>
Tabla de colores que se pueden utilizar:
Color Predefinido Muestra Color Predefinido Muestra black Negro olive oliva teal Teal red Rojo
blue Azul maroon Marron Navy azul marino gray gris lime Lima fuchsia fucsia white Blanco green
verde purple púrpura silver plata yellow amarillo aqua Agua
BACKGROUND: se utiliza para establecer la imagen de fondo para el documento. Esta imagen debe
estar dirrecionada a un sitio específico o ruta en una unidad de disco. Formato: <BODY
BACKGROUND = URL o ruta>
Ejemplos: <BODY BACKGROUND = http://www.digisigns.net/images/computadoras.gif> <BODY
BACKGROUND = "computadoras.gif">
<HR> Regla Horizontal
Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamaño
determinable. Se asemejará al salto de página dentro de un documento. Si no se especifican
atributos dibujará una línea que ocupe el ancho de la pantalla del navegador e introduciendo una
separación con el texto anterior y siguiente, equivalente a cambio de párrafo. No es necesaria la
etiqueta de fin </HR>. Con los atributos podemos especificar su forma y tamaño, esto atributos
son: <HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n>
ALIGN = LEFT, RIGTH ó CENTER: Indicará la forma en la que se alineará la regla en el caso de no
ocupar todo el ancho de la pantalla del navegador, a la izquierda, derecha o centrada. NOSHADE:
No muestra la sombra de la barra, evitando el efecto en tres dimensiones.
SIZE = n: Indicará la altura de la regla en puntos de la pantalla.
WIDTH = n ó n%: Especificará el ancho de la regla, se puede especificar en tanto por ciento del
ancho de la ventana <HR WIDTH = 50%> o en valor absoluto <HR WIDTH = 75> en puntos de la
pantalla. Ejemplos:
1.- Mostrará una línea que ocupa todo el ancho disponible y de altura 1 con sombra. <HR>
2.- Mostrará un línea que ocupa todo el ancho disponible, es de 5 de alto y no tiene sombra ni
efecto dimensional <HR SIZE=5 NOSHADE>
3.- Mostrará un línea que ocupa el cincuenta por ciento del ancho disponible, es de 5 de alto y está
alineada a la izquierda <HR SIZE=5 WIDTH=50% ALIGN=LEFT>
4.- Escribir lo siguiente:
<HTML> <HEAD> <TITLE> Dispositivos Periféricos </TITLE> </HEAD> <BODY> <B> DISPOSITIVOS
DE SALIDA </B> <BR> <HR> 1. Disquete: Dispositivo de almacenamiento más pequeño. <HR> 2.
Disco Duro: Dispositivo de almacenamiento más importante. </BODY> </HTML>
5.- Modificaremos las líneas anteriores: <HTML> <HEAD> <TITLE> Dispositivos Periféricos </TITLE>
</HEAD> <BODY> <B> DISPOSITIVOS DE SALIDA </B> <BR> <HR ALIGN=center SIZE=10
WIDTH=80%> 1. Disquete: Dispositivo de almacenamiento más pequeño. <HR ALIGN=left SIZE=15
WIDTH=40%> 2. Disco Duro: Dispositivo de almacenamiento más importante. </BODY> </HTML>

1.- ¿Cuál es la función del atributo TEXT?
2.- ¿Cuál es la función del atributo BGCOLOR?
3.- ¿Cuál es la función del atributo BACKGROUND?
4.- ¿Para qué se utiliza <HR>?
<PRE> </PRE>
Muestra una porción de texto en el que se respetan los saltos de línea, tabuladores y espacios en
blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se
mostrará tal y como se expresa en el fuente del documento HTML. Para mostrar este texto se
utiliza una fuente de espaciado fijo más pequeña que el texto normal. Ejemplo:
Modificaremos las líneas del ejemplo anterior:
<HTML> <HEAD> <TITLE> Dispositivos Periféricos </TITLE> </HEAD> <BODY> <PRE> DISPOSITIVOS
DE SALIDA <HR ALIGN=center SIZE=10 WIDTH=80%> 1. Disquete: Dispositivo de almacenamiento
más pequeño. 2. Disco Duro: Dispositivo de almacenamiento más importante. </PRE> <HR
NOSHADE> </BODY> </HTML>
<H1> .. <H6> CABECERAS DE TITULOS

En un documento HTML es posible definir seis tipos distintos de cabeceras que serán
normalmente el título del documento y los distintos subapartados que lo forman. La etiquetas que
definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. El texto indicado entre las
etiquetas de inicio y de fin será el afectado por las cabeceras. Los tamaños que se aplican son los
siguientes:
<HTML> <HEAD> <TITLE> Aplicación y Presentaciones </TITLE> </HEAD> <BODY> <H1> Manual de
HTML </H1> <H2> Manual de HTML </H2> <H3> Manual de HTML </H3> <H4> Manual de
HTML </H4> <H5> Manual de HTML </H5> <H6> Manual de HTML </H6> </BODY> </HTML>
<CENTER> </CENTER>
Alinea el texto al centro del área de navegación del Explorador.
Ejemplo: <HTML> <HEAD> <TITLE> Texto Centrado </TITLE> </HEAD> <BODY> <CENTER> <H1>
Este un ejemplo de como aparece el texto centrado en esta área. </H1> </CENTER> </BODY>
</HTML>
<FONT> </FONT>
Es una de las más utilizadas y frecuentes en el actual Web Publishing. En la sección BODY, hemos
visto que el atributo TEXT da un color único a todo el texto del documento. La marca FONT tiene,
en parte, una función similar, aunque es mucho más amplia y conceptualmente diversa.
El comando FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del
documento específicos. Por otro lado, mientras TEXT determina tan sólo en color del texto, la
marca FONT puede definir el tipo utilizado, así como su tamaño y color. Ejemplo: <FONT FACE =
"Arial” SIZE = 5 COLOR = red> Texto </FONT>
El atributo FACE = “arial” indica el tipo que se visualizará; SIZE = 5 el tamaño del tipo, que puede
estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7);
COLOR = red indica el color del texto.
Ejemplo: <HTML> <HEAD> <TITLE> Propiedades del Texto </TITLE> </HEAD> <BODY> <CENTER>
<FONT FACE="Algerian" SIZE=7 COLOR=black> HOLA MUNDO </FONT> <BR> <FONT
FACE="Arial" SIZE=4 COLOR=black> Hoy es un día hermoso!!! </FONT> </CENTER> </BODY>
</HTML>
1.- ¿Para qué se utiliza <PRE>?
2.- ¿Para que se utiliza <CENTER>?
3.- ¿Cuántos formatos se pueden utilizar en las cabeceras de títulos?
4.- ¿Para qué se utiliza <FONT>?
5.- ¿Para qué se utiliza el atributo FONT FACE?
6.- ¿Para qué se utiliza el atributo SIZE?
LISTA DE ELEMENTOS
Son hileras o sujetos que representan un argumento o contenido de tema. El lenguaje HTML
proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista de
puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de
formularios, tablas, etc. Independientemente el tipo de lista que se utilice, deben ser
complementadas con la etiqueta <LI>. Las listas pueden ser: <UL>, <OL>
<UL>: Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se
especificará con el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierre
formará la lista. Con los elementos <LI> se indicarán cada uno de los componentes de la lista.
Ejemplo: <HTML> <HEAD> <TITLE> MANUALES 2005 </TITLE> </HEAD> <BODY> <CENTER> <H1>
<U> "Manuales de Computación" </U> </H1> </CENTER> <HR> <B> SECCION BASICOS </B> <UL>
<LI> 1ero. Básico (Intro/Windows/Word/Internet) <LI> 2do. Básico (Power/Excel/Algoritmos)
<LI> 3ero. Básico (Algoritmos/Pascal) </UL> <HR> </BODY> </HTML>
<OL>: Estas listas serán similares al caso anterior pero en este se usa un número para indicar el
orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos
alfabéticamente sino que los elementos guardan un orden que es el número que indexa la lista.
Con estas listas se pueden utilizar los siguientes atributos: • Start: Especifica el numero con el cual
se desea iniciar la lista ordenada. • Type: Establece el tipo de identificación que se utilizará en los
elementos listados, dependiendo de la siguiente tabla:
ATRIBUTO DEFINICIÓN EJEMPLO l (ele minúscula) Numérico 1,2,3,4,5, etc. a (a minúscula)
Alfabético Minúscula a,b,c,d,e, etc. A (A mayúscula) Alfabético Mayúscula A,B,C,D,E, etc. i (i
minúscula) Números Romanos Minúscula i,ii,iii,iv,v, etc. I (i mayúscula) Números Romanos
Mayúscula I,II,III,IV,V, etc.
Ejemplo: <HTML> <HEAD> <TITLE> MANUALES 2005 </TITLE> </HEAD> <BODY> <CENTER> <H1>
<U> "Manuales de Computación" </U> </H1> </CENTER> <HR> <B> SECCION BASICOS </B> <OL
start="5" Type="L"> <LI> 1ero. Básico (Intro/Windows/Word/Internet) <LI> 2do. Básico
(Power/Excel/Algoritmos) <LI> 3ero. Básico (Algoritmos/Pascal) </OL> <HR> </BODY> </HTML>

1.- ¿Qué es una lista de elementos?
2.- ¿Para qué se utiliza <UL>?
3.- ¿Para qué se utiliza <OL>?
4.- ¿Para qué se utiliza <LI>? 5.- ¿Para qué se utiliza Start?
6.- ¿Para qué se utiliza Type?
IMÁGENES
En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos
gráficos: GIF ó JPEG. El formato más extendido y practico es el GIF, todos los navegadores gráficos
de la Web soportan este formato, este formato, así mismo, utiliza algoritmos de compresión que
hacen que sus ficheros sean de corto tamaño y apropiados para su transmisión por la red. El
formato GIF es más recomendado para iconos, gráficas, ... y el formato JPEG es más útil para
imágenes reales como paisajes, personas, ...
<IMG> Esta etiqueta permite insertar una imagen en el documento. Utiliza los siguientes atributos:
Src Alt Align Border
Height Width Hspace Vspace
Src: especifica la ubicación del archivo. Utiliza el siguiente formato: <IMG SRC=”ruta”>
Alt: muestra un mensaje, en caso que la imagen no sea cargada correctamente en el explorador,
sin embargo, si la imagen es mostrada en el explorador, mostrará el mensaje en forma de
comentario. Utiliza el siguiente formato: <IMG SRC=”ruta” ALT=”mensaje”>
Ejemplo: <HTML> <HEAD> <TITLE> ROEDOR </TITLE> </HEAD> <BODY> <CENTER> <H1> <U>
"RATON" </U> </H1> </CENTER> <IMG SRC="raton.gif" ALT="Caricatura"> </BODY> </HTML>
Align: Alinea el texto que se muestra a la par de la imagen. Estas aplicaciones pueden ser:
APLICACIÓN ALINEACION Top Arriba Middle Al centro Bottom Abajo
Ejemplo: estructura para mostrar la imagen con el texto alineado hacia abajo. <HTML> <HEAD>
<TITLE> ROEDOR </TITLE> </HEAD> <BODY> <CENTER> <H1> <U> "RATON" </U> </H1>
</CENTER> <IMG SRC="raton.gif" ALT="Caricatura" ALIGN="bottom">Hola como Estás </BODY>
</HTML>
Border: presenta un borde en la imagen, cuando esta sea afectada por un hipervínculo. Border =
”tamaño”
Height: modifica el tamaño vertical original de la imagen. Height = ”tamaño”
Width: modifica el tamaño horizontal original de la imagen. Width = ”tamaño”
Hspace: define los espacios horizontales que separan una imagen de la otra. Hspace = “margen”
Vspace: indica la separación entre imágenes en forma vertical. Vspace = “margen”
Ejemplo: <HTML> <HEAD> <TITLE> ROEDOR </TITLE> </HEAD> <BODY> <CENTER> <H1> <U>
"RATONES" </U> </H1> </CENTER> <IMG SRC="raton.gif"> <IMG SRC="raton.gif" HEIGHT="100"
HSPACE="10"> <IMG SRC="raton.gif" HEIGHT="75" HSPACE="10"> <BR> <IMG SRC="raton.gif"
HEIGHT="75" VSPACE="10"> <IMG SRC="raton.gif" HEIGHT="100" HSPACE="10"> <IMG
SRC="raton.gif" HSPACE="10"> </BODY> </HTML>
MARQUEE (Marquesina) Se utiliza para desplazar un mensaje a través de la pantalla, con la
intención de captar la atención del usuario. Utiliza los siguientes atributos: Behavior Bgcolor
Direction Width
BEHAVIOR Este atributo define la forma de mostrar el texto. Los valores aceptados son: SCROLL,
SLIDE o ALTERNATE. El SCROLL (default) hace que cuando termine de desaparecer la última letra
aparecerá la primera letra nuevamente. Con SLIDE empieza a aparecer el texto y se para cuando
llega al margen opuesto. Con ALTERNATE se logra que el texto rebote entre ambos márgenes.
BGCOLOR Con este atributo se especifica el color del fondo de marco.
DIRECTION El texto puede correr hacia LEFT (default) o RIGHT.
WIDTH Es el ancho del marco, puede estar en píxeles o en % de la imagen total. Ejemplo: <HTML>
<HEAD> <TITLE> ROEDOR </TITLE> </HEAD> <BODY> <MARQUEE DIRECTION=Right
WIDTH="100%" BEHAVIOR=Alternate>
se mueve de izquierda a derecha y rebota entre ambos márgenes!!! </MARQUEE> <MARQUEE
BGCOLOR=lime WIDTH="50%"> se mueve de derecha a izquierda y vuelve aparecer donde
empezó!!! (fondo de color limón) </MARQUEE> <MARQUEE BGCOLOR=yellow WIDTH="75%"
BEHAVIOR=slide DIRECTION=right> se mueve de izquierda a derecha y se detiene!!! (fondo de
color amarillo) </MARQUEE> </BODY> </HTML>
1.- ¿Para que se utiliza IMG?
2.- ¿Para que se utiliza SRC?
3.- ¿Para que se utiliza BORDER?
4.- ¿Para que se utiliza MARQUEE?
5.- ¿Para qué se utiliza BEHAVIOR?
TABLAS
Es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
Para crear las tablas será necesario usar: TABLE, que significa, en inglés, tabla. Consta de
instrucción de inicio, <TABLE> e instrucción de fin, </TABLE>. Entre ambos debemos introducir
otros dos comandos que definirán la estructura de la tabla. Estos son:
TR (Table Row): nos permitirá insertar filas en la tabla. La tabla tendrá tantas filas como
apariciones de esta etiqueta haya entre <TABLE> y </TABLE>.
TD: El nombre Table Data (Datos de tabla), nos induce a pensar que su función será introducir
todos los datos que queramos en las celdas definidas de esta forma. Y así será, de hecho podemos
insertar cualquier elemento de HTML: imágenes, listas y texto formateado.
Atributos:
• Border: Permite indicar el borde que tendrá la tabla, por defecto es 0 (cero).
• Caption: Permite aplicar un titulo a la tabla.
• Align: Permite alinear a la izquierda, al centro o la derecha el contenido de una o mas celdas.
• Bgcolor: Permite aplicar color de fondo a una o mas celdas.
• Bordercolor: Permite aplicar un color al borde de la tabla.
• Background: Permite insertar una imagen de fondo en la tabla.
Ejercicio No. 1 Resuelva el siguiente cuestionario en su cuaderno.

1.- ¿Qué es una tabla?
2.- ¿Para que se utiliza TABLE?
3.- ¿Para que se utiliza TR?
4.- ¿Para que se utiliza TD?
5.- ¿Escriba el nombre de 3 atributos de tablas, cada uno con su función o definición?

Lenguaje HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lenguaje HTML

Enviado por

Direitos autorais:

Formatos disponíveis

LENGUAJE HTML

ESTRUCTURA DE UN DOCUMENTO HTML La estructura básica de un documento HTML queda de la

Resuelva el siguiente cuestionario en su cuaderno.

<H1> .. <H6> CABECERAS DE TITULOS

Resuelva el siguiente cuestionario en su cuaderno.

Ejercicio No. 1 Resuelva el siguiente cuestionario en su cuaderno.

Você também pode gostar