informaticaPC

Tutorial de HTML

Configurar la página web (I)

Definir URL base del sitio WEB

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.

Definir estilos CSS

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>

Descargar ejemplo

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>

Descargar ejemplo

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.

Enlazar con archivos externos

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).

Descargar ejemplo

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:

Descargar ejemplo

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).

Favicon en una página web

Insertar código JavaScript en una página web

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.

Descargar ejemplo

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:

Descargar ejemplo

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:

Descargar ejemplo

En nuestro curso de JavaScript te enseñamos a usar dicho lenguaje de programación.

Primera página Anterior Anterior Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso