Introducción

1

HTML y CSS: Construcción de Páginas Web Básicas

2

HTML y CSS para Principiantes: Estructura y Estilo de Páginas Web

3

Bases de Datos para Desarrolladores Backend

Sitios Code con HTML y CSS

4

Etiquetas HTML: Estructurando tu Página Web

5

Creación de una Web con HTML y Visual Studio Code

6

Portafolio Web con HTML y CSS: Crea un Hero Efectivo

7

Diseño de iconos sociales con HTML y CSS

8

CSS desde Cero: Selectores y Propiedades Esenciales

9

Estilos CSS: Comprender el modelo de caja y Box Sizing

10

CSS: Estiliza el Header de tu Portafolio Web

11

Posicionamiento CSS: Usar Absolute y Relative

12

CSS: Alineación Vertical y Centrando Elementos

13

Estilizado de Iconos en Redes Sociales con CSS

14

CSS y HTML: Enlaces a Redes Sociales y Ajuste de Imágenes

Despliega tu página a internet

15

Deploy de Páginas Web: Del Local al Servidor en Línea

16

Despliegue de Sitios Web Gratis con Netlify

17

Compra y configuración de dominios en Namecheap y Netlify

18

Diferencias entre Hosting Compartido y VPS

Sitios No-code con WordPress

19

Creación de Sitios Web NoCode con WordPress

20

Instalación básica de WordPress en hosting propio

21

Instalación y configuración del plugin Elementor en WordPress

22

Creación de Páginas Web con Elementor desde Cero

23

Maquetación de Hero con Elementor en WordPress

24

Personalización de Plantillas WordPress con Colibri WP

Conclusiones

25

Programación de Arduino: Creación de Proyectos Interactivos

26

CSS Avanzado: Trucos y Técnicas para Estilos Profesionales

27

Automatización de tareas con Python

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Diseño de iconos sociales con HTML y CSS

7/27
Recursos

¿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 lorem seguido 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:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

11 minutos, de la clase 2 horas de practica

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

https://www.flaticon.es/

  • <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 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.

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: ![](https://i.imgur.com/81XuP4M.png)
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 `

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