Protegido: Prueba de HTML


Este contenido está protegido por contraseña. Para verlo introduce tu contraseña a continuación:

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.

Tabla con imágenes incluyendo enlaces en HTML


Queremos conseguir una tabla que contenga imágenes, y que a su vez, enlacen a páginas web. Además, queremos incluir un enlace debajo de la tabla.

Un ejemplo puede ser éste:

tablaconimagenesyenlaces

Para ello, vamos a utilizar las siguientes etiquetas:

<table> Tabla, se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

<tr> Table row, es decir, indica que comenzamos una fila en la tabla.

<td> Contenido de la celda.

<border> Atributo aplicado a la etiqueta <table> para configurar el grosor de los bordes de la tabla.

<rowspan> Atributo aplicado a la etiqueta <td>para unir filas.

<colspan> Atributo aplicado a la etiqueta <td>para unir columnas.

<img> Etiqueta que sirve para incluir imágenes.

<src> Atributo de la etiqueta <img> que especifica la ruta de la imagen.

<width> Atributo que establece la anchura de la imagen.

<height> Atributo que señala la altura de la imagen.

<alt> Atributo aplicado a la etiqueta <img> para mostrar un texto alternativo a la imagen.

<a> Etiqueta utilizada para configurar enlaces.

<href> Atributo usado para señalar la ruta hacia la página que enlazará la etiqueta <a>.

El código para configurar la tabla arriba es el que se muestra abajo.

htmltablaimagenesenlaces

 

 

Protegido: Prueba de Tecnologías de la Comunicación


Este contenido está protegido por contraseña. Para verlo introduce tu contraseña a continuación:

Realizar tablas uniendo celdas en HTML


Para realizar una tabla uniendo celdas en HTML utilizaremos las siguientes etiquetas:

<table> Tabla, se emplea para estructurar una serie de datos alineados según un esquema de filas y columnas.

<tr> Table row, es decir, indica que comenzamos una fila en la tabla.

<td> Contenido de la celda.

<border> Atributo aplicado a la etiqueta <table> para configurar el grosor de los bordes de la tabla.

<rowspan> Atributo aplicado a la etiqueta <td>para unir filas.

<colspan> Atributo aplicado a la etiqueta <td>para unir columnas.

Así, en la actividad trabajada en clase, queríamos obtener una tabla como la que aparece abajo.

captura-de-pantalla-de-2016-11-24-135820

El código HTML para generar esa tabla es el que aparece en esta imagen:

captura-de-pantalla-de-2016-11-24-140551

Lista anidada con tres niveles en HTML


En esta práctica queremos anidar hasta tres niveles de listas ordenadas, situando en cada nivel un tipo de numeración diferente. Por ejemplo, una lista como la que aparece más abajo.

listaanidadatresniveles

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<ol> Lista ordenada.

<li> Elemento de la lista.

<meta charset =”UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es aconsejable presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Asimismo, tendremos que cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

htmllistaanidadatresniveles

Listas anidadas y edición de texto en HTML


Vamos a realizar una práctica para presentar una lista anidada con una edición de texto variada en código HTML.

En primer lugar queremos mostrar en una página web la siguiente lista:

listaanidada

Para ello vamos a necesitar las siguientes etiquetas del código HTML:

<div> División, es decir, seleccionar una sección de la página web.

<h1> Encabezado 1.

<ol> Lista ordenada.

<ul> Lista desordenada.

<u> Subrayado.

<em> Cursiva.

<strong> Negrita.

<sub> Subíndice.

<sup> Superíndice.

<li> Elemento de la lista.

<meta charset =”UTF-8″> Se emplea para indicarle al navegador el tipo de codificación de caracteres, y no tener problemas con los caracteres especiales, como las tildes.

Es muy importante presentar el código de una forma ordenada y estructurada para mejorar la comprensión del mismo.

Además, debemos cerrar las etiquetas abiertas cuando no queramos que sigan haciendo su función.

El código HTML para la lista anidada de arriba es el siguiente:

htmllistaanidada

 

Trabajo sobre el GPS


El sistema de posicionamiento global (GPS) nos permite referenciar nuestra posición en cualquier punto de la superficie terrestre.

gps

Vamos a realizar un trabajo para analizar este objeto tecnológico. Para ello se tendrán que completar los siguientes epígrafes:

  1. Historia.
  2. Características técnicas y principios de funcionamiento.
  3. Aplicaciones.

En la red podemos encontrar una gran cantidad de información sobre el GPS. Para empezar os propongo una serie de enlaces:

¿Cómo funciona el GPS? Muy Interesante.

Cómo funciona el GPS. Gutovnik.com.

Cómo funciona el GPS. Miguel Ghezzi.

Infografía. Objetoeducacionais2.

Infografía. Inforad.net.

Infografía. Catedu.es.

Además, este vídeo de TiempoZero os puede aclarar los detalles del funcionamiento de este sistema de posicionamiento.