APUNTES SOBRE EL MODULO 1: HTML
El elemento MAIN: El elemento main se utiliza para representar el
contenido principal del cuerpo de un documento HTML. El contenido
dentro del elemento main debe ser único para el documento y no debe
repetirse en otras partes del documento.
Ejemplo:
Elemento img: Puedes añadir imágenes a tu sitio web utilizando el
elemento img. Los elementos img tienen una etiqueta de apertura, pero no
una etiqueta de cierre. Un elemento sin etiqueta de cierre se conoce como
void element.
Atributo: Los atributos HTML son palabras especiales usadas dentro
de la etiqueta de apertura de un elemento para controlar el
comportamiento del elemento.
Atributo src: El atributo src en un elemento img especifica la URL
(donde se localiza la imagen).
Aquí hay un ejemplo de un elemento img con un atributo src que apunta al
logo de freeCodeCamp:
Atributo alt: Todos los elementos img deben tener un atributo alt. El
texto del atributo alt es utilizado por lectores de pantalla para mejorar la
accesibilidad y es mostrado en caso de que la imagen falle en cargar.
Elemento ‘a’ y el atributo ‘href’: Puedes enlazar a otra página
con el elemento de anclaje (a) utilizando el atributo href para escribir el
enlace.
También se puede convertir cualquier texto en un enlace ejemplo:
<p>I think <a href="[Link] is
great.</p>
Atributo target: especifica donde se abrirá el enlace que se encuentra
en el href.
Diferentes valores:
Elemento section: El elemento section es usado para definir
secciones en un documento, como capítulos, encabezados, pies de
página, o cualquier otra sección del documento. Es un elemento semántico
que ayuda con la SEO y la accesibilidad.
Elemento ul: Para crear una lista no ordenada de elementos, puedes
usar el elemento ul.
Elemento ol: Para crear una lista ordenada de elementos, puedes
usar el elemento ol.
Elemento li: El elemento li es usado para crear una lista de elementos
en una lista ordenada o en una lista desordenada.
Ejemplo:
Elemento figure: El elemento <figure> se utiliza para agrupar
contenido multimedia, como imágenes, gráficos o diagramas, junto con su
leyenda asociada. Este contenido es independiente del flujo principal del
documento, lo que significa que, si se elimina del contexto, no afecta el
sentido del contenido restante. Es ideal para presentar contenido visual
con significado o referencia propia.
Elemento figcaption: El elemento <figcaption> sirve para
proporcionar una leyenda o descripción a un contenido agrupado dentro de
un <figure>. Su función es contextualizar o explicar el contenido visual,
mejorando la accesibilidad y la comprensión. Puede colocarse tanto antes
como después del contenido dentro del <figure>.
Ejemplo:
Elemento em: Para poner énfasis en una palabra o frase específica,
puedes utilizar el elemento em.
Elemento strong: El elemento strong se utiliza para indicar que una
parte de un texto es importante o urgente.
Elemento form: El elemento form se utiliza para obtener información
de un usuario, como su nombre, correo electrónico y otros detalles. Ósea
este elemento se utiliza para crear formularios.
Atributo action: El atributo action indica dónde se deben enviar los
datos del formulario.
Elemento input: El elemento input te permite recolectar datos desde
un formulario web de diferentes formas. Al igual que los elementos img,
los elementos input son un void element y no necesitan etiquetas de
cierre.
Atributo type: Hay diferentes tipos de elementos input, los cuales los
puedes crear con el atributo type. Puedes crear fácilmente un campo de
contraseña (password), un botón de reinicio (reset) o un control para
permitir a los usuarios seleccionar un archivo desde su computadora.
Para que los datos de un formulario sean accesibles en la ubicación
especificada en el atributo action, debes darle al campo de texto un
atributo name y asignarle un valor que represente los datos que se están
enviando.
Atributo placeholder: se utiliza para enviar agregar un mensaje
dentro del input para que el usuario sepa como debe ingresar los datos.
Atributo required: Para evitar que un usuario entregue su formulario
incompleto, necesitas añadir el atributo required al elemento input. El
atributo required no necesita ningún valor. Simplemente, necesitas añadir
la palabra required al elemento input, asegurándote de que hay espacios
entre ella y los otros atributos.
Elemento button: El elemento button se utiliza para crear un botón
cliqueable.
Agrega un atributo type con el valor submit al button para dejar claro que
es un botón de envío.
----------------------------------------------------------------------------------------------------
Dentro del atributo ‘type’ esta la opcion de radio que lo que hace es que el
usuario selección una de las opciones que le das.
Cuando tenemos varios <input type=”radio”> y queremos que el usuario
ingrese una sola opcion lo que hacemos es que le agregamos el atributo
name a cada input con el mismo valor, por ejemplo:
Elemento label: Los elementos label se utilizan para ayudar a
asociar el texto de un elemento input con el propio elemento input
(especialmente para tecnologías de asistencia como lectores de pantalla).
Atributo id: El atributo id se utiliza para identificar elementos HTML
específicos. Cada atributo id debe tener un valor único, diferente a los
demás valores id de la página.
Atributo value: cuando tenemos varias opciones radio button y
seleccionamos una solo cuando enviamos el formulario demos de
especificar cual de los radios button ha sido enviado. Eso lo hacemos con
el atributo value por convención a ese atributo se le da el mismo nombre
que el id.
Elemento fieldset: El elemento fieldset se utiliza para agrupar
elementos input y label relacionados dentro de un formulario web. Los
elementos fieldset son elementos de nivel de bloque, lo que significa que
aparecen en una nueva línea.
Elemento legend: El elemento legend actúa como una
leyenda/descripción, para el contenido del elemento fieldset. Les da a los
usuarios un contexto sobre lo que deben ingresar en esa parte del
formulario, por ejemplo:
<legend>Is your cat an indoor or outdoor cat?</legend>
Esta es otra forma de asociar un elemento radio button con un label
Atributo checked: se utiliza para que uno de los elementos del
checkbox este seleccionado de forma predeterminada, por ejemplo:
<input checked id="loving" type="checkbox" name="personal
ity" value="loving">
Elemento footer: El elemento footer se usa para definir el pie de
página de un documento o sección. Un pie de página normalmente
contiene información sobre el autor del documento, datos de copyright,
enlaces a términos de uso, información de contacto, etcétera.
Elemento head: El elemento head se utiliza para contener metadatos
sobre el documento, como su título, enlaces a hojas de estilo y scripts. Los
metadatos son información sobre la página que no se muestra
directamente en la página.
Elemento title: El elemento title (título) determina lo que los
navegadores muestran en la barra de título o en las pestañas del
navegador.
Atributo Lang: este atributo se utiliza dentro de la etiqueta de
apertura del HTML para especificar en que idioma esta la página, por
ejemplo:
<html lang="en">
Esto quiere decir que la pagina se encuentra en ingles.