Sisältö

• Askeleet
• Osa 1/2: HTML -perusteiden oppiminen
• Osa 2/2: Edistynyt HTML
• Vinkkejä
• Varoitukset
• Mitä tarvitset

HTML on lyhenne englannista Hyper -tekstin merkintäkieli (hypertekstimerkinnän kieli). Tämä on koodi tai kieli, jolla sivustojen perusmerkintä luodaan. Oppiminen voi tuntua pelottavalta, jos et ole koskaan ohjelmoinut, mutta todellisuudessa sinun tarvitsee vain aloittaa tekstinkäsittelyohjelma ja Internet -selain. Saatat jopa tunnistaa joitakin esimerkkejä HTML -merkinnöistä, joita olet löytänyt Internet -foorumeilla, mukautetuilla mukautetuilla sivuilla tai wikiHow -artikkeleissa. HTML on hyödyllinen työkalu kaikille Internetin käyttäjille, ja perusasioiden oppiminen vie vähemmän aikaa kuin luulet.

Askeleet

Osa 1/2: HTML -perusteiden oppiminen

1. 1 Avaa HTML -asiakirja. Useimpia tekstieditoria (Notepad tai Notepad ++ Windowsille, TextEdit Macille, gedit GNU / Linuxille) voidaan käyttää HTML -tiedostojen luomiseen. Luo uusi asiakirja ja tallenna se valitsemalla Tiedosto → Tallenna nimellä Web -sivumuotoon tai muuta tiedostotunnisteeksi .html tai .htm .doc-, .rtf- tai muun laajennuksen sijaan.
   • Saatat saada varoituksen, että tiedosto tallennetaan "pelkkänä tekstinä" RTF -muodon sijaan tai että muotoilua ja kuvia ei tallenneta. Tämä on hyvä; HTML: ssä näitä vaihtoehtoja ei tarvita.
2. 2 Avaa luotu tiedosto selaimessa. Tallenna tyhjä tiedosto, etsi se tietokoneeltasi ja avaa se kaksoisnapsauttamalla sitä. Tyhjä sivu pitäisi avata selaimessa. Jos ei, vedä tiedosto selaimesi osoiteriville. Kun muokkaat HTML -tiedostoa, voit päivittää tämän sivun nähdäksesi muutokset.
   • Huomaa, että tällä tavalla et luo verkkosivustoa Internetissä. Muut ihmiset eivät pääse tälle sivulle, eikä sinun tarvitse Internet -yhteyttä paikallisen sivun testaamiseen. Selain yksinkertaisesti tulkitsee HTML -koodin ja lukee sen ikään kuin se olisi verkkosivusto.
3. 3 Ymmärtää, mitä merkintatunnisteet ovat. Toisin kuin tavallinen teksti, tunnisteet eivät näy sivulla. Sen sijaan ne kertovat selaimelle, miten sivu ja sen sisältö näytetään. Avaustunniste sisältää ohjeet. Se voi esimerkiksi kertoa selaimelle, että teksti tulee näyttää muodossa lihavoitu... Se tarvitsee myös "end" -tunnisteen näyttääkseen selaimen, missä ohjeet päättyvät. Tässä esimerkissä alku- ja lopputunnisteiden välinen teksti näytetään lihavoituna. Tunnisteet on kirjoitettu eriarvoisten merkkien sisään, mutta lopputunniste alkaa vinoviivalla.
   • Aloitustunniste kirjoitetaan eriarvoisuusmerkkien väliin: avaava tunniste>
   • Sulkemistunnisteessa eteenviiva sijoitetaan tunnisteiden kuvaajan (nimi) eteen: /lopputunniste>
   • Lue, miten eri tunnisteita käytetään. Tässä vaiheessa sinun tarvitsee vain muistaa tallennusmuoto. Tunnisteet kirjoitetaan eriarvoisuusmerkkien väliin:> ja />
   • Joissakin opetusohjelmissa HTML -tunnisteita kutsutaan elementeiksi, ja avaus- ja sulkutunnisteiden välistä tekstiä kutsutaan elementtisisältöksi.
