HTML5 y CSS3: Guía completa para el desarrollo web moderno

Lenguajes de la Web (HTML5, CSS3)

1. HTML: HyperText Markup Language

– Lenguaje de marcas para publicar documentos multimedia e hipertexto.

– Los documentos HTML son ficheros de texto con marcas de formato que son independientes del sistema operativo, lenguaje de programación y programas.

– Las marcas o etiquetas indican cómo representar los contenidos de los documentos.

Elemento con contenido: <html> ... </html>
Elemento vacío: <br/> o <br></br>
Etiqueta con atributos: <body class="principal">...</body>

– Extensiones de fichero: .html o .htm

– Cuestiones de estilo: etiquetas en minúsculas y atributos entre comillas dobles (XML).

2. Renderizado HTML

– Los documentos HTML pueden ser renderizados en pantallas, sintetizadores de habla y dispositivos Braille.

– Para indicar cómo aparece el renderizado se ha definido el CSS (Cascade Style Sheet).

– Cuando un documento HTML se renderiza se guarda en la memoria como un árbol DOM (Document Object Model).

– Renderizado básico en el navegador: BLOCK / INLINE

Los elementos HTML se dividen en dos grandes tipos:

block: tienden a ocupar todo el espacio disponible a lo ancho y, en caso de existir varios elementos, se sitúan unos debajo de otros. (p, aside, footer, div, table, etc.).
inline: ocupan el espacio necesario dentro de una línea y en caso de existir varios elementos se sitúan uno junto a otro en la misma línea siempre que haya espacio (span, a, etc.)

– Elementos en línea:

<b>, <big>, <i>, <small>, <tt>
<abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <time>, <var>
<a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>
<button>, <input>, <label>, <select>, <textarea>

3. Recomendaciones: Accesibilidad y usabilidad

Etiquetas y atributos en minúsculas.
Organización lógica del documento según estándar: h1, h2, h3…
No usar tablas (<table>) para estructurar la página.
Intentar que sin el estilo CSS se pueda entender el contenido.
Resaltar los textos tanto con forma como con color distintos.
No utilizar espacios en blanco consecutivos, mejor usa CSS: margin, padding, span
Uso preferente de etiquetas semánticas <header>, <article> … frente a <div>.

4. HTML5

Comienza con la definición del Doctype <!DOCTYPE html>. (<?xml version="1.0" encoding="utf-8"?> si es válido XML).
Elementos obligatorios: html, head, title, y body.

– Elementos HTML5 Multimedia

Audio: <audio src="..." > </audio>
Vídeo: <video src="..."> </video>
Animación: <canvas> </canvas> (+JavaScript)
Soporte Imágenes vectoriales: SVG (Scalable Vector Graphics)

5. Estructura semántica

<p>: Mínimo bloque en HTML.
<div>: Une bloques de distintos tipos, cuando no podemos asociar significado semántico a este conjunto.
<header>: Encabezado de la página.
<footer>: Pie de página.
<nav>: Menú de navegación.
<hgroup>: Agrupación de titulares.
<article>: Elementos con significado propio. Puede contener: <header>, <section>, <aside> y <footer>, puede ser un documento entero.
<section>: Declaramos que el conjunto de etiquetas tiene un contenido relacionado. Equivalente a una sección de un periódico que engloba varios artículos.
<aside>: Bloque que es sólo un añadido a los bloques que tiene al lado. Son datos extra sin lo que podríamos pasar perfectamente, pero que hemos decidido añadir en el documento.

6. Formularios: HTML Dinámico

– Atributos FORM:

method: get (defecto) / post
action (obligatorio): Indica la URL o función JS que procesará la información del formulario.
enctype: El tipo mime empleado para codificar el contenido del formulario.

– Etiquetas de los formularios:

<input>, <select>, <textarea>, <button>

7. CSS (Cascade Style Sheets)

– HTML utiliza un conjunto de etiquetas predefinidas, cuyo significado es bien conocido. Un navegador sabe cómo debe mostrar estos elementos al usuario.

h2 {
  color: blue;
}

– Las CSS (Cascade Style Sheets): son un conjunto de distintas reglas de estilo unidas a un documento que permiten definir estilos para mostrar a los elementos de HTML.

– CSS: En navegadores

Los navegadores tienen su propio conjunto de reglas de estilo.
Los navegadores no soportan el estándar CSS al 100%.

– CSS: Ventajas

Separar el contenido del formato.
Reducir el tiempo de descarga.
Dar más control sobre el renderizado de HTML.
Utilizar un mismo estilo para todo el portal web para que tenga una apariencia uniforme y consistente.
Cada usuario puede aplicar sus propias reglas de estilo.
Las reglas se aplican de forma jerárquica o en cascada.
Se combinan reglas del navegador con las del diseñador.

– CSS: Sintaxis

Una regla de estilo se compone de:

Selector: enlace entre el documento HTML y el estilo.

h1, h2, h3 {
  color: blue;
  text-align: center;
}

Declaración: describe el efecto de la regla.

h1 {
  color: red;
}

¿Prioridad de las reglas?

Orden de declaración.
Especificidad del selector.

– ¿Cómo se enlaza CSS con HTML?

Dentro de la definición de etiquetas en el HTML (No abusar)
En HTML dentro de la cabecera: etiqueta <style>

<style>
  body {
    color: purple;
    background-color: #....;
  }
</style>

En ficheros externos .css e importarlos: <link> / @import

8. Tipos de selectores

<h1>Directorio1</h1>
<h2>Directorio1.2</h2>
<h2>Directorio1.3</h2>

