Internet es una red global de equipos informáticos que se comunican mediante un lenguaje común y que se conectan entre si

formando una gran red.

Fuente de información

Para la World Wide Web

Un navegador web

En formato HTML

Enlaces a otras

páginas webadaptada

accesible mediante

constituyendo

presentadacontiene

La red enlazada de

internet

Texto

Imágenes

Audio

En formatos GIF (para animaciones), JPG (para reducir el tamaño del archivo, le resta calidad) y PNG (para transparencias)

En formatos GIF (para animaciones), JPG (para reducir el tamaño del archivo, le resta calidad) y PNG (para transparencias)

                                               

Imagen GIF Imagen JPG Imagen PNG

MIDI, WAV y el más utilizado en las web es el MP3 por la relación de calidad/tamaño MIDI, WAV y el más utilizado en las web es el MP3 por la relación de calidad/tamaño

Editable mostrado en pantallaEditable mostrado en pantalla

El HTML (Hyper Text Markup Language) es el lenguaje de marcado predominante para la construcción de páginas Web.

La última versión del lenguaje html en español:

http://html.conclase.net/w3c/html401-es/cover.html

Es un programa que permite visualizar la información que contiene una página web. El navegador interpreta el código HTML. Los documentos HTML deben tener la extensión “.html” o “.htm”, para poder ser visualizados en el navegador.

Barra de direcciones

Barra de titulo

Barra de herramientas

Pestañas

Contenido de la pagina web

Barra de estado

Las etiquetas se escriben entre los símbolos < y >.

La estructura del código HTML es la siguiente:

BLACK NAVY BLUE TEAL AQUA

SILVER GRAY YELLOW GREEN OLIVE LIME

RED MAROON WHITE FUCHSIA PURPLE

REDFF0000

FF3300 CC3300 FF9999 FFCCCC 990033

MAROON990000

FF3333 CC3333 FFCC99 CC0066 993300

FF0033 CC0033 FF9966 FF6699 660000

000000 CC0000 663333 990066 330000

LIME66FF00

33FF33 66FF66

OLIVE66FF00

99FF99 CCFFCC

GREEN00FF00

00CC00 009900 006600 003300

00CC00 009900 006600 003300

009900 006600 66FF00 009900

AQUA00FFFF

00FFFF 3333FF

TEAL008080

6666FF 9999FF

BLUE0000FF

33FFFF 66FFFF 99FFFF CCFFFF

CCCCFF 0000CC 000099 000099

CCCCFF 000066 000033 000099

Formato del texto:

<b> </b> negrita ejemplo

<i> </i> cursiva ejemplo <u> </u> subrayado ejemplo

<font size=+2> texto </font> marca el tamaño de los caracteres.

texto <font color=”lime”> texto </font> define el color del texto. texto <font face=” Impact”> texto </font> determina el tipo de

la fuente. texto

Formato de párrafos:

<p> </p> salto de párrafo. <p align=center> párrafo centrado. <p align=left> párrafo alineado a la izquierda. <p align=right> párrafo alineado a la derecha.

<br> salto de línea. <center> centrar el texto. <hr> línea horizontal.

<h1></h1> hasta <h6></h6> permite establecer encabezados con diferentes tamaños de letra.

<h1>Encabezado H1 </H1>

Encabezado H1

Creación de listas:

Listas no ordenadas:<ul>

<li>Primer elemento</li> . Primer elemento

<li>Segundo elemento</li> . Segundo elemento

</ul>

Listas ordenadas:<ol>

<li>Primer elemento</li> 1. Primer elemento

<li>Segundo elemento</li> 2. Segundo elemento</ol>

Lista no ordenada: Lista ordenada:

Tablas: útiles para componer y organizar el contenido de la pagina.

<table> </table> Define dónde comienza y termina la tabla.<table width="XX%"> Determina la anchura de la tabla en píxeles o en porcentaje de la pagina.<table height="XX”> Determina la altura de la tabla en píxeles.<table border="X"> Establece el grosor del borde de la tabla en píxeles.

<tr> <tr/> determina cada una de las filas de la tabla. <td> <td/> determina cada una de las columnas dentro de

las filas.

