HTML es el lenguaje con el que se escriben las páginas Web. Las páginas
Web pueden ser vistas por el usuario mediante un tipo de aplicación llamada
navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los
navegadores para mostrar las páginas Web al usuario, siendo hoy en día
la interface más extendida en la red.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos
etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura
(de forma general <etiqueta>) y Un cierre (de
tipo </ etiqueta>)
En esta lección vamos a ver las etiquetas fundamentales de las que se compone toda página web.
Son las etiquetas que delimitan todo documento HTML, al principio y al final del mismo. Entre esta etiquetas podemos distinguir dos partes principales: el encabezamiento (<head>) y el cuerpo (<body>).
Esta etiqueta delimita el encabezamiento de una página Web (la cabeza). Contiene etiquetas de índole informativo, como por ejemplo la etiqueta <title> que determina el título de nuestra página.
Delimita el contenido visual de la página (el cuerpo). Aquí iremos colocando texto, imágenes y demás, que tendrán su traducción a etiquetas de HTML como iremos viendo.
La etiqueta BODY puede albergar atributos, que determinan las características generales del cuerpo de la página Web, como bgcolor (color del fondo de la página), background (imagen de fondo de la página), text (color del texto), leftmargin (margen izquierdo), topmargin (margen superior), etc.
Ésta será la estructura básica del código HTML de una página web vacía (con el body por rellenar):
Entre la etiqueta <body> y </body> se incluirán todas las etiquetas que generan la página Web. El texto incluido entre <title> y </title> es el texto que aparece en la barra de título del navegador al abrir una página.
Podemos ver un ejemplo al pulsar la vista de código HTML
en un documento nuevo. A medida que vayamos avanzando podemos comprobar la traducción
a código HTML de todo lo que veamos por medio de esta vista.
| ¡Truco! Si tienes curiosidad por ver el código HTML de cualquier página Web mientras navegas por Internet; Pon el cursor encima de ella (donde no haya una imagen) y pulsa el botón derecho del ratón, selecciona Ver código fuente, y se te abrirá un documento de texto con todo el código. |
En esta sección explicamos las operaciones básicas sobre páginas Web. Antes de crear una página Web debemos crear un sitio Web, de tal modo que sirva de contenedor para todas las páginas que se creen.
Este método crea una página suelta, es decir, hasta que no guardemos este nuevo documento no pertenecerá a ninguna carpeta, no tendrá una localización definida.
Con el método anterior hemos creado un página pero no la tenemos guardada dentro de un Sitio Web. Para guardar una página nueva los pasos a seguir son:
de la barra
de herramientas Estándar. El nombre de archivo y su localización en la carpeta del sitio aparecerán ahora en la barra de título de
la ventana de documento, entre paréntesis, después de las palabras
“Documento sin título”, al igual que en su solapa superior.
¡OJO! Para evitar problemas con los distintos servidores de página Web, te aconsejamos que los nombres de páginas e imágenes de un Web cumplan estas indicaciones:
SI QUIERES INCUMPLIR TODAS ESTAS REGLAS, cuando tengas
que guardar por primera vez una página le puedes dar el nombre
de Página informativa de Logroño.htm, ya
verás qué cantidad de problemas te surgen cuando la publiques
en un servidor Apache de Internet. |
Esta solapa de la ventana de
documento, solo visible cuando está maximizada, nos ayuda a pasar de
una a otra página cuando estamos trabajando con varias a la vez. Cada
una tendrá su solapa superior como esta.
Además, nos indica si ese documento
tiene modificaciones que hay que guardar: en ese caso aparece un asterisco * al lado del
nombre del archivo.
Para guardar esa modificación podemos pulsar el botón
derecho del ratón en esa solapa y elegir Guardar (guardar
los cambios en ese archivo) o Guardar todo (guardar todos los
cambios de los archivos que estén abiertos).
La solapa Archivos es útil para realizar operaciones con los archivos que contenga el sitio (páginas Web, imágenes, carpetas,..). En capítulos posteriores explicaremos de forma detenida esta solapa y su importancia. Por ahora explicaremos algunas opciones puntuales por su rapidez y utilidad práctica.
Éste es un método rápido para crear archivos .htm en nuestro sitio.
ATENCIÓN |
|
 |
