Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Enlaces web
      Enlaces

      Las páginas web no son más que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino también el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es prácticamente imposible que una página web no posea uno de estos enlaces.

      Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la propia página o externos a otra página. La forma de construir unos y otros es muy similar como verás a continuación.

      arriba


       La etiqueta <A>

      La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre esa zona el navegador se dirigirá al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue:

      <A HREF="dirección de destino" target="destino">Pulsar para saltar</A>

      La dirección de destino será la página web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.

      El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:

      _blank
      Muestra la nueva página en una ventana nueva y sin nombre del navegador.
      _self
      Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una página

      En el apartado dedicado a los frames veremos algo más de este parámetro.

      arriba


       Las URLs

      Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internetestá identificado por esta dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores de nombre que transforman esas direcciones en nombres más humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier página en internet. En general tiene el siguiente formato:

      protocolo://máquina:puerto/ruta/fichero@usuario

      donde protocolo puede ser uno de los siguientes:

      http
      Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente usamos para ver las páginas en nuestro navegador.
      https
      Es similar al anterior pero con la particularidad de que la información viaja codificada mediante técnicas de encriptación.
      ftp
      Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo más normal es usasr unos programas al efecto denominados clientes de FTP.
      mailto
      Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de correo.
      news
      Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo.
      telnet
      Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad esté bien pensada.

      Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo habitual será usar URL del estilo http://servidor.dom/página.htm o similar.

      En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página verás que es

      https://www.espaciolatino.com/tutorhtml/tema6.html

      Pues bien si en esta página colocara un enlace en la forma

      <A href="tema3.htm">Tema 3</A>

      Esta dirección realmente apuntaría a

      https://www.espaciolatino.com/tutorhtml/tema3.html

      Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. Así este enlace

      <A href="/index.htm">Portada</A> 

      estaría apuntando a https://www.espaciolatino.com/index.htm.

      arriba


      Anclas

      Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:

      <A NAME="ancla">

      A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:

      <A HREF="#ancla">Ancla en esta página</A>

      Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en este ekemplo:

      <A HREF="enlaces.html#ancla">Ancla en la página enlaces.html</A>
      arriba


      Comunidad Virtual. Alojamiento gratis