Cree su página Web (I) [primera parte]

¿De modo que desea publicar su tarjeta de visita electrónica en la World Wide Web? ¿Se trata de su propia página personal? Ningún problema, seguro que se lo pasará bien y comprobará que no es tan complicado como parece a priori.

ISBN: 2-912954-61-4
4.50 €

Índice

• Breve resumen de Internet y la World Wide Web
• Estructura y componentes básicos de la World Wide Web
• HTML, el lenguaje de la WWW
  • ¿Para qué aprender HTML?
• Cómo entrar en la red: visión general
• Atractivas direcciones Web con dominios propios
• La elección del nombre; los nombres de dominio y la ley
  • Coste cero
• Homepage: una pequeña confusión conceptual
  • Planificación
  • La carpeta del proyecto
• Creación del primer archivo con el Bloc de notas
  • CReación de un nuevo documento HTML
• Crear y configurar un documento HTML
  • Títulos
  • Negrita, cursiva y subrayado
  • Párrafos y alineación de párrafo
  • Creación de una línea nueva
  • Enumeraciones y listas
  • Una línea horizontal
  • El truco para los espacios en blanco
• Resumen de las etiquetas HTML más importantes
• Gráficos en los documentos HTML
  • GIF, JPEG o PNG
  • Programas gráficos
  • Incluir gráficos en el documento HTML
  • Anchura y altura
  • Texto alternativo
  • Cuanto más pequeño, mejor
• Uso de gráficos como fondo
  • Gráfico en mosaico
  • Texturas como papel tapiz
• Hipervínculos: anclajes y referencias internos y externos
  • Referencias a páginas propias
  • Referencias a páginas en subdirectorios
  • Hipervínculos externos
  • Abrir nueva ventana
  • Referencias dentro de la página
  • El vínculo al correo electrónico
  • Gráficos como hipervínculos
  • Crear enlaces a archivos
  • Enlaces a grupos de noticias
  • Información sobre hipervínculos
  • Los comandos HTML más importantes para los enlaces
• Mapas de imagen, los gráficos sensibles
• Colores para enlaces y fuentes
  • Mezclar colores hexadecimales
  • Los atributos de la etiqueta body
• Opciones avanzadas de configuración de la fuente
  • Formato avanzado de caracteres con la etiqueta FONT
  • La etiqueta PRE para formato fijo
  • Listas avanzadas
  • Texto en movimiento (marquee)
  • Texto que parpadea
  • Líneas
• Las tablas como herramientas para la estructuración de la página
  • Tablas sencillas
  • Mostrar bordes
  • Alineación de tablas
  • Margen de celdas: cellpadding
  • Espaciado entre celdas: cellspacing
  • Dividir celdas
  • Colores para tablas
• Cómo crear sitios atractivos: uso de tablas
  • Alineación exacta: align y valign
  • Truco 17: ajustar el tamaño de las tablas a la ventana del navegador
• Crear y evaluar formularios de respuesta
  • Cuadros de texto
  • Botones de opción y casillas de verificación
  • Enviar y restaurar
  • Recibir datos por correo electrónico
• Hojas de estilos: las plantillas de formato de HTML
  • La sintaxis de las hojas de estilos
  • Otros atributos de las hojas de estilos
  • Creación de clases
  • Referencias a hojas de estilos externas
  • Hojas de estilo ‘en cascada’
  • Estilo inline
  • Formato de carácter y párrafo libres
• Marcos, porciones de ventana en la página Web
  • Planificación de los marcos
  • División por conjunto de marcos
  • Trucos y consejos sobre los marcos
  • Referencias externas al conjunto de marcos
• Creación de páginas con Word y StarWriter
  • Conversión de documentos existentes
  • Creación de archivos HTML
  • Código fuente en Word y StarWriter
  • Crear hipervínculos externos
  • Anclajes y referencias dentro de la página
  • Colores y texturas de fondo
  • Gráficos
  • No se olvide: texto alternativo
  • Cómo incorporar tablas
  • Colores de sombreado
  • Mapas de imagen en StarOffice
