Davant d'aquestes linies hi ha un >pre< i un >code< que significa que el text a continuacio esta
preformatat es a dir que te un format que no es pot canviar i es un codi que vol dir que el tipus de
lletra serà diferent de tipus monospace que significa que totes les lletres són igual d'amples.
Altres tipus de lletra espoden utilitzar quan no és codi per exemple serifque son una família
de lletres adornaments, a diferéncia de la família sans serif que significa sense adornaments.
Només hi ha aquestes grans famílies de lletres: Monospace per codi, i serif i sans serif per a la resta.
Al principi de tot tenim un >html< i al fianal tenim un >/html< per indicar que és un arxiu html
que significa llenguatge de marques de hipertext -HiperText Markup Language- és hipertext
perqué va més enllà del text, permet: imatges, sons, vídeos, micrófons, teclat, ratolí, etc.
És markup perqué té aquestes marques < >per iniciar i per finalitzar. Al principi de
tot, davant html és pot escriure html lang="en", significa quee el tipus de document
és un html i que està escrcit en anglès.
A la línia 3 trobem l'etiqueta head que significa encapçalament, que és obligatoria al principi i
conté a la línea 4 un comentari que s'escriu . La línea 5 i 6 són etiquetes meta,
que tene metaInformació, informació sobre la informació de la web. La línea 5 és metaInformació sobre
el charset que significa, conjunt de caràcters, que en el nostre cas és UTF8 , que significa 8bit
Unicode Transformation Format, que permet representar lletres i numeros, alfabet grec i llatí entre
altres. La línea 6 és un viewport, que és un codi que permet que es vegi la nostra web correctament
en un móbil, una tablet un ordinador, una televisió gegant, o una pantalla de cinema, perqué indica
width=device-width, és dir que l'ample sigui sempre l'ample del dispositiu.
La línea 7 és un comentari que estem utilitzant bootstrap que és una biblioteca css i javascript
que ens permet fer menús desplegables i botons.
La línea 8 és un css -cascade style sheet- que vol dir fulles d'estil en cascada, que són instruccions
en llenguatge css, que ens dona els colors del text, el tipus de lltra, el tamany de la lletra, els marges
els espais entre botons, etc.
La línia 9 és un títol o title, que apareix a la part superior de la pestanya del navegador.
La línia 10 és el finla de head.
La línia 11 és l'inici de body, que és obligatori, i comença desprès de head.
La línia 12 és un js, arxiu javasript.
la línia 13 nav significa barra de navegació i es reconeguda per Bootstrap. Bootstrap es una biblioteca
que conté molts codis en llenguatge CSS que serveix per fer estils. (tipus de lletra, mida de la lletra,
color de la lletra, espai entre linies, marges...) i Boostrap també es una biblioteca JS que vol dir
JavaScript, es a dir que produeix interactivitatque pots interactuar amb el teclat o amb el ratoli,
per exemple obrint finsestres o obrint menús.
A continuació de nav light, vol dir que es de color clar. Si canviem light per dark es tornara de color
fosc. Dins de la instruccio nav tenim navbar que significa barra de navegació, y tenim bg que vol dir
background. Un logotip s'ha de posarv en un aprtat que es diu nav-brand. La instrucció per posar un logo o
qualsevol altre imatge hem d'escriure img que significa imatge i src que significa source.Source vol dir font
que es el lloc on esta la imatge, i podem controlar la mida de la imatge amb la instrucció width que es
amplada en pixels i hight que es alçada en pixels. Per que no es deformi la imatge hem de fer una escala.
Per exemple si tenim una imatge de 1800 x 1543 pixels i la vull amb una amplada de 800 pixels. He de saber
la escala, divideixo 1800 entre 800, dona 2,25. l'atre número que es l'alçada, 1543 dividit entre 2,25
que dona 685,77 pixels. Com els pixels han de ser números sencers ho tenim que arrodonir a 686 pixels i
quedara una imatge de 800 multiplicat per 686 no deformada. Altres instruccions són dropdown menú que
significa menú desplegable i nav-item que significa apartat o subapartat del menú i està col.locat en una
llista per lo que te la paraula a li. A cada menú tenim enllaç que comença amb href i la direcció a la que
ha de anar i que acaba amb la lletra a dintre dels dos triangulets <>
A la linia 17 hi ha la etiqueta img, que vol dir imatge i ens permet insertar imatge. Aquesta etiqueta
té diferents propietats o perametres.El perametre més important és src perquè significa source, que vol dir el lloc
on està la imatge , Si posa un punt o dos punts seguits , significa que està en una carpeta parl.lela o una carpeta
ficada dintre de una carpeta. També pot posar el src una direcció d'internet on estigui allotjada la imatge.
Dintre de la etiqueta img, hi ha un parametre que es diu width, que significa amplada en pixels de la nostra
imatge i height es la alçada en pixels. S'ha de escriure el numero de pixels en cometes dobles i amb un igual.
Dintre de la etiqueta img també hi ha un parametre que s'anomena alt , que significa text alternatiu a la imatge.
Serveix per descriure la imatge a persones amb problemes de visió. A les persones amb visió els hi serveix si la
imatge està allotjada a un servidor extern i es esborrada com a minim sabrem de que es tracta o si el programador
s'equivoca a l'hora de escriure el nom o l'adreça de l'imatge. No és obligatori, pero pot haver un paràmetre
anomenat class, que vol dir classe. les classes estàn definides, en el nostre cas, a la biblioteca bootstrap i
poden fer que la imatge s'alinii en el centre, a la dreta o a la esquerra i seria la instruccio align-right,
align-left o align-center.
Tenim un codi de la linia 20 a la 22 que correspon a un boto, és un boto de tipus toggler que té dos estats,
un estat és comprimit en forma de tres línias horitzontal i qual cliques sobre ell és desplega el menú, és un navbar,
és a dir, barra de navegació, de tipus colapsable, que vol dir que és pot fer petit o gran depen si el cliquem o no.
És un boto i navbar, toggler, collapsable i icon són paràmetres del botó. Per exemple icon, és la icona que veu
l'usuari amb tres ratlles horitzontals.
A la linia 23 tenim una etiqueta que posa div, que vol dir divisor, que te moltes utilitats, depenent de les
propietats que tingui. És un element molt flexible perque és pot utilitzar per fer moltes coses diferents. Aquest div
fa que apareixi una barra de navegació colapsable dintre de una barra de navegació colapsable que té forma d'icona.
a la linia 24 tenim un codi que comença amb ul, que vol dir llista desordenada. per exemple:
Llista desordenada
- Element 1 d'una llista
- Element 2 d'una llista
Llista ordenada
- Element 1 d'una llista
- Element 2 d'una llista
Fins a la línia 43 tenim dos tipus d'elements principals, que són nav item i nav dropdown, que significa un apartat
senzill o un apartaat desplegable cap abaix
De la linia 44 a a la 47 hi ha un formulari amb la etiqueta form i dintre de l'etiqueta form hi ha unes propietats,
que són les paraules que van a continuació nomes és una classe, és una classe flexible de bootstrap. Dintre del formulari
tenim un altre etiqueta que es diu input que permet que l'usuari escrigui. Dintre de letiqueta input tenim una propietat
que és el tipus de ipute o type, el type és search.
Gravarem un video en el que explicarem els nostres codis. Ho farem a casa. Avui farem un video de prova obtingut de
youtube i el manipularem per posar-ho en neocities o qualsevol altra web. Comprovarem que neocities no accepta videos sense
pagar. Ho solucionarem pujant-ho a un altre web, opendrive, que com el seu nom indica, és més oberta.
A continuació posarem el video que ens dona el codi embed o d'incrustació en un altre web de open drive.
A continuació posarem el codi de inserció del youtube del mateix video.
El primer video és el reproductor html5, aquest reproductor de video té la etiqueta principal de "video"i de propietats
l'amplada "width" i la paraula "controls", que provoca que es vegi el boto de play ambb el temps de reproducció, pantalla
completa, volum i un menú que permet controlar la descarrega del video, la velocitat de la reproducció i que es vegi imatge
a imatge.
El segon video és el reproductor de video de Opendrive. Aquest video és un iframe, un fotograma interactiu, en el sentit
que permet inserir videos. Necessita com a parametres o propietats no només l'amplada, sino també l'alçada "height". Té una
propietat d'estil que és style sense espai al contorn (border0) i sense una ratlleta que marqui el contorn (frameborder=0),
sense permetre que baixem la barra lateral o scrolling. Allowfullscreen permet pantalla completa.
El tercer video és el reproductor de youtube, que és semblant al opendrive, però té més qtiquetes adaptades al mobil.
L'avantatge al primer video es que es totalment personalitzable que es tecnologia html5 video
Detecta el giroscopi que és capaç de saber la posició xyz a l'espai del mòbil i l'acceleròmetre que és capaç de saber si
agito el mòbil o no
<