Učenje HTML-ja

Video.: Web programiranje za početnike (HTML/CSS/JS) - Predavanje Prvo

Vsebina

Stopati
1. del 2: Učenje osnov HTML
2. del 2: Učenje naprednega HTML-ja
Nasveti
Opozorila
Nujnosti

HTML je okrajšava za Označevalni jezik hiperbesedila, je koda oz jezik ki se uporablja za ustvarjanje spletnih strani. Morda je videti zapleteno, če še nikoli niste programirali, toda za preizkus je potreben preprost program za obdelavo besedil in internetni brskalnik. Morda boste prepoznali nekaj HTML-jev s forumov, spletnih profilov ali člankov wikiHow. HTML je koristen vir za vse, ki uporabljajo internet, in učenje HTML-ja lahko traja manj časa, kot bi lahko pričakovali.

Stopati

1. del 2: Učenje osnov HTML

Odprite dokument HTML. Večino programov za obdelavo besedil, vključno z Beležnico ali Wordom za Windows in urejevalnikom besedil za Mac, lahko uporabimo za ustvarjanje dokumentov HTML. Odprite nov dokument in v zgornjem meniju izberite Datoteka → Shrani kot, da shranite dokument kot spletno stran, ali spremenite pripono datoteke iz ".doc", ".rtf" ali kar koli drugega v ".html" ali ".htm ".
- Zdaj boste morda videli opozorilo, da se vaš dokument spreminja iz oblike obogatenega besedila (RTF) v obliko "navadnega besedila" in da nekatere možnosti oblikovanja in slike niso pravilno shranjene. To opozorilo lahko prezrete; Dokumenti HTML teh možnosti ne uporabljajo.
- Datoteki .html in .htm sta enaki. Oba delujeta.
Oglejte si dokument v brskalniku. Shranite svoj prazen dokument, ga zaprite in nato dvokliknite dokument na mestu, kjer je bil shranjen, da ga znova odprete. Vaš dokument mora zdaj vaš brskalnik odpreti kot prazno spletno stran. Če to ne deluje, povlecite ikono datoteke v naslovno vrstico brskalnika. Če boste pozneje uredili dokument HTML po korakih v tem članku, se boste še naprej vračali v brskalnik in preverjali, kako so videti spremembe kode.
- Opomba: vaša spletna stran še ni vzpostavljena. Stran ni dostopna drugim in za preskus ne potrebujete delujoče internetne povezave. Z brskalnikom preprosto "preberete" dokument HTML, kot da bi šlo za spletno mesto.
Razumevanje, kaj so "oznake". Oznake niso vidne na končni spletni strani, tako kot običajno besedilo. Oznake povedo brskalniku, kako prikazati stran in vsebino na strani. Začetna oznaka vsebuje navodila. Na primer, brskalniku lahko pove, da besedilo prikaže krepko. Končna oznaka je potrebna, da brskalniku pove, kje veljajo navodila: v tem primeru je celotno besedilo med začetno in končno oznako krepko. Končne oznake so prav tako postavljene v oklepaje, poševnica pa sledi prvi oklepaju.
- V oklepaje zapišite začetne oznake: to je začetni dan>
- V oklepaje zapišite končne oznake, za prvo oklepaj pa postavite poševnico: /to je zaključna oznaka>)
- Preberite pozneje v članku, kako napisati funkcionalne oznake. V tem koraku si morate zapomniti, na kakšen način zapisati oznake:> in />.
- V drugih tečajih HTML se oznake imenujejo tudi "elementi", besedilo med odpiralnimi in zaključnimi oznakami pa tudi "vsebina elementov".
Napišite prvo oznako html>. Vsak dokument HTML se začne z html>oznaka in se konča z / html>oznaka. To brskalniku pove, da je vse med temi oznakami zapisano v HTML-ju. V dokument dodajte te oznake:
- Napiši html> na vrhu dokumenta.
- Večkrat pritisnite Enter ali se vrnite, da si zagotovite nekaj prostora, nato pišite / html>
- Zapomni si se vse v tem članku med tema dvema oznakama.
Naj bo glava> del vašega dokumenta. Med oznakama html> in / html> pišete a glava>začetna oznaka in a / head>-končna oznaka. Med temi oznakami spet naredite nekaj prostora. Vse, kar je zapisano med temi oznakami, ne bo vidno na sami spletni strani. Poskusite z naslednjimi koraki in preverite, ali lahko vidite, kje se prikažejo informacije:
- Med oznake head> in / head> pišite: naslov> in / title>
- Med oznakama title> in / title> pišete: Kako se naučiti HTML-ja (s slikami) - wikiHow.
- Shranite dokument in ga odprite v brskalniku (ali shranite dokument in osvežite stran v brskalniku, če je bila stran še vedno odprta). Ali vidite, kaj ste pravkar napisali, na vrhu strani, nad naslovno vrstico?
Ustvari telo> razdelek. Vse ostalo v tem začetniškem dokumentu je nameščeno v razdelku body> in je prikazano na spletni strani. Po oznaka / glava>, vendar pred oznako / html> pišete telo> in / telo>. Vse, o čemer bomo nadalje razpravljali v tem članku, postavimo med oznake telesa. Zdaj bi morali imeti dokument, ki je videti takole (brez nabojev):
- html>
- glava>
- naslov> nauči se HTML - wikiHow / title>
- / head>
- telo>
- / telo>
- / html>
Dodajte besedilo v različnih slogih. Zdaj je čas, da začnete pisati nekaj, kar bo dejansko vidno v brskalniku! Vse, kar napišete znotraj telesnih oznak, bo vidno v brskalniku, ko shranite spremembe in osvežite stran v brskalniku. Napiši ne nekaj z znaki in >ker bo vaš brskalnik to razlagal kot navodilo HTML namesto kot navadno besedilo. Napišite na primer Pozdravljen, svet! (Angleško za "Hello world!", To je globalno standardno besedilo kot prvi primer v katerem koli tečaju programiranja v določenem programskem jeziku) ali kaj drugega in pred besedilom in za njim postavite naslednje oznake in si oglejte, kaj se bo zgodilo:
- em> Pozdravljen svet! / em> izgleda kot poševno besedilo: Pozdravljen, svet!
- močan> Pozdravljen svet! / močan> izgleda kot krepko besedilo: Pozdravljen, svet!
- s> Pozdravljen svet! / s> izgleda kot prečrtano besedilo: ~~Pozdravljen, svet!~~
- sup> Pozdravljeni svet! / sup> izgleda kot nadpis:
- sub> Pozdravljeni svet! / sub> izgleda kot napis: _{Pozdravljen, svet!}
- Preizkusite kombinacije: Kako vidi em> močan> Pozdravljen svet! / močan> / em> Pojdi ven?
Besedilo razdelite na odstavke. Če v dokument vstavite različne vrstice besedila, boste videli, da so vse vrstice postavljene ena za drugo. Nove vrstice in prazne vrstice morate programirati sami:
- p> To je ločen odsek./p>
- Ta stavek je v prvi vrstici, ta stavek pa v naslednji.
  To je prva oznaka, na katero naletimo, in ne potrebuje končne oznake! Takšni oznaki pravimo ena prazna oznaka.
