Índice de contenidos
En la era del diseño web con WordPress y otros CMS de contenidos cada vez se le requieren menos conceptos teóricos a un diseñador web, pero para conseguir la excelencia en un trabajo realizando proyectos web totalmente adaptados a las necesidades del cliente, se necesitan una serie de conocimientos de los lenguajes HTML y CSS como mínimo.
En este artículo, que constará de dos partes, vamos a iniciaros tanto en HTML como en CSS, aunque tomaremos como punto de partida las nociones básicas sobre el HTML.
Qué es el HTML
El HTML (HyperText Markup Language «lenguaje de marcas de hipertexto») es un lenguaje de programación que se emplea en el desarrollo de páginas web. Es un lenguaje compuesto de etiquetas que a su vez pueden contener atributos. Estas etiquetas permiten definir la estructura de la página y sus contenidos.
Principales etiquetas del HTML
Las etiquetas HTML se pueden dividir en dos grandes grupos: Las que definen los bloques de contenido, es decir la estructura y las que se utilizan para los contenidos: Textos, listas, enlaces, imágenes, etc.
Os dejamos un listado de etiquetas mostrándolas según su posición en la página: ?
- <html>: Es la etiqueta principal y la que engloba toda la página. Con esta etiqueta “informamos” al navegador de que estamos abriendo una página web.
- <head>: dentro de la etiqueta <html> hay dos grandes apartados, el head y el body. El body no se muestra visualmente a los usuarios y se utiliza para definir parámetros internos como el título que aparece en el navegador o las hojas de estilos (CSS) y Javascript (JS) enlazadas.
- <title>: Título de la página que se suele mostrar en la pestaña del navegador.
- <meta>: Metadatos de la página para incluir información muy variada, como por ejemplo: una pequeña descripción de la página, nombre del desarrollador, palabras claves del texto, etc.
- <link>: Etiqueta que se utiliza para enlazar otros documentos, generalmente archivos Javascript.
- <style>: etiqueta para enlazar documentos CSS para cambiar la apariencia de la página: Colores, tamaños, colocación de los bloques, etc.
- <body>: Contiene todo el ‘cuerpo’ de la página web, dentro del <body> están todas las etiquetas que se mostrarán al usuario en el navegador.
- <div>: Se utiliza para crear las ‘divisiones’ de la página y poder tener diferentes bloques. Por ejemplo, una sección que muestra una imagen a la izquierda y texto a la derecha constaría de dos <div>, uno para cada bloque de contenido.
- <h1> a <h6>: Etiquetas para los títulos.
- <li><ol><ul>: Etiqueta para las listas, <ul> y <ol> son etiquetas de apertura de lista (utilizaremos <ol> para listas numéricas) y el <li> es para cada elemento de la lista.
- <p>: Etiqueta para párrafos.
- <br>: Etiqueta para saltos de línea.
- <a>: Etiqueta para crear enlaces. Esta etiqueta tiene varios atributos, pero los principales son ‘href’ y ‘target’. Con href indicamos donde dirige el hipervínculo, y con target si el enlace se debe abrir en la misma ventana u otra nueva. Ejemplo: <a href=”otra_pagina_destino.html” target=”_parent”>Pulsa Aquí</a>.
- <img>: Etiqueta para las imágenes. Los atributos principales son ‘src’ y ‘alt’. Con src indicamos la ruta hacia la imagen en nuestro servidor y con alt ponemos un texto alternativo por si la imagen no carga correctamente en algún navegador. Ejemplo: <img src=”ruta/a/la/imagen.jpg” alt=”Texto que representa a la imagen mostrada” />
- <head>: dentro de la etiqueta <html> hay dos grandes apartados, el head y el body. El body no se muestra visualmente a los usuarios y se utiliza para definir parámetros internos como el título que aparece en el navegador o las hojas de estilos (CSS) y Javascript (JS) enlazadas.
Hay más etiquetas que podrás descubrir con tutoriales más extensos, pero con estas puedes empezar a crear tus primeros documentos HTML. ?
Nota: En casi todos los casos, cada etiqueta que se abre debe tener un cierre al final de su apartado, es decir, si abrimos un párrafo con <p> al final del texto cerraremos con </p>.
Ejemplo de página básica creada con HTML:
Consejos para optimizar tiempos de desarrollo
Para empezar y coger experiencia es muy importante el ‘prueba y error’, aprendiendo de nuestras equivocaciones nos prepararemos mejor y asumiremos más rápido todos los conceptos del lenguaje. Pero en este trabajo la optimización de los tiempos de entrega y la depuración del código de la página, son esenciales. Una vez tengamos una base teórica, lo ideal para ser un buen diseñador web es recurrir a frameworks ya desarrollados que nos ayudarán a tener una base de maquetación en cada proyecto sin tener que empezar siempre de 0. El framework más usado y que os recomendamos es: https://getbootstrap.com/
Trabajando con un framework como Bootstrap, utilizarás etiquetas estandarizadas y con atributos que reconoce la gran mayoría de la comunidad de desarrolladores, por lo que tus trabajos serán fácilmente modificables por otras personas.
Si buscas un diseñador web en Sevilla, contacta con nosotros sin compromiso o llámanos en el 955 221 220. En Starenlared disponemos de un equipo con mucha experiencia en el desarrollo de páginas web totalmente adaptadas a tu imagen corporativa.
