Fundamentos de HTML5 y CSS3

Fundamentos de HTML y CSS

Introducción a HTML

1.1 ¿Qué es HTML?

HTML es el lenguaje de marcado estándar para crear páginas web.
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).
Es un lenguaje de marcado, no necesita compilación y es interpretado directamente por los navegadores.
Un archivo HTML es un archivo de texto que contiene elementos y etiquetas HTML.
Los archivos HTML deben tener la extensión.html o .htm.
HTML no distingue entre mayúsculas y minúsculas (HTML es igual a html).
HTML es mantenido por el W3C (World Wide Web Consortium).
HTML es la puerta de entrada al mundo de las tecnologías web.

1.2 Historial de Desarrollo

HTML 2.0: Publicado en noviembre de 1995 (RFC 1866), obsoleto con RFC 2854.
HTML 3.2: Recomendación W3C del 14 de enero de 1997.
HTML 4.0: Recomendación W3C del 18 de diciembre de 1997.
HTML 4.01: Recomendación W3C del 24 de diciembre de 1999 (pequeñas mejoras).
HTML5: Recomendación W3C del 28 de octubre de 2014.

1.3 Origen de HTML5

El borrador previo de HTML5 se llamaba Web Applications 1.0 y fue propuesto por WHATWG en 2004.
Fue adoptado por el W3C en 2007, creando un nuevo grupo de trabajo para HTML.
El primer borrador oficial de HTML5 se publicó el 22 de enero de 2008.
El 17 de diciembre de 2012, el W3C anunció la finalización de la especificación HTML5.
El 6 de mayo de 2013 se publicó el borrador oficial de HTML 5.1.
El 29 de octubre de 2014, el W3C anunció la finalización del estándar HTML5.

1.4 Ventajas de HTML5

Mejora la usabilidad y la experiencia del usuario.
Introduce nuevas etiquetas semánticas para definir contenido importante.
Permite la inclusión de elementos multimedia (audio, video) de forma nativa.
Puede reemplazar a tecnologías como Flash y Silverlight.
Es amigable con el SEO (optimización para motores de búsqueda).
Se aplica extensamente en aplicaciones móviles y juegos.
Ofrece buena portabilidad.

1.5 Compatibilidad de HTML5

Internet Explorer 9 y versiones posteriores.
Chrome, Safari, Opera, Firefox y navegadores basados en WebKit.

Organizaciones Relevantes

IETF (The Internet Engineering Task Force)

Organismo de estandarización técnica para Internet, fundado a finales de 1985. Es responsable de la investigación y el desarrollo de especificaciones técnicas para Internet.

W3C (World Wide Web Consortium)

Fundado en 1994, es la principal organización internacional para la estandarización de tecnologías web. Ha publicado numerosas especificaciones, como HTML, XML y WCAG.

WHATWG (Web Hypertext Application Technology Working Group)

Grupo formado en 2004 por compañías como Opera, Mozilla Foundation y Apple, con el objetivo de impulsar el desarrollo del estándar HTML5.

Sintaxis Básica de HTML

2.1 Etiquetas HTML

Las etiquetas son la unidad fundamental de HTML.
Se delimitan por corchetes angulares: < y >.
Existen etiquetas de apertura y cierre (dobles) y etiquetas de autocierre (simples).
Etiquetas dobles: <etiqueta>Contenido</etiqueta> (ej: <table></table>).
Etiquetas simples: <etiqueta /> (ej: <br />, <hr />).
Las etiquetas no distinguen mayúsculas/minúsculas, pero se recomienda usar minúsculas por convención y para cumplir con XHTML.
La semántica es crucial para las etiquetas HTML.

2.2 Atributos de Etiquetas HTML

Los atributos proporcionan información adicional y se definen dentro de la etiqueta de apertura.
Los valores de los atributos deben ir entre comillas dobles.
Una etiqueta puede tener múltiples atributos.
La sintaxis es: <etiqueta atributo1="valor1" atributo2="valor2">Contenido</etiqueta>.

2.3 Formato del Código HTML

Los saltos de línea y espacios en el código fuente no afectan la visualización. Se recomienda usar indentación y saltos de línea para mejorar la legibilidad y facilitar la colaboración.

2.4 Comentarios HTML

Se utilizan para añadir notas explicativas en el código que no serán interpretadas por el navegador.

<!-- Este es un comentario -->
<!--
   Comentario
   de varias
   líneas
-->

2.5 Entidades HTML (Caracteres Especiales)

Carácter	Descripción	Nombre de Entidad	Código Numérico
	Espacio	` `	` `
