HTML

 BREVE RESUMEN SOBRE HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Es el esqueleto de una página web y se encarga de definir la estructura y el contenido del documento.

El código HTML se compone de elementos, que se escriben utilizando etiquetas y atributos. Las etiquetas indican el comienzo y el final de un elemento, mientras que los atributos proporcionan información adicional sobre el elemento.

Los elementos HTML se dividen en dos tipos principales: elementos de bloque y elementos en línea. Los elementos de bloque ocupan todo el ancho disponible de la página y se utilizan para crear secciones principales de una página, como encabezados, párrafos y listas. Los elementos en línea se utilizan para dar formato al texto dentro de los elementos de bloque y para crear elementos como enlaces e imágenes.

Además, HTML permite agregar enlaces a otras páginas web y a recursos como imágenes, audio y video. También se pueden agregar estilos CSS para dar formato y diseño a la página.

En resumen, HTML es un lenguaje fundamental para la creación de páginas web y se utiliza para definir la estructura y el contenido de la página.

CONTENIDOS VISTOS DURANTE EL TRIMESTRE

 

 Aquí os pongo un video explicativo sobre el HTML para que podáis entender mejor los contenidos que explicaré a continuación.

¿CÓMO FUNCIONA HTML?

El HTML no es considerado un lenguaje de programación, ya que no puede crear funcionalidades dinámicas. En su lugar, con HTML, los usuarios web pueden crear y estructurar secciones, párrafos y enlaces mediante elementos, etiquetas y atributos.

Estos son algunos de los usos más comunes de HTML:

• Desarrollo web. Los desarrolladores utilizan el código HTML para diseñar la forma en que un navegador muestra los elementos de la página web, como el texto, los hipervínculos y los archivos multimedia.

• Navegación por Internet. Los visitantes pueden navegar fácilmente y seguir enlaces entre páginas y sitios web relacionados, ya que el HTML se utiliza en gran medida para incrustar hipervínculos.

• Documentación web. HTML permite organizar y dar formato a los documentos, de forma similar a Microsoft Word.

• Etiqueta de apertura. Se utiliza para indicar dónde empieza a tener efecto un elemento. Esta se envuelve con corchetes de apertura y cierre. Por ejemplo, usa la etiqueta de apertura <p> para crear un párrafo.

• Contenido. Es el resultado que ven los demás usuarios.

• Etiqueta de cierre. Igual que la de apertura, pero con una barra inclinada antes del nombre del elemento. Por ejemplo, </p> para terminar un párrafo.

<p>Así es como se añade un párrafo en HTML.</p>

HTML fue inventado por Tim Berners-Lee, un físico del instituto de investigación CERN en Suiza. Se le ocurrió la idea de un sistema de hipertexto basado en Internet y publicó la primera versión de HTML en 1991. Desde entonces, cada nueva versión del lenguaje HTML viene con nuevas etiquetas y atributos para el marcado.

También cabe destacar que HTML es considerado ahora un estándar oficial de la web. El World Wide Web Consortium (W3C) mantiene y desarrolla las especificaciones de HTML, además de proporcionar actualizaciones periódicas.

Un sitio web normal incluye varias páginas HTML diferentes. Por ejemplo, una página de inicio, una página de presentación y una página de contacto tienen archivos HTML distintos.

Los documentos HTML son archivos que terminan con una extensión .html o .htm. El navegador web lee el archivo HTML y muestra su contenido para que los usuarios de Internet puedan verlo.

Todas las páginas HTML cuentan con una serie de elementos HTML, formados por un conjunto de etiquetas y atributos. Los elementos HTML son los bloques de construcción de una página web. Una etiqueta indica al navegador dónde empieza y termina un elemento, mientras que un atributo describe las características de un elemento.

Las tres partes principales de un elemento son:

La combinación de estas tres partes creará un elemento HTML:

Otra parte fundamental de un elemento HTML es su atributo, que tiene dos secciones: un nombre y un valor de atributo. El nombre identifica la información adicional que el usuario quiere añadir, mientras que el valor del atributo da más especificaciones.

Por ejemplo, un elemento de estilo que añada el color púrpura y la tipografía verdana tendrá el siguiente aspecto:

<p style="color:purple;font-family:verdana">Así es como se añade un párrafo en HTML.</p>

Otro atributo, la clase, es el más importante para el desarrollo y la programación. El atributo class añade información de estilo que puede funcionar en diferentes elementos con el mismo valor de class.

Por ejemplo, usaremos el mismo estilo para un encabezado <h1> y un párrafo <p>. El estilo incluye el color de fondo, el color del texto, el borde, el margen y el relleno, bajo la clase .important. Para obtener el mismo estilo entre <h1> y <p>, añada class=’important’ después de cada etiqueta de apertura:

<html>

<head>

<style>

.important {

background-color: blue;

color: white;

border: 2px solid black;

margin: 2px;

padding: 2px;

}

</style>

</head>

<body>

<h1 class="important">Esto es un título.</h1>

<p class="important">Esto es un párrafo.</p>

</body>

</html>

La mayoría de los elementos tienen una etiqueta de apertura y otra de cierre, pero algunos elementos no necesitan las de cierre para funcionar, como los elementos vacíos. Estos elementos no utilizan una etiqueta de cierre porque no tienen contenido:

<img src="/" alt="Image">

Esta etiqueta de imagen tiene dos atributos: un atributo src, la ruta de la imagen, y un atributo alt, el texto descriptivo. Sin embargo, no tiene contenido ni etiqueta final.

Por último, todo documento HTML debe comenzar con una declaración <!DOCTYPE> para informar al navegador sobre el tipo de documento. Con HTML5, la declaración pública doctype HTML será:

<!DOCTYPE html>

OTRAS ETIQUETAS

• <head>. Que define la cabecera del documento html, que se vincula con el título de la ventana del navegador y contiene subelementos como <title> (título), <link> (para vincular a hojas de estilo o modelos estéticos), <meta> (para referir información sobre la autoría del código), etc.

• <img>. Que hace referencia a imágenes y suele estar acompañado de la ruta en donde ésta se encuentra.

• <a>. Para introducir hipervínculos tanto internos como externos, mediante el atributo href y la dirección URL adonde el hipervínculo conducirá.

<title> </title> Etiqueta usada para definir el título de la página web.

• <body> </body> Al contrario que la etiqueta de metadatos <head>, todo lo que quieras mostrar en la página web debe ir recogido dentro de las etiquetas de apertura y cierre de <body>. Este contenido será el que se muestre en la web.

• <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Son etiquetas HTML muy importantes, ya que son usadas para jerarquizar el contenido de la web. Las etiquetas se usan para explicar brevemente el contenido que irá a continuación.

• <p> </p> Etiqueta usada para escribir párrafos de texto.

• <ol> </ol> Etiquetas para crear una lista ordenada

• <br> Etiqueta utilizada para crear un salto de línea

• <table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.

• <tr> </tr> Se usa para indicar una fila de celdas de una tabla.

• <td> </td> Usada para definir una celda de una tabla.

Estas son las etiquetas más importantes para poder crear una página web con lo básico, hay muchísimas etiquetas más y cada una se utiliza para algo en concreto.