- Ustvarite glave, da bodo imena odsekov jasna:
  h1> glava / h1>: največja možna glava
  h2> glava / h2> (dvostopenjska glava)
  h3> glava / h3> (glava 3 ravni)
  h4> glava / h4> (glava 4 ravni)
  h5> glava / h5> (najmanjša možna glava)
Naučite se sestavljati sezname. Obstaja več načinov za ustvarjanje seznamov na spletni strani. Preizkusite naslednje metode, da ugotovite, kaj vam je najbolj všeč. Upoštevajte, da je en par oznak nameščen okoli celotnega seznama (na primer oznake ul> in / ul> za neurejene sezname) in da je okoli vsakega elementa na seznamu nameščen drug par oznak, na primer li> in / li> .
- Za ustvarjanje označenih seznamov uporabite naslednjo kodo:
  ul> li> En element / li> li> Drugi element / li> li> Drugi element / li> / ul>
- Ali pa to kodo za ustvarjanje oštevilčenih seznamov:
  ol> li> postavka 1 / li> li> postavka 2 / li> li> postavka 3 / li> / ol>
- Ali pa to kodo, da ustvarite tako imenovani seznam definicij:
  dl> dt> Kava / dt> dd> - Topla pijača / dd> dt> Mleko / dt> dd> - Hladna pijača / dd> / dl>
Naredite svojo stran privlačnejšo z novimi črtami, vodoravnimi črtami in slikami. Zdaj je čas, da na svojo stran začnete dodajati še druge stvari. Preizkusite naslednje oznake (slika mora biti objavljena v spletu, da lahko uporabite povezavo do slike):
- Vstavi vrstico: br> ali hr>
- Vstavi slike: img src = "the_url_of_your_image">
Vstavite povezave do drugih mest na strani. To kodo lahko uporabite tudi za povezave do drugih strani in spletnih mest, ker pa še nimate spletnega mesta, se bomo osredotočili na "sidra", to so določena mesta na strani, do katerih lahko povežete:
- Najprej ustvarite sidro z oznako> na točki strani, na katero želite povezati. Dajte svojemu sidru jasno ime, ki si ga je lahko zapomniti:
  
  a name = "Nasveti"> To je besedilo, okoli katerega postavite sidro. / a>
- Uporabite oznako href> za povezavo do vašega sidra ali druge spletne strani:
  
  a href = "url spletne strani ali ime sidra na tej strani"> Zapišite besedilo ali sliko, prikazano kot povezava sem. / a>
- Če želite vzpostaviti povezavo do sidra na drugi strani, za urlom dodajte znak #, ki mu sledi ime sidra. Na primer http://www.wikihow.com/HTML-leren#Tips vas bo pripeljal naravnost do razdelka "Nasveti" na tej strani.

2. del 2: Učenje naprednega HTML-ja

