Por qué debería aprender a codificar (un poco): una introducción a HTML y CSS
Publicado: 2021-08-15Nunca ha sido más fácil iniciar una tienda en línea. ¡Gracias a plataformas como Shopify, puede comprar un tema, cargar sus productos y vender a sus clientes en cuestión de horas! La barrera de entrada es tan baja que casi cualquier persona puede hacerlo.
Si bien es así de fácil comenzar, es igualmente fácil dar por sentada esa simplicidad. Eventualmente, querrá agregar o cambiar algo en su tienda y se dará cuenta de que su tema no lo admite. Los desarrolladores no son baratos y lo último que quieres hacer es pagarle a otra persona por algo que podrías haber hecho tú mismo.
¿Qué pasaría si le dijera que puede dedicar un poco de tiempo por adelantado para aprender los conceptos básicos de cómo funcionan los sitios web y ahorrar algo de tiempo y dinero en el futuro?
Al final de este artículo, debe conocer los conceptos básicos de HTML y CSS y saber lo suficiente para comenzar a retocar en su propia tienda.
¡Así que tómate unos minutos para prepararte y comencemos!
¿Qué es HTML y CSS?
HTML son las siglas de Hypertext Markup Language. Es uno de los lenguajes fundamentales más antiguos e importantes de la web. ¡Es responsable de estructurar y presentar el contenido en esta misma página!
CSS son las siglas de Cascading Style Sheets. Es responsable de proporcionar al HTML su estilo y formato.
Juntos, estos son los componentes básicos necesarios de cualquier sitio web. En este artículo, lo guiaré a través de los conceptos básicos y le mostraré cómo codificar y diseñar su primera página web.
Como soy un gran admirador de Bill Murray (que no lo es), vamos a crear nuestro propio santuario en la web para Bill.
Sin embargo, primero, profundicemos en HTML y CSS para obtener una comprensión completa de su poder y capacidad.
La anatomía de un sitio web
Podemos entender fácilmente cómo funcionan juntos HTML y CSS comparándolos con las partes estructurales de una casa.
Detrás de las paredes de cada casa hay un marco responsable de su estructura. Piense en HTML como el marco de una casa. Es responsable de la estructura de un sitio web.
Siguiendo nuestra analogía de la casa, CSS es responsable de cosas como los colores de pintura, las dimensiones del comedor, el color de los pisos de madera y la forma y el estilo de la mesa del comedor.
Veamos algunas marcas HTML básicas y las revisemos línea por línea.
Doctype
La etiqueta <! DOCTYPE html> ayuda al navegador a saber que el tipo de documento con el que queremos trabajar es HTML.
Cabeza
Dentro de la etiqueta <head> es donde almacenamos todos los metadatos de nuestro documento. Estos datos incluyen cosas como el título, los estilos (CSS), la descripción y más. Estos datos no se muestran al usuario final, pero los navegadores los usan para determinar el título del documento o los estilos que debe usar cuando lo muestre al usuario final.
Anuncio publicitario
Algunos otros elementos que se encuentran en el <head> de una página HTML podrían incluir información del autor, la descripción de la página o un enlace a una imagen utilizada para el favicon (el pequeño icono en una pestaña del navegador).
Cuerpo
La etiqueta <body> contiene todo el marcado (código) del sitio web. Este es el único código que verá el usuario final cuando visite nuestro sitio.
Las herramientas que necesita para crear un sitio web
Para empezar a escribir HTML, podría pensar que necesita un software sofisticado y caro, pero no es así. De hecho, ya tienes lo que necesitas.
Si está usando una PC, abra el programa NotePad. Si está en una Mac de Apple, abra TextEdit.
Ahora que tiene abierto su programa de edición de texto, síganme mientras ampliamos el marcado HTML básico anterior. Copie (Ctrl + C en Windows / Cmd + C en Mac) y pegue (Ctrl + p en Windows / Cmd + P en Mac) el siguiente código en su editor de texto.
<! DOCTYPE html>
<html>
<cabeza>
<title> El título de su página </title>
</head>
<cuerpo>
<h1> ¡Hola mundo! </h1>
<p> Este es nuestro primer párrafo. </p>
</body>
</html>
Guarde este archivo en su escritorio y ábralo en su navegador web. Ahora debería ver su código traducido o renderizado por el navegador y debería verse así:
El elemento de encabezado (<h1>)
La etiqueta <h1> se usa cuando desea llamar la atención y definir cierto texto. En este caso, queremos el texto "¡Hola mundo!" para ser más grande y más prominente que el texto siguiente.
HTML tiene seis etiquetas de encabezado diferentes que puede usar: h1, h2, h3, h4, h5 y h6.
El tamaño de la fuente será más pequeño con cada "paso hacia abajo" que dé; H1 será el más grande y H6 será el más pequeño. Por defecto, tendrán algún margen (o espaciado alrededor de ellos) para separarlos de otros elementos en la página y darle al usuario una jerarquía visual.
Tómese un minuto para experimentar cambiando el título, el encabezado y / o las etiquetas de párrafo. Una vez que realice un cambio, guárdelo y luego actualice su navegador. ¡Felicitaciones, acaba de editar HTML por primera vez!
Sin embargo, parece aburrido, ¿verdad?
Agreguemos un poco de estilo a nuestra página y aprendamos más sobre el verdadero poder de CSS.
Para agregar nuestros propios estilos a estos elementos HTML, necesitamos agregar una etiqueta <style> dentro del <head> de nuestro documento.
Esta etiqueta envuelve todo nuestro CSS. Piense en lo que hay dentro de la etiqueta <style> como la guía de estilo del navegador.
Debajo de la etiqueta <title> en una nueva línea, agregue una etiqueta de estilo como esta:
<title> El título de su página </title>
Anuncio publicitario
<estilo>
</style>
Dentro de la etiqueta de estilo es donde podemos ingresar todas nuestras declaraciones. Una declaración CSS consta de una propiedad seguida de un valor .
Hagamos que el color de nuestro <h1> sea diferente del resto de nuestro texto porque es el más importante y queremos que se destaque. Agregue lo siguiente entre sus etiquetas <style> , guarde su archivo y actualice su navegador nuevamente.
<estilo>
h1 {color: azul; }
</style>
¡Ahora debería ver algo parecido a esto! Notarás que nuestro "¡Hola mundo!" el texto ahora es azul. Simple, ¿verdad?
¡Listo, lo has conseguido! Ha cambiado correctamente el estilo de un elemento HTML mediante CSS. ¿Estamos teniendo diversión aún?
Añadiendo imágenes a nuestra página
Hay muchos otros elementos que puede incluir en su página, pero uno de los más destacados en cualquier sitio web es la imagen todopoderosa. Podemos agregar fácilmente una imagen al incluir el etiqueta así:
<img src = “https://www.fillmurray.com/400/500” >
Nota: En aras de la demostración, estoy usando un servicio de marcador de posición de imagen llamado www.fillmurray.com. Puede usar una imagen en su computadora local si lo prefiere.
Manera alternativa (consejo profesional) de tomar una imagen de un sitio web: busque una imagen en un sitio web que le gustaría usar y haga clic con el botón derecho en ella. Haga clic en Copiar dirección de imagen y la URL de esa imagen estará en su portapapeles. Dependiendo de su navegador, la redacción puede ser ligeramente diferente. Estoy usando Google Chrome. No recomiendo el uso excesivo de enlaces directos, pero para esta demostración no es gran cosa.
Copie y pegue este elemento de imagen y colóquelo debajo de su etiqueta de párrafo para que su bloque de código completo se vea como el mío:
<! DOCTYPE html>
<html>
<cabeza>
<title> El título de su página </title>
<estilo>
h1 { color : azul;}
</style>
</head>
<cuerpo>
<h1> ¡Hola mundo! </h1>
<p> Este es nuestro primer párrafo. </p>
<img src = “ https://www.fillmurray.com/400/500 ” alt = ”imagen de Bill Murray” >
</body>
</html>
Guarde su archivo y vuelva a cargar su navegador y ahora debería ver algo como esto:
Si estaba prestando atención, notó otro atributo en la etiqueta <img> , la alt = ”imagen de Bill Murray” . Dado que el navegador descifra el código y no puede ver la salida renderizada como usted y yo, necesita alguna forma de conocer el contexto de lo que se muestra.
Anuncio publicitario
Al agregar una etiqueta ALT (texto alternativo) a nuestra imagen, podemos decirle al navegador de qué se trata el tema de nuestra imagen.
Esto también es muy importante para SEO (optimización de motores de búsqueda) y, lo que es más importante, este texto se lee en voz alta para usuarios ciegos que utilizan un lector de pantalla.
Pero, ¿qué pasa con los enlaces?
¡Ninguna introducción a HTML / CSS estaría completa sin cubrir los enlaces! Cuando esté creando un sitio web, querrá tener la capacidad de vincular, ya sea a fuentes externas oa otras páginas internas dentro de su propio sitio web.
Hablemos del elemento ancla. La verdadera magia de un elemento de anclaje es en realidad su atributo href. Demostremos la estructura de una etiqueta de anclaje agregando un enlace a la página de Wikipedia de Bill.
<a href= "www.google.com"> Lea su entrada en Wikipedia </a>
Este código le dice al navegador que cuando un usuario hace clic en el texto: "Leer su entrada de Wikipedia", lo lleva a www.google.com.
Agreguemos este código justo debajo de nuestro elemento de encabezado para que nuestro bloque de código ahora se vea así:
<! DOCTYPE html>
<html>
<cabeza>
<title> El título de su página </title>
<estilo>
h1 { color : azul;}
</style>
</head>
<cuerpo>
<h1> ¡Hola mundo! </h1>
<a href= "https://en.wikipedia.org/wiki/Bill_Murray"> Lea su entrada en Wikipedia </a>
<p> Este es nuestro primer párrafo. </p>
<img src = “https://www.fillmurray.com/400/500” alt = “imagen de Bill Murray” >
</body>
</html>
Presiona guardar y actualiza el navegador y, con suerte, el tuyo se parece al mío.
Llevándolo al otro lado de la línea de meta
Seguí adelante y diseñé mi pequeño homenaje a Bill Murray y aquí está mi resultado final. Analizaré algunos de los estilos agregados a continuación.
Redoble de tambores por favor…
Ahora, puede ver que esto no es nada especial, pero eso es por diseño. Esto es solo la punta del iceberg cuando se trata de cómo se podría ver o diseñar esta página. Quería mantener las cosas simples para que entendieras lo que hace cada uno de los métodos de estilo a continuación.
Anuncio publicitario
Pasemos al pequeño CSS que tuve que agregar para llegar tan lejos.
Peinar el cuerpo:
Primero, al cuerpo de la página, agregué:
cuerpo {
color de fondo: #eee;
familia de fuentes: Helvetica, Arial, sans-serif;
alineación de texto: centro;
margen: 25px;
}
color de fondo
Establecí el color de fondo de la página en un gris muy claro usando el valor de color hexadecimal #eee. Puede obtener más información sobre ellos y ver algunos ejemplos aquí en MOZ.
Familia tipográfica
Quería cambiar la fuente del uso predeterminado de los navegadores Times New Roman. Para esto, elegí Helvetica como mi primera opción (si el usuario tiene esa fuente instalada en su computadora), Arial como mi segunda opción (si el usuario no tiene Helvetica, usará por defecto Arial) y como copia de seguridad final , una fuente sans serif básica.
texto alineado
Elegí alinear todo el texto de mi página en el centro. Hay un par de otras opciones para valores como izquierda y derecha, pero pensé que para esto se veía mejor centrado.
margen
Agregué un pequeño margen al cuerpo del documento para darle un respiro.
Diseñando nuestra imagen:
Por último, diseñé el hermoso rostro de Bill, eh, me refiero al elemento de imagen
img {
borde: 10px sólido # 41bcd6;
caja de sombra: 2px 5px 5px # 999;
relleno: 10px;
radio del borde: 5px;
}
No hice mucho, pero quería darle a la foto de Bill algo de presencia en la página.
frontera
Agregué un borde de 10px alrededor de la imagen. El # 41bcd6 es otro valor de color hexadecimal que representa un color azul claro (parte de mi tema de color subliminal secreto de Steve Zissou).
sombra de la caja
Quería darle a la imagen una sensación tridimensional, así que le agregué una sombra clara. La propiedad box-shadow acepta valores de píxeles y colores que dictan la longitud, el desenfoque y el color de la sombra. Para obtener más información sobre la declaración de sombra de caja, Moz la desglosa bien aquí.
relleno
Para que la imagen se parezca más a un marco de imagen, agregué 10 píxeles de relleno entre ella y el borde.
radio de borde
Solo para ilustrar una de las mejores habilidades de CSS, redondeé las esquinas de la imagen usando border-radius. Cuando comencé a crear sitios web, no existía nada parecido, y producir esquinas redondeadas en la web fue en realidad bastante desafiante. Hemos recorrido un largo camino desde entonces y ahora es bastante simple. Acepta un valor como px o ems, y aquí elegí redondearlo lo suficiente como para notarlo estableciendo el valor en 5px.
Conclusión
A lo largo de este artículo, trabajamos juntos para aprender la anatomía básica de un sitio web. También aprendimos algo de HTML y CSS simples que, en última instancia, se convirtieron en un pequeño tributo de una página bastante sorprendente a uno de los mejores actores de todos los tiempos de una generación.
Sin embargo, con toda seriedad, espero que hayas podido seguirme y crear tu primer sitio web básico. Ahora, si Bill Murray no es tu actor favorito, te desafío a editar este código para mostrar tu actor, banda o lo que quieras.
Si necesita hacer referencia a este código en cualquier momento, vuelva y lea este artículo, o para su comodidad, lo incluí en CodePen aquí.
Hay tantas cosas divertidas que puedes hacer con solo HTML + CSS. Aquí hay algunos recursos excelentes para que expanda su aprendizaje:
Anuncio publicitario
- Code Academy: introducción 100% GRATUITA al curso HTML / CSS
- CSS Zen Garden: el primer ejemplo en la web que realmente "hizo clic" para mí, para ayudarme a darme cuenta de que puede tener 100 sitios web de aspecto diferente que usan el mismo marcado HTML
- Animaciones CSS
- La Mona Lisa usando solo CSS
- Perro husky animado usando solo CSS
- CodePen: CodePen es una herramienta en línea para realizar pruebas EN VIVO y mostrar su código HTML, CSS y JavaScript.
En serio, solo hemos arañado la superficie en este artículo, así que lo animo a leer más, tomar algunos cursos en línea y seguir impulsando sus conocimientos.
