ficha

UNIDAD: 3 – LA WEB

 Subtema: Páginas Web Estáticas y dinámica

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 , que indica el comienzo de la página; , que contiene información más descriptiva sobre el sitio; y , 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                                                                            

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

   

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.

 3. Trabaja el texto en HTML

 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ítulo o subtítulo. 

La etiquetamarca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página

4. Cambia el color del texto 

Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:

También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX. 

5. Da formato al texto 

Para dar formato solo escribe el código como en el siguiente ejemplo: Texto en negrita usa la etiqueta texto Texto subrayado texto Texto en cursivas o itálicas texto 

6. Incluye un enlace a otra página

Si en el texto quieres incluir un enlace a otra página, debes utilizar la etiqueta

Aquí debes añadir el URL que deseas enlazar. El atributo «blank» se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página. En caso de que quieras que la liga se abra en la misma página, escribe «self».

 7. Agrega contenido multimedia

 Imágenes 

Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta:

El atributo «src» es para abrir un URL para la imagen que quieres mostrar. El apartado «alt» permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la imagen no pueda verse. El texto en la imagen también sirve como posicionamiento en buscadores, como Google.