Sisältö

• Astua
• Osa 1/2: HTML: n perusteiden oppiminen
• Osa 2: Kehittyneen HTML: n oppiminen
• Vinkkejä
• Varoitukset
• Tarpeet

HTML on lyhenne sanoista Hyper Text Markup Language, se on koodi tai Kieli jota käytetään verkkosivustojen luomiseen. Se voi näyttää monimutkaiselta, jos et ole koskaan ohjelmoinut aiemmin, mutta kokeilemaan sitä tarvitset vain yksinkertaisen tekstinkäsittelyohjelman ja Internet-selaimen. Voit tunnistaa osan HTML-foorumeista, online-profiileista tai wikiHow-artikkeleista. HTML on hyödyllinen resurssi kaikille Internetin käyttäjille, ja HTML: n oppiminen voi viedä vähemmän aikaa kuin voit odottaa.

Astua

Osa 1/2: HTML: n perusteiden oppiminen

1. Avaa HTML-asiakirja. Useimpia tekstinkäsittelyohjelmia, kuten Notepad tai Word for Windows ja Text Editor for Mac, voidaan käyttää HTML-dokumenttien luomiseen. Avaa uusi asiakirja ja valitse tiedosto → Tallenna nimellä ylävalikosta, jos haluat tallentaa asiakirjan Web-sivuna, tai muuta tiedostotunniste ".doc", ".rtf" tai jostakin muusta ".html" tai ".htm" ".
   • Saatat nyt nähdä varoituksen, jonka mukaan asiakirjasi on muuttumassa RTF-formaatin (RTF) muodossa "pelkkän tekstin" muotoon ja että joitain muotoiluvaihtoehtoja ja kuvia ei tallenneta oikein. Voit jättää tämän varoituksen huomiotta. HTML-dokumentit eivät käytä näitä vaihtoehtoja.
   • .html- ja .htm-tiedostot ovat samat. Se toimii molemmat.
2. Tarkastele asiakirjaasi selaimella. Tallenna tyhjä asiakirja, sulje se ja avaa se sitten kaksoisnapsauttamalla asiakirjaa tallennuspaikassa. Selaimesi pitäisi nyt avata asiakirja tyhjänä verkkosivuna. Jos se ei toimi, vedä tiedoston kuvake selaimesi osoiteriville. Myöhemmin, jos muokkaat HTML-dokumenttiasi noudattamalla tämän artikkelin ohjeita, palaat edelleen selaimeen tarkistaaksesi, miltä koodin muutokset näyttävät.
   • Huomaa: verkkosivusi ei ole vielä verkossa. Sivu ei ole muiden käytettävissä, eikä sen testaamiseen tarvita toimivaa Internet-yhteyttä. Käytät vain selaimesi "lukemaan" HTML-asiakirjaa kuin se olisi verkkosivusto.
3. Ymmärtää, mitä "tagit" ovat. Tunnisteet eivät ole näkyvissä lopullisella verkkosivulla, kuten tavallinen teksti voi. Tunnisteet kertovat selaimellesi, kuinka sivu ja sen sisältö näytetään. Lähtötunniste sisältää ohjeet. Se voi esimerkiksi kertoa selaimen näyttämään tekstin lihavoituna. Lopputunnistetta tarvitaan selaimen ilmoittamiseen, mihin ohjeet pätevät: tässä esimerkissä kaikki alku- ja lopputunnisteen välissä olevat tekstit ovat lihavoituja. Lopputunnisteet sijoitetaan myös sulkeisiin, mutta vinoviiva seuraa ensimmäisiä sulkeita.
   • Kirjoita sulkeisiin alkutunnisteet: tämä on aloituspäivä>
   • Kirjoita lopputunnisteet sulkeisiin, mutta laita vinoviiva ensimmäisen sulun jälkeen: /tämä on viimeinen tagi>)
   • Lue myöhemmin artikkelista, kuinka kirjoitetaan toiminnallisia tunnisteita. Tässä vaiheessa sinun on vain muistettava, millä tavalla kirjoitetaan tunnisteita:> ja />.
   • Muissa HTML-kursseissa tunnisteita kutsutaan myös "elementeiksi" ja avaavien ja sulkevien tunnisteiden välistä tekstiä kutsutaan myös "elementin sisällöksi".
4. Kirjoita ensimmäinen html> -tagisi. Jokainen HTML-asiakirja alkaa a: lla html>ja päättyy a / html>tag. Tämä kertoo selaimelle, että kaikki näiden tunnisteiden välissä on kirjoitettu HTML-muodossa. Lisää nämä tunnisteet asiakirjaan:
   • Kirjoittaa html> asiakirjan yläosassa.
   • Paina Enter tai palaa useita kertoja antaa itsellesi tilaa ja kirjoita sitten / html>
   • Muistaa sinut kaikki tässä artikkelissa näiden kahden tagin välissä.
5. Tee asiakirjan pää> osa. Tunnisteiden html> ja / html> väliin kirjoitat a pää>aloitusmerkki ja a / pää>-tunniste. Tee näiden välimerkkien väliin jälleen tilaa. Mitään näiden tunnisteiden väliin kirjoitettua ei näy itse verkkosivulla. Kokeile seuraavia vaiheita ja katso, näetkö tiedot näkyvät:
   • Kirjoita head> ja / head> -tagien väliin: otsikko> ja / otsikko>
   • Tunnisteiden otsikko> ja / title> väliin kirjoitat: Kuinka oppia HTML (kuvilla) - wikiHow.
   • Tallenna asiakirja ja avaa se selaimessa (tai tallenna asiakirja ja päivitä sivu selaimessa, jos sivu oli vielä auki). Näetkö juuri kirjoittamasi sivun yläosassa, osoitepalkin yläpuolella?
6. Luo runko> -osio. Kaikki muu tämän aloittelijan asiakirjassa on body> -osassa, ja se näkyy verkkosivulla. Jälkeen tunniste / pää>, mutta edessä tag / html> kirjoitat runko> ja / body>. Kaikki, mitä keskustelemme edelleen tässä artikkelissa, sijoitamme kehon tunnisteiden väliin. Sinulla pitäisi nyt olla asiakirja, joka näyttää tältä (ilman luettelomerkkejä):
   • html>
   • pää>
   • otsikko> oppia HTML - wikiHow / title>
   • / pää>
   • runko>
   • / body>
   • / html>
7. Lisää tekstiä eri tyyleillä. Nyt on aika alkaa kirjoittaa jotain, joka todella näkyy selaimessa! Kaikki tekstitunnisteisiin kirjoittamasi näkyvät selaimessa, kun olet tallentanut muutokset ja päivittänyt sivun selaimessa. Kirjoittaa ei jotain merkkejä ja >koska selaimesi tulkitsee sen HTML-käskynä pelkkän tekstin sijaan. Kirjoita esimerkiksi Hei maailma! (Englanniksi "Hello world!", Tämä on yleinen vakioteksti ensimmäisenä esimerkkinä minkä tahansa ohjelmointikurssin tietyllä ohjelmointikielellä) tai jotain muuta, ja aseta seuraavat tunnisteet tekstin eteen ja jälkeen ja katso mitä tapahtuu:
   • he> Hei maailma! / em> näyttää kursivoidulta tekstiltä: Hei maailma!
   • vahva> Hei maailma! / vahva> näyttää lihavoidulta tekstiltä: Hei maailma!
   • s> Hei maailma! / s> näyttää yliviivatusta tekstistä: Hei maailma!
   • sup> Hei maailma! / sup> näyttää yläindeksiltä:
   • sub> Hei maailma! / sub> näyttää kuvatekstiltä: _{Hei maailma!}
   • Kokeile yhdistelmiä: Kuinka näkee em> vahva> Hei maailma! / vahva> / em> mene ulos?
8. Jaa teksti kappaleiksi. Jos lisäät eri rivejä tekstiä asiakirjaan, huomaat, että kaikki rivit sijoitetaan peräkkäin. Sinun on ohjelmoitava uudet ja tyhjät rivit itse:
   • p> Tämä on erillinen osa. / p>
   • Tämä lause on ensimmäisellä rivillä ja tämä lause seuraavalla.
     Tämä on ensimmäinen kohtaamamme tagi, joka ei tarvitse lopputunnistetta! Kutsumme sellaista tunnistetta yhdeksi tyhjä tunniste.
   • Luo otsikot, jotta osioiden nimet ovat selkeät:
     h1> otsikko / h1>: suurin mahdollinen otsikko
     h2> otsikko / h2> (2 tason otsikko)
     h3> otsikko / h3> (3 tason otsikko)
     h4> otsikko / h4> (4 tason otsikko)
     h5> otsikko / h5> (pienin mahdollinen otsikko)
