# data[].attributes.body
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera.
Este lenguaje permite estructurar el texto de los documentos y se basa en etiquetas que determinan cómo debe mostrarse el texto y los atributos que pueden tomar dichas etiquetas.

HTML - Estructura de la web

# data[].attributes.body
En HTML, la estructura de una tabla tiene que ver con etiquetas, una etiqueta <table> indica que es un elemento de tabla, dentro de ella va otra etiqueta <tr> y esta señala las filas de una tabla y finalmente, dentro de cada fila expresada con etiqueta <tr> va otra etiqueta <td> y es básicamente un cuadrito o CELDA de la tabla contenida en una fila, y dentro de ella irá el contenido deseado.

Etiqueta <table>

Para crear y definir una tabla en HTML, simplemente empleamos la etiqueta <table>.

<table>

</table>

Etiqueta <tr>

Para crear una fila dentro de una tabla (<table>) empleamos la etiqueta <tr>; si deseamos varias filas, entonces crearemos varias etiquetas <tr> con su respectiva etiqueta de cierre.

<table>
<tr>
</tr>

<tr>
</tr>

<tr>
</tr>
</table>

Etiqueta <td>

La etiqueta <td> va dentro de <tr>. Por cada <td> se crea una columna dentro de la fila <tr>.

La etiqueta <td> Prácticamente actúa como contenedor, dentro de ella irán los contenidos de tabla, puede ir texto, imágenes, e incluso más tablas y otros elementos HTML

<table>
<tr>
<td> Primero </td>
<td> Segundo </td>
<td> Tercero </td>
</tr>
</table>

Dentro de las tablas <table> van las filas <tr> y dentro de las filas van las columnas <td>, además, dentro de las tablas pueden ir varias filas y dentro de las filas pueden ir varias columnas.

Atributo border

Cuando creamos una tabla, por defecto no tiene ningún borde, más parece una lista sin estilo.

Para ponerle borde a la tabla utilizamos el atributo border y en su valor la dimensión de ese borde.

<table border="1px">
<tr>
<td> Primero </td>
<td> Segundo </td>
<td> Tercero </td>
</tr>
</table>

Etiqueta <th>

Utilizaremos <th> para poner encabezado a la tabla en su primera fila.

Combinar filas en tablas HTML

Para combinar celdas de distintas filas en una tabla HTML emplearemos el atributo rowspan dentro del elemento <td> desde donde se extenderá la combinación y en su valor colocaremos el número de filas que serán combinadas.

<table border="1">
<tr>
<td rowspan="2"> Oso </td>
<td> León </td>
<td> Tigre </td>
</tr>

<tr>
<td> Cebra </td>
<td rowspan="3"> Panda </td>
</tr>

<tr>
<td> Loro </td>
<td> Pato </td>
</tr>

<tr>
<td> Buo </td>
<td> Águila </td>
</tr>

</table>

Combinar columnas de tablas en HTML

Se emplea el atributo COLSPAN en el elemento desde donde se hará la combinación, a partir de ahí se combinará el número de celdas especificada en el valor del atributo colspan.

<table border="1">
<tr>
<td > Rojo </td>
<td colspan="2"> Verde </td>
</tr>

<tr>
<td> Café </td>
<td> Marrón </td>
<td> Tinto </td>
</tr>

<tr>
<td colspan="3"> Naranja </td>
</tr>

<tr>
<td colspan="2"> Blanco </td>
<td> Negro </td>
</tr>

</table>

Etiquetas <thead>, <tbody> y <tfood> para tablas

Estas etiquetas sirven para identificar la cabecera, el cuerpo y el pie de la tabla, en algunas ocasiones necesitamos definir cuál será la cabecera de nuestra tabla, el cuerpo y el pie de tabla.

A demás de brindar a los elementos de un significado para los navegadores, estas etiquetas pueden ser útiles para dar estilo a nuestras tablas.

