En este artículo aprenderás cómo hacer tu primera página de HTML para marketers de forma simple y con las etiquetas más elementales para el desarrollo web.

¿Qué encontrarás en este post?

Primera página de HTML para marketers

Aunque no lo creas, con los elementos más básicos, es decir, las principales etiquetas del lenguaje de marcado HTML y las demás etiquetas de CSS, podrás configurar un sitio sencillo, pero útil e interesante al mismo tiempo. Será el medio para cumplir con muchos objetivos que tengas pensados como marketer.

Por eso, te animamos a conocer un poco más acerca de ambos lenguajes, ya que aunque todo lo relacionado con el desarrollo o programación web pueda parecer difícil y un poco alejado de las tareas que realiza un experto en marketing, si tienes la capacidad de desarrollar el diseño principal para tus sitios web, tus productos serán todavía más exitosos.

¿Quieres crear un sitio simple, pero con el que entenderás cómo funcionan este par de lenguajes? ¡No te pierdas nuestro siguiente apartado y haz tu primera página de HTML para marketers!

Texto para el lenguaje de marcado HTML

Para empezar a desarrollar tu primera página de HTML para marketers debes tener claro que los lenguajes de HTML, CSS y JavaScript son herramientas primordiales en el trabajo en conjunto. Sin embargo, en esta ocasión, nos enfocaremos en desarrollar esta página con el lenguaje de marcado de HTML y CSS.

🔴 ¿Quieres entrar de lleno al Marketing Digital? 🔴

Descubre el Bootcamp en Marketing Digital y Análisis de Datos de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Marketing Digital y Análisis de Datos por una semana

Con la primer herramienta vamos a tener que dibujar todo el contenido textual y gráfico (referente a las tablas y formas) que va a tener tu sitio web. Para ello, debemos utilizar etiquetas como <head> </head> para integrar la información del documento, y las etiquetas <style> </style>, que no servirán para agregar estilos a nuestros textos y que también podemos incluir en otro documento de estilos de CSS. Tampoco podemos olvidar las etiquetas <body> >/body> para empezar a dibujar todo el contenido del texto.

Dentro de esta etiqueta mucho más amplia puedes encontrar otras etiquetas que te sirven para añadir títulos, subtítulos y cuerpo de texto, entre otros. A su vez, puedes empezar a integrar clases, que vienen del documento de estilos CSS, para agregar imágenes con la herramienta de src o source, es decir, la fuente de donde viene la imagen que quieres integrar en tu sitio web.

Aquí también aparece el elemento alt, el cual te permite agregar un texto alterno a la imagen que acabas de integrar. Esta sección de clases también te permite añadir otro tipo de elementos, como el banner o colores, entre otros, en el documento index.html.

<!DOCTYPE html>
<html lang="en"
<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE-edge",
       <meta name "viewport" content "width-device-width, initial-scale=1.0>
       <title> Práctica de HTML KeepCoding </title>
<style>
.bannertxt {
     color: white;
</style>
<link rele"stylesheet" href=" /estilos.ess"> 

</head>
<body>
<div class = "header"><img class="logo" src="/Recursos/logo marketers.png" alt="logo de la página"></div>

<div> class= "banner" <h1 class="bannertxt">Esta es mi primer página en HTML</h1>

<p>Esto es un texto falso para aprender a hacer la primera página en HTML</p>
<h2> style="color: #00390;">Mis servicios</h2> 

<ol>
     <li>Primer elemento</li>
     <li>Segundo elemento</li>
     <li>Tercer elemento</li>
</ol>

<ul>

     <li>Primer elemento</li>
     <li>Segundo elemento</li>
     <li>Tercer elemento</li>

</ul>


<p>Todos los derechos reservados </p>
<p><a href= "link"> Política de cookies </a></p>

</body>

</html>

Texto para el lenguaje de estilos

Para crear tu primera página de HTML para marketers, debes saber que un documento de texto para HTML nunca va solo; siempre estará acompañado del lenguaje de estilos CSS, el cual te permite añadir elementos específicos sobre todo el documento anterior.

Aunque en el documento de index.html hay elementos que ya agregan estilos con la etiqueta de <style> </style>, esta nos ayuda a integrar aspectos mucho más generales, como los márgenes, los colores del fondo, el tamaño de los logos o las imágenes de fondo, entre otros.

De cualquier forma, esta se puede añadir en cualquiera de los dos documentos: en el index.html o en estilos.css.

html, body {
                     margin: 0px;

}

.header {
                    margin: 0px; 
                    background-color: black;


.logo { 
                    width: 20%;

}

.banner {
       background-image: url(/Recursos/banner\mkt-100.jpg);
       height: 400 px;
}

Resultado final

Por último, una vez lances ambos documentos, vas a poder visualizar la siguiente página que, aunque es simple y con muy pocas etiquetas, resulta útil y presenta su objetivo de forma clara y atractiva.

Primera página de HTML para marketer [simple y lo elemental]

Si reproduces esta primera página de HTML para marketers, que está entre lo simple y lo elemental, estarás más cerca de crear un sitio web mucho más atractivo y lleno de elementos que te ayudarán a llegar a tus usuarios de forma directa y efectiva. ¿Quieres saber cómo llegar a ellos a partir del desarrollo web? ¡Nuestro Marketing Digital y Análisis de Datos Bootcamp es perfecto para aprender sobre ello! No dudes en entrar para pedir más información y descubrir cómo impulsar tu carrera.