Acción |
Etiqueta (tag) |
Ejemplo / Nombre |
Inicio y fin del documento |
<HTML>…..</HTML> |
<HTML>
<BODY>
Página prueba
</BODY>
</HTML> |
Encabezado y título del documento |
<HEAD>…<TITLE>….</TITLE>….</HEAD> |
<HTML>
<HEAD>
<TITLE> Curso applets
</TITLE>
</HEAD>
<BODY>
Página prueba
</BODY>
</HTML> |
Declarar el cuerpo de la página. Entre el inicio y fin de esta instrucción se define el contenido de la página. Esta instrucción tiene parámetros opcionales que nos ayudan a definir la apariencia del documento. |
<BODY>……</BODY>
parámetros:
background = “archivo gráfico “
(se sugiere .jpg o .gif, con esta imagen se rellena el fondo de la página, si la imagen no cubre todo el fondo, la imagen se repite hasta rellenar todo el cuerpo de la página.
bgcolor = “código del color”
Color de fondo de la página, esta instrucción se ignora si se usa background.
text = "codigo de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.
link = "codigo de color"
Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul.
vlink = "codigo de color"
Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es purpura.
El codigo de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El codigo de color se antecede del símbolo #. Los dos primeros dígitos definen la tonalidad de rojo, los siguientes dos la tonalidad de verde y los últimos dos la tonalidad de azul.
#000000
Ejemplos :
#000000
#FF0000
#00FF00
#0000FF
#FFFFFF |
Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco |
|
<HTML>
<HEAD>
<TITLE> Curso applets
</TITLE>
</HEAD>
<BODY background = “Winnie.jpg” link = “#771100” vlink = “#00FF00”>
Página prueba
</BODY>
</HTML>
- En este ejemplo la imagen Winnie.jpg debe de estar en el mismo directorio en donde se encuentra grabado el archivo .html ya que no se especifica la ruta en la imagen. Este tipo de direccionamiento es relativo ya que la imagen .jpg se busca en relación al directorio en donde se encuentra el html que se está ejecutando.
- Cuando se especifica la ruta de la imagen, se dice que es un direccionamiento absoluto, el cual no es recomendado utilizar. Ejemplo con ruta absoluto: background =“c:\imagenes\winnie.jpg”.
- Para referenciar una imagen por medio de un URL se utiliza el direccionamiento absoluto de la siguiente forma: http://www.xxxx.xxxx/xxxx.jpeg
- Otra forma de definir el código de color es indicando directamente el color del que se trata, en caso de querer combinaciones de colores más complicados entonces si se usa el código de color en hexadecimal.
- bgcolor = “red” o vlink = “blue”
- Algunos de los colores definidos son: “Black”, “Green”, “Silver”, “Lime”, “Gray”, “Olive”, “White”, “Yellow”, “Maroon”, “Navy”, “Red”, “Blue”, “Purple”, “Teal”, “Fuchsia”, “Aqua”
|
Agregar comentarios a el código de html |
<!-- … --> |
Comments
<HTML>
<!--Esta página indica la forma en que se agregan comentarios en un código de html -->
<HEAD>
<TITLE> Curso applets
</TITLE>
</HEAD>
<BODY>
Página prueba
</BODY>
</HTML> |
Definir un párrafo |
<P align = “ “ > ……. </P>
parámetros:
align = “top”
el parámetro align permite alinear el texto dentro del párrafo, su valor puede ser: “left”, “center”, “right”, “justify”, “top”, “bottom”, “middle” |
<P align="JUSTIFY">
Los delfines son animales mamíferos que son muy inteligentes y tienen su lenguaje para comunicarse entre ellos. Se ha comprobado que niños con diversas discapacidades
mejoran ampliamente al estar en contacto con estos bellos animales...
</P> |
Utilizar estilo de encabezado definido |
<H#>…….</H>
Donde # es un número del 1 al 6. Entre mayor sea el número, el encabezado será más pequeño. |
Header
<HTML>
<BODY>
<H2>Mis principales pasatiempos son: </H2>
<OL>
<LI> Ir al cine
<LI> Ir al parque
<LI> Ir a pasear
</OL>
</BODY>
</HTML> |
Brincar una línea |
<BR> |
Break line |
Hacer texto en negritas |
<B>…</B> |
Bold
<B>Six Flags</B> |
Hacer texto en cursiva |
<I>…</I> |
Italics
<I> Letra con estilo cursivo </I> |
Subrayar texto |
<U>…</U> |
Underlined
</UL>
<B>Six Flags</B>
<UL>
i Este texto aparecerá en negrita y subrayado |
Hacer texto monoespaciado |
<TT>…</TT> |
Teletype
<TT> texto monoespaciado </TT> |
Hacer texto como subíndice |
<SUB>…</SUB> |
Subscript
<HTML>
<BODY>
X <SUB> 2 </SUB>
</BODY>
</HTML> |
Hacer texto como superíndice |
<SUP>…</SUP> |
Superscript
<HTML>
<BODY>
X <SUP> 2 </SUP>
</BODY>
</HTML>
|
Enfatizar un texto |
<EM>…</EM> |
Emphasize
<HTML>
<HEAD>
<TITLE> Página de Ejemplo</TITLE>
</HEAD>
<BODY>
<HR NOSHADE>
<CENTER><H2>Tipos de tags para estilos de texto</H2
<UL>
<LI><EM>Enfatizado</EM>
<LI><STRONG>Strong</STRONG>
<LI><BLINK>Blink</BLINK>
</UL>
</CENTER>
</BODY>
</HTML> |
Enfatizar fuertemente un texto |
<STRONG>…</STRONG> |
Strongly emphasized
<STRONG> Esta oración se muestra con un texto "FUERTEMENTE ENFATIZADO" </STRONG> |
Definir un texto como cita |
<CITE> … </CITE> |
Citation
<CITE> Este texto tiene estilo cite </CITE> |
Definir un texto como reporte de computadora |
<SAMP> … </SAMP> |
Sample computer output
<SAMP> Este texto tiene estilo samp </SAMP> |
Definir un texto preformateado |
<PRE> … </PRE> |
Preformatted text
<PRE> Este texto se verá así
respetando el alineado
que le estoy dando
</PRE> |
Centrar texto y/o imágenes |
<CENTER> … </CENTER> |
Center
<HTMLl>
<BODY>
<CENTER>
todo el texto o imagenes que ponga entre la instrucción center, se verá centrado en el cuerpo de la página.
</CENTER>
</BODY>
</HTML> |
Insertar una línea horizontal |
<HR size=… width=… align=… noshade>
parametros:
size = valor numérico ejemplo size = “1”
width = valor numérico ejemplo width = “3”
align =“left”
otros valores de alineación pueden ser: “center”, “right”, “justify”, “top”, “bottom”, “middle”
noshade (indica que la línea no tendrá sombra. |
Horizontal Ruler
<HTML>
<HEAD>
<TITLE> Tatiana 913199 </TITLE>
</HEAD>
<BODY>
<H1> Un encabezado H1</H1>
<H2> Un encabezado H2. </H2>
<H6> Un encabezado H6. </H6>
Esta es una regla horizontal.
<HR>
</BODY>
</HTML> |
Cambiar el tamaño, color o estilo de la letra del texto |
<FONT size=... color=… face=…> … </FONT>
size = valor numérico ejemplo size = “2” indica el tamaño de la letra, entre mayor sea el número, mayor es el tamaño de la letra.
face = “arial”, indica el nombre del tipo de letra |
Font change
<HTML>
<BODY>
<FONT face="arial" size=”2”>
este es un tipo de letra definido para este texto
</FONT>
OTRO EJEMPLO:
<FONT COLOR= "RED"> Esta oración tiene la letra en color rojo. </FONT> |
Definir una liga a otra página |
<A href=…> … </A> |
Anchor: hyper-reference
<A href="Liga.html">Delfinario</A> |
Definir una liga para envío de correo |
<A href=”mailto:xxxx@xxxx.com”> … </A> |
Anchor: mail to
<HTML>
<BODY>
<TT> texto monoespaciado </TT>
<CENTER>
<A HREF="MAILTO:luisa.lankenau@itesm.mx">Luisa Lankenau </A>
<BR>
</BODY>
</HTML> |
Definir una liga a otro lugar dentro de la página |
<A href=…#…> … </A> y
<A name=…> … </A>
parametros:
- name = nombre de la etiqueta o sección a donde se hará una liga (ejemplo: name = “seccion1”)
|
Anchor: named bookmark
Para hacer un salto dentro de la misma página:
<P>Para hacer un salto dentro de la misma pagina <A href="Ejercicio.html#algo">Ir al inicio</A></P>
al inicio de la misma página debe de estar la siguiente etiqueta:
<HTML>
<BODY>
<A name="algo"><h5>Principales parques de diversiones</H5></A><BR>
.
.
.
|
Insertar una imagen dentro de la página |
<IMG src=… align=… width=… height=… alt=… border=…>
parametros:
src = “fuente de la imagen”
align = “alineación de la imagen”
width = “ancho de la imagen en pixels”
height = “alto de la imagen en pixels”
alt = “cuando el apuntador pase sobre la imagen se desplegará este texto” , puede ser una descripción de la imagen
border = “ancho del borde o marco de la imagen en pixels” |
Image
<HTML>
<HEAD>
<TITLE> pagina con imagen </TITLE>
</HEAD>
<BODY>
<CENTER><H2>Mi personaje favorito de Disney es</H2><CENTER>
<IMG SRC="winnie pooh.gif" border = 5 >
<HR NOSHADE>
</BODY>
</HTML> |
Definir una lista sin orden |
<UL>
<LI>
<LI>…
</UL>
<LI> Indica cada elemento de la lista |
Unordered list
<HTML>
<BODY>
Principales atracciones de los parques:<br>
<B>Xel-ha</B>
<UL>
<LI>Playa
<LI>Snuba
<LI><A href="Liga.html">Delfinario</A>
</UL>
</BODY>
</HTML>
i En este ejemplo se muestra una lista no ordenada en donde uno de los elementos es una liga a otra página de html. |
Definir una lista ordenada |
<OL>
<LI>
<LI>…
</OL>
<LI> Indica cada elemento de la lista |
Ordered list
<HTML>
<BODY>
<H2>Mis principales pasatiempos son: </H2>
<OL>
<LI> Ir al cine
<LI> Ir al parque
<LI> Ir a pasear
</OL>
</BODY>
</HTML> |
Definir una tabla |
<TABLE border=… align=… bgcolor=…>
<caption align=…> … </caption>
<TR align=… bgcolor=…> <TH> … </TH> <TH> … </TH> </TR>
<TR align=… bgcolor=…> <TD> … </TD> <TD> … </TD> </TR>
</TABLE>
<TR> Para definir renglones en la tabla
<TD> Para definir columnas en la tabla
<TH> Para definir encabezados en la tabla
parametros:
border =”ancho del borde o marco de la imagen en pixels”
align = “alineación de la imagen” , puede ser “center”, “right”, “justify”, “top”, “bottom”, “middle”
bgcolor = “código de color”
caption align = “alineación del título de la tabla” , puede ser : “center”, “right”, “justify”, “top”, “bottom”, “middle”
|
Table
Ejemplo de una tabla con dos renglones
<HTML>
<BODY>
<TABLE border align="center">
<caption align=center>Tabla 1.1 Parques</caption>
<TR>
<TD align = "center" colspan = 4 bgcolor="white"><FONT color="black" size=4><b>Parques de diversiones</b></FONTt>
</TD>
</TR>
<TR>
<TD></TD>
<TD bgcolor="white"><font color="black" size=4><b>País</b></font></TD>
<TD bgcolor="white"><font color="black" size=4><b>Ir a...</b></font></TD>
<TD bgcolor="white"><font color="black" size=4><b>Costo</b></font></TD>
</TR>
</TABLE>
</BODY>
</HTML>
i País en esta palabra (País), se utilizan caracteres especiales para poner el acento en este caso para el acento es í donde la i es la vocal que se acentúa. Si fuera otra vocal, se cambia la i por la otra vocal. |
