6-HTML/CSS

HTML (HyperText Markup Language) és el llenguatge de marcatge que s’utilitza per crear el contingut estructurat d’una pàgina web. Utilitzes etiquetes HTML per definir elements com ara títols, paràgrafs, enllaços, imatges i altres elements visuals i textuals d’una pàgina web.

Per exemple, aquí tens un exemple senzill d’un document HTML:

 

 

CSS (Cascading Style Sheets) és un llenguatge que s’utilitza per estilitzar i donar format al contingut d’una pàgina web. Amb CSS, pots controlar l’aparença del text, els colors, les mides, la disposició dels elements i molts altres aspectes visuals de la teva pàgina web.

Aquí teniu un exemple senzill de com es pot utilitzar CSS per estilitzar els elements d’un document HTML:

 

 


 

En aquest curs hem hagut de presentar 3 activitats.

 

ACTIVITAT 1

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.

 

Aquest és el codi en html de l’activitat 1 presentada:

 

I aquí es pot veure el resultat de l’activitat:

 


 

ACTIVITAT 2

 

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

 

Aquest és el codi en html de l’activitat 2 presentada:

 

 

I aquí es pot veure el resultat de l’activitat:

 


 

ACTIVITAT 3

 

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.

 

Aquest és el codi en html de l’activitat 3 presentada:

 

 

I aquí es pot veure el resultat de l’activitat:

 

 

 

 

Go to Top