<	Menor que	`<`	`<`
>	Mayor que	`>`	`>`
&	Y comercial (ampersand)	`&`	`&`
"	Comillas dobles	`"`	`"`
'	Comillas simples (no soportado en IE)	`'`	`'`
¢	Cent	`¢`	`¢`
£	Libra esterlina	`£`	`£`
¥	Yen	`¥`	`¥`
€	Euro	`€`	`€`
§	Sección	`§`	`§`
©	Copyright	`©`	`©`
®	Marca registrada	`®`	`®`
™	Marca comercial	`™`	`™`
×	Multiplicación	`×`	`×`
÷	División	`÷`	`÷`

Etiquetas Comunes de HTML

3.1 Declaración del Documento

La declaración `` informa al navegador sobre la versión de HTML utilizada, permitiendo activar el modo de estándares.

3.2 Etiquetas Estructurales Principales

<html></html>: Raíz del documento HTML.
<head></head>: Contiene metadatos, enlaces a estilos y scripts.
<body></body>: Contiene el contenido visible de la página.

3.3 Etiquetas del Encabezado (`<head>`)

<title></title>: Define el título del documento que aparece en la pestaña del navegador.
<base />: Establece una URL base o destino para todos los enlaces del documento.
<meta />: Proporciona metadatos sobre la página (ej. codificación de caracteres, descripción, palabras clave). ```
<link></link>: Define la relación entre el documento y recursos externos (ej. hojas de estilo CSS, favicons). ```
<style></style>: Contiene estilos CSS internos.
<script></script>: Incluye código JavaScript o enlaza a archivos de script externos. ```

3.4 Metadatos (`<meta>`)

content: Valor asociado a name o http-equiv.
name: Asocia un nombre a la información (ej. author, description, keywords, robots).
http-equiv: Simula una cabecera HTTP (ej. content-type, refresh, expires).
charset: Especifica la codificación de caracteres del documento. ```
Palabras clave: ```
Descripción: ```

Robots (instrucciones para rastreadores): ```



- `index`/`noindex`: Permite/Prohíbe la indexación.
- `follow`/`nofollow`: Permite/Prohíbe seguir los enlaces.
- `all`: Permite indexación y seguimiento (predeterminado).
- `none`: Prohíbe indexación y seguimiento.
- `noarchive`: Prohíbe mostrar una versión en caché.

Autor: ```
Redirección: ```

3.5 Etiquetas de Formato y Estructura

<br />: Salto de línea.
<hr />: Línea horizontal.
<p></p>: Párrafo.
<pre></pre>: Texto preformateado (respeta espacios y saltos de línea).
<h1> a </h6>: Encabezados de diferentes niveles.
<div></div>: Contenedor genérico sin semántica específica.

3.6 Etiquetas de Texto

<em></em>: Énfasis (generalmente itálica).
<strong></strong>: Énfasis fuerte (generalmente negrita).
<del></del>: Texto eliminado.
<ins></ins>: Texto insertado.
<sub></sub>: Texto subíndice.
<sup></sup>: Texto superíndice.
<mark></mark> (HTML5): Texto resaltado.
<ruby></ruby> (HTML5): Para anotaciones ruby (ej. pronunciación en idiomas asiáticos).
<rt></rt> (HTML5): La anotación o pronunciación dentro de <ruby>.
Otras etiquetas de texto (algunas obsoletas o de uso específico): <cite>, <dfn>, ``, <samp>, <kbd>, <abbr>, <bdo>, <var>, <small>, <b>, <i>, <u>, <q> (cita corta), <blockquote> (cita larga), <adress>, <time> (HTML5).
HTML5 ha eliminado etiquetas como <font>, <tt>, <big>, <strike>, <acronym>.

Fundamentos de CSS

4.1 Métodos de Inclusión

Atributo style: CSS en línea, aplicado directamente a una etiqueta. ```
Etiqueta <style>: CSS interno, dentro del encabezado del documento HTML. ```
Archivo CSS externo: Enlace a un archivo .css. Es el método más recomendado. ```

4.2 Estructura de una Regla CSS

Una regla CSS consta de un selector y una o más declaraciones.

Selector: Identifica a qué elemento(s) HTML se aplicará el estilo.
Declaración: Define una propiedad CSS y su valor. Las declaraciones van entre llaves {}, separadas por punto y coma ;.

selector {
 propiedad: valor;
 otra-propiedad: otro-valor;
}

Ejemplo:

p {
 color: blue; /* Color del texto */
 font-size: 16px; /* Tamaño de fuente */
}

4.3 Comentarios CSS

Se utilizan para añadir notas explicativas.

/* Este es un comentario CSS */

