====== (X)HTML & CSS ======
===== (X)HTML =====
==== Formato de un documento ====
Un documento xhtml contiene tags (elementos entre los signos ''<'' y ''>''). Es decir, está basado en [[tags:xml|XML]], por lo tanto sigue su especificación. \\
La base de un documento xhtml cualquiera consiste en una tag principal, **html**, y dentro de esta el **head** y el **body**. En el body se encuentra todo el contenido de la web. \\
La primera línea que debe contener un fichero xhtml (como todo documento basado en [[tags:xml|XML]] es cualquiera de las dos siguientes, según la codificación elegida:
Si el documento es un .php puede que nos sea más útil (para que no haya problemas con el parser) utilizar en el bloque ''head'' el equivalente, que sería:
Para indicar el idioma de la página (es, en, fr, ca...) lo pondremos como propiedad en el html:
=== Contenido dentro del head ===
Podemos encontrarnos tags como:
* **title**: Título del documento.
=== El DOCTYPE ===
La segunda línea que debe de contener un documento xhtml es la que indique qué tipo de documento y versión es. De esta forma la página web puede validarse y a la vez la fuerza a seguir el standard. Las definiciones más comunes de DOCTYPE son:
* **strict**
Ideado para combinar el xhtml con una hoja de estilos CSS, por lo que no permite tags como **font**, **center**...
* **frameset**
Una variante del strict pero que permite frames.
==== Escribir\formatear texto ====
* **hX**: Todo lo que encierra la tag '''', siendo //X// un número del 1 al 6, corresponden a títulos\cabeceras del documento. A más grande la //X// el título será más importante.
* **p**: Para dividir el texto en párrafos.
* **blockquote**, **cite** o **q**: Para escribir frases célebres, citas...
* **sub** y **sup**: Para subíndices y superindices... respectivamente.
* **del**: Texto tachado.
* **pre**: Muestra el texto tal y como está escrito, con tabulaciones, saltos de línea...
* **code**: Para colocar código de programación.
* **acronym** y **abbr**: Para añadir un acrónimo o una abreviación al texto, pondremos la aclaración de lo que significan en la propiedad **title**.
* **br**: Añade un salto de línea, se cierra en la misma tag que se abre: ** **
* **hr**, al igual que el br se cierra en la misma tag, coloca una línea horizontal.
* **strong** Para texto en negrita.
* **em** Para texto enfatizado... Es decir, cursiva.
Mi ordenador tiene 512 Mb de memoria RAM.
==== Listas ====
Con las tags **ul** y **ol** podemos crear listas; el primero (ul) lo utilizaremos para listas desordenadas, estas aparecerán con signos como rombos, cuadrados..., el segundo (ol) para ordenadas, las cuales seguirán una numeración. \\
Cada elemento de una lista irá entre el tag **il**.
Animales:
Tigre
Pantera
...
Cosas a hacer por las mañanas:
Levantarse
Desayunar
Ir al curro
Podemos anidar listas creando sublistas, únicamente tenemos que insertar una tag **ul** o **ol** dentro de un **li**.
=== Formatear listar ordenadas ===
La tag **ol** permite la propiedad **type**, esta formateará los elementos de la lista según su valor:
* I: Números romanos en mayúsculas.
* i: Números romanos en minúsculas.
* 1: Números.
* A: Letras mayúsculas.
* a: Letras minúsculas.
Levantarse
Desayunar
Ir al curro
=== Formatear listas desordenadas ===
Al igual que **ol**, **ul** también permite la propiedad **type** con valores que representan el tipo de forma que aparecería:
* square
* circle
* disk
=== Listas de definiciones ===
Para una lista de definiciones utilizaremos la tag **dl**, a partir de entonces utilizaremos **dt** (para un término) y **dd** (para una definición).
HTML
HyperText Markup Language
Element
Describes document content.
==== Tablas ====
Para organizar los datos en tablas utilizaremos la tag **table**. Una tabla contiene filas y una fila contiene celdas, en xhtml todas las filas deben de contener el mismo número de celdas (a no ser que se especifique lo contrario). Para poder montar la tabla utilizaremos las tags **tr** y **td**; dentro de la table abriremos y cerraremos los tr's y dentro de cada tr abriremos y cerraremos los td's, estos útlimos corresponden a las celdas.
A
B
C
D
Dentro de una table podemos añadir otro tipo de tags:
* Un título mediante la tag **caption**.
* Una cabecera,título de columnas, si la primera fila en vez de estar compuesta por td está compuesta por **th**.
How to Use Tables
Col 1
Col 2
Col 3
X
X
X
X
X
X
* Podemos predefinir las columnas mediante tag **col** y agrupar columnas con **colgroup**:
Col 1
Col 2
Col 3
X
X
X
X
X
X
=== Propiedades de table ===
* **border**, admite un número y corresponde al ancho del borde.
* **cellpadding** es el margen entre el borde de una celda y su contenido.
* **cellspacing**, es un número y corresponde a la distancia entre celdas.
=== Propiedades de td ===
* **colspan** es el número que se amplia la columna, es decir, cuantas columnas se extiende.
* **rowspan** número de filas que se extiende la celda.
==== Enlaces y anclas ====
Para un enlace utilizamos la tag **a**, la página donde apunta estará indicada en su propiedad **href**:
Buscador
Podemos poner un tooltip al enlace mediante la propiedad **title**. \\
Podemos hacer un link a una parte de la misma página (ancla) añadiendo una almoadilla al principio de la dirección. La dirección será el identificador (definido por la propiedad **id**) de la tag:
...
Existe otra forma de crear un ancla utilizando la tag **a**, para ello no definiremos la propiedad **href** pero sí la **name**:
==== Imágenes ====
Para incrustar imágenes utilizaremos la tag **img**; para ver exáctamente cómo funciona echemosle un vistazo a sus propiedades:
* **src**: Indica la dirección de la imágen.
* **alt**: Una descripción para la imágen que se mostrará cuando no se cargue la imágen (obligatorio por razones de accesivilidad).
* **width** y **height**: El tamaño de esta. Podemos asignar porcentajes: ''width="50%"''.
* **title**: El texto del tooltip.
Si quisiesemos que la imágen funcionase como un link deberemos anidar el tag **img** dentro del **a**.
==== Formularios ====
Los formularios se montan dentro de la etiqueta **form**, a esta etiqueta podemos añadirle las siguientes propiedades:
* **action** indica que se hará una vez finalizada la introducción de datos; su valor puede ser la dirección de un script al cual se enviarán, una función de javascript...
* **method** admite los valores //get// o //post//.
* **enctype** es la codificación del envio de los datos. Con ''text/plain'' enviará texto plano, uo uo uooooo!!!
=== Introducción de datos ===
A partir de aquí los campos que tendrá el formulario vendrán dados por la tag **input** y el tipo se distinguirá según el valor de la propiedad **type** que podrá ser:
* **text**, se creará un cuadro de texto. Podemos definir un valor por defecto asignándolo a la propiedad **value** o, también, definir un tamaño máximo asignandolo a la propiedad **maxsize**.
* **password** mostrará un cuadro de contraseña, funciona igual que el de texto sólo que sus letras aparecerán como asteriscos.
* **checkbox** un cuadro de verificación.
* **radio** para radiobuttons.
* **submit** un botón que al clickar se envían los datos.
* **reset** un botón que al clickar se borran los datos, se resetea el formulario.
* **file** un botón para escoger un fichero.
Según el tipo de campo la tag **input** admite también la propiedad **size** que corresponde al ancho de este.
=== Otros tipos de campos ===
Existe otro elemento llamado **textarea** que sustituye al **input type="text"**, este permite introducir texto en varias líneas. Para indicar su tamaño utilizaremos sus propiedades **cols** y **rows**. \\
Otro campo posible es el combo, para utilizarlo usaremos la tag **select** y, anidados, todos los elementos del combo en tags **option**. Una **option** puede tener un **value** que correspondrá al valor que enviará si esa es seleccionado.
=== Referenciar datos ===
Existen, también, otras propiedades que pueden sernos de utilidad a la hora de tratar los datos que contienen. **name** nos servirá para crear una variable que tendrá como valor el contenido del campo, para referenciar esa variable tendremos que hacerlo por el valor de esta propiedad. **id**, en cambio, será un identificador el cual no podrá estar repetido en todo el documento.
=== Labels ===
La forma para asignar un texto que acompañe a un campo de texto es utilizando la tag **label**, esta permite la propiedad **for** a la cual asignaremos el nombre del campo que acompañará:
=== Fieldsets ===
Existe una tag, la llamada **fieldset**, que engloba elementos relacionados de un formulario. A esta agrupación podemos asignarle un título con la tag **legend**:
==== Meta tags ====
Las meta tags son unas tags que se colocan en el **head** a parte de la **title**, **style** o **script**. Algunas tienen un uso funcional respecto a la página, es decir, que realizan acciones sobre esta; otras contienen información general sobre la página muy útil para los buscadores.
* '''', palabras clave que los buscadores utilizarán para la página.
* '''', una descripción concisa y clara sobre la web, utilizando un par o tres de las keywords más relevantes.
* '''', para indicar cómo deben actuar los robots de búsqueda frente a tu página, siendo X:
* //all//, para que el robot indexe y siga los links (valor por defecto).
* //none//, para que el robot ni indexe ni siga los links.
* //noindex//, para que el robot no indexe la página.
* //index//, para que el robot indexe la página.
* //follow//, para que el robot siga los links.
* //nofollow//, para que el robot no siga los links.
* '''', hace que se refresque la página cada 30 segundos.
===== Trucos (X)HTML =====
* Existe la tag **span**, esta no representa gráficamente nada, se usa para elegir una porción del contenido y aplicarle un estilo concreto ya que soporta las propiedades **id** y **class**.
* Los comentarios se realizan entre ''''
* Si quieres poner un icono en la barra de direcciones (debe de ser de 16x16) tendrás que usar la siguiente línea en la cabecera:
* Todos los elementos tienen una propiedad denominada **media**, mediante esta indicamos cuando un elemento es visible en pantalla o al imprimir. Acepta //print//, //screen// o //all//.
* Para insertar una imágen .svg utilizamos la siguiente línea:
* Podemos desabilitar fácilmente el menú que coloca el IE en las imágenes desde la misma imágen o desde la cabecera de la página:
===== CSS =====
Una declaración css puede ser añadida en una misma tag o hacerla a parte.
* En una misma tag, utilizando la propiedad **style** de esta: ''
* En un bloque del head específico para css y sólo accesible por ese .html, utilizando el tag: **style**. ''''
Podemos también "importar" otra página de estilos, es decir, ponerla al principio usando ''@import url'':
@import url("prueba2.css");
La etiqueta **style** o la **link** permiten la propiedad **media**, con esta podemos indicar si se aplicará una hoja de estilos cuando se vaya a imprimir u otra:
