Scribd
Cargar
51 vistas

Tutorial Básico de HTML

El documento proporciona una introducción al lenguaje HTML. Explica que Tim Berners-Lee desarrolló HTML y los fundamentos de Internet mientras trabajaba en CERN. HTML se utiliza para estructurar páginas web y contiene secciones sobre qué es HTML, qué software se necesita para escribir código HTML, y cómo crear la primera página web básica.

Cargado por

Vladimir Figueroa
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
51 vistas

Tutorial Básico de HTML

El documento proporciona una introducción al lenguaje HTML. Explica que Tim Berners-Lee desarrolló HTML y los fundamentos de Internet mientras trabajaba en CERN. HTML se utiliza para estructurar páginas web y contiene secciones sobre qué es HTML, qué software se necesita para escribir código HTML, y cómo crear la primera página web básica.

Cargado por

Vladimir Figueroa
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 20

Tutorial básico de HTML: crea tu propio

proyecto web
A finales de los años 1980, Tim Berners-Lee desarrolló los fundamentos de Internet mientras
trabajaba en un proyecto interno en la Organización Europea para la Investigación Nuclear
(CERN) que debía permitir el intercambio transnacional de información en su red de
laboratorios, distribuida entre Francia y Suiza. Como base de esta infraestructura, el
informático utilizó el lenguaje de hipertexto, un tipo de escritura que transmite información
mediante hipervínculos (hyperlinks) y se escribe con lenguajes de marcado como el Hypertext
Markup Language o HTML, desarrollado por Berners-Lee expresamente para el proyecto.

Junto a otros componentes como el protocolo de transferencia HTTP, el localizador URL, así
como los navegadores y los servidores web, HTML constituye, aún tres décadas después, la
piedra angular de la interconexión digital global. Esto hace que aprender a utilizar este
lenguaje web se cuente entre los primeros deberes de cualquier desarrollador. En este tutorial
de HTML se han recopilado los principios básicos de este lenguaje de marcado, así como
algunos consejos de HTML para principiantes, para que tus primeros pasos en el mundo del
desarrollo web sean firmes y tus conocimientos sólidos.
Índice
1. ¿Qué es HTML?
2. Qué software necesitas para escribir código HTML
3. Introducción a HTML: crear la primera página
4. HTML básico: cómo estructurar un texto con etiquetas
5. Componer la estructura interna de una página web con HTML
6. Cómo puedes incluir imágenes, vídeos o gráficos en tu página web
7. Cómo enlazar páginas y contenidos: la importancia de los hipervínculos
8. La recta final: lanzar la página online
9. CSS y JavaScript: por qué HTML solo es el comienzo
¿Qué es HTML?
El lenguaje de marcado de hipertexto hace parte de aquellos lenguajes informáticos que las
máquinas pueden entender y que facilitan la interacción con el hombre. Marcándolos como
tales, HTML permite definir y articular titulares, párrafos, listas, tablas o gráficos en una
web, de tal forma que cualquier navegador que pueda interpretar el código puede mostrar
visualmente cada elemento. Mediante los metadatos, HTML también puede proporcionar
información adicional, como por ejemplo, sobre el autor. Hoy día, y al contrario de lo que
ocurría en sus inicios, HTML solo se usa para estructurar la página internamente y no para
definir su aspecto visual, algo de lo que se ocupan lenguajes como CSS (Cascading Style
Sheets).

HTML se desarrolló a partir del hoy ya casi desaparecido metalenguaje SGML (Standard
Generalized Markup Language), estándar ISO reconocido (8879:1986) del que heredó su
forma de escribir. Esta escritura se basa en definir cada elemento con un par de etiquetas o
tags rodeadas por corchetes angulares, compuesto por la de inicio <> y la de cierre </>.
Algunos elementos no requieren de esta última, como el <br>, que además carece de
contenido. Además de las etiquetas, los siguientes atributos de HTML también recuerdan
a su predecesor:
• Declaración del tipo de documento: aquí se proporciona información sobre la
versión de HTML utilizada, como, por ejemplo: <!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

