Etiquetas básicas

Plantillas. Marcas. Imágenes. Listas, Tablas. Formularios. Enlaces

  • Enviado por: Laura
  • Idioma: castellano
  • País: España España
  • 5 páginas
publicidad
publicidad

ETIQUETAS BÁSICAS

Plantilla básica

<!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.0//EN”>

<HTML>

<HEAD>

<TITLE>

</TITLE>

<META NAME=”AUTHOR” CONTENT=” “>

<META NAME=KEYWORDS” CONTENT=””>

</HEAD>

<BODY>

</BODY>

</HTML>

TIPOS DE ETIQUETAS O MARCAS (TAGS)

  • Las etiquetas para dar formato al texto: tamaño de la letra, color, fuente, párrafo, etc.

  • Las que van a servir para mejorar el aspecto de los documentos web. Entre ellas están:

      • Insertar imágenes

      • Listas (ordenadas y desordenadas)

      • Tablas

      • Formularios

  • Las etiquetas para insertar enlaces: absolutos y relativos

  • A. Las etiquetas para dar formato al texto: tamaño de la letra, color, fuente, párrafo, etc.

    A.1.Tamaño del texto:

    <font size="1">Tamaño de letra 1</font>

    <font size="2"> Tamaño de letra 2</font>
    <font size="3">Tamaño de letra 3</font>
    <font size="4">Tamaño de letra 4</font>
    <font size="5">Tamaño de letra 5</font>
    <font size="6">Tamaño de letra 6</font>
    <font size="7">Tamaño de letra 7</font>

    A.2.Color del texto, enlaces y del fondo

    BACKGROUND="nombre de la imagen"
    Establece una imagen de fondo para toda la página.

    BGCOLOR="#RRGGBB"
    Define el color de fondo de la página.

    TEXT="#RRGGBB"
    Define el color del texto de la página.

    LINK="#RRGGBB"
    Define el color del texto de los enlaces.

    VLINK="#RRGGBB"
    Define el color del texto de los enlaces visitados.

    ALINK="#RRGGBB"
    Define el color del texto de los enlaces en el momento de picarlos.

    La expresión #RRGGBB indica el color en formato RGB. Todo color es una combinación de los tres colores básicos: rojo (R), verde (G) y azul (B). En este formato, cada uno de los colores puede expresesarse desde la ausencia de color (valor 0) a saturación de color (255). El problema es que hay expresar un número comprendido entre estos dos valores en forma hexadecimal, pero no es mucho problema. El valor mínimo (0) se expresa como 00, y el máximo (255) como FF. Así, las siguientes expresiones indican:

    FF0000: rojo máximo, verde nulo, azul nulo: ROJO

    00FF00: rojo nulo, verde máximo, azul nulo: VERDE

    0000FF: rojo nulo, verde nulo, azul máximo: AZUL

    000000: rojo nulo, verde nulo, azul nulo: NEGRO

    FFFFFF: rojo máximo, verde máximo, azul máximo: BLANCO

    FFFF00: rojo máximo, verde máximo, azul nulo: AMARILLO

    A.3.Párrafo

    <P> Texto </P>

    A.4.Salto de línea

    <BR>

    A.5.Insertar una línea horizontal

    <HR>

    A.6.Alinear el texto: izquierda, centro y derecha

    <P Align="left">Este párrafo está alineado a la izquierda</P>
    <P Align="center">Este párrafo está centrado</P>
    <P Align="right">Este párrafo está alineado a la derecha</P>

    También se pueden utilizar las siguientes:

    <CENTER> texto, imagen, tabla </CENTER>

    <DIV ALIGN="CENTER">texto, etc</DIV> Lo que hubiera entre el cierre se alinearía al centro.

    <DIV ALIGN="LEFT">texto, etc </DIV> Lo contenido se alinearía a la izquierda.

    <DIV ALIGN="RIGHT">texto, etc</DIV> Se alinearía a la derecha.

    A.7.Cabeceras: para títulos, secciones, apartados de página

    <h1>Cabecera tipo 1</h1>
    <h2>Cabecera tipo 2</h2>
    <h3>Cabecera tipo 3</h3>
    <h4>Cabecera tipo 4</h4>
    <h5>Cabecera tipo 5</h5>
    <h6>Cabecera tipo 6</h6>

    B.Las que van a servir para mejorar el aspecto de los documentos web. Entre ellas están:

      • Insertar imágenes

      • Listas (ordenadas y desordenadas)

      • Tablas

      • Formularios (no los veremos)

    B.1.Insertar imágenes

    <IMG SRC=”NOMBRE DE LA IMAGEN.JPG”>

    El nombre de la imagen y su extensión que indicará el formato de imagen. En la web los formatos que pesan menos son .jpg y .gif.

    B.2. Listas (ordenadas y desordenadas)

    Ordenadas (<OL>)

    <OL>

    <LI>

    <LI>

    </OL>

    Desordenadas (<UL>)

    <UL>

    <LI>

    <LI>

    </UL>

    Nota: habrá tantas etiquetas <LI> como líneas queramos insertar en nuestra relación.

    B.3. Tablas

    <TABLE BORDER=1> (comienzo de una tabla; border=1 indica el grosor de la barra. Si no ponemos nada, es decir, la etiqueta Table a secas, no se visualizará el borde de la tabla)

    <TR> (comienzo de una línea de la tabla)

    </TR> (Final de la línea)

    <TD> (Comienzo de una celda)

    </TD> (Final de una celda)

    <TH> (Comienzo de una celda de cabecera de tabla)

    </TH> (Final de una celda de cabecera de tabla)

    </TABLE> (Final de Tabla)

    NOTA: pondremos tantas etiquetas <TH> y <TD> como columnas y filas tenga la tabla

    C. Las etiquetas para insertar enlaces: absolutos y relativos

    C.1.Enlaces absolutos:

    Son aquellos que contienen la dirección completa de un documento. Si el documento reside en otra máquina, o si se necesita utilizar otro protocolo (ej. wais, ftp), se deberá utilizar un enlace absoluto.

    Para crear un enlace absoluto, basta con especificar la dirección en el atributo

    HREF de la directiva anchor:

    <A HREF="http://www.w3.org/">World Wide Web</A>

    El lector verá:
    World Wide Web

    C.2. Enlaces relativos:

    Si el otro documento reside en la misma máquina, y se usa el mismo protocolo, entonces se recomienda el uso de enlace relativo.

    Para crear un enlace relativo, basta con especificar la dirección relativa en el atributo HREF de la directiva anchor:

    <A HREF="index.html">Página inicial</A>

    Donde index.html es el nombre de archivo dado a la página web.

    C.3. Referencias locales

    Las referencias locales (anchors) son usadas como un destino opcional de un enlace. Permiten poner nombre a un punto particular dentro del mismo documento. Para crear una referencia local se usará el atributo NAME de la directiva anchor.

    Para crear una referencia local llamada ejemplo se hará de la siguiente forma:
    <A NAME="ejemplo">ejemplo</A>

    El usuario verá:
    ejemplo

    Como se puede apreciar, la referencia local es, probablemente, la misma que el resto del texto. Recordar que puede ser el destino de un enlace.

    Enlaces a referencias locales

    Si en el documento existen referencias locales, se podrán especificar enlaces directos a esos puntos. Para enlazar a una referencia local, simplemente se añade la referencia local a la dirección:
    #ejemplo

    (donde ejemplo es el nombre de la referencia local)

    Para enlazar a la sección de párrafos en el capítulo Un documento inicial, se usará el siguiente enlace:
    <A HREF="docuini#parrafos">Párrafos</A>

    El usuario verá:
    Párrafos

    Lo arriba indicado se leería como `la referencia local parrafos en el documento docuini'.

    El enlazado a una subsección dentro del mismo documento se haría:
    <A HREF="#locales">Referencias locales</A>

    El usuario verá:
    Referencias locales

    Documentación Informativa

    Publicidad y Relaciones Públicas

    Curso 2002/03