No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
21H
34M
56S

Maquetando la secci贸n de redes sociales

7/27
Recursos

Aportes 16

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Confirmo que es con la tecla ALT鉁 , para realizar cambio simultaneo

Les comparto el siguiente sitio web: https://www.flaticon.es/ all铆 pueden descargar diferenes iconos gratis en diferentes formatos

Con tecla window + punto. Te abre los iconos para que pongas en tu p谩ginas.

鈫 head para la cabecera
鈫 Main para el contenido principal
鈫 footer para el pie de p谩gina

  • Lorem para texto gen茅rico

Estructura b谩sica HTML
Antes de ver los c贸digos b谩sicos, debes saber que la primera l铆nea de tu documento HTML siempre debe contener la etiqueta <!DOCTYPE html>. Esto har谩 que el c贸digo de tu sitio sea legible en cualquier navegador.

Ahora bien, un documento HTML bien armado tiene cuatro etiquetas esenciales para que el contenido se distribuya correctamente. Estas son:

  1. HTML
    <html> est谩 al inicio de un documento HTML e indica a los navegadores que la p谩gina tiene c贸digo HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta de cierre </html> ser谩 el 煤ltimo elemento del documento.

  2. Encabezado
    <head> es la etiqueta que se utiliza para el encabezado de la p谩gina. Su principal funci贸n es contener toda la informaci贸n del funcionamiento del sitio. Debido a esto, es un c贸digo encriptado que las personas que entran a la p谩gina no pueden ver.

  3. T铆tulo de la p谩gina
    <title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el t铆tulo que puedes ver en las pesta帽as del navegador.

  4. Cuerpo
    <body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra forma, comprende todo el contenido visible del sitio. Aqu铆 podr谩s insertar texto, im谩genes, videos o cualquier otra funcionalidad que desees mostrar.

Pueden utilizar esta herramienta para descargar los iconos gratis y en buena calidad!

https://www.flaticon.es/

Les comparto una biblioteca de iconos, los pueden descargar como SVG o utilizar el codigo https://fontawesome.com/

Prep谩rense, que lo que viene es bueno.

La principal raz贸n por la cual es importante realizar la聽maquetaci贸n del sitio previo a la programaci贸n del mismo es la聽organizaci贸n de los elementos y el poder聽visualizar c贸mo ser谩 el sitio una vez sea publicado.

No est谩n las fotos de redes sociales :S

debieron colocar los pngs de las redes sociales en recursos

Algo que les puede ayudar mucho para darle orden al texto (para los que usan visual studio) es seleccionar todo el texto con ctrl + a y luego darle windows + p y dar formato al documento, esto les pondra todo el texto con los espaciados y orden correspondiente. sigan viendo 馃

divides head body y footer?
caray, tenia entendido que van dentro del body

Les comparto la sintaxis b谩sica para maquetar la secci贸n de las redes sociales:

									<ul class="social-icons">
                        <li>
                            <a href="#" class="Social icon" id="Gmail">
                            <img src="Imagenes/Gmail.png" alt="Gmail">
                            </a>
                        </li>

                        <li>
                            <a href="https://www.facebook.com" class="Social icon" id="Facebook">
                            <img src="Imagenes/Logo_de_Facebook.png" alt="Facebook">
                            </a>
                        </li>
                        
                    </ul>

En vscode es mejor usar Ctrl + D para seleccionar multiples palabras con el mismo texto, primero hay que seleccionarla y despu茅s presionar el comando