XHTML + CSS eXtended HyperText Markup Language Cascading
Anuncio
XHTML + CSS eXtended HyperText Markup Language Cascading StyleSheets © 1996-2004 Antonio González Impreso el 7 de mayo de 2008, a las 15:06 horas Índice Estructura básica documento XHTML........................................................................................ 1 Diferencias de XHTML con HTML.............................................................................................. 2 La cabecera................................................................................................................................. 2 CSS............................................................................................................................................. 2 Medidas....................................................................................................................................... 4 16 colores básicos....................................................................................................................... 4 Caracteres especiales................................................................................................................. 4 Etiquetas en general................................................................................................................... 5 Tablas.......................................................................................................................................... 6 Marcos........................................................................................................................................ 6 Estructura básica documento XHTML <?xml version="1.0" encoding="windows-1252"?> <?xml-stylesheet href="estilo1.css" type="text/css"?> <?xml-stylesheet href="#interna" type="text/css"?> <?xml-stylesheet href="./estilos/estilo3.css" type="text/css"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="en"> <head> <title>Título texto</title> <link rel="stylesheet" href="una.css" type="text/css" title="nombrecssscreen" media="screen" charset="windows-1252"> <link rel="stylesheet" href="unab.css" type="text/css" title="nombrecssprint" media="print"> <style type="text/css" media="all" id="interna"> /*<!--[CDATA[*/ @import "otra.css"; /* comentario en css */ @import url(http://lo.que.sea/es.css); ... el resto del estilo ... //]]--> </style> <meta ... /> <script type="text/javascript" src="codigo.js"/> </head> <body> Texto del documento </body> </html> Página 1 de 7 Diferencias de XHTML con HTML En XML los nombres de atributos y elementos en minúsculas. XML distingue mayúsculas y minúsculas. XML exige que los elementos no vacíos tenga etiquetas de finalización. Los valores de los atributos deben ir entrecomillados (""). Elementos vacíos deben tener una etiqueta de finalización o la de inicialización debe terminar con " />" (un espacio delante de la barra). Se deja de utilizar <a name=""> en favor de <a id="">. La cabecera <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="en" lang="es"> Comentario <!-- texto --> En CSS: /* comentario CSS */ <!-- N.B.: Las etiquetas link y meta se deben situar dentro de <head> --> <link rev="made" href="mailto:[email protected]" /> <link rel="Home" href="http://www.ucm.es/info/" /> <link rel="stylesheet" type="text/css" href="estilos.css" /> <link rel="previous" href="pagina_anterior.html" /> <link rel="next" href="pagina_siguiente.html" /> <link rel="contents" href="pagina_contenidos.html" /> <meta http-equiv="Content-type" content="text/html; charset=windows-1252" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="expires" content="-1" /> <meta http-equiv= "pragma" content="no-cache" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="resource-type" content="document" /> <meta name="author" lang="es" content="Fulanito Menganítez" /> <meta name="owner" content="Fulanito Menganítez" /> <meta name="organization" content="Organización XYX" /> <meta name="date" content="05/30/99" /> <meta name="description" content="Descripción de la página" /> <meta name="keywords" content="palabra1, palabra2, palabra3" /> <meta name="distribution" content="global" /> <meta name="copyright" content="Copyright 1999 saas" /> <meta name="disclaimer" content="aquí te lavas las manos como quieras" /> CSS Orden de importancia: 1º inline 2º embedded 3º linked 4º imported 5º default browser En caso de conflicto: 1º regla declarada específicamente 2º regla heredada 3º regla en el orden en que aparecen (más importante la última) En fichero estilo.css div.nota { color: green; margin-left: 1em; Página 2 de 7 } luego en documento (en body): <div class="nota">Texto de la nota</div> <span style class="nota">Texto</span> <span style="font-weight: bold; color: green">texto en negrita y verde</span> <p style="text-indent: 10pt; text-align: justify">párrafo indentado y justificado</p> <strong style="background: yellow; color: black">texto a resaltar</strong> {font-family: serif|sans-serif|cursive|fantasy|monospace|arial|helvetica} {font-size: 16pt|1.5em|20px|1in|2.56cm|256mm|12pc|14ex} {font-size: xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger} {font-size: 200%} (por error en IE 3, font-size debe ser el último elemento en una declaración) {font-style: italic|oblique|normal} {font-weight: normal|bold} {font-weight: 400|900} {font-weight: lighter|bolder} {font-variant: small-caps} {text-transform: uppercase|lowercase|capitalize|none} {text-decoration: underline|overline|line-through|blink|none} {word-spacing: 1em|1in|1cm|1mm|1pt|pc|1ex|1px} {letter-spacing: 1em|1in|1cm|1mm|1pt|pc|1ex|1px} {line-height: por número | por unidad | por porcentaje} {text-align: center|left|right|justify} {vertical-align: top|bottom|text-top|text-bottom|baseline|middle|sub|super} {text-indent: 2em|2%|-10px} {margin-top(|bottom|left|right): por número | por unidad | por porcentaje} (acepta cantidades negativas) {padding-top(|bottom|left|right): por número | por unidad | por porcentaje} (no acepta cantidades negativas) {border-top-width(|bottom-width|left-width|right-width): por número | por unidad | por porcentaje} {border-top-width(|bottom-width|left-width|right-width): thin|medium|thick} {border-width: } (todos a la vez) {boder-color: #666669 #FF0033 #000000 #FFFF99} (arriba-derecha-abajo-izquierda) {border-style: solid|double|dotted|dashed|groove|ridge|inset|outset} {float: left|right} {clear: left|right|both} (anula el float) {color: por nombres color | por números hexadecimales | por valores RGB } aqua | #336699 | rgb(51,204,0) {background-color: color|transparent} {background-image: url(/imagen.gif)|none} {background-repeat: no-repeat|repeat-x|repeat-y|repeat} {background-attachment: fixed|scroll} (en body) {background-position: center|left|right bottom|top || 70px 10px || 75% 50%} {background: url(laquesea.gif) #CCFFC repeat-y top right} {position: absolute; left: 100px; top: 43px; width: 150 px; height: 15px; z-index: 1} {position: relative; left: 40px; top: 10px} {position: static } {overflow: scroll|visible|hidden|auto} overflow controla {width} y {height} {visibility: hidden|visible|inherit} {clip: rect(10px 200px 100 px 40px)} (sólo con elementos absolutamente posicionados) {z-index: 10 } body body body body text link alink vlink color texto enlaces no visitados enlaces seleccionados enlaces visitados Página 3 de 7 a:link a:active a:hover a:visited enlaces enlaces enlaces enlaces sin visitar cuando se hace clic sobre los que se pone el ratón ya visitados Medidas in cm mm pt pc em ex px pulgadas centímetros milímetros puntos picas ems x-height píxels 16 colores básicos negro (black) plata (silver) gris (gray) blanco (white) marrón (maroon) rojo (red) morado (purple) fucsia (fuchsia) verde (green) lima (lime) verde oliva (olive) amarillo (yellow) azúl marino (navy) azúl (blue) azul verdoso no claro(teal) agua (aqua) #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF Caracteres especiales Á È Ü < > & " ® © ) ( ' € &Aacute; &Egrave; &Uuml; &lt; &gt; &amp; &quot; &#174; registrado &#169; copyright &#168; &#173; &#021; &#8364; ( también como &euro; ) &nbsp; ( espacio no rompible, también &#160; y &#xA0; ) espacio &#x0020; tabulador &#x0009; carácter &#número_ascii; Página 4 de 7 Etiquetas en general referencia para enviar un correo (a mailto) <a href="mailto:[email protected]?subject=Asunto">texto-que-remite</a> referencia para enviar a otra página <a href="pagina.html">texto-que-remite</a> referencia para enviar a otra página desde un gráfico <a href="pagina.html"><img src="imagen.png">texto-que-remite</a> referencia a cadena de texto en la misma página <a href="#clave">texto que remite</a> <a id="clave">cadena de texto</a> referencia a cadena de texto en otra página <a href="otrapág.html#clave>texto que remite</a> <a id="clave">cadena de texto</a> <a href="laquesea.html" target="_blank">envia a nueva página</a> puede ser _blank (nueva ventana), _self (en el mismo marco), _parent (frameset superior), _top (ventana original) correo <address>[email protected]</adress> Abreviatura y acrónimo <abbr title="HyperText Markup Language">HTML</abbr> <acronym title="SAAS" lang="en">SAAS</acronym> texto preformateado (espaciado fijo, valen espacios, nuevas línea, tabs) <pre>texto</pre> inserta línea <hr> inserta línea con determinadas especificaciones <hr size=6 width=70% align=center noshade> Imágenes <img src="imagen.gif" alt="[texto_alternativo]" width=235 height=124> alt="[--&gt;]" representa la flecha alt="[- (NUEVO! -]" 'width' y 'height' son importantes para acelerar la descarga línea nueva <br /> párrafo <p> <p lang="fr"> Párrafo numerado (ordered lists) <ol> <li>texto</li> <li>texto</li> <li>texto</li> </ol> Página 5 de 7 Opciones de listas (en <ol> para toda la lista o en <li> para ítem) type=A|a|I|i <ol start=2> <li value=2> Donde <li> marca un parágrafo con una bola (!) por delante (unnumbered lists) <ul> <li>texto</li> <li>texto</li> <li>texto</li> </ul> sonido <bgsound src=fichero.wav loop=5> Sonido tras cargar página <meta HTTP-EQUIV="Refresh" content="60; URL=http://www.ucm.es/loquesea.wav"> Tras 60 segundos suena loquesea.wav Cargar una páginaautomáticamente <meta HTTP-EQUIV="Refresh" content="10; URL=http://www.ucm.es/loquesea.html"> Tras 10 segundos se carga loquesea.html Tablas Donde bgcolor es el color de fondo, border es el filete de una tabla, y 360 su ancho en columnas <table bgcolor="#FFFF66" border=6 width=50%> <caption>título de la tabla</caption> <th>texto centrado fil1 col 1</th> <th>texto centrado fil1 col 2</th> <tr> <td width=50%>fila 1 columna 1</td> <td>fila 1 columna 2</td> </tr> <tr> <td>fila 2 columna 1</td> <td>fila 2 columna 2</td> </tr> </table> Celda en tabla con un ancho de 4 columnas <td COLspan=4> Celda en tabla con una altura de 2 filas <td ROWspan=2> Marcos En <head> ponemos para 2 columnas <frameset cols="10%,90%"> Para 3 frames verticales <frameset rows="20%,60%,20%"> Se pueden poner anidadas <frameset rows="10%,90%"> <frame src="fichero.html"> <frameset cols="35%,65%"> <frame src="fichero2.html"> Página 6 de 7 <frame src="fichero3.html"> </frameset> </frameset> Opciones scrolling name [para asignar identificador para poder ser invocado por otros frames como una ventana destino] Página 7 de 7