9. Opi luomaan luetteloita. Voit luoda luetteloita verkkosivulle useilla tavoilla. Kokeile seuraavia tapoja selvittääksesi, mistä pidät eniten. Huomaa, että yksi tunnistepari sijoitetaan koko luettelon ympärille (kuten järjestämättömien luetteloiden ul> ja / ul> tunnisteet) ja että jokaisen luettelon kohteen ympärille, kuten li> ja / li>, sijoitetaan eri tunnisteiden pari. .
   • Käytä seuraavaa koodia luodaksesi luetteloluetteloita:
     ul> li> Yksi kohde / li> li> Toinen kohde / li> li> Toinen kohde / li> / ul>
   • Tai luo numeroitu luettelo tällä koodilla:
     ol> li> kohta 1 / li> li> kohta 2 / li> li> nimike 3 / li> / ol>
   • Tai luo tämä koodi niin kutsutun määrittelyluettelon luomiseksi:
     dl> dt> Kahvi / dt> dd> - Kuuma juoma / dd> dt> Maito / dt> dd> - Kylmä juoma / dd> / dl>
10. Tee sivustasi houkuttelevampi uusilla viivoilla, vaakasuorilla viivoilla ja kuvilla. Nyt on aika alkaa lisätä muita asioita sivullesi. Kokeile seuraavia tunnisteita (kuva on lähetettävä verkossa, jotta voit käyttää linkkiä kuvaan):
    • Lisää rivi: br> tai hr>
    • Lisää kuvia: img src = "sinun_kuvasi_url_kuvasi">
11. Lisää linkit sivun muihin paikkoihin. Voit käyttää tätä koodia myös linkittämään muille sivuille ja verkkosivustoille, mutta koska sinulla ei vielä ole verkkosivustoa, keskitymme "ankkureihin", jotka ovat tiettyjä paikkoja sivulla, johon voit linkittää:
    • Luo ensin ankkuri, jonka a-tagi on sivun kohdassa, johon haluat linkittää. Anna ankkurillesi selkeä nimi, joka on helppo muistaa:
      
      a name = "Vinkkejä"> Tämä on teksti, jonka ympärille asetat ankkuri. / a>
    • Käytä tagia href> linkittääksesi ankkuriisi tai toiselle verkkosivulle:
      
      a href = "Tämän sivun URL-osoite tai ankkurin nimi"> Kirjoita linkkinä näytetty teksti tai kuva tähän. / a>
    • Jos haluat linkittää ankkuriin toisella sivulla, lisää # -merkki URL-osoitteen perään ja ankkurin nimi. Esimerkiksi http://www.wikihow.com/HTML-leren#Tips vie sinut suoraan tämän sivun Vinkit-osioon.

Osa 2: Kehittyneen HTML: n oppiminen

1. Lisätietoja määritteistä. Attribuutit sijoitetaan tunnisteeseen, ja niitä käytetään alku- ja lopputagien välisen "elementin sisällön" lisä säätöihin. He eivät koskaan seiso yksin. Ne on kirjoitettu seuraavasti: nimi = "arvo". nimi edustaa attribuutin nimeä (esimerkiksi "väri") ja arvo kuvaa tätä erityistapausta (esim. "punainen").
   • Jos olet tutustunut tarkasti tämän artikkelin edelliseen osaan, olet jo kohdannut määritteet. Img> -tunniste käyttää määritettä src, ankkuri käyttää määritettä nimi ja linkit käyttävät määritettä href. Voit sanoa, että ne ovat kaikki kooltaan ___='___’ seurata.
2. Kokeile HTML-taulukoita. Taulukon tai kaavion luomiseen tarvitaan useita tunnisteita:
   • Aloita taulukon tunnisteilla (englanniksi "table") koko taulukon ympärillä:taulukko> / taulukko>
   • Sijoita tunnisteet jokaisen rivin sisällön ympärille: tr>
   • Aseta sarakeotsikot ensimmäiselle riville: th>
   • Solujen sijoittaminen peräkkäisiin riveihin: td>
   • Tämä on esimerkki siitä, miten kaikki tämä yhdistyy:
     
     taulukko> tr> th> sarake 1: kuukausi / th> th> sarake 2: säästetyt rahat / th> / tr> tr> td> tammikuu / td> td> 100 € / td> / tr> / table>
