Qué es una página web? Guía básica

¿Qué es una página Web?
• Es un documento digital que puede contener texto,
imágenes, vídeos,….., y además tiene distribuidos a lo
largo del documento enlaces que sirven para acceder a
otras páginas web.
• Necesitamos disponer de :
Ordenador.
Conexión a internet.
Navegador ( Firefox, Explorer, Google Chrome,…).

El Lenguaje HTML
• El lenguaje HTML es el “idioma” en el que
están escritas las páginas web. Están
basadas en etiquetas.
Práctica: Vamos a ver el código HTML que
tiene por debajo una página web.
1. ir a la página http://www.tinglado.net/
2. botón derecho/ver código fuente

Etiquetas HTML
•Son marcas escritas entre corchetes angulares, que se colocan al principio y al
funal de la zona de texto a la que queremos aplicar un efecto.
Etiqueta inicial Contenido
<h1 align=“center” > Ejemplo </h1>
Atributo Etiqueta final

Creación de páginas HTML
• ¿cómo crear una página HTML?
– Abrir el editor seleccionado: bloc de notas, html-kit, …
– Escribir el código necesario para construir la página
– Guardar el fichero con extensión .html o .htm
• Comprobar el resultado obtenido abriendo la página
– Se abre con el navegador
• ¿cómo modificar una página HTML?
– “Abrir con” el bloc de notas o editor seleccionado
– Abrir la página y, desde el navegador, seleccionar Vercódigo fuente,
modificar desde el bloc de notas y, desde el navegador actualizar la
página utilizando el correspondiente botón de la barra de herramientas.

ESTRUCTURA PAGINA HTML
<HTML>
<HEAD>
<TITLE>TÍTULO DESEADO PARA LA PÁGINA</TITLE>
</HEAD>
<BODY>
TEXTO QUE VISUALIZARÁ LA PÁGINA
</BODY>
</HTML>

Etiquetas mas comunes y sus atributos
Etiquetas Características
<html>...</html> Entre ellas dos ha de estar todo el contenido
de la página.
<head>…</head> Cabecera del documento.Título de la página,
hoja de estilo.
<title>…</title> Título de la ventana que aparece en el
navegador.
<body>…</body> Entre estas etiquetas incluiremos todo el
contenido de la página web. Se puden poner
atributos como bgcolor.
<h1>…</h1>
<h2>….</h2>
……
<h6>….</h6>
Estas etiquetas sirven para escribir distintos
tamaños de titulares desde el más grande es
<h1> hasta el más pequeño <h6>.

Etiquetas mas comunes y sus atributos
Etiquetas Características
<i>...</i> Texto en cursiva.
<u>…</u> Texto subrayado.
<strong>…</strong> Texto negrita.
<p>…</p> Delimitan un párrafo del texto.
<p align=“left”>….</p> (alinear a la izquierda)
<p align=“center”>…..</p> (centrar)
<p align=“rigth”>…..</p> (alinear a la derecha)
<br/> Salto de línea. No necesita etiqueta de cierre.
<hr/> Inserta una línea horizontal
<hr width=75%” align=“left”/>
<img src=“ruta y
nombre de la imagen”
alt=“texto”/>
Inserta una imagen en la página. Se puede
añadir el atributo align para alinear la
imagen.

Ejercicio 1.Mi primera página Web
1.Crea en tu ordenador una carpeta llamada P1_nombreapellido.
2. Abre el bloc de notas:Inicio/todos los programas/Accesorios/Bloc de
notas.
3. Copia en el bloc de notas las etiquetas básicas e imprescindibles que ha de
contener un página web (Estructura página web).
4. Añade el texto “Saludo” entre las etiquetas <title> y </title>.
5. Luego añade el texto “HOLA MUNDO” entre las etiquetas <body> y
</body>. Inserta este texto en una etiqueta de encabezado de orden 2.
<h2> HOLA, MUNDO </h2>
6. En el menú Archivo /Guardar como. En la opción Tipo elige Todos los
archivos(*.*) y en Nombre escribe P1_E1_nombreapellido.html.
7. Accede a la carpeta anterior haz clic con el ratón sobre el archico que
acabas de crear.

