Sisältö

• Askeleet
• Yhteisökysymykset ja vastaukset
• Vinkkejä
• Varoitukset

Muut osiot

Jos haluat koodata verkkosivustoja käsin, voit muokata HTML-tiedostoja perustekstieditorissa, kuten Muistio (Windows) tai TextEdit (macOS). Jos haluat mieluummin siirtää elementtejä ruudulla ja nähdä suorat esikatselut, voit käyttää WYSIWYG (mitä näet, mitä saat) -editoria, kuten Dreamweaver tai Kompozer. Tämä wikiHow opettaa sinulle avaamaan ja muokkaamaan HTML-tiedostoa tavallisessa tai visuaalisessa muokkaussovelluksessa.

Askeleet

Tapa 1/4: Muistion käyttäminen Windowsissa

1. 

   . Se on painike, jonka tehtäväpalkissa on Windows-logo. Oletuksena se on vasemmassa alakulmassa. Tämä näyttää Käynnistä-valikon

2. 

   . Se on Mac-työpöydän oikeassa yläkulmassa. Tämä näyttää hakupalkin.

3. 

   
   
   Tyyppi TextMuokkaa hakupalkissa. Tämä näyttää luettelon sovelluksista, jotka vastaavat hakutuloksiasi.

4. 

   
   
   Klikkaus TextEdit.app. Se on hakutulosten yläosassa. Se on kuvakkeen vieressä, joka muistuttaa paperiarkkia ja kynää.

5. 

   Klikkaus Tiedosto. Se on valikkorivillä näytön yläosassa, kun TextEdit on auki.

6. 

   
   
   Klikkaus Avata. Tämä avaa tiedostoselaimen, jota voit käyttää Macissa liikkumiseen ja tiedostojen avaamiseen.

7. 

   Napsauta HTML-tiedostoa ja napsauta Avata. HTML-tiedostoilla on laajennus, joka sanoo ".html" tiedoston nimen jälkeen. Siirry tiedostoselaimella HTML-tiedostoon ja valitse se napsauttamalla sitä. Napsauta sitten Avata avataksesi HTML-tiedoston TextEditissä.

8. 

   Muokkaa HTML-koodia. Voit muokata HTML-koodia makeessa TextEditin avulla. Sinun on opittava HTML, jotta voit muokata sitä käsin. Yleisiä elementtejä, joita voit muokata, ovat seuraavat.
   • : Tämä menee HTML-asiakirjan yläosaan. Tämä kertoo verkkoselaimelle, että tämä on HTML-asiakirja.
   • : Nämä tagit ovat HTML-asiakirjan ylä- ja alaosassa. Tämä osoittaa, mistä HTML-koodi alkaa ja loppuu.
   • : Nämä tagit menevät HTML-asiakirjan yläosaan. Ne osoittavat, mistä HTML-asiakirjan pää alkaa ja päättyy. HTML-asiakirjan pää sisältää tietoja, joita ei näy verkkosivulla. Tämä sisältää sivun otsikon, metatiedot ja CSS: n
   • : Nämä tunnisteet osoittavat sivun otsikon. Otsikko menee HTML-asiakirjan päähän. Kirjoita sivun otsikko näiden kahden tagin väliin.
   • : Nämä tunnisteet osoittavat, mistä HTML-asiakirjan runko alkaa ja päättyy. Koko verkkosivun sisältö kirjoitetaan rungossa. Runko tulee HTML-asiakirjan pään jälkeen.

   • Otsikkoteksti

     : Nämä tunnisteet luovat otsikkotunnisteet. "

     "ja"

     "-tunnisteet näkyvät suurena lihavoituna tekstinä. Teksti menee HTML-asiakirjan runkoon.

   • Kappaleteksti

     : Näitä tunnisteita käytetään kappaletekstin luomiseen HTML-dokumenttiin. Välissä oleva teksti "

     "ja"

     "näkyy normaalikokoisena tekstinä. Teksti menee HTML-asiakirjan runkoon.
   • Lihavoitu teksti: Näitä tunnisteita käytetään rohkean tekstin luomiseen. Välissä oleva teksti ""ja""näkyy lihavoituna tekstinä.
   • Kursivoitu teksti: Näitä tunnisteita käytetään kursivoidun tekstin luomiseen. Välissä oleva teksti ""ja""näkyy itaalisena tekstinä.
   • Linkkiteksti: Tätä tagia käytetään linkittämään toiselle verkkosivustolle. Kopioi linkitettävä verkko-osoite ja liitä se kohtaan "URL" (lainausmerkkien väliin). Linkin teksti, jossa lukee "Linkkiteksti" (lainausmerkkejä ei tarvita).
   • : Tätä tagia käytetään kuvan lähettämiseen HTML-koodilla. Korvaa "kuvan URL" -teksti tekstin kuvan verkko-osoitteella.

9. 

   Klikkaus Tiedosto. Se on ruudun yläreunan valikkopalkissa.

10. 

    Klikkaus Tallentaa. Se on avattavassa valikossa "Tiedosto". Tämä tallentaa HTML-tiedoston.
    • Muuta tiedoston nimeä napsauttamalla Nimeä uudelleen avattavassa "Tiedosto" -valikossa. Kirjoita tiedostolle uusi nimi näytön yläreunaan. Muista lisätä .html-laajennus sivun yläosaan.

Tapa 3/4: Dreamweaverin käyttäminen

1. 

   Avaa Dreamweaver. Dreamweaverin kuvake muistuttaa vihreää neliötä, jonka keskellä lukee "Dw". Napsauta kuvaketta Windowsin Käynnistä-valikossa tai Mac-sovelluskansiossa avataksesi Dreamweaver.
   • Adobe Dreamweaver vaatii tilauksen. Voit ostaa tilauksen alkaen 20,99 dollaria kuukaudessa.

2. 

   Klikkaus Tiedosto. Se on valikkorivillä näytön yläosassa.

3. 

   Klikkaus Avata. Se on avattavassa valikossa Tiedosto.

4. 

   Valitse HTML-asiakirja ja napsauta Avata. Valitse tiedostoselaimella HTML-asiakirja tietokoneellasi ja valitse se napsauttamalla sitä. Napsauta sitten Avata oikeassa alakulmassa.

5. 

   Klikkaus Jakaa. Se on keskimmäinen välilehti sivun yläosassa. Tämä näyttää jaetun ruudun, jonka alaosassa on HTML-editori ja yläosassa esikatseluruutu.

6. 

   Muokkaa HTML-asiakirjaa. Voit muokata HTML-koodia HTML-editorilla. Tapa, jolla muokkaat HTML: ää Dreamweaverissa, ei ole liian erilainen kuin HTML: n muokkaaminen Muistiossa tai TextEditissä. Kun kirjoitat HTML-tagia, näkyviin tulee hakuvalikko, joka sisältää vastaavat HTML-tunnisteet. Voit napsauttaa HTML-tagia lisätäksesi sen alku- ja lopputunnisteet. Dreamweaver tarkistaa, että kaikilla HTML-elementeilläsi on avaus- ja sulkutunnisteita.
   • Vaihtoehtoisesti voit napsauttaa kohtaa, johon haluat lisätä HTML-elementin HTML-editoriin, ja napsauttaa Lisää näytön yläosassa olevassa valikkorivissä. Napsauta lisättävää kohdetta avattavassa valikossa lisätäksesi HTML-koodin automaattisesti.

7. 

   Klikkaus Tiedosto. Kun olet muokannut HTML-asiakirjaa, napsauta Tiedosto näytön yläosassa olevassa valikkorivissä.

8. 

   Klikkaus Tallentaa. Se on alla olevassa avattavassa valikossa Tiedosto. Tämä tallentaa HTML-dokumenttisi.

Menetelmä 4/4: Kompozerin käyttö

1. 

   Mene https://sourceforge.net/projects/kompozer/ verkkoselaimessa. Voit käyttää mitä tahansa verkkoselainta PC: llä tai Macilla. Tämä on Kompozerin lataussivu. Se on ilmainen HTML (WYSIWYG) -editori, joka toimii sekä Windowsissa että Macissa.

2. 

   Klikkaus ladata. Se on vihreä painike lähellä sivun yläosaa. Tämä vie sinut erilliselle lataussivulle. Viiden sekunnin viiveen jälkeen lataus alkaa.

3. 

   Kaksoisnapsauta Asenna-tiedostoa. Oletuksena ladatut tiedostot löytyvät PC: n tai Macin "Lataukset" -kansiostasi. Voit myös napsauttaa niitä verkkoselaimessasi käynnistääksesi Kompozer-asennusohjelman. Asenna Kompozer seuraavien ohjeiden mukaan:
   • Windows:
     • Napsauta, jos sinulta kysytään, haluatko antaa asennusohjelman tehdä muutoksia järjestelmään Joo.
     • Klikkaus Seuraava intro-ikkunoissa.
     • Napsauta "Hyväksyn sopimuksen" vieressä olevaa radiaalipainiketta ja napsauta Seuraava.
     • Klikkaus Seuraava käyttää oletusasennussijaintia tai napsauta Selaa Valitse toinen asennuspaikka.
     • Klikkaus Seuraava ja napsauta sitten Seuraava uudelleen
     • Klikkaus Asentaa
     • Klikkaus Suorittaa loppuun
   • Mac:
     • Kaksoisnapsauta Kompozerin asennustiedostoa.
     • Klikkaus KompoZer.app
     • Napsauta Apple-kuvaketta vasemmassa yläkulmassa.
     • Klikkaus Järjestelmäasetukset
     • Klikkaus Turvallisuus ja yksityisyys
     • Klikkaa Kenraali välilehti.
     • Klikkaus Avaa joka tapauksessa lähellä ikkunan alaosaa.
     • Klikkaus Avata ponnahdusikkunassa.
     • Vedä Kompozer-kuvake työpöydällesi.
     • Avaa Finder.
     • Klikkaa Sovellukset kansio.
     • Vedä Kompozer-kuvake työpöydältä Sovellukset-kansioon.

4. 

   Avaa Kompozer. Avaa Kompozer PC: llä tai Macilla seuraavasti
   • Windows:
     • Klikkaa Windows Käynnistä valikossa.
     • Kirjoita "Kompozer"
     • Kaksoisnapsauta Kompozer-kuvaketta.
   • Mac:
     • Napsauta suurennuslasikuvaketta oikeassa yläkulmassa.
     • Kirjoita hakupalkkiin "Kompozer".
     • Tuplaklikkaus Kompozer.app.

5. 

   Klikkaus Tiedosto. Se on sovelluksen yläosassa olevassa valikkorivissä.

6. 

   Klikkaus Avaa tiedosto. Se on toinen vaihtoehto avattavassa valikossa "Tiedosto". Tämän avoimen tiedostoselaimen avulla voit valita avoimen HTML-tiedoston.

7. 

   Napsauta HTML-tiedostoa ja napsauta Avata. Tämä avaa HTML-tiedoston Kompozerissa.

8. 

   Klikkaus Jakaa. Se on keskimmäinen välilehti sivun yläosassa. Tämä näyttää jaetun ruudun, jonka alaosassa on HTML-editori ja yläosassa esikatseluruutu.
   • Saatat joutua laajentamaan sovellusta, jotta sinulla on enemmän tilaa työskennellä.

9. 

   Muokkaa HTML-asiakirjaa. HTML-lähdekoodinäyttö on alareunassa, voit käyttää tätä näyttöä HTML: n muokkaamiseen samalla tavalla kuin Notepadissa tai TextEditissä. Voit myös muokata HTML-koodia esikatselunäytöllä seuraavasti:
   • Valitse tekstityyppi oikean yläkulman avattavasta valikosta (esim. Otsikko, kappale, jne.)
   • Napsauta ja kirjoita lisätäksesi tekstiä.
   • Lisää lihavoitua, kursivoitua, tekstin tasausta, sisennystä tai luetteloa tekstiin näytön yläosassa olevilla painikkeilla.
   • Napsauta värillistä neliötä ruudun yläosassa olevassa paneelissa vaihtaaksesi tekstin väriä.
   • Klikkaa Kuva -kuvaketta näytön yläosassa lisätäksesi kuvan HTML-asiakirjaasi.
   • Napsauta kuvaketta, joka muistuttaa ketjulinkkiä lisätäksesi linkin HTML-asiakirjaasi.

10. 

    Klikkaa Tallentaa -kuvaketta. Kun olet tehnyt muutokset asiakirjaan, napsauta Tallentaa -kuvaketta näytön yläosassa. Se on levykettä muistuttavan kuvakkeen alapuolella. Tämä säästää työsi.

Yhteisökysymykset ja vastaukset

Vinkkejä

Varoitukset

• Muista tallentaa asiakirja muokkauksen aikana. Jokin voi mennä pieleen milloin tahansa.