HTML i CSS

SESSIÓ 7. HTML i CSS

El llenguatge HTML és actiu des de l’any 1991.
Al llarg d’aquests anys ha anat evolucionant fins a la versió actual, HTML 5. Constantment s’hi afegeixen noves funcionalitats i s’ajusten les etiquetes per a facilitar-ne l’ús.

Amb el codi HTML tenim el contingut de la pàgina web, però ara cal donar l’estil a la nostra pàgina: com veurem les icones, quin tamany de lletra farem servir…

Per fer-ho treballarem amb el llenguatge CSS (Cascade Style Sheet), o fulls d’estils en cascada.

○ Activitat 1:

Crea un nou document HTML amb VSCode amb el nom “activitat 1”i
implementa el següent:
● crea un títol del document amb el nom “Llistes i Taules amb HTML”
● dins l’etiqueta body posa un comentari amb mínim dues línees:
Això és una taula amb HMTL
En breu dominaré aquest llenguatge
● crea una llista desordenada de 3 vídeos que trobis interesants a Youtube tenint en compte que cadascun ha d’estar amb un enllaç i el text de l’enllaç ha de ser el títol del vídeo corresponent.
● Crea una taula amb les següents característiques:
○ les columnes seran les següents: “Titol”, “Director”, “Any de realització” i “Enllça a IMDB”
○ has d’incloure almenys 3 entrades de 3 películes o sèries que t’agradin.

○ Activitat 2:

Crea un nou document HTML amb el nom “activitat 2” i implementa
el següent:
● crea un títol del document amb el nom “Formularis amb HTML”
● dins el body crearem el formulari amb els següents camps:
➢ camp de text anomenat “nom i cognom”
➢ camp numèric anomenat “edat”
➢ camp d’àrea de text anomenat “la teva película/serie preferida”
➢ botó d’enviament
➢ botó de reset

○ Activitat 3:

Crea un nou document HTML amb el nom “activitat 3” i implementa
el següent:
● divideix el body en 3 seccions (div)
● Cada secció ha d’incloure el següent:
➢ Secció 1
➢ ha de tenir el títol “Inserció d’imatges amb HTML”
➢ has d’incloure una imatge d’un tema que t’agradi
➢ Secció 2
➢ ha de tenir el títol “Inserció de vídeo amb HTML”
➢ descarrega un vídeo en format .mp4 o .avi i afegeix-ho.

➢ ha d’incloure un id de vídeo, ha de mostrar-se els controls, reproduir-
se automàticament i en bucle, però inicialment sense só.

➢ Secció 3
➢ ha d’incloure el títol “Inserció d’àudio amb HTML”
➢ descarrega qualsevol àudio .mp3
➢ ha d’incloure un id d’àudio que reprodueixi l’àudio que acabes de descarregar, s’han de mostrar els controls, reproduir-se automàticament i en bucle