TEMA 9 CREACIÓN DE PÁGINAS WEB

Tamaño: px

Comenzar la demostración a partir de la página:

Download "TEMA 9 CREACIÓN DE PÁGINAS WEB"

1 TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio web. Publicación de los contenidos de un sitio web. CONTENIDOS El lenguaje HTML. Creación de una página web sencilla. Inserción de elementos en páginas web. Proceso de creación de páginas con NVU. Diseño de un sitio web. Publicación de los contenidos de un sitio web. CRITERIOS DE EVALUACIÓN 1.- Creación de páginas web sencillas. 2.- Inserción de elementos en páginas web. 3.- Diseñar páginas con NVU. 5.- Crear y configurar un sitio web. 6.- Publicar los contenidos de un sitio web.

Inserción de elementos en páginas web. Proceso de creación de páginas con NVU. Diseño de un sitio web. Publicación de los contenidos de un sitio web.

2 INTRODUCCIÓN Una página web es una forma de presentar información en Internet. Desde el punto de vista del diseñador, es uno o varios documentos con extensión.htm o.html que contienen la información a mostrar y una serie de instrucciones para indicar cómo mostrarla. Estas últimas se escriben siguiendo el lenguaje HTML. HTML Veamos un primer ejemplo de una página escrita en lenguaje HTML, para lo cual debes abrir el bloc de notas y copiar lo siguiente: <HTML> <HEAD> <TITLE>Mi primera página</title> <BODY> <H1 align=center>estoy aprendiendo a crear webs</h1> <HR> <P>Estoy empezando, y ya sé hacer una página.</p> </BODY> </HTML> Deberás guardarlo con el nombre prueba.htm y abrirlo con el navegador, como si fuese una página web. En el navegador solo verás aquello que no está encerrado entre los símbolos '<' y '>', es decir el contenido de la página propiamente dicho. Lo que no se muestra son las etiquetas que indican al explorador cómo mostrar ese contenido. Cada etiqueta suele tener un inicio y un cierre -por ejemplo <HTML> y </HTML>, aunque no todas lo tienen -por ejemplo <HR>-. Algunas etiquetas importantes para comenzar el documento son: <HTML> </HTML> Indica que el documento está escrito en lenguaje HTML, está situada al principio y al

HTML Veamos un primer ejemplo de una página escrita en lenguaje HTML, para lo cual debes abrir el bloc de notas y copiar lo siguiente: <HTML> <HEAD> <TITLE>Mi primera página</title> <BODY> <H1

3 final del mismo. <HEAD> </HEAD> Es la cabecera del documento. No siempre es visible, pero puede contener por ejemplo el título que se ve en la ventana del explorador, situado en la parte superior izquierda. <BODY> </BODY> Es el cuerpo de la página web, donde se incluye todo el contenido. En nuestro ejemplo prueba.htm, colocamos una frase como cabecera (<H1>), luego incluimos una línea horizontal (<HR>) y por último un texto explicativo en un párrafo. Veamos pues algunas de las etiquetas de mayor interés: <P> </P> delimita un párrafo <CENTER> </CENTER> centra el texto encerrado De <H1> </H1> a <H6> a </H6> ofrecen 6 posibilidades para cabeceras o títulos <B> </B> letra en negrita <I> </I> letra en cursiva <U> </U> subrayado <S> </S> tachado <BR> salto de línea <HR> barra horizontal <!-- comentarios (que obviamente, no se mostrarán) <A HREF= >Página</A> crea un enlace con hipertexto <IMG SRC= fichero.jpg > inserta una imagen <TABLE> <TR> <TD>11</TD> <TD>12</TD>

<BODY> </BODY> Es el cuerpo de la página web, donde se incluye todo el contenido. En nuestro ejemplo prueba.

4 </TR> <TR> <TD>21</TD> <TD>22</TD> </TR> </TABLE> SCRIPTS Un script es un programa insertado dentro del documento HTML. Se ejecutan en el ordenador del usuario, bien sea directamente al leer la página, o al producirse un evento como puede ser pulsar con el ratón. Así, se pueden hacer páginas dinámicas, validando formularios, realizando pequeños efectos visuales, etc. Eso sí, hay que tener claro que se ejecutan en el navegador del usuario y no en la máquina del servidor, lo cual motiva que no puedan manejar por ejemplo bases de datos o un contador de visitas. Para crear scripts se suele usar otro lenguaje distinto del HTML llamdo JavaScript. Veamos un ejemplo, para lo cual debes escribir en un bloc de notas lo siguiente: <HTML> <HEAD> <SCRIPT LANGUAGE= JavaScript >  <SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE= button NAME= Boton VALUE= Púlsame ONCLICK= HolaMundo() > </FORM> </BODY> </HTML>

Así, se pueden hacer páginas dinámicas, validando formularios, realizando pequeños efectos visuales, etc.

5 Guarda el archivo como holamundo.htm y ábrelo con el navegador para ver el resultado. NVU Para hacer páginas web resulta muy cómodo utilizar un programa de edición de páginas web, pues así no es necesario escribir el código HTML directamente, sino que contamos con la ayuda del programa. Algunos ejemplos, de pago, son el Adobe Dreamweaver o el Microsoft Front Page. El NVU es el editor de páginas web libre y gratuito que vamos a utilizar en este tema. Puedes descargar el instalador necesario del Aula Virtual. Veamos cómo utilizarlo: Primera página web. Crear una página nueva es tan simple como alegir la opción File New. Podemos crear una plantilla vacía o usar una ya creada. Escribir el contenido de la página web es muy fácil, tanto como crear un documento de texto en un procesador de textos, en donde escribiremos y elegiremos el formato que queramos. Deberemos guardar el documento en File Save para no perder los cambios que vamos haciendo. Siempre debemos dar un título a la página, que no tiene por qué coincidir con su nombre. Algunos elementos a tener en cuenta para agregar el contenido son los siguientes: Formato del texto, en Format Font y Size. Títulos, en Format Paragraph. Listas, en Format List. Estilos, en Format Text Style. Color, en Format Text Color. Tablas.

programa. Algunos ejemplos, de pago, son el Adobe Dreamweaver o el Microsoft Front Page. El NVU es el editor de páginas web libre y gratuito que vamos a utilizar en este tema.

6 Son útiles no solo para presentrar listas de datos, también lo son para maquetar el diseño de la página. Podemos crear una tabla en Table Insert Table, y una vez creada podemos modificar sus opciones mediante el menú Table Table Properties. Imágenes. Se añaden desde Insert Image. Lo aconsejable es utilizarlas en formato.jpg, como ya hemos visto en un tema anterior. Enlaces. Se añaden en Insert Link. Podemos añadir un enlace a otra página web o a una dirección de correo electrónico. Enlaces internos. Una página web completa es un conjunto de páginas interconectadas, y podemos crear enlaces internos dentro de nuestra página. Para ello hacen falta dos pasos: primero poner un ancla en el lugar exacto donde queremos situar el destino del enlace, y después añadir el enlace propiamente dicho. Aspecto de la página. Se puede elegir una imagen de fondo y colores para el fondo y los enlaces en Format Page Colors and Background. Para publicar. Se necesita un lugar de alojamiento de páginas web, puedes utilizar uno gratuito como por ejemplo desde donde puedes controlar tu página de forma bastante sencilla.

Lo aconsejable es utilizarlas en formato.jpg, como ya hemos visto en un tema anterior. Enlaces. Se añaden en Insert Link.

Documentos relacionados

Unidad 1. Introducción a HTML (I)

Unidad 1. Introducción a HTML (I) A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language) es