KompoZer
Kompozer es un programa de software libre, gratuito, de muy fácil manejo y muy
completo para la creación de páginas web. Es multiplataforma (Windows, Linux,…).
Ejercicio 2: Descargar e instalar Kompozer.
1. Abre tu navegador y entra en www.kompozer.net/download.php.
2. Haz clic sobre download para Windows.
3. Elige Guardar.
4. Elige carpeta.
5. Instala el software descargado.

KompoZer
Ejercicio 3: “Hola, Mundo”
1. Abre Kompozer.
2. Guárdalo como P2_E2-nombreapellido.html en la carpeta P1_nombreapellido.
3. Escribe el texto dentro del área de trabajo.Escríbelo todo, separado por una o
dos líneas (pulsando intro). Después le darás formato.
4. Inserta las imágenes pulsando el botón Imagen de la barra de redacción.
5. Dar formato al texto. Todo lo neceario lo tienes en la barra de
formato(alineación, cambiar color, cambiar tipo de letra, cambiar tamaño letra,
…)

KompoZer
PRACTICA 1: Diseño de un sitio web completo dedicado a deportes.
Diseñaremos un sitio web completo dedicado a deportes , el sitio estará formado
por 4 páginas web:
-Una inicial de bienvenida.
-Otras tres dedicadas a fútbol, baloncesto y tenis.
Tendremos la siguiente estructura de páginas:

PASO 1: Diseñar la estructura de la página.
1. Crea en tu ordenador una carpeta llamada P3_nombreapellido.Dentro de
ella crea una carpeta llamada img y copia en esta todas las imágenes que
aparecen en la wiki.
2. Abre el programa KompoZer.
3. Pulsa Editar sitios.

4. Pulsa el botón Guardar. Cuando pida el título,
escribe “Deportes-Inicio”. Guarda la página
como index.html(este es el nombre que
habitualmente tiene la página inicial de un sitio
web) y asegúrate de hacerlo en la carpeta que
has creado para el sitio.
5. Va a poner una imagen de fondo a la página, a
modo de mosaico. Formato/colores y fondo
de la página/elegir
archivo/P3_E1_Fondo.jpg.
6. Pulsa el botón Tabla y selecciona una tabla de 3
filas y una columna.
7. Sitúate en la celda central, clic con el botón
derecho e Insertar tabla/Tabla. Inserta una
tabla ahora de 1 fila y dos columnas.
8. Clic con el botón derecho sobre la tabla exterior
y selecciona Propiedades de la celda de la
tabla. En la pestaña Tabla, pon un ancho de
700 píxeles; en Borde, Espaciado y Relleno,
pon un 0, y en Alineación de la tabla elige
Centrada (Ver figura).

9. Clic con el botón derecho sobre la tabla interior y selecciona Propiedades
de la celda de la tabla. En la pestaña Tabla, pon un ancho de 100%; en
Borde, Espaciado pon 0 y Relleno a 10. En la pestaña Celdas, pulsa los
botones Anterior o Siguiente hasta que quede marcada la celda de la
izquierda, la que contendrá el menú. Ponle un ancho de 159 píxeles.
10. Elegir colores de fondo para la estructura(no
deben molestar: no despiste del contenido y se vea
el texto). Botón derecho sobre la celda/Color de
fondo de la tabla. Algunas celdas las puedes dejar
transparentes para que se vea el color de fondo.

