No tienes acceso a esta clase

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

Maquetando la secci贸n de redes sociales

7/27
Recursos

Aportes 34

Preguntas 5

Ordenar por:

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

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.

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.

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

  • Lorem para texto gen茅rico

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

https://www.flaticon.es/

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 馃

11 minutos, de la clase 2 horas de practica

No est谩n las fotos de redes sociales :S

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

Prep谩rense, que lo que viene es bueno.

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

Tip para vscode al escribir listas que van a tener misma estructura de etiquetas en el interior `li*4>a>img`

Para mi este es el mejor sitio para buscar iconos

Te permite lo siguiente

  1. Descargar en PNG
  2. Descargar en SVG
  3. Copiar codigo SVG para usar directo en HTML o Figma
  4. Copiar link para usarlo en Notion
  5. Seleccionar un color determinado (aunque eso pude quedar de lado cuando ya sepas usar CSS)

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.

para citar los emojis desde una pc windos es: Windows + .
Otro tip! Al momento de crear textos de tipo "Lorem Ipsum" dentro de VS Code, tambi茅n podemos especificar la cantidad de palabras que queremos que contenga el bloque de texto. Por ejemplo, si queremos incluir un p谩rrafo de 20 palabras podemos colocar la etiqueta de p谩rrafo: `

` Y luego dentro escribir: `

Lorem20

` `Presionamos enter y listo! 馃挭馃徎馃榿`
Quisiera comentar que hasta el momento me ha agradado mucho el docente. Muy did谩ctico, sabe explicar y se le nota que le gusta ense帽ar. 馃檶
Google ha compartido una base de 铆conos espectacular: [Material Symbols and Icons - Google Fonts ](https://fonts.google.com/icons) Tambi茅n puedes descargar fuentes gratuitas y ver algunos art铆culos e informaci贸n valiosa.

Excelente, explica muy bien!

Podr铆an mejorar su accesibilidad poniendo una aria-label a su icono de facebook de la siguiente manera

<a href="url" aria-label="Enlace de Facebook">
 	<img>
</a>

Muy avanzado cre贸, pero a mi hubiese gustado saberlo al principio.

.

no estan los recursos

Que diferencia con CSS. Excelente explicaci贸n de HTML.

.

Para seleccionar varias cadenas iguales a la vez en Windows yo uso ctrl+d

Confirmo, Windows con la tecla Alt

Es con la tecla ALT que se escribe en simultaneo

  • <main>: Esta etiqueta define el contenido principal de la p谩gina y debe contener todo el contenido relevante de la misma. Solo debe haber una etiqueta <main> en la p谩gina.
  • lorem: 鈥淟orem ipsum鈥 es un texto ficticio que se utiliza como marcador de posici贸n en dise帽os gr谩ficos. Puedes generar texto de este tipo utilizando generadores de texto aleatorio.
  • <ul> y <li>: Estas etiquetas se utilizan juntas para crear listas. La etiqueta <ul> define la lista en s铆 misma, y cada elemento de la lista se define con la etiqueta <li>. Puedes utilizar estilos CSS para personalizar el aspecto de las listas.
  • <a>: Esta etiqueta se utiliza para crear enlaces a otras p谩ginas o a otros lugares de la misma p谩gina. Debes utilizar el atributo href para indicar la URL del destino del enlace. Tambi茅n puedes utilizar el atributo target para indicar si el enlace debe abrirse en una nueva ventana del navegador.

Genial!!, vamos a darle formaaa =D

debieron colocar los pngs de las redes sociales en recursos

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>