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
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.
<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.
<p>
para introducir un texto descriptivo. Puedes enriquecerte aún más usando emojis, que HTML puede procesar como texto estándar.lorem
seguido de Enter, lo cual es útil al empezar la maquetación.Para crear una sección de redes sociales, puedes usar una lista desordenada mediante la etiqueta <ul>
. Esto es recomendable porque:
<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>
<a>
, que redirigirá al usuario al perfil de la red social cuando se haga clic.<img>
es utilizada para mostrar iconos, aunque las prácticas más ideales sugieren usar formatos SVG para una mejor adaptabilidad.Al maquetar, los siguientes pasos y herramientas adicionales mejoran el diseño general y funcionalidad:
class="social-icon"
), se puede personalizar la apariencia con CSS posteriormente.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
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:
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
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 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>
Confirmo, Windows con la tecla Alt
Para seleccionar varias cadenas iguales a la vez en Windows yo uso ctrl+d
Lorem20
` `Presionamos enter y listo! 💪🏻😁`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.
`. Se crea una lista desordenada `
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.
.
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?