Estructura general de un fichero HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<TITLE>Aquí va el título</TITLE>
Estilos (no son visibles)
</HEAD>
<BODY>
Cuerpo (lo que muestra la página)
</BODY>
</HTML>
Etiquetas
<Etiqueta> inicio [.......contenido] </Etiqueta> cierre |
| Etiqueta de estilo | Efecto Visual |
| <ABBREV> | |
| <ACRONYM> | Acrónimo |
| <AU> | |
| <B> | Crea texto en negrilla |
| <BIG> | Fuente más grande |
| <BLINK> | |
| <CENTER> | |
| <CITE> | Cita |
| <CODE> | Instrucciones (código de programación) |
| <DEL> | |
| <DFN> | Definición de un término |
| <EM> | Énfasis |
| <I> | Itálicas |
| <INS> | Texto nuevo insertado aquí |
| <KBD> | Teclado - Muestra exactamente cómo deben escribirse los caracteres |
| <PERSON> | |
| <Q> | Enmarca el texto entre comillas |
| <S> | |
| <SAMP> | Ejemplo |
| <SMALL> | Fuente más pequeña |
| <STRONG> | Convierte el texto en negrilla |
| <STRIKE> | |
| <SUB> | Subíndice |
| <SUP> | Superíndice |
| <TT> | Para escribir código fuente |
| <VAR> | Nombre de la variable |
Encabezados
| Etiqueta | Efecto visual |
| H1 | Prueba |
| H2 | Prueba |
| H3 | Prueba |
| H4 | Prueba |
| H5 | Prueba |
| H6 | Prueba |
Atributos
| Atributo | Valor | Efecto visual |
| ALIGN | LEFT RIGHT CENTER JUSTIFY | Texto alineado a la izquierda Texto alineado a la derecha Texto centrado Texto justificado |
| NOWRAP | Evita que el navegador crea un salto de línea. | |
| ID | Otorga una identificación a la etiqueta. Este atributo es especialmente útil para la programación con JavaScript | |
| LANG | Especifica un idioma diferente | |
| CLASS | Asigna una clase a los contenidos (para hojas de estilo) | |
| CLEAR | Se usa cuando el texto está rodeando una imagen. Ubica el texto tan abajo de la página como sea necesario para tener un margen claro. |
Párrafos
| Etiqueta | Atributo | Efecto visual |
| <br/> | Salto de línea | |
| <p> y </p> | Párrafo | |
| <hr size=5 width=20% align=left> | SIZE WIDTH ALIGN |
Contenedores
| Contenedor | Efecto visual |
| <blockquote> y </blockquote> | Texto con indentación |
| <address> y </address> | Para escribir información de contacto |
| <note> y </note> | |
| <fn> y </fn> | |
| <banner> y </banner> | |
| <pre> y </pre> | Para escribir texto preformateado; manteniendo espacios, saltos de líneas y tabuladores intactos |
Tablas
| Atributo | Etiquetas a las que se aplica | Valor | Efecto visual |
| ALIGN | THEAD TBODY TH TR TD | CENTER LEFT RIGHT JUSTIFY | Centrado Izquierda Derecha Justificado |
| CAPTION | TOP BOTTOM | Arriba Abajo | |
| VALIGN (alineación vertical) | THEAD TBODY TH TR TD | TOP MIDDLE BOTTOM | Arriba Medio Abajo |
| BORDER=n | TABLE | Tamaño del borde | |
| CELLPADDING=n | TABLE | Deja n píxeles de espacio entre los contenidos de la celda y el borde | |
| CELLSPACING=n | TABLE | Grosor del espacio entre celdas | |
| FLOAT | TABLE | RIGHT LEFT | Posición del texto que sigue a </TABLE> |
| COLS=n | TABLE | Número de columnas | |
| FRAME (controla los elementos individuales del marco de la tabla) | TABLE | NONE Arriba BOTTOM TOPBOT SIDES ALL | Ninguno Arriba Abajo arriba de todo A los costados Todo |
| RULES (controla los elementos de la cuadrícula de la celda) | TABLE | NONE BASIC ROWS COLS ALL | Ninguno Básica Línea Columna Todo |
| COLSPAN | THEAD TBODY TH TR TD | Hace que las celdas desborden sobre las columnas adyacentes | |
| ROWSPAN | THEAD TBODY TH TR TD | Hace que las celdas desborden sobre las filas adyacentes |
Atributos de etiquetas FORM y tipos de entrada
| Etiqueta | Atributo | Valor | Resultado | Efecto visual |
| <FORM> ... </FORM> | METHOD | POST GET | ||
| ACTION | Envía a la dirección mostrada | |||
| ENCTYPE | Especifica el tipo de código | |||
| <INPUT> | TYPE | submit | realiza la ACTION de la etiqueta <FORM> | |
| text | línea simple de texto cuya longitud se especifica por el atributo SIZE | |||
| Reset | Elimina el contenido del formulario | |||
| Radio | botón de radio | |||
| Checkbox | casilla de selección | |||
| NAME | Nombre | |||
| SIZE | Tamaño del texto | |||
| <TEXTAREA> ... </TEXTAREA> | NAME | Casilla de texto | ||
| ROWS | ||||
| COLS | ||||
<SELECT>
</SELECT> | NAME | |||
| MULTIPLE | Múltiples selecciones posibles | |||
| <OPTION> ... </OPTION> | SELECTED | Elección predeterminada | ||
| VALUE | Valor forzado |
Llamar
Por ejemplo Hipervínculo:
<A HREF="page.html" TARGET="_blank">
| Valor Acción | Acción |
| _self | Muestra el destino en el mismo marco que el vínculo |
| _parent | Muestra el destino en el marco de nivel superior siguiente |
| _blank | Muestra el destino en una nueva ventana |
| _top | Muestra el destino en toda la ventana del navegador |
Por ejemplo JavaScript:
<SCRIPT LANGUAGE="JavaScript">
//<![CDATA[
AQUÍ-EL-CONTENIDO-DEL-SCRIPT
//]]>
</SCRIPT>
<script src="http://URL DEL SCRIPT.js o .txt" type="text/javascript"></script>
Por ejemplo CSS:
<style type="text/css">
AQUÍ-EL-CONTENIDO
</style>
<link href="http://URL DEL ARCHIVO .css" rel="stylesheet" type="text/css">
Por ejemplo una imagen:
<img src="http://URL DE LA IMAGEN"/>
Comentarios condicionales en Internet Explorer
El motor del Internet Explorer es capaz de reconocer dentro de un
<!-- comentario --> un condicional con el cuál indicarle hacer una acción determinada si el navegador usado es el que se especifica.
El formato es el siguiente:
<!--[if (condicional) IE (versión)]>
... código HTML ...
<![endif]-->
Donde condicional es:
- gte : mayor o igual que
- gt : mayor que
- lt : menor que
- lte : menor o igual que
- [if IE] (nada) : todos
Y en versión podemos indicar la versión del Internet Explorer deseada. Así podrían quedar cosas como las siguientes:
Si nuestro navegador es anterior al IE6...
<!--[if lt IE 6 ]>
Tu versión de Internet Explorer es demasiado antigua.
<![endif]-->
Si nuestro navegador es superior al IE5.5 carga una hoja de estilos determinada...
<!--[if gte IE 5.500 ]>
<link rel="stylesheet" type="text/css" href="estilosIE.css">
<![endif]-->
Si nuestro navegador es IE en cualquier versión...
<!--[if IE]>
¡Estás usando Internet Explorer!
<![endif]-->
Comentarios
Son muy fáciles de poner.
Es como una etiqueta que tiene un inicio y un fin.
Todo el texto que pongas dentro está comentado, es decir, no aparecerá en la página.
Dentro de un comentario puedes meter texto o código HTML, como etiquetas.
Los comentarios en HTML:
El comentario empieza por:
<!-- y finaliza por -->
Todo lo que pongas entre esas etiquetas está comentado.
Los comentarios en CSS:
El comentario empieza por:
/* y finaliza por */
Todo lo que pongas entre esas etiquetas está comentado.
Hack CSS de los comentarios de dos barras (//)
Pero Firefox también interpreta los comentarios formados por //
// esto es un comentario
Internet Explorer simplemente ignora las dos barras y trata la línea como si fuera un código normal.
Por ejemplo tenemos este código:
h1{
font-size: 12px;
color: #009900;
//font-size: 16px;
//color: #000099;
}
Aquí hemos definido un par de estilos para la etiqueta H1.
Los dos primeros estilos son font-size:12px y color:#009900. Todos los navegadores leerán estos estilos.
Pero luego tiene otros dos estilos, que en realidad son los mismos que los anteriores, que comienzan por dos barras. Firefox y Opera, que interpretan esas dos barras como comentarios, no leerán los estilos. Internet Explorer que no tiene en cuenta las dos barras como comentarios, leerá los dos últimos estilos.
Por lo tanto, el resultado final será que
- Todos los navegadores mostrarán los H1 con tamaño de fuente 12px y color verde.
- Internet Explorer mostrará los H1 con tamaño de 16px y color azul, dado que no tiene en cuenta las dos barras como si fueran comentarios.
Tendríamos que verlo con Internet Explorer y con otros navegadores para comprobar que cambian los estilos con los que se muestra el encabezamiento H1.
Los comentarios en JAVA:
Hay tres tipos de comentarios en Java:
// Este es un comentario de una sola línea
/* Este es un comentario de una o más líneas */
/** Este es un comentario de documentación */
Todo lo que pongas entre esas etiquetas está comentado.
FLOAT en CSS
La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none.
Un valor left significa que el elemento formará un bloque que se situará a la izquierda de los elementos adyacentes. Un valor right significa que el bloque se situará a la derecha.
Un bloque 'flotante' debe tener definida su anchura, implicita o expresamente, ya que de lo contrario será tratado como no flotante
clearclear se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el.
Sus posible valores son none, left right o both.
- none: el elemento permite otros flotantes a ambos lados
- left: el elemento no permite flotantes a su izquierda
- right: el elemento no permite flotantes a su derecha
- both: el elemento no permite flotantes a ningun lado
Ejemplos: primer bloque flotante a la derecha
<div style="border: 1px dotted black; padding: 1em; font-weight: normal; width: 80%; text-align: center;">
<div style="border: 3px solid rgb(204, 204, 204); float: right; width: 50%; background-color: rgb(255, 255, 255);">primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque </div>
<div style="border: 3px solid rgb(204, 204, 204); background-color: rgb(240, 240, 240);">segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque </div>
</div>
Ejemplos: primer bloque flotante a la izquierda
<div style="border: 1px dotted black; padding: 1em; font-weight: normal; width: 80%; text-align: center;">
<div style="border: 3px solid rgb(204, 204, 204); float: left; width: 50%; background-color: rgb(255, 255, 255);">primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque </div>
<div style="border: 3px solid rgb(204, 204, 204); background-color: rgb(240, 240, 240);">segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque </div></div>
Las etiquetas <SPAN> y <DIV>
En ocasiones, dentro de un mismo párrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.
La etiqueta <SPAN>
La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un párrafo.
Se puede usar con ID o con CLASS.
Su sintaxis es:
<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>
La etiqueta <DIV>
En lugar de aplicar estilos a unas pocas palabras dentro de un párrafo, esta etiqueta los aplica a un bloque de texto, que puede ser un párrafo o varios.
La sintaxis de la etiqueta DIV es:
<DIV class=important> párrafos </DIV>
Clases y Id
Diferencias entre clases e ID
La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma univoca y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.
Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.
class
Los class se definen utilizando el signo "." seguido por el mombre del identificador y luego las propiedades del estilo.
Mediante la definición de 'clases' se establecen
estilos que pueden aplicarse a cualquier selector HTML o elemento de la página. El estilo definido en una clase no está vinculado a una etiqueta o elemento concreto sino a una 'clase', y esta clase se puede anudar a cualquier etiqueta HTML o grupo de ellas.
Por ejemplo:
.Piepagina { font-size: small; }
La clase "piepagina" (definida en la cabecera de la pagina o en archivo externo) puede usarse con cualquier elemento, y visualizara con tipo de letra pequeña el texto al que afecte:
<p class="Piepagina"> <h1 class="Piepagina"> <div class="Piepagina"> <span class="Piepagina">
La clase asi definida puede usarse en cualquier elemento o selector: en el primer caso, afectaría al texto dentro del párrafo <p> </p>; en el segundo, a la cabecera h1; en el tercero, a todo el bloque div (cualquiera que fueran las etiquetas que incluya); y en el cuarto, al bloque span
P.miclase.miotraclase
sería inválido.
Pero si pueden establecerse clases separadas. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilos:
h1.roja {font: 15pt/17pt; color: red;} h1.verde {font: 15pt/17pt; color: green;} h1.azul {font: 15pt/17pt;color: blue;}
y usar una clase u otra en la Página Web como sigue:
<h1 class="roja">Este es un encabezamiento rojo</h1> ... <h1 class="azul">Este es azul </h1> ... <h1 class="verde">Y este .... verde</h1>
Cuando aplicamos una sintaxis del estilo elementohtml.clase esa regla de estilo solo se aplicará a ese elemento html que tenga asignada esta clase.
Selector ID
Los ID se definen utilizando el signo "#" seguido por el mombre del identificador y luego las propiedades del estilo.
Mediante el atributo id podemos establecer una identidad única para un único elemento de la página. La sistaxis html sería por ejemplo <p id="menu">, donde especificamos la identidad "menu" para ese unico párrafo.
Al elemento html pueden asignarsele estilos a traves del selector id:
#menu {estilos ...}
o bienp#menu {estilos ...}
Los selectores contextuales pueden buscar tipos de elementos, atributos CLASS, atributos ID o combinaciones de éstos:
DIV P { font: small sans-serif }
.rojizo H1 { color: red }
#x78y CODE { background: blue }
DIV.notaalmargen H1 { font-size: large }
El primer selector corresponde a todos los elementos 'P' que tengan a un 'DIV' entre sus ascendientes. El segundo
selector corresponde a todos los elementos 'H1' que tengan un ascendiente de clase 'rojizo'. El tercer selector
corresponde a todos los elementos 'CODE' que sean descendientes del elemento de 'ID=x78y'. El cuarto selector corresponde
a todos los elementos 'H1' que tengan un ascendiente 'DIV' de clase 'notaalmargen'.
Los selectores contextuales también se pueden agrupar:
H1 B, H2 B, H1 EM, H2 EM { color: red }
que es equivalente a:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