3. Opi muut otsikossa käytetyt tagit. Olet jo oppinut tag head>, jonka sijoitat jokaisen asiakirjan alkuun. Otsikko> -tagin lisäksi otsikko-osassa voi olla muita tunnisteita:
   • Sisällönkuvauskenttiä käytetään luomiseen metatiedot Tietoja verkkosivusta. Hakukoneet käyttävät näitä tietoja verkkosivujen luokittelemiseen. Jotta sivusi olisi näkyvissä hakukoneille, voit sijoittaa yhden tai useampia sisällönkuvauskenttiä (lopputunnisteita ei tarvita), jokaisessa tunnisteessa on oltava täsmälleen yksi nimi- ja sisältöattribuutti, esim. kuvaus ">; tai meta name = "keywords" content = "kirjoita tähän luettelo avainsanoista aina pilkulla erotettuna">
   • link> -tunnisteita käytetään linkittämään muut tiedostot sivulle. Tyypillisesti CSS-tyylitaulukoiden liittämiseen HTML-sivuihin nämä sivut on rakennettu erityyppisellä koodilla ja niitä käytetään määrittämään sivun yleinen tyyli.
   • script> -tunnisteita käytetään yhdistämään javascript-tiedostot HTML-sivuun. Javascript antaa sivun vaihtaa, jos käyttäjä tekee jotain sivulla.
4. Pelaa HTML-koodilla olemassa olevilta sivuilta. Verkkosivujen lähdekoodin tarkastelu on hyvä tapa laajentaa HTML-tietämystäsi. Napsauta hiiren kakkospainikkeella sivua ja valitse "Näytä lähde", "Näytä sivun lähde" ​​tai vastaava. Ota selvää, mitä tietty tunniste, jota et tiedä, tai etsi vastausta verkosta.
   • Et voi muokata muiden verkkosivustoja, mutta voit kopioida HTML-koodin omaan asiakirjaasi ja leikkiä sen kanssa nähdäksesi, mitä eri muutokset tekevät. Huomaa: koska monet sivustot käyttävät CSS-tyylitaulukoita, et ehkä näe monia värejä tai muita tyylejä.
5. Opi HTML: stä lukemalla tarkempia artikkeleita. Internetissä on paljon resursseja hallita enemmän HTML-tunnisteita, kuten W3Schools tai Codecademy. Saatavilla on myös monia HTML-kirjoja, mutta varmista, että käytät viimeisintä versiota, koska HTML-standardi muuttuu ajoittain. Kun olet oppinut HTML: n hyvälle tasolle, voit kääntyä CSS: n puoleen saadaksesi paremman hallinnan verkkosivusi ulkoasusta ja tyylistä. Sen jälkeen seuraava vaihe on yleensä javascript.

Vinkkejä

• Voi olla hyödyllistä löytää yksinkertainen verkkosivu Internetistä ja aloittaa sitten sekoittaminen koodin kanssa. Yritä siirtää tekstiä, vaihtaa kirjasinta, vaihtaa kuvia, mitä haluat!
• Voit käyttää muistikirjaa koodin muistiin kirjoittamiseen, jotta sinulla on jotain pudota, jos et muista sitä hetkeksi. Voit myös tulostaa tämän sivun ja pitää sen viitteenä.
• XML: ää ja RSS: ää käytetään nykyään yhä enemmän verkkosivustoilla. Koodi saattaa näyttää ihmissilmältä saavuttamattomalta, varsinkin kun sitä katsotaan lähdekoodissa, mutta toiminnallisuudesta voi olla hyötyä.
• HTML-koodissa käytettävät tunnisteet eivät eroa isoja ja pieniä kirjaimia, mutta oletuksena on käyttää pieniä kirjaimia (kuten tässä artikkelissa). Tunnisteiden pieniä kirjaimia on suositeltavaa, myös yhteensopivuus XHTML: n kanssa.

Varoitukset

• Joitakin tunnisteita ei enää käytetä, ja ne on korvattu muilla tunnisteilla, jotka tekevät saman, mutta tarjoavat usein enemmän vaihtoehtoja.
• Jos haluat varmistaa, että sivusi on HTML-standardin mukainen, käy W3-verkkosivustolla ja testaa koodisi nykyisen standardin mukaan. Monet tunnisteet ovat vanhentuneet ja korvattu tunnisteilla, jotka toimivat paremmin nykyaikaisissa selaimissa.

Tarpeet

• Tekstinkäsittelyohjelma, kuten Muistio (Windows) tai Tekstieditori (Mac).
• paperi- tai muistikirja (valinnainen)
• Erityisesti HTML: n kirjoittamiseen suunniteltu ohjelma, kuten Notepad ++ for Windows tai TextWrangler for Mac (valinnainen)