PASO 2: La Cabecera.
1. Sitúate con el ratón en la celda superior, la
cabecera. Escribe “MIS DEPORTES
FAVORITOS” . Pulsa Intro y escribe “Fútbol,
Baloncesto y Tenis”.
2. Selecciona “MIS DEPORTES FAVORITOS” y,
con los botones de la barra de formato,
céntralo, ponlo en negrita y aplícale Título 1.
3. Luego selecciona cada palabra del Título por
separado y dale un color distinto con el botón
4. Selecciona el texto “Fútbol, Baloncesto y Tenis”
y ponlo como Título 3 y centrado. Dale color
rojo oscuro, por ejemplo.
Vamos a insertar ahora una imagen que anime un
poco la página.
La cabecera de una página web es muy importante porque es lo primero
que el usuario ve y a partir de ella tiene que identificar de qué trata nuestro
sitio web. Dependiendo de los colores que hayas utilizado para la cabecera
tendrás que utilizar unos colores u otros para el texto, de forma que la
lectura sea cómoda

PASO 2: La Cabecera.
5. Ponte al principio del texto “MIS DEPORTES FAVORITOS” y pulsa el botón
Imagen de la barra de redacción.
6. En la ventana que aparece, dentro de la pestaña Ubicación, pulsa el botón
Elegir archivo y busca el archivo P3_E2_Balon.gif de la carpeta img. Pon
como texto alternativo Balón. Ve a la pestaña Apariencia. En Alinear el texto
con la imagen, selecciona En el centro.
7. Ve al final de la frase “MIS DEPORTES FAVORITOS” y repite la misma
operación para insertar de nuevo la misma imagen.
4. Selecciona el texto “Fútbol, Baloncesto y Tenis” y ponlo como Título 3 y
centrado. Dale color rojo oscuro, por ejemplo.

PASO 3: El pie de página.
Esta es la zona mas sencilla. Lo que suele
contener el pie de página son datos como los
derechos de autor, enlaces a las secciones más
importantes, la autoría del sitio web, la fecha de
la última actualización,…
1. Sitúate con el ratón en la celda inferior de la
tabla, en el pié de página, y escribe tu nombre
completo. Pulsa intro y escribe el nombre de tu
centro y tu curso. Pulsa de nuevo intro y
escribe el año, ponlo en negrita y alinéalo a la
derecha.
2. Selecciona los párrafos de tu nombre, centro y
curso y ponlos centrados y como título 3
pulsando los botones correspondientes de la
barra de formato.

PASO 4: El menú.
1. Haz clic con el botón derecho del ratón sobre la
celda izquierda, la del menú. Elige
Propiedades de la celda de la tabla.
2. En la ventana que aparece, sobre a pestaña
Celda, en el apartado Alineación del
contenido, Vertical, elige Superior.
3. Sitúate en la celda de la izquierda, escribe
“MENÚ PRINCIPAL” y pulsa dos veces intro.
Con el ratón, selecciona ese texto y ponlo en
negrita y centrado pulsando los botones
correspondientes de la barra de formato.
4. Después escribe “inicio”, pulsa “intro” y escribe
“Fútbol” y así con todos los deportes que has
elegido.
5. Ahora vamos a crear los enlaces al menú.
Empezaremos por el enlace Inicio, con un
enlace que cuando alguien pulse sobre esta
opción vaya a la página inicial , a index.html.
A continuación diseñaremos el menú de la izquierda. Deberás escribir todos
los enlaces a las distintas páginas que corresponden el sitio web.

PASO 4: El menú.
5. Con el ratón selecciona “Inicio”, pulsa el botón Enlace de la barra de
redacción y, en la ventana que se abre, escribe “index.html”.
6. Haz lo mismo con las otras tres opciones del menú, pero que vayan a
futbol.html,baloncesto.html y tenis.html, respectivamente(páginas que
aún no se han creado).
Es ya un buen momento para que veas cómo queda tu sitio web
cuando se accede a él desde un navegador. Puedes hacerlo con
las distintas opciones de la barra de modos de vista, o mejor pulsa
el botón navegar de la barra de navegación.

