Vsebina

• Koraki
• 1. del od 2: Učenje osnov HTML
• 2. del 2: Napredni HTML
• Nasveti
• Opozorila
• Kaj potrebujete

HTML je okrajšava za angleščino Jezik označevanja hiperbesedila (jezik za označevanje hiperteksta). To je koda ali jezik, v katerem se ustvarijo osnovne oznake spletnih mest. Učenje se morda zdi zastrašujoče, če še niste programirali, v resnici pa potrebujete le osnovni urejevalnik besedil in spletni brskalnik. Morda celo prepoznate nekaj primerov označb HTML, ki ste jih naleteli na internetnih forumih, prilagojenih straneh po meri ali člankih v wikiHow. HTML je uporabno orodje za vsakega uporabnika interneta in učenje osnov bo trajalo manj časa, kot si mislite.

Koraki

1. del od 2: Učenje osnov HTML

1. 1 Odprite dokument HTML. Večino urejevalnikov besedil (Notepad ali Notepad ++ za Windows, TextEdit za Mac, gedit za GNU / Linux) je mogoče uporabiti za ustvarjanje datotek HTML. Ustvarite nov dokument in ga shranite z Datoteka → Shrani kot v obliki spletne strani ali spremenite razširitev datoteke v .html ali .htm namesto .doc, .rtf ali drugo razširitev.
   • Morda boste prejeli opozorilo, da bo datoteka namesto zapisa RTF shranjena kot "navadno besedilo", ali da oblikovanje in slike ne bodo shranjeni. To je v redu; za HTML te možnosti niso potrebne.
2. 2 Odprite ustvarjeno datoteko v brskalniku. Shranite prazno datoteko, jo poiščite v računalniku in jo dvokliknite, da jo odprete. V brskalniku se mora odpreti prazna stran. Če se ne, povlecite datoteko v naslovno vrstico brskalnika. Ko urejate datoteko HTML, lahko osvežite to stran in si ogledate spremembe.
   • Upoštevajte, da na ta način ne ustvarjate spletnega mesta na internetu. Drugi ljudje ne bodo imeli dostopa do te strani in za testiranje lokalne strani ne potrebujete internetne povezave. Brskalnik preprosto razlaga kodo HTML in jo "bere", kot da bi bila spletna stran.
3. 3 Razumeti, kaj so oznake za označevanje. Za razliko od običajnega besedila se oznake ne prikažejo na strani. Namesto tega brskalniku povedo, kako naj prikaže stran in njeno vsebino. Oznaka "odpiranje" vsebuje navodila. Brskalniku lahko na primer pove, da mora biti besedilo prikazano kot krepko... Za prikaz brskalnika, kjer se navodilo konča, potrebuje tudi oznako "end". V tem primeru bo besedilo med začetno in končno oznako prikazano krepko. Oznake so napisane znotraj neenakih znakov, vendar se končna oznaka začne s poševnico naprej.
   • Začetna oznaka je napisana med znaki neenakosti: začetna oznaka>
   • V zaključni oznaki je pred deskriptorjem oznake (ime) postavljena poševnica naprej: /zaključna oznaka>
   • Preberite, če želite izvedeti, kako se uporabljajo različne oznake. Za ta korak si morate zapomniti obliko zapisa. Oznake so zapisane med znaki neenakosti:> in />
   • V nekaterih vadnicah se oznake HTML imenujejo elementi, besedilo med začetnimi in zaključnimi oznakami pa vsebina elementov.
