Lenguajes de marcas de hipertexto (HTML)
El lenguaje HTML( sigla de hypertext markup language, ‘lenguaje de marcas de hipertexto’) es el lenguaje con el que se escriben las páginas web. Define el contenido de una página web a partir de un conjunto de etiquetas predeterminadas que indican al navegador cómo debe estructurar la página para su correcta visualización.
Una página web es un archivo donde está contenido el código HTML en forma de texto que nos permite la introducción de referencias a otras páginas por medio de los enlaces hipertexto. Estos archivos tienen extensión .html
Además las páginas web incluyen otros dos lenguajes: CSS que define el estilo y el diseño de la estructura HTML (colores, tamaños de letras, efectos visuales etc.) , y Javascript, para conseguir páginas web interactivas y dinámicas.
Si alguna vez has querido ver qué es lo que compone una página web, con ver el código fuente puedes hacerte una idea de cómo funciona todo. Cada navegador te permitirá examinar el código fuente de cualquier página web que visites.
Los navegadores actuales incluyen extensiones que nos ayudan a inspeccionar el código. Por ejemplo el navegador chrome e explorer pulsando F12 . En cambio para mozilla firefox y opera si haces clic derecho "ver código fuente de la página" verás el código HTML de esa página.
Etiquetas
l HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. Los elementos en HTML comienzan con una etiqueta inicial, una final y entre ellas el contenido. Todo lo que está incluido entre la etiqueta de apertura y la de cierre se verá afectado por la función de la etiqueta.
La etiqueta tiene un nombre predefinido en minúsculas encerrado por los símbolos < y >. Las etiquetas final o de cierre incluyen el símbolo / ante el nombre.
Por ejemplo: <etiqueta> Contenido </etiqueta>
Cuando se incluyen varias etiquetas es importante anidarlas correctamente y cerrar antes las etiquetas internas. Además existe un tipo de etiqueta que solo tiene etiqueta de cierre y no de apertura. Por ejemplo <br/> etiqueta de salto de línea.
Atributos
Los elementos HTML pueden llevar atributos, que proporcionan información adicional al elemento para configurarlo o definir su comportamiento. Los atributos se caracterizan por:
Se incluyen siempre en la etiqueta de apertura.
Consisten en un par nombre=”valor”
Existen atributos propios y exclusivos de etiquetas, así como atributos globales aplicables a cualquier etiqueta.
Estructura
Antes de empezar a crear un documento HTML es importante elegir un editor de texto plano que resalte la sintaxis HTML, de modo que las etiquetas y atributos destaquen sobre el contenido. Así, se facilita el entendimiento y minimizan los problemas al detectar errores de formato.
Por ejemplo la ausencia de una etiqueta de cierre.
<p><b>Cierre incorrecto</p></b>
<p><b>Cierre correcto </b></p>
Para mejorar la legibilidad del código HTML se recomienda seguir unas pautas, por ejemplo insertar las etiquetas de apertura y cierre en líneas independientes, además de tabular (desplazar hacia la derecha) el contenido incluido dentro de cada etiqueta.
Elementos a nivel de bloque
Cada elemento HMTL tiene una forma de visualizarse por defecto dependiendo de qué tipo de elemento es. Existen dos posibilidades: los elementos nivel de bloque y los elementos en línea, en ingles Block-level Elements y Inline Elements respectivamente.
Elementos a nivel de bloque
Pueden contener otros elementos bloque y otros elementos en línea.
Un elemento en bloque siempre se inicia en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).
Todos los elementos posteriores a un elemento de bloque se sitúan debajo aunque se modifique su anchura.
Ejemplos serían los bloques de división (<div>), los párrafos (<p>), las listas (<ol>, <ul>), los formularios (<form>), las cabeceras (<h1><h6>) y las tablas (<table>).
-Encabezados
-Listas
-Tablas
Elementos a nivel de línea
Veamos ahora los elementos a nivel de línea.
Estos elementos solo pueden contener otros elementos línea, texto e imágenes.
Un elemento en línea no se inicia en una nueva línea y sólo ocupa tanto de ancho como sea necesario.
Los elementos línea se sitúan uno junto al otro hasta ocupar el ancho de banda disponible.
Ejemplos serían las imágenes (<img>) y los enlaces (<a>).
Enlaces
El enlace ( en inglés, link) es un vínculo a otras páginas HTML, ya sean locales (en el misma ubicación) o externas (en un servidor externo), así como ficheros (jpg, zip, pdf etc) o correos electrónicos.
La etiqueta utilizada para crear un enlace es <a> , pudiéndose utilizar un texto o una imagen como enlace a la ruta especificada.
Los atributos de la etiqueta <a> son los siguientes:
href : incluye la ruta o url de la página que enlazará.
target (opcional): entre los valores destaca _blank que permite abrir la nueva página en otra página o pestaña.
Formulario
Un formulario es una caja de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.
La etiqueta <form> encierra todos los elementos de un formulario que pueden ser botones, listas desplegables, cuadros de texto, etc, también conocidos como “campos de formulario”.
Existen una serie de atributos propios del formulario que determinan su funcionalidad, destacando action = "url" - Indica la URL que se encarga de procesar los datos del formulario.
El elemento más importante del formulario es <input> , y tiene distintas variaciones dependiendo del tipo de atributo. A continuación se detallan los más importantes:
<input type="text"> : define un campo para introducir texto.
<input type="password"> igual al anterior salvo que los caracteres se enmascaran por asteriscos o círculos.
<input type="radio"> define un botón de tipo radio que solo permite elegir una de las opciones.
<input type="checkbox"> define una serie de casillas pudiendo elegir desde cero a más opciones.
<input type="date"> en HTML5 muestra el icono del mapa como forma de introducir la fecha.
<input type="email" name="email"> en HTML5 valida que hemos escrito el email siguiendo el patrón correcto.
<input type="submit">: define un botón que permite enviar a la página especificada en el action todos los valores recogidos en el formulario por los distintos campos.
Multimedia e imágenes
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el aspecto visual y los recursos multimedia, estos se presentan en formatos diferentes ( “puede ser casi cualquier cosa que usted puede escuchar o ver”). ¡Imposible pensar en una página web sin ellos hoy en día!
Ejemplos serían: fotos, música, sonido, vídeos, discos, películas, animaciones y mucho más.
Imagen
En HTML, las imágenes son elementos en línea que se insertan a partir de la etiqueta <img> que está vacía y solo contiene atributos no siendo necesaria la etiqueta de cierre.
Los principales atriburos son src (indica la ruta donde se ubica el archivo), alt (texto alternativo si no se visualizase la imagen) , width (establece la anchura en pixeles) y height (define la altura de la imagen).
Sonido
HTML5 ha proporcionado un estándar para escuchar los ficheros de audio ya que en versiones anteriores era necesario un plug-in. Es importante ofrecer distintas alternativas de formato . Se inserta en HTML mediante la etiqueta <audio>.
Video
El video en HTLM se puede insertar con la etiqueta <video> o <iframe> para vídeos de youtube. En el caso de <video> es importante ofrecer distintas alternativas de formato al igual que ocurría para el audio.
Gráficos
El HTML <canvas> es el elemento que nos permite dibujar gráfico a través de Javascript