PASO 5: El contenido de la página inicial(index.html).
1. Haz clic con el botón derecho del ratón sobre la celda central, la que
albergará el contenido. Elige Propiedades de la celda de la tabla.
2. En la ventana que aparece, sobre a pestaña Celda, en el apartado
Alineación del contenido, Vertical, elige Superior.
3. Sitúate en la celda de la central, escribe “BIENVENIDO A MI WEB” y
pulsa intro. Dale color verde oscuro y aplícale Título 1.
4. Debajo, escribe “Aquí encontrarás información interesante de mis
deportes favoritos”. Centra este texto.
5. Debajo inserta una tabla de dos filas y tres columnas, con un ancho del
100%.
6. En las celdas superiores, inserta las siguientes imágenes, una en cada
celda: P3_E5_Fulbol.jpg,P3_E5_BALONCESTO.JPG y
P3_E5_Tenis.jpg. y en las celdas inferiores escribe el nombre de
cada uno de los deportes que representa
La página inicial , que hemos llamado index.html, servirá como bienvenida.
Además, en ella informaremos al visitante de qué es lo que va a encontrar
en nuestro sitio web.

PASO 5: El contenido de la página inicial(index.html).
7. Debajo de esta tabla, escribe “Elige en el menú principal de la izquierda el deporte en
que estés interesado. Para volver a esta página inicial debes pulsar en Inicio”. Pulsa
un par de veces Intro.
8. Al final, escribe “Espero que disfrutes”.
9. Guarda la página con el botón “Guardar”.

PASO 6: El contenido de la página de
fútbol(fútbol.html).
1. Pulsa el botón Nuevo de la barra de redacción. Aparecerá en una pestaña
nueva del área de trabajo un documento en blanco.
2. Como hicimos al principio, vamos a guardar la página antes de empezar a
rellenarla de contenido. Pulsa el botón Guardar.
3. Primero te pide el título de la página;escribe “Fútbol”.
4. Después deberás darle un nombre; Llámala futbol.html. Asegúrate de
guardarla en en la misma carpeta que las anteriores, en tu sitio web.
5. El siguiente paso es dar a la página la misma estructura que a la anterior,
repitiendo los contenidos de la cabecera, menú y el pie de página.

6. Una vez preparada la página, escribe “ FÚTBOL” como titular al principio de la
celda de contenido. Hazlo con las mismas características de “ BIENVENIDO A
MI WEB “ en la página inicial.
7. Accede a la página web es.wikipedia.org y escribe “fútbol” en el buscador para
coger información sobre este deporte.
8. Copia en tu página los dos primeros párrafos, por ejemplo, e inserta entre ellos
alguna imagen, al principio o al final. Puedes utilizar la imagen
P3_E6_Futbol2.jpg de la carpeta img o cualquier otra. No olvides que para
utilizar una imagen debes tenerla en la carpeta img de tu sitio web.
9. Justifica todo el texto a izquierda y derecha pulsando el botón Alinea
justificando ambos márgenes de la barra de formato.
Por último, al final de la página vamos a añadir algunos hiperenlaces a otras
páginas web de internet que traten sobre el mismo tema. Esto es algo muy
habitual; la mayoría de páginas web que tratan sobre un tema cualquiera tienen
tienen una sección de páginas web seleccionadas por el autor para que el
visitante pueda profundizar sobre el tema.

10. Escribe al final de la página “Para saber más:” y ponlo como Titular 3.
11. Los enlaces a páginas web externas los presentaremos con una lista
de viñetas.Pulsa el botón Lista de viñetas de la barra de formato.
12. La primera será un enlace a la página web de la FIFA. Escribe “FIFA”
(este texto hará de enlace). Selecciona el texto con el ratón y pulsa
Enlace de la barra de redacción. En la ventana que se abre , escribe
http://www.fifa.com.
13. La segunda será un enlace a la Liga de Fútbol Profesional. Pulsa intro
para crear una nueva línea en la lista y escribe “Liga de fútbol
Profesional”. Selecciona este texto y pulsa el botón enlace. En la
ventana que se abre, escribe http://www.lfp.es.
14. Guarda la página.
Un enlace o hipervínculo se compone de dos partes: el texto o imagen
que hará de enlace, donde el usuario pulsa, y la dirección web de la
página a la que ese enlace debe llevarle.
Ahora es un buen momento para que observes de nuevo cómo se vería tu
página con un navegador; además, ya podrás probar algunos enlaces del
menú principal: Inicio y Fútbol.

