chuleta html

23
Chuleta html 9/12/2012 By Israel Hernández 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 más <small> texto más pequeño <big> texto aún más grande <blockquote> texto sangrado <pre> visualiza el texto de forma preformateada <sub> escribe como subíndice <sup> escribe como superíndice <!-- definir un comentario (<!-- Esto es un comentario -->) <fieldset> rectangulo enmarcando al texto

Upload: djnamita

Post on 10-Dec-2014

153 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Chuleta HTML

Chuleta html 9/12/2012By Israel Hernández 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 más <small> texto más pequeño <big> texto aún más grande <blockquote> texto sangrado <pre> visualiza el texto de forma preformateada <sub> escribe como subíndice <sup> escribe como superíndice

<!-- definir un comentario (<!-- Esto es un comentario -->)

<fieldset> rectangulo enmarcando al texto

<Legend> colocar legenda dentro del rectangulo

<DIR> funciona como un tabulador

Page 2: Chuleta HTML

Etiquetas con atributos

<DIV> agrupar elementos y aplicar estilosAtributos:Id da nombre a la capaStyle se establecen las propiedadesEjemplo:id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; color:green;”

<HR> permite introducir una lineaAtributos:Aling alineación (left, right, center)Width ancho (numero o porcentaje “%”)Size alto (numero)Noshade eliminar sombreadoColor 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“

Page 3: Chuleta HTML

Texto

<FONT> sirve para indicar el tipo de letra, tamaño y color Atributos

