Creació del vostre primer lloc web: 10 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

En aquest tutorial aprendreu a construir una pàgina web bàsica que tingui un full d'estil enllaçat i un fitxer javascript interactiu.

Pas 1: crear la vostra carpeta

Creeu una carpeta per emmagatzemar els fitxers que crearem. No dubteu a anomenar-lo com vulgueu, recordeu on es troba, perquè desarem fitxers més endavant.

Pas 2: creació del primer fitxer

Obriu el vostre editor de text preferit. En el meu cas, simplement utilitzaré el bloc de notes integrat de Windows 10. Un cop tingueu un fitxer nou, escriviu el següent:

Aquesta és la meva primera pàgina web, proporcionada per un instructiu

Això és el que es coneix com a etiqueta HTML. Significa l’encapçalament 1. El text que posem dins d’aquesta etiqueta apareixerà com un encapçalament a la pàgina. S'obre i es tanca així. El text entre les dues etiquetes és el que es mostrarà al navegador web. La part que diu està donant a aquesta etiqueta un atribut que farem referència al pas x. Un cop fet això, continueu i deseu el fitxer a la carpeta que hem creat al pas 1 com a index.html.

Pas 3: obriu el fitxer

Ara que hem completat, navegueu al fitxer de la carpeta que hem creat, feu clic amb el botó dret del ratolí i seleccioneu l'opció "obre amb" i seleccioneu el navegador web que utilitzeu. En el meu cas es tracta de google chrome. Ara mireu els treballs del vostre treball fins ara!

Pas 4: dissenyar la pàgina

Tal com és, el nostre lloc web és força senzill. Afegirem el que es coneix com a full d’estil en cascada per condimentar una mica les coses. Creeu un fitxer de text nou i escriviu el següent:

h1 {color: blau; text-align: centre;}

El que estem dient al navegador aquí és trobar qualsevol element en una etiqueta h1 (que hem après al pas 2), donar-li un color blau i alinear-lo al centre de la pàgina. Deseu aquest fitxer a la carpeta que vam crear al pas 1 com a style.css.

Pas 5: enllaceu Style.css amb Your Index.html

En aquest moment tenim dos fitxers separats que no es coneixen. Hem d’indicar al nostre fitxer index.html que tenim un fitxer style.css al qual volem que faci referència i que agafi una mica d’estil. Per fer-ho, obrirem el nostre fitxer index.html al nostre editor de text i, per sobre de la nostra etiqueta h1, afegirem el que es coneix com a etiqueta d’enllaç. L'etiqueta d'enllaç funciona tal com implica el seu homònim, enllaça amb alguna cosa. En el nostre cas un full d’estil. Endavant i escriviu. L'etiqueta d'enllaç és una etiqueta de tancament automàtic, de manera que no cal una etiqueta final. El rel significa relació i href indica al fitxer d’índex on es troba el fitxer extern al qual fem referència. Ara deseu el fitxer index.html.

Pas 6: visualitzeu la pàgina d'estil nou

Torneu a visitar el pas 3 i torneu a carregar la pàgina web i feu una ullada a com es reflecteixen els canvis.

Pas 7: creació d'un botó

Torneu a obrir el fitxer index.html a l'editor de text i escriviu el següent:

Feu clic a mi!

i deseu el fitxer. Això crea un element de botó a la pàgina. Un cop desat, torneu a obrir el fitxer tal com es mostra al pas 3 i assegureu-vos que el botó es troba a la part inferior esquerra de la pàgina.

Pas 8: creeu el fitxer Javascript

Per últim, crearem el nostre fitxer javascript. Això és el que farà que el nostre lloc sigui interactiu. Obriu un editor de text i escriviu el següent:

document.querySelector ("botó #"). addEventListener ("clic", funció () {

document.querySelector ("# heading"). innerText = "Canviar el títol sobre la marxa"

})

El que fem és demanar al document que ens trobi un element amb l'identificador de botó, i farem que el botó respongui a un esdeveniment de clic canviant un text d'elements amb l'ID de capçalera a "Canviar el capçalera al vol ". Deseu el fitxer com a button.js a la carpeta que vam crear al pas 1.

Pas 9: enllaceu els fitxers Javascript i índex

Tal com vam fer amb el fitxer style.css, hem d’explicar al nostre fitxer index.html el nostre fitxer javascript. A la part inferior de tot el que hem fet fins ara, escriviu el següent:

L'etiqueta de script ens permet afegir un llenguatge de script (en el nostre cas, javascript) per proporcionar funcionalitat a la nostra pàgina. Li estem dient que busqui un fitxer anomenat button.js i que afegeixi tot el codi que conté al nostre fitxer d'índex. Un cop ho hàgiu escrit, deseu el fitxer i torneu-lo a obrir, tal com es mostra al pas 3.

Pas 10: proveu el botó de creació recent

Ara seguiu endavant i feu clic al botó i observeu com canvia el títol.

Enhorabona !! Ara heu creat la vostra primera pàgina web interactiva. Em pregunto fins a quin punt ho podríeu fer sabent el que sabeu ara ??