HTML

El lenguaje que se utiliza para crear una página web es el HTML, Hyper Text Markup Lenguage (Lenguaje de Marcas de Hypertexto).

Lo fundamental para escribir páginas web es saber HTML pero no es suficiente. Si quieres poner una imagen en tu página necesitarás saber un poco sobre gráficos web, para recortar la imagen al tamaño adecuado, si quieres poner un menú desplegable es conveniente que conozcas algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es conveniente hacerlo con un lenguaje tipo PHP.

También es conveniente utilizar un editor web para facilitar la escritura de páginas web, como KompoZer, para que tu página sea agradable es conveniente saber algo sobre diseño web, y por último para que todo el mundo vea tu trabajo necesitarás subir tu página a un servidor de Internet y darla a conocer.

Crear páginas web es la forma básica de comunicar en Internet, pero no la única, ni la más adecuada para todos los casos. Ahora bien, cuando visitamos páginas web en realidad estamos accediendo a archivos en un servidor web.

La dirección o URL tiene este formato: http://www.nombredominio.com/directorio/paginaweb.htm

Donde http:// es el protocolo y www. indica el sistema de páginas web. Habrás observado que no hace falta escribir esto en el navegador. Pero es porque el navegador se encarga de añadirlo, no porque nos ea necesario. nombredominio.com es el nombre del sitio. Al ir directamente ahí, vamos a su página de inicio. La última parte indica el archivo del sitio que estamos viendo. En este caso, una página llamada paginaweb.htm que está en una carpeta llamada directorio.

¿Qué es una página web?

Una página web es un documento de texto con marcas, llamadas etiquetas (tags en inglés). Cuando este documento se ve a través de un navegador web, las etiquetas se interpretan y se visualiza el documento como una página web. Las etiquetas no se muestran pero determinan el aspecto de la página, y otras características, por ejemplo, si el texto es un enlace, en la etiqueta se indica la página a la que nos lleva el enlace.

Por lo tanto, si somos capaces de escribir un documento de texto, seremos capaces de escribir una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML.

¿Qué es el lenguaje HTML?

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y diseñar páginas web. Es un lenguaje de marcado, lo que significa que se utiliza para estructurar y dar formato al contenido en la web mediante el uso de etiquetas y atributos. A continuación, detallo algunos aspectos clave de HTML:

Definición de HTML:

HTML es un lenguaje de marcado utilizado para describir la estructura de las páginas web. Su propósito principal es definir el contenido y su organización en la página. Las etiquetas HTML se utilizan para identificar y representar diferentes elementos del contenido, como títulos, párrafos, imágenes, enlaces y más.

Estructura Básica de un Documento HTML:

Un documento HTML típico tiene una estructura básica que incluye las siguientes partes:

<!DOCTYPE html>: Declara el tipo de documento y la versión de HTML.
<html>: Etiqueta raíz que envuelve todo el contenido de la página.
<head>: Contiene metadatos sobre el documento, como el título, enlaces a hojas de estilo, y scripts.
<title>: Define el título del documento que aparece en la barra del navegador.
<body>: Contiene el contenido visible de la página, como textos, imágenes, enlaces, etc.

Para entender mejor la estructura de una página HTML, se recomienda ver el siguiente video

¿Qué se necesita?

Un editor de texto: Notepad, Sublime Text, VSCode, etc.

Un navegador web: Google Chrome, Mozilla Firefox, Safari, etc.

Primera página HTML

Ejemplo básico de una página HTML:

¿Cómo se guarda?

Guarda el archivo con la extensión .html, por ejemplo, index.html.

Abre el archivo guardado con un navegador web para visualizarlo.

Etiquetas

Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.

El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.

La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".

A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen, ...

La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".

Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas vacías son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.

En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.

Por ejemplo, <a href="https://www.MarcoARojo.co">Visita MarcoARojo</a>

Produce este resultado en el navegador:

