Content

• Passos
• Consells
• Advertències

Aquest article us ensenyarà a crear una pàgina web senzilla amb HTML (Hypertext Markup Language). L’HTML és un dels components bàsics d’internet, que serveix d’estructura de les pàgines web. Després de crear una pàgina, podeu desar-la com a document HTML i visualitzar-la en un navegador web. La creació d'una pàgina HTML es pot fer mitjançant un editor de text natiu bàsic tant a Windows com a Mac.

Passos

Part 1 de 5: Afegir una capçalera a HTML

1. 

   , escriviu-lo Bloc de notes o bloc de notes ++ i feu clic Bloc de notes o Bloc de notes ++ a la part superior de la finestra.
2. macOS: feu clic a Spotlight

   

   
   
   , escriviu-lo textedit i feu doble clic a TextEdit a la part superior dels resultats.

3. 

   escriviu-lo i premeu la tecla ↵ Introduïu. Si ho fa, indica al navegador d'Internet que es tracta d'un document HTML.

4. 

   
   
   escriviu-lo i d’un ↵ Introduïu. Aquesta és l'etiqueta d'obertura del codi HTML:

5. 

   escriviu-lo i premeu la tecla ↵ Introduïu. Aquesta és l'etiqueta d'obertura de la capçalera de HTML. Generalment, la informació que hi ha dins no es mostra a la pàgina web. Les dades de la capçalera inclouen: títol, metadades, fulls d'estil CSS i altres llenguatges de script.

6. 

   
   
   escriviu-lo . Aquesta és l’etiqueta del títol de la pàgina.

7. 

   Introduïu un títol per a la pàgina. Podeu utilitzar qualsevol nom que us agradi.

8. 

   escriviu-lo i d’un ↵ Introduïu. Aquesta és l'etiqueta de finalització del títol.

9. 

   escriviu-lo i premeu la tecla ↵ Introduïu. Aquesta és l'etiqueta final de la capçalera. Ara, el codi HTML hauria de semblar una cosa així:

Part 2 de 5: Afegir un cos i un text a HTML

1. 

   escriviu-lo a sota de l'etiqueta final "Cap". Aquesta etiqueta iniciarà el cos del document HTML. Tot el que s’escriu es mostrarà a la pàgina.

2. 

   escriviu-lo
   . Aquesta etiqueta afegeix una capçalera de documents HTML. Una capçalera és un tipus de lletra negreta i gran que s’utilitza generalment a la part superior d’una pàgina web.

3. 

   Escriviu un encapçalament de la pàgina. Pot incloure el títol o una salutació.

4. 

   escriviu-lo després del sostre de l’encapçalament i premeu la tecla ↵ Introduïu. Aquesta és l'etiqueta final de la capçalera.
   • Afegiu encapçalaments addicionals si voleu. Hi ha sis encapçalaments diferents que podeu utilitzar mitjançant les etiquetes
     fins fins
     . Cada etiqueta crea una capçalera d’una mida diferent. Per exemple, per crear tres elements de diferents mides seqüencialment, escriviu el següent:

Els encapçalaments mostren la prioritat o la importància del text. Tanmateix, no cal fer servir una capçalera més gran si voleu utilitzar-ne una de més petita. Podeu utilitzar la mida H3, fins i tot si no hi ha una mida H1 al document.

5. 

   escriviu-lo

   . Aquesta és l’etiqueta d’obertura d’un paràgraf. Un paràgraf s'utilitza per visualitzar el text de mida normal.

6. 

   Escriviu un text. Aquesta pot ser la descripció de la pàgina web o qualsevol altra informació que vulgueu compartir.

7. 

   escriviu-lo

   després del text i premeu la tecla ↵ Introduïu. Aquesta és l’etiqueta de tancament del paràgraf. Vegeu l’exemple següent d’un paràgraf HTML:

   • Podeu afegir diverses línies de paràgrafs en seqüència per crear una sèrie de paràgrafs a sota d'un encapçalament.
   • També és possible pintar qualsevol text del marc marcant-lo i . Escriviu el color desitjat (en anglès) a la secció "color" (entre cometes). Podeu acolorir qualsevol text (com ara capçaleres) mitjançant aquest conjunt d’etiquetes. Per exemple, per canviar un paràgraf a blau, utilitzeu el codi següent:

     Les balenes són criatures majestuoses.

   • Utilitzeu efectes de format en negreta, cursiva i altres amb HTML. Vegeu exemples de format de text que es poden utilitzar, així com les seves etiquetes.
   • Si utilitzeu la negreta i la cursiva per posar èmfasi, i no necessàriament com a forma d'estil, utilitzeu les etiquetes i enlloc de i . Aquesta alternativa facilita la comprensió de la pàgina web quan s’utilitzen tecnologies com ara lectors de pantalla o mode de lectura, proporcionades en alguns navegadors d’internet.

Part 3 de 5: Afegint elements addicionals a HTML

1. 

   Afegiu una imatge a la pàgina. Per fer-ho, seguiu aquests passos:
   • escriviu-lo per obrir l’etiqueta d’imatge.
   • Copieu i enganxeu l’URL de la imatge després del signe "=" a les cometes.
   • escriviu-lo > després de l’URL per finalitzar l’etiqueta d’imatge. Per exemple, si l’URL és "http://www.mypicture.com/lake", escriviu el següent:

2. 

   Enllaç a una altra pàgina. Per fer-ho, seguiu aquests passos:
   • escriviu-lo per obrir l’etiqueta d’enllaç.
   • Copieu i enganxeu l’URL després del signe "=" a les cometes.
   • escriviu-lo > després de l’URL per finalitzar la porció d’enllaç de l’HTML.
   • Escriviu un nom per a l’enllaç després del claudàtor de tancament.
   • escriviu-lo després del nom de l'enllaç per finalitzar l'enllaç HTML. Aquí teniu un exemple d’enllaç a Facebook:

3. 

   Afegiu un salt de línia al document HTML. Podeu fer-ho mitjançant el codi
   . Crearà una línia horitzontal que es pot utilitzar per dividir diferents seccions de la pàgina.

Part 4 de 5: Tancament del document HTML

1. 

   escriviu-lo a sota de l’etiqueta del cos de la pàgina. Després d’afegir text, imatges i altres elements al cos de documents HTML, afegiu aquesta etiqueta per acabar amb el cos del document.

2. 

   escriviu-lo per tancar el cos del document HTML. S'hauria d'inserir al final del document, informant-li al navegador que després no hi ha cap codi. Ara, el vostre document HTML complet hauria de tenir un aspecte així:

Part 5 de 5: Desar i obrir la pàgina web

1. 

   Convertiu el document en text senzill (només per a usuaris de Mac). Feu clic al menú Format a la part superior de la pantalla i, a continuació, Converteix al text normal al menú desplegable resultant.

   Aquest pas no és necessari ni és possible a Windows.

2. 

   feu clic a Arxiu a la barra de menús de la part superior de la pantalla.

3. 

   feu clic a Guardar com al menú desplegable situat a sota de "Fitxer".
   • També podeu prémer les tecles Ctrl+s (Windows) o ⌘ Cmd+s (Mac)

4. 

   Poseu un nom al document HTML. Escriviu un nom al quadre de text "Nom del fitxer" (Windows) o "Nom" (Mac).

5. 

   Canvieu el tipus de fitxer del document. Haureu de canviar el document de fitxer de text a fitxer HTML. Per fer-ho, seguiu els passos següents:
   • Windows: feu clic al quadre desplegable "Desa com a tipus", seleccioneu Tots els fitxers i tipus .html al final del nom del fitxer.
   • Mac: substituir .txt finalització del nom del fitxer per .html.

6. 

   feu clic a Guardar al final de la finestra. Si ho feu, creareu un fitxer HTML.
   • El navegador estàndard està obert pels fitxers HTML.

7. 

   Tanqueu l’editor de text. Arribats a aquest punt, el fitxer HTML està a punt per obrir-se al navegador d’internet, de manera que el podeu veure.

8. 

   Obriu el document HTLM en un navegador web. En la majoria dels casos, només cal que feu doble clic al document HTML per obrir-lo. Si rebeu un missatge d'error, feu el següent:
   • Windows: feu clic amb el botó dret al document i seleccioneu Obert amb i seleccioneu el navegador d'internet que trieu.
   • Mac: feu clic al document, seleccioneu Arxiu, després Obert amb i feu clic al navegador d’Internet que escolliu.

9. 

   Editeu el document HTML si cal. Pot ser que observeu un error a la pàgina HTML. Per canviar-lo, editeu el document en un editor de text:
   • A Windows, feu clic amb el botó dret al document i seleccioneu Per editar al menú desplegable resultant (si teniu Notepad ++ instal·lat, seleccioneu Edita amb el bloc de notes ++).
   • Al Mac, feu clic al document per seleccionar-lo, feu clic a Arxiu, seleccioneu Obert amb i feu clic TextEdit. També podeu arrossegar el document a TextEdit.

Consells

• Les etiquetes sempre s’han de tancar segons el codi que s’utilitzi per obrir-les. Per exemple, les etiquetes s'ha de tancar de la manera següent: .
• Podeu afegir un desplaçament lateral de text al lloc web mitjançant l'etiqueta , però tingueu en compte que aquesta característica pot no ser reconeguda en alguns navegadors d'Internet.
• Moltes persones utilitzen el bloc de notes ++ per escriure i compilar el seu codi.
• Per centrar una imatge a la pàgina, escriviu <> a continuació, nom de la imatge a l'etiqueta img (per exemple, ).

Advertències

• El millor és allotjar les seves pròpies imatges a Imgur o un lloc similar si teniu previst pujar imatges a la vostra pàgina web. La publicació de fotografies d’altres persones pot provocar una infracció dels drets d’autor.