Una página web es un documento digital al que se puede acceder a través de internet o de una red interna. El lenguaje de marcado HTML (HyperText Markup Language) es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web. A continuación, exploraremos los fundamentos de HTML y cómo puedes utilizarlos para crear tu propia plantilla de ecommerce.
HTML5 es la última versión del lenguaje HTML. Este nos permite insertar textos, imágenes, videos y sonidos como contenido. Aunque HTML y CSS no son exactamente lenguajes de programación, son los encargados de desarrollar páginas web, entre otras cosas. Como he comentado, su uso más conocido y generalizado es la creación, edición y actualización de sitios web.
Pero, incluso si utilizas editores web como WordPress, el conocimiento de HTML y CSS te permite añadir contenidos y realizar cambios. Puedes diseñar y editar ebooks. Por supuesto, estudiar con profesores cualificados es muy importante. ¿Te plantearías estudiar Inglés por tu cuenta? No, ¿verdad?. Pues esto es lo mismo. Una buena base de aprendizaje te permitirá seguir formándote en estas materias a medida que estos lenguajes evolucionen.
Piensa que el mundo Web cambia y lo hace muy rápido, por lo que tendrás que ir actualizando tus conocimientos. HTML5 y CSS3 no sólo es útil para los diseñadores.
I. Fundamentos de una Página Web
Una página web se compone de varios elementos esenciales:
- Texto: El contenido escrito que se encuentra en la página web.
- Imágenes: Las imágenes pueden ser fotografías, ilustraciones, gráficos, etc.
Lenguaje de Marcado HTML
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web.
- Etiquetas HTML: Las etiquetas HTML son la base de cualquier página web. Son como los bloques de construcción que forman la estructura de la página.
- Atributos HTML: Los atributos se utilizan para proporcionar información adicional sobre las etiquetas HTML.
CSS y JavaScript
- CSS: Se utiliza para describir cómo se deben mostrar los elementos HTML en la pantalla.
- JavaScript: Es un lenguaje de programación que se utiliza para hacer que las páginas web sean interactivas.
II. Hosting y Dominio: Los Pilares de tu Sitio Web
Imagina que quieres construir una casa. Necesitarás dos cosas principales: un terreno donde construir la casa y la dirección que las personas usarán para visitarte.
- Servidor (El Terreno): Un servidor es como el terreno donde se construye tu casa. Es un sistema informático que almacena los archivos de tu página web (la casa) y los hace accesibles a los usuarios a través de internet. Al igual que un terreno, los servidores vienen en diferentes tamaños y capacidades.
- Dominio (La Dirección): Un dominio es la dirección de tu casa en internet. Es lo que los usuarios escriben en la barra de direcciones de su navegador para visitar tu página web.
Además, considera los siguientes aspectos:
- Ancho de Banda (Las Carreteras): El ancho de banda es como las carreteras que llevan a tu casa. Determina cuántos datos pueden transferirse desde tu sitio web (la casa) a los visitantes.
- Espacio de Almacenamiento (El Tamaño de la Casa): El espacio de almacenamiento es el tamaño de tu casa. Determina cuántos archivos puedes almacenar en tu servidor.
- Soporte (El Equipo de Mantenimiento): El soporte es como tu equipo de mantenimiento. Son las personas a las que llamas cuando algo va mal en tu casa.
III. Sistemas de Gestión de Contenidos (CMS)
Un Sistema de Gestión de Contenidos (CMS) es una aplicación que permite a los usuarios crear, editar y gestionar contenido digital.
Opciones Populares:
- WordPress: WordPress es un sistema de gestión de contenidos de código abierto que permite a los usuarios crear y gestionar sitios web y blogs.
- Shopify: Shopify es una plataforma de comercio electrónico que permite a los usuarios crear sus propias tiendas online. Shopify proporciona una variedad de plantillas que pueden ser personalizadas para satisfacer las necesidades individuales de los usuarios. Tu principal objetivo es vender productos online.
- Wix: Wix es una plataforma de creación de sitios web que permite a los usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas de arrastrar y soltar en línea. Quieres una solución fácil de usar para crear un sitio web personalizado.
No tienes tiempo o no estás dispuesto a aprender cómo usar el sistema y mantenerlo actualizado. No estás centrado en el comercio electrónico. Necesitas un sitio web altamente personalizable y estás dispuesto a dedicar un poco más de tiempo a aprender cómo funciona.
Cómo crear una TIENDA ONLINE desde cero | HyperUI + TailwindCSS
IV. Ejemplo Práctico: Estructura Básica de una Página HTML
En este primer paso de nuestro tutorial de HTML mostraremos cómo crear una página sencilla que se podrá visualizar en el navegador. Esta página no es un documento HTML válido, estructurado según determinados estándares de calidad, sino una mera página de prueba. Abre el editor y guarda un documento nuevo con el nombre de test. Como formato de archivo escoge "Hypertext markup language file" para que el navegador pueda entender más adelante que se trata de una página de HTML y lo abra como tal. En el caso que utilices el editor de textos simple, selecciona "Todos los archivos" como formato de archivo y la codificación UTF-8.
En este editor hay que indicar manualmente que se trata de un documento HTML. Lo haremos guardando el archivo con el nombre test.html. Este documento debería poder mostrarse en tu navegador haciendo doble clic sobre él, pero como aún no tiene ningún contenido verás una página en blanco. En el siguiente paso añadimos entonces un texto de prueba como "This is my first webpage!" ("Esta es mi primera página web"). Guardamos el documento y lo volvemos a abrir. Deberías ver algo así al abrirlo en el explorador:
Así habrás creado una primera página web, incluso sin haber escrito ni una línea de código. Si, de la misma manera, intentas añadir un texto bien articulado con títulos y párrafos, pronto te darás cuenta de que es imposible hacerlo sin etiquetas. Cualquier formato añadido, por ejemplo, con un procesador de texto, desaparecerá de la vista en el navegador cuando abras el documento HTML: los puntos aparte desaparecen, los espacios se eliminan, etc. La solución pasa indefectiblemente por marcar todos los componentes formales de texto como tales mediante los elementos estructuradores adecuados, que no es otra cosa que adentrarnos en el mundo de las etiquetas de HTML.
V. Etiquetas HTML Esenciales
El HTML es un lenguaje que se utiliza para escribir las páginas web, es decir, es la estructura. Y el CSS, hojas de estilo, es la forma que tiene la estructura: colores, tipo de letra, etc. El código fuente del HTML se puede escribir en cualquier bloc de notas, a continuación vamos a ver las etiquetas más importantes:
- <html>: etiqueta de apertura, indica al navegador lo que tiene que leer.
- </html>: etiqueta de cierre.
- <body>: etiqueta de apertura del cuerpo.
- </body>: etiqueta de cierre del cuerpo.
- <p>: etiqueta de apertura, indica que va a empezar un párrafo.
- </p>: etiqueta de cierre, indica el final del párrafo.
- <a>: etiqueta de apertura, se usa para poner un enlace.
- </a>: etiqueta de cierre, se pone al final del enlace.
Estas etiquetas tienen atributos como “_blank”, abre el documento vinculado en una ventana nueva del navegador. Como podemos observar en las etiquetas anteriores, la mayoría de las etiquetas tienen una de apertura y otra de cierre, cada una tiene unos atributos específicos de lo que es la etiqueta. Aunque hay excepciones.
Existen determinadas etiquetas del código HTML que no es necesario poner una de apertura y otra de cierre, como el salto de línea que es <br/>. También disponemos de los caracteres especiales como el € que sería &euro.
Unas de las etiquetas más importantes con las del encabezado, se usan para poner los títulos, conforme va aumentando el número el tipo de letra se va haciendo más pequeño, el H1 siempre será el más grande:
- <H1>: título principal.
- <H2>: título secundario.
- <H3>: título intermedio.
Las etiquetas asociadas al tipo de letra no las hace falta poner hojas de estilo. Si queremos poner un color de fondo a una página web hay que meterlo dentro de las etiqueta body.
Etiqueta de cabecera: <head> y </head> entre estas etiqueta del código HTML se pone lo que se verá en la parte de arribe del navegador. Otra de las etiquetas más importantes es donde pones el título, sería así: <tittle> y </tittle>.
Los textos o enlaces “ancla” son los que se usan cuando hay un enlace, lo pulso y me baja a otra zona de la misma web donde estoy. Las etiquetas que usamos para esto son: <a name=“ancla1”> y </a>.
Si estamos navegando por internet, cuando estamos en una página web pulsando el botón derecho y a continuación, ver código fuente, se te abrirá otra página con el código HTML. Otra forma de ver el HTML de una web es pulsando el botón derecho e inspeccionar elemento, entonces el código HTML te aparecerá en la parte inferior o en la parte derecha de la pantalla. Si lo haces de esta última forma y pones el cursor encima de una etiqueta HTML, se sombrea en la página web lo que pertenece a esa etiqueta.
VI. Recursos Adicionales
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Wix y cómo utilizar sus diversas funciones para crear tu propio sitio web. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta.
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Shopify y cómo utilizar sus diversas funciones para crear tu propia tienda online. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta.
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Elementor y Divi en WordPress y cómo utilizar sus diversas funciones para crear tu propio sitio web o blog. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta.
En la clase del Máster Online que impartió Víctor Palomar vimos los conocimientos básicos que nos nombrarán en las distintas clases de SEO, cómo escribir para un blog, su edición… Nos introdujo en el código HTML, las etiquetas más importantes, cómo introducir un vídeo en un WordPress; y el lenguaje JavaScript.