ETIQUETAS BÁSICAS DE HTML
FORMACIÓN PARA EL TRABAJO II
<TITLE>… </TITLE>
Permite mostrar un texto en la barra de título del navegador.
❖ No tiene propiedades.
<TITLE>Mi sitio web</TITLE>
<BODY>… </BODY>
Permite mostrar el contenido de la página web, sus propiedades principales son:
❖ BGCOLOR que permite definir un color de fondo para la página. Su valor puede ser en inglés o hexadecimal.
❖ BACKGROUND que permite definir una imagen como fondo para la página.
<BODY>… </BODY>
Su sintaxis es:
<BODY BGCOLOR=“Green”>
<BODY BGCOLOR=“#008000”>
<BODY BACKGROUND =“ubicación/nombre.extension”>
ETIQUETAS DE TEXTO
FORMACIÓN PARA EL TRABAJO II
son:
<FONT>… </FONT>
Permite definir el formato del texto, sus propiedades
❖ FACE define el tipo de fuente.
❖ COLOR que permite definir un color un color de fuente.
❖ SIZE que permite definir el tamaño del texto (1-7).
<FONT FACE=“Arial” COLOR=“Gray” SIZE=5>
<Hn>… </Hn>
Marca el texto especificado como un título de nivel
entre 1 y 6, siendo 1 el nivel principal, sus propiedades
son:
❖ ALIGN especifica la alineación de la línea: left, right o center.
<H1 ALIGN=“Center”>
ESTILOS DE TEXTO
<B>…</B> Permite aplicar Negrita
<I>…</I> Permite aplicar Cursiva
<U>…</U> Permite aplicar Subrayado
<HR>
Inserta una línea horizontal. Si no se indica lo contrario, la línea ocupa todo el ancho de la pantalla. Sus propiedades son:
❖ SIZE: para el grosor de la línea (1 a 6). El valor por defecto es 2.
❖ ALIGN especifica la alineación de la línea: left, right o center.
❖ WIDTH define el ancho de la línea, en pixeles o porcentaje
❖ NOSHADE muestra una línea sólida, sin la apariencia tridimensional que utiliza por defecto.
<HR SIZE=3 ALIGN=“Left” WIDTH =150>
FORMATO ESPECIAL DE TEXTO
FORMACIÓN PARA EL TRABAJO II
<SUP> … </SUP>
Permite dar formato de superíndices a un texto; se utiliza en el manejo de potencias y exponentes:
3.1416 * r <SUP> 2 </SUP>
3.1416*r²
<SUB> … </SUB>
Permite dar formato de subíndices a un texto; se utiliza en el manejo de fórmulas químicas:
H<SUB> 2 </SUB>O
ETIQUETAS DE PÁRRAFO
FORMACIÓN PARA EL TRABAJO II
<P>… </P>
Permite colocar el texto en un párrafo, separado por un espacio en blanco antes y después, afecta a todo lo que se encuentre entre la etiqueta de apertura y la de cierre. Su propiedad es:
❖ ALIGN especifica la alineación de la línea: left, right, justify o center.
<P ALIGN=“Center”> Los grupos de Cuarto Semestre han respondido bien al trabajo en formato híbrido. </P>
<PRE>… </PRE>
Se utiliza para que el navegador interprete el texto escrito tal y como está, afectando al texto entre las etiquetas de apertura y cierre.
❖ No tiene propiedades
<PRE> Los grupos de Cuarto Semestre han respondido bien al trabajo en línea.
</PRE>
<BR>
Crea un salto de línea, sus características son:
❖ No tiene etiqueta de cierre.
❖ Por cada espacio entre líneas de texto o párrafo, debe colocarse una etiqueta.
ETIQUETAS DE LISTAS
FORMACIÓN PARA EL TRABAJO II
<OL>…</OL>
Permite listar elementos que pertenecen a un conjunto y tienen una jerarquía. La numeración de la lista puede incluir letras (A, a) o números (1, I, i), lo anterior se determina por la propiedad TYPE.
Su sintaxis es:
<OL TYPE=“A”>
<LI>Elemento Uno
<LI>Elemento Dos
<LI>Elemento Tres </OL>
<UL>…</UL>
Permite listar elementos que pertenecen a un conjunto sin orden de jerarquía. La numeración de la lista se hace mediante viñetas (disc, circle o square) que se indican con la propiedad TYPE.
Su sintaxis es:
<UL TYPE=“DISC”>
<LI>Elemento Uno
<LI>Elemento Dos
<LI>Elemento Tres
</UL>
LISTAS DE DEFINICIONES
<DL> … </DL> Crea una lista de definiciones.
<DT> … </DT> indica el término a definir.
<DD> … </DD>
contiene la definición.
LISTAS DE DEFINICIONES
Primera Lista
Abarca conceptos de Informática
Segunda Lista
Abarca conceptos de Física
LISTAS DE DEFINICIONES
Primera Lista
Abarca conceptos de Informática
Notarás que hay una ligera separación entre ambas listas, pero ambas aparecen en la misma página.
Segunda Lista
Abarca conceptos de Física
ETIQUETAS DE IMAGEN
FORMACIÓN PARA EL TRABAJO II
<IMG>
Permite insertar una imagen a la página, no tiene
etiqueta de cierre. Sus propiedades son:
❖ SRC indica la ubicación, nombre y extensión de la imagen.
❖ HEIGTH define el alto de la imagen (pixeles).
❖ WIDTH define el ancho de la imagen (pixeles).
❖ BORDER define un ancho de borde (0-5).
❖ ALT permite mostrar un texto al pasar el cursor sobre la imagen.
<IMG>
Sus propiedades son:
<IMG SRC=“imagen/f1.jgp” HEIGTH=150 WIDTH =150 BORDER=1 ALT =“Hola>
<CENTER>… </CENTER>
Permite centrar texto y/u objetos en la página web. No tiene propiedades, afecta a todo lo que se encuentre entre la etiqueta de apertura y la de cierre.
<CENTER>
<FONT FACE=“Arial” COLOR=“Gray” SIZE=5>Cuarto Semestre</FONT>
</CENTER>