Вы находитесь на странице: 1из 15

Gua HTML

1. Etiquetas de inicio y fin <html></html> Abre y cierra un documento HTML <head></head> Encabezado de la pgina - aqu se coloca titulo, metatags, e informacin para buscadores entre otras cosas. Est informacin no es visible. <body></body> Dentro de esta etiqueta va toda la parte visible de la pgina web.

2. Etiquetas del Encabezado <title></title> El ttulo de la pgina web.

3. Atributos de la etiqueta Body <body bgcolor=?> Configura el color de fondo de la pgina, usando el valor del cdigo de color hexadecimal.

<body text=?> Configura el color por defecto del texto, usando el valor del cdigo de color hexadecimal. <body link=?> Configura el color de las ligas, usando el valor del cdigo de color hexadecimal. <body vlink=?> Configura el color de las ligas visitadas, usando el valor del cdigo de color hexadecimal <body alink=?> Configura el color de las ligas al darle clic, usando el valor del cdigo hexadecimal. 4. Etiquetas HTML de Texto <pre></pre> Texto pre-formateado <hl></hl> Ttulo ms grande <h6></h6> Ttulo ms pequeo <b></b> Negritas

<u></u> Subrayado <i></i> Cursivas <tt></tt> Tipo mquina de escribir <cite></cite> Cita, en cursiva <em></em> Resalta una palabra, negrita o cursiva <strong></strong> Resalta una palabra o grupo de palabras <font face=?></font> Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <font size=?></font> Coloca tamao de letra, de 1 a 7 <font color=?></font> Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)

5. Ligas <a href="URL"></a> Hipervnculo <a href="mailto:EMAIL"></a> Hipervnculo mailto (para envo de correo) <a name="name"></a> Ancla en el mismo documento <a href="#name"></a> Liga hacia algn lugar dentro del mismo sitio

6. Formato y presentacin <p></p> Nuevo prrafo <p align=?> Alinea el prrafo hacia la izquierda, derecha o al centro <br> Inserta un interlineado suave. Crea otra lnea <blockquote> </blockquote>

7. Texto indentado de ambos lados <dl></dl> Lista de definiciones (glosario) <dt> Precede a cada trmino en definiciones <dd> Precede cada definicin <ol></ol> Lista ordenada <li></li> Entrada en una lista <ul></ul> Lista con vietas sin ordenar <div align=?> Para formato a porciones grandes del documento html, incluyendo hojas de estilo

8. Elementos Grficos <img src="name"> Incorpora una imagen <img src="name" align=?> Alinea la imagen: izquierda, derecha y centro <img src="name" border=?> 9. Determina el contorno de la imagen. Un valor 0 no tendr contorno <map></map> Mapa de imgenes <body background="URL o ruta de archivo"></body> Coloca la imagen como fondo de la pgina <hr> Linea horizontal <hr size=?> Tamao de una linea horizontal <hr width=?> Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hr noshade> Linea horizontal sin sombra

10. Tablas <table></table> Crea tabla <tr></tr> Crea filas en una tabla <td></td> Crea celda en una fila <th></th> Encabezado de tabla, texto normal, negrita y centrado

11. Atributos de Tablas <table border=#> Coloca contorno en las celdas de la tabla <table cellspacing=#> Espacio entre las celdas de una tabla <table cellpadding=#> Espacio entre el contorno de una celda y su contenido <table width=# or %> Ancho de la tabla, en pixeles o porcentaje del ancho de la pgina

<tr align=?> or <td align=?> Alineacin para las celdas, izquierda derecha, centro <tr valign=?> or <td valign=?> Alineacin vertical de las celdas, arriba, abajo,enmedio <td colspan=#> Expansin de una celda, en nmero de columnas <td rowspan=#> Expansin de una celda, en nmero de celdas <td nowrap> Texto contino dentro de una celda

12. Marcos (frames) <frameset></frameset> Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets <frameset rows="value,value"> Nmero de lineas en un frameset, usando pixeles o porcentaje de ancho <frameset cols="value,value"> Nmero de columnas en un frameset, usando pixeles o porcentaje de ancho

<frame> Frame singular dentro de un framset <noframes></noframes> Texto que aparecer en navegadores que no soportan frames