Crear una página Web, desde el menú de archivo y desde la solapa Archivos. |
Para abrir una página Web actuamos como sigue:
de la barra de herramientas
Estándar.
Consejo: |
Para cerrar una página Web que se está editando seleccionamos la opción Archivo>Cerrar o pulsamos la X de la ventana de documento.
Si se han realizado modificaciones sobre la página y no se han guardado al cerrar la misma el editor dará la opción de guardar o no los cambios.
Para eliminar un archivo .htm de un sitio web solamente tendremos que localizarlo en la solapa Archivos y hacer clic sobre él con el botón derecho del ratón. En el menú que se despliega elegimos la opción Editar>Eliminar .
De la misma forma se puede duplicar la página web elegida seleccionando la opción Editar>Duplicar desde el menú desplegable del botón derecho del ratón. El duplicado se sitúa en la misma carpeta con un nombre de archivo Copia de nombre.htm
Otro método de crear una cópia de una página es emplear la opción Guardar como del menú de Archivo.
|
|
|
Proceso de abrir, cerrar, eliminar y duplicar una página Web |
Una vez que hemos creado una página Web podemos determinar unas propiedades generales al contenido de esa página. Para ello solo hemos de seleccionar Modificar>Propiedades de la página o hacer clic con el botón derecho de tu ratón en cualquier parte vacía de la ventana de documento y elegir la opción Propiedades de la página.
 |
en la Versión MX... |
... No existe el botón de Propiedades de la página. Solo podremos acceder a las propiedades de la página a través de ese menú Modificar>Propiedades de la página. Eso si, el menú no dá tantas opciones como en la versión 2004. |
| |
|
Propiedades fundamentales de la página Web |
Desde este menú podemos determinar varias propiedades generales de página. Dependiendo de qué categoría elijamos a la izquierda, podremos definir desde el color de fondo hasta el aspecto de los vínculos que aparezcan en esta página, y muchas cosas más.
Como hemos dicho más arriba, esta nueva versión de Dreamweaver está más enfocada a la utilización de Estilos y a la mayor accesibilidad. ¿En qué repercute esto? En que la mayoría de propiedades de formato (color, tamaño, margen, fondo, tipografía, alineación, etc) de los objetos de la página web van a estar definidas por reglas de estilo antes que por etiqueta o atributos del código HTML.
¿Pero qué son las reglas de Estilo? Tranquilos, el ejemplo más fácil va a ser esta propiedad de página.
para ver la Vista de código. Y tendremos algo parecido a
ésto:
| |
|
Propiedades de la página Web (HTML) |
Se podría haber conseguido lo mismo sin reglas de Estilo, mediante
atributos dentro de la etiqueta BODY:
Pero veremos que las reglas de estilos nos dan muchas más posibilidades de definición. Y, aunque nos parezcan más
largas o complicadas, son mejor admitidas por los diferentes navegadores. Por
lo tanto tendremos menos problema de accesibilidad.
NOTA De todas formas en la lección de "Estilos CSS" veremos al detalle los Estilos y cómo trabajar con ellos de forma avanzada. |
Dentro de las Propiedades generales de la página tenemos que tener especial cuidados en dos de ellas:
| ¡¡¡ATENCIÓN¡¡¡ Si nosotros no tocamos los márgenes de la página y dejamos esos casilleros vacíos, el navegador siempre aplicará unos márgenes predeterminados que varían de un navegador a otro. Si queremos dominar nuestro diseño, como diseñadores que somos, en todos sus parámetros, deberemos aplicarle algún valor a esos márgenes para que ese espacio entre contenido y el limite de la página no dependa del navegador. Del mismo modo si NO queremos márgenes debemos poner valor 0 en sus casilleros en el cuadro de Propiedades de página. Nunca los debemos dejar vacíos pensando que no tienen dimensiones al no ponérselas nosotros, porque si están vacíos el navegador aplicará un margen predeterminado. |
Las propiedades generales de una página se pueden modificar en cualquier
momento del proceso creativo. Ya sea desde el menú Modificar>Propiedades
de página o pulsando este botón que está siempre presente en la parte inferior del panel de Propiedades ¡Mucho más rápido!:
Hemos dado los primeros pasos creando páginas Web y modificando algunas de sus propiedades. ¡Ahora tenemos que ver cómo quedaría en Internet! Éso nos lo tenemos que tomar como el verdadero test de nuestro diseño: ver que el navegador lo reproduce sin problemas.
Para ello tendremos que reproducirla con el navegador que tengamos instalado. Solo hemos de elegir Archivo>Vista preliminar en el navegador o pulsar la tecla F12, que es mucho más rápido.
Aconsejamos que a lo largo del trabajo de desarrollo de una página vayamos guardando y viendo en la vista preliminar cómo va el diseño. También es interesante que veamos las páginas en más de un navegador. La razón es muy sencilla. Una página Web se crea para que lo vea el mayor número de usuarios posibles, y no todos utilizan el mismo navegador. Entre Internet Explorer y Netscape Navigator, los dos más utilizados, puede llegar a haber diferencias en la interpretación del código HTML y , por ende, en el diseño.
Para cambiar el navegador con el que se ve la Vista preliminar seguiremos estos pasos:
|
|
|
Vista previa en el navegador de Internet. |