Innehåll

• Steg
• Frågor och svar från gemenskapen
• Tips
• Varningar

Andra avsnitt

Om du föredrar att koda webbplatser för hand kan du redigera HTML-filer i en grundläggande textredigerare som Anteckningar (Windows) eller TextEdit (macOS). Om du hellre kan flytta element på skärmen och se liveförhandsgranskningar kan du använda en WYSIWYG-redigerare (What You See Is What You Get) som Dreamweaver eller Kompozer. Denna wikiHow lär dig hur du öppnar och redigerar en HTML-fil i en standard- eller visuell redigeringsapp.

Steg

Metod 1 av 4: Använda ett anteckningsblock i Windows

1. 

   . Det är knappen som har en Windows-logotyp i aktivitetsfältet. Som standard är det i det nedre vänstra hörnet. Detta visar Start-menyn

2. 

   . Det finns i det övre högra hörnet på Mac-skrivbordet. Detta visar ett sökfält.

3. 

   
   
   Typ Textredigera i sökfältet. Detta visar en lista över appar som matchar ditt sökresultat.

4. 

   
   
   Klick TextEdit.app. Det är högst upp i sökresultaten. Det är bredvid en ikon som liknar ett pappersark och en penna.

5. 

   Klick Fil. Det är i menyraden längst upp på skärmen när TextEdit är öppen.

6. 

   
   
   Klick Öppen. Detta öppnar en filwebbläsare som du kan använda för att navigera på din Mac och öppna filer.

7. 

   Klicka på en HTML-fil och klicka Öppen. HTML-filer har ett tillägg som säger ".html" efter filnamnet. Använd filbläddraren för att navigera till en HTML-fil och klicka på den för att välja den. Klicka sedan Öppen för att öppna HTML-filen i TextEdit.

8. 

   Redigera HTML-koden. Du kan använda TextEdit för att redigera HTML-kod vid fabrikat. Du måste lära dig HTML så att du kan redigera den för hand. Vanliga element som du kan redigera inkluderar följande.
   • : Detta går högst upp i HTML-dokumentet. Detta berättar för webbläsaren att detta är ett HTML-dokument.
   • : Dessa taggar finns högst upp och längst ner i HTML-dokumentet. Detta indikerar var HTML-koden börjar och slutar.
   • : Dessa taggar visas högst upp i HTML-dokumentet. De anger var HTML-dokumentets huvud börjar och stannar. HTML-dokumentets huvud innehåller information som inte syns på webbsidan. Detta inkluderar sidans titel, metadata och CSS
   • : Dessa taggar anger titeln på sidan. Titeln går i huvudet på HTML-dokumentet. Skriv in sidans titel mellan dessa två taggar.
   • : Dessa taggar anger var HTML-dokumentets kropp börjar och slutar. Kroppen är där allt innehåll på webbsidan är skrivet. Kroppen kommer efter huvudet i HTML-dokumentet.

   • Rubriktext

     : Dessa taggar skapar rubriktaggar. Texten mellan "

     "och"

     "taggar visas som en stor fet text. Texten finns i HTML-dokumentets brödtext.

   • Punkttext

     : Dessa taggar används för att skapa stycketext i ett HTML-dokument. Texten som går mellan "

     "och"

     "visas som text i normalstorlek. Texten finns i HTML-dokumentets huvudtext.
   • Fettext: Dessa taggar används för att skapa fet text. Texten som går mellan ""och""visas som fet text.
   • Kursiv text: Dessa taggar används för att skapa kursiv text. Texten som går mellan ""och""visas som itallisk text.
   • Länktext: Den här taggen används för att länka till en annan webbplats. Kopiera webbadressen du vill länka till och klistra in den där det står "URL" (mellan citattecken). Texten för länken där det står "Länktext" (inga citattecken behövs).
   • : Den här taggen används för att publicera en bild med HTML. Byt ut texten som säger "image URL" med bildens webbadress.

9. 

   Klick Fil. Det finns i menyraden längst upp på skärmen.

10. 

    Klick Spara. Det finns i rullgardinsmenyn under "Arkiv". Detta sparar HTML-filen.
    • Klicka på för att ändra filnamnet Döp om i rullgardinsmenyn "Arkiv". Skriv ett nytt namn för filen högst upp på skärmen. Se till att inkludera tillägget ".html" högst upp på sidan.

Metod 3 av 4: Använda Dreamweaver

1. 

   Öppna Dreamweaver. Dreamweaver har en ikon som liknar en grön fyrkant som säger "Dw" i mitten. Klicka på ikonen i Windows Start-meny eller Programmapp på Mac för att öppna Dreamweaver.
   • Adobe Dreamweaver kräver ett abonnemang. Du kan köpa en prenumeration från 20,99 USD per månad.

2. 

   Klick Fil. Det finns i menyraden längst upp på skärmen.

3. 

   Klick Öppen. Det finns i rullgardinsmenyn under "Arkiv".

4. 

   Välj ett HTML-dokument och klicka Öppen. Använd filbläddraren för att välja ett HTML-dokument på din dator och klicka på det för att välja det. Klicka sedan Öppen i det nedre högra hörnet.

5. 

   Klick Dela. Det är mittfliken högst upp på sidan. Detta visar en delad skärm som innehåller en HTML-redigerare längst ner och en förhandsgranskningsskärm ovanpå.