Visita MarcoARojo

Si un atributo tiene más de un valor, se escriben todos los valores dentro de las mismas comillas, separados por espacios en blanco, por ejemplo <etiqueta atributo="valor1 valor2">.

En general las etiquetas se pueden anidar pero no se pueden 'cruzar'. Estas dos etiquetas <p> y <div>, están anidadas correctamente:

La sintaxis de las etiquetas HTML ha sufrido variaciones a lo largo del tiempo y hay etiquetas que ya no está recomendado su uso. Por esto se pueden encontrar páginas web antiguas cuyo código HTML no se considera correcto hoy en día, sin embargo, esas páginas siguen funcionando y mostrando el contenido para el que fueron diseñadas.

Elementos y Etiquetas HTML Esenciales:

HTML utiliza etiquetas (o "tags") para marcar diferentes tipos de contenido. Algunas etiquetas esenciales incluyen:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Encabezados de diferentes niveles.

<p>: Párrafo de texto.

<a>: Enlace o hipervínculo.

<img>: Imagen.

<div>: División o sección de la página.

<span>: Contenedor en línea para texto y otros elementos.

<ul>, <ol>, <li>: Listas no ordenadas y ordenadas, y sus elementos de lista.

Etiquetas de Texto

Como se dijo anteriormente todo el texto de la página estará dentro del <body>, el texto dentro del <body> debe estar, principalmente, dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos se colocarán texto e imágenes, y algunas etiquetas que permitan dar formato al texto. Dentro de un párrafo no debe haber otros párrafos anidados.

A su vez, dentro del <body>, se dispone de encabezados que permiten organizar los títulos o rótulos del texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, se utilizaría un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El propio texto de cada apartado iría fuera del encabezado contenido en párrafos <p></p> u otras etiquetas.

El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.

Cada etiqueta <p></p> lleva implicito un salto de línea.

Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div> y <span>. La etiqueta <div> se utiliza a nivel de bloque y la etiqueta <span> a nivel de línea o palabras. Estas etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las etiquetas de apertura y de cierre <div> contenido </div>, el criterio para agrupar contenido no está definido estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar estilo al contenido.

Podríamos decir que las etiquetas <div> y <span> son unas etiquetas neutras dentro de la semántica de HTML. Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el contenido según su significado. Estas nuevas etiquetas a nivel de bloque son, section para secciones, article para artículos, header para cabeceras, nav para menús, footer para pies de página y aside para contenido en el lateral. A nivel de línea o texto tenemos muchas etiquetas semánticas como strong, em, cite.

Otras etiquetas para agrupar y organizar el contenido (texto, imágenes, ...) en formatos estructurados son las listas (ul, ol, li) y las tablas (table, tr, td)

Para entender mejor las etiquetas de texto, se recomienda ver el siguiente video

Etiqueta <p>

La etiqueta <p> define un párrafo.

Ejemplo: <p>Un párrafo de texto</p>

Produce este resultado:

La etiqueta <p> es de tipo bloque, es decir, por defecto ocupa una línea completa en la página web. Además, también incluye un margen superior e inferior. Por ejemplo, si escribimos dos párrafos en la misma línea: <p>Un párrafo de texto.</p><p>Otro párrafo.</a>

Produce este resultado:

Si el contenido del párrafo no cabe en una línea será el navegador web quien lo divida en varias líneas según el ancho disponible. Por lo tanto, el número de líneas que ocupe un párrafo dependerá del ancho disponible. Si queremos incluir un salto de línea explícito dentro de un párrafo podemos utilizar la etiqueta <br />. Como ya se ha dicho, los saltos de línea que se escriban en el código html no tienen efecto al mostrar la página.

Atributos. Hasta la aparición de la versión HTML 5, existía el atributo align para alinear el contenido del párrafo, con los valores rigth, center, left.

Ejemplo: <p align="right">Contenido alineado a la derecha</p>

