Buscador

Cursos subvencionados para trabajadores

Realiza el curso gratis a través de tu empresa.

Cursos Subvencionados

Inicio » Informática técnica. » Diseño Web y Multimedia » Curso de Dreamweaver CS3 » HTML: 3 grandes etiquetas

Curso de Dreamweaver CS3

Cursos Relacionados:

HTML: 3 grandes etiquetas

Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Dreamweaver CS3 y accede a las 3 unidades gratis con acceso completo al aula virtual donde podrás disfrutar de la inestimable ayuda del tutor y una gran variedad de recursos como videotutoriales, ejercicios resueltos, foros, enlaces, bibliografía, etc....

Código y Diseño

Ya sabemos como crear archivos .htm, es decir, páginas Web.

- Pero si está todo en blanco... ¡está vacía!
NO. Recuerda que DW sólo nos está presentando una PREVISUALIZACIÓN de como está quedando la página Web, sólo una apariencia.
La página Web de verdad está por debajo: está en el CÓDIGO
Lo que nosotros vemos en la Vista DISEÑO es exclusivamente una traducción Visual de ese código.

Al estar trabajando en una página Web podemos pasar a ver el código que DW está creando para los navegadores y buscadores.
Basta con pulsar en el botón de la Vista CÓDIGO de la barra Documento.

A lo largo del trabajo nos meteremos a ver el código de lo que estamos diseñando y no sólo por curiosidad, sino porque en algunos casos ,va a ser realmente necesario.

Inscríbete ahora y accede a 3 unidades gratis

html, head y body

Vamos a comenzar en el código HTML con la primeras y más importantes etiquetas: las que dan estructura al código.
Las podemos ver al pasar a la vista CÓDIGO.

Recuerda que las etiquetas son como paquetes
que comienzan con la apertura pj.<head> y terminan con un cierre pj.</head>

Ésta será la estructura básica del código HTML de una página Web vacía.
Sus etiquetas son fácilmente traducibles al castellano:

<html>	Son las etiquetas que delimitan todo documento HTML, al principio y al final del mismo.
<head>	La cabeza: Contiene etiquetas de índole informativo, como por ejemplo la etiqueta <title> que determina el título de nuestra página.
<body>	El cuerpo: Aquí iremos colocando el contenido VISUAL de la página: texto, imágenes y demás, que tendrán su traducción en sus propias etiquetas.
Se asemeja mucho a la vida real: Los espectadores SOLO van a ver lo que haya en el CUERPO. En cambio es la CABEZA ,la que alberga la información de las propiedades generales que atañan a TODA la página. Esa información de la CABEZA es la que primero va a leer el navegador (que no se fija en la apariencia,sino en lo que hay en el interior: el código) y actuará en consecuencia: el Título del documento, los Estilos CSS diciendo el formato, la programación Javascript, etc.

Como vemos en el ejemplo de arriba nuestras páginas aparentan estar vacías porque el <body> lo tienen vacío.
A medida que vayamos avanzando podemos comprobar la traducción a código HTML de todo lo que vayamos creando en la Vista DISEÑO..

Inscríbete ahora y accede a 3 unidades gratis

Propiedades de la Pagina web

Inscríbete ahora y accede a 3 unidades gratis

Título de la Página web

La propiedad más importante de una página Web es quizás la que menos se ve: EL TÍTULO
El titulo de las paginas Web aparece en la barra de titulo de la ventana junto al nombre del navegador que utilizas:

Pero es sólo una anécdota.
Lo importante del TITULO es que es el primer dato que tiene el navegador sobre la la información que va a tener la página Web debido a que el TITULO lo crea la etiqueta <title>, que es una de las primeras etiquetas dentro del <head>

Por así decirlo, es como la tarjeta de presentación de la página a los navegadores.

- ¿Como insertamos un Titulo en nuestras páginas Web?
Sigue estos pasos:

Abre una pagina Web en concreto.
Dirígete a la barra Documento y allí verás un casillero para escribir el Titulo de la página en cuestión.

Por ejemplo: Esta es mi primera página Web ¡Qué ilusión!
Puedemos ver que en la apariencia de la página no hay cambio, no forma parte del contenido visual de la página.
Pasamos a la vista CÓDIGO para ver como ha cambiado la etiqueta <title>

<title> Esta es mi primera página web ¡ Qué ilusión! </title>

ojo: titulo no es igual nombre del archivo

El titulo de la página y el nombre del archivo .htm SON DOS COSAS DIFERENTES.