<font size=“ “> (definir tamaño letra(indicar un tamaño de 1 a 7)

(tamaño 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 URLalign="left / right / top / middle / bottom" alineacion con respecto al texto (tambien clear)alt="Texto explicativo" mensaje al pasar ratón sobre imagen(si imagen no carga)title=“titulo” Muestra información cuando el cursor se desplaza sobre imagenhspace=“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 página. <A HREF="mipag2.html"><IMG SRC="hombre.gif"></A>)

Page 4: Chuleta HTML

Mapear imagen

1. Las tags <map>.....</map>identifican que vamos a crear un mapa de imágenes. 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 acompañan 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 edición de imágenes. 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 vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio .

o Href= Como ya sabe, indica la dirección, entre comillas, de la página web  a la que accede si pinchamos en un área determinada.

Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código 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="#" ALT="Sonajero">

</MAP>

<BR> Sirve para dejar una línea en blanco dentro de un párrafoAtributos: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="dirección">

Page 5: Chuleta HTML

<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 página de gran tamaño

<A NAME="arriba"><H1>Página 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: target= _blank, _self, _top, _parent

1. Corresponde al nombre de un frame existente2. Valor que no corresponde a ninguno de los paneles existente3. 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 página 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 noción sólo 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>

Page 6: Chuleta HTML

<P> define el comienzo de un párrafoAtributos:<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 TYPEA : Letras mayúsculas. a : Letras minúsculas. I : Número romanos en mayúsculas. i : Número romanos en minúsculas. 0 : Números (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

Page 7: Chuleta HTML

</UL>

Atributo TYPEcircle: marcas en forma de circulo (por defecto) square: marcas en forma de cuadrado disk: marcas en forma de disco none: no utilizar ningún tipo de marca

Definiciones:

<DL><LH>Titulo de la lista </LH>

<DT>Termino 1<DD>Definición 1

<DT>Termino 2<DD>Definición 2. . .<DD>Termino N

<DT>Definición N</DL>

Tablas

<TABLE> etiqueta que genera la tablaAtributos:width = "p%" anchoheight=”p%” altoborder = "nº" tamaño del bordebordercolor = "color" color del borde

Page 8: Chuleta HTML

bgcolor = "color" color del fondobackground = "imagen" imagen de fondoalign="alineación" alinear respecto a pantalla (LEFT, CENTER o RIGHT)cellspacing="nº" espacio entre celdascellpadding="nº" espacio entre borde y el texto

frame=” ” definir los bordes externosOpciones:

void: Ningún borde externo above: Sólo aparece el borde superior below: Sólo el borde inferior de la tabla hsides: Se mostrará sólo el borde de arriba y abajo. vsides: Sólo 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: También se mostrarán los 4 bordes

rules=” ” definir bordes internosOpciones:

none: No se coloca ningún borde interno groups: Sólo se mostrarán bordes en los grupos de columnas o filas. rows: Sólo aparecerán bordes entre filas. cols: Los bordes internos sólo aparecerán para separar columnas all: Se mostrarán todos los bordes internos

<CAPTION> Permite poner titulo a la tablaAtributos:align="alineación"

<TR> indica el principio de una filaAtributos:

bgcolor = "color"align="alineación"valign="alineación" alineación vertical texto(TOP, MIDDLE, BASELINE, BOTTOM)

Page 9: Chuleta HTML

<TD> indica principio de una celda o <TH> indica principio celda cabecera (negrita y alineada por defecto)Atributos:width = "p%" anchoheight=”p%” altobgcolor = "color"align="alineación"valign="alineación" rowspan=”nº” y colspan=”nº” permite unir filas o columnas

notas: 1. Para que una celda de una tabla aparezca en blanco, tendrás que "llenarla"

usando nuestra vieja amiga "&nbsp;".2. <TBODY> podemos agrupar celdas (ejemplo: que el contenido de un grupo de

celdas aparezca centrado)Atributos: align="alineación", valign="alineación"

Page 10: Chuleta HTML

3. <colgroup span> organizar tabla por columnas ( ejemplo: <COLGROUP SPAN="número de columnas" WIDTH="ancho" ALIGN="modo"></COLGROUP> )

Atributos:Width=” ”Align=” ”Valign=””Span=”nº” especifica el nº de columnas de un grupo de columnasChar=”caracter” especifica un carácter como eje de alineación(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 carácter como eje de alineación(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="alineación", valign="alineación"Importante: Al usar estas etiquetas de agrupamiento debes tener muy en cuenta el orden: Primero va THEAD, después TFOOT y, por último TBODY

Frames

<FRAMESET> definir la división en filas o columnasAtributos:rows = lista de filas (ejem: rows="20%,80%") cols = lista de columnas (ejem: cols="200,*"

Page 11: Chuleta HTML

(puede definire en pixels=nº, porcentaje=% tamañorestante=* )border="número de pixels“ anchura del borde en pixelesbordercolor="#rrggbb“ color del bordeframeborder="yes|no|0“ mostrar o no el bordeframespacing="número de pixels“ anchura separación frames

<FRAME>Atributos:Name=”nombre” se le da nombre al frameSrc=”url o nombre documento” dirección de la paginamarginwidth =“nº" anchura del margenmarginheight="nº" altura del margenscrolling="yes/no/auto" para barra de desplazamientonoresize inpide que el usuario modifique el tamañoframeborder="yes|no|0"bordercolor=”#RRGGBB”

Atener en cuenta

1. Caracteres especiales

Page 12: Chuleta HTML

símbolo código< &lt;> &gt;& &amp;

nbsp;" &quot;El carácter &nbsp; 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 dígitos en notación hexadecimal, de modo que el valor menor es 00 y el mayor es FF.

3. Fieldset + legend

<fieldset><legend align=center><h1>Tamaños diferentes</H1></legend><font color="blue">Diferentes tamaños de fuentes</font>

</fieldset>

4. Colores

Nombre HTMLCódigo hex

R   G   B Código decimal

R   G   B

Colores rojosIndianRed CD5C5C 205 92 92LightCoral F08080 240 128 128

Page 13: Chuleta HTML

Salmon FA8072 250 128 114DarkSalmon E9967A 233 150 122LightSalmon FFA07A 255 160 122Crimson DC143C 220 20 60Red FF0000 255 0 0FireBrick B22222 178 34 34DarkRed 8B0000 139 0 0

Colores rosasPink FFC0CB 255 192 203LightPink FFB6C1 255 182 193HotPink FF69B4 255 105 180DeepPink FF1493 255 20 147MediumVioletRed C71585 199 21 133PaleVioletRed DB7093 219 112 147

Colores naranjasLightSalmon FFA07A 255 160 122Coral FF7F50 255 127 80Tomato FF6347 255 99 71OrangeRed FF4500 255 69 0DarkOrange FF8C00 255 140 0Orange FFA500 255 165 0

Colores amarillosGold FFD700 255 215 0Yellow FFFF00 255 255 0LightYellow FFFFE0 255 255 224LemonChiffon FFFACD 255 250 205LightGoldenrodYellow FAFAD2 250 250 210PapayaWhip FFEFD5 255 239 213Moccasin FFE4B5 255 228 181PeachPuff FFDAB9 255 218 185PaleGoldenrod EEE8AA 238 232 170Khaki F0E68C 240 230 140DarkKhaki BDB76B 189 183 107

Colores púrpurasLavender E6E6FA 230 230 250Thistle D8BFD8 216 191 216Plum DDA0DD 221 160 221Violet EE82EE 238 130 238Orchid DA70D6 218 112 214Fuchsia / Magenta FF00FF 255 0 255MediumOrchid BA55D3 186 85 211MediumPurple 9370DB 147 112 219BlueViolet 8A2BE2 138 43 226DarkViolet 9400D3 148 0 211DarkOrchid 9932CC 153 50 204DarkMagenta 8B008B 139 0 139Purple 800080 128 0 128Indigo 4B0082 75 0 130SlateBlue 6A5ACD 106 90 205DarkSlateBlue 483D8B 72 61 139

Colores verdes

Page 14: Chuleta HTML

GreenYellow ADFF2F 173 255 47Chartreuse 7FFF00 127 255 0LawnGreen 7CFC00 124 252 0Lime 00FF00 0 255 0LimeGreen 32CD32 50 205 50PaleGreen 98FB98 152 251 152LightGreen 90EE90 144 238 144MediumSpringGreen 00FA9A 0 250 154SpringGreen 00FF7F 0 255 127MediumSeaGreen 3CB371 60 179 113SeaGreen 2E8B57 46 139 87ForestGreen 228B22 34 139 34Green 008000 0 128 0DarkGreen 006400 0 100 0YellowGreen 9ACD32 154 205 50OliveDrab 6B8E23 107 142 35Olive 808000 128 128 0DarkOliveGreen 556B2F 85 107 47MediumAquamarine 66CDAA 102 205 170DarkSeaGreen 8FBC8F 143 188 143LightSeaGreen 20B2AA 32 178 170DarkCyan 008B8B 0 139 139Teal 008080 0 128 128

Colores azulesAqua/Cyan 00FFFF 0 255 255LightCyan E0FFFF 224 255 255PaleTurquoise AFEEEE 175 238 238Aquamarine 7FFFD4 127 255 212Turquoise 40E0D0 64 224 208MediumTurquoise 48D1CC 72 209 204DarkTurquoise 00CED1 0 206 209CadetBlue 5F9EA0 95 158 160SteelBlue 4682B4 70 130 180LightSteelBlue B0C4DE 176 196 222PowderBlue B0E0E6 176 224 230LightBlue ADD8E6 173 216 230SkyBlue 87CEEB 135 206 235LightSkyBlue 87CEFA 135 206 250DeepSkyBlue 00BFFF 0 191 255DodgerBlue 1E90FF 30 144 255CornflowerBlue 6495ED 100 149 237MediumSlateBlue 7B68EE 123 104 238RoyalBlue 4169E1 65 105 225Blue 0000FF 0 0 255MediumBlue 0000CD 0 0 205DarkBlue 00008B 0 0 139Navy 000080 0 0 128MidnightBlue 191970 25 25 112

Colores marronesCornsilk FFF8DC 255 248 220BlanchedAlmond FFEBCD 255 235 205Bisque FFE4C4 255 228 196

Page 15: Chuleta HTML

NavajoWhite FFDEAD 255 222 173Wheat F5DEB3 245 222 179BurlyWood DEB887 222 184 135Tan D2B48C 210 180 140RosyBrown BC8F8F 188 143 143SandyBrown F4A460 244 164 96Goldenrod DAA520 218 165 32DarkGoldenrod B8860B 184 134 11Peru CD853F 205 133 63Chocolate D2691E 210 105 30SaddleBrown 8B4513 139 69 19Sienna A0522D 160 82 45Brown A52A2A 165 42 42Maroon 800000 128 0 0

Colores blancosWhite FFFFFF 255 255 255Snow FFFAFA 255 250 250Honeydew F0FFF0 240 255 240MintCream F5FFFA 245 255 250Azure F0FFFF 240 255 255AliceBlue F0F8FF 240 248 255GhostWhite F8F8FF 248 248 255WhiteSmoke F5F5F5 245 245 245Seashell FFF5EE 255 245 238Beige F5F5DC 245 245 220OldLace FDF5E6 253 245 230FloralWhite FFFAF0 255 250 240Ivory FFFFF0 255 255 240AntiqueWhite FAEBD7 250 235 215Linen FAF0E6 250 240 230LavenderBlush FFF0F5 255 240 245MistyRose FFE4E1 255 228 225

Colores grisesGainsboro DCDCDC 220 220 220LightGrey D3D3D3 211 211 211Silver C0C0C0 192 192 192DarkGray A9A9A9 169 169 169Gray 808080 128 128 128DimGray 696969 105 105 105LightSlateGray 778899 119 136 153SlateGray 708090 112 128 144DarkSlateGray 2F4F4F 47 79 79Black 000000 0 0 0

Cambiar tamaño 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 tamaño 3. A la derecha de la foto aparecen unas opciones para ajustar la foto.

Page 16: Chuleta HTML

Orientación 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>

Título 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>

Page 17: Chuleta HTML

</tr></table

Estructura Frames

<html><head>

<title>Texto del título</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>