Si necesitamos definir la URL base de nuestro sitio en el servidor web usaremos la etiqueta <base>, que cuenta dos atributos:
- href: define la URL base del sitio web.
- target: indica dónde deben abrirse los enlaces (puede tomar los mismos valores que el atributo target de los hiperenlaces)
Por ejemplo, si tenemos un dominio 'www.mi-sitio-web.com' que apunta a nuestro sitio web, y en la carpeta o directorio principal de éste hay un subdirectorio llamado 'imagenes' en el que guardamos todas las usadas en nuestras páginas web, definiendo el atributo href de la etiqueta <base> del siguiente modo no sería necesario escribir cada vez la ruta de dicho directorio en la etiqueta <img>:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<base href="http://www.mi-sitio-web.com/imagenes/" />
<base target="_blank" />
</head>
<body>
<img src="imagen.jpg" />
<a href="pagina2.html">Ir a la otra página</a>
</body>
</html>
Si no usáramos <base> y la imagen se cargase desde una página web que se encuentra en el directorio principal del sitio web habría que poner:
<img src="./imagenes/imagen.jpg" />
Si se intentara cargar desde un directorio que está al mismo nivel que 'imagenes' sería:
<img src="../imagenes/imagen.jpg" />
Según el ejemplo, si hiciéramos clic en el enlace éste se abriría en una ventana o pestaña nueva (dependiendo del navegador usado), ya que es lo que indicamos en el atributo target.
Con la etiqueta HTML <style> podremos definir estilos CSS en la misma página (los veremos más a fondo en nuestro curso de CSS).
En el ejemplo definimos un estilo que mostrará en color azul el texto que haya en etiquetas <p>:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<style type="text/css">
p {color:blue}
</style>
</head>
<body>
Esto es un texto libre.<br/>
<p>Este texto está en un párrafo y será mostrado en color azul.</p>
</body>
</html>
Con casi todas las etiquetas HTML podemos usar el atributo (no etiqueta) <style> desde la que podemos asignarles directamente estilos CSS:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
</head>
<body>
<p style="color:red">Este texto está en un párrafo y será mostrado en color rojo.</p>
</body>
</html>
En lugar de poner el código CSS en la misma página web es recomendable crear un archivo de Hojas de Estilos CSS y enlazarlo con la etiqueta <link>, que veremos a continuación.
La etiqueta <link> nos permite enlazar archivos externos con nuestra página web, usándose comunmente con archivos de Hojas de Estilos CSS.
En el atributo href indicamos el nombre del archivo. Observa también los atributos rel (indica el tipo de relación entre la página y el archivo enlazado) y type (informa de que el tipo de archivo enlazado es una Hoja de Estilos CSS).
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
¡ Hola mundo !
</body>
</html>
También se suele usar para incluir un Favicon, que es un pequeño icono que se muestra en la barra de direcciones de algunos navegadores web:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
¡ Hola mundo !
</body>
</html>
Hay que tener en cuenta que no todos los navegadores web muestran los favicon, como por ejemplo Google Chrome (en el momento de confeccionar el presente curso).
Con la etiqueta HTML <script> incluiremos código JavaScript en nuestras páginas web:
En caso de que el navegador web no soporte JavaScript o lo tenga desactivado, podremos usar la etiqueta <noscript> para mostrar un texto informando de ello.
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<script type="text/javascript">
function dimeHola() {
alert('hola');
}
</script>
<noscript>Su navegador web no soporta JavaScript o no se encuentra activado</noscript>
</head>
<body onload="dimeHola();">
¡ Hola mundo !
</body>
</html>
Hemos creado una función en JavaScript que muestra un cuadro de diálogo con un mensaje, e indicado en la etiqueta <body> que se debe ejecutar al cargarse la página web.
También podemos insertar código JavaScript en el cuerpo de una página web del siguiente modo:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
</head>
<body>
Curso de JavaScript
<script type="text/javascript">
<!--
document.write("Esta es una línea.<br />");
document.write("<p>Esta es la última línea.</p>");
-->
</script>
</body>
</html>
Fíjate en que el texto se puede intercalar con etiquetas HTML, y observa también que el código JavaScript se ha escrito en un comentario HTML con <-- ... -->: esto algo opcional pero se recomienda para que en caso de que la página web sea cargada en un navegador que no soporte JavaScript, no se muestre el código.
No es recomendable incluir el código JavaScript en la página web, sino ponerlo en archivos externos (normalmente con extensión .js) y enlazarlos del siguiente modo:
<html>
<head>
<title>Página WEB de ejemplo: configurar la página</title>
<script src="../base_js/lib.js" type="text/javaScript"></script>
</head>
<body>
¡ Hola mundo !
</body>
</html>
En nuestro curso de JavaScript te enseñamos a usar dicho lenguaje de programación.
