Archivo de la etiqueta: web

Solución a la actividad creación de página web con HTML. Provincias de Andalucía.


Recientemente planteé una actividad para crear una página web en HTML sobre las provincias de Andalucía.

Puedes consultar la solución completa haciendo click sobre la imagen de abajo, descargándose de esta forma, el código HTML completo.

htmlprovinciasandalucia

Creación de página web con HTML. Provincias de Andalucía.


Para repasar para la próxima prueba de HTML, vamos a confeccionar una web con el aspecto que muestra la imagen de abajo.

provincias_andalucia

La página web tiene las siguientes características:

  • La web tendrá el título “Provincias andaluzas”.
  • Se trata de mostrar una estética en la que predominen los colores blanco y verde.
  • En la parte superior, y sobre fondo verde, tenemos dos tipos de encabezados, y en la parte central, y en fondo blanco, el texto se escribe con letra más pequeña y en cursiva. Todas las frases estarán centradas.
  • Dividiendo las diferentes partes de la web aparecen rayas horizontales de color verde.
  • La web presenta una lista con los nombres de las ocho provincias de Andalucía, incluyendo enlaces a la página de la Wikipedia correspondiente a cada provincia. El hiperenlace se configurará en negrita, siendo de color blanco y no azul, como se configura por defecto. La lista estará centrada.
  • La web muestra también un panel de imágenes de las provincias andaluzas, realizado a partir de una tabla. Cada imagen tiene un tamaño de 150×150 píxeles, excepto las imágenes laterales, que se presentan con un tamaño de 200×300 píxeles. Cada imagen incluirá un texto alternativo con el nombre de la provincia, así como un hiperenlace a la web de la Wikipedia utilizado en la lista de arriba.
  • En la parte inferior y alineado a la derecha se mostrará el nombre del autor o autora, así como un enlace a nuestro blog. Este texto estará en cursiva y el enlace deberá configurarse de color verde, así como el nombre del autor o autora.

HTML y CSS


El lenguaje HTML consiste en un conjunto de etiquetas predefinidas que el navegador web interpreta a la hora de generar una página para que sea visualizada.

html

Asimismo, el CSS es el lenguaje utilizado para definir el modo de presentación del código HTML de una página web.

En la red podemos encontrar multitud de recursos sobre estos lenguajes. Como material complementario he seleccionado unos sitios que me han parecido interesantes.

css_html

En la página web de Alexander Iribar,  se presenta la información paso a paso y con aplicaciones prácticas. Es un buen sitio para aprender los conceptos fundamentales. Los puntos a trabajar son:

  1. Cómo crear una página web.
  2. Algunos componentes fundamentales.
  3. Información complementaria.
  4. CSS: Cascade style sheet.

Además en estos dos enlaces de la web HTML.net se encuentran alojados unos cursos básicos sobre estos lenguajes:

  1. Tutorial HTML.
  2. Tutorial CSS.

 

 

Creación de página web


El alumnado de 4º de Diversificación realizará esta práctica para evaluar su aprendizaje en la unidad didáctica dedicada a creación de páginas web. Se trabajará con el editor de páginas web NVU.

Así, deberéis hacer una web sobre cualquier tema con las siguientes condiciones:

a) La web tendrá como mínimo cinco páginas.

b) Cada página mostrará al menos una imagen.

c) La web incluirá tres hiperenlaces relacionados con el tema de la misma.

d) Las páginas de tu sitio web estarán enlazadas entre sí.

Recuerda que debes crear una carpeta que contenga todos los archivos html. Nombra esta carpeta como WEBAPELLIDOS. La página principal debe tener el nombre de index y te recomiendo que las imágenes las guardes en una subcarpeta de recursos. Una vez terminado, comprime la carpeta y envíala a la dirección de correo josempanadero@gmail.com

Los criterios de evaluación son los siguientes:

– Contenido (redacción propia y originalidad). 4 puntos.

– Formato……………………………………………….. 3 puntos.

– Inclusión de imágenes ……………………………. 1 punto.

– Enlaces externos……………………………………. 1 punto.

– Enlace entre páginas ………………………………. 1 punto.

Finalmente, si queréis publicar vuestra web, el siguiente enlace os puede ser de utilidad: http://www.awardspace.com

Estructuras 1º ESO


Para finalizar la unidad de estructuras vamos a trabajar en esta web. Además de contenidos se plantean una serie de actividades interesantes para trabajarlas con el ordenador.

Alojamiento de página web.


En 4º de la ESO, el alumnado está elaborando su propia web. Una vez diseñada tendremos que alojarla en un servidor para que pueda visualizarse.

Para alojar una página web existen varias opciones en la red. Una de ellas es http://www.bravenet.com. Los pasos del proceso son los siguientes:

1. Entrar en www.bravenet.com.

2. Registrarse (JOIN BRAVENET).

3. Una vez nos hemos registrado seleccionar “GET FREE HOSTING”.

4. Activar la opción “BUILD A NEW WEBSITE” y “USE A SUBDOMAIN”.

5. Subir los archivos en “FILE MANAGER” seleccionando “UPLOAD FILES”.

6. En otras nuevas sesiones entramos en “WEBSITES” y “FILE MANAGER” para subir o gestionar otros archivos.

Práctica de creación de página web con NVU.


El alumnado de 4º de la ESO realizará esta práctica para evaluar su aprendizaje en la unidad didáctica dedicada a creación de páginas web.

Así, deberéis hacer una web sobre cualquier tema con las siguientes condiciones:

a) La web tendrá como mínimo cinco páginas.

b) Cada página tendrá enlaces internos para subir y bajar al inicio y al final de la página.

c) Cada página mostrará al menos una imagen (150 píxeles de ancho y alto).

d) La web incluirá tres hiperenlaces relacionados con el tema de la misma.

e) Las páginas de tu sitio web estarán enlazadas entre sí.

f) La web debe incluir un mapa de imagen.

g) La web tendrá al menos dos vídeos, insertando también enlaces a los mismos.

h) Deberás publicar la web en http://www.bravenet.com.

Todas las tablas tendrán de ancho 700 píxeles.

Los criterios de evaluación son los siguientes:

– Contenido (redacción propia y originalidad). 2 puntos.

– Formato……………………………………………….. 1 punto.

– Inclusión de imágenes ……………………………. 1 punto.

– Enlaces internos…………………………………….. 1 punto.

– Enlaces externos……………………………………. o´5 puntos.

– Enlace entre páginas ………………………………. 1 punto.

– Mapa de imagen …………………………………….. 1´5 puntos.

– Inclusión de vídeos ……………………………….. 1 punto.

– Publicación ………………………………………….. 1 punto.