4. 4 V urejevalnik vnesite html> tag. Vsaka datoteka HTML se mora začeti z oznako html> in se konča z oznako / html>... Te oznake brskalniku sporočajo, da je vsa vsebina med oznakami v HTML -ju. V svoj dokument dodajte te oznake:
   • Datoteke HTML se pogosto začnejo s črto ! DOCTYPE html>kar pomeni, da morajo brskalniki celotno datoteko prepoznati kot HTML. Ta vrstica ni potrebna, lahko pa vam pomaga pri odpravljanju težav z združljivostjo.
   • Pokliči html> na vrhu dokumenta.
   • Večkrat pritisnite Enter ali Return, da ustvarite več praznih vrstic, nato vnesite / html>
   • Zapomni si to celota kodo, ki jo boste ustvarili v tem članku, bo treba zapisati med ti dve oznaki.
5. 5 V datoteki ustvarite razdelek head>. Med oznakama html> in / html> ustvarite začetno oznako glava> in zaključno oznako / glava>... Med njimi dodajte nekaj praznih vrstic. Vsebina, zapisana med oznakama head> in / head>, ni prikazana na sami strani. Sledite tem korakom in videli boste, čemu služi ta oznaka:
   • Med oznakami head> in / head> napišite naslov> in / naslov>
   • Med oznakami title> in / title> napišite Kako se naučiti HTML - wikiHow.
   • Shranite spremembe in odprite datoteko v brskalniku (ali osvežite stran, če je datoteka že odprta). Ali vidite besedilo v naslovu strani nad naslovno vrstico?
6. 6 Ustvarite razdelek body>. Vse ostale oznake in besedilo v tem primeru so zapisani v razdelku z besedilom, katerega vsebina je prikazana na strani. Po zaključna oznaka / glava>, vendar prej tag / html> dodaj oznake telo> in / telo>... V preostalem delu tega članka delajte z oddelkom za telo. Vaša datoteka bi morala izgledati nekako tako:
   html>
   glava>
   naslov> Kako se naučiti HTML - wikiHow / naslov>
   / glava>
   telo>
   / telo>
   / html>
7. 7 Dodajte besedilo z različnimi slogi. Čas je, da na stran dodate pravo vsebino! Vse, kar napišete med oznakami body, bo po osvežitvi v brskalniku prikazano na strani. Ne uporabljajte simboli ali >saj bo brskalnik poskušal vsebino razlagati kot oznako namesto besedila. Pišite Zdravo! (ali karkoli želite), nato poskusite dodati te oznake v besedilo in poglejte, kaj se zgodi:
   • em> Pozdravljeni vsi! / em> naredi besedilo "poševno": Zdravo!
   • močno> Pozdravljeni vsi! / močno> naredi besedilo "krepko": Zdravo!
   • s> Pozdravljeni vsi! / s> prečrtano besedilo: Zdravo!
   • sup> Pozdravljeni vsi! / sup> pisavo prikaže kot nadnapis:
   • sub> Pozdravljeni vsi! / sub> prikaže pisavo kot podnapis: _Zdravo!
   • Preizkusite različne oznake skupaj. Kako bo videti em> močno> Pozdravljeni vsi! / močno> / em>?
8. 8 Besedilo razdelite na odstavke. Če poskusite v datoteko HTML vnesti več vrstic besedila, boste opazili, da se prelomi vrstic ne prikažejo v brskalniku. Če želite besedilo razdeliti na odstavke, morate dodati oznake:
   • p> To je ločen odstavek. / p>
   • Temu stavku sledi prelom vrstice br> pred začetkom te vrstice.
     To je prva oznaka, ki ne potrebuje končne oznake. Te oznake se imenujejo "prazne" oznake.
   • Ustvarite naslove za prikaz naslovov razdelkov:
     h1> besedilo naslova / h1>: največji naslov
     h2> besedilo naslova / h2> (naslov druge stopnje)
     h3> besedilo naslova / h3> (naslov tretje stopnje)
     h4> naslovno besedilo / h4> (naslov četrte stopnje)
     h5> naslovno besedilo / h5> (najmanjši naslov)
9. 9 Naučite se ustvarjati sezname. Sezname na spletni strani lahko ustvarite na več načinov. Preizkusite spodnje možnosti in se odločite, katera vam je najbolj všeč. Upoštevajte, da je za celoten seznam potreben en par oznak (na primer ul> in / ul> za označeni seznam), vsak element seznama pa je označen z drugačnim parom oznak, na primer li> in / li>.
   • Označeni seznam:
     ul> li> Prva vrstica / li> li> Druga vrstica / li> li> In tako naprej / li> / ul>
   • Oštevilčen seznam:
     ol> li> Ena / li> li> Dva / li> li> Tri / li> / ol>
   • Seznam definicij:
     dl> dt> Kava / dt> dd> - topla pijača / dd> dt> Limonada / dt> dd> - hladna pijača / dd> / dl>
10. 10 Postavite stran z uporabo prelomi vrstic, vodoravne črte in Slike. Čas je, da na stran dodate nekaj drugega kot besedilo. Za več informacij poskusite z naslednjimi oznakami ali sledite povezavam. S storitvijo spletnega gostovanja ustvarite povezavo do slike, ki jo želite objaviti:
    • Vodoravna črta: hr>
    • Vstavi sliko: img src = "povezava do slike">
11. 11 Dodajte povezave. S temi oznakami lahko ustvarite hiperpovezave do drugih strani in spletnih mest, a ker še nimate spletnega mesta, se boste zdaj naučili, kako ustvariti sidrne povezave, to je povezave do določenih mest na strani:
    • Ustvarite sidro z oznako a>, kamor želite povezati stran. Izmislite jasno in nepozabno ime:
      
      a name = "Tips"> Besedilo, s katerim se povezujete. / a>
    • Z oznako href> ustvarite relativno povezavo ali povezavo do zunanjega vira:
      
      a href = "povezava do strani ali imena sidra na strani"> Besedilo ali slika, ki bo služila kot povezava. / a>
    • Če se želite povezati z relativno povezavo na drugi strani, dodajte znak # za glavno povezavo in ime sidra. Na primer https://en.wikihow.com/learn-HTML#Tips povežete do razdelka z nasveti na tej strani.

2. del 2: Napredni HTML

1. 1 Spoznajte lastnosti. Atributi so zapisani znotraj oznake in označujejo dodatne informacije. Oblika atributov je naslednja: name = "vrednost", kje naslov definira atribut (npr. barvo za barvni atribut), vrednost pa označuje njegovo vrednost (na primer rdeča za rdečo).
   • Atributi so bili dejansko uporabljeni v prejšnjem razdelku o osnovah HTML. Oznaka img> uporablja atribut src, sidra relativnih povezav uporabljajo atribut imein povezave uporabljajo atribut href... Kot ste že opazili, so vsi atributi zapisani v obliki ___='___’.
2. 2 Eksperimentirajte s tabelami HTML. Ustvarjanje tabele vključuje uporabo različnih oznak. Lahko eksperimentirate ali preberete podrobnejša navodila.
   • Ustvarite oznake tabele:miza> / miza>
   • Vsebino vsake vrstice v tabeli vključite v oznake: tr>
   • Naslov stolpca je določen z oznako: th>
   • Celice v naslednjih vrsticah: td>
   • Primer uporabe teh oznak:
     
     tabela> tr> th> 1. stolpec: mesec / th> th> 2. stolpec: prihranki / th> / tr> tr> td> januar / td> td> 5000 rubljev / td> / tr> / tabela>
