Desarrollo e Implementación de Soluciones Web y Multimedia.
Estructura fundamental de HTML
El 94 % de las primeras impresiones están relacionadas con el diseño de tu sitio web y el 75 % de su credibilidad proviene precisamente de este elemento. Por ello es sumamente importante invertir en su optimización para diferenciarte de tus competidores. Una forma de personalizar tu sitio es a través de la estructura HTML para garantizar que tu contenido se muestre de forma estratégica.
Sin embargo, a pesar de ser un lenguaje de marcado que existe desde la década de 1990, aún quedan muchas dudas sobre su implementación. Y, seamos sinceros, no es un tema que pueda dominarse de la noche a la mañana. No obstante, si conoces la estructura HTML básica es posible formar tu sitio de inicio a fin. Y sí, vale totalmente la pena saber cómo hacerlo.
<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >>
¿Para qué sirve conocer la estructura HTML?
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de programación, sino de marcado. Esto significa que solo sirve para crear páginas web estáticas. Sin embargo, sí es posible combinar este lenguaje con otros para desarrollar sitios mucho más dinámicos y atractivos.
Una vez que conoces las definiciones más relevantes sobre el lenguaje y la estructura HTML, te diremos cómo se integran y te damos un ejemplo para que comprendas mejor su contenido.
¿Qué incluye la estructura HTML?
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
Como puedes notar, todas las etiquetas están constituidas al inicio y al final por los signos < y >, que representan precisamente la apertura y el cierre de cada elemento para que el lenguaje HTML pueda funcionar. En este sentido, existen dos tipos de etiquetas HTML:
- Etiquetas emparejadas. Vienen en pares y tienen una apertura y cierre. Tal como las que conoces: < >.
- Etiquetas vacías. Se refiere a las etiquetas que no requieren cierre.
En la siguiente imagen te mostramos un ejemplo de cómo se ve una etiqueta básica de HTML con su apertura y cierre:
Los atributos se refieren a toda la propiedad adicional de las etiquetas HTML. Esto significa que definen cualquier elemento de la página web; por ejemplo, ancho, entrada, texto. Estos también ayudan a almacenar información en metaetiquetas con la atribución de nombre, contenido y tipo.
Ejemplo de una estructura HTML básica
Ya que conoces qué incluye la estructura HTML básica, te mostramos de forma más desglosada un ejemplo que te servirá para visualizar mejor los elementos previamente mencionados.
En la imagen siguiente puedes ver cómo se visualiza la estructura básica en lenguaje HTML para formar una página web:
Cualquier página web debe contener al menos este código para desarrollarse correctamente. Te explicamos al detalle el significado y contenido de cada etiqueta a continuación.
- <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).
- <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.
- <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.
- <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.
Dentro de la etiqueta <body> se desglosan más etiquetas y elementos como:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: que representan las etiquetas de títulos.
- <p>: sirve para indicar la apertura y cierre de un párrafo.
- <div>: significa «división» y funciona para crear secciones o agrupar contenidos.
- <span>: su traducción es «abarcar» y sirve para aplicar estilo al texto o agrupar elementos en línea.
- <b>, <i>, <u>: para agregar un texto en negritas, cursiva y subrayado, correspondientemente.
- <a>: permite agregar un vínculo o enlace.
- <img>, <audio>, <video>, <iframe>: dentro de la estructura HTML estas etiquetas sirven para insertar una imagen, audio, video o incrustar un documento HTML.
- <form>: funciona para insertar un formulario.
- <label>: representa la etiqueta para un elemento en una interfaz de usuario.
- <input>: crea controles interactivos para formularios, con el fin de recibir datos del usuario.
Cada etiqueta, debe tener una apertura y un cierre; de lo contrario, el código marcará error y los cambios no se visualizarán correctamente en la página web.
En la siguiente imagen te compartimos un ejemplo más elaborado de cómo se vería la estructura HTML ya conformada con mayor contenido. Recuerda que esta solo representa elementos muy básicos.
De esta manera puedes estructurar tu página web con tantos elementos y etiquetas que consideres necesarios. Si has cometido algún error en la apertura o cierre de alguna etiqueta podrás darte cuenta al visualizar una página de error, que el navegador se quede en blanco o simplemente al no ver configurado ningún cambio.
Para hacer una estructura HTML es necesario crear un documento HTML con la extensión .html. Hacerlo es más simple de lo que crees, pues solo debes abrir algún desarrollador de texto, como lo puede ser el bloc de notas de tu sistema y comenzar a escribir el texto y las etiquetas necesarias para desarrollar tu página web. También puedes hacer uso de otras herramientas en línea como Tryit Editor de W3Schools.
La estructura HTML puede ser tan extensa como lo necesites. Sin embargo, con los elementos básicos que te compartimos en esta publicación puedes comenzar a explorar y crear algunos aspectos de diseño de tu página web. Si bien, el lenguaje HTML puede ser un poco complejo, con un algo de práctica puedes llegar a dominarlo hasta construir un sitio completo con los atributos y cualidades que deseas.
Recursos de aplicación web
Los recursos web representan los archivos que se pueden usar para ampliar la aplicación web de
Hojas de estilos
Las hojas de estilo son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc.
Ficheros de configuracion
En informática, los archivos de configuración son archivos utilizados para configurar los argumentos (parámetros) y la configuración inicial de algunos programas informáticos. Se usan para aplicaciones de usuario, procesos de servidor y configuraciones de sistema operativo.
Imagen
Wikipedia define imagen como "una representación visual de un objeto mediante técnicas diferentes de diseño, pintura, fotografía, vídeo".
Bibliotecas webb
Las bibliotecas virtuales son plataformas que proporcionan contenidos, así como servicios bibliográficos y documentales. Están hechas para responder a la gran demanda de información de estudiantes, profesionales, y cualquier otra persona. En algunas bibliotecas virtuales se presenta diferente tipo de contenido según el área específica de información.
Seguridad webb
La seguridad en internet es la seguridad informática. Para estar verdaderamente seguros tenemos que prescindir de algunas cosas, una de ellas es el internet; el estar conectados a la red ya nos hace vulnerables.
Niveles de seguridad en una aplicacion web
La seguridad de las aplicaciones web se refiere a una variedad de procesos, tecnologías y métodos para proteger los servidores web, las aplicaciones web y los servicios web, como las API, de las amenazas que suponen los ataques basados en Internet.
Aplicacion de estandares en la programacion web
Los estándares web se introdujeron para proteger el ecosistema web, para mantenerlo abierto, gratuito y accesible para todos. Se perseguía poner la web en una burbuja protectora y no tener que construir sitios web adaptables a navegadores específicos.
¿Qué es adds?
¿Qué es plugins?
Los plugins son complementos que añaden funcionalidades extra o mejoras a los programas. Es decir, son miniprogramas que suman alguna característica que no venía por defecto en el programa original. Funcionan como añadidos pero no por sí mismos.
¿Qué son los recursos de aplicacion?
Los recursos son los archivos adicionales y el contenido estático que usa tu código, como mapas de bits, definiciones de diseño, strings de interfaz de usuario, instrucciones de animación, etcétera.
Siempre debes externalizar los recursos para apps, como imágenes y strings de tu código, para que puedas mantenerlos de forma independiente.
Hojas de estilo:
Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital.
¿Qué es una etiqueta?
Un elemento de HTML es un tipo de componente de documento de HTML, uno de los diversos tipos de nodos de HTML. El documento de HTML está compuesto de un árbol de nodos HTML sencillo, como nodos de texto, y elementos de HTML, los cuales añaden semántica y formato a partes del documento.
Tipos de etiquetas:- <body> para el contenido
- <head> para información sobre el documento
- <div> división dentro del contenido
- <a> para enlaces
- <strong> para poner el texto en negrita
- <br> para saltos de línea
- <H1>…<H6> para títulos dentro del contenido
- <img> para añadir imágenes al documento
- <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
- <p> para parágrafos
- <span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.
<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…
<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.
<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.
Ejemplo HTML:
Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para visitar DonDominio.
<strong> </strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer.
Comentarios
Publicar un comentario