• Efectos, energía y dinamismo para su página personal
  • Libro de visitas, chat y contadores
  • Enlaces que cambian de color
  • Botones dinámicos
  • Script para un ticker
  • Menús desplegables
• Sonidos, multimedia y animaciones
• Cómo dar de alta la página en un buscador
  • Cómo darse de alta en Yahoo y Ozú
  • Alta en Google
  • Introducción automática
• META-tags como ayuda para los buscadores
• Publicación de la página en Terra y otros servidores
  • Demasiado.com y Espacio.ya.com
  • Cómo trabajar con WS_FTP
• Otros trucos y consejos sobre los gráficos
  • El truco del portapapeles
  • Fondo gráfico transparente
  • El gráfico se descarga lentamente
• Herramientas y recursos Web recomendados
• El Acceso telefónico a redes de Windows
• Anexo: introducción a Homesite

Enlaces de interés

Todas las tarifas telefónicas a la vista
ES-NIC: registro de dominios .es
Map Maker Lite
Staroffice, la suite ofimática gratuita de Sun
Guía de buscadores temáticos
Sitio web de Jasc, los creadores de Paint Shop Pro
Sitio web de Ipswitch, los creadores de WS_FTP

Espacio gratuito para tu página personal:
www.gratisweb.com/,
www.geocities.com
www.demasiado.com
espacio.ya.com
www.tripod.es
come.to

Proveedores gratuitos de acceso a Internet:
EresMas
Navegalia
JazzFree
Terra
Wanadoo

Contadores:
contador.hispalab.net
www.contadorwap.com
www.aaddzz.com/pages/counters

Estadísticas:
es.nedstat.net
www.ipstat.com
www.ciberstats.com

Libros de visitas:
www.guestbook.de
www.theguestbook.com
www.lpage.com

Preguntas más frecuentes

P: No se muestran los gráficos de mi página. En lugar de ello, aparecen pequeños puntos.

R: En ese caso, no has colocado bien los enlaces. Tienen que ser enlaces relativos, y en la situación ideal los gráficos deberían encontrarse en la misma carpeta que el archivo HTML. Consulta la página 11 del cuaderno. Comprueba también si el nombre del gráfico está escrito igual que el enlace al mismo. Los servidores UNIX distinguen entre mayúsculas y minúsculas, mientras que los ordenadores con Windows no lo hacen.

P: El diseño de mi página en el navegador no es tal como lo esperaba.

R: No olvides que el lenguaje HTML normalmente no permite organizar la página con una precisión de píxeles. Originariamente, este lenguaje se pensó únicamente para mostrar la estructura lógica de un documento. Puedes “hacer trampas” colocando tablas y estableciendo la anchura y la altura con toda precisión mediante width y height. Consulta el capítulo que habla en detalle sobre las tablas. Sin embargo, no esperes que todos los navegadores muestren el resultado a la perfección.

P: Los enlaces no funcionan

R: Vuelvo a remitirme a la distinción entre mayúsculas y minúsculas. En Windows, no es importante si escribimos en mayúsculas o minúsculas. En el caso de los servidores Unix de la red, sí que importa si el archivo se llama index.html o Index.html o index.Html. En caso de duda, no se mostrará el documento. Por eso te recomiendo que, en general, utilices siempre minúsculas. Además, procura no colocar enlaces absolutos del tipo C:/Homepage/index.html.

P: El MARQUEE (marquesina) no funciona.

R: Desgraciadamente, esta etiqueta solamente es compatible con Microsoft Internet Explorer, desde la versión 2. Netscape Navigator (incluso la última versión del navegador) se niega a ejecutar el comando. Y eso a pesar de que la etiqueta MARQUEE llegó a pertenecer al estándar HTML oficial.

P: ¿Cómo puedo hacer que el texto de la marquesina se desplace de izquierda a derecha?

R: Puedes hacerlo utilizando esta instrucción: direction=right. Si no se indica lo contrario (de forma predeterminada), el texto se desplaza de derecha a izquierda. He aquí un ejemplo para la marquesina con cambio de dirección:
<marquee direction=right>Este texto se desplaza de izquierda a derecha</marquee>

