Un Poquitín de HTML
Vamos a ver más cosillas. Si tenéis abierta la ventana de la página principal (la podéis abrir haciendo doble clic en ella desde la ventana "SITIO") podéis ver que abajo a la derecha hay un icono parecido a esto " ". Si pulsais en él veréis una nueva ventana donde os presenta el código HTML que corresponde a la página creada. Pulsa en ese icono y veréis ese código.
En un principio pensaba dejar las explicaciones HTML aparte, por si a alguno no le interesaba, pero cada día recibo más y más preguntas vuestras cuya única solución pasa por meter mano a ese código, por lo tanto, lo siento, pero tendréis que tragaros también las explicaciones de HTML. Venga, no quejaros miedicas, que eso no es ná, je je je je. Veréis como me lo agradecéis el día de mañana cuando queráis meter un contador, o un banner, o publicidad, o un enlace, o lo que sea. Hace falta para todo, bueno, a menos que no te importe tener fallos en la página, que no lo creo, verdad? Je je. pues adelante mis valientes.
Al pulsar en ese icono que os decía veréis el código HTML. En la página recien creada, el código, más o menos es el siguiente:
<hmtl>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
Esta es mi página principal.
</body>
</html>
Os explico lo que significa.
Lo señalado en Azul, es común a TODAS las páginas web. Lo rojo depende del contenido de cada web.
Toda página HTML comienza con un <html> y termina con </html>.
A su vez, todas las webs tienen dos partes, Cabecera (también llamada Head) y Cuerpo (llamado Body).
En estas dos partes, también se indica su comienzo y final, de modo que una página completamente en blanco sería:
<html>
<head>
</head>
<body>
</body>
</html>
Pero como véis, en el código de nuestra página principal hay mas cosillas. Os explico cada una de ellas:
- Esto indica el título de esa página.
<title>Untitled Document</title>
No confundáis el título de la página con el nombre de su archivo. El título es lo que sale en la barra superior del navegador (la barra azul) cuando se visita esa página.
Si abrís la página index.htm que habéis creado y haceis vista previa (Arhivo+Vista previa+Navegador) veréis que arriba aparece "Untitled Document ....". Eso queda muy feo, no? Mejor es ponerle un título a nuestro gusto.
Para poner título, solo tenéis que escribirlo entre los commandos . Por ejemplo, para que los visitantes vean en esa barra lo siguiente, "Bienvenidos a mi nueva página" el código debe quedar como:
<html>
<head>
<title>Bienvenidos a mi nueva página</title>
etc..etc..
Creo que ha sido fácil quejicas, je je je, no? En realidad, al escribir el título hemos cometido un pequeño gran fallo. Se trata del tema de los acentos, pero eso lo explicaré algo más adelante. Por ahora lo dejamos así.
Otra forma de acceder al título de la página para cambiarlo es la siguiente:
1.- Desde la ventana del dreamweaver abierta con esa página cuyo título queremos cambiar, pulsamos en "Ver" + "Contenido del Head".
2.- Aparecen en la parte superior un par de iconos. Si hacemos doble clic en el primero aparece otra nueva ventana donde podremos escribir el título deseado en lugar de "Untitled Document". Una vez hecho, podemos cerrarla.
Esto es más fácil que lo de HTML, pero así no os habriais enterado de la estructura HTML de una web, verdad?
- El resto de líneas que aparezcen en la sección HEAD (en la cabecera de las páginas) son las funciones Metas (Metatags) que son líneas que se añaden para que los buscadores puedan localizar las páginas y mostrarlas a la gente.
Si deseas saber más cosillas sobre las Metatags (o como ser encontrado por los buscadores) visita la sección "Las Metatags" desde el menú principal de CreaTuWeb.
- Después viene la sección "BODY" (o Cabecera). Aquí es donde va definido el contenido de la página, es decir, las letras, imagenes, enlaces, sonidos, ... todo.
En nuestro caso solo encontramos una línea que corresponde al texto escrito.
etc, etc...
<body bgcolor="#FFFFFF">
esta es mi página principal.
</body>
etc, etc...
Como véis el Cuerpo (o Body) empieza con <body> y termina con
</body...>
Junto a <body... encontráis esto: bgcolor="#FFFFFF".
Esto indica el color de fondo que va a tener esa página, (background color). El código #FFFFFF representa el color blanco. Como es el color por defecto, si no lo ponéis el resultado sería el mismo, de modo que vamos a quitarlo. Ya os contaré una forma mejor de ponerle el fondo deseado. El color de fondo en la ventana del Dreamweaver se volverá gris, pero haciendo vista previa veréis como es blanco. Hacedme caso en lo que os vaya diciendo y aprenderéis un montón. Si os saltáis algo o lo hacéis a vuestra manera es posible que luego os perdáis en algo. Tu mismo.
Por ahora el código completo de nuestra página principal es el siguiente:
<html>
<head>
<title>Bienvenidos a mi nueva página</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
esta es mi página principal.
</body>
</html>
Supongo que os habréis dado cuenta que en el código, la palabra "Página" sale un poco rara (sale como página). Esto es por el tema de los acentos, que explicaré más adelante.
Fijaos en una curiosidad (que no es tal, en realidad). Si copiais este código en el Notepad de Windows y lo guardáis como "loquesea.htm", habréis construido una página web de la misma manera que las construidas con cualquier otro programa.
Es decir, si hacéis eso y lo guardáis, al hacer doble clic sobre ese archivo se abrira igual que una página web realizada con Dreamweaver, Frontpage u otros programas similares. Eso demuestra como hay gente que dice saber hacer webs con solo el block de notas, simplemente sabiendo código HTML.
Ya sabéis un poco de HTML. Viste como no dolió? je je je.
|
Introdución