4. HTML 5 SUBIR UNA IMAGEN! 💻 PAG WEB con BASE de DATOS 💻[DESARROLLO WEB DESDE CERO (Parte 4/12)]

Summary

En este tutorial, se explica cómo crear una página web sencilla utilizando HTML5, estructurada en diferentes secciones como perfil, amigos, fotos y búsqueda de amigos. Se destacan conceptos clave como la semántica HTML para una mejor comprensión por parte de los navegadores y motores de búsqueda. También se muestra cómo duplicar páginas para crear variaciones, como agregar un botón 'Agregar Amigo'. Aunque el estilo aún no se implementa, se menciona la importancia de CSS para personalizar la apariencia. Finalmente, se introduce el formulario para subir fotos, explicando el uso de etiquetas como `<input>` para manejar archivos.

Takeaways

• 😀 El HTML5 se utiliza principalmente para dar estructura y semántica a una página web, mientras que el CSS se encarga de darle estilo y formato visual.
• 😀 La estructura básica de una página web incluye etiquetas como <header>, <nav> y <section> para organizar el contenido en secciones lógicas.
• 😀 Las páginas de perfil, amigos, fotos y búsqueda son similares, con la única diferencia en el contenido mostrado, lo que permite duplicar el código y ajustarlo según las necesidades.
• 😀 En el HTML, las etiquetas como <h1>, <h2> y <h3> definen títulos y jerarquía en el contenido, mientras que etiquetas como <ul> y <ol> permiten crear listas.
• 😀 El formulario <form> es crucial para la carga de archivos, como las fotos en el perfil. Este formulario usa el atributo <input type='file'> para permitir la selección de imágenes.
• 😀 Los formularios en HTML pueden incluir diferentes tipos de campos, como texto, correos electrónicos, y fechas, dependiendo del valor del atributo 'type'.
• 😀 El atributo 'action' en un formulario HTML define la URL a la que se enviarán los datos del formulario, y 'method' especifica cómo se enviarán (GET o POST).
• 😀 Los botones en formularios, como el <input type='submit'>, permiten a los usuarios enviar datos, y pueden incluir atributos como 'value' para personalizar el texto del botón.
• 😀 Aunque HTML permite ciertos formatos básicos, como <h1> y <ul>, el diseño visual y avanzado de la página se logra a través de CSS.
• 😀 El uso de formularios en HTML también incluye la posibilidad de controlar los tipos de archivos que se pueden cargar, limitando las extensiones aceptadas, como jpg o png.
• 😀 La semántica en HTML no solo es importante para la estructura de la página, sino que también facilita que los motores de búsqueda comprendan mejor el contenido de la web.

Q & A

¿Cuál es la función principal del HTML en el desarrollo web?

La función principal del HTML es proporcionar la estructura y semántica de la página web, lo que permite a los navegadores entender mejor el contenido de la página.

¿Cómo se diferencia la página de 'Mis amigos' de la página de 'Mi perfil'?

La página de 'Mis amigos' tiene la misma estructura que la de 'Mi perfil', pero en lugar de mostrar una foto personal, muestra varias secciones con amigos, las cuales se pueden duplicar según la cantidad de amigos que se desee mostrar.

¿Por qué no se utiliza CSS en este punto del desarrollo?

El CSS se utilizará más adelante para dar formato y estilo a la página. En esta etapa, el enfoque está en establecer la estructura y semántica con HTML.

¿Qué importancia tiene la semántica en HTML?

La semántica en HTML es crucial porque ayuda a los navegadores y motores de búsqueda a comprender mejor el contenido de la página, lo que mejora la accesibilidad y el SEO.

¿Qué componente se introduce en la página de 'Mis fotos' que no aparece en las demás páginas?

En la página de 'Mis fotos' se introduce un formulario para subir fotos, utilizando un campo de tipo 'file' para cargar archivos JPG y PNG.

¿Cómo se agrega un formulario para subir una foto?

Se agrega un formulario con la etiqueta <form>, dentro del cual se coloca un campo <input type='file'> para la carga de archivos, junto con un botón <input type='submit'> para enviar el formulario.

¿Qué atributos debe tener el campo <input type='file'> para aceptar solo imágenes en formato JPG y PNG?

El campo <input type='file'> debe tener el atributo 'accept' con los valores '.jpg, .png', lo que restringe la carga a esos tipos de archivo.

¿Por qué se utiliza el atributo 'action' en el formulario?

El atributo 'action' especifica la URL a la que se enviará la solicitud cuando el formulario sea enviado. En este caso, el formulario se enviará a un archivo PHP que se encargará de procesar la carga de la foto.

¿Cuál es la diferencia entre el código de la página de 'Buscar amigos' y 'Mis amigos'?

La página de 'Buscar amigos' es muy similar a la de 'Mis amigos', pero incluye un botón adicional para agregar amigos, mientras que en 'Mis amigos' solo se muestran los amigos ya agregados.

¿Qué es la etiqueta <br> y por qué se usa en el código?

La etiqueta <br> se utiliza para crear saltos de línea dentro del contenido de la página. Permite separar el contenido en diferentes líneas sin necesidad de un nuevo bloque o contenedor.