Chuleta HTML

Chuleta html 9/12/2012 By Israel Hernndez Reyes
Etiquetas sueltas sin atributos

Estilos fisicos de letras <b> negrita <i> cursiva <u> subrayado <s> utiliza un tipo de letra tachado <tt> utiliza tipo de letra no proporcional <H1>, <H2>, .<H6> Cabeceras. Sirven para dividir el texto en secciones <em> enfatiza el texto <strong> enfatizar aun ms <small> texto ms pequeo <big> texto an ms grande <blockquote> texto sangrado <pre> visualiza el texto de forma preformateada <sub> escribe como subndice <sup> escribe como superndice <!-definir un comentario ()
<fieldset> rectangulo enmarcando al texto <Legend> colocar legenda dentro del rectangulo <DIR> funciona como un tabulador
Etiquetas con atributos

<DIV> agrupar elementos y aplicar estilos Atributos: Id da nombre a la capa Style se establecen las propiedades Ejemplo: id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibi lity: visible; color:green; <HR> permite introducir una linea Atributos: Aling alineacin (left, right, center) Width ancho (numero o porcentaje %) Size alto (numero) Noshade eliminar sombreado Color color linea
<BODY> cuerpo del html Atributos: BACKGROUND="URL" BGCOLOR=#rrggbb BGPROPERTIES=fixed (hace que el fondo no se desplace solo en IE) TEXT=#rrggbb (color del texto dentro del body) LINK=#rrggbb (color enlace no visitado) VLINK=#rrggbb (colo enlace ya visitado) ALINK=#rrggbb (color enlace al pulsarlo) Margenes de una pagina: leftmargin="..px" topmargin="..px" rightmargin="..px" bottommargin="..px
Texto <FONT> sirve para indicar el tipo de letra, tamao y color Atributos <font size= > (definir tamao letra(indicar un tamao de 1 a 7)
(tamao relativo introduciendo + ---valor por defecto3----) <font color="#RRGGBB"> color del texto <font face=" "> tipo de fuente (arial, Times New Roman,etc)
<IMG> para generar una imagen(frmatos: JPEG, PNG, GIF) Atributos: src="imagen.gif" nombre del archivo o URL align="left / right / top / middle / bottom" alineacion con respecto al texto (tambien clear) alt="Texto explicativo" mensaje al pasar ratn sobre imagen(si imagen no carga) title=titulo Muestra informacin cuando el cursor se desplaza sobre imagen hspace=n n de pixeles entre imagen y texto(horizontal) vspace=n n de pixeles entre imagen y texto(vertical) width="n" ancho imagen(opcional) height="n" alto imagen(opcional) border= "n" ancho borde rodea imagen (Notas: 1. para centrar una imagen en una pagina <center> <img src="golden.jpg"> </center> 2. imagen como enlace a otra pgina. <A HREF="mipag2.html"><IMG SRC="hombre.gif"></A>)
Mapear imagen
1.
Las tags <map>.....</map>identifican que vamos a crear un mapa de imgenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa. 2. La tag <area> define las reas que vamos a poder activar en esa imagen. A esta tag le acompaan los siguientes atributos: o shape= Entre comillas estableceremos el tipo de rea a definir. Puede tratarse de rect (rectangular),poly (poligonal) o circle (circular). o Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del rea a activar. Estas coordenadas las podemos averiguar utilizando un programa de edicin de imgenes. En las reas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vrtices del rea. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio . o Href= Como ya sabe, indica la direccin, entre comillas, de la pgina web a la que accede si pinchamos en un rea determinada. Finalmente, debe saber que para que una imagen sea tratada como un mapa, adems de el cdigo anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb" USEMAP="#bebe1">
<MAP NAME="bebe1"> <AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza">
<AREA SHAPE=POLY COORDS="3,182,36,178, 44,165,60,169,66,184,62,196, 43,201,35,190,0,193,0,183" HREF="#" </MAP> ALT="Sonajero">
<BR> Sirve para dejar una lnea en blanco dentro de un prrafo Atributos: Clear para dejar un espacio en blanco entre la imagen y el texto (Ejemplo: <br clear =left > Busca el primer margen libre a la izquierda. <br clear = right> Busca el primer margen libre a la derecha. <br clear =all > Busca el primer margen libre a ambos lados. )
<A> para generar un enlace <A HREF="direccin"> <a name="identificador"> Atributos: <A HREF="URL">.....</A> saltar de un archivo a otro o de una web a otra
Ancla: para desplazarnos dentro de una pgina de gran tamao

<A NAME="arriba"><H1>Pgina de enlaces</H1></A> <A HREF="#abajo">Ir abajo</A> -- enlace donde pinchamos <br><br><br><br><br><br><br><br> <A NAME="abajo"><br></A> ----- a donde nos lleva al pinchar <A HREF="#arriba">Ir arriba</A> TARGET: afecta a las marcas de los enlaces de hipertexto <A> y <FORM>. Precisa el nombre de la zona que debe recibir el documento correspondiente al enlace (ejem: <A HREF="dossier.html" TARGET="zonadossier"> Ver el dossier </A> Debe de mostrar el documento dossier.html en el frame zonadossier) -- target se utiliza en el body no en el frame principal-Tres valores del target: 1. 2. 3.
target= _blank, _self, _top, _parent
Corresponde al nombre de un frame existente Valor que no corresponde a ninguno de los paneles existente Uno de los siguientes 4 valore _blank, crea una nueva ventana con el fin de mostrar el documento. La nueva ventana es un panel que no tiene nombre y no puede ser por tanto el destino de otro enlace de hipertexto. _self, indica que el documento se cargar en el mismo frame donde se encuentra el enlace de hipertexto. Se trata del valor por defecto cuando no se indica el atributo TARGET. _top, indica al browser que suprima todos los paneles existentes y visualice el documento de modo normal, es decir, la pgina se carga a pantalla completa, eliminando todos los frames que pudiera haber. _parent, El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si es que no hay un padre; es decir, indica al browser que visualice el documento ocupando toda la superficie de la zona en la que se ha visualizado el documento que contiene el enlace. Esta nocin slo tiene sentido cuando los diferentes niveles de paneles provienen del anidamiento de documentos y no del anidamiento de marcas <FRAMESET>.
Ejemplo: Darle un nombre al frame que deseamos <frameset rows="15%,*,75"> <frame src="pagina1.html"> <frame src="pagina2.html" name="principal"> <frame src="pagina3.html"> </frameset> Dirigir los enlaces hacia ese frame <body> <a href="pagina2.html" target="principal">Portada</a> | <a href="productos.html" target="principal">Productos</a> | <a href="contacto.html" target="principal">Contacto</a>
</body>
<P> define el comienzo de un prrafo Atributos: <P align=left> <P align=right> <P align=center> <P align=justify> Listas listas ordenadas (ol) listas no ordenadas (ul) listas de definiciones (dl) diferentes elementos entre <li> y </li>. (las listas se pueden anidar) <ol> <li> </li> <li> </li> <ol> <li> </li> </ol> <li> </li> </ol> Ordenadas: <OL START=n TYPE=tipo > <LH> Titulo de la lista </LH> --- es opcional <LI> Elemento 1 <LI> Elemento 2 ... <LI> Elemento n </OL> Atributo STRAT Para indicar otro valor de comienzo (es opcional) Atributo TYPE A : Letras maysculas. a : Letras minsculas. I : Nmero romanos en maysculas. i : Nmero romanos en minsculas. 0 : Nmeros (es el valor por defecto, por tanto no hay que indicarlo). Desordenadas: <UL START=n TYPE=tipo > <LH> Titulo de la lista </LH> --- es opcional <LI> Elemento 1
<LI> Elemento 2 ... <LI> Elemento n </UL> Atributo TYPE circle: marcas en forma de circulo (por defecto) square: marcas en forma de cuadrado disk: marcas en forma de disco none: no utilizar ningn tipo de marca Definiciones: <DL> <LH>Titulo de la lista </LH> <DT>Termino 1 <DD>Definicin 1 <DT>Termino 2 <DD>Definicin 2 ... <DD>Termino N <DT>Definicin N </DL>
Tablas <TABLE> etiqueta que genera la tabla Atributos: width = "p%" ancho
height=p% alto border = "n" tamao del borde bordercolor = "color" color del borde bgcolor = "color" color del fondo background = "imagen" imagen de fondo align="alineacin" alinear respecto a pantalla (LEFT, CENTER o RIGHT) cellspacing="n" espacio entre celdas cellpadding="n" espacio entre borde y el texto
frame= definir los bordes externos Opciones: void: Ningn borde externo above: Slo aparece el borde superior below: Slo el borde inferior de la tabla hsides: Se mostrar slo el borde de arriba y abajo. vsides: Slo los bordes de los lados izquierdo y derecho lhs: Se mostrar tan solo el borde izquierdo rhs: Se mostrar solamente el borde derecho box: Los 4 bordes border: Tambin se mostrarn los 4 bordes rules= definir bordes internos Opciones: none: No se coloca ningn borde interno groups: Slo se mostrarn bordes en los grupos de columnas o filas. rows: Slo aparecern bordes entre filas. cols: Los bordes internos slo aparecern para separar columnas all: Se mostrarn todos los bordes internos
<CAPTION> Permite poner titulo a la tabla Atributos: align="alineacin"
<TR> indica el principio de una fila Atributos: bgcolor = "color" align="alineacin"
valign="alineacin" alineacin vertical texto(TOP, MIDDLE, BASELINE, BOTTOM) indica principio de una celda o <TH> indica principio celda cabecera (negrita y alineada por defecto)
<TD> Atributos:
width = "p%" ancho height=p% alto bgcolor = "color" align="alineacin" valign="alineacin" rowspan=n y colspan=n permite unir filas o columnas
notas: 1. Para que una celda de una tabla aparezca en blanco, tendrs que "llenarla" usando nuestra vieja amiga " ".
2. <TBODY> podemos agrupar celdas (ejemplo: que el contenido de un grupo de celdas aparezca centrado) Atributos: align="alineacin", valign="alineacin" 3. <colgroup span> organizar tabla por columnas ( ejemplo: <COLGROUP SPAN="nmero de columnas" WIDTH="ancho" ALIGN="modo"></COLGROUP> ) Atributos: Width= Align= Valign= Span=n especifica el n de columnas de un grupo de columnas Char=caracter especifica un carcter como eje de alineacin(Nota: usar junto con align="char".) Charoff=px o % distancia entre borde y 1 caracter 4. <THEAD> y <TFOOT> crear una cabecera y un pi de pagina para imprimir Atributos: Align= Valign= Char=caracter especifica un carcter como eje de alineacin(Nota: usar junto con align="char".) Charoff=px o % distancia entre borde y 1 caracter (ejemplo: <THEAD> <TR><TD>Celda 1</TD> <TD>Celda 2</TD> </TR> ... </THEAD>) Atributos: align="alineacin", valign="alineacin" Importante: Al usar estas etiquetas de agrupamiento debes tener muy en cuenta el orden: Primero va THEAD, despus TFOOT y, por ltimo TBODY
Frames
<FRAMESET> definir la divisin en filas o columnas
Atributos: rows = lista de filas (ejem: rows="20%,80%") cols = lista de columnas (ejem: cols="200,*" (puede definire en pixels=n, porcentaje=% tamaorestante=* ) border="nmero de pixels anchura del borde en pixeles bordercolor="#rrggbb color del borde frameborder="yes|no|0 mostrar o no el borde framespacing="nmero de pixels anchura separacin frames <FRAME> Atributos: Name=nombre se le da nombre al frame Src=url o nombre documento direccin de la pagina marginwidth =n" anchura del margen marginheight="n" altura del margen scrolling="yes/no/auto" para barra de desplazamiento noresize inpide que el usuario modifique el tamao frameborder="yes|no|0" bordercolor=#RRGGBB
Atener en cuenta
1. Caracteres especiales smbolo < > & cdigo < > & nbsp; " " El carcter sirve para introducir un espacio en blanco 2. El modo de indicar los colores es mediante la sintaxis "#RRGGBB" donde RR es la cantidad de color rojo, GG es la cantidad de color verde y BB es la cantidad de color azul. Estas cantidades se expresan mediante dos dgitos en notacin hexadecimal, de modo que el valor menor es 00 y el mayor es FF. 3. Fieldset + legend <fieldset> <legend align=center><h1>Tamaos diferentes</H1></legend> <font color="blue">Diferentes tamaos de fuentes</font> </fieldset>
4. Colores
Nombre HTML
Cdigo hex Cdigo decimal R G B R G B CD5C5C F08080 FA8072 E9967A FFA07A DC143C FF0000 B22222 8B0000 FFC0CB FFB6C1 FF69B4 FF1493 C71585 DB7093 FFA07A FF7F50 FF6347 FF4500 FF8C00 FFA500 FFD700 FFFF00 FFFFE0 FFFACD FAFAD2 FFEFD5 FFE4B5 FFDAB9 EEE8AA F0E68C BDB76B E6E6FA D8BFD8 DDA0DD EE82EE DA70D6 FF00FF BA55D3 9370DB 8A2BE2 9400D3 9932CC 8B008B 800080 205 92 92 240 128 128 250 128 114 233 150 122 255 160 122 220 20 60 255 0 0 178 34 34 139 0 0 255 192 203 255 182 193 255 105 180 255 20 147 199 21 133 219 112 147 255 160 122 255 127 80 255 99 71 255 69 0 255 140 0 255 165 0 255 215 0 255 255 0 255 255 224 255 250 205 250 250 210 255 239 213 255 228 181 255 218 185 238 232 170 240 230 140 189 183 107 230 230 250 216 191 216 221 160 221 238 130 238 218 112 214 255 0 255 186 85 211 147 112 219 138 43 226 148 0 211 153 50 204 139 0 139 128 0 128
Colores rojos
IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed
Colores rosas
Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed
Colores naranjas
LightSalmon Coral Tomato OrangeRed DarkOrange Orange
Colores amarillos
Gold Yellow LightYellow LemonChiffon LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki
Colores prpuras
Lavender Thistle Plum Violet Orchid Fuchsia / Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple
Indigo SlateBlue DarkSlateBlue
4B0082 6A5ACD 483D8B
75 0 130 106 90 205 72 61 139
Colores verdes
GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal ADFF2F 7FFF00 7CFC00 00FF00 32CD32 98FB98 90EE90 00FA9A 00FF7F 3CB371 2E8B57 228B22 008000 006400 9ACD32 6B8E23 808000 556B2F 66CDAA 8FBC8F 20B2AA 008B8B 008080 00FFFF E0FFFF AFEEEE 7FFFD4 40E0D0 48D1CC 00CED1 5F9EA0 4682B4 B0C4DE B0E0E6 ADD8E6 87CEEB 87CEFA 00BFFF 1E90FF 6495ED 7B68EE 4169E1 0000FF 0000CD 00008B 173 255 47 127 255 0 124 252 0 0 255 0 50 205 50 152 251 152 144 238 144 0 250 154 0 255 127 60 179 113 46 139 87 34 139 34 0 128 0 0 100 0 154 205 50 107 142 35 128 128 0 85 107 47 102 205 170 143 188 143 32 178 170 0 139 139 0 128 128 0 255 255 224 255 255 175 238 238 127 255 212 64 224 208 72 209 204 0 206 209 95 158 160 70 130 180 176 196 222 176 224 230 173 216 230 135 206 235 135 206 250 0 191 255 30 144 255 100 149 237 123 104 238 65 105 225 0 0 255 0 0 205 0 0 139
Colores azules
Aqua/Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue
Navy MidnightBlue
000080 191970
0 0 128 25 25 112
Colores marrones
Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon FFF8DC FFEBCD FFE4C4 FFDEAD F5DEB3 DEB887 D2B48C BC8F8F F4A460 DAA520 B8860B CD853F D2691E 8B4513 A0522D A52A2A 800000 FFFFFF FFFAFA F0FFF0 F5FFFA F0FFFF F0F8FF F8F8FF F5F5F5 FFF5EE F5F5DC FDF5E6 FFFAF0 FFFFF0 FAEBD7 FAF0E6 FFF0F5 FFE4E1 DCDCDC D3D3D3 C0C0C0 A9A9A9 808080 696969 778899 708090 2F4F4F 000000 255 248 220 255 235 205 255 228 196 255 222 173 245 222 179 222 184 135 210 180 140 188 143 143 244 164 96 218 165 32 184 134 11 205 133 63 210 105 30 139 69 19 160 82 45 165 42 42 128 0 0 255 255 255 255 250 250 240 255 240 245 255 250 240 255 255 240 248 255 248 248 255 245 245 245 255 245 238 245 245 220 253 245 230 255 250 240 255 255 240 250 235 215 250 240 230 255 240 245 255 228 225 220 220 220 211 211 211 192 192 192 169 169 169 128 128 128 105 105 105 119 136 153 112 128 144 47 79 79 000
Colores blancos
White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose
Colores grises
Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black
Cambiar tamao de la imagen: 1. Haz clic derecho sobre la foto y selecciona Abrir con > Microsoft Office Picture Manager 2. En la barra de herramientas, haz clic en Imagen > Cambiar tamao 3. A la derecha de la foto aparecen unas opciones para ajustar la foto.
Orientacin al tipo de estructuras

Estructura html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> Ttulo principal que se visualiza en la barra superior de la ventana </TITLE> </HEAD> <BODY> Contenido </BODY> </HTML>
Estructura tabla
<table border="1"> <caption>titulo de la tabla</caption> ---- es opcional <tr> <th> Cabecera 1 </th> <th> Cabecera 2 </th> <th> Cabecera 3 </th> </tr> <tr> <td> Celda 1 de la fila 1 </td>
<td> Celda 2 de la fila 1 </td> <td> Celda 3 de la fila 1 </td> </tr> <tr> <td> Celda 1 de la fila 2 </td> <td> Celda 2 de la fila 2 </td> <td> Celda 3 de la fila 2 </td> </tr> </table
Estructura Frames
<html> <head> <title>Texto del ttulo</title> </head> <frameset rows="50%,50%"> <frame src="p1.html" name="f1"> ... <frame src="p2.html" name="f2"> <noframes> mensaje cuando el navegador no interpreta marcos </noframes> </frameset> </html>

Chuleta HTML

Cargado por

Copyright:

Formatos disponibles

Chuleta HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Chuleta HTML

Cargado por

Copyright:

Formatos disponibles

Chuleta html 9/12/2012 By Israel Hernndez Reyes

Etiquetas sueltas sin atributos

Etiquetas con atributos

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb" USEMAP="#bebe1">

<MAP NAME="bebe1"> <AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza">

<AREA SHAPE=POLY COORDS="3,182,36,178, 44,165,60,169,66,184,62,196, 43,201,35,190,0,193,0,183" HREF="#" </MAP> ALT="Sonajero">

Ancla: para desplazarnos dentro de una pgina de gran tamao

target= _blank, _self, _top, _parent

<CAPTION> Permite poner titulo a la tabla Atributos: align="alineacin"

<TR> indica el principio de una fila Atributos: bgcolor = "color" align="alineacin"

Indigo SlateBlue DarkSlateBlue

4B0082 6A5ACD 483D8B

75 0 130 106 90 205 72 61 139

Orientacin al tipo de estructuras

También podría gustarte