• Empleo de entidades HTML: los signos de puntuación, los caracteres con tilde o los
símbolos especiales se traducen en entidades HTML para poder visualizarse en el
navegador (p. ej., &ntilde; para "ñ" o &eacute; para "é").

• Comentarios: los comentarios ocultos para el navegador pero visibles para los
programadores se integran con la etiqueta <!-- -->

• Atributos: los atributos amplían la definición de los elementos y siguen el esquema


<etiqueta atributo="variable">

Qué software necesitas para escribir código HTML


En los inicios de nuestro breve curso de HTML es menester aclarar de qué manera se puede
escribir HTML y qué aportan las diferentes opciones, puesto que, por un lado, al no tener
grandes requisitos, es suficiente con disponer de un simple editor de texto como el que se
encuentra en cualquier sistema operativo y, por el otro, es verdad que algunas aplicaciones
especiales ofrecen algunas facilidades a la hora de escribir. Dicho esto, ¿cuál es la mejor
alternativa si se quiere aprender a escribir HTML?

Editor de texto
No es necesario disponer de ningún software especial para escribir un código HTML limpio y
ordenado. Un editor de texto como Notepad de Windows o su equivalente en Mac, TextEdit,
en texto sin formato, es suficiente. Este programa no permite cambiar el aspecto del texto,
tarea que recae directamente en el código HTML. En teoría se podrían utilizar también
procesadores de texto como Microsoft Word u OpenOffice Writer, pero no tiene mucho sentido
hacerlo si se quiere aprender HTML, porque no se van a utilizar todas sus funciones, las
cuales, además, podrían frenar el proceso de aprendizaje. En definitiva, para aprender a
escribir HTML, la decisión más acertada es utilizar un editor de textos al uso como el que
se encuentra instalado en cualquier sistema operativo.

Editores de HTML
Un paso intermedio entre los editores de texto y los programas más complejos lo constituyen
aquellos editores con una funcionalidad más completa que incluye, por ejemplo, la de
destacar cromáticamente las etiquetas, de modo que proporciona una visión general muy
clara sobre el código que se ha escrito y permite, así, detectar errores sintácticos más
rápidamente. Otra función estándar muy útil es la de autocompletar, que propone formas de
ampliar o completar las etiquetas, incluso cerrándolas automáticamente. Muchos editores
disponen, además, de una función de vista preliminar que permite ir comprobando el
resultado de lo que se lleva escrito.

Para los usuarios de Windows, un editor de texto muy recomendable es Notepad++, de código
abierto y distribuido con licencia General Public, mientras que los usuarios de sistemas
unixoides pueden recurrir a la solución gratuita Vim.
Editores con visualización en tiempo real
Una alternativa muy atractiva, hoy incluida en casi la mayor parte de sistemas de gestión de
contenidos y de diseño de páginas web, consiste en utilizar los editores conocidos
comoWYSIWYG, que permiten escribir viendo el resultado en tiempo real. Las siglas
equivalen a "What You See Is What You Get" ("Lo que ves es lo que obtienes") y es el
principio que fundamenta a estos programas, desarrollados con el objetivo de permitir crear
código HTML sin conocimientos sobre lenguaje de marcado. Funcionando de forma parecida a
como lo hace un procesador de textos, el texto se articula utilizando las funciones
predeterminadas disponibles en el menú, sin tener que escribir manualmente las etiquetas,
que el editor genera en un segundo plano. Esto tiene, sin duda, sus ventajas, pero no a la hora
de aprender HTML, incluso aunque se pueda acceder en todo momento a la vista de código.
BlueGriffon o Dreamweaver de la casa Adobe son dos de las muchas opciones de editores
con vista preliminar en tiempo real.

Introducción a HTML: crear la primera página


En el primer paso de nuestro tutorial de HTML mostraremos cómo crear una página sencilla
que se podrá visualizar en el navegador. Esta página no es un documento HTML válido,
estructurado según determinados estándares de calidad, sino una mera página de prueba.
Tanto para la creación de esta página como para el resto de ejemplos contenidos en este
manual de HTML básico se toma el editor Notepad++ como herramienta de referencia, de
modo que si usas otro programa diferente, tendrás que tener en cuenta que los pasos podrían
variar.
Metadatos: Las metatags de HTML
Las metatags de HTML nos permiten dotar de metadatos a la página HTML. Es decir de información
relativa al contenido de la página, pero que no se representa de ninguna forma. Si bien son muy
importantes ya que será una parte de información que leerán los buscadores web y un correcto
uso de los metadatos harán que nuestra página sea mejor o peor indexada.
Por ejemplo podremos encontrar dentro de los metadatos, la descripción de la página, un conjunto
palabras que describan la página, el tipo de codificación de la página, información relativa al autor
de la página o con qué herramienta ha sido construida, entre otras más.
La estructura general de las meta-tags se define mediante el elemento meta:

<meta name="metadato" content="valor" http-equiv="cabecera-http" schema="esquema


"/>

Dentro de los metadatos podríamos diferenciarlos de tres tipos:

• Metadatos generales, que proporcionan información relativa al documento HTML.


• Metadatos http, son aquellos que modifican alguna propiedad de las cabeceras http.

Metadatos Generales
Nos permiten definir información de metadatos generales del documento: autor, descripción
palabras clave,… Es estándar HTML 4.01 no define un perfil de metadatos a utilizar y deja abierto su
uso. Si bien hace referencia al Dublin Core Profile para la descripción de documentos electrónicos.
Algunos de los metadatos más utilizados son:

Author
Para hacer referencia al autor del documento. La estructura sería:

<meta name="author" content="Manual Web" />

Description
Define la descripción del contenido del documento a forma de resumen. Su uso sería:

<meta name="description" content="Manual Web que nos explica el uso del lenguaje
HTML" />
Keywords
Conjunto de palabras que describen el documento. Las palabras van separadas por comas. Se
escribiría de la siguiente forma:

<meta name="keywords" content="manual,html,elementos,atributos,ejemplos" />

Content-type
Nos sirve para identificar el tipo de documento, que será un documento de tipo text/html y la
codificación del contenido. Si es ISO 8859-1, UTF-8,… Esto servirá al navegador a interpretar los
caracteres que vayan dentro del contenido.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Mi Primera Página HTML


Con lo que ya llevamos aprendido en el Manual de HTML es un buen momento para crear nuestra
primera página HTML o mejor dicho, nuestra primera página web.

Herramientas básicas
Lo primero que vamos a necesitar es un editor de texto instalado en tu ordenador. Ya hemos visto
que nos pueden valer el UltraEdit, NoteTab, el TextEdit de Mac, o un avanzado editor como Sublime
Text o Atom. Dentro del editor de texto crea un documento de texto el cual llamaremos
miprimeraweb.html

Es importante saber que los documentos HTML tienen la extensión .html o .htm. Es más común la
primera de ellas.

Crear la página HTML


Una vez tengamos nuestro documento de texto vamos a crear la estructura del documento HTML,
con sus elementos html, head y body.
<!doctype html>
<html>
<head>
<title>Mi Primera Página</title>
<meta charset=”utf-8”/>
</head>
<body>
<h1>Mi Primera Página</h1>
Mi primera página en HTML.
</body>
</html>

Vemos que dentro del elemento body hemos insertado un elemento h1 con un texto y directamente
texto que indica “Esta es mi primera página web”.
No te preocupes por los elementos meta y h1 que aparecen nuevos, ya que los veremos en detalle
más adelante.

Visualizar la página HTML


Una vez guardada la página HTML vamos a visualizarla. Para poder visualizarla necesitamos un
navegador web. Lo más normal es que tu ordenador ya venga con alguno instalado por defecto, si no
puedes instalarte alguno como Google Chrome, Mozilla Firefox u Opera.
Una vez arrancado el navegador web simplemente tiene que abrir la página creada anteriormente,
es decir, el archivo miprimeraweb.html
Verás que el navegador carga algo parecido a lo siguiente:

Vista preliminar de una primera página web con contenido


HTML básico: cómo estructurar un texto con etiquetas
Así habrás creado una primera página web, incluso sin haber escrito ni una línea de código.
Si, de la misma manera, intentas añadir un texto bien articulado con títulos y párrafos,
pronto te darás cuenta de que es imposible hacerlo sin etiquetas. Cualquier formato añadido,
por ejemplo, con un procesador de texto, desaparecerá de la vista en el navegador cuando
abras el documento HTML: los puntos aparte desaparecen, los espacios se eliminan, etc. La
solución pasa indefectiblemente por marcar todos los componentes formales de texto como
tales mediante los elementos estructuradores adecuados, que no es otra cosa que
adentrarnos en el mundo de las etiquetas de HTML. Definir párrafos con la
etiqueta <p>
Este elemento, cuya nomenclatura proviene del inglés "paragraph" ("párrafo") es necesario
para crear separaciones por párrafos. Con la etiqueta de inicio <p> se marca dónde comienza
el párrafo y con el de cierre </p> dónde acaba. El texto se escribe entre estas dos etiquetas.

En todas las versiones de HTML, excepto en XHTML, el tag de cierre es opcional, aunque
conviene acostumbrarse a usarlo no solo durante el aprendizaje sino también porque denota
un buen estilo.

Puedes probar a marcar párrafos con la etiqueta <p> en tu página de prueba, añadiendo otra
frase ("This is the second paragraph of my first webpage" en este ejemplo o "Este es el
segundo párrafo de mi primera página web") a aquella primera y marcándolas con la etiqueta,
por ejemplo, así:

<p>This is my first webpage!</p>


<p>This is the second paragraph of my first webpage.</p>
Nota: en realidad no sería necesario separar las frases como hemos hecho aquí, ya que al
navegador, que solo es capaz de interpretar las etiquetas, poco le importa cómo lo leamos
nosotros. Si se ha escrito así es meramente por una mejor visualización.

Este sería el resultado en la ventana del explorador:


Vista de la página de prueba en el navegador con un nuevo párrafo Añadir

títulos y subtítulos con la etiqueta <h>


Los títulos también se cuentan entre los elementos básicos de un texto bien estructurado.
Gracias a los marcadores estructurales no solo puedes señalar un título como tal sino que
también tienes la posibilidad de crear una jerarquía de títulos principales y secundarios. Para
ello cuentas con las etiquetas <h1> hasta <h6>, aunque <h1> representa el titular principal
de cada subpágina y solo habría que usarlo una única vez, al contrario que todos los demás a
partir de <h2>.

Aquí, es importante mantener la jerarquía correcta y no utilizar los diferentes niveles al azar
para que tanto el lector como el buscador puedan entender la estructura del texto a partir de
los diferentes títulos.

Para añadirle a esta primera página de prueba un título principal y un título secundario puedes
utilizar los siguientes comandos:

<h1>Main heading: my first webpage</h1>


<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>
Nota: al tratarse de un documento HTML muy sencillo sin metadatos, algunos navegadores,
como Firefox, no muestran los acentos o caracteres especiales de forma correcta. Para este
test sería recomendable utilizar Google Chrome o traducirlos a entidades HTML.
En el explorador se verá de la siguiente manera:

Vista de la página de prueba en el explorador con título principal y secundario

Destacar palabras o fragmentos de texto: <i>, <em>, <b> y <strong>


Entre los elementos básicos de formato de HTML se encuentran también aquellas etiquetas
que permiten destacar de alguna forma tanto palabras aisladas como frases o fragmentos de
texto, con la finalidad de dirigir el foco de atención del lector a elementos clave de contenido o
funcionales y ayudarle a percibirlos. Para acentuar frases, expresiones técnicas, citas o
reflexiones en cursiva podemos utilizar las etiquetas <i> (itálica) y <em> (énfasis). No
obstante, conviene utilizar con prudencia la cursiva, ya que frena la lectura. Más importantes
son, sin embargo, los elementos <b> (negrita) y <strong> (énfasis fuerte), que destacan en
negrita aunque con diferencias en cuanto a su utilización. La etiqueta <b> debería utilizarse
para marcar aquellos elementos sobre los que se ha de llamar especialmente la atención del
usuario, mientras que <strong> está prevista para destacar contenido relevante.

Lo veremos ampliando nuestra página de prueba con algunas etiquetas de formato:

<h1>Main heading: <i>my first webpage</i></h1>


<p>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>
Nota: para que el ejemplo de código HTML del pasaje añadido no se muestre como texto
plano hemos traducido los corchetes (< y >) como entidades HTML (&lt; y &gt;). Hay que
seguir teniendo en cuenta los acentos y otros caracteres especiales.
Vista en el navegador de la página de prueba con formato

Crear listas con las etiquetas <ul>, <ol> y <li>


No solo a la hora de hacer la compra recurrimos a las listas. También en la edición de textos
se revelan como un medio muy útil para descongestionar párrafos y optimizar la lectura.
Con HTML se pueden crear listas con o sin numeración (con viñetas o puntos) con las
etiquetas <ol> ("ordered list"=lista ordenada) o <ul> ("unordered list"=lista desordenada)
respectivamente. Para definir los puntos de la lista se utiliza <li>, que solo se puede usar si
se combina con las dos etiquetas de listado mencionadas.

Ahora podrás probarlo en tu página de prueba:


<ul>
<li>first unordered-list item</li>
<li>second unordered-list item</li>
<li>third unordered-list item</li>
</ul>
Nota: recuerda que puedes escribir el texto que prefieras. En este caso la elección del inglés
como idioma de los ejemplos solo tiene motivos editoriales.
El resultado debería parecerse a esto:

Página de prueba con lista con viñetas


Si, por el contrario, quieres crear una lista numerada solo hay que cambiar la etiqueta que
define el tipo de lista y marcarla como lista ordenada con <ol>:
<ol>
<li>first ordered-list item</li>
<li>second ordered-list item </li>
<li>third ordered-list item </li>
</ol>
Como consecuencia, en lugar de las viñetas aparece una lista numerada:

Página de prueba con una lista numerada de tres elementos <li>


Presentar información en tablas: <table>, <tr> y <td>
Durante mucho tiempo fue habitual utilizar las tablas de HTML tanto para presentar datos
complejos de una forma más sencilla, como también para estructurar por entero el diseño
de una página web o para subdividir el texto en varias columnas. Sin embargo, con el aumento
de la popularidad de CSS este papel extra de las tablas pasó a un segundo plano, de tal
modo que hoy las tablas asumen únicamente la función para lo que fueron pensadas, es decir,
la presentación de datos de forma ordenada. Las tablas se componen, por lo menos, de estos
tres elementos:

• <table>: esta etiqueta marca el inicio y el cierre de una tabla en HTML, aunque por sí
sola no informa al navegador de aspectos necesarios para mostrarse como el número
de filas o de columnas.

• <tr>: con el elemento "table row" (fila de la tabla) se añaden tantas filas a la tabla
como sea necesario.

• <td>: las columnas completan la estructura básica de una tabla. Para ello necesitamos
el tag "table data" (datos de la tabla), que se subordina a una etiqueta <tr>, puesto
que, dentro de una fila, se crean varias celdas (una por columna). El contenido de una
celda se sitúa entre la etiqueta de inicio <td> y el de cierre </td>.

Creamos a continuación una tabla sencilla para entender la estructura de tabla en HTML. En
nuestra prueba se compone únicamente de una línea y dos columnas:

<table>
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>
Al mostrar la vista preliminar en el explorador, pronto se detecta que la tabla no se muestra
como debería, pues ni se distinguen las dos columnas ni se reconoce siquiera si se trata de
una tabla. La explicación es más sencilla de lo que parece y es que, por defecto, las celdas
de HTML no tienen borde. Esta característica tan propia de las tablas se marca ampliando la
etiqueta <table> con el atributo border y la variable 1, como en nuestro ejemplo:
<table border="1">
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>
Abre ahora tu documento HTML en tu navegador y observa la tabla resultante.

Nota: HTML5 ya no soporta el atributo border, una función que ha asumido CSS.

Vista en el navegador de una tabla sencilla de dos celdas con borde

A pesar de su sencillo formato, HTML también permite destacar los títulos de las columnas.
Para ello se ha de marcar la fila correspondiente con la etiqueta <thead> (table head) y marcar
las celdas como <th>. Con este código de abajo diseñas una tabla con cuatro filas, tres
columnas y títulos:
<table border="1">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

Vista en el navegador de una tabla de HTML con títulos de columna en negrita


Componer la estructura interna de una página web con
HTML
En el siguiente capítulo de este tutorial de HTML nos ocupamos de la estructura básica de una
página web. Los documentos HTML no solo contienen texto, enlaces y otro tipo de contenido
como imagen o vídeo, sino también los ya mencionados metadatos, que revelan al
navegador, pero también a los crawlers de los buscadores, cómo han de leer la página.

Algunos de estos metadatos son invisibles al usuario que abre una página, pero otros se
muestran en la pestaña del título, en el historial o como titular de los resultados del buscador.

Reducido a sus elementos mínimos necesarios, el código básico de una página de HTML en
castellano sería algo así:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Here you can find all information about the
HTML basic framework">
<title>Learn HTML: The basic framework</title>
</head>

<body>
</body>
</html>

Un documento HTML se compone, según este ejemplo, de las tres


secciones DOCTYPE, head (cabecera) y body (cuerpo del documento), aunque el primero, al
tratarse de la definición del tipo de documento que viene a continuación, es el único que ha
de figurar antes de la etiqueta <html> que encierra el contenido del archivo. DOCTYPE
permite indicar a la aplicación que lee el documento qué estándar ha seguido su programador.
En este caso es HTML5, un tipo de documento que cualquier navegador puede reconocer y
que permite tanto el uso del código actual como los más antiguos, razón por la cual es
conveniente utilizarlo, en especial si se está aprendiendo a escribir con HTML.

En la cabecera, enmarcada por la etiqueta <head>, hemos incluido la codificación de


caracteres que ha de usar el navegador (meta charset), la metadescripción, relevante para el
buscador (meta name="description") o el título de la página web (title), que aparece en la parte
superior del navegador. Además de estos, que aunque opcionales son muy recomendables
para favorecer una buena valoración por parte del buscador, también se pueden añadir
numerosos metadatos. La única excepción la constituye el elemento <title>, puesto que
constituye el único obligatorio en un documento HTML, junto a la definición del tipo de
documento. Más tarde se añadirá un vínculo al archivo CSS a la cabecera donde están
contenidos los aspectos de diseño y formato.

La etiqueta <body> marca lo que el navegador ha de mostrar al usuario.


Nota: las etiquetas para la estructura básica de HTML son opcionales, es decir, podrían, en
teoría, no incluirse. En este caso, el navegador crearía de forma automática las etiquetas
<html>, <head> y <body> y les subordinaría los elementos correspondientes. Sin embargo,
lo normal es crearlas. El desglose facilita la legibilidad del documento, lo cual beneficia
especialmente a los principiantes.

Cómo puedes incluir imágenes, vídeos o gráficos en tu


página web
No hay duda que el texto es el componente principal de cualquier página web, pero estímulos
visuales en la forma de imágenes, fotos o gráficos tienen una gran influencia en la experiencia
del usuario, lo que las hace imprescindibles si se aspira a diseñar una buena página.
Habitualmente se utilizan estos tres formatos, soportados por todos los navegadores:

• JPG: el formato JPG se utiliza para fotos, o gráficos semejantes a fotografías, con un
fuerte contraste y una gran diversidad cromática, ya que puede representar más de 16
millones de colores y comprimir considerablemente los archivos, aunque vaya ligado a
una pérdida de calidad de la imagen.

• PNG: este es el formato de los gráficos y los logos, ya que puede representar entre
256 (PNG8) y 16,7 millones de colores (PNG24) y, al contrario que JPG, comprime sin
pérdida cualitativa. Como contrapartida, el archivo es más grande.

• GIF: los archivos en formato GIF solo pueden representar 256 colores, aunque son
muy utilizados en el desarrollo web porque permite crear pequeñas animaciones,
elementos de navegación o gráficos sencillos.

La etiqueta que permite añadir una imagen a un archivo HTML es <img> ("image"=imagen), a
la que se añade el directorio donde está almacenada la imagen para que el navegador sepa
adónde ha de ir a buscarla. Para ello se utiliza el atributo src, del inglés "source" (fuente), así
como la ruta del archivo.

Es recomendable crear una subcarpeta con el nombre "Imágenes" en el directorio del


proyecto que también contiene el documento HTML y guardar en ella todas las imágenes que
se vayan a utilizar en la web.

La imagen de ejemplo de nuestro tutorial de HTML se llama grafico1.png y se encuentra en la


mencionada carpeta "Imágenes". De este modo, la línea de código que deberíamos escribir
para integrar este elemento visual en la web sería:
<img src="images/graphic1.png" />
Existen otros atributos de imagen, como la anchura (width), la altura (height) o el texto
alternativo, cuyo uso es muy recomendable. Definir el tamaño de la imagen en anchura y
altura permite al navegador reservar un espacio para ella ya durante la carga de la página, de
tal forma que, durante ese lapso de tiempo y hasta que esté cargada por completo, puede ir
mostrando paralelamente otros contenidos menos pesados en la ventana del navegador sin
que tenga que concluir el proceso de descarga del archivo de imagen, lo que frenaría la
carga de la web en su conjunto.
El atributo alt, por otro lado, permite escribir un texto alternativo para la imagen, que aparece
cuando esta no se puede mostrar y que conviene incluir en el repertorio básico de HTML por
tres motivos:

• Favorece la accesibilidad de la página porque ofrece información sobre la fotografía


en caso de problemas de visualización.

• Ayuda a los robots de los buscadores a clasificar la imagen y cuenta como contenido
extra para su posicionamiento.

• Así lo dictan las especificaciones de uso de HTML.

Ampliada con estos atributos que hemos mencionado, la frase de código HTML resultaría así:

<img src="images/graphic1.png" width="960" height="274" alt="Learn HTML: this is


how the embedded sample graphic 'click here' appears:" />

Nota: Las variables '960' y '274' para la anchura y la altura corresponden, respectivamente, a
la medida original de la imagen gráfica. El navegador calcula automáticamente su equivalencia
en píxeles.

Vista en el navegador de la imagen integrada en el documento HTML (Fuente de la imagen:


https://pixabay.com/es/haga-clic-aqu%C3%AD-bot%C3%B3n-sitio-web-1312391/
Cómo enlazar páginas y contenidos: la importancia de los
hipervínculos
Los hiperenlaces o hipervínculos, nombre procedente de la voz inglesa "hyperlink" y
popularmente conocidos como "links", son la principal razón del éxito sin precedentes de la
world wide web y no pueden faltar en un curso de introducción a HTML. Sin estas referencias
electrónicas que conducen al usuario de una a otra página o que inician alguna acción,
como podría ser la descarga de un documento, no podría existir una interconexión como la
que ofrece la red de redes. Se pueden distinguir tres tipos de enlace:

• Internos: los enlaces internos articulan una página web y guían al usuario en su
navegación. Esta estructura interna puede tener diversas formas, desde una lineal, por
ejemplo, en la cual el usuario puede ir de una subpágina a otra de la web en un
determinado orden, a una de tipo arbóreo, en la que el usuario escoge a dónde ir
desde la página principal. También es posible utilizar enlaces internos en una misma
página, cuya función podría consistir en dirigir al usuario al principio del texto una vez
ha llegado al final.

• Externos: estos son los vínculos que envían al usuario a otra web y se usan para
ofrecerle un valor añadido o recomendar una oferta diferente. En este caso, si se
quiere evitar una valoración negativa en el buscador, conviene evitar un exceso de
enlaces externos, así como también hay que controlar regularmente la calidad del
contenido que se enlaza y el propio funcionamiento del enlace.

• Otros enlaces: no todos los vínculos enlazan a documentos HTML. Algunos también
refieren a la descarga de un documento, abren el cliente de correo electrónico o
activan el visor de PDF.

Enlaces internos: así articulas tu proyecto


Con el tiempo podrás aplicar las nociones adquiridas en este curso de HTML en la
estructuración de proyectos más complejos, pero antes comenzaremos enlazando dos
páginas. Será necesario que crees otra página que puedas enlazar a aquella primera
test.html. Esta nueva página ha de tener un nombre
diferente, targetpage.html ("página objetivo"), por ejemplo, y ha de guardarse en el mismo
directorio que la primera.

Para generar un vínculo se utiliza la etiqueta de HTML <a>, que deriva de "anchor", ancla en
castellano, y cuya función es simplemente indicar que la información enmarcada es un enlace.
Esto hace que siempre necesite un atributo, href (hiperreferencia), que señale a dónde dirige
en enlace. El texto del enlace que el navegador muestra por defecto en azul y subrayado se
escribe enmarcado en la etiqueta <a>.

Incluyendo la siguiente línea de código en la página de prueba la enlazamos a la segunda


página (target page):
<a href="targetpage.html">Jump to target page</a>
Si el hipervínculo funciona correctamente debería abrirse una página vacía, ya que aún no se
ha realizado ninguna acción en esta segunda página. En el siguiente paso incluimos en esta
nueva página otro enlace interno que redirija a la original (previous page):
<a href="test.html">Back to previous page</a>

Nota: si la página a enlazar no se encuentra en el directorio principal hay que indicar la ruta
que lleva a la subcarpeta donde está guardada, subcarpeta/targetpage.html. En el enlace a la
primera habría que indicar también la subcarpeta y la página: <a
href="https://www.ionos.es/digitalguide../test.html">.

Enlazar a contenidos externos


Para crear un enlace externo en una página no se necesita una etiqueta diferente, pero
tampoco es necesario saber en qué directorio se encuentra la página a enlazar, puesto que
referir a un contenido ajeno solo requiere conocer la dirección web completa o URL donde
se encuentra, que ya contiene toda la información necesaria. No obstante, como este
contenido no reside en tu propio servidor web no tienes ningún tipo de influencia en la
calidad del enlace, por lo que se hace necesaria una revisión regular.

Es importante invertir tiempo en la redacción de un texto preciso y atractivo para el enlace,


puesto que palabras vacías como "aquí" proporcionan al usuario muy poca información sobre
lo que va a encontrar si hace clic en él.

Prueba incluir un enlace externo en tu página con la siguiente línea de código, que genera un
vínculo a nuestra Guía Digital:

<p>HTML tutorial and numerous guides on the topic of websites, hosting, and much
more at
<a href=" https://www.ionos.com/digitalguide ">IONOS Digital Guide</a>
</p>
Estos hipervínculos alejan a tus visitas de tu página y aunque pueden regresar pulsando el
botón de "vuelta atrás" del navegador (←) no se puede confiar en que lo hagan. Existe, no
obstante, la posibilidad de que la página enlazada se abra automáticamente en una pestaña o
una ventana nueva, de modo que la primera página (tu página) se mantenga abierta:
el atributo target describe en donde se ha de abrir el documento enlazado y con la variable
_blank (en blanco) se especifica su apertura en una nueva ventana.

Esto se escribe de la siguiente forma:

<a href="https://www.ionos.com/digitalguide" target="_blank">IONOS Digital


Guide</a>

También podría gustarte