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.
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:
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:
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í
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í:
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
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:
Lista ordenada Aptdo.
Esta será una página para crear una lista ordenada, es decir, con un número a la izquierda de cada elemento. El tíulo 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
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 imagn 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ágnes. 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 enzbbezado 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:
Cada linea tendrá por tanto tres celdas con estos datos: