<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Curso HTML, DHTML y CSS
Este es un Tutorial que pretende conjuntar lo que se sabe hasta hoy (aunque eso es un poco presuntuoso) del lenguaje HTML, del HTML dinámico (DHTML) y de hojas de estilo (CSS-1). Para comentarios y sugerencias podéis darme un .
Las siglas HTML significan "Hipertext Mark-up Language" que es algo así como lenguaje estructurado de hipertexto.
Un hipertexto es un texto en el cual podemos colocar enlaces a otros sitios, de modo que pulsando un botón "navegaremos" por otras páginas. Además, en ellas podemos colocar sonido, vídeo, imágenes,... con lo que quedan "interactivas" y "multimedia".
El lenguaje html es un lenguaje basado en etiquetas, las cuales se abren con un "<" y se cierran con ">". Lo que ponemos dentro lo interpreta nuestro navegador y lo muestra en la página.
Tenemos etiquetas de comienzo, por ejemplo <B> y de cierre, por ejemplo </B>.
Es independiente poner las etiquetas con mayúsculas o minúsculas pero aquí las pondremos con mayúsculas para que resalten algo más.
Algunas etiquetas llevan dentro lo que llamamos atributos, con valores que dependerán del tipo usado. Por ejemplo la etiqueta <P> puede llevar ALIGN que acepta valores como center y otros. De este modo la etiqueta queda como <P ALIGN=center>. Casi todos los atributos tienen un valor por defecto (predeterminado) que es el que toma el navegador cuando no ponemos el atributo. Por ejemplo, las líneas horizontales tienen como etiqueta <HR>, un atributo es WIDTH (ancho); si no ponemos el atributo la línea tendrá un ancho del 100%, es decir, el valor de WIDTH por defecto es 100%. Es absurdo, pues, poner <HR WIDTH=100%>, sería como poner <HR> solamente.
Para hacer este curso sólo será necesario tener un navegador (lógicamente, puesto que es donde veremos como queda la cosa) y el bloc de notas, que será donde escribamos el código.
- Lo que se escriba en el bloc quedará como:
<Ejemplo>
- Y lo que se verá en el navegador:Ejemplo
La estructura básica de todo documento web tiene:
- Una cabecera <HEAD>: donde va el título y algunas cosas más que no se ven en la página, y su cierre </HEAD>.
- Un cuerpo <BODY>: donde irá lo que se verá, y su cierre </BODY>.
- Y, además, una etiqueta al principio de todo <HTML> y otra al final de todo </HTML>.
Parece ser que ya no hacen falta pero para los que empezamos con esto hace ya algún tiempo, es como un sacrilegio no ponerlas, además, así identificamos las partes, lo que es importante a la hora de hacer modificaciones.
Veamos como queda la estructura básica:
|
<HTML>
<HEAD> ..... </HEAD> <BODY> ..... </BODY> </HTML> |
Obviamente en el navegador, con esto sólo, no veremos nada ya que no hemos hecho más que la estructura, pero vacía.
Ahora es el momento de guardar lo que hemos hecho. Recuerda que debes hacerlo con la extensión htm o html para verlo.
Si usáis un programa para hacer documentos web veréis que se añade automáticamente una etiqueta, al principio de todo, encima de <HTML> incluso:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Ya los navegadores permiten que no se use. Lo que hace es decir qué tipo de documento es el que viene a continuación, que "ESTANDAR" del lenguaje usamos (la versión, vamos).
El más habitual es el de arriba que indica que se cumple el estandar 4.01 pero que hay elementos de otros estándares (versiones), que es lo más normal.
Pero hay otros:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">: cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables (aunque no sabemos cuáles son estos).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">: definición de marcos que cumple el estándar 4.0
El nuevo lenguaje llamado XHTML (extensible html) tiene unas normas que será bueno recordar aquí por si acaso:
- Todas las etiquetas se cierran. Veremos como en HTML no hacía falta cerrar, por ejemplo, <P>. Aquí sí va a hacer falta: </P>.
- Hay que tener cuidado con el anidamiento de las etiquetas, cosa que no hacía falta antes: no se puede poner <B> <H2> </B> </H2> sino <B> <H2> </H2> </B>.
- Los nombres de etiquetas y atributos en minúscula: <body> en vez de <BODY>.
- Los valores de los atributos van entrecomillados: <img align="300"> y no <img align=300>.
- No existen atributos sin valor, es decir, no podremos poner CHECKED sin un valor.
Para publicar una serie de elementos (páginas, gráficos, textos comprimidos,...) es necesario tener contratado un servicio que lo ofrezca. Si lo tienes tendrás también una serie de datos referentes a tu correo electrónico como el Login (usuario), el Password (contraseña) y los datos para poder publicar cosas como el Host Name (nombre de tu servidor) y te tienen que decir también como puedes acceder a tu sitio, es decir la dirección de tu página en la red.
En el caso de tener el servidor del CNICE (profesorado) es sencillo ya que puedes subir tus cosas con el explorador de Windows escribiendo el nombre de tu servidor con el protocolo FTP:
ftp://roble.cnice.mecd.es
Ahora te pedirá nombre de usuario (login) y contraseña (password) y podrás acceder. Crea un directorio llamado public_html y dentro de él mete las cosas.
También puedes acceder directamente poniendo en la barra de dirección lo que sigue, siempre que alber123 sea tu login y martin34 tu contraseña.
ftp//alber123:martin34@roble.cnice.mecd.es
La dirección donde encuentras tus cosas será algo así:
http://roble.cnice.mecd.es/alber123/nombre.htm
Si eliges como página principal (a partir de la cual te mueves) el nombre de index.html podrás suprimir lo último y quedará:
http://roble.cnice.mecd.es/alber123
Con otros servidores hay que consultar. Por ejemplo, wanadoo te da espacio y accedes con:
ftp://ftp.wanadoo.es
Siendo tu dirección algo como http://perso.wanadoo.es/....