<table border="1px">
<thead bgcolor="red">
<tr>
<td> PAQUETES </td>
<td> Paquete 1  </td>
<td> Paquete 2 </td>
<td> Paquete 3 </td>
<td> Paquete 4 </td>
<td> Paquete 5 </td>
</tr>
</thead>

<tbody bgcolor="yellow">
<tr>
<td rowspan="3"> CURSOS  </td>
<td> Matemática  </td>
<td> Ciencias </td>
<td> Matemática </td>
<td> Sociales </td>
<td> Arte </td>
</tr>

<tr>
<td> Inglés </td>
<td> Comunicación </td>
<td> Biologia </td>
<td> Historia </td>
<td> Física </td>
</tr>

<tr>
<td> Computación </td>
<td> Historia </td>
<td> Economia </td>
<td> Química </td>
<td> Redacción </td>
</tr>
</tbody>
<tfoot bgcolor="blue">
<tr>
<td> PRECIOS  </td>
<td> 10 $ </td>
<td> 20 $ </td>
<td> 30 $ </td>
<td> 40 $ </td>
<td> 50 $ </td>
</tr>
</tfoot>

</table>

Atributo bgcolor para color de tabla

Se puede utilizar el atributo bgcolor como lo hicimos en el ejemplo anterior para colocar un color de fondo a un elemento, de esa manera podemos poner color a cada elemento de una tabla html.

# data[].attributes.body
Indica qué tipo de documento debe abrir el navegador y qué sintaxis y gramática utiliza su código fuente.
La tarea de DOCTYPE html es explicar a los programadores y navegadores, a primera vista, de qué Document Type Definition (DTD) se trata y cómo debe renderizarse la web. El DTD indica qué lenguaje de código se utiliza en la página o en el documento HTML. Esto se aplica, por ejemplo, a los archivos HTML, XHTML, SVG, MathML o XML. Siempre se deberia insertar <!DOCTYPE html> al principio.
En caso que no se haga, puede que se produzcan errores de visualización e incluso que la funcionalidad de la web se vea afectada.

# data[].attributes.headline
7, ¿Cómo definir una lista ordenada y no ordenada en HTML?

# data[].attributes.subject
7, ¿Cómo definir una lista ordenada y no ordenada en HTML?

# data[].attributes.body
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo

Listas Ordenadas
Las listas ordenadas en HTML son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden.

Las listas ordenadas en HTML se representan mediante el elemento OL.
Cada uno de los elementos de la lista ordenada se representará mediante el elemento LI.

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  ...
  <li>Elemento N</li>
</ol>

Tipo de lista ordenada: type

De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.

Entre los tipos de listas que podemos representar tenemos:

1 - Listas decimales

a - Listas alfabéticas en minúsculas

A - Listas alfabéticas en mayúsculas

i - Listas de números romanos en minúsculas

I - Listas de números romanos en mayúsculas

Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada en HTML.

<ol type="tipo"> ... </ol>

Si queremos que nuestra lista aparezca ordenada mediante letras en mayúsculas escribimos lo siguiente:

<ol type=”A”>
  <li>Julio</li>
  <li>Carmen</li>
  <li>Ignacio</li>
  <li>Elena</li>
</ol>

En este caso la lista se representará de la siguiente forma:

<ol type=”A”>

Julio

Carmen

Ignacio

Elena

Listas Desordenadas

Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…

Para definir una lista desordenada en HTML utilizamos el elemento ul.
Para representar los elementos de la lista desordenada utilizamos el mismo elemento que con las listas ordenadas, es decir, el elemento li.

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  ...
  <li>Elemento N</li>
</ul>

De esa forma podríamos tener el siguiente código HTML:

<ul>
  <li>FC. Barcelona</li>
  <li>Real Madrid</li>
  <li>Real Betis</li>
  <li>Atlético de Madrid</li>
</ul>

Lo que nos mostrará por pantalla:

FC. Barcelona

Real Madrid

Real Betis

Atlético de Madrid

# data[].attributes.body
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.

# data[].attributes.headline
10. ¿Cuáles son las etiquetas semánticas?

# data[].attributes.subject
10. ¿Cuáles son las etiquetas semánticas?

# data[].attributes.body
Elementos semánticos = Elementos con significado

¿Qué son los elementos semánticos?

Un elemento semántico describe claramente lo que significa tanto para el navegador como para el desarrollador.

- Ejemplos de elementos no semánticos:  <div> o <span>

- Ejemplos de elementos semánticos: <form> <table> <article>

Elementos semánticos en HTML:

Muchas webs contienen código como: <div id="nav">
<div id="header"> <div id="footer"> para indicar: navegación, el encabezado y el pie de página.

En HTML tenemos etiquetas para indicar todas estas cosas y muchas más:

<article> este define el contenido de un artículo, independiente por sí mismo. Un artículo por sí sólo ha de tener sentido. Debería de poderse leer y entenderlo sin leer el resto de la web.

Ejemplo:

- Post de un foro.
- Artículo de un blog.
- Noticia.

¿<article> dentro de <section> o al revés?

Un article específica contenido completo en sí mismo.
Una <section> define una sección del documento.

En internet encontrarás páginas con <section> con <article> dentro, y <article> con <section> dentro.

Ejemplo: en un periódico, un artículo de deporte estará dentro de la sección de deportes, pero es posible que dentro de cada artículo haya diferentes secciones.

<aside> este define contenido a un lado, como barra lateral. El contenido suele estar relacionado con el contenido principal.

Ejemplo:

<p>He usado HTML para crear páginas que he vendido</p>
<aside>
<h4>HTML</h4>
<p>HTML es un lenguaje de marcado usado en las páginas webs.</p>
</aside>

<details>
<figcaption> y <figure> una imagen con su título se pueden agrupar dentro de <figure>. Poniendo el título en la etiqueta <figcaption>. Ejemplo:

<figure>
<img src= "francescagomez.jpg" alt="Francesca Gómez">
<figcaption>Imagen de Francesca Gómez</figcaption>
</figure>

<footer> define el pie de página de un documento o de una sección. Se suele usar para información de contacto, copyright, enlaces a términos de uso, etc.
<header> este específica el encabezado del documento o de una sección. Debería de contener contenido introductorio, y puede contener muchos elementos dentro.
<main>
<mark>
<nav> este define un grupo de enlaces de navegación. Sólo para enlaces de navegación, no cualquier enlace.
<section> Define una sección del documento, normalmente llevan un <h1>
<summary>
<time>

# data[].attributes.headline
11. ¿Cómo crear un formulario y cuáles son los tipos de etiquetas inputs disponibles?

# data[].attributes.subject
11. ¿Cómo crear un formulario y cuáles son los tipos de etiquetas inputs disponibles?

# data[].attributes.body
Crear un formulario en html implica construir los campos de información, estos pueden ser: campos de texto, de número, selectores, desplegables, casillas de verificación y entre otras más.

Etiqueta <form>

La etiqueta <form> indica al navegador que el elemento será un formulario.

<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.

<form>
…Aquí irán los campos del formulario...
</form>

Etiqueta <input>

La etiqueta <input> antecedida de lo que deseas obtener para crear los campos en el formulario.

<form>
Tu nombre: <input/>
Tu apellido: <input/>
</form>

Existen varios tipos campos para formularios HTML y también debemos especificar que tipo de campo es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE.

Atributo type

El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando. Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

Valores de atributo type en formularios HTML

Text: para campos de texto

Password: para campos de contraseña

Checkbox: para casillas de verificación

Radio: para casillas de selección

Submit: para botones de envío

Reset: para botones de resetear

File: para campos de selección de archivo