Texto preformateado <pre>

La etiqueta <pre> define texto preformateado, es decir, que conserva los espacios y saltos de línea presentes en el código html.

Ejemplo: <pre>Aquí hay más de un espacio

y un salto de línea</pre>

Produce este resultado:

Ejercicio: Etiquetas de texto.

Abre el editor de texto, Notepad, Brackets, sublime text, o el que tu quieras y dispongas, escribe el siguiente código:

Para indicar que se trata de una página web que utiliza la versión 5 de HTML escribe <!doctype html> en la primera línea, delante de la etiqueta <html>.
Para indicar el tipo de codificación de la página web añade la línea <meta charset="utf-8" /> detrás de la etiqueta de apertura de <head>.
Añade la cabecera de primer nivel <h1>Unidad 1. Introducción</h1> detrás de la etiqueta <body>.
A continuación añade el siguiente párrafo manteniendo los tres espacios delante y detrás de Hoja de Cálculo, y la línea en blanco detrás de cuadrícula:

Para ver el resultado de lo que vamos escribiendo, guarda el archivo con el nombre de excel1.html y ejecútalo desde un navegador. Es posible que el editor de texto te permita ir visualizando el resultado directamente.

Vamos a cambiar la etiquetas de este párrafo <p> y </p>, por las etiquetas <pre> y </pre> que corresponden a un párrafo preformateado. Visualiza la página web, guárdala antes y observa como se ven los tres espacios delante y detrás de Hoja de Cálculo, y la línea en blanco detrás de cuadrícula.
Vuelve al código de la página y deshaz el último cambio dejando las etiqueta de párrafo en lugar del párrafo preformateado. Ahora escribe   dos veces delante de Hoja de Cálculo, y también detrás de Hoja de Cálculo.
Escribe una etiqueta de salto de línea <br /> detrás de cuadrícula, y borra la línea en blanco.
Visualiza la página web y observa como ahora se ven los tres espacios delante y detrás de Hoja de Cálculo, y hay un salto de línea detrás de cuadrícula.

Hasta este momento, el código debe ser como este:

Caracteres especiales

Cuando escribimos en lenguaje html, los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:

< Se representa con < y > Se representa con >

Como ya hemos visto el espacio en blanco se representa como  

Dependiendo del sistema de codificación que se utilice y de la configuración del servidor web, existen otra serie de caracteres que no se visualizan correctamente. Se recomienda utilizar la codificación utf-8 colocando esta etiqueta <meta charset="utf-8" /> en la etiqueta <head> de la página web.

Si en la página web utilizamos la codificación iso-8859-1 como era habitual hasta hace pocos años (2014), habrá caracteres que no se verán bien. Es el caso de la ñ y las letras acentuadas, por lo que al igual que ocurre con otros caracteres especiales, para insertarlos como texto habría que escribir el nombre que los representa.

A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Encabezados <h1> <h2>

Las etiquetas <h1> <h2> ... <h6> crean texto para encabezados. Se suelen utilizar para títulos, subtítulos, rótulos, etc.

Ejemplo: <h1>Encabezado de primer nivel h1 </h1>

En la siguiente imagen puedes ver el tamaño de cada tipo de cabecera en relación al texto de párrafo:

Para los títulos y subtítulos es preferible utilizar etiquetas de encabezado que cambiar el tamaño de una etiqueta de párrafo ya que las etiquetas de encabezado tienen significado semántico y son utilizadas por los buscadores para dar significado al texto en función de su importancia.

Separadores <hr>

La etiqueta <hr> crea un separador horizontal. Hasta HTML 4 se representaba en forma de línea y tenía atributos para definir la anchura, alineación, ... En HTML5 esta etiqueta se define como un separador semántico más que como un separador visual, aunque los navegadores siguen representando una línea horizontal. Además esta etiqueta ya no tiene atributos, aunque cómo siempre con las hojas de estilo podemos darle el formato que queramos.

