Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML5, CSS - Coggle Diagram
HTML5
<form>
Hay muchos tipos de entradas que puedes crear utilizando el atributo "type". Puedes crear fácilmente un campo de contraseña, un botón de reinicio o un control que permita a los usuarios seleccionar un archivo de su computadora.
Para crear un campo de texto y obtener la entrada de texto de un usuario, agrega el atributo "type" con el valor "text" al elemento "input".
<input type="text">
<label></label>
La etiqueta <label> en HTML se utiliza para asociar un texto descriptivo con un elemento de entrada, como un campo de texto o un botón de radio. Proporciona una descripción textual que identifica el propósito o la función del elemento de entrada.
La asociación entre la etiqueta <label> y el elemento de entrada se establece mediante el uso del atributo for en la etiqueta <label> y el atributo id en el elemento de entrada correspondiente. Esto permite que el usuario haga clic en el texto del <label> para activar o interactuar con el elemento de entrada relacionado.
El uso adecuado de la etiqueta <label> es especialmente importante para mejorar la accesibilidad, ya que ayuda a los usuarios que utilizan tecnologías de asistencia, como lectores de pantalla, a comprender y utilizar correctamente los formularios y los controles de entrada
<textarea></textarea>
id= "placeholder"
El atributo "placeholder" se utiliza en HTML para proporcionar una breve descripción o
ejemplo
de formato para un campo de entrada de texto antes de que el usuario escriba algo. Este texto de marcador de posición se muestra dentro del campo de entrada y desaparece tan pronto como el usuario comienza a escribir.
<input>
La etiqueta <input> se utiliza con el atributo type para especificar el tipo de campo de entrada que se va a crear. Algunos de los tipos de entrada comunes son:
password:
Crea un campo de contraseña donde el texto ingresado se muestra oculto.
atribute "minlegth" y "maxlength". Para maximos y minimos de caracteres en la contrasena
pattern="[a-z0-5]{8,}
Con el tipo de atributo "password", puedes usar el atributo "pattern" para definir una expresión regular que el password debe cumplir para considerarse válido.
file:
Crea un campo para que el usuario seleccione y envíe archivos desde su dispositivo.
text:
Crea un campo de texto de una línea para que el usuario ingrese texto.
radio:
Crea un botón de opción que permite al usuario seleccionar una opción única de un conjunto de opciones.
checkbox:
Crea una casilla de verificación que permite al usuario seleccionar una o varias opciones.
submit:
Crea un botón de envío para enviar un formulario.
required: para cuando un campo es obligatorio de completar
"value"
El atributo value en HTML se utiliza para especificar el valor asociado con un elemento de formulario, como un campo de entrada (<input>) o un botón de opción (<input type="radio"> o <input type="checkbox">).
Cuando el usuario selecciona una opción o ingresa un valor en un campo de entrada, el valor especificado en el atributo value se incluye en los datos enviados al servidor cuando se envía el formulario. Esto permite identificar y procesar los datos del formulario de manera precisa.
En resumen, el atributo value en HTML es útil para asignar un valor específico a un elemento de formulario y capturar o utilizar ese valor posteriormente en el procesamiento del formulario o en interacciones con JavaScript.
Formulario
value= method
"GET":
Este es el valor predeterminado si no se especifica el atributo "method". Cuando se utiliza el método "GET", los datos del formulario se adjuntan a la URL del formulario y se envían al servidor como una cadena de consulta. Esto significa que los datos son visibles en la URL y pueden ser almacenados en el historial del navegador o en registros del servidor. El método "GET" se utiliza comúnmente para recuperar información del servidor.
"POST":
Cuando se utiliza el método "POST", los datos del formulario se envían al servidor en el cuerpo de la solicitud HTTP. A diferencia del método "GET", los datos no son visibles en la URL y no se almacenan en el historial del navegador. El método "POST" se utiliza comúnmente para enviar datos que pueden modificar el estado del servidor, como enviar un formulario de registro o realizar una compra en línea.
Nesting
En el paso anterior, colocaste los elementos h1, h2, comentario y p dentro del elemento main. Esto se llama anidación. Los elementos anidados deben colocarse dos espacios más a la derecha del elemento en el que están anidados. Este espacio adicional se llama sangría y se utiliza para que el HTML sea más fácil de leer.
Self-closing tag.
Puedes agregar imágenes a tu sitio web utilizando el elemento img. Los elementos img tienen una etiqueta de apertura sin una etiqueta de cierre. Una etiqueta para un elemento sin etiqueta de cierre se conoce como Self-closing tag.
"Alt"
Todos los elementos img deben tener un atributo alt. El texto del atributo alt se utiliza para lectores de pantalla con el fin de mejorar la accesibilidad (aclara lo que se ve en la img) y se muestra si la imagen no se carga correctamente. Por ejemplo, <img src="cat.jpg" alt="Un gato"> tiene un atributo alt con el texto Un gato.
<a href:"link" target=blank> el texto del link
Se es utilizado para que el link se abra en otra pestaña. Y es lo mismo target= blank que target = "blank"
Section
Todos los significados
En HTML5, el elemento
<section>
se utiliza para representar una sección autónoma de contenido en un documento HTML. Se utiliza para agrupar contenido relacionado temáticamente dentro de una página web.
Algunas razones comunes para utilizar el elemento
<section>
son:
Estructura semántica:
<section>
ayuda a estructurar el contenido de manera semántica, dividiendo una página en secciones lógicas y significativas.
Accesibilidad: Al utilizar elementos semánticos adecuados como
<section>
, se mejora la accesibilidad del sitio web, ya que los lectores de pantalla y otros dispositivos pueden comprender mejor la estructura del contenido.
Estilo y diseño: Al utilizar
<section>
, se pueden aplicar estilos y diseños específicos a secciones individuales de contenido, lo que facilita la presentación visual y la manipulación del diseño con CSS.
SEO (Optimización para motores de búsqueda): Utilizar correctamente el elemento
<section>
puede ayudar a mejorar la clasificación y la indexación de la página en los motores de búsqueda, ya que permite a los rastreadores web comprender mejor la estructura y el contexto del contenido.
En resumen,
<section>
es utilizado para agrupar y estructurar contenido relacionado en una página web, proporcionando beneficios tanto para la organización del contenido como para la accesibilidad y optimización para motores de búsqueda.
<ul>
(unordered list)
<il>
El elemento <li> en HTML se utiliza para crear un elemento de lista dentro de una lista ordenada (<ol>) o una lista desordenada (<ul>). <li> representa un ítem o elemento de la lista.
Aquí tienes un ejemplo de cómo se utiliza el elemento <li> en HTML:
Ejemplo en HTML
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ul>
<li>Elemento 1</li>
En el ejemplo anterior, se crea una lista desordenada <ul> y cada ítem de la lista se crea utilizando el elemento <li>. Los elementos <li> pueden contener texto, imágenes, enlaces u otros elementos HTML.
Puedes usar el elemento <li> tanto en listas ordenadas como en listas desordenadas, y se utilizará para cada elemento individual de la lista.
<figure> y <figcaption>
El uso del elemento <figure> y <figcaption> ayuda a proporcionar una estructura semántica adecuada y a mejorar la accesibilidad del contenido visual en una página web. Basicamente se ve como un recuadro a lo ancho de la web.
Block level
Algunos ejemplos comunes de elementos de nivel de bloque en HTML incluyen <div>, <p>, <h1> a <h6>, <ul>, <ol>, <li>, <table>, <form>, entre otros.
<x name= "nombre que elijamos"></x>
tiene que ver con una mejor organizacion a la hora de meter datos en un servidor.
Strong=
negrita
para que funcionen correctamente los botones de radio hay que poner
checked
CSS
pseudoselector
Los pseudo selectores se utilizan para aplicar estilos a elementos basados en eventos, estados o relaciones con otros elementos, sin necesidad de agregar clases o atributos adicionales al código HTML.
Algunos ejemplos comunes de pseudo selectores son:
:hover: Selecciona un elemento cuando se pasa el cursor sobre él.
:active: Selecciona un elemento mientras se mantiene presionado el botón del mouse.
:focus: Selecciona un elemento cuando está siendo enfocado, como cuando se hace clic en un campo de entrada de texto.
:first-child: Selecciona el primer elemento hijo de su padre.
:nth-child(n): Selecciona el elemento hijo número "n" de su padre.
:nth-of-type(n): Selecciona el elemento "n" del mismo tipo dentro de su padre.
margin: auto;
equivale a margin-top, margin-right, margin-bottom, and margin-left all to auto.
Linear-gradient
value "deg"
gradientDirection is the direction of the line used for the transition. color1 and color2 are color arguments, which are the colors that will be used in the transition itself. These can be any type of color, including color keywords, hex, rgb, or hsl.
div:not(#example){color: red;
}
::not, sirve para excluir elementos dentro de la misma class=""
h1{
text-align: center;
}