KompoZer
Ejercicio 3: Estilos.
Las tendencias en el diseño de las páginas web es separar el contenido de
la apariencia. Esto se consigue con el uso de estilos.
Los estilos son un conjunto de reglas e instrucciones que permiten dar
formato y una apariencia determinados a una página web.
Los estilos pueden definirse y usarse dentro del documento HTML o bien
crearse en un documento independiente, que se vincula a la página
mediante una instrucción que se crea en la cabecera del documento,
entre las etiquetas <head> y </head>.
Estos documentos externos a la página web que contienen los estilos que
se aplicarán a la página se llaman hojas de estilo en cascada o CSS.
Son archivos que llevan la extensión .css.

KompoZer
1. Con KompoZer, abre la página futbol.html del sitio
Mis deportes favoritos que has creado.
2. En la barra de redacción, pulsa el botón CSS.
3. Selecciona, Estilo aplicado a todos los elementos
de tipo. Después despliega la lista inferior, elige
h2(titulo2) y pulsa Crear regla de estilo. Esto
provocará que aparezca en la zona izquierda una
entrada llamada Hoja de estilo interna y que de ella
cuelgue una entrada: h2. esto significa que vas a
crear un estilo que se va a aplicar a toda las
etiquetas h2 del documento.

KompoZer
4. Ahora, con las pestañas Texto, Fondos,
Bordes,etc., modifica sus características.Por
ejemplo, haz lo siguiente:
a) En la pestaña texto, elige el tipo de letra
predefinido (Arial,Helvética,sans-serif) y
ponle un color verde oscuro y un tamaño de 30
píxeles. En peso de letra elige Negrita, y en
Mayús./Minus.elige Mayúsculas.
b) En la pestaña Fondo, selecciona un color de
fondo verde muy claro.
c) En la pestaña Bordes, selecciona el estilo
Doble con una anchura de 4 píxeles y color
azul oscuro.

KompoZer
5. Guarda el trabajo y observa el resultado con el
navegador.
6. Si vas a la pestaña Código fuente de los modos de
vista y te diriges a la zona superior del documento,
donde está la cabecera (<head>), verás lo que ha
aparecido: el código correspondiente a los estilos
que has definido.

KompoZer
Ejercicios ampliación.
Ejercicio ampliación 1: Completa el sitio web de deportes.Debes crear
dos páginas más: baloncesto.html y tenis.html. Diseña algunas
reglas de estilo en todas las página para que sean más
personalizadas.
Ejercicio ampliación 2: Insertar una presentación de Internet.
1. Entra en www.slideshare.net y, en el buscador, escribe “tenis”.
2. Pulsa sobre el primero de los resultados.
3. Haz clic sobre Embed y luego pulsa Copy para copiar la URL.
4. En el código fuente de tu página de tenis, después del título, pega el contenido
en el portapapeles.