6. 

   Redigera HTML-dokumentet. Använd HTML-redigeraren för att redigera HTML. Hur du redigerar HTML i Dreamweaver skiljer sig inte så mycket från att redigera HTML i Anteckningar eller TextEdit. När du skriver en HTML-tagg visas en sökmeny med matchande HTML-taggar. Du kan klicka på HTML-taggen för att infoga dess inledande och stängande taggar. Dreamweaver kommer att kontrollera att det finns öppnings- och stängningstaggar för alla dina HTML-element.
   • Alternativt kan du klicka där du vill infoga ett HTML-element i HTML-redigeraren och klicka Föra in i menyraden längst upp på skärmen. Klicka på objektet du vill infoga i rullgardinsmenyn för att automatiskt lägga till HTML-koden.

7. 

   Klick Fil. När du är klar med att redigera HTML-dokumentet klickar du på Fil i menyraden längst upp på skärmen.

8. 

   Klick Spara. Det finns i rullgardinsmenyn nedan Fil. Detta sparar ditt HTML-dokument.

Metod 4 av 4: Använda Kompozer

1. 

   Gå till https://sourceforge.net/projects/kompozer/ i en webbläsare. Du kan använda vilken webbläsare som helst på PC eller Mac. Det här är nedladdningssidan för Kompozer. Det är en gratis HTML (WYSIWYG) -redigerare som fungerar på både Windows och Mac.

2. 

   Klick Ladda ner. Det är den gröna knappen högst upp på sidan. Detta tar dig till en separat nedladdningssida. Efter en fördröjning på 5 sekunder börjar nedladdningen.

3. 

   Dubbelklicka på installationsfilen. Som standard kan dina nedladdade filer hittas i mappen "Nedladdningar" på PC eller Mac. Du kan också klicka på dem i din webbläsare för att starta Kompozer-installationsprogrammet. Använd följande instruktioner för att installera Kompozer:
   • Windows:
     • Om du blir tillfrågad om du vill tillåta att installationsprogrammet gör ändringar i ditt system, klicka på Ja.
     • Klick Nästa i introduktionsfönstren.
     • Klicka på radialknappen bredvid "Jag accepterar avtalet" och klicka Nästa.
     • Klick Nästa för att använda standardinstallationsplatsen eller klicka Bläddra för att välja en annan installationsplats.
     • Klick Nästa och klicka sedan på Nästa igen
     • Klick Installera
     • Klick Avsluta
   • Mac:
     • Dubbelklicka på Kompozer-installationsfilen.
     • Klick KompoZer.app
     • Klicka på Apple-ikonen i det övre vänstra hörnet.
     • Klick Systeminställningar
     • Klick Säkerhet och integritet
     • Klicka på Allmän flik.
     • Klick Öppna ändå nära fönstrets botten.
     • Klick Öppen i popup-fönstret.
     • Dra ikonen Kompozer till skrivbordet.
     • Öppna Finder.
     • Klicka på Applikationer mapp.
     • Dra Kompozer-ikonen från skrivbordet till mappen Program.

4. 

   Öppna Kompozer. Använd följande steg för att öppna Kompozer på PC eller Mac
   • Windows:
     • Klicka på Windows Start meny.
     • Skriv "Kompozer"
     • Dubbelklicka på ikonen Kompozer.
   • Mac:
     • Klicka på förstoringsglasikonen i det övre högra hörnet.
     • Skriv "Kompozer" i sökfältet.
     • Dubbelklicka Kompozer.app.

5. 

   Klick Fil. Det finns i menyraden längst upp i appen.

6. 

   Klick Öppna fil. Det är det andra alternativet i rullgardinsmenyn under "Arkiv". Detta öppnar en filwebbläsare som du kan använda för att välja en öppen HTML-fil.

7. 

   Klicka på en HTML-fil och klicka Öppen. Detta öppnar HTML-filen i Kompozer.

8. 

   Klick Dela. Det är mittfliken högst upp på sidan. Detta visar en delad skärm som innehåller en HTML-redigerare längst ner och en förhandsgranskningsskärm ovanpå.
   • Du kan behöva förstora appen så att du får mer utrymme att arbeta.

9. 

   Redigera HTML-dokumentet. HTML-källkodsskärmen är längst ner, du kan använda den här skärmen för att redigera HTML på ungefär samma sätt som i Notepad eller TextEdit. Du kan också använda förhandsgranskningsskärmen för att redigera din HTML med följande steg:
   • Använd rullgardinsmenyn i det övre högra hörnet för att välja texttyp (dvs rubrik, stycke, ect}
   • Klicka och skriv för att lägga till text.
   • Använd knapparna i panelen högst upp på skärmen för att lägga till fetstil, kursiv, textjustering, indrag eller listor i din text.
   • Klicka på den färgade rutan i panelen högst upp på skärmen för att ändra textfärg.
   • Klicka på Bild ikonen högst upp på skärmen för att lägga till en bild i ditt HTML-dokument.
   • Klicka på ikonen som liknar en kedjelänk för att lägga till en länk till ditt HTML-dokument.

10. 

    Klicka på Spara ikon. När du är klar med att göra ändringar i ditt dokument klickar du på Spara ikonen högst upp på skärmen. Det är under en ikon som liknar en diskett. Detta sparar ditt arbete.

Frågor och svar från gemenskapen

Tips

Varningar

• Kom ihåg att spara dokumentet under redigering. Något kan gå fel när som helst.