Archivo de la categoría: Diseño y edición de páginas web

Prueba de HTML


La prueba consiste en la creación de una página web que presente el aspecto que se puede ver en la imagen de abajo.

 

prueba_html_santaella

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

  1. La web tendrá el título “Santaella”. (1 punto)
  2. En la parte superior tenemos un encabezado de primer nivel con el texto “Santaella”. Este texto estará centrado y será de color azul. Más abajo, se dispondrá una línea horizontal de color azul para separar esta parte de la web del resto de la página. (1 punto)
  3. Más abajo del encabezamiento principal de la web se mostrará una imagen con el escudo de Santaella, apareciendo centrado. Se tendrá que añadir a la etiqueta de imagen los atributos de anchura 200 píxeles y altura 200 píxeles. El enlace donde está alojada la imagen es:              IMAGEN DEL ESCUDO DE SANTAELLA                (2 puntos)
  4. La web presenta una lista con fiestas populares. Así, con encabezado de segundo nivel y de color azul se mostrará el texto “Fiestas populares”.  A continuación se publicará la lista desordenada con dos fiestas, apareciendo el texto en color azul y en negrita. Las fiestas y los textos son: “La Feria se celebra los días 8, 9 y 10 de septiembre” y “Romería de San Isidro se celebra el 15 de mayo”. (2 puntos)
  5. Además, se publicará una tabla. Para ello, con un encabezado de segundo nivel y de color azul, aparecerá el texto “Datos”. La tabla incluye los textos “Población en 2014” y “Superficie” en color azul y negrita. Los datos “6097 habitantes” y “272 kilómetros cuadrados” se mostrarán en color azul. (2 puntos)
  6. En la parte inferior y con una alineación centrada se dispondrá 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 azul, así como el nombre del autor o autora. Separando esta información del resto de la web se establecerá una línea horizontal de color azul. (2 puntos)
  7. El archivo HTML lo tendrás que adjuntar a un correo que enviarás a josempanadero@gmail.com, con el asunto “Prueba HTML. Nombre y apellidos”.

¡Mucha suerte!

Anuncios

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.

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

 

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.