|
|
By JoMoLo
Actualización: 1-04-2012
Contenido
Líneas
básicas para comenzar con nuestra página web en blanco
Aplicar
una imagen o un color de fondo
Decidir
el color de los “links”
Crear
un enlace ó vínculo ó link ó hiperlink ó …
Usar
como enlace una parte concreta de una imagen
Como
hacer que aparezca un icono automático al crear un acceso directo a nuestra
página web
Insertar
scripts en el código HTML
Solucionar
problema de acentos y caracteres españoles
Redireccionar
automáticamente a otra página web
Líneas básicas para comenzar con nuestra página web en blanco
Para comenzar con
nuestra página web escribiremos las siguientes líneas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título de nuestra WEB</title>
</head>
<body>
</body>
</html>
Aplicar una imagen o un color de fondo
Podemos tomar la imagen de una dirección web concreta
<body background="http://www.lugardondeestelaimagen.es/imagen.jpg">
</body>
Podemos tomar la imagen de la misma ubicación en la que
tenemos nuestra pagina html
<body background="imagen.jpg">
</body>
Si estamos trabajando en local, la sintaxis seria la siguiente
<body background="file:///C|/Mis imagenes/NombreImagen.jpg">
</body>
Si queremos simplemente un color de fondo, usaremos el
valor hexadecimal del color
<body bgcolor=”#000000”>
</body>
Si se trata de un color básico, podemos referirnos a el con su nombre en ingles
<body bgcolor=”black”>
</body>
Decidir el color de los “links”
Podemos decidir el color que queramos que tengan los textos que actúan como enlaces (vínculos).
<body link="#990000" vlink="#CC9900" alink="#00CCFF">
</body>
Descripción:
Link = color del link
Vlink = color del link cuando ya se ha utilizado
Alink = color del link cuando se activa (al pincharlo con el ratón)
Incorporar cabeceras
Las cabeceras son
títulos a los que se puede hacer referencia. Pueden tener tamaño y prioridad
del 1 al 6 (H1=Mayor, H6=Menor)
<H1>Este es mi título principal</H1>
Incorporar texto
Para incorporar
texto utilizaremos las siguientes etiquetas
<p>Este es texto normal
sin formato</p>
<p>Este es texto con
diferentes formatos: <b>negrita</b> - <i>cursiva</i> - <u>subrayado</u></p>
Para cambiar el
tipo de letra, tamaño y color usaremos:
<font face="el nombre de la fuente" size="tamaño (del 1 al 7)" color="el color en hexadecimal ó nombre preestablecido">Nuestro texto</font>
Ej.:
<font face="verdana" size="4" color="oranje">Nuestro texto</font>
<font face="tahoma" size="7" color="#000000">Nuestro texto</font>
Alineación del texto (left,right,center ó justify)
<p align="left">texto alineado a la
izquierda</p>
Otras etiquétas
útiles
<br>
.- Salto de línea
Listados
Para incorporar
listados usaremos la siguiente sintaxis
<ul
type="circle">
<li>Opción 1 del
listado</li>
<li>Opción 2 del
listado</li>
<li>Opción 3 del
listado</li>
</ul>
En el ejemplo anterior, cada una de las
opciones mostrará un circulito en el inicio de la línea.
Los tipos (type=) de viñeta posibles son: circle, disc ó square.
Listados numerados
Si queremos
incorporar listados donde cada línea comience por un número o una letra
siguiendo una secuencia, los haremos de la siguiente manera
<ol
type="1" start="1">
<li>Opción 1 del
listado</li>
<li>Opción 2 del
listado</li>
<li>Opción 3 del
listado</li>
</ol>
En el ejemplo anterior, cada una de las
opciones mostrará un número correlativo en el inicio de la línea, comenzando
por el número 1 (start="1").
Los tipos (type=) de numeración posibles son: 1, a, A, i, ó I.
Listados de definición
Se trata de listados donde las líneas se sitúan en
diferentes niveles de desplazamiento, como si incorporásemos tabulaciones al
inicio de la línea.
<dl>
<dd>1 Primera opción
<dl>
<dd>1.1 Segunda opción desplazada hacia la izquierda
<dl>
<dd>1.1.1 tercera opción más
desplazada hacia la izquierda
</dl>
</dl>
</dl>
Líneas separadoras
El siguiente ejemplo genera una línea con largura del 75% de la página, alineada a la izquierda, anchura de 3 pixeles y color negro
<hr width="75%" align=”left” size=”3” color=”#000000”>
Comentarios del programador
Para añadir comentarios usaremos el siguiente tag
<!--Esto son comentarios del programador-->
Incorporar una imagen
Para incorporar
una imagen usaremos la siguiente sintaxis
<img src="imagenes/Mi Imagen.jpg" width="200"
height="250"
border="10"
align=”left” alt=”Texto descriptivo”>
Descripción de
las opciones (las medidas se expresan en pixels)
Width = anchura
Height = altura
Border = borde opcional que se mostrará alrededor de la imagen
Align
= alineación con respect al texto. Valores: left,
right, top, middle, bottom.
Alt = texto descriptivo de la imagen, que aparecerá al pasar el ratón por encima.
Crear un enlace ó vínculo ó link ó hiperlink ó …
Para hacer que un texto se convierta en un enlace usamos la siguiente sintaxis
<p><a href="http://www.elvalsdelmillonario.es/imagenes/sinimagen.jpg">Este es el
texto-link que vemos en la web</a></p>
Para hacer que una imagen se convierta en un enlace usamos la siguiente sintaxis
<a href="http://www.google.com"><img src="imagenes/Mi Imagen.jpg"
width="400" height="400"></a>
Para que
el enlace se abra en una nueva ventana ó pestaña, usaremos target=”_blank “
<p><a href="http://www.google.es" target=”_blank”>Este es el texto-link que vemos en la web</a></p>
Si
queremos crear un enlace que apunte a un lugar concreto de nuestra propia
página, haremos lo siguiente:
1.-En el
lugar al que queremos ir, añadimos una etiqueta con un nombre
<a
name=”PrincipioDePag”></a>
2.-Insertamos
el link usando la siguiente sintaxis
<a
href=”#PrincipioDePag”>Pincha aquí
para ir al principio de la página</a>
Usar como enlace una parte concreta de una imagen
Si
queremos crear un enlace en una zona definida de una imagen usaremos los tags <map> y <area>
Ejemplo:
<p><img
src="http://www.elvalsdelmillonario.es/imagenes/sinimagen.jpg" width="900"
height="150"
BORDER=0
USEMAP="#estrella" /></p>
<MAP NAME="estrella">
<AREA SHAPE=CIRCLE
COORDS="480,75,47" HREF="http://www.google.es"
ALT="Vamos a Google">
</MAP>
Descripción:
1-Dentro
de la etiqueta imagen <img>
añadimos la propiedad usemap y le damos un nombre de referencia
que utilizaremos posteriormente (con almohadilla # delante)
2-Abrimos
una etiqueta <map> y le añadimos la propiedad name con el valor del nombre de referencia
que hemos usado en usemap
3-Abrimos
una etiqueta <area> donde definiremos la zona de la
imagen que queremos que se comporte como enlace.
-En la propiedad shape indicaremos la forma que ha de tener la zona sensible. Podemos usar los
siguientes valores:
a-circle .- circulo
b-rect
.- rectángulo
c-poly .-
polígono
-En la propiedad coords indicaremos las coordenadas, dentro
de la imagen, donde se ha de colocar la zona sensible
a-circle .- coordenada x del centro del circulo, coordenada y del centro del circulo, tamaño del radio
b-rect .-
coordenada x de la esquina superior
izquierda, coordenada y de la
esquina superior izquierda, coordenada x
de la esquina inferior derecha, coordenada x
de la esquina inferior derecha
c-poly .-
coordenada x, coordenada y (de cada uno de los vértices del
polígono)
-En href indiceremos el destino del enlace y en alt el texto que mostrará el ratón al
pasar por esa zona
NOTA:
Podemos repetir varias etiquetas <area> para definir diferentes zonas de una misma imagen que apunten a
diferentes enlaces.
Crear una tabla
Para crear una tabla
sencilla en nuestra página web insertaremos el siguiente código
(este ejemplo nos crea una tabla con 3 filas y 2 columnas)
<table width="600" height ="400" border="5" align=”center” Background="Mi Imagen.jpg” bgcolor="#ffaabb" bordercolor="#ffffff" cellpadding="1" cellspacing="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Descripción:
<table> … </table>
indican el principio y final de la tabla
<tr> … </tr> es una fila
<td> … </td> es una celda (columna) de esa fila
son espacios, que sustituiremosr por el texto
o imagen que queramos en cada celda
Parámetros:
Los parámetros son
opcionales, y su significado es el siguiente
width= indica la
anchura de la tabla en pixeles
height= indica la
altura de la tabla en pixeles
border= es el
grosor de los bordes. Si indicamos “0”, no se mostrarán.
align= Indica la
alineación de la tabla con respecto a la página. Valores: center, left, right
Background= Permite colocar una imagen como fondo de la
table
bgcolor= indica el
color de fondo de la tabla. Podemos usar valor hexadecimal o nombre establecido
bordercolor= indica el
color de los bordes de la tabla. Podemos usar valor hexadecimal o nombre
establecido
cellpadding= es el
espacio que queremos entre los bordes de la celda y el contenido de la misma.
Valor en pixeles.
cellspacing= es el
espacio entre los bordes de la tabla y los bordes de las celdas. Valor en
pixeles.
Alinear contenido
Podemos alinear
cualquier contenido (texto, tablas, imágenes…) mediante la etiqueta div y los valores center, left, right y justify
<div align="center">
… contenido …
</div>
Como hacer que aparezca un icono automático al crear un acceso directo a nuestra página web
Para que al
agregar una página web a favoritos aparezca con un iconillo al lado, has de
incorporar la siguiente línea en la página web:
<head>
<link rel="Shortcut
Icon" href="nombreicono.ico" type="image/x-icon" />
</head>
Insertar scripts en el código HTML
Para insertar un
script en nuestra página Web, usaremos la siguiente sintaxis (ejemplo para vbs)
<script type="text/vbscript">
msgbox "hola"
</script>
Solucionar problema de acentos y caracteres españoles
Si nos
encontramos que nuestros acentos o eñes se convierten en cuadrados u otros
signos raros, añadiremos este metadato en la <head>:
<META
http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Redireccionar automáticamente a otra página web
Si queremos que
al abrir nuestra página, esta nos redireccione de
forma automática a otra, añadiremos este metadato la <head>:
<META HTTP-EQUIV="REFRESH"
CONTENT="0;URL=http://www.google.es">