La creación de una página web o blog es un requisito necesario para cualquier empresa que quiera ganar presencia en internet. A través de este lugar, los usuarios entenderán en qué se basa la compañía, podrán ver su catálogo de productos y encontrar formas de contacto. A grandes rasgos, el sitio web es el escaparate para situar una marca ante un público. Existen diversas formas de plantear este escaparate. El formato HTML es una de ellas, y, aunque no tengas ni la menor idea de lo que significa, muy probablemente lo habrás oído alguna vez. En este artículo te explicaremos en qué consiste y cómo se diseña una página web en HTML.
Índice de contenidos
¿Qué es el HTML?
Para poder hablar de este tema de forma correcta debemos ir a la raíz. Resulta importante diferenciar entre los conceptos de página web y sitio web, ya que, aunque puedan parecer lo mismo existe una divergencia clara entre ellos y es mucha la gente que no la conoce.
La página web es un único documento electrónico que se puede visualizar en un navegador y está codificado en un lenguaje HTML. Cada página web tiene una dirección (URL) única.
Por su parte, el sitio web es el conjunto de páginas web pertenecientes a un mismo dominio. Es decir, es el lugar online de una marca, mientras que las páginas son, por ejemplo, cada uno de los apartados a los que se puede acceder.
Una vez aclarada esta cuestión, nos centraremos en el tema que ocupa este post. HTML son las siglas de HyperText Markup Language, lo que en español vendría a ser “Lenguaje de Marcado con Hipertexto”. Esto quiere decir que es un formato que permite marcar el texto mediante unas etiquetas especiales que le añaden semántica. Esto le sirve al navegador para aplicar ciertas pautas de diseño que faciliten la lectura, como diferentes tamaños, fuentes o colores.
Conceptos HTML: etiqueta, elemento y atributo
Antes de explicarte cómo se diseña una página web en HTML abordaremos tres conceptos básicos dentro de este formato: etiqueta, elemento y atributo.
La etiqueta, como ya adelantábamos en el apéndice anterior, sirve para establecer un orden jerárquico dentro del texto. En otras palabras, si queremos crear un título le pondremos unas etiquetas para que sea más grande. Si lo que buscamos es crear subtítulos, apéndices o destacar una parte del texto, repetiremos la acción con otro tipo de etiquetas para ello. Estas etiquetas, junto con el contenido que envuelven -ya que se colocan siempre al principio y al final del texto que se quiera destacar- conforman lo que se conoce como elemento.
Existen tres elementos que conforman una estructura básica en cualquier página web: <HTML>, <HEAD> y <BODY>.
<HTML> es el elemento base de la página y no tiene más función que marcar la entrada para todo lo que venga después. Por su parte, <HEAD> hace referencia a la cabecera de la página, que suele contar con información descriptiva sobre el tema que ocupe. Sin embargo, no se visualiza como tal en la página. Finalmente, en el elemento <BODY> irán todos los elementos que vemos en el navegador como tal, tanto el texto como las imágenes o vídeos.
Para terminar, el atributo es una palabra que sirve para especificar parámetros adicionales en una etiqueta, dándole mucho más contenido. Un ejemplo más visual: el atributo “href” indica la URL de una página que se enlace en el texto y el atributo “target” indica que esta página debe abrirse en una nueva pestaña cuando el usuario clique sobre el link.
Cómo se diseña una página web en HTML
Ahora que ya entiendes los conceptos básicos de este formato llega el momento de ver cómo se diseña una página web en HTML. A continuación, desde Comunicare te explicamos uno a uno los pasos a seguir para crear y empezar a añadir texto y otros elementos a tu sitio.
1. Encabezado de la página web
Para comenzar a crear una página web en HTML debes utilizar un editor de texto -cualquiera que venga integrado en tu ordenador servirá, como el propio Blog de notas-. Como hemos visto, este formato trabaja con etiquetas, por lo que se puede comenzar escribiendo el siguiente código para dar lugar al inicio del sitio:
- La etiqueta <! DOCTYPE HTML> explica que el documento debe ser HTML.
- <HTML> es el elemento principal de la página HTML.
- <HEAD>. En esta parte se inserta información de la web.
- <TITLE>. Corresponde al título de la página que se muestra en la parte superior de la página navegador.
Tras este inicio, vienen otros tres bloques de texto:
- <META name=»description» content=»>
- <META name=»keywords» content=»>
</HEAD>
<BODY>
- </BODY>
</HTML>
En el campo de contenido (el primero) de la etiqueta “descripción” debes ingresar una dirección que sea relevante para tu sitio. Por su parte, la etiqueta “keywords” utilízala para poner palabras claves por las que deseas ser situado en los buscadores, siempre relacionadas con el tema de la web.
Finalmente, <BODY>, como ya explicamos, contiene la parte visible del texto en la web. Una vez completados todos los campos, guarda el documento como index.html. La próxima vez que lo abras, verás creada tu página HTML con el título elegido.
2. Insertar el texto
Una vez creada la página, deberás crear el texto que aparecerá en la web, entre las etiquetas <BODY> Y </BODY>. Recuerda que siempre deben estar abiertas y cerradas.
Algunas de las etiquetas más útiles para escribir son las que permiten cambiar el formato del texto:
- Utiliza <b> y </b> para subrayar.
- <i> y </i> te permitirá escribir en cursiva.
- Si quieres insertar una negrita, usa <b> y </b>.
- Y para tachar un texto, <del> y </del>.
3. Color de texto
Añadir diferentes colores a lo que escribas conseguirá que sea más visible y llamativo. Para conseguirlo, debes adjuntar al texto que deseas colorear la etiqueta SPAN, al igual que hemos visto en los casos anteriores. La etiqueta SPAN por sí sola no produce cambios, pero si la acompañamos del color que queremos escrito en inglés, sí. Un ejemplo es el siguiente:
- <span style=»color:blue»> aqui escribe el texto </span>. Con esto, se pondrá el texto en azul.
4. Tipo de letra
Para que tu sitio HTML sea fácil de consultar es también conveniente cambiar la fuente y el tamaño del texto. Tal y como en el caso anterior, volveremos a utilizar la etiqueta SPAN junto a la fuente o nombre del estilo de letra que quieres para tu texto. De esta forma, la frase debe quedar así:
- <span style= »font-family:verdana»> aquí escribe tu texto </span>
5. Tamaño de letra
En ocasiones, necesitarás usar un texto más grande para destacar apéndices o subtítulos. Para ello, se repite el mismo esquema que en los casos anteriores:
- <span style=»font-size:12px»> aquí va el texto </span>
6. Insertar imágenes
Una imagen vale más que mil palabras. Y es que acompañar el texto de fotos, infografías, gráficos o cualquier otro tipo de imagen es una herramienta muy útil para captar la atención del usuario. Los tipos que se utilizan en sitios web HTML son tres: GIF, JPG y PNG, cualquier otra tipología no será soportada por este formato.
El código para insertar una imagen es: <img src=»immagine.gif» alt=»descripción de la imagen» height=»42″ width=»42″ >.
7. Añadir más posibilidades
Una vez que ya eres capaz de utilizar el lenguaje HTML y que sabes cómo se diseña una página web en HTML paso a paso, podrás ir diseñando otros aspectos como la insersión de enlaces (con la etiqueta “href” que nombramos anteriormente) o listas (con las etiquetas “ul” y “li”).
Todos estos pasos son solo un primer acercamiento de las muchas funciones que puedes incluir en tu web gracias al formato HTML. Pero no te preocupes si ahora te parece un mundo: es un trabajo que requiere paciencia y práctica. Además, el hecho de que cuentes con profesionales con experiencia en diseño web hará que sea mucho más sencillo crear tu sitio sobre esta modalidad sin que te suponga un gran quebradero de cabeza.
Comunicare
Algunos expertos en diseño web que impulsarán tu sitio los encontramos en el equipo de Comunicare. Se trata de una agencia de marketing con sede en Madrid que cuenta con doce años de experiencia en el marketing integral o 360, dentro del que también hemos trabajado numerosas herramientas pertenecientes a la mercadotecnia digital.
Es por ello por lo que contamos con profesionales en constante formación que te ayudarán a sacar adelante el diseño de tu página web, para que sea lo más atractiva posible a ojos del consumidor haciendo uso de las últimas técnicas presentes en el mercado.
Agencias de diseño web en España
Algunas otras opciones de empresas especializadas en diseño web y, por ende, conocedoras de cómo se diseña una página web en HTML son las siguientes: