El desarrollo web juega un papel fundamental en el mundo digital, ya que es la manera en la que las empresas se comunican con los usuarios a través de internet. El sitio web es la carta de presentación y el ancla para el atraer prospectos calificados, genera visibilidad y posicionamiento, por lo que se recomienda que esté muy bien implementado, por eso en este artículo te compartiremos los cinco códigos básicos de HTML y también te ayudaremos a saber cómo añadir un código a una web ya diseñada.
Índice de contenidos
Cinco Códigos HTML básicos para páginas web
Antes de hablar de los códigos básicos es importante definir lo que es una etiqueta HTML, es una palabra o letra especial rodeada de corchetes angulares “< >”. Estas etiquetas se utilizan para crear elementos HTML, como párrafos o enlaces. Muchos elementos tienen una etiqueta de apertura y una etiqueta de cierre; por ejemplo, un elemento p (párrafo) tiene una etiqueta <p>, seguida del texto del párrafo, y luego una etiqueta de cierre </p>. Los elementos que no tienen etiqueta de cierre se llaman elementos vacíos. Por ejemplo, el elemento br para insertar saltos de línea simplemente se escribe <br>. Si se está trabajando con XHTML, se pueden puedes escribir elementos vacíos usando etiquetas de cierre automático, por ejemplo, <br />.
- <html> – El elemento raíz. Todos los sitios web comienzan con el elemento html. También se llama elemento raíz porque está en la raíz del árbol de elementos que conforman una página web. Para crear el elemento html, debes escribir una etiqueta de apertura <html> seguida de una etiqueta de cierre </html>. Todo lo demás en tu página web va entre estas 2 etiquetas.
- <head> – El encabezado. El elemento head contiene información sobre la página web, a diferencia del contenido de la web en sí. Hay muchos elementos que puedes poner dentro del elemento del encabezado, como: Título. Enlace, que puedes usar para agregar hojas de estilo a LA página. Meta, para especificar cosas como conjuntos de caracteres, descripciones de página y palabras clave para motores de búsqueda. Script, para agregar código JavaScript a la página.
- <title> – El título de la página. Esta etiqueta contiene el título de la página. El título se muestra en la barra de título del navegador en la parte superior, así como en marcadores, resultados en las tendencias de búsqueda de Google y muchos otros lugares. El título debe describir el contenido de la página de manera precisa. Intenta dar a cada página de tu sitio su propio título único.
- <body> – El contenido de la página. La etiqueta body o contenido aparece después del elemento principal en la página. Debe contener toda la información de tu sitio web: texto, imágenes, etc. Todas las páginas web tienen un elemento de cuerpo único, con la excepción de las páginas de conjunto de marcos.
¿Cómo añadir un código a una web ya diseñada?
Todas las webs tienen una hoja de estilos donde se definen las propiedades para todos los elementos de la web. Normalmente las propiedades se aplican a etiquetas HTML, clases e identificadores. Las hojas de estilos son archivos de extensión .css que están disponibles en el servidor junto con el resto de archivos de la web. Lo ideal es que no se tengan muchas, sino que todo esté definido en unas pocas para mejorar el tiempo de carga del sitio y facilitar su modificación a futuro.
- Agrega un código a través de la hoja de estilos.
Directamente en la hoja de estilos original. Lo primero es acceder al archivo de hoja de estilos .css mediante tu FTP o administrador de archivos de tu hosting. Una vez lo localices lo puedes editar directamente la hoja mediante editores como Dreamweaver, Coda, etc. Los hostings te suelen dejar que edites directamente las hojas de estilos. Te recomendamos hacer una copia previa a realizar cualquier modificación, ya que si modificas algo y no sabes qué es lo que has tocado puedes estropear los estilos del sitio.
También puedes acceder a los archivos de tu plantilla desde tu escritorio, la recomendación es no editar desde aquí ya que se estarán modificando directamente los archivos y esto podría generar problemas en caso de que borres algo por error.
- Con tu plantilla o con un plugin
Este modo es más recomendable ya que lo que modificas lo haces desde fuera, sin tocar la hoja de estilos original, de modo que en caso de equivocarte te bastaría con borrar el código que hayas escrito o desactivar el plugin. Hay plantillas premium que incluyen una zona que suele llamarseCustom CSS o Custom Code donde puedes añadir tus propios estilos CSS a la hoja original de la plantilla. Esto suele encontrarse, en las Theme Options de tu plantilla, en alguna sección General o en una sección CSS.
Si tu plantilla no incluye una zona donde puedas añadir código CSS, puedes hacerlo fácilmente mediante un plugin como Simple Custom CSS. Al instalarlo y activarlo, en Apariencia tendrás una pestaña llamada Custom CSS o CSS personalizado.
Si buscas cómo añadir un código a una web ya diseñada, hay expertos en el tema que pueden ayudarte.
Comunicare: mejor agencia web
Somos una agencia de marketing digital basada en Madrid, contamos con expertos en desarrollo web. Con presencia en toda España. Con más de 12 años de experiencia dentro del sector ofreciendo nuestros servicios. Tenemos un equipo de profesionales y expertos en el desarrollo web, con implementación de estrategias SEO, SEM, Social Ads, Market Place Ads, Google Shopping. En comunicare nos enfocamos en generar un desarrollo web que cumpla con todas las características necesarias para brindar una increíble experiencia a tus usuarios.
Otras agencias web
Dobuss
Son una agencia que cuentan con experiencia en todas las áreas de desarrollo para ayudar a sus clientes a alcanzar su máximo potencial. Sus servicios son los que los hacen especialistas en tiendas online. Desarrollar un buen e-commerce requiere gestionar adecuadamente muchas disciplinas del marketing como: investigación de mercados, estudio de la competencia, merchandising y por supuesto, los productos de Google como Google Shopping, Google Display, o Google AdWords.
The Lift Co
Son la agencia SEO y de Marketing Digital con más de 15 años de experiencia ayudando a empresas de todos los tamaños y sectores a mejorar su posicionamiento digital y su rentabilidad para que puedan lograr todos los objetivos que se propongan. Es especialista en crear diseño web efectivo y de la mano del UX. Cuida todos los detalles de la estructura de la web forma parte de la UX-User Experience, lo que podemos traducir como la experiencia del usuario. Dejar de lado este factor trae consigo pérdidas, tanto monetarias como de tiempo.