Publicar en Internet
Para que nuestro sitio web pueda ser visitado desde cualquier lugar del
mundo con conexión a internet necesitamos alojarlo en un servidor y
que ese servidor nos dé una dirección web o URL que nos sirve para
acceder a nuestro sitio web.
El proceso de alojar nuestro sitio web local en un servidor se conoce con
el nombre de transferencia de ficheros o FTP.
Práctica: Conseguir un servidor.
Lo haremos con byethost. (Mirar documento byethost.doc)
1. Accede con tu navegador a la página www.byethost.es
2. Elige signup for free hosting.
3. Llegará a una página en la que te piden nombre de usuario y contraseña
algunos datos más: una dirección de correo real y una pregunta secreta que se
utilizará en el cao de que no recuerdes tu contraseña. Pulsa Registrar.
4. Nos mandarán un correo a la dirección dada en el registro para activar el
espacio. Después de la activación nos llegará un correo con los datos
necesarios para manejar el espacio web (servidor FTP, usuario FTP, URL
del sitio web http://nombreusuario.byethost<nn>.com,..).

Instalar Filezilla
Vamos a instalar un cliente FTP que se llama Filezilla
Práctica: Instalar Filezilla y transferencia de ficheros (FTP).
1. Descargar el software de la página de la asignatura:
Filezilla_3.5.3_win32_setup.exe.
2. Hacer doble clic con el ratón y se lanza proceso de instalación.
3. Abre el programa Filezilla.
4. En la zona superior, introduce los siguientes datos: en Servidor, escribe
ftp.byethost<nn>.com; en Nombre de usuario, pon el FTP login que te mandaron
en el proceso de activación; en Contraseña, escribe la contraseña de FTP que te
mandaron en el proceso de activación; por último deja en blanco la casilla
correspondiente a Puerto.
5. Pulsa el botón Conexión rápida. Observarás que inmediatamente debajo se
suceden a cierta velocidad una serie de líneas y mensajes: Filezilla está pidiendo
permiso para conectarse con el servidor. Si todo va bien, aparecerá el mensaje
“directorio listado correctamente”.

Instalar Filezilla
Práctica: Instalar Filezilla y transferencia de ficheros (FTP).
4. Observa : en la zona de la
izquierda tienes los archivos y
carpetas de tu ordenador, y en la
derecha, el ordenador remoto, con
el que acabas de conectar.
5. En la zona de carpetas(a la
izquierda), busca la carpeta donde
creaste tu sitio web local y sitúate
en ella. Debajo aparecerán los
archivos del sitio.
6. Selecciona todos los archivos y
carpetas de tu sitio web local con el
ratón y, sin soltarlos, arrástralos
hasta la zona del sitio remoto.
Empezará la transferencia.
Ya tienes el sitio web remoto accesible, para comprobarlo, abre tu navegador y
escribe la dirección de tu sitio web.

Accesibilidad y estándares web
Estándares de publicación web.W3C
W3C es una comunidad internacional de expertos que se encarga de organizar,
desarrollar e investigar todo lo que tenga que ver con la Web.
Su objetivo es buscar standares, por ejemplo, direcciones URL, el lenguaje HTML ,
las hojas de estilo CSS,…, con el fin de impedir que cada país, organismo o
corporación apostara por su propia tipo de tecnología.
Accesibilidad Web.
La accesibilidad web es un concepto que se refiere a la posibilidad de acceso a la
información en igualdad de condiciones.
Dentro del W3C existe un grupo de trabajo llamado WAI que vela por la accesibilidad
web, encargándose de que los contenidos web son accesibles a cualquier usuario.
Para conseguirlo la WAI publica periódicamente unas reglas que indican cómo hacer
más accesibles sus páginas web. Estas reglas son las WCAG.

Accesibilidad y estándares web
Accesibilidad Web.
Dependiendo del grado de cumplimiento de las pautas de accesibilidad WCAG, la
WAI otorga a las páginas web distintos niveles de accesibilidad:
Nivel A ( o prioridad 1), que el menor grado de cumplimientos de estas pautas;
nivel AA ( o prioridad 2); nivel AAA (o prioridad 3), que es el de mayor grado
de cumplimiento de dichas pautas.
Ejercicio:
Las webs www.sidar.org/hera y www.tawdis.net se dedican a analizar la
accesibilidad de las páginas web. Solo tienes que introducir la URL de una
página web en la casilla indicada y seleccionar el nivel de accesibilidad que
deseas para el análisis.
Analiza la accesibilidad de prioridad 1 (nivel A) de página de deportes que has
creado.

Qué es una página web? Guía básica

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a Qué es una página web? Guía básica

Similar a Qué es una página web? Guía básica (20)

Último

Último (20)

Qué es una página web? Guía básica