UNIDAD:3–LA WEB
Subtema:Páginas Web Estáticas y dinámica
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, es-tilo, 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 quelos usuarios podrán visualizarla.
Es importante recalcar que el lenguaje HTML no es un lenguaje de progra-mación, sino de marcado. Esto significa que solo sirve para crear páginas web estáticas . Sin embargo,sí es posible combinar este idioma jecon ,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 seintegran y te damos un ejemplo para que comprendas mejor su contenido.
Qué incluye la estructura HTML
La estructura HTMLde 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 meta etiquetas 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>: ese elemento raíz y ese 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 meta datos; 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 en globa 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>: sus traducciónes «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 , correspondiente- mente.
<a>: permite agregar un vínculoo 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 ,elcó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 muybá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 comenzara escribir el texto y las etiquetas necesarias para desarrollar tu página web.
Trabaja el texto enHTML
Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3,h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada títuloo subtítulo.
La etiqueta <p> marca los párrafos .Con ambos elementos ya puedes comenzar a codificar el texto de tu página.
No hay comentarios:
Publicar un comentario