<form>
Nombre:<input type="text"/>  <br/><br/>
Apellidos:<input type="text"/>   <br/><br/>
Contraseña: <input type="password"/>  <br/><br/>
casilla de verificación: <input type="checkbox"/> <br/><br/>
casilla de selección: <input type="radio"/>  <br/><br/>
selección de archivo:  <input type="file">  <br/><br/>
botón de envio: <input type="submit">
</form>

Crear una desplegable con opciones HTML

Etiqueta <select>

Se usa la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que buscamos buena presentación de espacio en el formulario.

Etiqueta <option>

Utilizaremos la etiqueta <option> dentro de la etiqueta <select>.  <option> contiene una opción del desplegable y podemos implementar la cantidad de opciones que deseemos.

<form>

ELIGE UN COLOR:<select>
<option>Blanco</option>
<option>Negro</option>
<option>Azul</option>
<option>Rojo</option>
<option>Verde</option>
</select>

</form>

Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la opción seleccionada.

Atributos para etiqueta <select> en formularios html

Atributo size.- Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su valor en números.

Atributo multiple.- Utiliza el atributo multiple con valor también multiple para permitir que el desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.

Crear un campo de texto grande en formularios HTML

Un campo de texto con varias lineas disponible en el formulario puede ser necesario para permitir a nuestros usuarios enviar extensos textos y para ello haremos uso de la etiqueta <textarea>.

Etiqueta <textarea>

La etiqueta <textarea> se utilizara para crear un área de texto de varias líneas, puede servirnos por ejemplo para un capo de mensaje.

<form>
Nombre:
<input type="text"/>  <br/><br/>
Correo electrónico:
<input type="email"/>  <br/><br/>
Tu mensaje:
<textarea name="mensaje"> </textarea> <br/><br/>
<input type="submit" value="Enviar ahora"/>

</form>

Atributo action

El valor del atributo action será la URL de la página que queremos que cargue después de que se envíe la información de un formulario. Este atributo va dentro de la etiqueta <form> y lo podemos utilizar si deseamos.

<form action="URL">

Atributo method

El atributo method puede tomar como valores a GET o POST y esto indica el método http que será utilizado cuando se envíe la información.

<form action="URL" method="get">
<form action="URL" method="post">

Cuando se usa el valor get, los datos del formulario podrán ser vistos en la dirección de la página.

Cuando se usa el valor post los datos enviados no serán visibles en la dirección de la página.

Atributo name

Utiliza el atributo name para ponerle un nombre al formulario.

<form name="miformulario" action="URL" method="post">

Para que el formulario funcione correctamente utilizaremos el atributo name  para cada campo del formulario, así será posible recibir correctamente los datos enviados.

El atributo name será necesario ara procesar la información de cada campo y que estas lleguen a su destino correctamente.

# data[].attributes.body
Los enlaces en HTML se escriben con la etiqueta : <a>Enlace</a> pero al momento de visualizarlo no se va a ver nada. Esto sucede porque a la etiqueta enlace le falta el atributo href, es decir:

(Este ejemplo es de rutas URL)

<a
href="https://www.figma.com/">Figma</a>

y por ende funcionará.

También podemos enlazar nuestros archivos, es decir: Estamos en nuestro archivo index.html y queremos enlazarlo con nuestro archivo de servicios.html, lo que debemos hacer es lo siguiente:

En nuestro archivo index.html, dentro de la etiqueta <body> escribimos:

<a href="servicios.html">Servicios</a>

y en el archivo servicios.html escribimos:
<h1> Servicios </h1> al momento de visualizarlo en nuestro navegador si le damos click al link de Servicios nos dirige a la página de Servicios.

¿Qué sucede si queremos que se nos abra en una pestaña nueva?

Le agregamos el atributo target y lo igualamos a blank, es decir:
<a
href="https://www.figma.com/"target="_blank">Figma</a>

de esta forma podremos visualizar nuestro enlace en otra pestaña nueva

No solo los textos pueden ser enlaces, las imágenes también pueden serlo, ejemplo:

