Para ser un gran diseñador web tienes que prepararte en los términos y conceptos que a continuación te presentaremos en el transcurso del artículo
Uno de los métodos más utilizados a nivel global para crear páginas es con los lenguajes de marcado HMTL5 y CSS. En el vertiginoso mundo digital de hoy en día, el diseño web se ha convertido en una pieza fundamental para cautivar a los visitantes en línea y brindarles una experiencia atractiva y memorable. En este contexto, el conjunto formado por HTML5 y CSS emerge como una combinación poderosa que da vida a la estructura y la estética de las páginas web modernas.
Para ser un gran diseñador web tienes que prepararte en los términos y conceptos que a continuación te presentaremos en el transcurso del artículo, además de estos factores, debes estar al tanto de las últimas tendencias en diseño web. Esto te ayudará a crear sitios web que sean atractivos, funcionales y fáciles de usar.
Antes de diseñar, ¿Qué es html 5? Ejemplos
Como bien lo menciona en las siglas HTML (HyperText Markup Language) es un tipo de lenguaje marcado de hipertexto que permite estructurar el contenido dentro una página web, sin embargo, suele ser confundido con un lenguaje de programación porque combina tres tecnologías web: código para construir la estructura del sitio y JavaScript, para agregar funcionalidad a los elementos HTML.
Nuestra manera de comunicarnos con la herramienta es a través de etiquetas semánticas con contenido, estas son aquellas palabras que se pueden convertir en hipervínculo con tan solo encerrar las palabras en medio de paréntesis angulares (<>), con estos elementos podemos hacer que el contenido se comporta de manera determinada.
Ejemplo de etiquetas semánticas:
- <p> Fundación Telefónica Movistar presente en Colombia </p>
- <p> Fundación Telefónica Movistar publicó un artículo </p>
El contenido, por otro lado, son aquellos elementos que están dentro de los paréntesis angulares. En los ejemplos anteriores, sería “Fundación Telefónica Movistar presente en Colombia”, esto con el fin de crearle al contenido un significado y una función específica.
Por otro lado, también está CSS, este es un lenguaje de hojas de estilo que se utiliza para controlar la apariencia del sitio
¿Cómo se inicia una página HTML5?
Paso 1: Crea el archivo
Ingresa a un editor de código, puede ser Visual Studio Code, Sublime Text, Notepad o Atom. Crea un nuevo archivo de texto, guárdalo con la extensión “.html.” y nómbralo.
Paso 2: Agrega este código al archivo:
<!DOCTYPE html>
Al escribir el anterior código, ya estás declarando el tipo de documento.
Paso 3: Estructura HTML5
Debajo del tipo de documento que necesitamos, crea el esqueleto básico de la página web. Esto lo haces posible con incluir las siguientes etiquetas:
<html>
<head>
<title>Título de la Página</title>
</head>
<body>
<!– Tu contenido irá aquí –>
</body>
</html>
Paso 4: Contenido
Agrega contenido en dentro de las etiquetas: <title> y <body>. Por ejemplo, de título:
<!DOCTYPE html>
<html>
<head>
<title>Primera prueba FTM</title>
</head>
En el cuerpo del sitio web puedes usar diferentes etiquetas HTML para estructurar el contenido. Por ejemplo, puedes utilizar <h1> para encabezados de nivel 1, <p> para párrafos y <img> para imágenes.
<!DOCTYPE html>
<html>
<head>
<title> Primera prueba FTM</title></head>
<body>
<h1>Bienvenido a Fundación Telefónica Movistar</h1>
<p>Este es nuestro primer párrafo, lo hicimos para enseñarte.</p>
<img src=»imagen.jpg» alt=»Imagen de ejemplo»>
</body>
</html>
Paso 5: Visualiza tu página HTML5
Una vez que hayas agregado el contenido deseado, guarda el archivo. Luego, abre tu navegador web preferido y arrastra el archivo HTML que creaste a la ventana del navegador. Deberías ver el contenido de tu página web en acción.
Curso virtual gratuito de HTML5 + CSS
Si deseas mejorar tus habilidades en este campo, explorar más etiquetas y conceptos para diseñar y desarrollar páginas web más complejas y ricas en contenido, considera realizar un curso de tecnología para ampliar tus conocimientos. En nuestra plataforma Conecta Empleo, tenemos un curso gratuito y con certificado de Diseño Web con HTML5 + CSS – FT
Inscríbete y descubre aspectos que contribuirán a construir un perfil profesional sólido, completo y atractivo tanto para las empresas. ¡Hasta la próxima!
