¿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.

¿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 2. botón derecho/ver código fuente

Etiquetas HTML Etiqueta inicial Contenido
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 Ver\có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
<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
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
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 Ejercicio 2: Descargar e instalar 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. Abre tu navegador y entra en Haz clic sobre download para Windows. Elige Guardar. Elige carpeta. 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: CABECERA MENÚ CONTENIDO PIE DE PAGINA

PASO 1: Diseñar la estructura de la página.
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. Abre el programa KompoZer. 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. 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 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.

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ú. 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. 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.

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).
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. 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

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).
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.

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. 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 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 14. Guarda la página. 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.

Con KompoZer, abre la página futbol.html del sitio Mis deportes favoritos que has creado. En la barra de redacción, pulsa el botón CSS. 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.

4. Ahora, con las pestañas Texto, Fondos, Bordes,etc., modifica sus características.Por ejemplo, haz lo siguiente: 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. En la pestaña Fondo, selecciona un color de fondo verde muy claro. En la pestaña Bordes, selecciona el estilo Doble con una anchura de 4 píxeles y color azul oscuro.

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. Entra en y, en el buscador, escribe “tenis”. Pulsa sobre el primero de los resultados. Haz clic sobre Embed y luego pulsa Copy para copiar la URL. 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 Práctica: Conseguir un servidor.
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) Accede con tu navegador a la página Elige signup for free hosting. 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. 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

Instalar Filezilla Vamos a instalar un cliente FTP que se llama Filezilla Práctica: Instalar Filezilla y transferencia de ficheros (FTP). Descargar el software de la página de la asignatura: Filezilla_3.5.3_win32_setup.exe. Hacer doble clic con el ratón y se lanza proceso de instalación. Abre el programa Filezilla. 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. 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 y 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? Es un documento digital que puede contener texto, imágenes, vídeos,….., y además tiene distribuidos a lo largo del documento enlaces.

Presentaciones similares

Presentación del tema: "¿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."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

¿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.

Presentaciones similares

Presentación del tema: "¿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."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback