Contenido:
Introducción a HTML....................................................................................... 3
En HTML…................................................................................................ 3
Comentarios:............................................................................................ 4
Encabezados:........................................................................................... 4
Imágenes:................................................................................................ 5
Declaración <!DOCTYPE>........................................................................6
Introducción a HTML
La estructura de una página web se construye en HTML, luego puedes
darle estilo a la página con CSS y también puede utilizarse JavaScript para
hacer que las páginas sean interactivas.
En HTML…
El código le indica al navegador (por ejemplo, Chrome, Safari, etc.)
cómo mostrar una página web. Tu navegador web puede leer el
código HTML y traducirlo en lo que ves cuando navegas por la web.
El código se basa en etiquetas, las mismas que utilizan corchetes
angulares < > los cuales rodean el nombre del elemento que deseas
agregar a la página.
Necesitas etiquetas para añadir diferentes elementos a una página.
Muchos elementos HTML requieren tanto etiquetas de apertura como
de cierre, también conocidas como etiquetas contenedoras.
Las etiquetas de cierre son muy similares a las etiquetas de apertura.
La única diferencia es que contienen una barra inclinada hacia
adelante /.
Algunos elementos pueden ser definidos con solo una etiqueta las
cuales se llaman etiquetas vacías.
No se distingue entre mayúsculas y minúsculas. Esto significa que el
navegador web entenderá las etiquetas tanto en mayúsculas como
en minúsculas.
El navegador web tendrá dificultades para entender tu código si hay
errores. Esto puede resultar en la falta de elementos. Los errores en
el código HTML pueden incluir la falta de comillas, etiquetas y errores
tipográficos en general.
El navegador web ignorará los espacios en blanco y los saltos de línea
en tu código. Sin embargo, es una buena práctica organizar tu código
en diferentes líneas para que sea más fácil de leer para los humanos.
Si necesitas crear un salto de línea, puedes usar la etiqueta
<br>. <br> forzará un salto de línea.
Comentarios:
Puedes agregar notas o explicaciones a tu código con la etiqueta de
comentario: <!-- ... -->.
Es una buena práctica utilizar comentarios en tu código HTML, ya que
explican lo que hace cada parte del mismo.
Los comentarios ayudarán a otros desarrolladores (¡y a ti en el
futuro!) a comprender el código más fácilmente, lo que facilita el
mantenimiento y la colaboración en proyectos.
Los comentarios son ignorados por los navegadores y no se muestran
en la página web, lo que significa que no afectan la visualización del
contenido.
Además, puedes usar comentarios para desactivar temporalmente
partes de tu código, lo que resulta útil para pruebas o para excluir
temporalmente secciones sin eliminarlas.
Es recomendable que los comentarios sean claros y concisos,
evitando la sobrecarga de información. Incluye detalles como la
finalidad de una función, el uso de variables o cualquier lógica
compleja que pueda no ser evidente a simple vista. Esto no solo
mejora la legibilidad, sino que también contribuye a una mejor
colaboración en equipo.
Recuerda que, aunque los comentarios son muy útiles, es importante no
abusar de ellos. Un código bien estructurado y nombrado puede ser
autoexplicativo, reduciendo la necesidad de comentarios excesivos.
Encabezados:
El texto en las páginas web se puede organizar
en diferentes secciones, con encabezados.
Los encabezados ayudan a los motores de
búsqueda a saber de qué trata tu página para
mostrársela a las personas adecuadas.
Los encabezados en HTML tienen diferentes
niveles, <h1> define el encabezado más
importante, debes tener solo un encabezado
de nivel 1 por página.
Puedes usar hasta 6 niveles de encabezados en HTML. Las etiquetas
para estos elementos de encabezado
son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Los encabezados son otro elemento que requiere etiquetas de
apertura y cierre.
Puedes agregar diferentes encabezados a tu página para organizar el
contenido.
Los encabezados se inician automáticamente en una nueva línea
cuando los creas.
Imágenes:
Las páginas web que incluyen imágenes obtienen más visitas, se posicionan
mejor en los resultados de búsqueda y se comparten más en redes sociales.
Las imágenes solo requieren una etiqueta para mostrarse en tu
página web; no necesitan etiquetas de cierre. Una etiqueta <img> es
suficiente para enlazar una imagen a una página web.
Las etiquetas de imagen son ejemplos de etiquetas vacías (no
contenedoras).
La fuente (atributo src) de la imagen debe incluirse en la etiqueta.
Este atributo le indica al navegador dónde encontrar la imagen.
La fuente (src) es la ubicación en Internet donde se almacena la
imagen.
La URL es una ubicación (o dirección) en la web. La URL de la imagen
debe estar encerrada entre comillas simples o dobles. Asegúrate de
que la URL sea accesible para que la imagen se muestre
correctamente.
Técnicamente, las imágenes no se insertan en una página web, sino
que se enlazan, lo que significa que el navegador carga la imagen
desde la URL especificada.
El icono de imagen rota suele aparecer en las páginas web cuando
hay un problema con la carga de la imagen, ya sea porque la URL es
incorrecta o porque el archivo no está disponible en el servidor.
Además, es recomendable incluir el atributo `alt` en la etiqueta
<img>. Este atributo proporciona una descripción textual de la
imagen cuando la imagen no se muestra, lo que mejora la
accesibilidad y el SEO (optimización para motores de búsqueda).
Utilizar imágenes de alta calidad y optimizadas puede mejorar aún
más la experiencia del usuario y reducir los tiempos de carga de la
página.
Normas y mejores prácticas para la legibilidad del código:
Las normas y mejores prácticas son necesarias para lograr:
* Páginas web compatibles con diferentes navegadores y dispositivos.
* Un trabajo en equipo y colaboración más efectiva.
La indentación se considera una excelente práctica para mejorar la
legibilidad del código. En HTML se refiere a los 2 espacios o tabulaciones al
comienzo de las líneas, lo que ayuda a estructurar el código de manera
clara y organizada. Una buena indentación permite que otros
desarrolladores (y tú mismo en el futuro) puedan entender rápidamente la
jerarquía y la relación entre diferentes elementos del código. Esto es
especialmente importante en lenguajes de programación como HTML, CSS y
JavaScript, donde la estructura del código puede afectar su funcionamiento.
Además de la indentación, otras mejores prácticas incluyen:
Nomenclatura clara: Utiliza nombres descriptivos para clases,
identificadores y funciones, lo que facilita la comprensión de su
propósito.
Comentarios efectivos: Incluye comentarios que expliquen la lógica
del código y los pasos importantes, pero evita el exceso.
Pruebas y validación: Realiza pruebas en diferentes dispositivos y
navegadores para asegurarte de que la página web funcione
correctamente en todos ellos.
Implementar estas prácticas no solo mejora la calidad del código, sino que
también facilita el mantenimiento y la escalabilidad de proyectos a largo
plazo.
Declaración <!DOCTYPE>
La declaración <! DOCTYPE> <ad representa el tipo de documento y
ayuda a los navegadores a mostrar las páginas web correctamente.
Solo debe aparecer una vez, en la parte superior de la página (antes de las
etiquetas HTML).
La declaración <! DOCTYPE> no x- distingue entre mayúsculas y
minúsculas.
La etiqueta contenedora <body> se utiliza para agrupar todo lo que se
muestra en una página cuando se carga en un navegador.
Las etiquetas de body son necesarias para que tu página sea compatible
con todos los navegadores web
Una página web solo puede contener un elemento de cuerpo
Todos los elementos de contenido que necesitas mostrar (como párrafos,
encabezados, botones e imágenes) deben estar dentro de la etiqueta
contenedora <body>.
La etiqueta de contenedor <body> debe englobar todos los elementos que
se muestran en la página. Cuando algunas etiquetas HTML se colocan
dentro de otras, esto se llama anidamiento.
Los sitios web hacen más que simplemente mostrar contenido. La etiqueta
de cabeza <head> se utiliza para incluir información técnica sobre la
página.
Puedes utilizar la etiqueta cabeza para aumentar la visibilidad y el tráfico
desde motores de búsqueda como Google.
El título, la descripción y las palabras clave se encuentran anidadas en la
etiqueta cabeza.
La cabeza debe colocarse antes del cuerpo.
La información de la cabeza no se muestra en la página web. Solo se
muestra el título, en los resultados del motor de búsqueda (por ejemplo,
Google) y en la pestaña del navegador.
Hoy en día, la mayoría de los profesionales web siempre envuelven su
código HTML en etiquetas <html>. La etiqueta <html> es una etiqueta
contenedora. La cabeza y el cuerpo están anidados dentro de las etiquetas
<html>.
La indentación se considera una muy buena práctica para mejorar la
legibilidad del código. La indentación se refiere a los espacios al comienzo
de las líneas.
HTML ofrece varios tipos de input para formularios, cada uno diseñado para
recopilar diferentes tipos de datos.
Aquí tienes una lista de los tipos de input más comunes:
1. **text**: Campo de texto de una sola línea.
2. **password**: Campo de texto para contraseñas (el texto se oculta).
3. **email**: Campo para direcciones de correo electrónico.
4. **url**: Campo para URLs.
5. **number**: Campo para números, con opciones para incrementar y
decrementar.
6. **tel**: Campo para números de teléfono.
7. **search**: Campo de texto para búsquedas (con un diseño diferente).
8. **date**: Selector de fecha.
9. **time**: Selector de hora.
10. **datetime-local**: Selector de fecha y hora (local).
11. **month**: Selector de mes y año.
12. **week**: Selector de semana.
13. **color**: Selector de color.
14. **file**: Campo para subir archivos.
15. **checkbox**: Casilla de verificación.
16. **radio**: Botones de opción (radio buttons).
17. **hidden**: Campo oculto (no visible para el usuario).
18. **button**: Botón genérico.
19. **submit**: Botón para enviar el formulario.
20. **reset**: Botón para restablecer el formulario a su estado inicial.
Estos tipos de input permiten crear formularios interactivos y funcionales
adaptados a diferentes necesidades y tipos de datos. Puedes combinarlos y
personalizarlos según lo requieras.
Es importante destacar que cada tipo de entrada tiene sus propias
características y atributos que se pueden utilizar para personalizar su
comportamiento y apariencia.
