Rediger HTML-filer

Innhold

Trinn
Advarsler

Hvis du liker å kode nettsteder for hånd, kan du redigere HTML-filer i et grunnleggende tekstredigeringsprogram som Notisblokk (Windows) eller TextEdit (macOS). Hvis du foretrekker å flytte elementer rundt på skjermen og se live forhåndsvisninger, kan du bruke en WYSIWYG (What You See Is What You Get) editor som Dreamweaver eller Kompozer. Denne opplæringen vil lære deg hvordan du åpner og redigerer en HTML-fil i en standard eller visuell redigeringsapplikasjon.

Trinn

Metode 1 av 4: Bruke Notisblokk (Windows)

1. Klikk på Windows Start

. Det er Windows-logoen på oppgavelinjen. Som standard er det i nedre venstre hjørne. Nå åpnes Start-menyen.

Bilde med tittelen Rediger HTML-filer Trinn 2

2. type notatblokk. Notisblokk åpnes i Start-menyen.

Bilde med tittelen Rediger HTML-filer Trinn 3

3. klikk påNotisblokk. Dette er et ikon som ligner en notatbok med blått omslag.

Bilde med tittelen Rediger HTML-filer Trinn 4

4. klikk påFil. Det er øverst på menylinjen i Notisblokk. Dette viser en rullegardinmeny. Et utforskervindu åpnes for å åpne filer i Notisblokk.

Bilde med tittelen Rediger HTML-filer Trinn 5

5. klikk påÅ åpne. Det er det andre alternativet i Fil-menyen.

Bilde med tittelen Rediger HTML-filer Trinn 6

6. Velg "Alle filer" fra rullegardinmenyen for filtype. Klikk på `Tekstdokumenter (.txt)` og velg `Alle filer` fra rullegardinmenyen. Dette vil vise alle dokumenttyper (inkludert HTML-filer) i utforskervinduet.

Bilde med tittelen Rediger HTML-filer Trinn 7

7. Velg en HTML-fil og klikkÅ åpne. HTML-dokumentet åpnes i Notisblokk. Du kan redigere HTML-koden i Notisblokk.

Du kan også opprette et nytt HTML-dokument i notisblokk.

Bilde med tittelen Rediger HTML-filer Trinn 8

8. Rediger HTML-koden. For å redigere HTML i Notisblokk trenger du Lær HTML slik at du kan redigere den for hånd. Vanlige elementer du kan redigere inkluderer:

: Dette vil vises øverst i HTML-dokumentet. Dette forteller nettleseren at dette er et HTML-dokument.

: Disse kodene vises øverst og nederst i HTML-dokumentet. Dette indikerer hvor HTML-koden starter og slutter.

: Disse kodene vises øverst i HTML-dokumentet. De indikerer hvor overskriften til HTML-dokumentet begynner og slutter. Overskriften til HTML-dokumentet inneholder informasjon som ikke kan sees på nettsiden. Dette inkluderer sidetittel, metadata og CSS.

: Disse kodene indikerer tittelen på siden. Tittelen er i overskriften på HTML-dokumentet. Skriv inn tittelen på siden mellom disse to kodene.

: Disse kodene indikerer tittelen på siden: Disse kodene indikerer hvor hoveddelen av HTML-dokumentet begynner og slutter. Kroppen er der alt innholdet på nettsiden kommer. Brødteksten kommer etter overskriften i HTML-dokumentet.

: Disse kodene lager overskrifter. Teksten mellom `

: Disse kodene brukes til å lage avsnittstekst i et HTML-dokument. Teksten mellom `

: Disse kodene brukes til å lage fet tekst. Teksten mellom `

: Disse kodene brukes til å lage kursiv tekst. Teksten mellom `

: Denne taggen brukes til å koble til et annet nettsted. Kopier nettadressen du vil koble til og lim den inn der det står `URL` (mellom anførselstegnene). Teksten i lenken der det står `Link` (uten anførselstegn) er beskrivelsen av lenken.

: Denne taggen brukes til å plassere et bilde ved hjelp av HTML-kode. Bytt ut teksten "bilde-URL" ved hjelp av nettadressen til bildet. 9. klikk påFil. Dette er i menylinjen øverst på skjermen. 10. klikk påLagre som. Dette åpner en dialogboks som du kan bruke til å lagre filen. For å lagre filen under eksisterende navn og filtype, klikk Lagre i rullegardinmenyen under "Fil". 11. Velg "Alle filer". Bruk rullegardinmenyen ved siden av "Lagre som type" for å velge "Alle filer". 12. Gi filen et navn. Bruk boksen ved siden av `Filnavn` for å skrive inn et navn for filen. 1. 3. type.html på slutten av filen. Etter å ha skrevet inn et navn for filen i `Filnavn`-boksen, legg til filtypen `.html` til slutten av filnavnet. Uten denne utvidelsen vil filen bli lagret som en .txt-fil, i stedet for en HTML-fil. 14. klikk påLagre. Filen er nå lagret. Metode 2 av 4: Bruke TextEdit i macOS 1. Klikk på forstørrelsesglassikonet . Det er øverst til høyre på Mac-skrivebordet. Dette viser en søkelinje.

Bilde med tittelen Rediger HTML-filer Trinn 16

2. type Tekstredigering i søkefeltet. Dette vil vise en liste over apper som samsvarer med søkeresultatet.

Bilde med tittelen Rediger HTML-filer Trinn 17

3. klikk påTekstredigering.app. Det er øverst i søkeresultatene. Det er ved siden av et ikon som ser ut som et papirark og en penn.

Bilde med tittelen Rediger HTML-filer Trinn 18

4. klikk påFil. Det er i menylinjen øverst på skjermen når TextEdit er åpent.

Bilde med tittelen Rediger HTML-filer Trinn 19

5. klikk påÅ åpne. Dette åpner en filleser som du kan bruke til å navigere og åpne filer i macOS.

Bilde med tittelen Rediger HTML-filer Trinn 20

6. Klikk på en HTML-fil og klikkÅ åpne. HTML-filer har en utvidelse `.html` etter filnavnet. Bruk filleseren til å navigere til en HTML-fil og klikk på den for å velge den. Klikk deretter Å åpne for å åpne HTML-filen i TextEdit.

Bilde med tittelen Rediger HTML-filer Trinn 21

7. Rediger HTML-koden. Du kan bruke TextEdit til å redigere eller skrive HTML-kode. Du burde Lær HTML slik at du kan redigere den for hånd. Vanlige elementer du kan redigere inkluderer følgende:.

: Dette vil vises øverst i HTML-dokumentet. Dette forteller nettleseren at dette er et HTML-dokument.

: Disse kodene vises øverst og nederst i HTML-dokumentet. Dette indikerer hvor HTML-koden starter og slutter.

: Disse kodene indikerer tittelen på siden. Tittelen er i overskriften på HTML-dokumentet. Skriv inn tittelen på siden mellom disse to kodene.

: Disse kodene lager overskrifter. Teksten mellom `

: Disse kodene brukes til å lage avsnittstekst i et HTML-dokument. Teksten mellom `

: Disse kodene brukes til å lage fet tekst. Teksten mellom `

: Disse kodene brukes til å lage kursiv tekst. Teksten mellom `

: Denne taggen brukes til å plassere et bilde ved hjelp av HTML-kode. Erstatt teksten "Bilde-URL" med nettadressen til bildet. 8. klikk påFil. Det er i menylinjen øverst på skjermen. 9. klikk påLagre. Det er i rullegardinmenyen under "Fil". Lagrer HTML-filen. For å gi nytt navn til filen, klikk endre navn (eller Gi nytt navn) fra rullegardinmenyen "Fil". Skriv inn et nytt navn for filen øverst på skjermen. Sørg for at `.html`-utvidelsen er øverst på siden. Metode 3 av 4: Bruke Dreamweaver 1. Åpne Dreamweaver. Dreamweaver har et ikon som ser ut som en grønn firkant med `Dw` i midten. Klikk på ikonet i Windows Start-menyen, eller Programmer-mappen på Mac-en, for å åpne Dreamweaver.

Adobe Dreamweaver krever en abonnement. Du kan kjøpe et abonnement fra ca. € 20 per måned.

Bilde med tittelen Rediger HTML-filer Trinn 25

2. klikk påFil. Det er i menylinjen øverst på skjermen.

Bilde med tittelen Rediger HTML-filer Trinn 26

3. klikk påÅ åpne. Du finner dette i rullegardinmenyen under `Fil`.

Bilde med tittelen Rediger HTML-filer Trinn 27

4. Velg et HTML-dokument og klikkÅ åpne. Bruk filleseren til å velge et HTML-dokument på datamaskinen din, og klikk på det for å velge det. Klikk deretter på Å åpne i nedre høyre hjørne.

Bilde med tittelen Rediger HTML-filer Trinn 28

5. klikk påDele opp. Dette er i den midterste fanen øverst på siden. Dette viser en delt skjerm med en HTML-editor nederst og en forhåndsvisningsskjerm øverst.

Bilde med tittelen Rediger HTML-filer Trinn 29

6. Rediger HTML-dokumentet. Bruk HTML-editoren til å redigere HTML. Måten du redigerer HTML på i Dreamweaver er ikke så forskjellig fra å redigere HTML i Notisblokk eller TextEdit. Hvis du skriver inn en HTML-kode, får du opp en søkemeny med tilsvarende HTML-koder. Du kan klikke på HTML-koden for å sette inn start- og slutttaggene. Dreamweaver vil se etter åpnings- og lukkekoder for alle HTML-elementene dine.

Alternativt kan du klikke der du vil sette inn et HTML-element i HTML-editoren og klikke Sett inn i menylinjen øverst på skjermen. Klikk på elementet du vil sette inn i rullegardinmenyen for å automatisk legge til HTML-koden.

Bilde med tittelen Rediger HTML-filer Trinn 30

