Construir el vostre propi lloc web per a principiants: 5 passos

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

Tant si alguna vegada heu somiat amb ser programador d’ordinadors com si heu utilitzat alguna vegada un lloc web, ja que gairebé tots som, la tecnologia de la informació s’ha convertit en l’eix vertebrador del negoci. Tot i que la programació pot semblar una mica aterradora al principi, el meu objectiu és ensenyar-vos els fonaments bàsics del disseny web perquè després d’aquest tutorial pugueu crear la vostra pròpia pàgina web. Amb això fora del camí, anem-hi!

Subministraments

• Un ordinador Macintosh o Windows (tot i que també es poden fer servir distribucions de Linux, ara mateix les ometo, ja que és una introducció per a principiants).
• La vostra selecció de l’editor de text (Bloc de notes al Windows, TextEdit al Mac) o la vostra elecció de l’IDE. Segons la meva experiència, he trobat que Visual Studio Code funciona millor per a mi, així que també recomanaria consultar-lo aquí: https://code.visualstudio.com/ per no parlar de que funciona a totes les plataformes del sistema operatiu.

Pas 1: etiquetes i una mica d'història

Un cop hàgiu decidit l’editor de text o l’IDE que escolliu, comencem amb els conceptes bàsics.

Ho creguis o no, el llenguatge de marcatge HTML o hipertext existeix des de fa gairebé 30 anys i cada any ha millorat el llenguatge cada vegada. Ara, potser us preguntareu, com interpreta un navegador què ha de posar a la pantalla? Això es fa en algunes parts:

El format de documents HTML és fàcil. Teniu dues seccions conegudes com a cap i cos. El cap d'un lloc web conté un codi que l'usuari no pot veure. S'utilitza per enllaçar fulls d'estil i declarar altres bits necessaris perquè el lloc es mostri correctament. Seguint el cap, el cos és com sembla, el cos del lloc web. Aquí és on podreu parlar amb la vostra veu i mostrar al públic les vostres fantàstiques habilitats en HTML. Ara no és tan senzill com escriure text al cos i mostrar-lo exactament de la manera que vulgueu, però és gairebé tan fàcil en cert sentit amb l’ús de coses que anomenem etiquetes.

Aquí hi ha algunes de les etiquetes HTML bàsiques:

• title: que s’utilitza per indicar al navegador quin és el títol de la pàgina. Això també és el que veieu quan mireu la pestanya d'una pàgina web.
• h1, h2, h3, h4: s’utilitzen per a diferents mides de capçaleres, essent h1 la més gran i h4 la més petita. En tractaré més sobre això a la següent secció.
• p - paràgraf, utilitzat per escriure paràgrafs de text. Com paràgrafs en un paper.
• br - break, que insereix un salt en línia amb el text.
• a: s'utilitza per crear enllaços a altres pàgines, com ara un enllaç on es pot fer clic.
• img: s’utilitza per enllaçar una imatge a la pàgina web.
• ul, ol, li: llistes sense ordenar, llistes ordenades i elements de llista.
• : S’utilitza per fer comentaris en línia al codi que l’usuari final no podrà veure.

I aquí teniu algunes etiquetes CSS (visuals):

• color: s'utilitza per assignar un color específic a un element o conjunt concret de la pàgina web.
• font-size: s’utilitza per canviar la mida de la font a la pàgina.
• color de fons: s'utilitza per canviar el color de fons d'un determinat element o de tota la pàgina.

També us he adjuntat un petit full de trucs que us ajudarà si us sentiu una mica perdut, però no us preocupeu, en sortireu ràpidament. A més, www.w3schools.com també és un recurs fantàstic per a qualsevol de les vostres preguntes sobre programació. Definitivament, també m’han estalviat un temps.

Bàsicament és fàcil com llegeix el fitxer el navegador. Va línia per línia i processa funció per funció. Els caràcters s'utilitzen per declarar una etiqueta com

i s'utilitzen per tancar l'etiqueta com

. Això és important, en cas contrari, el navegador no es deté. Entre els fitxers

i

etiquetes, és on introduïu el que vulgueu.

Pas 2: Configuració de l'editor

Ara que hem tractat una mica els elements bàsics d’un lloc web HTML, busquem-ho i provem-ho per nosaltres mateixos. Per al següent pas, faré servir Visual Studio Code per programar el lloc web, però el disseny del codi serà el mateix si esteu més còmode amb el bloc de notes o TextEdit.

Dins del bloc de notes:

• Amb Bloc de notes, el programa es llança amb un fitxer en blanc que fa que sigui molt fàcil començar. Això també ens permetrà saltar uns quants passos en comparació amb l'ús de VS Code. Comencem desant el fitxer en el format correcte.
• Feu clic a Fitxer> Desa
• Introduïu un nom per al fitxer seguit de.html i a Desa com a tipus, seleccioneu tots els fitxers. Feu clic a Desa.

Dins del codi VS:

• La millor manera d’aprofitar totes les funcions de l’IDE és començar creant el fitxer i indicant-li de quin tipus de fitxer es tracta. Això es pot fer de la següent manera:
• Feu clic a Fitxer> Fitxer nou
• S'obre un fitxer en blanc

• A continuació, voldreu començar desant el fitxer, encara que en blanc, ja que això permetrà que l’IDE pugui entendre quin tipus de fitxer serà el producte final. Quan deseu, assegureu-vos d’incloure l’extensió.html al final del nom del fitxer. Feu clic a Desa.

Pas 3: Plànols

Un cop hàgiu desat correctament el fitxer filename.html, comencem creant el marc per a la nostra pàgina web. Recordeu des de dalt quines parts clau del fitxer hem de declarar abans de començar a crear la resta de la pàgina HTML. Suggeriment: quan s’inicia el framework del lloc, l’etiqueta HTML! DOCTYPE indica al navegador que el fitxer que llegeix és un fitxer html. Això pot ser útil si teniu diferents tipus de codi al mateix fitxer i voleu canviar d’intèrpret. Per a l’abast d’aquest instructiu, no hi tocarem massa, però si després d’aquest instructiu teniu curiositat per obtenir més informació sobre el desenvolupament d’HTML, no dubteu a provar-lo. Inseriré l'etiqueta HTML! DOCTYPE a la part superior del fitxer per obtenir les millors pràctiques. Recordeu obrir i tancar amb.

Aquí és útil desar el fitxer abans de començar a programar, ara que l’IDE sap que funciona amb un fitxer HTML, utilitzarà intellisense per acabar l’expressió i oferirà suggeriments perquè no oblideu accidentalment tancar una etiqueta. Tingueu en compte que per a aquells que utilitzeu Bloc de notes, intellisense no està disponible com a l’IDE. Comencem introduint les etiquetes del cap i del cos de la següent manera: (vegeu la segona imatge).

Ara que s’ha completat la configuració del document, podem sortir a les carreres i divertir-nos!

Pas 4: Codi; Codi; Codi;

Podem començar mitjançant la inserció d’un títol per al fitxer nou creat. Introduïu el que vulgueu. Recordeu que aquest és el nom que apareix a la pestanya del navegador. Comencem també introduint un encapçalament per al nostre lloc. Recordem d'abans com ho fem. He sentit h1 / 2/3/4? Això és correcte!

Abans de continuar, em sembla útil obrir el nostre fitxer en una finestra del navegador perquè puguem veure en temps real com es reflecteixen els nostres canvis al navegador. Podeu fer-ho fent clic a Fitxer> Desa per desar el fitxer, accedint a la carpeta on es guarda el fitxer HTML, per a mi aquest és l'escriptori i utilitzeu el navegador que trieu per obrir el fitxer., aquí hi ha la vostra pàgina web. Nota: Jo personalment faig servir Safari com a navegador que he escollit al meu equip, però, en el desenvolupament web, Firefox és el navegador estàndard d’origen per provar-lo, ja que funciona amb gairebé tots els llenguatges de seqüència d’ordres web.

Com podeu veure, el títol apareix a la pestanya, a més de veure el nostre encapçalament h1. Prefereixo que la finestra del navegador del fitxer s'obri al costat de l'IDE com quan feu un canvi a l'IDE i deseu, els canvis són instantanis al navegador.

No dubteu a afegir etiquetes i a jugar amb les diferents coses que podeu fer amb HTML. Com podeu veure a continuació, he afegit uns quants paràgrafs, salts, hiperenllaç extern a Instructables.com, una imatge (que es pot enllaçar des d’una font externa o dins del mateix directori on s’emmagatzema el fitxer. HTML), un exemple de llista sense ordenar, una llista ordenada i, finalment, un comentari.

Si voleu provar d'afegir algunes opcions de color i d'arranjament, podeu introduir una etiqueta d'estil al cap del fitxer. Aquest és el moment en què això passa de HTML a CSS, però per motius visuals, introduiré algunes línies perquè pugueu veure com funciona. Bàsicament, com funciona CSS, us permet controlar elements HTML dins de les funcions mitjançant claudàtors {} per introduir el vostre codi per a un element HTML específic.

Pas 5: Pensaments finals

I aquí ho teniu; heu creat amb èxit la vostra primera pàgina web. Com que és una guia per a principiants, vull fer que la vostra primera experiència amb HTML sigui agradable. La millor manera d’aprendre segons la meva experiència és submergir-se i provar coses a mà, veure què es pot fer amb el codi i també veure com es pot trencar el codi. Això genera integritat i us ajuda a comprendre millor com i per què funciona el codi tal com funciona. Recordeu que www. W3Schools.com és un recurs excel·lent per a preguntes i que fins i tot ofereixen un sandbox virtual al navegador per provar el vostre codi. Tant de bo hàgiu après alguna cosa i feliç codificació.