Spoznajte atribute. Atributi so nameščeni znotraj oznake in se uporabljajo za dodatne prilagoditve "vsebine elementa" med začetno in končno oznako. Nikoli ne stojijo sami. Zapisani so na naslednji način: name = "vrednost". ime predstavlja ime atributa (na primer "barva") in vrednost opisuje ta poseben primer (npr. "rdeča").
- Če ste natančno pogledali prejšnji del tega članka, ste že naleteli na atribute. Oznaka img> uporablja atribut src, sidro uporablja atribut ime in povezave uporabljajo atribut href. Lahko ugotovite, da so vsi veliki ___='___’ slediti.
Preizkusite tabele HTML. Za izdelavo tabele ali grafa potrebujete več oznak:
- Začnite z oznakami tabele ("tabela" v angleščini) okoli celotne tabele:tabela> / tabela>
- Oznake postavite okoli vsebine vsake vrstice: tr>
- Glave stolpcev postavite v prvo vrstico: th>
- Postavite celice v zaporedne vrstice: td>
- To je primer, kako se vse to združi:
  
  tabela> tr> th> Stolpec 1: Mesec / th> th> Stolpec 2: Prihranjeni denar / th> / tr> tr> td> Januar / td> td> 100 € / td> / tr> / tabela>
Spoznajte druge oznake, uporabljene v odseku glave. Že ste se naučili oznake head>, ki jo postavite na začetek vsakega dokumenta. Poleg naslova> tag lahko v odseku z glavo obstajajo še druge oznake:
- Za ustvarjanje se uporabljajo metaoznake metapodatki o spletni strani. Te podatke iskalniki uporabljajo za kategorizacijo spletnih strani. Če želite, da je vaša stran vidna iskalnikom, lahko postavite eno ali več meta oznak (končne oznake niso potrebne), mora vsaka oznaka vsebovati natanko en atribut imena in atribut vsebine, na primer: meta name = "description" content = "tukaj opis ">; ali meta name = "keywords" content = "tukaj napišite seznam ključnih besed, vedno ločen z vejico">
- Oznake link> se uporabljajo za povezovanje drugih datotek s stranjo. Te strani se običajno uporabljajo za povezovanje slogovnih listov CSS s stranmi HTML in so izdelane z drugo vrsto kode in se uporabljajo za določanje celotnega sloga strani.
- skripte> se uporabljajo za povezovanje datotek javascript s stranjo HTML. Javascript omogoča spreminjanje strani, če uporabnik na njej kaj naredi.
Igrajte se z HTML-jem z obstoječih strani. Ogled izvorne kode spletnih strani je odličen način za razširitev znanja HTML. Z desno miškino tipko kliknite stran in izberite »Ogled vira«, »Pokaži vir strani« ali podobno. Ugotovite, kaj počne določena oznaka, ki je ne poznate, ali poiščite odgovor v spletu.
- Spletnih mest drugih ne morete urejati, lahko pa kopirate kodo HTML v svoj dokument in se z njim poigrate, da vidite, kaj počnejo različne prilagoditve. Opomba: ker številna spletna mesta uporabljajo slogovne liste CSS, morda ne boste mogli videti veliko barv ali drugih slogov.
Spoznajte HTML z branjem podrobnejših člankov. V internetu je veliko virov za obvladovanje več oznak HTML, kot sta W3Schools ali Codecademy. Na voljo je tudi veliko knjig HTML, vendar se prepričajte, da uporabljate nedavno izdajo, saj se standard HTML občasno spreminja. Ko HTML obvladate na dober nivo, se lahko obrnete na CSS za večji nadzor nad oblikovanjem in slogom vaše spletne strani. Po tem je običajno naslednji korak javascript.

Nasveti

Koristno je poiskati preprosto spletno stran na internetu in se nato začeti motati s kodo. Poskusite premakniti nekaj besedila, spremeniti pisavo, spremeniti slike, karkoli želite!
Z beležko lahko zapišete kodo, tako da se boste imeli na kaj vrniti, če se je niti za trenutek ne spomnite. To stran lahko tudi natisnete in jo shranite za referenco.
XML in RSS se danes na spletnih mestih vedno bolj uporabljata. Koda je morda videti nedostopna človeškemu očesu, zlasti če jo gledamo v izvorni kodi, vendar je funkcionalnost lahko koristna.
Oznake, ki se uporabljajo v HTML-ju, ne razlikujejo med velikimi in malimi črkami, vendar je privzeto uporaba malih črk (kot to počnemo v tem članku). Zelo priporočljive so male črke za oznake, tudi zaradi združljivosti z XHTML.

Opozorila

Nekatere oznake se ne uporabljajo več in so jih nadomestile druge, ki naredijo enako, vendar pogosto ponujajo več možnosti.
Če želite zagotoviti, da je vaša stran v skladu s standardom HTML, obiščite spletno mesto W3 in preizkusite svojo kodo glede na trenutni standard. Številne oznake so zastarele in so jih nadomestile oznake, ki bolje delujejo v sodobnih brskalnikih.

Nujnosti

Program za obdelavo besedil, na primer Notepad (Windows) ali Text Editor (Mac).
list papirja ali zvezka (neobvezno)
Program, posebej zasnovan za pisanje HTML-ja, kot je Notepad ++ za Windows ali TextWrangler za Mac (neobvezno)