Introducción a HTML

Introducción a HTML

Introducción a HTML

HyperText Markup Language

HTML (Hypertext Markup Language) o Lenguaje de Marcas de Hipertexto es el lenguaje base con el que se elaboran las páginas web.

La intención del lenguaje HTML es proporcionar al documento una forma estructurada, como bloques, imágenes, párrafos y tablas, así como la habilidad de ligarlo a otro documento (Hipertexto).

Es un lenguaje simple que cualquier persona puede aprender, no requiere de conocimientos previos en programación de algún otro lenguaje de cómputo y aprenderlo es de mucha utilidad, sin importar a que nos dediquemos.

Introducción a HTML

Etiquetas

La simplicidad del lenguaje radica en que sus instrucciones son “etiquetas” que indican al navegador web los elementos a mostrar o las acciones a realizar.

Ejemplo de indicaciones al Navegador Web

Estas etiquetas comienzan con el símbolo de menor que (<), a continuación la palabra o abreviatura en inglés que corresponde a la instrucción, y terminan con el símbolo de mayor que (>):

Etiquetas que agrupan objetos

La mayor parte de etiquetas agrupan objetos, por ejemplo, la etiqueta <p> (párrafo) agrupa palabras y/o algunos otros elementos, por lo que es necesario indicar donde inicia y donde termina el bloque o conjunto de elementos:

  • El inicio del bloque o conjunto de elementos se representa con la etiqueta de apertura, que son los signos de menor y mayor que envolviendo a la instrucción.
  • Seguido va el conjunto de elementos que contiene el bloque, por ejemplo las palabras de un párrafo.
  • Por último, el cierre del bloque, donde se pone nuevamente la etiqueta de apertura, pero esta vez se emplea el símbolo de diagonal (/) después del símbolo de menor que:

Apertura y cierre de etiqueta

See the Pen parrafo by Miguel Méndez (@codigo-web) on CodePen.0

Etiquetas que no agrupan objetos

Existen etiquetas que no agrupan objetos, simplemente hacen un llamado a un objeto, o bien, cumplen una instrucción específica, por ejemplo, realizar un salto de línea. Tal es el caso de la etiqueta br (break: salta una línea).

estructuraBr.fw

En estos casos, la etiqueta no se cierra, solamente se incluye su apertura.

See the Pen MydjZL by Miguel Méndez (@codigo-web) on CodePen.0

En la construcción de una página web coexisten las etiquetas que agrupan objetos y las que no, como podemos ver en el ejemplo:

mockup_base_etiquetas
Ejemplo de etiquetas que agrupan objetos y etiquetas que no lo hacen

Atributos

Cada etiqueta puede tener uno o varios atributos, que son indicaciones específicas para ella.

El atributo se coloca después de la instrucción. Este puede tener un valor, de ser así, se coloca un signo de igual y, entre comillas, su valor:

atributoEtiqueta

En este ejemplo, la instrucción es img (imagen), el atributo es src (fuente) y el valor del atributo es foto.jpg (nombre del archivo).

Hace algunos años, el uso de CSS (Cascade Style Sheet) u Hoja de Estilos en Cascada no era tan extendido, debido principalmente a diferencias en la interpretación del lenguaje por parte de los principales navegadores del momento (Microsoft Internet Explorer y Netscape Navigator).

En su lugar, las instrucciones de HTML contaban con una gran cantidad de atributos que permitían dar cierto formato al elemento.

Un ejemplo podría ser:

<p align=”center”>Párrafo centrado</p>

Con el atributo align y su valor center, lográbamos que el párrafo se mostrara centrado.

Afortunadamente ese tiempo quedó atrás y todos los atributos de HTML que se utilizaban para dar formato han quedado oficialmente depreciados y no se recomienda su uso en la actualidad.

Estructura de un sitio web

El conjunto de documentos que se encuentran ligados entre sí bajo un mismo nombre de dominio, por ejemplo www.xyz.com, es lo que conocemos como sitio web.

Arbol de documentos
Ejemplo de estructura de sitio web

Tipo de archivos

Un sitio web está formado por archivos de diferentes tipos que trabajan en conjunto, los mas comunes son:

  • HTML
    Archivos que contienen la estructura de cada una de las páginas web con que cuenta el sitio. Su extensión es .html o .htm
  • CSS
    Archivos que contienen las instrucciones de formato a los elementos que forman la estructura de las páginas web que conforman el sitio. Su extensión es .css
  • Imágenes
    Archivos gráficos, como pueden ser fotografías, gráficas o ilustraciones. Los formatos permitidos son .gif, .jpg, .png y .svg
  • Javascript
    Archivos que contienen programación en lenguaje javascript, por lo general proporciona interactividad y/o usabilidad a las páginas web. Su extensión es .js

Carpeta de trabajo

Todos los archivos que forman parter del sitio web deberán estar contenidos dentro de una carpeta o folder. A esta carpeta o folder, se le denomina Carpeta raíz o Folder raíz. En esta carpeta o folder podemos generar algunas subcarpetas para mantener un orden y localizar fácilmente los archivos:

Carpeta raíz
La carpeta raíz se llama miSitioWeb, en su interior contiene una carpeta llamada imagenes y un archivo llamado index.html

A la carpeta de trabajo se le conoce como Raíz del sitio y al conjunto de elementos que contiene se le denomina como Árbol de documentos.

Los nombres que demos tanto a las carpetas como a los archivos NO deben contener espacios, acentos ni caracteres especiales.

Si el nombre que deseamos dar al archivo contiene más de una palabra, podemos utilizar estas técnicas para que estas parecieran estar separadas:

  • Guiones medios: mi-sitio-web
  • Guiones bajos: mi_sitio_web
  • CamelCase: miSitioWeb

Conclusión

En esta introducción a HTML,  mencionamos que HTML es el lenguaje en el que realizamos la estructura y contenido de las páginas web. Se basa en etiquetas, que son instrucciones específicas para el navegador web.

Entre el contenido que maneja HTML se encuentran textos, imágenes, audio y video.

En la actualidad estas etiquetas no deben contener ningún atributo para dar formato (tipografía, colores, tamaños, alineación, …), ya que estas características se dan mediante Estilos en Cascada.

 

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

3 Comentarios en "Introducción a HTML"

avatar
Ordenar por:   más recientes | más antiguos | más votados
trackback

[…] mencionaba en el artículo de Introducción a HTML, todos los archivos que componen el sitio web deben estar contenidos en una Carpeta de […]

Luis Miguel Caprara
Invitado

Excelente, muy completo y profesional. Saludos.

admin_cw
Admin

Hola, Luis. Muchas gracias por tu amable comentario. Espero que el sitio te sea de utilidad. ¡Saludos!

wpDiscuz