diseño web, programación y maquetado web

HTML (HiperText Markup Languaje)

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. 
Por ejemplo, sus contenidos podrían ser textos en párrafos, listas con viñetas, o imágenes y tablas de datos.
Se combina con otras tecnologías que utilizan códigos como CSS o JavaScript para enriquecer tanto el diseño como la experiencia de uso.

Pero ¿Qué es un hipertexto?: Es un texto que tiene enlaces que conectan páginas web entre sí, ya sea dentro de un página web,  un sitio web o entre sitios web.

Características

HTML utiliza “marcas” para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Esas “marcas” contienten instruciones especiales que realizan funciones dentro de la página web. A esas marcas no referiremos como TAGS DE HTML

<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <progress>, <video>, <ul>, <ol>, <li>

Estructura de las TAGS jhasgdjasgdjhasgd

Las tags se delimitan por el caracter < (menor que) para iniciar la instrucción y el caracter > (mayor que) para terminar la instrucción

Marcado de Textos

Las tags sirven para marcar textos dándoles atributos tanto de forma como de función.

Las tags indican de donde a donde el texto va a ser afectado.

Por ejemplo, si tenemos un texto en el que se desea resaltar una palabra con un peso de letra bold hay que indicarlo al inicio y al final del texto:

 

Ejemplo de texto en el que una palabra va bold

Su código HTML se vería así.

Ejemplo de texto en el que una palabra va <b>bold</b>

El tag <b> indica que el texto que enmarca es bold.

Ejemplo de marcado en una sola línea

Ejemplo de texto en el que una palabra va bold

Su código HTML se vería así:

Ejemplo de texto en el que una palabra va <b>bold</b>

 

La tag se coloca en el inicio del texto a marcar y para indicar que una tag cierra es necesario escribir la misma tag con una diagonal al inicio de la instrucción.

<instruccion> = Tag de html para abrir.
</instruccion> Mismo Tag de html pero ahora para cerrar.

Todo lo que esté en medio de estas dos tags se verá afectado por ellas.

Ejemplo de marcado en varias  líneas

Ejemplo de texto en el que una palabra va bold

Su código HTML se vería así:

Ejemplo de texto en el que una palabra va 
<b>
bold
</b>

Atributos de dentro de las tags de HTML

Cada Tag de HTML puede tener atributos que le indican al navegador cómo debe desplegar el contenido.

<Tag atributo=”valor” atributo2=”valor2″>

Por ejemplo la tag:

<img> Que indica que se va a insertar una imagen tiene varios atributos.

  1. src=”ruta_de_la_imagen/nombre_de_la_imagen.jpg”
  2. width:#px (ancho de la imagen)
  3. height:#px (alto de la imagen)
  4. alt=”Texto alternativo de la imagen” (Texto alternativo por si no es posible desplegar
    la imágen y sirve para las búsquedas de imágenes dentro de google)
Ejemplo de Tag <img> completo
 

<img src=”directorio/nombreimagen.jpg” width:300px height:800px alt=”Este es un ejemplo de texto alternativo”>

Atributos de estilo dentro de las tags de HTML

Cada Tag de HTML puede tener atributos de estilo que le indican al navegador cómo debe desplegar el contenido.

<Tag style=”estilo1:valor del estilo; estilo2:valor del estilo2;”>

Por ejemplo de estilos para la tag:

<p> Que indica que se va a insertar un párrafo.

  1. color: red; (color de la letra)
  2. font-size:#px;  (tamaño de la letra en pixeles)
  3. font-family:’sans-serif’:
  4. background-color:blue;
Ejemplo de Tag <p> con un varios estilos completo
 

<p style=”color:red; font-size:30px; font-family:‘sans-serif’; background-color-blue “>
 Texto del parrafo a afectar issimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimu</p>

Texto del parrafo a afectar issimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimu