a continuació explicaré el codi d'aquesta web
Davant d'aquestes linies hi ha un >pre< i un >code< que significa que el text a continuació està performatat es a dir, que té un format que no és pot canviar i és un codi que vols dir que el tipus de lletra serà diferent de tipus monosplace que significa que totes les lletres son igual d'amples. Altres tipus de lletra es poden utilitzar quan no és codi, per exemple serif, que són una família de lletres adornaments, a diferéncia de la família sans serif, que signica sense adornaments en francès. Només n'hi ha aquestes grans famílies de lletres: Monospace per codi, serif i sans serif per la resta.
Al principi de tot teni >html< i al finals 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 d'enllà del text, permet: imatges, vídeos,sons, vídeos, micrófons, teclat, ratolí, etc. és markup perqué té aquestes marques <> per iniciar i per acabar. Al principi de tot, davant d'html és pot escriure html lang="en", significa que el tipus de document és un html i que està escrit en anglès.
A la linia tres trobem l'etiqueta head que significa encapçalament, que és obligatòria al principi i conté a la linia 4 un comentari que s'escriu . La linia 5 i 6, són etiquetes meta, que tenen metainformació, informació sobre la informació de la web. La lini 5 és meta informació és informació sobre el charset que sigifica, cojunt de caràcters, que en el nostre cas és UTF8, que significa 8bit Unicode Transformation Formats, que permet representar lletres i números, alfabet Grec i llatí entre altres. La linia 6 és un viewport, que és un codi que permet que es vegi la nostra web correctament en un mòbil, una tablet, un odinador, una televisió gegant, o una pantalla de cinema, perqué indica with=device=width, és a dir que l'ample sigui sempre l'ample del dispositiu. La linia 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ínia 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 lletra, el tamany de lletra, els marges, els espais entre botons, etc.
La línia 9 és el títol o tittle, que apareix en la part superior de la pestanya del navegador.
La línia 10 és el final de head.
La línia 11 és el inici de body, que és obligatori i comença desprès del final de head.
La línia 12 és un js o arxiu javascript.
A la línia 13, nav significa barra de navegació i és reconeguda per Bootstrap. Bootstrap és una biblioteca que conté molts codis en llenguatge CSS, que serveix per fer estils. (tiups de lletra, color de la lletra, espai entre línies, marges...) i Bootstrao també es una biblioteca JS que vol dir JavaScript, es a dir que produeix interactivitat, que pots interactuar amb el teclat o amb el ratolí o amb el teclat, per exemple, obrir finestres o obrir menús. A continuació de nav light, vol dir que és de color clar. Si canviem light per dark és torna de color fosc. Dins de la instrucció nav tenim navbar que significa barra de navegació, i tenim bg que vol dir Background. Un logotip s'ha de posar en un apartat que es diu nav-brand. L'instrucció per posar un logo o qualsevol altre imatge hem d'escriure que img, que significa imatge i src que significa source. Source vol dir font que és el lloc on està l'imatge i podem controlar el tamany de l'imatge amb l'instrucció width que és amplada en pixels i height que és l'alçada en pixels, per que no es deformi l'imatge, s'ha de fer a escala. Per exemple, si tenim una imatge de 1800 x 1543 pixels i la vull amb una amplada de 800 pixels. He de saber l'escala, divideixo 1800 entre 800, dona 2,25. L'altre número que és l'alçada 1543 dividit entre 2,25 que dona 685,77 pixels. Com els fixels han de ser números sencers ho hem de arrodonir a 686 pixels i quedarà una imatge de 800 multiplicat per 686 no deformada.
Altres instruccions són dopdown menú que significa menú desplegable, i nav-item que significa apartat o subapartat del menú i està colocat en una llista per lo que té la paraula li.
A cada menú tenim un enllaç que comença amb a href i la direcció a la que ha d'anar, que serà un apartat de la barra de navegació i que acaba amb la lletra A dintre dels dos triangulets <>
A la linia 17 hi ha l'etiqueta img, que vol dir imatge i ens permet insertar imatges. Aquesta etiqueta, té diferents propietats o parametres. El parametre més important es src, perquè significa source, que vol dir, el lloc on està la imatge, Si posa un punt o dos punts seguits, significca que està en una carpeta paral·lela o una carpeta anterior dintre de la nostra carpeta. També pot posar el src una direcció d'internet on estigui allotjada a la imatge.
Dintre de l'etiqueta img també hi ha un paràmetre que s'anomena alt, que significa text alternatiu a la imatge. Serveix per descriure la imatge a persones amb problemes de visió. I amb les persones amb visió, els hi serveix si la imatge està allotjada a un servidor extern i es esborrada com a mínim sabrem de que es tracta o si el programador s'equivoca a l'hora d'escriure el nom a l'adreça de l'imatge. No obligatori, però 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 l'imatge s'alinii en el centre, a la dreta o a l'esquerra, i seria l'instrucció align-right, align-left, align-center.
Tenim un codi de la linia 20 a la 22 que corrspon a un botó, és un botó de tipus toggler que té dos estats, un estat és comprimit en forma de tres línies horitzontals i quan cliquem sobre ell, es desplega sobre 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 botó 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 línia 23 tenim una etiqueta que és diu div, que vol dir divisor, que té moltes utilitats, depenent de les propietats que tingui, és un elemnt molt flexible, perquè és pot utilitzar per 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 línia 24 tenim un codi que comença amb ul, que vol dir llista desordenada. Per exemple:
Fins a la línia 43 tenim dos tipus d'elements principals, que són nav item i nav down, que significa un apartat senzill o un apartat desplegable cap abaix.
De la línia 44 a 47 hi ha un formulari amb l'etiqueta form n'hi han unas propietats, o paràmetres, que són les paraules que van a continuació només és una classe, és una classe flexible de bootstrap. Dintre de l'etiqueta inpur tenim una propietat que és el tipus de input o type, el type és search, vol dir que és un buscador intern de la nostra web. El placeholder és una altre propietat de input que ens permet que l'usuari vegi una frase que l'ajudi a buscar dintre del recuadre de busqueda. Dintre del formulari hi ha un botó o button i aquest botó té una propietat o paràmetre que s'anomena submit, que és el tipus de botó que permet enviar informació, en el nostre cas, buscar el que volguem trbar
A la línia 50 ens indica final del menú de navegació
Gravarem un vídeo en el que explicarem els nostres codis. Ho farem a casa. Ara farem un vídeo de prova, obtingut de Youtube i el manipularem per posar-ho en neocities o en qualsevol altre web. Comprovarem que neocities ni accepta videos sense pagar. Ho solucionarem pujant-ho a un altra 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 d'inserció de yputube del mateix video
El primer video és el reproductor html5, aquest reproductor de video té l'etiqueta principal de "video" i de propietats, l'amplada "width" i la paraula "controls", queprovoca que es vegi el botó de play amb el temps de resproducció, pantalla completa, volum, i un menú que permet controlar la descàrrega del propi vídeo, la velocitat de resproducció i que vagi d'imatge a imatge.
El segon vídeo és el reproductor de video d'opendrive. Aquest video és un iframe, un programa interactiu en el sentit, que permet inserir videos. Necessita com a parametre o propietats, no només l'amplada, widht, si no l'alçada també height. Té una propietat de estil que es style sense espai al contorn (border 0) 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 etiquetes adaptades al mòbil. L'avantatge del primer video és que es totalment personalitzable perque es tecnologia htlm5 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.