Ejercicios Básicos de HTML y CSS

Estos son ejercicios básicos para usar las etiquetas HTML en páginas muy elementales. Se trata de crear páginas muy simples con algunas etiquetas de formato, enlaces imágenes...

Cada ejercicio tiene una solución, por supuesto no será la única, pero te puede servir de modelo para ver como debe quedar el resultado.

¿Te quedan dudas?¿Necesitas ayuda? Estamos deseando escucharte  Contactar
 

Página simple

Solo se pide que crees una página cuyo título sea "Mi primera página". El contenido será un párrafo con este texto:

Esta es mi primera página web

Párrafos y líneas

Crea una página web que muestre en en la primera línea del cuerpo de la página un título, con su etiqueta h1, "Mi primera página Web". En un párrafo a continuación se mostrará el texto:

Mi primera página web con algo más de texto.
Este párrafo está formado por dos lineas.

Es decir el párrafo con el contenido deberá tener 2 líneas. El título de la página será "Página Web: párrafos y lineas".

Atributos

Crea una página web con título Destacar texto con negritas. El contenido de la página debe tener una primera linea con un titular h1 Texto en negrita.El contendio del cuerpo es como se indica aquí

Sevilla
Sevilla es la capital de la Andalucía. Está atravesada por el río Guadalquivir y es famosa por la fería de Abril entre otros atractivos.

Es decir la palabra Sevilla debe quedar en negrita en un párrafo. El párrafo siguiente es la descripción que va en texto normal.

Enfatizados

Cea una página con título Enfatizar texto. En la primera linea coloca un titular con el texto Enfatizados y cursivas. El texto del cuerpo de la página irá en dos párrafos como se muestra aquí:

Enfatizar un texto visualmente es ponerlo en cursiva o itálica, es decir que la fuente aparece algo inclinada.

Visualmente es lo mismo itálica que enfatizado, pero HTML 5 sólo da significado semántico al enfatizado

Utiliza adecuadamente las etiquetas para itálica y para enfásis.

Los enlaces

Crea una página web de título Mis primeros enlaces. En la primera linea le pondremos un titular de nivel 1 con el texto Enlaces  a secciones. El cuerpo de la página contendrá tres párrafos, cada uno contendrá un enlace a la url que se indica a continuación con el texto que figura a su lado

url: /tutorhtml5/07b-etiquetas-formato.htm, Etiquetas de formato

url: /tutorhtml5/04-head.htm, Sección head

url: /tutorhtml5/05-body-html5.htm, Sección Body

Es decir se vrá una lista de tres enlaces. Coprueba que funcionan.

Las listas

Esta página que vas a construir tiene como título Listas sin ordenar. En el cuerpo aparecerá como cabecera de nivel uno (h1) la frase Series de Televisión, debajo un subtítulo de nivel 3 con el texto "Plataforma ICP". Finalmente aparecerá la llista con los títulos que siguen:

Juego de sillas

Los barítonos

La casa de plástico

Expediente Z

Lista ordenada

Esta será una página para crear una lista ordenada, es decir, con un número a la izquierda de cada elemento. El título de la página será Listas Ordenadas. Como primera linea aparecerá un titular de nivel 1 con el texto Orden de salida. En el cuerpo de la página tendremos la lista con el orden de llegada de una carrera: un número y los nombres que se indican abajo

María, dorsal 102

Luisa, dorsal 104

Ana, dorsal 169

Carmen, dorsal 308

Mi primera página con imágenes

Vas a crear una página web cuyo título será Pon una imagen en tu web. En el cuerpo de la página usaremos una linea para la cabecera que será un encabezado de nivel 1 subrayado con el texto Mi primera imagen web. Debajo vas a colocar un párrafo que contendrá una imagen, la imagen está en este servidor en la carpeta imgs  y el nombre es arboles.png. El atributo alt contendrá el texto Árboles verdes

Al crear esta página en tu servidor debes usar una url para la imagen situada en tu propio sitio local, si no lo haces la imagen puede que no se vea aunque esté bien codificado.

Imagen con enlace

Crea una página web con título Una imagen para un link. En la primera linea colocas un encabezado de nivel 1 con el texto Links e imágenes. En un párrafo posterior vas a colocar un enlace, pero en lugar de texto ancla lo que llevará será un imagen. El url de la imagen será en este dominio en la carpeta imgs con el nombre flecha-link.png. El enlace deberá apuntar a esta página de ejercicios.

Como en el ejercicio anterior en tu entorno de trabajo local elige una imagen que se encuentre en tu servidor para evitar errores de red que pudieran aparecer aunque la página esté bien escrita.

Tabla de precios

Crea una página con el título Precios de alojamiento. La página comenzará con una linea con el encabezamiento de nivel 1 con el texto Nuestros planes. En una segunda linea tendremos otro bloque de encabezado esta vez de nivel 3 con el texto: Lista de precios. La tabla va a tener tres columnas, cada columna tiene una celda de cabecera:

columna 1: texto del encabezado Nombre

columna 2: texto del encabezado Capacidad

columna 3: texto del encabezado Precio

Cada linea tendrá por tanto tres celdas con estos datos:

Básico, 1000 Mb, 50€

personal, 2000 Mb, 75€

Comercial, 6000 Mb, 250€