7. klikk påFil. Når du er ferdig med å redigere HTML-dokumentet, klikker du Fil i menylinjen øverst på skjermen.

Bilde med tittelen Rediger HTML-filer Trinn 31

8. klikk påLagre. Det er i rullegardinmenyen nedenfor Fil. Lagrer HTML-dokument.

Metode 4 av 4: Bruke Kompozer

Bilde med tittelen Rediger HTML-filer Trinn 32

1. Gå tilhttps://sourceforge.net/projects/kompozer/ i en nettleser. Du kan bruke hvilken som helst nettleser på PC eller Mac. Dette er nedlastingssiden for Kompozer. Det er en gratis HTML (WYSIWYG) editor som fungerer på både Windows og Mac.

Bilde med tittelen Rediger HTML-filer Trinn 33

2. klikk pånedlasting. Det er den grønne knappen øverst på siden. Dette tar deg til en egen nedlastingsside. Etter en forsinkelse på fem sekunder vil nedlastingen starte.

Bilde med tittelen Rediger HTML-filer Trinn 34

3. Dobbeltklikk på installasjonsfilen. Som standard ligger nedlastede filer i mappen "Nedlastinger" på PC eller Mac. Du kan også klikke på dem i nettleseren din for å starte Kompozer-installasjonsprogrammet. Installer Kompozer som følger:

Windows:

Når du blir spurt om du vil la installasjonsprogrammet gjøre endringer i systemet ditt, klikker du Ja.

klikk på Neste i introduksjonsvinduene.

Klikk på den runde knappen ved siden av `Jeg godtar avtalen` og klikk Neste.

klikk på Neste for å bruke standard installasjonsplassering eller klikk Å bla igjennom for å velge et annet installasjonssted.

klikk på Neste og klikk deretter på nytt Neste.

klikk på å installere.

klikk på Fullstendig.

Mac:

Dobbeltklikk på installasjonsfilen for Kompozer.

klikk på KompoZer.app.

Klikk på Apple-ikonet øverst til venstre.

klikk på Systemvalg.

klikk på Sikkerhet og personvern.

Klikk på fanen Generell.

klikk på åpen uansett nederst i vinduet.

klikk på Å åpne i popup-vinduet.

Dra Kompozer-ikonet til skrivebordet.

Åpne Finder.

Klikk på kartet Programmer.

Dra Kompozer-ikonet fra skrivebordet til `Applications`-mappen.

Bilde med tittelen Rediger HTML-filer Trinn 35

4. Åpne Kompozer. Bruk følgende trinn for å åpne Kompozer på PC eller Mac.

Windows:

Klikk på den Windows Start-Meny.

Skriv "komponist"

Dobbeltklikk på Kompozer-ikonet.

Mac:.

Klikk på forstørrelsesglassikonet øverst til høyre.

Skriv `Kompozer` i søkefeltet.

Dobbeltklikk på Kompozer.app.

Bilde med tittelen Rediger HTML-filer Trinn 36

5. klikk påFil. Det er i menylinjen øverst i appen.

Bilde med tittelen Rediger HTML-filer Trinn 37

6. klikk påÅpen fil. Det er det andre alternativet i rullegardinmenyen under "Fil". Dette vil åpne en filleser som du kan bruke til å velge en åpen HTML-fil.

Bilde med tittelen Rediger HTML-filer Trinn 38

7. Klikk på en HTML-fil og deretterÅ åpne. Dette vil åpne HTML-filen i Kompozer.

Bilde med tittelen Rediger HTML-filer Trinn 39

8. klikk påDele opp. Det er den midterste fanen øverst på siden. Dette viser en delt skjerm som inneholder en HTML-editor nederst og en forhåndsvisningsrute øverst.

Det kan hende du må gjøre appens vindu større for å gi deg mer plass til å jobbe.

Bilde med tittelen Rediger HTML-filer Trinn 40

9. Rediger HTML-dokumentet. HTML-kildeskjermen er nederst, du kan bruke denne skjermen til å redigere HTML på samme måte som i Notepad eller TextEdit. Du kan også bruke forhåndsvisningsskjermen til å redigere HTML-en din ved å bruke følgende trinn:

Bruk rullegardinmenyen øverst til høyre for å velge teksttypen (d.w.z. Overskrift, avsnitt osv.).

Klikk og skriv for å legge til tekst.

Bruk knappene i panelet øverst på skjermen for å legge til fet skrift, kursiv, tekstjustering, innrykk eller lister til teksten din.

Klikk på den fargede firkanten i panelet øverst på skjermen for å endre tekstfargen.

Klikk på den Bilde-ikonet øverst på skjermen for å legge til et bilde i HTML-dokumentet.

Klikk på ikonet som ser ut som en lenke for å legge til en kobling til HTML-dokumentet.

Bilde med tittelen Rediger HTML-filer Trinn 41

10. klikk påLagre. Når du er ferdig med å gjøre endringer i dokumentet, klikker du på Lagre-ikonet øverst på skjermen. Under det er et ikon som ser ut som en diskett. Lagre arbeidet ditt med dette.