P: ¿Cómo se puede incluir una breve información en los enlaces de texto?

R: Es posible incluir una pequeña información a tus enlaces de texto: ¿Quieres llegar a la página de Terra? Utiliza el atributo title. Puedes escribir el enlace así:
<a title="¡Haz clic aquí!" href="http://www.terra.es">¿Quieres llegar a la página de Terra?</a>
Aquí he marcado el atributo esencial en negrita. Sin embargo, este truco no funciona con el navegador Netscape, a menos que utilices la versión 6.

P: ¿Qué puedo hacer para que, al hacer clic en un enlace de una dirección de e-mail, se rellene automáticamente el campo de asunto?

R: Deberás incluir lo siguiente en el enlace de la dirección de e-mail (he marcado la parte importante en negrita):
<a href="mailto:info@pc-cuadernos.com?subject=Consulta sobre el pedido">
Si quieres probar si funciona, haz clic en Consulta sobre el pedido.

P: ¿Cómo se incluye un sonido de fondo para el navegador Netscape?

R: Existe un comando que funciona tanto con MS IE como con Netscape. Debe colocarse entre las etiquetas <body> y </body> y tiene este aspecto:

<EMBED SRC="ejemplo.mid" AUTOSTART=true HIDDEN=true LOOP=true VOLUME=50 WIDTH=144 HEIGHT=60>

o

<EMBED SRC="ejemplo.mid" AUTOSTART=true HIDDEN=false LOOP=true VOLUME=50 WIDTH=144 HEIGHT=60>

En el primer caso, no se mostrará ningún panel de control (HIDDEN=TRUE). AUTOSTART significa que la reproducción comenzará automáticamente y LOOP determina si la canción tiene que sonar de forma indefinida (TRUE) o solamente una vez (FALSE). Gracias a Jens Lang por este consejo.

P: ¿Dónde puedo conseguir un chat para mi página Web?

R: ¿Has probado en Inforchat? También puedes introducir las palabras clave “chat gratis” en cualquier buscador para encontrar más opciones.

P: ¿Cómo puedo hacer que los enlaces no aparezcan subrayados?

R: Para ello, sólo tienes que definir una hoja de estilo y establecer los parámetros necesarios para mostrar los enlaces sin subrayado. Existen cuatro “estados” posibles para los enlaces, de los cuales seguro que a:hover es el más interesante (hace referencia a cuando pasamos por encima del enlace con el ratón). a:link es el enlace en estado “normal”, a:active es el link mientras hacemos clic en él y a:visited hace referencia a un enlace ya visitado. He aquí el código necesario:

a:link { text-decoration: none }
a:hover { text-decoration: none }
a:active { text-decoration: none }
a:visited { text-decoration: none }

P: ¿Cómo puedo aplicar formato al texto de las tablas sin tener que establecer el estilo de cada celda?

R: Puedes hacerlo usando hojas de estilo. Observa el siguiente ejemplo prestando especial atención a las etiquetas th (encabezado de la tabla) y td (celda).

<HTML> 
<HEAD> 
<TITLE>Tablas</TITLE> 

<STYLE TYPE="TEXT/CSS"> 
<!-- 
th {font-size: 14pt; font-family: Arial; color: red } 
td {font-size: 12pt; font-family: Arial; color: blue } 
--> 
</STYLE> 

</HEAD> 

<BODY BGCOLOR="#FFFFFF"> 

<TABLE BORDER> 
<TR> 
<TH> Celda 1 (encabezado)</TH> 
<TH> Celda 2 (encabezado)</TH> 
<TH> Celda 3 (encabezado)</TH> 
</TR> 
<TR> 
<TD> Celda 1 en fila 2</TD> 
<TD> Celda 2 en fila 2</TD> 
<TD> Celda 3 en fila 2</TD> 
</TR> 
<TR> 
<TD> Celda 1 en fila 3</TD> 
<TD> Celda 2 en fila 3</TD> 
<TD> Celda 3 en fila 3</TD> 
</TR> 
</TABLE> 

</BODY> 
</HTML>