Confirmo que es con la tecla ALT✨ , para realizar cambio simultaneo
Introducción
HTML y CSS: Construcción de Páginas Web Básicas
HTML y CSS para Principiantes: Estructura y Estilo de Páginas Web
Bases de Datos para Desarrolladores Backend
Sitios Code con HTML y CSS
Etiquetas HTML: Estructurando tu Página Web
Creación de una Web con HTML y Visual Studio Code
Portafolio Web con HTML y CSS: Crea un Hero Efectivo
Diseño de iconos sociales con HTML y CSS
CSS desde Cero: Selectores y Propiedades Esenciales
Estilos CSS: Comprender el modelo de caja y Box Sizing
CSS: Estiliza el Header de tu Portafolio Web
Posicionamiento CSS: Usar Absolute y Relative
CSS: Alineación Vertical y Centrando Elementos
Estilizado de Iconos en Redes Sociales con CSS
CSS y HTML: Enlaces a Redes Sociales y Ajuste de Imágenes
Despliega tu página a internet
Deploy de Páginas Web: Del Local al Servidor en Línea
Despliegue de Sitios Web Gratis con Netlify
Compra y configuración de dominios en Namecheap y Netlify
Diferencias entre Hosting Compartido y VPS
Sitios No-code con WordPress
Creación de Sitios Web NoCode con WordPress
Instalación básica de WordPress en hosting propio
Instalación y configuración del plugin Elementor en WordPress
Creación de Páginas Web con Elementor desde Cero
Maquetación de Hero con Elementor en WordPress
Personalización de Plantillas WordPress con Colibri WP
Conclusiones
Programación de Arduino: Creación de Proyectos Interactivos
CSS Avanzado: Trucos y Técnicas para Estilos Profesionales
Automatización de tareas con Python
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Diseño de iconos sociales con HTML y CSS
7/27Recursos
¿Cómo maquetar una sección de descripción y redes sociales?
Al crear una página web, la maquetación de secciones como la de descripción y redes sociales es esencial para brindar una presentación completa y atractiva de quiénes somos o qué hacemos. Conocer las buenas prácticas y las herramientas correctas para ello puede marcar la diferencia en cómo los visitantes perciben tu sitio.
¿Qué importancia tiene la etiqueta <main>?
Usar la etiqueta <main> es crucial porque ayuda a definir cuál es el contenido principal de tu página. Esta marca la sección que describe más a fondo quién eres y qué haces, es decir, la información de identificación y contacto con los usuarios.
- Descripción Personal: Se puede utilizar una etiqueta
<p>para introducir un texto descriptivo. Puedes enriquecerte aún más usando emojis, que HTML puede procesar como texto estándar. - Texto de Relleno: Visual Studio Code ofrece la opción de insertar texto genérico escribiendo
loremseguido de Enter, lo cual es útil al empezar la maquetación.
¿Cómo crear una lista de íconos sociales?
Para crear una sección de redes sociales, puedes usar una lista desordenada mediante la etiqueta <ul>. Esto es recomendable porque:
- Buenas Prácticas de Web Dev: Los enlaces de navegación suelen ir dentro de una lista desordenada.
- Estructura Clara: Usar una estructura de
<li>y<a>para cada icono de red social asegura una maquetación organizada.
<ul class="social-icons">
<li><a id="LinkedIn" href="#"><img src="images/icons/linkedin.png" alt="LinkedIn" class="social-icon"></a></li>
</ul>
- Uso de Enlaces: Cada ícono está dentro de una etiqueta
<a>, que redirigirá al usuario al perfil de la red social cuando se haga clic. - Etiquetas de Imágenes: La etiqueta
<img>es utilizada para mostrar iconos, aunque las prácticas más ideales sugieren usar formatos SVG para una mejor adaptabilidad.
¿Qué otra información necesitamos para completar la maquetación?
Al maquetar, los siguientes pasos y herramientas adicionales mejoran el diseño general y funcionalidad:
- Clases y IDs Personalizadas: Al asignar clases o IDs específicos (por ejemplo,
class="social-icon"), se puede personalizar la apariencia con CSS posteriormente. - Prueba de la Página: Es vital ver cómo se presenta inicialmente la página en el navegador para hacer ajustes. A través de las herramientas de desarrollo (inspector), puedes identificar si todos los elementos están cargados adecuadamente.
- Planificación CSS: Aunque HTML estructura el contenido, CSS se encargará de los estilos visuales. Por ahora, el HTML puede parecer básico, pero CSS es el siguiente paso para embellecer la interfaz.
Cada función que integres al maquetar, desde el uso de una lista para los íconos hasta las etiquetas semánticas como <main>, contribuye a una web más organizada y profesional. Te animo a seguir practicando y explorando los diferentes aspectos de HTML y CSS para llevar tus habilidades al siguiente nivel.
Aportes 35
Preguntas 6
Ordenar por:
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:
-
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. -
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. -
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. -
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
11 minutos, de la clase 2 horas de practica
Pueden utilizar esta herramienta para descargar los iconos gratis y en buena calidad!
<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: “Lorem 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 atributohrefpara indicar la URL del destino del enlace. También puedes utilizar el atributotargetpara indicar si el enlace debe abrirse en una nueva ventana del navegador.
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
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 🤗
No están las fotos de redes sociales :S
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/
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>
para citar los emojis desde una pc windos es:
Windows + .
Confirmo, Windows con la tecla Alt
Para seleccionar varias cadenas iguales a la vez en Windows yo uso ctrl+d
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.
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. 🙌
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! 💪🏻😁`
Tip para vscode al escribir listas que van a tener misma estructura de etiquetas en el interior
`li*4>a>img`
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.
Mucho tiempo usando el texto de relleno (Lorem Ipsum) y hasta hoy lo pegué en el traductor e identificó que está en Latín y esto traduce:
Esta clase se centra en la creación de una sección de iconos sociales utilizando HTML. Se inicia con el código previo y se explica cómo contraer secciones en Visual Studio Code para facilitar la visualización. Luego, se introduce la etiqueta `<main>` para el contenido principal, donde se añade una descripción personal usando la etiqueta `
`. Se crea una lista desordenada `
- ` para los iconos sociales, cada uno representado por un elemento `
- ` que contiene un enlace `` y una imagen `
`, destacando la importancia de usar imágenes adecuadas. Finalmente, se menciona que, aunque el diseño es básico, el siguiente paso será aplicar CSS para mejorarlo.
agrego que para organizar el código automáticamente debemos presionar alt+shift+f
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.
Es con la tecla ALT que se escribe en simultaneo
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?