<TABLE> <TD> Celda 1 </TD> <TD> Celda 2 </TD><TR> <TD> Celda 3 </TD> <TD> Celda 4 </TD></TABLE>

Celda 1 Celda 2

Celda 3 Celda 4

Insertar imágenes: <img src=“imagen.gif"> indica la ruta de la imagen. <img border="X"> establece un borde en torno a la imagen. <img height="XX" width="YY"> establece un tamaño de la

imagen (altura y anchura) en pixels. <img alt="texto explicativo"> se muestra un texto al pasar

el cursor sobre la imagen.

Creación de enlaces: <a href=”http://www.google.es/”> Google </a> <a href=”mailto:manolo@hotmail.com”> Correo

electrónico de manolo. </a>

Son programas que permiten crear páginas web sin la necesidad de saber código HTML. Su interfaz gráfico es muy similar al de los procesadores de texto. Funcionan bajo el principio WYSIWYG ('what you see is what you get'), es decir, visualizas la pagina web al mismo tiempo que la estas creando.

El editor NVU, es un editor muy completo, fácil de utilizar y gratuito http://www.nvu.comSe puede descargar la versión en español de Nvu en:http://nvu.softonic.com/

Partes del programa:

Crear un nuevo documento:

• Crear una página vacía. • Crear un documento a partir de una plantilla previamente creada. • Crear una plantilla vacía, para que todas las páginas tengan el mismo aspecto.

Guardar el documento:

Se pulsa el botón guardar.

Se escribe el titulo de la pagina que se esta guardando.

• Utilizar siempre letras minúsculas. • No emplear eñes, tildes, signos de interrogación, paréntesis, etc. • No dejar espacios en blanco.

Colores y fondo de la pagina:

En el menú formato se pueden configurar las propiedades de la pagina.

Cambiar el color del texto

Poner como fondo de la pagina una

imagen

Dar formato al texto:

Creación de listas:

Insertar tablas:

Se puede insertar una tabla pulsando el botón o en el menú Insertar - Tabla.

Haciendo doble clic en la tabla se puede modificar sus propiedades.

Insertar imágenes:

Se puede insertar una imagen pulsando el botón o en el menú Insertar - Imagen.

Dimensiones:Real o

personalizada

Apariencia:Alineacion y borde de la

imagen

Enlace:Ponerle un enlace a la

imagen

Insertar enlaces:

Se puede insertar un enlace pulsando el botón o en el menú Insertar - Enlace.

Texto mostrado en el enlace

Direccion del enlace

Es conveniente comprobar como se visualiza la pagina web en los navegadores más utilizados, Internet Explorer y Firefox, y a diferentes resoluciones de pantalla. Podemos utilizar servicios web gratuitos para hacer el test, ejemplos: http://www.browsershots.orghttp://www.tawdis.net/http://www.sidar.org/hera/

El alojamiento web o hosting es el servicio que provee a losusuarios de Internet un sistema donde poder guardar y publicar paginas web.El alojamiento gratuito tiene sus inconvenientes:

• Espacio limitado.• Generalmente agregan publicidad. • Tráfico limitado (conexiones a la pagina).

Ejemplos:http://web.iespana.es/http://galeon.hispavista.com/http://www.freeservers.com/http://www.newbiesite.com/http://www.50webs.com/

Inscribirse:

Nombre de usuario y contraseña:

Al crear la cuenta nos envían un correo para activar el espacio:

Transferir los archivos de la pagina web al servidor:

Archivos localesArchivos del

servidor

Visualizar la pagina web

http://altamiraweb.net/plantillasgratis.htmhttp://www.el-webmaster.com/descargas/plantillas_web_gratis.php

http://www.zonagratuita.com/a-disenio/templates_gratis35.htm

http://plantillas.astalaweb.net/Modernos/1_Modernos.asp

• http://es.wikipedia.org• http://observatorio.cnice.mec.es/modules.php?

file=article&name=News&op=modload&sid=405• http://iescarbula.net/herramientas/nvu/primeraweb.html• http://creatuweb.espaciolatino.com/curso_nvu/index.htm• http://www.youtube.com• http://digitallearning.es/• http://www.desarrolloweb.com/manuales/21/• http://www.google.es