Ejercicios iniciales de HTML

Ejercicio 1.- (Vídeo 1) Crear página web con el editor phcode.dev (tal cual se hace en el video 1) que contenga un título en color verde y varios párrafos indicandodo cuales son vuestros hobbies (un párrafo por hobby). 

Ejercicio 2.A.- (Vídeo 2) Crear página web con los 10 sitios web que más visites o te gusten. Deberá tener al inicio un título de tipo H1 que sea descriptivo del contenido. 

Cada sitio web aparecerá en un párrafo, en el que se indicará el nombre del sitio (p.e: Instagram, tiktok, ...) una descripción sobre qué buscas en dicho sitio o para qué lo usas, y en la última línea del párrafo un link o la url del sitio (p.e una url es: www.google.es). 

Ejercicio 2.B.- (Vídeo 2) Crear página web describiendo la historia de tus apellidos (de donde provienen, en qué provincias hay más personas con dicho apellidos (cosa que puedes saber consultando el instituto nacional de estadística www.ini.es)), e indicando personas famosas con dichos apellidos. 

Al menos, deberán aparecer 4 párrafos, y al inicio habrá un título tipo H2 describiendo el contenido, bajo el cual habrá una línea de separación del título al primer párrafo. Encima de cada párrafo deberá haber un comentario que lo resuma, pero que no se mostrará al visualizar la página en un navegador.

Ejercicio 3.- (Vídeo 3) Crear página web sobre las asignaturas que estudias este curso. Para cada asignatura, pondrás su título y añadirás un link a la página de AULES de la asignatura (o a una web relacionada con la asignatura) y una foto relacionada con la asignatura.

Para ello, guarda las fotos en la misma carpeta en la que tengas el fichero .html que estés editando, para poder mencionar las fotos directamente en el código html.

Ejercicio 4.- (Vídeo 4) Crear página web sobre la vida de "Pau Gasol" que tenga como mínimo 2 tipos de títulos (H1, H2, H3...) y como mínimo 5 párrafos <p> que tengan las palabras más representativas en negrita o cursiva o subrayada, un título al inicio y que tenga un salto de línea <br> y una línea de separación del título al siguiente párrafo.

Para cada equipo en el que haya jugado, deberás añadir un link a la página web de dicho equipo, además de una foto suya jugando con dicho equipo.

El último párrrafo indicará quién ha realizado la página, la fecha de creación de la misma, empleando la etiqueta <small>.

Ejercicio 5.- (Vídeo 5) La web de tu asignatura de HISTORIA (tendrá una página de índice  con enlaces al resto de páginas, cada una de estas últimas dedicada a cada tema de la asignatura, que tendrá el título del tema y un par de párrafos indicando qué se imparte en cada tema). 

Se recomienda consultar la wikipedia: https://es.wikipedia.org/wiki/Historia

Ejercicio 6.- (Vídeo 6) Crear una página web con la misma estructura que la del vídeo 6. Tanto la imagen como el vídeo que contenga son a tu elección. Puedes descargar imágenes libres de copyright en:

• https://procomun.intef.es/bm/buscador/image/todos

• https://emtic.educarex.es/recursos/usa/banco-de-imagenes

• https://search.creativecommons.org/

y vídeos libres de copyright en:

• https://es.videezy.com/

• https://pixabay.com/es/videos/

• https://dareful.com/

Ejercicio 7.- (Vídeo 7) Lista ingredientes de una receta: paella, cocido, hamburguesa completa..., y para cada ingrediente añadir también su foto.

Ejercicio 8.- (Vídeo 7) Lista pasos para cocinar la receta anterior, añadiendo una foto de cada paso. Puedes buscar un video de la receta e ir capturando imágenes de cada paso.

Para ello, guarda las fotos en la misma carpeta en la que tengas el fichero .html que estés editando, para poder mencionar las fotos directamente en el código html. Por ejemplo: 

<img src="nombreImagenDentroMismaCarpeta.png" alt="TextoQueApareceSiNoCargaLaImagen" width="120" height="90"> 

Ejercicio 9.- (Vídeo 7) La web de tu liga de fútbol, baloncesto, etc con un índice de las jornadas y links a los resultados de cada jornada.

Ejercicio 10.- (Vídeo 7) La web de tu IES (tendrá una página de índice  con enlaces al resto de páginas, cada una de estas últimas dedicada a cada parte del IES: Gym, campo multideporte, huerto, hall central, 1er piso, 2do piso, salidas de emergencia. Para cada parte del IES habrá como mínimo una descripción y una imagen (pueden ser imágenes inventadas).

Dentro de una carpeta, crea el fichero index.html, que contendrá links al resto de páginas.

Dentro de la carpeta anterior, crea el resto de ficheros: gym.html, huerto.html, campo.html...

Dentro de la carpeta anterior guarda las imágenes que vayas a usar en tus páginas web, en caso de necesitarlo.

Ejercicio 11.- (Vídeo 7) La web de tu pueblo o ciudad favorita (tendrá una página de índice con enlaces al resto de páginas, cada una de estas últimas dedicada a el ayuntamiento, el mercado, el polideportivo, la calle mayor/principal, un paraje para pasear que pertenezca al pueblo/ciudad).

Dentro de una carpeta, crea el fichero index.html, que contendrá links al resto de páginas.

Dentro de la carpeta anterior, crea el resto de ficheros: mercado.html, polideportivo.html, calleMayor.html...

Dentro de la carpeta anterior guarda las imágenes que vayas a usar en tus páginas web, en caso de necesitarlo.

Ejercicio 12.- (Vídeo 7) La web de tu empresa (tendrá una página de índice  con enlaces al resto de páginas, cada una de ellas dedicada a un departamento de la empresa. Para cada una de estas últimas, debe aparecer la lista de personas que trabajan en el departamento, a qué se dedica el departamento. Además habrá una página dedicada a mostrar fotos y descripciones de los productos y servicios de la empresa. También habrá una página de contacto indicando el teléfono, dirección, un mapa, un email y una imagen de la parte exterior de la empresa.

Ejercicio 13.- (Vídeo 8) Ejercicios resueltos sobre tablas:  https://oscarmaestre.github.io/lenguajes_marcas/ejercicios/html/anexo_tablas.html

Ejercicio 14.- (Vídeo 8) Crea una página web con el horario semanal de actividades de un gimnasio usando tablas y listas. 

Ejercicio 15.- (Vídeo 8) La web de tus asignaturas, con una página de índice y links a la descripción y temas de cada asignatura.

Ejercicio 16.- (Vídeo 8) Crear página web sobre una calle importante de tu pueblo, que tenga el nombre de alguien famoso o importante para el pueblo ( p.e: Blasco Ibáñez, Joaqui Sorolla, Músico Ginés...) describiendo la historia del personaje, su vida, a qué se dedicaba, donde nació y murió, y fotos de la calle y del personale, y link a la página de la Wikipedia del personaje. 

Al menos, deberán aparecer 4 párrafos, en los cuales estarán marcadas en negrita o subrayadas las palabras más importantes. 

Ejercicio 17.- (Vídeo 8) Crea una página web con el horario semanal de tus clases usando tablas y listas.

Ejercicio 18.- (Vídeo 8) Crea tu currículum vitae (inventate que has estudiado una carrera y que tienes 5 años de experiencia porque ya has trabajado en 3 empresas distintas) usando tablas y listas. Busca ejemplos de currículums en Internet para inspirarte.

Ejercicio 19.- Webs a realizar de la sección "Crea un sitio web completo desde cero" de la página web: 

https://sites.google.com/view/fraferf14/inicio/programaci%C3%B3n/web/googlesites

Ejercicio 20.- Ejercicios extra para practicar online para afianzar conceptos concretos "w3schools": 

https://www.w3schools.com/Html/html_basic.asp

Editores HTML en local: KWrite, VSCode

Compiladores WYSIWYG online (para no tener que crear ficheros .html en local y abrirlos con el navegador):

0.- phcode.dev: Estaba en los videos de YT de aprender HTML5 de "Javier Menoyo - Diseño Web fácil" https://phcode.dev/ <-- EL MEJOR

1.- onlinegdb: Intuitivo y claro.

https://www.onlinegdb.com/online_html_compiler

2.- htmled.it/or: Muy rápido renderizando, casi se pierde la noción de que estás creando código HTML.

https://htmled.it/or/

3.- onecompiler: Tiene botón de RUN y visualizas a la derecha.

https://onecompiler.com/html/