Ejemplo: <hr>

Produce este resultado:

Con un estilo podemos alinearla al centro, darle un ancho del 80%, darle un borde de 1 px con estilo punteado, color azul:

hr {

text-align: center; width: 80%;

border: 1px dashed blue; }

}

Etiqueta <q>

La etiqueta <q> se utilizar para poner entre comillas un texto corto.

Ejemplo: <p> Al despedirse dijo: <q>Hasta nunca</q> y cerró la puerta.</p>

El resultado es: Al despedirse dijo: "Hasta nunca" y cerró la puerta.

Si el texto entre comillas se refiere a una cita es conveniente añadir el atributo cite con la URL, que no será visible para el usuario.

Ejemplo:

<p>La web del Área de Tecnología e informática es <q cite="https://sites.google.com/view/ava-tecnologiaeinformatica">La primera web en español sobre cursos gratuitos online</q> en la fecha actual, 2024.</p>

El resultado es:

La web del Área de Tecnología e informática es "La primera web en español sobre cursos gratuitos online" en la fecha actual.

Para citas largas es mejor usar la etiqueta <blockquote>.

Etiqueta <strong>

La etiqueta <strong> se utiliza para dar importancia a un texto corto. Los navegadores ponen el texto en negrita.

Ejemplo: <p> Un coche histórico debe tener, al menos, <strong>25 años</strong> desde la primera matriculación.</p>

El resultado es el siguiente: Un coche histórico debe tener, al menos, 25 años desde la primera matriculación.

Etiqueta <em>

La etiqueta <em> se utiliza para dar énfasis a un texto corto. Los navegadores poner el texto en cursiva.

Ejemplo: <p> Una página web puede ser consultada desde <em>cualquier</em> parte del mundo.</p>

El resultado es: Una página web puede ser consultada desde cualquier parte del mundo.

Etiqueta <b>

La etiqueta <b> se utiliza para destacar un texto corto, sin que ello signifique que es importante. Los navegadores ponen el texto en negrita.

Ejemplo: <p> El futbolista es el deportista mejor <b>pagado</b>.</p>

El resultado es el siguiente: El futbolista es el deportista mejor pagado.

En muchas ocasiones es difícil distinguir si un texto corto es importante, queremos darle énfasis o merece ser destacado, por lo que utilizar las etiquetas <strong> <em> o <b> puede ser un poco ambiguo. Podríamos simplificar diciendo que si queremos ponerlo en cursiva utilizaremos <em>, y si queremos ponerlo en negrita y que sea tenido en cuenta por los buscadores como un texto importante utilizaremos <strong>, y si sólo queremos ponerlo en negrita utilizaremos <b>.

Etiqueta <sub>

La etiqueta <sub> se utiliza para ver texto como subíndice, es decir, colocado en la mitad inferior de la línea.

Ejemplo: <p> H<sub>2</sub>O. Texto <sub>subíndice</sub></p>

dando como resultado: H2O. Texto subíndice.

Etiqueta <sup>

La etiqueta <sup> se utiliza para ver texto como superíndice, es decir, colocado en la mitad superior de la línea.

Ejemplo: <p>x<sup>2</sup>. Texto <sup>superíndice</sup></p>

Etiqueta <code>

La etiqueta <code> se utiliza para indicar que se trata de un fragmento de código de programación. Los navegadores ponen el texto letra monospace (normalmente Courier). Por ejemplo, código de php, javascript, etc.

Ejemplo: <code>var x,y; </code>

El resultado es: var x,y;

Ejercicio: Practicar con etiquetas de texto

primero creamos nuestro archivo .html, guardandolo en una carpeta personalizada. El archivo deberá tener el siguiente código:

Debes modificar la página con estas características:

2. Después de la etiqueta <body> añade una cabecera h1 con el texto: Tecnología e Informática.

3. dale un atributo a h1, centrándolo y dándole color al texto

4. Después del párrafo La primera web en español sobre cursos de informática gratis on-line. Escribe una cabecera h2 con el texto: Cursos de Tecnología e Informática.

5. A continuación, escribe un párrafo con el texto: Access 2016, Excel 2016, Internet, Windows.

6. A continuación, escribe una cabecera h2 con el texto: Cursos de colaboradores.

7. A continuación, escribe un párrafo con el texto: autoCAD 2015, Estadística con Excel, Joomla.

8. A continuación, escribe un párrafo con el texto: La educación en línea ha experimentado un auge tremendo en la última década, y una gran parte de ese crecimiento se debe a la oferta de cursos gratuitos. Estos cursospermiten que cualquier persona, independientemente de su situación económica o geográfica, pueda adquirir nuevos conocimientos.

8. A continuación, utiliza la etiqueta adecuada para dibujar una línea horizontal.

9. A continuación, escribe un párrafo con el texto: Política de cookies y ponlo en negrita utilizando una etiqueta de texto.

10.pon en color azul para las etiquetas h2.

11. Guarda el archivo con el nombre index.html.

Comparte con el docente el archivo .html, no sin antes mostrar el resultado del proceso elaborado en clase

Hiperenlaces

Son un elemento muy común en cualquier página web, de hecho, podríamos decir que el hiperenlace o hipertexto es la instrucción o etiqueta más importante del lenguaje HTML como se desprende del propio nombre (Hyper Text Markup Lenguage).

Definición. Un hiperenlace se escribe con la etiqueta <a> y permite ir (navegar) a un recurso de internet designado por su dirección de internet (URL). El recurso más usual es una página web pero también puede ser un archivo de imagen, vídeo, dirección email, dirección ftp, punto de ancla. Un hiperenlace tiene dos partes fundamentales, el destino y el elemento que activa el enlace.

La forma más usual de utilizar la etiqueta <a> es para enlazar con otra página web mediante un texto:

Visita Tecnologia e Informatica

El código correspondiente es este:

<a href="https://sites.google.com/view/ava-tecnologiaeinformatica">Visita la página del curso Tecnología e informática</a>

El elemento que activa el enlace es el texto Visita aulaClic que al ser pulsado nos lleva al destino del hiperenlace. El destino se indica con el atributo href que en este caso es una dirección de internet (URL).

También es frecuente que el elemento que activa el enlace sea una imagen, como en el siguiente ejemplo:

El código correspondiente es este:

El elemento que activa el enlace se escribe entre las etiquetas <a> y </a> y puede ser una etiqueta de texto (párrafo, h1, ..), una imagen y también otros elementos (section, lista, ...); incluso podemos colocar más de un elemento, por ejemplo una imagen y un texto.

Otra forma de nombrar un hiperenlace es hipervínculo o hipertexto, y si estamos en un contexto que se habla de Internet también se les puede llamar simplemente enlace o vínculo.

A continuación vamos a ver el atributo más importante de la etiqueta <a>, el destino href, y luego veremos el resto de atributos: target, download.

para comprender mejor el tema de los hipervínculos, observa el siguiente video.

Atributo href. Tipos de referencias

Para entender este punto debemos explicar antes como se escriben las direcciones de páginas web o URL (Uniform Resource Locator). Por ejemplo https://www.aulaclic.es/excel-2016/index.htm

Una URL tiene tres partes: Protocolo, servidor y ruta.