4. 4 Kirjoita editorissa html> tag. Jokaisen HTML -tiedoston täytyy alkaa tunnisteella html> ja päättyy tunnisteella / html>... Nämä tunnisteet kertovat selaimelle, että kaikki niiden välinen sisältö on HTML -koodia. Lisää nämä tunnisteet asiakirjaasi:
   • Usein HTML -tiedostot alkavat rivillä ! DOCTYPE html>Tämä tarkoittaa, että selainten on tunnistettava koko tiedosto HTML -muotoon. Tämä rivi ei ole välttämätön, mutta se voi auttaa sinua vianmäärityksessä yhteensopivuusongelmien kanssa.
   • Soita html> asiakirjan yläosassa.
   • Luo useita tyhjiä rivejä painamalla Enter- tai Return -näppäintä useita kertoja ja kirjoita sitten / html>
   • muista se koko tässä artikkelissa luomasi koodi on kirjoitettava näiden kahden tunnisteen väliin.
5. 5 Luo tiedostoon pää> -osa. Luo html> - ja / html> -tunnisteiden välille avaustunniste pää> ja lopetusmerkki / pää>... Lisää niiden väliin tyhjiä rivejä. Head >- ja / head> -tagien väliin kirjoitettu sisältö ei näy itse sivulla. Noudata näitä ohjeita ja näet, mihin tämä tagi on tarkoitettu:
   • Kirjoita head> ja / head> -tunnisteiden väliin otsikko> ja / otsikko>
   • Kirjoita otsikko> ja / otsikko> -tunnisteiden väliin HTML: n oppiminen - wikiHow.
   • Tallenna muutokset ja avaa tiedosto selaimessa (tai päivitä sivu, jos tiedosto on jo auki). Näetkö tekstin, joka näkyy sivun otsikossa osoitepalkin yläpuolella?
6. 6 Luo body> -osio. Kaikki muut tässä esimerkissä olevat tunnisteet ja teksti on kirjoitettu body -osioon, jonka sisältö näkyy sivulla. Jälkeen sulkumerkki / pää>, mutta ennen tag / html> lisää tunnisteita runko> ja / body>... Työskentele tämän artikkelin loppuosan runko -osion kanssa. Tiedoston pitäisi näyttää tältä:
   html>
   pää>
   otsikko> HTML: n oppiminen - wikiHow / title>
   / pää>
   runko>
   / body>
   / html>
7. 7 Lisää tekstiä eri tyyleillä. On aika lisätä oikea sisältö sivulle! Kaikki, mitä kirjoitat body -tunnisteiden väliin, näytetään sivulla selaimen päivityksen jälkeen. Älä käytä symbolit tai >koska selain yrittää tulkita sisällön tunnisteena tekstin sijasta. Kirjoittaa Hei! (tai mitä haluat), yritä sitten lisätä nämä tunnisteet tekstiin ja katso mitä tapahtuu:
   • em> Hei kaikki! / em> tekee tekstistä "kursivoidun": Hei!
   • vahva> Hei kaikki! / vahva> tekee tekstistä "lihavoidun": Hei!
   • s> Hei kaikki! / s> yliviivattu teksti: Hei!
   • sup> Hei kaikki! / sup> näyttää fontin yläindeksinä:
   • sub> Hei kaikki! / sub> näyttää fontin alaindeksinä: _Hei!
   • Kokeile erilaisia ​​tunnisteita yhdessä. Miltä se näyttää em> strong> Hei kaikki! / strong> / em>?
8. 8 Jaa teksti kappaleisiin. Jos yrität kirjoittaa useita rivejä tekstiä HTML -tiedostoon, huomaat, että rivinvaihdot eivät näy selaimessa. Jos haluat jakaa tekstin kappaleiksi, sinun on lisättävä tunnisteet:
   • p> Tämä on erillinen kappale. / p>
   • Tätä virkettä seuraa rivinvaihto>> ennen tämän rivin alkua.
     Tämä on ensimmäinen tunniste, joka ei vaadi lopputunnistetta. Näitä tunnisteita kutsutaan tyhjiksi tunnisteiksi.
   • Luo otsikot näyttämään osioiden otsikot:
     h1> otsikkoteksti / h1>: suurin otsikko
     h2> otsikkoteksti / h2> (toisen tason otsikko)
     h3> otsikkoteksti / h3> (kolmannen tason otsikko)
     h4> otsikkoteksti / h4> (neljännen tason otsikko)
     h5> otsikkoteksti / h5> (pienin otsikko)
9. 9 Opi luomaan luetteloita. Voit luoda luetteloita verkkosivulle useilla tavoilla. Kokeile alla olevia vaihtoehtoja ja päätä, mistä pidät eniten. Huomaa, että yksi pari tunnisteita tarvitaan koko luettelolle (esimerkiksi ul> ja / ul> luettelomerkeillä varustetulle listalle), ja jokainen luettelokohde on korostettu eri tunnisteparilla, esimerkiksi li> ja / li>.
   • Ranskalaiset viivat:
     ul> li> Ensimmäinen rivi / li> li> Toinen rivi / li> li> Ja niin edelleen / li> / ul>
   • Numeroitu luettelo:
     ol> li> Yksi / li> li> Kaksi / li> li> Kolme / li> / ol>
   • Määritelmäluettelo:
     dl> dt> Kahvi / dt> dd> - kuuma juoma / dd> dt> Limonadi / dt> dd> - kylmä juoma / dd> / dl>
10. 10 Aseta sivu asettelun avulla rivinvaihdot, vaakasuorat viivat ja Kuvia. On aika lisätä sivulle jotain muuta kuin tekstiä. Kokeile seuraavia tunnisteita tai seuraa linkkejä saadaksesi lisätietoja. Käytä verkkopalvelua luodaksesi linkin kuvaan, jonka haluat lähettää:
    • Vaakasuora viiva: hr>
    • Lisää kuva: img src = "kuvan linkki">
11. 11 Lisää linkkejä. Näiden tunnisteiden avulla voit luoda hyperlinkkejä muille sivuille ja sivustoille, mutta koska sinulla ei vielä ole verkkosivustoa, opit nyt luomaan ankkurilinkkejä eli linkkejä tiettyihin paikkoihin sivulla:
    • Luo ankkuri a> -tunnisteella, johon haluat linkittää sivulla. Keksi selkeä ja ikimuistoinen nimi:
      
      a name = "Tips"> Teksti, johon linkität. / a>
    • Käytä href> -tunnistetta suhteellisen linkin tai linkin luomiseen ulkoiseen resurssiin:
      
      a href = "linkki sivulle tai ankkurin nimi sivulle"> Linkiksi toimiva teksti tai kuva. / a>
    • Jos haluat linkittää suhteellisen linkin toiselle sivulle, lisää # -merkki päälinkin ja ankkurin nimen jälkeen. Esimerkiksi https://en.wikihow.com/learn-HTML#Tips linkit tämän sivun vinkit-osioon.

Osa 2/2: Edistynyt HTML

1. 1 Tutustu ominaisuuksiin. Attribuutit on kirjoitettu tagin sisään, mikä osoittaa lisätietoja. Määritteiden muoto on seuraava: name = "arvo", missä otsikko määrittelee määritteen (esim. väri- väri -määritteelle), ja arvo ilmaisee sen arvon (esim. punainen punaiselle).
   • Määritteitä on itse asiassa käytetty edellisessä HTML -perusteita käsittelevässä osassa. Tagi img> käyttää määritettä src, suhteelliset linkki -ankkurit käyttävät määritettä nimija linkit käyttävät määritettä href... Kuten olet jo huomannut, kaikki määritteet on kirjoitettu muodossa ___='___’.
2. 2 Kokeile HTML -taulukoita. Taulukon luomiseen liittyy erilaisia ​​tunnisteita. Voit kokeilla tai lukea tarkempia ohjeita.
   • Luo taulukkotunnisteet:taulukko> / taulukko>
   • Liitä taulukon jokaisen rivin sisältö tunnisteisiin: tr>
   • Sarakkeen otsikko määritellään tunnisteella: th>
   • Seuraavien rivien solut: td>
   • Esimerkki näiden tunnisteiden käytöstä:
     
     taulukko> tr> th> Sarake 1: kuukausi / th> th> Sarake 2: säästöt / th> / tr> tr> td> tammikuu / td> td> 5000 ruplaa / td> / tr> / table>
3. 3 Opi ylimääräiset otsikkotunnisteet. Olet jo oppinut jokaisen html -tiedoston alussa olevan head> -tunnisteen. Otsikko> -tunnisteen lisäksi tälle osiolle on muitakin tunnisteita:
   • Sisällönkuvauskentät, jotka sisältävät metatiedotjota hakukoneet käyttävät sivuston indeksointiin. Jotta sivustosi löytäminen hakukoneista olisi helpompaa, käytä yhtä tai useampaa avaavaa sisällönkuvauskenttää (sulkutunnisteita ei vaadita).Käytä yhtä määritettä ja yhtä arvoa tunnistetta kohti: meta name = "description" content = "page description">; tai metanimi = "avainsanat" content = "pilkuilla erotetut avainsanat">
   • Linkki> -tunnisteet, jotka viittaavat kolmannen osapuolen tiedostoihin, kuten tyylitaulukoihin (CSS), jotka on luotu käyttämällä erilaista koodausta ja joiden avulla voit muuttaa HTML-sivua käyttämällä värejä, tekstin kohdistusta ja monia muita ominaisuuksia.
   • Skripti> tunnisteet, joita käytetään JavaScript -tiedostojen liittämiseen sivulle. Näitä tiedostoja tarvitaan sivun muokkaamiseen vuorovaikutteisesti (vastauksena käyttäjän toimiin).
4. 4 Kokeile muiden sivustojen HTML -koodia. Muiden verkkosivujen lähdekoodin tarkasteleminen on loistava tapa oppia HTML: ää. Voit napsauttaa sivua hiiren kakkospainikkeella ja valita Näytä lähde tai jotain vastaavaa selaimen ylävalikosta. Yritä selvittää, mitä tuntematon tagi tekee, tai etsi Internetistä tietoa siitä.
   • Vaikka et voi muokata muiden sivustoja, voit kopioida lähdekoodin tiedostoosi kokeillaksesi myöhemmin tunnisteita. Huomaa, että CSS -merkinnät eivät ehkä ole käytettävissä ja värit ja muotoilu voivat näyttää erilaisilta.
5. 5 Aloita tarkempien oppaiden tutkiminen. Internetissä on monia HTML -tunnisteille omistettuja sivustoja, kuten W3Schools tai HTMLbook. Myynnissä on myös paperikirjoja, mutta yritä löytää uusin painos standardien muuttuessa ja muuttuessa. Parempi vielä, hallitse CSS: ää hallitaksesi paremmin sivustosi ulkoasua ja ulkoasua. CSS: n oppimisen jälkeen web -suunnittelijat oppivat yleensä JavaScriptin.

Vinkkejä

• Notepad ++ on loistava ilmainen ohjelma, samanlainen kuin tavallinen Notepad, mutta voit tallentaa ja testata koodisi selaimessasi verkossa. (Se tukee myös melkein mitä tahansa kieltä - HTML, CSS, Python, JavaScript ja niin edelleen.)
• Etsi verkosta yksinkertainen sivu, tallenna koodi tietokoneellesi ja kokeile sitä. Kokeile siirtää tekstiä, vaihtaa fonttia, vaihtaa kuvia - mitä tahansa!
• Voit pitää muistikirjan, johon kirjoitat tunnisteita, jotta ne ovat aina käsillä. Voit myös tulostaa tämän sivun ja viitata siihen.
• Kun kirjoitat koodia, tee se huolellisesti, jotta sinä ja muut ihmiset ymmärtävät sen. Käytä! - Lisää kommentti tähän -> HTML -kommentteihin: ne eivät näy sivulla, mutta ne näkyvät koodiasiakirjassa.
• XML ja RSS ovat saamassa suosiota. XML- ja RSS -tekniikkaa sisältävien sivujen koodi on kokemattomamman käyttäjän vaikeampi lukea ja ymmärtää, mutta nämä työkalut ovat varsin hyödyllisiä.
• HTML-koodin merkintatunnisteet eivät erota kirjainkoosta, mutta suosittelemme käyttämään vain pieniä kirjaimia (kuten tämän artikkelin esimerkeissä) sekä standardoinnissa että XHTML-yhteensopivuudessa.

Varoitukset

• Jotkut tunnisteet ovat poistuneet käytöstä viime vuosina ja ne on korvattu uusilla, jotka antavat saman tai joitain lisätehosteita.
• Jos haluat testata sivusi, siirry W3 -sivustoon ja tutustu nykyaikaisiin HTML -vaatimuksiin. HTML -standardit muuttuvat ajan myötä, ja osa tunnisteista korvataan uusilla, jotka toimivat paremmin nykyaikaisissa selaimissa.

Mitä tarvitset

• Tekstieditori, kuten Notepad (Windows) tai TextEdit (Mac)
• Paperi / muistilehtiö (ei välttämättä)
• HTML -editori, kuten Notepad ++ (Windows) tai TextWrangler (Mac) (ei välttämättä)