4.4 Unidades de Longitud en CSS

em: Relativo al tamaño de fuente del elemento padre.
px (píxeles): Unidad absoluta, un punto en la pantalla.
% (porcentaje): Relativo al tamaño del contenedor padre.
pt (puntos): Unidad para impresión (1pt = 1/72 pulgada).
cm (centímetros), mm (milímetros): Unidades absolutas para impresión.

4.5 Unidades de Color en CSS

Nombres de color: red, blue, green, etc.
RGB (Decimal):
- rgb(255, 0, 0) (valores 0-255)
- rgb(100%, 0%, 0%) (valores 0%-100%)
RGB (Hexadecimal):
- #rrggbb (ej. #FF0000 para rojo)
- #rgb (forma corta, ej. #F00 para rojo)
RGBA / Hexadecimal con Alpha: Permiten especificar transparencia (ej. rgba(255, 0, 0, 0.5), #FF000080).
HSL / HSLA: Matiz, Saturación, Luminosidad.

Selectores CSS Básicos

Selector de elemento: Selecciona todas las instancias de una etiqueta HTML. ``` div { ... }
Selector de ID: Selecciona un elemento con un ID específico (debe ser único en la página). ``` #miId { ... }
Selector de Clase: Selecciona elementos que tienen una clase CSS específica. ``` .miClase { ... }
Selector Universal: Selecciona todos los elementos de la página. ```
- { ... }
Selector de Descendiente: Selecciona elementos que son descendientes (hijos, nietos, etc.) de otro elemento. ``` .contenedor li { ... }
Selector de Hijo Directo: Selecciona elementos que son hijos directos de otro elemento. ``` .nav > li { ... }
Selectores de Grupo (Combinados): Permiten aplicar la misma regla a múltiples selectores. ``` h1, h2, .titulo { ... }
Selectores Múltiples (Combinación de Atributos): Combinan diferentes tipos de selectores para ser más específicos. ``` div.articulo { ... } .resaltado.importante { ... } #encabezado nav { ... }

Especificidad de Selectores CSS

La especificidad determina qué regla CSS se aplica si múltiples reglas apuntan al mismo elemento. Se calcula de la siguiente manera:

Contar el número de selectores de ID (cada ID tiene un peso mayor).
Contar el número de selectores de clase, atributos y pseudo-clases.
Contar el número de selectores de etiqueta y pseudo-elementos.
Los selectores universales y de combinadores no tienen peso propio.

Se suman los pesos (ID: 100, Clase/Atributo/Pseudo-clase: 10, Etiqueta/Pseudo-elemento: 1). La regla con el valor total más alto es la que se aplica.

Propiedades CSS Comunes

7.1 Propiedades de Fuente

font: Propiedad abreviada para configurar varias propiedades de fuente (estilo, peso, tamaño, línea-altura, familia). ``` font: italic bold 16px/1.5 Arial, sans-serif;
font-family: Especifica la familia de fuentes (ej. "Times New Roman", serif).
font-size: Tamaño de la fuente (ej. 16px, 1.2em, 80%).
font-style: Estilo de la fuente (normal, italic, oblique).
font-weight: Grosor de la fuente (normal, bold, lighter, bolder, valores numéricos 100-900).
font-variant: Variante de la fuente (normal, small-caps).

7.2 Color de Texto

color: Establece el color del texto.

7.3 Propiedades de Texto

letter-spacing: Espaciado entre caracteres. Puede ser negativo.
word-spacing: Espaciado entre palabras.
text-decoration: Decoración del texto (none, underline, overline, line-through).
text-align: Alineación horizontal del texto (left, right, center, justify).
vertical-align: Alineación vertical (para elementos inline o table-cell). Valores comunes: top, middle, bottom, baseline.
text-indent: Indentación de la primera línea de un texto (ej. 2em, 30px).
line-height: Espacio entre líneas de texto.
word-break: Controla cómo se rompen las palabras en los saltos de línea (normal, break-all, keep-all).
word-wrap (obsoleto, ahora overflow-wrap): Permite que palabras largas o URLs se salten a la línea siguiente. Valor común: break-word.
white-space: Manejo de los espacios en blanco y saltos de línea (normal, nowrap, pre, pre-wrap, pre-line).

Etiquetas: HTML css HTML5 Web Development Basics

Publicado el 6-13 02:01

Friki Work

Fundamentos de HTML5 y CSS3

Fundamentos de HTML y CSS

1.1 ¿Qué es HTML?

1.2 Historial de Desarrollo

1.3 Origen de HTML5

1.4 Ventajas de HTML5

1.5 Compatibilidad de HTML5

Organizaciones Relevantes

IETF (The Internet Engineering Task Force)

W3C (World Wide Web Consortium)

WHATWG (Web Hypertext Application Technology Working Group)

2.1 Etiquetas HTML

2.2 Atributos de Etiquetas HTML

2.3 Formato del Código HTML

2.4 Comentarios HTML

2.5 Entidades HTML (Caracteres Especiales)

3.1 Declaración del Documento

3.2 Etiquetas Estructurales Principales

3.3 Etiquetas del Encabezado (`<head>`)

3.4 Metadatos (`<meta>`)

3.5 Etiquetas de Formato y Estructura

3.6 Etiquetas de Texto

4.1 Métodos de Inclusión

4.2 Estructura de una Regla CSS

4.3 Comentarios CSS

4.4 Unidades de Longitud en CSS

4.5 Unidades de Color en CSS

7.1 Propiedades de Fuente

7.2 Color de Texto

7.3 Propiedades de Texto

Etiquetas populares

Carácter	Descripción	Nombre de Entidad	Código Numérico
	Espacio	` `	` `
<	Menor que	`<`	`<`
>	Mayor que	`>`	`>`
&	Y comercial (ampersand)	`&`	`&`
"	Comillas dobles	`"`	`"`
'	Comillas simples (no soportado en IE)	`'`	`'`
¢	Cent	`¢`	`¢`
£	Libra esterlina	`£`	`£`
¥	Yen	`¥`	`¥`
€	Euro	`€`	`€`
§	Sección	`§`	`§`
©	Copyright	`©`	`©`
®	Marca registrada	`®`	`®`
™	Marca comercial	`™`	`™`
×	Multiplicación	`×`	`×`
÷	División	`÷`	`÷`

Carácter	Descripción	Nombre de Entidad	Código Numérico
	Espacio	` `	` `
<	Menor que	`<`	`<`
>	Mayor que	`>`	`>`
&	Y comercial (ampersand)	`&`	`&`
"	Comillas dobles	`"`	`"`
'	Comillas simples (no soportado en IE)	`'`	`'`
¢	Cent	`¢`	`¢`
£	Libra esterlina	`£`	`£`
¥	Yen	`¥`	`¥`
€	Euro	`€`	`€`
§	Sección	`§`	`§`
©	Copyright	`©`	`©`
®	Marca registrada	`®`	`®`
™	Marca comercial	`™`	`™`
×	Multiplicación	`×`	`×`
÷	División	`÷`	`÷`

Friki Work

Fundamentos de HTML5 y CSS3

Fundamentos de HTML y CSS

1.1 ¿Qué es HTML?

1.2 Historial de Desarrollo

1.3 Origen de HTML5

1.4 Ventajas de HTML5

1.5 Compatibilidad de HTML5

Organizaciones Relevantes

IETF (The Internet Engineering Task Force)

W3C (World Wide Web Consortium)

WHATWG (Web Hypertext Application Technology Working Group)

2.1 Etiquetas HTML

2.2 Atributos de Etiquetas HTML

2.3 Formato del Código HTML

2.4 Comentarios HTML

2.5 Entidades HTML (Caracteres Especiales)

3.1 Declaración del Documento

3.2 Etiquetas Estructurales Principales

3.3 Etiquetas del Encabezado (<head>)

3.4 Metadatos (<meta>)

3.5 Etiquetas de Formato y Estructura

3.6 Etiquetas de Texto

4.1 Métodos de Inclusión

4.2 Estructura de una Regla CSS

4.3 Comentarios CSS

4.4 Unidades de Longitud en CSS

4.5 Unidades de Color en CSS

7.1 Propiedades de Fuente

7.2 Color de Texto

7.3 Propiedades de Texto

Etiquetas populares

3.3 Etiquetas del Encabezado (`<head>`)

3.4 Metadatos (`<meta>`)

Carácter	Descripción	Nombre de Entidad	Código Numérico
	Espacio	` `	` `
<	Menor que	`<`	`<`
>	Mayor que	`>`	`>`
&	Y comercial (ampersand)	`&`	`&`
"	Comillas dobles	`"`	`"`
'	Comillas simples (no soportado en IE)	`'`	`'`
¢	Cent	`¢`	`¢`
£	Libra esterlina	`£`	`£`
¥	Yen	`¥`	`¥`
€	Euro	`€`	`€`
§	Sección	`§`	`§`
©	Copyright	`©`	`©`
®	Marca registrada	`®`	`®`
™	Marca comercial	`™`	`™`
×	Multiplicación	`×`	`×`
÷	División	`÷`	`÷`