3. 3 Naučite se dodatnih oznak razdelkov glav. Že ste se naučili oznake head>, ki je na začetku vsake datoteke html. Poleg naslova> oznaka za ta razdelek obstajajo še druge oznake:
   • Meta oznake, ki vsebujejo metapodatkiki jih iskalniki uporabljajo za indeksiranje spletnega mesta. Za lažje iskanje vašega spletnega mesta v iskalnikih uporabite eno ali več začetnih meta> oznak (zaključne oznake niso potrebne).Uporabite en atribut in eno vrednost za oznako: meta name = "description" content = "page description">; ali meta name = "ključne besede" content = "ključne besede, ločene z vejicami">
   • Povezava> oznake, ki kažejo na datoteke drugih izdelovalcev, na primer slogovne liste (CSS), ki so ustvarjene z uporabo druge vrste kodiranja in vam omogočajo spreminjanje strani HTML z barvo, poravnavo besedila in številnimi drugimi funkcijami.
   • Skript> oznake, ki se uporabljajo za pritrditev datotek JavaScript na stran. Te datoteke so potrebne za interaktivno spreminjanje strani (kot odziv na dejanja uporabnikov).
4. 4 Eksperimentirajte s kodo HTML drugih spletnih mest. Ogled izvorne kode drugih spletnih strani je odličen način za učenje HTML. Z desno miškino tipko kliknite stran in v zgornjem meniju brskalnika izberite Ogled vira ali kaj podobnega. Poskusite ugotoviti, kaj počne neznana oznaka, ali poiščite informacije o tem v internetu.
   • Čeprav ne morete urejati spletnih mest drugih ljudi, lahko izvorno kodo kopirate v datoteko, da pozneje preizkusite oznake. Upoštevajte, da oznake CSS morda niso na voljo, barve in oblikovanje pa so lahko drugačni.
5. 5 Začnite raziskovati podrobnejše vodnike. Na internetu je veliko spletnih mest, namenjenih oznakam HTML, na primer W3Schools ali HTMLbook. V prodaji so tudi papirnate knjige, vendar poskusite najti najnovejšo izdajo, ko se standardi spreminjajo in razvijajo. Še bolje, obvladajte CSS, da boste imeli veliko več nadzora nad postavitvijo in videzom vašega spletnega mesta. Spletni oblikovalci se po učenju CSS običajno naučijo JavaScript.

Nasveti

• Notepad ++ je odličen brezplačen program, podoben običajnemu Notepadu, vendar lahko svojo kodo shranite in preizkusite v spletnem brskalniku. (Podpira tudi skoraj vse jezike - HTML, CSS, Python, JavaScript itd.)
• Poiščite preprosto stran na internetu, kodo shranite v računalnik in poskusite z njo. Poskusite premakniti besedilo, spremeniti pisavo, zamenjati slike - karkoli!
• V zapisnik lahko hranite zvezek, tako da jih imate vedno pri roki. To stran lahko tudi natisnete in si jo ogledate.
• Ko pišete kodo, to storite previdno, da jo boste razumeli vi in ​​drugi ljudje. Uporabi! - Vstavite komentar tukaj -> za komentarje HTML: ne bodo prikazani na strani, bodo pa vidni v dokumentu s kodo.
• XML in RSS postajajo vse bolj priljubljeni. Kodo za strani, ki vsebujejo tehnologije XML in RSS, neizkušen uporabnik težje prebere in razume, vendar so ta orodja zelo uporabna.
• Označevalne oznake v HTML-ju ne razlikujejo med velikimi in malimi črkami, vendar priporočamo uporabo samo malih črk (kot v primerih v tem članku) za standardizacijo in združljivost z XHTML.

Opozorila

• Nekatere oznake so v zadnjih nekaj letih prenehale veljati in so jih nadomestile nove, ki dajejo enake ali nekatere dodatne učinke.
• Če želite preizkusiti svojo stran, pojdite na spletno mesto W3 in preverite sodobne zahteve HTML. Standardi HTML se sčasoma spreminjajo, nekatere oznake pa nadomestijo nove, ki bolje delujejo v sodobnih brskalnikih.

Kaj potrebujete

• Urejevalnik besedil, na primer Beležnica (Windows) ali TextEdit (Mac)
• Papir / beležka (ni potrebno)
• Urejevalnik HTML, na primer Notepad ++ (Windows) ali TextWrangler (Mac) (ni potrebno)