13. Atributos de Frames <frame src="URL"> Especifica que pgina html se muestra <frame name="name"> Nombra al frame para que sea identificado por otros frames y accesado <frame marginwidth=#> Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 <frame marginheight=#> Margen superior e inferior de un grame, igual o mayor a1 <frame scrolling=VALUE> Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto

<frame noresize> No permite al usuario modificar el tamao de un frame

14. Formas <form></form> Forma <select name="name"></select> Men desplegable <option> Opcin del men desplegable <textarea name="name" cols=40 rows=8></textarea> Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type="checkbox" name="name"> Crea un checkbox. <input type="radio" name="name" value="x"> Crea botn de radio. <input type=text name="name" size=20> Crea una opcin de texto para entrada de informacin o despliegue <input type="submit" value="name">

Crea botn de envo de forma tipo submit <input type="image" border=0 name="name" src="name.gif"> Crea botn de envo con imagen <input type="reset"> Crea botn de limpieza (reset). Vaca la forma 15. Otras Etiquetas HTML <EMBED SRC="url o ruta HEIGHT="50" WIDTH="130"> de archivo" VOLUME="50"

Incorpora sonido con panel de control en la pantalla. < object width="600" height="300"> <param name="movie" value="miarchivo.swf"> <embed src="miarchivo.swf" width="600" height="300"> </embed> </object> Para insertar una pelicula flash swf en html <!-- Este es un comentario --> Inserta comentarios no visibles en la pgina. < iframe src ="/mipagina.html"> ... </iframe> > Inserta un frame dentro de una pgina. Inline Frame. <script type="text/javascript">

document.write("<h2>bienvenido!</h2>") </script> Inserta un script dentro de una pgina html.

<span style="color:#00FFFF;"> </span> Aplica a un grupo de texto un estilo, por ejemplo font, tamao, color.

Ejemplos 1. Etiquetas con formato


Salida El texto en negritas. El texto en itlicas. El texto en formato teletipo. El en 2 tamaos ms grandes y en rojo. El tamao puede ser un valor absoluto en el rango 1..7. Utilizar la direccin de e-mail claudio@acm.org para contactarme. Etiquetas requeridas El <B>texto</B> en negritas. El <I>texto</I> en it&aacute;licas. El <TT>texto</TT> en formato teletipo.
El <FONT SIZE = +2 COLOR = "RED"> texto </FONT> en 2 tama&ntilde;os m&aacute;s grandes y en rojo. El tama&ntilde;o puede ser ...

texto

Utilizar la direcci&oacute;n de e-mail <ADDRESS> claudio@acm.org </ADDRESS> para contactarme.

2. Etiquetas de encabezamientos

Salida

Etiquetas requeridas <H1>Encabezado H1<\H1> <H3>Encabezado H3<\H3> <H6>Encabezado H6<\H6>

Encabezado H1
Encabezado H3
Encabezado H6

3. Etiquetas de formato lgico


Salida La siguiente es una cita. Representa un listado de computadora. Una secuencia decaracteres literales. Etiquetas requeridas La siguiente es <CITE>una cita</CITE>.> <CODE>Representa un listado de computadora.</CODE> Una secuencia de<SAMP> caracteres literales.</SAMP> Nota: <BLOCKQUOTE> Esta es una cita de alg&uacute;n texto.</BLOCKQUOTE> La siguiente es <DFN>una La siguiente es una definicin. definici&oacute;n.</DFN> El siguiente texto est enfatizado. El siguiente <EM> texto </EM> est&aacute; enfatizado. <KBD>Caracteres de teclado.</KBD> El siguiente <STRONG> texto </STRONG> est&aacute; fuertemente enfatizado. El siguiente <VAR> nombre </VAR> es una variable de programa.

Nota: Esta es una cita de algn texto.

Caracteres de teclado.

El siguiente texto est fuertemente enfatizado.

El siguiente nombre es una variable de programa.

4. Insercin de lneas
Salida Fin de la parte anterior. Nueva parte. Solo 40% de ancho. Nueva parte. Alto del ruler = 10. Nueva parte. Etiquetas requeridas Fin de la parte anterior. <HR> Nueva parte. Solo 40% de ancho. <HR WIDTH=40%> Nueva parte. Alto del ruler = 10. <HR SIZE=10> Nueva parte.

Вам также может понравиться