Etiquetas: h1 { color: blue; }
Identificador de elemento (atributo id):

#directorio {
  ......
  }

Clases de elementos (atributo class):

. {
  font-weight: bold;
  color: red;
}

– Tipos de selectores

Pseudo-Clases:
- :link cualquier enlace no visitado de la página.
- :visited cualquier enlace ya visitado de la página. –> a:visited { color: gray; }
- :active enlace en el que estamos en este momento.
Pseudo-Elementos:
- p:first-letter { color: red; }
- p:first-line { color: gray; }
En función del contexto:
- td b { color: green; }
- ul b { color: #...; }

El atributo color del CSS soporta nombre en inglés o HEXA, RGB y HSL.

9. Unidades CSS

Medidas relativas: em (tamaño de la fuente), ex (altura de la letra «x» de la fuente actual), px (píxeles, resolución de pantalla).
Medidas absolutas: in (pulgadas), cm (centímetros), mm (milímetros), pt (puntos tipográficos), pc (picas)
Unidades de medida relativas: *Porcentajes (margin-left: 20%), *Proporcionales (margin-left: 3*)

– Tamaño de la fuente: FONT-SIZE:

Absolutos: [xx-small | x-small | small | medium | large | x-large | xx-large]
Relativos: [larger | smaller]

10. CSS3

Transformaciones, transiciones, animaciones, fuentes propias, columnas, transparencia, degradados, bordes redondos.

11. Modelo de cajas

– Los elementos HTML son de 2 tipos: block e inline.

– La propiedad display altera el tipo de caja de un elemento.

inline: el elemento no es un bloque, se renderiza en línea con otros elementos de ese tipo.
block: el elemento se comporta como un bloque, podemos poner márgenes y bordes.
none: el elemento no se muestra; el efecto es como si no existiera, por lo que su espacio será ocupado por otros.
inherit: se heredan las características del elemento padre.
flex: el elemento es flexible en posición horizontal y vertical.
inline-block: el elemento de bloque pero que se renderiza en línea con otros elementos.

– Propiedades de la caja: (De fuera hacia dentro)

Margin: Left – Top (Arriba) – Right – Bottom (Abajo).
Border: Left – Top (Arriba) – Right – Bottom (Abajo).
Padding: Left – Top (Arriba) – Right – Bottom (Abajo).

– Margin / Padding estructura

margin / padding: top - right - bottom - left

– Propiedad overflow

Propiedad que especifica qué hacer con el contenido excedente en un elemento a nivel de bloque.

visible (por defecto): Contenido no recortado, podría ser dibujado fuera de la caja contenedora.
hidden: Contenido recortado.
scroll: Contenido recortado y el Navegador, usa barras de desplazamiento.
auto: Depende del Navegador.

– Modelo de cajas: Position

static: Posición predeterminada en HTML.
relative: La posición de la caja se ajusta en relación a su posición normal dentro de la página. La caja siguiente se sitúa como si esta no se hubiera desplazado.
absolute: Las cajas son quitadas del flujo normal, su posición se especifica con las propiedades ‘left’, ‘right’, ‘top’ y ‘bottom’. No tienen ninguna influencia sobre la posición de las cajas siguientes.
fixed: Como el anterior, pero se posiciona en función de la ventana del navegador. Esta caja no se mueve de posición al hacer scroll.

– Cajas flotantes: Float

left: La caja se desplaza todo lo posible a la izquierda de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su derecha.
```
#dos0 {
  float: right;
  border....;
}
  
```
right: Lo mismo a la izquierda.
```
#uno0 {
  float: left;
  .....;
}
  
```
none: No deja elementos flotantes.

– Cajas flexibles: Diseño flexibles

Un diseño flexible permite para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

Contenedor flexible (Flex container): se define usando los valores flex o inline-flex en la propiedad display del contenedor o elemento «padre» que contiene los elementos flexibles.
Cada hijo de un contenedor flex se convierte en un elemento flexible (Flex item), que permite cajas a su derecha o izquierda.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

– Columns

div.content-box {
  columns: 3 auto;
}

12. CSS: Discriminación por dispositivos

– MEDIA-TYPE

Permite categorizar los dispositivos de usuario.
Se usaron originalmente para seleccionar en HTML4 distintos CSS en función del dispositivo del usuario.
Pero son insuficientes como una manera de discriminar entre dispositivos con diferentes.
Media Types: all, braille, embossed, handheld, print, projection, screen, speech, , tty, tv.

– MEDIA-QUERIES

Las consultas de medios (media queries) son simples filtros que pueden aplicarse a los estilos CSS.
Facilitan el cambio de estilos según el tipo de dispositivo (media-type) o las características del dispositivo (media-feature), como el tipo de pantalla, el ancho, el alto, la orientación e incluso la resolución.

@media (query) { //CSS Rules }

– MEDIA-FEATURE

* min-width: Reglas aplicadas a cualquier ancho de ventana de navegador que supere el valor definido en la consulta.

* max-width: Reglas aplicadas a cualquier ancho de ventana de navegador que sea inferior al valor definido en la consulta.

* min-height: Reglas aplicadas a cualquier alto de ventana de navegador que supere el valor definido en la consulta.

* max-height: Reglas aplicadas a cualquier alto de ventana de navegador que sea inferior al valor definido en la consulta.

* orientation=portrait: Reglas aplicadas a cualquier navegador cuyo alto de ventana sea superior o igual a ancho.

* orientation=landscape: Reglas aplicadas a cualquier navegador cuyo ancho sea superior al alto.