Redigera html-filer

Om du gillar att koda webbplatser för hand kan du redigera HTML-filer i en grundläggande textredigerare som Notepad (Windows) eller TextEdit (macOS). Om du föredrar att flytta element runt på skärmen och se liveförhandsvisningar kan du använda en WYSIWYG-redigerare (What You See Is What You Get), som Dreamweaver eller Kompozer. Denna handledning kommer att lära dig hur du öppnar och redigerar en HTML-fil i ett standard- eller visuellt redigeringsprogram.

Steg

Metod 1 av 4: Använda Notepad (Windows)

Bild med titeln Redigera HTML-filer Steg 1
1. Klicka på Windows Start
. Det är Windows-logotypen i aktivitetsfältet. Som standard är det i det nedre vänstra hörnet. Nu öppnas Start-menyn.
  • Bild med titeln Redigera HTML-filer Steg 2
    2. typ anteckningsblock. Anteckningar öppnas i Start-menyn.
    Bild med titeln Redigera HTML-filer Steg 3
    3. Klicka påAnteckningsblock. Det här är en ikon som liknar en anteckningsbok med blått omslag.
    Bild med titeln Redigera HTML-filer Steg 4
  • 4. Klicka påFil. Det är högst upp i menyraden i Anteckningar. Detta visar en rullgardinsmeny. Ett utforskarfönster öppnas för att öppna filer i Anteckningar.
    Bild med titeln Redigera HTML-filer Steg 5
    5. Klicka påAtt öppna. Det är det andra alternativet i Arkiv-menyn.
    Bild med titeln Redigera HTML-filer Steg 6
    6. Välj "Alla filer" från rullgardinsmenyn för filtyp. Klicka på `Textdokument (.txt)" och välj "Alla filer" från rullgardinsmenyn. Detta kommer att visa alla dokumenttyper (inklusive HTML-filer) i utforskarfönstret.
    Bild med titeln Redigera HTML-filer Steg 7
    7. Välj en HTML-fil och klickaAtt öppna. HTML-dokumentet öppnas i Anteckningar. Du kan redigera HTML-koden i Anteckningar.
    Du kan också skapa ett nytt HTML-dokument i anteckningsblock.
    Bild med titeln Redigera HTML-filer Steg 8
    8. Redigera HTML-koden. För att redigera HTML i Anteckningar behöver du Lär dig HTML så att du kan redigera den för hand. Vanliga element som du kan redigera inkluderar:
  • : Detta kommer att visas överst i HTML-dokumentet. Detta talar om för webbläsaren att detta är ett HTML-dokument.
  • : Dessa taggar visas högst upp och längst ned i HTML-dokumentet. Detta indikerar var HTML-koden börjar och slutar.
  • : Dessa taggar visas överst i HTML-dokumentet. De anger var HTML-dokumentets rubrik börjar och slutar. Rubriken på HTML-dokumentet innehåller information som inte kan ses på webbsidan. Detta inkluderar sidtitel, metadata och CSS.
  • : Dessa taggar anger sidans titel. Titeln finns i rubriken på HTML-dokumentet. Skriv in rubriken på sidan mellan dessa två taggar.
  • : Dessa taggar anger sidans titel: Dessa taggar anger var texten i HTML-dokumentet börjar och slutar. Kroppen är där allt webbsidainnehåll kommer. Brödtexten kommer efter rubriken i HTML-dokumentet.
  • : Dessa taggar skapar rubriker. Texten mellan `
  • : Dessa taggar används för att skapa stycketext i ett HTML-dokument. Texten mellan `
  • : Dessa taggar används för att göra fet text. Texten mellan `
  • : Dessa taggar används för att göra kursiv text. Texten mellan `
  • : 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 på länken där det står "Länk" (utan citattecken) är beskrivningen av länken.
  • : Denna tagg används för att placera en bild med HTML-kod. Byt ut texten "bild URL" av bildens webbadress.
    Bild med titeln Redigera HTML-filer Steg 9
    9. Klicka påFil. Detta finns i menyraden längst upp på skärmen.
    Bild med titeln Redigera HTML-filer Steg 10
    10. Klicka påSpara som. Detta öppnar en dialogruta som du kan använda för att spara filen.
    För att spara filen under befintligt namn och filtyp, klicka Spara i rullgardinsmenyn under "Arkiv".
    Bild med titeln Redigera HTML-filer Steg 11
    11. Välj "Alla filer". Använd rullgardinsmenyn bredvid "Spara som typ" för att välja "Alla filer".
    Bild med titeln Redigera HTML-filer Steg 12
    12. Namnge filen. Använd rutan bredvid "Filnamn" för att skriva ett namn för filen.
    Bild med titeln Redigera HTML-filer Steg 13
    13. typ.html i slutet av filen. När du har skrivit ett namn för filen i rutan `Filnamn`, lägg till filtillägget `.html` till slutet av filnamnet. Utan detta tillägg kommer filen att sparas som en .txt-fil, istället för en HTML-fil.
    Bild med titeln Redigera HTML-filer Steg 14
    14. Klicka påSpara. Filen är nu sparad.

    Metod 2 av 4: Använda TextEdit i macOS

    Bild med titeln Redigera HTML-filer Steg 15
    1. Klicka på förstoringsglasikonen
    . Det finns i det övre högra hörnet på Mac-skrivbordet. Detta visar ett sökfält.
  • Bild med titeln Redigera HTML-filer Steg 16
    2. typ Textredigering i sökfältet. Detta kommer att visa en lista över appar som matchar sökresultatet.
    Bild med titeln Redigera HTML-filer Steg 17
    3. Klicka påTextredigering.app. Det är högst upp i sökresultaten. Det är bredvid en ikon som ser ut som ett pappersark och en penna.
    Bild med titeln Redigera HTML-filer Steg 18
  • Bild med titeln Redigera HTML-filer Steg 19
    Bild med titeln Redigera HTML-filer Steg 20
    Bild med titeln Redigera HTML-filer Steg 21
    7. Redigera HTML-koden. Du kan använda TextEdit för att redigera eller skriva HTML-kod. Du borde Lär dig HTML så att du kan redigera den för hand. Vanliga element som du kan redigera inkluderar följande:.
  • : Detta kommer att visas överst i HTML-dokumentet. Detta talar om för webbläsaren att detta är ett HTML-dokument.
  • : Dessa taggar visas högst upp och längst ned i HTML-dokumentet. Detta indikerar var HTML-koden börjar och slutar.
  • : Dessa taggar visas överst i HTML-dokumentet. De anger var HTML-dokumentets rubrik börjar och slutar. Rubriken på HTML-dokumentet innehåller information som inte kan ses på webbsidan. Detta inkluderar sidtitel, metadata och CSS.
  • : Dessa taggar anger sidans titel. Titeln finns i rubriken på HTML-dokumentet. Skriv in rubriken på sidan mellan dessa två taggar.
  • : Dessa taggar anger sidans titel: Dessa taggar anger var texten i HTML-dokumentet börjar och slutar. Kroppen är där allt webbsidainnehåll kommer. Brödtexten kommer efter rubriken i HTML-dokumentet.
  • : Dessa taggar skapar rubriker. Texten mellan `
  • : Dessa taggar används för att skapa stycketext i ett HTML-dokument. Texten mellan `
  • : Dessa taggar används för att göra fet text. Texten mellan `
  • : Dessa taggar används för att göra kursiv text. Texten mellan `
  • : 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 på länken där det står "Länk" (utan citattecken) är beskrivningen av länken.
  • : Denna tagg används för att placera en bild med HTML-kod. Ersätt texten "Image URL" med bildens webbadress.
    Bild med titeln Redigera HTML-filer Steg 22
    8. Klicka påFil. Det finns i menyraden längst upp på skärmen.
    Bild med titeln Redigera HTML-filer Steg 23
    9. Klicka påSpara. Det finns i rullgardinsmenyn under "Arkiv". Sparar HTML-filen.
    För att byta namn på filen, klicka Döp om (eller Byt namn) från rullgardinsmenyn "Arkiv". Skriv ett nytt namn för filen längst upp på skärmen. Se till att `.html`-tillägget är högst upp på sidan.

    Metod 3 av 4: Använda Dreamweaver

    Bild med titeln Redigera HTML-filer Steg 24
    1. Öppna Dreamweaver. Dreamweaver har en ikon som ser ut som en grön fyrkant med `Dw` i mitten. Klicka på ikonen i Windows Start-meny, eller mappen Program på Mac, för att öppna Dreamweaver.
  • Adobe Dreamweaver kräver en prenumeration. Du kan köpa ett abonnemang från cirka 20 € per månad.
  • Bild med titeln Redigera HTML-filer Steg 25
    2. Klicka påFil. Det finns i menyraden längst upp på skärmen.
    Bild med titeln Redigera HTML-filer Steg 26
    3. Klicka påAtt öppna. Du hittar detta i rullgardinsmenyn under `Arkiv`.
    Bild med titeln Redigera HTML-filer Steg 27
    4. Välj ett HTML-dokument och klickaAtt öppna. Använd filläsaren för att välja ett HTML-dokument på din dator och klicka på det för att välja det. Klicka sedan på Att öppna i det nedre högra hörnet.
    Bild med titeln Redigera HTML-filer Steg 28
    5. Klicka påDela upp. Detta är i mittfliken högst upp på sidan. Detta visar en delad skärm med en HTML-redigerare längst ner och en förhandsgranskningsskärm längst upp.
    Bild med titeln Redigera HTML-filer Steg 29
    6. Redigera HTML-dokumentet. Använd HTML-redigeraren för att redigera HTML. Sättet du redigerar HTML i Dreamweaver skiljer sig inte så mycket från att redigera HTML i Notepad eller TextEdit. Om du skriver en HTML-tagg får du upp en sökmeny med motsvarande HTML-taggar. Du kan klicka på HTML-taggen för att infoga start- och sluttaggar. Dreamweaver kommer att leta efter ö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 högst upp på skärmen. Klicka på elementet du vill infoga i rullgardinsmenyn för att automatiskt lägga till HTML-koden.
    Bild med titeln Redigera HTML-filer Steg 30
    7. Klicka påFil. Klicka på när du är klar med att redigera HTML-dokumentet Fil i menyraden högst upp på skärmen.
    Bild med titeln Redigera HTML-filer Steg 31
    8. Klicka påSpara. Det finns i rullgardinsmenyn nedan Fil. Sparar HTML-dokument.

    Metod 4 av 4: Använda Kompozer

    Bild med titeln Redigera HTML-filer Steg 32
    1. Gå tillhttps://sourceforge.net/projects/kompozer/ i en webbläsare. Du kan använda vilken webbläsare som helst på PC eller Mac. Detta är nedladdningssidan för Kompozer. Det är en gratis HTML-redigerare (WYSIWYG) som fungerar på både Windows och Mac.
    Bild med titeln Redigera HTML-filer Steg 33
    2. Klicka påLadda ner. Det är den gröna knappen längst upp på sidan. Detta tar dig till en separat nedladdningssida. Efter fem sekunders fördröjning startar nedladdningen.
    Bild med titeln Redigera HTML-filer Steg 34
    3. Dubbelklicka på installationsfilen. Som standard finns nedladdade filer i mappen "Nedladdningar" på PC eller Mac. Du kan också klicka på dem i din webbläsare för att starta installationsprogrammet för Kompozer. Installera Kompozer enligt följande:
  • Windows:
  • När du tillfrågas om du vill tillåta installationsprogrammet att göra ändringar i ditt system klickar du Ja.
  • Klicka på Nästa i introduktionsfönstren.
  • Klicka på den runda knappen bredvid "Jag accepterar avtalet" och klicka Nästa.
  • Klicka på Nästa för att använda standardinstallationsplatsen eller klicka Att bläddra igenom för att välja en annan installationsplats.
  • Klicka på Nästa och klicka sedan igen Nästa.
  • Klicka på att installera.
  • Klicka på Komplett.
    Mac:
  • Dubbelklicka på installationsfilen för Kompozer.
  • Klicka på KompoZer.app.
  • Klicka på Apple-ikonen i det övre vänstra hörnet.
  • Klicka på Systeminställningar.
  • Klicka på Säkerhet och integritet.
  • Klicka på fliken Allmän.
  • Klicka på öppen i alla fall längst ner i fönstret.
  • Klicka på Att öppna i popup-fönstret.
  • Dra Kompozer-ikonen till skrivbordet.
  • Öppna Finder.
  • Klicka på kartan Program.
  • Dra Kompozer-ikonen från skrivbordet till mappen "Program".
    Bild med titeln Redigera HTML-filer Steg 35
  • 4. Öppna Kompozer. Använd följande steg för att öppna Kompozer på PC eller Mac.
  • Windows:
  • Klicka på det Windows Start-meny.
  • Skriv "Kompositör"
  • Dubbelklicka på Kompozer-ikonen.
    Mac:.
  • Klicka på förstoringsglasikonen i det övre högra hörnet.
  • Skriv `Kompozer` i sökfältet.
  • Dubbelklicka på Kompozer.app.
    Bild med titeln Redigera HTML-filer Steg 36
  • 5. Klicka påFil. Det finns i menyraden högst upp i appen.
    Bild med titeln Redigera HTML-filer Steg 37
    6. Klicka påÖppna fil. Det är det andra alternativet i rullgardinsmenyn under "Arkiv". Detta öppnar en filläsare som du kan använda för att välja en öppen HTML-fil.
    Bild med titeln Redigera HTML-filer Steg 38
    7. Klicka på en HTML-fil och sedanAtt öppna. Detta öppnar HTML-filen i Kompozer.
    Bild med titeln Redigera HTML-filer Steg 39
    8. Klicka påDela upp. Det är den mittersta fliken överst på sidan. Detta visar en delad skärm som innehåller en HTML-redigerare längst ner och en förhandsgranskningsruta längst upp.
    Du kan behöva göra appens fönster större för att ge dig mer utrymme att arbeta.
    Bild med titeln Redigera HTML-filer Steg 40
    9. Redigera HTML-dokumentet. HTML-källskärmen är längst ner, du kan använda den här skärmen för att redigera HTML på samma sätt som i Anteckningar eller Textredigering. Du kan också använda förhandsgranskningsskärmen för att redigera din HTML genom att använda följande steg:
  • Använd rullgardinsmenyn i det övre högra hörnet för att välja texttyp (d.w.z. Rubrik, stycke osv.).
  • 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 stil, textjustering, indrag eller listor till din text.
  • Klicka på den färgade fyrkanten i panelen högst upp på skärmen för att ändra textfärgen.
  • Klicka på det Bild-ikonen högst upp på skärmen för att lägga till en bild i ditt HTML-dokument.
  • Klicka på ikonen som ser ut som en kedjelänk för att lägga till en länk till ditt HTML-dokument.
    Bild med titeln Redigera HTML-filer Steg 41
    10. Klicka påSpara. När du är klar med att göra ändringar i dokumentet klickar du på Spara-ikonen längst upp på skärmen. Nedanför den finns en ikon som ser ut som en diskett. Spara ditt arbete med detta.

    Varningar

    Glöm inte att spara ditt dokument medan du redigerar. Något kan gå fel när som helst.

  • Оцените, пожалуйста статью