Protocolo: usualmente es http:// para las páginas web, y https:// para las páginas web seguras, pero también pueden ser otros, como ftp:// (transferencia de ficheros) o mailto: (correo electrónico), como explicaremos más adelante.
Servidor/dominio: un servidor es un ordenador con unas características especiales conectado a Internet donde están guardadas las páginas web que vamos a visitar. Cada servidor tiene asignada una dirección física formada por números (por ejemplo 198.162.36.49). Para hacerlo más fácil a ese número se le asigna un nombre. El nombre del servidor debe registrarse como un dominio de internet por una entidad autorizada, que establece la relación entre el nombre del dominio y la dirección física del servidor. Puede ser cualquier nombre que cumpla las reglas establecidas en cuanto a tipos de caracteres que lo forman. Por ejemplo, aulaclic.es es un dominio registrado asociado a un servidor de Internet. Puede escribirse como www.aulaclic.es o aulaclic.es.
Ruta: es el camino dentro del servidor para llegar al archivo de la página web, por ejemplo excel-2016/index.htm indica que la página index.htm está dentro de la carpeta o directorio excel-2016. La ruta puede tener varios directorios.

Adicionalmente a una URL también se le pueden añadir parámetros separados por el signo ?, por ejemplo http://www.aulaclic.net/cursos/mostrar.php?id=29&texto=Cobol, pero eso no va a afectar a lo que vamos a explicar a continuación:

Existen diferentes formas de expresar una referencia a una página a través del atributo href.

Referencia URL absoluta:

La referencia es absoluta cuando contiene todas las partes de la URL. Es decir, protocolo, servidor y ruta completa.

Por ejemplo, https://www.aulaclic.es/excel-2016/informacion.htm

La única parte que puede omitirse es el nombre del archivo, si se omite se entenderá que es index.html, (o index.htm).

Por ejemplo, https://www.aulaclic.es tendrá el mismo efecto que https://www.aulaclic.es/index.htm

Y https://www.aulaclic.es/excel-2016 tendrá el mismo efecto que https://www.aulaclic.es/excel-2016/index.htm

Referencia URL relativa:

La referencia es relativa cuando se omiten ciertas partes de la URL, para construir la dirección absoluta se siguen unas reglas lógicas que permiten deducir las partes omitidas. Se llaman relativas porque dependen de la posición que ocupa dentro de la estructura de archivos el archivo que contiene la referencia relativa. Es decir, si cambiamos a otro directorio el archivo que contiene la referencia relativa, esta también cambiará. Una de las ventajas de las referencias relativas es que permiten escribir el atributo href de forma más corta.

Para ver estas reglas supongamos que tenemos la siguiente estructura de directorios y archivos en el servidor www.aulaclic.es

En esta estructura el directorio raiz-servidor representa al nombre del dominio del servidor. En nuestro ejemplo www.aulaclic.es

Tenemos los siguientes casos:

1.- En el mismo directorio: para escribir una referencia relativa a un archivo que se encuentra en el mismo directorio no hace falta escribir la ruta, sólo el nombre del archivo.

Por ejemplo, si la página que contiene el enlace es menu.htm en el directorio windows-10 y escribimos la referencia relativa href="escritorio.htm" tendrá el mismo efecto que si escribiésemos la referencia absoluta href="https://www.aulaclic.es/windows-10/escritorio.htm ".

2.- En un directorio inferior: para escribir una referencia relativa a un archivo que se encuentra en un directorio inferior hay escribir el nombre de ese directorio inferior una barra / y el nombre del archivo (o en su caso la ruta a partir de ese directorio).

Por ejemplo, si la página que contiene el enlace es informacion.htm en el directorio excel-2016 y escribimos la referencia relativa href="ejercicios/datos.htm" tendrá el mismo efecto que la ruta absoluta href="https://www.aulaclic.es/excel-2016/ejercicios/datos.htm".

3.- En un directorio superior: para escribir una referencia relativa a un archivo que se encuentra en un directorio superior hay escribir los caracteres ../, y para subir dos niveles ../../ y así sucesivamente.

Por ejemplo, si la página que contiene el enlace es datos.htm en el directorio ejercicios y escribimos la referencia relativa href="../excel-2016/informacion.htm" tendrá el mismo efecto que la referencia absoluta href="https://www.aulaclic.es/excel-2016/informacion.htm"

