Inicio » Informática técnica. » Diseño Web y Multimedia » Curso de Frontpage » 1- Diseño de Páginas Web. Conceptos Generales.

Curso de Frontpage

Cursos Relacionados:

1- Diseño de Páginas Web. Conceptos Generales.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Introducción

Las páginas Web son documentos de hipertexto y multimedia. Son documentos multimedia porque incorporan imágenes, vídeos, animaciones, sonidos, textos de todo tipo, y son documentos de hipertexto, porque incorporan enlaces con otras páginas. Cuando pulsamos sobre un enlace de una página Web, visualizamos la página a la que llama ese enlace, esa página puede estar en el mismo servidor o en otro situado a mucha distancia, este proceso de ir de una página a otra es lo que se denomina navegar por Internet.

Los programas que sirven para visualizar páginas Web son los navegadores de Internet, son gratuitos y actualmente los dos más utilizados son: Microsoft Internet Explorer (vamos por la versión 6.0) y Netscape (también la última versión es la 6.0).

El lenguaje utilizado para crear páginas Web es el HTML, se trata de un lenguaje de etiquetas que define el aspecto de las páginas. Una página Web está compuesta por un archivo de texto plano, con extensión htm o html, escrito en lenguaje HTML, y todos los archivos multimedia relacionados con él.

Para crear páginas Web necesitamos un editor de texto simple como el Bloc de Notas y muchos conocimientos de lenguaje HTML, o muy pocos conocimientos de este lenguaje y aprender el manejo de programas de diseño Web gráficos como FrontPage o Dreamweaver. Estos programas traducen en segundo plano a código HTML todas las actuaciones del usuario.

En esta lección crearemos una página Web muy simple empleando el Bloc de Notas, el objeto es adquirir unos conocimientos básicos de HTML, así como una visión general, de qué es una página Web, cómo se crea y se publica en Internet.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Diseño de una página Web simple

Para crear documentos de hipertexto que puedan visualizarse en la Web, se ha desarrollado el lenguaje HTML (Hyper Text Markup Language). Este lenguaje permite dar indicaciones precisas al navegador de cómo debe presentarse el documento en pantalla.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Documentos HTML

Un documento HTML es un fichero de texto ASCII en el que se incluye, además del texto que se quiere mostrar en pantalla, ciertas directivas o etiquetas que indican, entre otras cosas, el formato del documento y la información relativa a los hiperenlaces.

Las etiquetas se escriben entre los signos '<' y '>' y generalmente se introducen por parejas, indicando el comienzo y el final de una acción. En este caso, la etiqueta final es similar a la inicial pero precedida por una barra '/'. Por ejemplo, la etiqueta <center> delante de un texto y la etiqueta </center> detrás del mismo indican que el texto comprendido entre ellas se mostrará centrado con respecto a la página.

La mayoría de las etiquetas precisan de una de cierre, que delimite el alcance de la acción, si bien se presentan excepciones.

El texto del documento junto a las directivas HTML se puede escribir con cualquier editor ASCII y el nombre del fichero que contenga dicho documento tendrá como extensión los caracteres html o htm.


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Estructura de una página Web

Todas las páginas Web tiene la siguiente estructura:

Todo el documento debe estar entre las etiquetas <html> y </html>.

Las etiquetas <head> y </head> determinan la cabecera de la página Web, entre estas dos etiquetas pueden aparecer otras muchas, pero la única fundamental es <title> y </title>, el texto comprendido entre ambas determina el título que la página Web tendrá en el navegador.

Todo lo que queramos presentar en la página Web tendrá que estar situado entre las etiquetas <body> y </body>

Para hacer la primera práctica actuamos como sigue:

  1. Abrimos el Bloc de Notas, escribimos el texto de la imagen anterior y guardamos el archivo en una carpeta con el nombre de leccion1.htm
  2. Abrimos el Navegador de Internet.
  3. Pulsamos sobre la opción Abrir del menú de Archivo, pulsamos sobre el botón de Examinar y seleccionamos el archivo leccion1.htm y pulsamos Aceptar
  4. En el navegador veremos nuestra primera página Web

Podemos apreciar que el título de la página Web se ve en la barra de título, es lo que hemos conseguido con las etiquetas <title> y </title> de la cabecera.

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Algunas etiquetas básicas de texto.

Presentamos algunas etiquetas básicas para texto en la siguiente tabla:

Etiqueta de apertura Etiqueta de cierre Descripción
<p> </p> Todo el texto comprendido entre estas dos etiquetas es un párrafo.
<center> </center> Todo el texto comprendido entre estas dos etiquetas aparecerá entrado con respecto a la página.
<h1> </h1> El texto comprendido entre estas dos etiquetas es un título de nivel superior.
<h2> </h2> El texto comprendido entre estas dos etiquetas es un título de segundo nivel.
<hr>   Presenta una línea de división

Seguimos con la práctica, abrimos el archivo leccion1.htm y escribimos el código de la imagen anterior entre las etiquetas <body> y </body>, el resultado en el navegador es el siguiente:


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


La etiqueta de imagen

Para incluir una imagen en la página Web se emplea la etiqueta <img src='nombre de la imagen'>, previamente habremos copiado la imagen a la misma carpeta en dónde se encuentra nuestra página Web.

Para incluir una imagen en nuestra página primero tenemos que disponer de ella, en este ejemplo la capturaremos de esta misma página.

  1. situar el puntero del ratón sobre esta imagen  , pulsar el botón derecho y tomar la opción guardar imagen como, seleccionar la carpeta en donde hemos guardado la página Web y guardarla con el nombre de cara.gif
  2. Completaremos el código atendiendo a la siguiente imagen.

El resultado es el siguiente:

 

 


Inscríbete ahora y accede a 3 unidades gratis

Evalua el curso de Frontpage 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....


Si desea obtener un acceso sin restricciones a los contenidos del curso de Frontpage 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.