Piensa que una cosa es el nombre de una persona (israel) y otra cosa el título que se pone (Desarrollador del fabuloso curso de diseño web: Dreamweaver CS3)

ley: todas las páginas deben tener un título

En este curso vamos a crear páginas Web de calidad y el TITULO es el primer signo de calidad de una página.

Siempre que crees una página Web nueva LO PRIMERO: PONLE UN TITULO

Inscríbete ahora y accede a 3 unidades gratis

Cuadro de Propiedades de página

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

-	Opción de menú Modificar > Propiedades de la página...
-	Clic con el Botón derecho del ratón en un área vacía del documento y elegir Propiedades de la página
-	Pulsar el botón Propiedades de la página.. en el panel PROPIEDADES

en laS VersiónES MX...

... No existe el botón de Propiedades de la página.

Sólo podremos acceder a las propiedades de la página a través de ese menú Modificar>Propiedades de la página...

Este cuadro es una de las opciones MÁS POTENTES ya que podemos modificar el aspecto de una página, dependiendo de qué categoría elijamos a la izquierda, podremos definir características para TODO el contenido de la página: color /tamaño / fuente para TODO el texto de la página, color / imagen para TODO el fondo de la página, el formato de TODOS los enlaces de la página, etc.
¡De un plumazo!.

Dentro de las Propiedades generales de la página me interesa que nos detengamos en una: los MARGENES

Al igual que cualquier documento las páginas Web tienen un espacio determinado entre su contenido y el limite del documento, ése es el margen. Los márgenes se aplican desde el cuadro Propiedades de página.

Si dejamos estos casilleros de margen vacíos el navegador siempre aplicará unos márgenes predeterminados que varían de un navegador a otro.

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.

ley: no dejes opción al navegador

Veremos que el Navegador tiene muchas opciones de diseño YA PREDETERMINADAS. Hemos visto el margen, pero también veremos que la fuente predeterminada es Times New Roman, la alineación de celda es Vertical-Centro, el color de los enlaces es azul y hasta que son visitados y pasan a ser violeta, etc.

Si queremos dominar nuestro diseño, en todos sus parámetros, deberemos controlar estas opciones que serán elegidas por el navegador en vez de por nosotros.

Inscríbete ahora y accede a 3 unidades gratis

Propiedades y Estilos CSS

Como hemos dicho en la lección anterior, las ultimas versiones de DW están más enfocadas a la utilización de Estilos CSS para conseguir un código más limpio y aumentar su 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 CSS antes que por etiquetas o atributos propias del código HTML.

-¿Pero qué son las reglas de Estilo?
Tranquilos, el ejemplo más fácil va a ser usar estas Propiedades de Página.

A un documento nuevo le abrimos el cuadro de Propiedades de página (Modificar>Propiedades de página) ...
... y le definimos el color de fondo rojo y el color de texto verde.

Pulsamos Aceptar
¡Vamos a ver en qué se traduce eso en código HTML¡
Pulsamos para ver la Vista CÓDIGO. Y tendremos algo parecido a esto
:

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 que aunque nos parezcan más largas o complicadas, son mejor admitidas por los diferentes navegadores.
Por lo tanto tendremos menos problema de accesibilidad.

EN RESUMEN.
Usando reglas de estilos NO SE TOCA EL CÓDIGO HTML DEL BODY.
La Página Web tiene las reglas de Estilo en la CABEZA, está "pensando en ellas". Estas reglas son las que van a determinar la APARIENCIA del CUERPO cuando sea reproducido por el navegador.
Pero lo bueno es que, aunque parezca que el cuerpo está "vestido" en realidad el código del cuerpo sigue estando desnudo.

¡¡ Imagínate la potencialidad de las reglas de Estilo !!
Basta con que la página "piense" en otros estilos
para que su apariencia cambie completamente.

más Estilos... más adelante

No es necesario que sepamos más en cuanto a las Reglas de Estilo CSS.
Basta con que sepamos que están ahí. Con DW podremos trabajar con ellas (manipulando las Propiedades de página, por ejemplo) sin necesidad de saber más sobre ellas.

De todas formas en las lecciones de Estilos CSS veremos al detalle los Estilos y cómo trabajar con ellos de forma avanzada.

Inscríbete ahora y accede a 3 unidades gratis

< 3.- Crear una Pagina web Volver al curso de Dreamweaver CS3 5.- Gestión de páginas web >

Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver CS3 y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.