4.- En el directorio raiz: para escribir una referencia relativa a un archivo que se encuentra en el directorio raiz del servidor basta escribir una barra / y el nombre del archivo (o en su caso la ruta a partir de ese directorio).

Por ejemplo, si la página que contiene el enlace es datos.htm en el directorio ejercicios y escribimos la referencia relativa href="/index.htm" tendrá el mismo efecto que la referencia absoluta href="https://www.aulaclic.es/index.htm"

Otro ejemplo, si la página que contiene el enlace es datos.htm en el directorio ejercicios y escribimos la referencia relativa href="/excel-2016/informacion.htm" tendrá el mismo efecto que la referencia absoluta href="https://www.aulaclic.es/excel-2016/informacion.htm"

Omitir index.htm: Igual que sucedía en las referencias absolutas, si se omite el nombre del archivo, se entenderá que es index.html, (o index.htm).

Por ejemplo, para ir a la página por defecto del servidor desde cualquier página, basta con escribir la referencia relativa href="/" ya que tendrá el mismo efecto que href="https://www.aulaclic.es/index.htm"

Otro ejemplo, si la página que contiene el enlace es datos.htm en el directorio ejercicios y escribimos la referencia relativa href="/excel-2016" tendrá el mismo efecto que la referencia absoluta href="https://www.aulaclic.es/excel-2016/index.htm" (En este caso dará error ya que no existe el archivo index.htm en el directorio excel-2016).

Resumiendo podemos decir que las direcciones absolutas son más largas y claras, mientras que las direcciones relativas son más cortas y pueden llegar a resultar confusas, difíciles de interpretar.

Si cambiamos de lugar un archivo que contiene direcciones relativas, deberemos revisarlas, pues pueden dejar de funcionar.

Punto de fijación o de ancla: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello hay que añadir a la URL, #nombre_del_ancla. Y en el destino del ancla hay que añadir un id="nombre_del_ancla"

Por ejemplo, para ir al punto "Referencias URL relativa" de esta página :

Enlace al punto: Referencia URL relativa

Habrá que escribir:

<a href="https://sites.google.com/view/ava-tecnologiaeinformatica/cursos/grados-10/tercer-periodo/html#referencia_relativa">/>Enlace al punto: Referencia URL relativa</a>

Y en el párrafo de destino habrá que escribir el ancla:

En este caso podemos omitir el nombre del archivo ya que es el mismo que contiene el enlace, por lo tanto sólo habrá que escribir:

<a href="#referencia_relativa">/>Enlace al punto: Referencia URL relativa</a>

Atributo Target

El atributo target indica dónde se abre el enlace. Puede tener los siguientes valores:

_self se abre en la misma ventana en la que se encuentra el documento que contiene el enlace. Es el valor por defecto.

_blank se abre en una nueva ventana o pestaña. En los navegadores actualizados se abre en una nueva pestaña ya que es la recomendación a partir de HTML 5. Si queremos que se abra en una nueva ventana deberemos hacerlo con programación web (javascript, php, ...)

Por ejemplo: <a href="https://sites.google.com/view/ava-tecnologiaeinformatica/cursos/grados-10/tercer-periodo/html" target="_blank">Visita grado 10 en HTML</a>

Visita grado 10 en HTML

_parent se abre en el frameset padre. Este valor tiene sentido cuando estamos utilizando frameset, algo que ya no está recomendado.

_top se abre en la pantalla completa, fuera del frameset. Sólo cuando estamos utilizando frameset.

nombreframese abre en el nombre del frame.

Para practicar esto por ti mismo es conveniente que realices este Ejercicio paso a paso: Hiperenlaces

Ejercicio 1: Hiperenlaces

Desde el editor abre el archivo excel1.html que creamos en los ejercicios anteriores; o copia el siguiente código:

Para empezar a crear un menú en la cabecera de la página vamos a crear tres hiperenlaces a la página anterior, al índice y a la página siguiente. Suponemos que estamos en la primera página de un curso de Excel, por lo tanto, el enlace a la página anterior irá a la misma página en la que nos encontramos excel1.html (es decir, no hará nada). El enlace al índice ira a la página index.html, y el enlace a la página siguiente ira a la página excel2.html. Estás dos páginas no existen todavía. Como estás páginas estarán en el mismo directorio que la página que estamos modificando escribiremos la ruta en forma relativa. Para ello escribe el siguiente código detrás de la etiqueta <body>

<p><a href="excel1.html">Atrás</a> <a href="index.html">Índice</a> <a href="excel2.html">Adelante</a></p>

En el último párrafo : <p>© Tecnología e Informática</p>, añadiremos un enlace a la página web del curso de Tecnología e Informática en forma de dirección absoluta y añadiremos el atributo target para que el enlace se abra en una nueva pestaña. Escribe :

<p><a href="https://sites.google.com/view/ava-tecnologiaeinformatica" target="_blank"> © Tecnología e Informática</a></p>

Ahora crearemos un ancla. Si la página es muy larga puede ser interesante añadir un enlace al principio de la página. Para hacerlo, delante de la etiqueta <hr>, escribiremos un enlace desde una imagen de la siguiente forma <p><a href="#pagina.png"><img src="pagina.png"></a></p>
A continuación añadiremos el identificador del ancla en la etiqueta h1 de esta forma <h1 id ="pagina">Unidad 1. Introducción</h1>. De esta forma, al hacer clic en la imagen, iremos a esta etiqueta h1. El archivo icono_pagina.png lo encontrarás en la carpeta ejercicios
Puedes añadir unos párrafos de texto para ver mejor el efecto del ancla.
Pulsa en el menú Archivo y elige Guardar.

Actividad. Página web utilizando solo HTML

Objetivo: Los estudiantes crearán una página web sencilla utilizando HTML básico, aprendiendo la estructura de un sitio web.

Instrucciones:

Construir una página web sencilla que incluya:

Una página de inicio (index.html).
Encabezados y párrafos explicando un tema libre (puede ser uno de su interés o un tema que estés trabajando en clase).
Imágenes relacionadas al tema.
Listas (ordenadas o desordenadas).
Enlaces a otras páginas web.
Tablas simples.
Uso de estilos básicos en línea (colores, fuentes, etc.).

Tareas anexas:

a. Crear una carpeta donde se guarden los archivos HTML y las imágenes.

b. Probar la página en un navegador para verificar que funcione correctamente.

Criterios de evaluación:

Estructura HTML – 50%: Correcto uso de etiquetas HTML (<html>, <head>, <body>, etc.).
Contenido y organización – 25%: Presentación de la información y claridad en el contenido.
Uso de elementos multimedia – 15%: Inserción y correcto funcionamiento de imágenes y enlaces.
Creatividad y diseño – 10%: Creatividad en el uso de colores, fuentes y estilo general.

Nota: Se sugiere apoyarse en los videos contenidos en los siguientes enlaces

https://youtu.be/yJcoqOBklK4?si=HGEV1PSVPoREAd8f

https://youtu.be/9l1hicPrRNM?si=A__MobQC-Mz9NCKn

https://youtu.be/qDEoCxwJ21Q?si=oVjDuiWr8ExdM5e2

https://youtu.be/LP9MBIj-u_0?si=XMp7jrvrbfqxw4ml

https://youtu.be/C-BJWFWpJjA?si=fWyKSCGOXPdsUnqj

https://youtu.be/r78ua8t3MLw?si=z0j5i9XVGIQdWIip

https://youtu.be/PaoCTSK8V9M?si=f18n7Az5s0Nr_5ap

Referencias

https://www.aulaclic.es/html/

Page updated

Google Sites

Report abuse