<a href="https://www.figma.com/" target="_blank">
<img src="https://www.solucionex.com/sites/default/files/posts/imagen/figma_logo_icon_171159.png"
width="100%">
</a>

al momento de visualizarlo en nuestro navegador, veremos la imagen al hacer clic sobre ella nos llevará a la página que queremos mostrar.

También podemos agregarle texto a la imagen que es enlace con la etiqueta de párrafo <p> </p>, ejemplo:

<a href="https://www.figma.com/" target="_blank">
<img src="https://www.solucionex.com/sites/default/files/posts/imagen/figma_logo_icon_171159.png"
width="100%">

<p> Este es el logo de figma </p>

</a>

La etiqueta <a> también sirve para enlazar emails:

<a href="mailto:figma@email.com" target="_blank">
figma@email.com
</a>

OJO: Debes configurar te gestor de email, sino no funcionará, porque no se te va abrir. Esto será útil si nuestra página la abren desde un móvil.

# data[].attributes.body
Su funcionamiento general se basa en que los usuarios web pueden crear y estructurar secciones, párrafos y enlaces mediante elementos, etiquetas y atributos.
-Elementos:Los ladrillos básicos del lenguaje html, sirven para representar el contenido y sus atributos, así como marcar los parámetros del propio lenguaje, como el punto de inicio de la cadena de comandos y el punto de cierre, o las necesidades especiales.
-Atributos:Las especificaciones respecto a valor, color, posición, etc. de los elementos incorporados en el código. Por lo general consisten en una serie de instrucciones lógicas o numéricas.

# data[].attributes.headline
3.¿Cuál es la diferencia entre HTML y HTML semántico?

# data[].attributes.subject
3.¿Cuál es la diferencia entre HTML y HTML semántico?

# data[].attributes.body
El HTML semántico es un concepto para estructurar y escribir código HTML, de manera que el significado del contenido de una página web sea más claro a través de sus etiquetas.
Las etiquetas semánticas pueden utilizarse en lugar de las etiquetas de presentación estándar y esto ayuda a mejorar la legibilidad y la usabilidad, al tiempo que reduce la necesidad de datos estructurados. Esta nueva forma de concebir la programación permite crear sitios web más accesibles y más significativos para los motores de búsqueda. El marcado semántico también es beneficioso porque permite hacer hojas de estilo CSS separadas para cada sección de su sitio web.
Ayudan al posicionamiento.

# data[].attributes.headline
6. ¿Cuáles son las etiquetas básicas para controlar el texto en HTML?¿Como definir una lista ordenada y no ordenada en HTML?

# data[].attributes.subject
6. ¿Cuáles son las etiquetas básicas para controlar el texto en HTML?¿Como definir una lista ordenada y no ordenada en HTML?

# data[].attributes.body
Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:

El carácter “menor que” <

Una palabra o carácter que determina qué etiqueta se está escribiendo

Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”

El carácter “mayor que” >

Etiquetas básicas

<body> para el contenido

Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.

<head> para información sobre el documento

La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…

<div> división dentro del contenido

Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.

<a> para enlaces

Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.

Ejemplo HTML:
Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para visitar DonDominio.

<strong> para poner el texto en negrita

Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer.
Ejemplo HTML: Quiero destacar solo <strong>esta palabra</strong>.

<br> para saltos de línea

Esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.

<H1>…<H6> para títulos dentro del contenido

Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.

<img> para añadir imágenes al documento

Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen.

<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista

Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.

Ejemplo HTML:

<ul>

<li>Primer elemento</li>

<li>Segundo elemento</li>

<ul>

<p> para parágrafos

Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El propósito es poder hacer el contenido más fácil de leer y organizado..

<span para estilos de una parte del texto: Con la etiqueta podemos personalizar el estilo de solamente una parte del texto.

Ejemplo HTML:

Solo <span style=”color: red;”>esta palabra</span> en rojo.