Hola visitante de diseño web Alicante y Murcia - DwAlicante, Le presentamos los mejores proyectos y formatos gráficos de alta calidad con un montón de características.

Diseño web HTML

Cuando se visita una página web puede apreciarse que está formada por textos, imágenes, colores de fondo, en algunos casos elementos que se desplazan por la pantalla, etc. en fin, todo el conjunto de elementos que hacen de dicha página un espacio multimedia e interactivo. Aunque se podría pensar que todos esos elementos están incluidos en la página, no es así. Realmente, el único de todos ellos que pertenece a la propia página es el texto. Y, entonces, ¿por qué se ve todo lo que aparece en la página? La respuesta está en comprender que una página web no es más que un documento de texto acompañado de una colección de etiquetas que sirven para que el navegador: interprete de qué forma tiene que presentar el texto; sepa de dónde tiene que obtener las imágenes, los sonidos y el resto de recursos de la página, así como de qué manera mostrarlos; y, distribuya todos los contenidos de una forma predeterminada en la ventana de visualización del navegador. El lenguaje de marcas HTML permite definir todas estas funcionalidades, empleando para ello un conjunto de etiquetas y atributos definidos en el lenguaje.

Las siglas HTML (Hyper-text Markup Language) se corresponden con la traducción "Lenguaje para marcado de hipertexto". Este lenguaje de marcas, por tanto, se utiliza para estructurar documentos de texto que puedan ser interpretados por navegadores y distribuidos a través del servicio de información Web de Internet.

 

DOCUMENTOS HTML

Un documento HTML es un archivo de texto plano en formato ASCII que incluye una serie de etiquetas que definen cada uno de los elementos que lo componen. A su vez, las etiquetas o marcas pueden incluir atributos para definir sus características. Los diseños HTML se almacenan en archivos cuyo nombre tienen la extensión .html. Los documentos HTML constituyen las páginas Web que están accesibles a través internet.

Para un diseño HTML es necesario utilizar un programa editor de texto, para escribir el código, y un programa navegador Web, para interpretar el código y poder comprobar los resultados obtenidos. Dado que los documentos HTML están formados por texto plano, puede utilizarse cualquier editor de textos convencional para crearlos y editarlos. Se propone utilizar el editor de código Notepad++. En cuanto al navegador a emplear, se recomienda utilizar varios de ellos, especialmente los más extendidos, para visualizar la presentación de los documentos HTML que se van creando. De este modo, es posible comprobar el funcionamiento de todos y cada uno de los elementos que conforman los documentos HTML que se crean y, además, comparar las diferencias existentes en cuanto a la interpretación que realizan del código cada uno de ellos. Puede ser que los navegadores más extendidos actualmente sean: Microsoft Edge, Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, etc.

 

Etiquetas y atributos en documentos HTML

Las etiquetas de HTML se escriben entre los símbolos de menor que < y de mayor que >. Normalmente, se utilizan dos etiquetas: una de inicio o apertura y otra de fin o cierre. La única diferencia entre ambas es que la de cierre lleva una barra inclinada (/) antes del nombre de la etiqueta. De esta manera, el texto que aparezca entre las etiquetas de inicio y fin constituye el contenido de información del documento y se presentará el efecto que dichas etiquetas indiquen.

 

ESTRUCTURA DE UN DOCUMENTO HTML

Los documentos HTML poseen una estructura compuesta, básicamente, por dos secciones: la cabecera y el cuerpo del documento. Estas secciones quedan definidas en el código mediante as etiquetas correspondientes. La sección de cabecera se utiliza para definir diversa información del documento HTML, como puede ser el título del documento HTML y otra información adicional, y, también para especificar diversos aspectos de configuración del propio documento y del navegador. Mientras que el cuerpo del documento contiene los distintos elementos que forman el documento: párrafos, títulos, listas, tablas, imágenes, etc. que se reconstruirán en la ventana de visualización del navegador cuando el navegador interprete el código HTML.

La estructura general de un documento HTML tiene el siguiente formato:

DECLARACIÓN DE TIPO DE DOCUMENTO

<html>

  <head>

     <title>Título de la página </title>

            *Elementos opcionales de la cabecera

     <style>Definición de estilos de la página</style>

  </head>

  <body> Contenido del cuerpo </body>

</html>

Como puede apreciarse, el diseño del documento HTML está estructurado en tres partes bien diferenciadas:

 

  • Declaración de tipo de documento. Se trata de una única línea de texto que especifica el tipo de documento de qué se trata. De entre los tipos de documentos válidos, cada uno de ellos tiene unas características diferentes que pueden ajustarse mejor o peor a cada caso concreto. Los tipos de documentos se estudian a continuación, en este mismo apartado. Es la única parte del documento que no está incluida dentro de las etiquetas <html> </html>.

  • Cabecera. Está delimitada por las etiquetas <head> </head>. En la cabecera se incluye la definición de diversa información relativa a la propia página Web que no va a presentarse en la ventana de visualización del navegador, salvo el título del documento que aparece en la barra superior del navegador web. Habitualmente, se utiliza para indicar el nombre del autor, las palabras clave destinadas a los buscadores, las hojas de estilo externas que se utilizarán con la página, etc. Además, también se utiliza para especificar diversos aspectos de configuración del propio documento o del navegador, como puede ser la codificación de caracteres que utiliza la página.

  • Cuerpo. Está delimitado por las etiquetas <body> </body>. En el cuerpo de un documento HTML se incluye el contenido de información que se va a presentar la ventana de visualización del navegador, así como las etiquetas que definen la apariencia de la presentación de esos contenidos. Con la etiqueta <body> se delimita la parte del diseño HTML en la que se incluye el contenido en sí del documento. En el cuerpo es donde se especifican los elementos que conforman la web.

 

LA DECLARACIÓN DEL TIPO DOCUMENTO

El W3C es un organismo que se encarga de fijar las normas que deben seguir los documentos escritos utilizando el lenguaje HTML. Según este organismo, todo diseño HTML deberá contener al principio del mismo una línea que indique qué tipo de documento es. Es lo que se llama la declaración del tipo de documento. Al indicar la declaración del tipo de documento o DTD (Document Type Definition) al principio del documento se está indicando al navegador cómo debe interpretar el código definido en el documento HTML.

Hoy por hoy se emplea la especificación HTML5, la declaración del tipo de documento es más sencilla:

<!DOCTYPE html>

Aunque tambien podremos encontrar en diseños HTML antiguos:

Los documentos de este tipo se ajustan a la especificación más rígida del W3C, significando que no se pueden usar determinadas etiquetas y atributos HTML que han quedado obsoletos o en desuso en anteriores versiones de HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

Los documentos de este tipo se ajustan a la especificación más permisiva del W3C. Significa que se pueden usar determinadas etiquetas y atributos HTML que están en fase de quedarse obsoletas.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Comentarios

Escriba un comentario

Deje aquí su comentario respetando las normas de buena conducta.

Código de seguridad
Refescar