Sadržaj

• Kročiti
• Dio 1 od 2: Učenje osnova HTML-a
• Dio 2 od 2: Učenje naprednog HTML-a
• Savjeti
• Upozorenja
• Potrebe

HTML je kratica za Jezik za označavanje hiperteksta, to je kod ili Jezik koja se koristi za izradu web stranica. Možda izgleda komplicirano ako nikada prije niste programirali, no za isprobavanje potreban vam je jednostavan program za obradu teksta i internetski preglednik. Možda ćete prepoznati neki HTML s foruma, mrežnih profila ili članaka wikiHow. HTML je koristan resurs za svakoga tko koristi Internet, a učenje HTML-a može potrajati kraće nego što biste očekivali.

Kročiti

Dio 1 od 2: Učenje osnova HTML-a

1. Otvorite HTML dokument. Većina programa za obradu teksta, uključujući Notepad ili Word za Windows i Text Editor za Mac, mogu se koristiti za stvaranje HTML dokumenata. Otvorite novi dokument i na vrhu izbornika odaberite Datoteka → Spremi kao da biste dokument spremili kao web stranicu ili promijenili nastavak datoteke iz ".doc", ".rtf" ili bilo što drugo u ".html" ili ".htm ".
   • Sada ćete možda vidjeti upozorenje da se vaš dokument mijenja iz formata obogaćenog teksta (RTF) u format "običnog teksta" te da neke mogućnosti oblikovanja i slike nisu pravilno spremljene. Možete zanemariti ovo upozorenje; HTML dokumenti ne koriste ove opcije.
   • Datoteke .html i .htm su iste. Oboje djeluje.
2. Pregledajte svoj dokument putem preglednika. Spremite svoj prazni dokument, zatvorite ga, a zatim dvaput pritisnite dokument na mjestu na kojem je spremljen da biste ga ponovo otvorili. Vaš bi preglednik vaš dokument sada trebao otvoriti kao praznu web stranicu. Ako to ne uspije, povucite ikonu datoteke na adresnu traku preglednika. Kasnije, ako uredite svoj HTML dokument slijedeći korake u ovom članku, vratit ćete se u preglednik kako biste provjerili kako izgledaju promjene u kodu.
   • Napomena: vaša web stranica još nije na mreži. Stranica nije dostupna drugima i ne treba vam ispravna internetska veza da biste je testirali. Vi samo koristite svoj preglednik za "čitanje" HTML dokumenta kao da je web stranica.
3. Shvatite što su "oznake". Oznake nisu vidljive na završnoj web stranici, kao što to može uobičajeni tekst. Oznake vašem pregledniku govore kako prikazati stranicu i sadržaj na stranici. Početna oznaka sadrži upute. Na primjer, pregledniku može reći da tekst prikazuje podebljano. Završna oznaka potrebna je da pregledniku kaže gdje se primjenjuju upute: u ovom je primjeru sav tekst između početne i krajnje oznake podebljan. Krajnje se oznake također stavljaju unutar zagrada, ali kosa crta slijedi prvu zagradu.
   • U zagrade napišite početne oznake: ovo je početni dan>
   • U zagrade napišite krajnje oznake, ali stavite kosu crtu nakon prve zagrade: /ovo je završna oznaka>)
   • Pročitajte kasnije u članku kako napisati funkcionalne oznake. U ovom koraku trebate samo zapamtiti na koji način pisati oznake:> i />.
   • U drugim HTML tečajevima oznake se nazivaju i "elementi", a tekst između otvaranja i zatvaranja oznaka naziva se "sadržaj elementa".
4. Napišite svoju prvu html> oznaku. Svaki HTML dokument započinje s html>oznaka i završava s / html>označiti. To govori pregledniku da je sve između ovih oznaka napisano u HTML-u. Dodajte ove oznake u svoj dokument:
   • Pisati html> na vrhu vašeg dokumenta.
   • Pritisnite nekoliko puta enter ili return da biste si dali malo prostora, a zatim napišite / html>
   • Sjećam te se sve u ovom članku između ove dvije oznake.
5. Neka glava> bude dio vašeg dokumenta. Između oznaka html> i / html> pišete a glava>početna oznaka i a / glava>-završna oznaka. Ponovno napravite razmak između ovih oznaka. Sve napisano između ovih oznaka neće biti vidljivo na samoj web stranici. Isprobajte sljedeće korake i provjerite možete li vidjeti gdje se podaci prikazuju:
   • Zapišite između oznaka head> i / head>: naslov> i / naslov>
   • Između oznaka title> i / title> pišete: Kako naučiti HTML (sa slikama) - wikiHow.
   • Spremite dokument i otvorite ga u pregledniku (ili spremite dokument i osvježite stranicu u pregledniku ako je stranica još uvijek bila otvorena). Vidite li ono što ste upravo napisali na vrhu stranice, iznad adresne trake?
6. Stvorite tijelo> odjeljak. Sve ostalo u ovom početnom dokumentu smješteno je u odjeljak body> i prikazano je na web stranici. Nakon oznaka / glava>, ali ispred oznaka / html> koju napišete tijelo> i / tijelo>. Sve o čemu ćemo dalje raspravljati u ovom članku, postavljamo između oznaka tijela. Sada biste trebali imati dokument koji izgleda ovako (bez metaka):
   • html>
   • glava>
   • naslov> naučiti HTML - wikiHow / naslov>
   • / glava>
   • tijelo>
   • / tijelo>
   • / html>
7. Dodajte tekst u različitim stilovima. Sad je vrijeme da počnete pisati nešto što će zapravo biti vidljivo u pregledniku! Sve što napišete unutar oznaka tijela bit će vidljivo u pregledniku nakon što spremite promjene i osvježite stranicu u pregledniku. Pisati ne nešto sa znakovima i >jer će vaš preglednik to protumačiti kao HTML uputu umjesto kao običan tekst. Napišite na primjer Pozdrav svijete! (Engleski za "Hello world!", Ovo je globalni standardni tekst kao prvi primjer u bilo kojem tečaju programiranja na određenom programskom jeziku) ili nešto drugo, i stavite sljedeće oznake prije i poslije teksta i pogledajte što će se dogoditi:
   • em> Pozdrav svijete! / em> izgleda u kurzivu: Pozdrav svijete!
   • jak> Pozdrav svijete! / jak> izgleda podebljano: Pozdrav svijete!
   • s> Pozdrav svijete! / s> izgleda kao precrtani tekst: Pozdrav svijete!
   • sup> Pozdrav svijetu! / sup> izgleda kao nadpis:
   • sub> Pozdrav svijetu! / sub> izgleda kao natpis: _{Pozdrav svijete!}
   • Isprobajte kombinacije: Kako vidi em> jak> Pozdrav svijete! / jak> / em> Izađi?
8. Podijelite svoj tekst na odlomke. Ako u dokument stavite različite retke teksta, vidjet ćete da se svi redovi postavljaju jedan za drugim. Nove linije i prazne redove morate programirati sami:
   • p> Ovo je zaseban odjeljak./p>
   • Ova je rečenica u prvom retku, a ova rečenica u sljedećem.
     Ovo je prva oznaka na koju nailazimo i koja ne treba završnu oznaku! Takvu oznaku nazivamo jednom prazna oznaka.
   • Stvorite zaglavlja da biste jasno objasnili nazive odjeljaka:
     h1> zaglavlje / h1>: najveće moguće zaglavlje
     h2> zaglavlje / h2> (zaglavlje na dvije razine)
     h3> zaglavlje / h3> (zaglavlje na tri nivoa)
     h4> zaglavlje / h4> (zaglavlje od 4 razine)
     h5> zaglavlje / h5> (najmanje moguće zaglavlje)
9. Saznajte kako sastaviti popise. Postoji nekoliko načina za stvaranje popisa na web stranici. Isprobajte sljedeće metode kako biste saznali što vam se najviše sviđa. Imajte na umu da se jedan par oznaka postavlja oko cijelog popisa (kao što su ul> i / ul> oznake za neuređene popise) i da se oko svake stavke na popisu postavlja različiti par oznaka, poput li> i / li> .
   • Koristite sljedeći kôd za izradu popisa s grafičkim oznakama:
     ul> li> Jedna stavka / li> li> Druga stavka / li> li> Druga stavka / li> / ul>
   • Ili ovaj kod za stvaranje numeriranih popisa:
     ol> li> Predmet 1 / li> li> Predmet 2 / li> li> Predmet 3 / li> / ol>
   • Ili ovaj kod za stvaranje takozvanog popisa definicija:
     dl> dt> Kava / dt> dd> - Topli napitak / dd> dt> Mlijeko / dt> dd> - Hladno piće / dd> / dl>
10. Učinite svoju stranicu privlačnijom novim linijama, vodoravnim crtama i slikama. Sada je vrijeme da počnete dodavati druge stvari na svoju stranicu. Pokušajte sa sljedećim oznakama (slika mora biti objavljena na mreži kako biste mogli koristiti vezu na sliku):
    • Umetni redak: br> ili hr>
    • Umetni slike: img src = "the_url_of_your_image">
11. Umetnite poveznice na druga mjesta na stranici. Ovaj kôd možete koristiti i za povezivanje s drugim stranicama i web mjestima, ali budući da još nemate web mjesto, usredotočit ćemo se na "sidra", a to su posebna mjesta na stranici na koja možete povezati:
    • Prvo stvorite sidro s oznakom a> na mjestu stranice na koju želite povezati. Dajte svom sidru jasno ime koje je lako zapamtiti:
      
      a name = "Savjeti"> Ovo je tekst oko kojeg postavljate sidro. / a>
    • Upotrijebite oznaku href> za povezivanje na vaše sidro ili drugu web stranicu:
      
      a href = "url web stranice ili naziv sidra na ovoj stranici"> Ovdje napišite tekst ili sliku prikazanu kao veza. / a>
    • Da biste se povezali sa sidrom na drugoj stranici, dodajte znak # nakon urla, nakon čega slijedi ime vašeg sidra. Na primjer, http://www.wikihow.com/HTML-leren#Tips odvest će vas izravno do odjeljka "Savjeti" na ovoj stranici.

Dio 2 od 2: Učenje naprednog HTML-a

1. Saznajte više o atributima. Atributi se postavljaju unutar oznake i koriste se za dodatna prilagođavanja "sadržaja elementa" između početne i završne oznake. Nikad ne stoje sami. Napisani su na sljedeći način: name = "vrijednost". Ime predstavlja ime atributa (na primjer, "boja") i vrijednost opisuje ovaj konkretni slučaj (npr. "crveni").
   • Ako ste pažljivo pogledali prethodni dio ovog članka, već ste se susreli s atributima. Oznaka img> koristi atribut src, sidro koristi atribut Ime a veze koriste atribut href. Možete reći da su sve veličine ___='___’ pratiti.
2. Eksperimentirajte s HTML tablicama. Za izradu tablice ili grafa potrebno vam je nekoliko oznaka:
   • Počnite s oznakama tablice ("tablica" na engleskom) oko cijele tablice:stol> / stol>
   • Postavite oznake oko sadržaja svakog retka: tr>
   • Postavite zaglavlja stupaca u prvi redak: th>
   • Stavite stanice u uzastopne redove: td>
   • Ovo je primjer kako se sve ovo slaže:
     
     tablica> tr> th> Kolona 1: Mjesec / th> th> Kolona 2: Ušteden novac / th> / tr> tr> td> Siječanj / td> td> 100 € / td> / tr> / tablica>
3. Naučite ostale oznake korištene u odjeljku glave. Već ste naučili oznaku head>, koju stavljate na početak svakog dokumenta. Pored naslova> tag, u odjeljku glave mogu biti i druge oznake:
   • Za izradu se koriste metatagovi metapodaci o web stranici. Te podatke tražilice koriste za kategorizaciju web stranica. Da biste svoju stranicu učinili vidljivom tražilicama, možete postaviti jednu ili više metatagova (krajnje oznake nisu potrebne), svaka oznaka mora sadržavati točno jedan atribut imena i atribut sadržaja, na primjer: meta name = "description" content = "ovdje stavite opis ">; ili meta name = "keywords" content = "ovdje napišite popis ključnih riječi, uvijek odvojen zarezom">
   • oznake link> koriste se za povezivanje ostalih datoteka sa stranicom. Tipično se koriste za povezivanje CSS listova stilova s ​​HTML stranicama, te su stranice izrađene s drugom vrstom koda i koriste se za određivanje ukupnog stila stranice.
   • skripte> oznake koriste se za povezivanje javascript datoteka s HTML stranicom. Javascript omogućuje promjenu stranice ako korisnik nešto učini na stranici.
4. Igrajte se s HTML-om s postojećih stranica. Pregled izvornog koda web stranica izvrstan je način da proširite svoje znanje o HTML-u. Desnom tipkom miša kliknite stranicu i odaberite "Prikaži izvor", "Prikaži izvor stranice" ili slično. Saznajte što čini određena oznaka koju ne znate ili potražite odgovor na mreži.
   • Ne možete uređivati ​​tuđe web stranice, ali možete kopirati HTML kôd u svoj dokument i poigrati se s njim kako biste vidjeli što rade različite prilagodbe. Napomena: budući da mnoga web mjesta koriste CSS listove stilova, možda nećete moći vidjeti mnogo boja ili druge stilove.
5. Saznajte o HTML-u čitajući detaljnije članke. Na internetu postoji mnogo resursa za svladavanje više HTML oznaka poput W3Schools ili Codecademy. Dostupno je i mnogo HTML knjiga, ali pazite da koristite nedavno izdanje jer se HTML standard s vremena na vrijeme mijenja. Nakon što savladate HTML na dobroj razini, možete se obratiti CSS-u za veću kontrolu nad dizajnom i stilom vaše web stranice. Nakon toga, sljedeći je korak obično javascript.

Savjeti

• Može biti korisno pronaći jednostavnu web stranicu na Internetu, a zatim se početi zezati s kodom. Pokušajte premjestiti malo teksta, promijeniti font, promijeniti slike, što god želite!
• Možete koristiti bilježnicu da zapišete kôd, tako da se imate na čemu vratiti, ako ga se ni na trenutak ne sjetite. Ovu stranicu možete i isprintati i zadržati za referencu.
• XML i RSS danas se sve više koriste na web mjestima. Kôd može izgledati nepristupačno za ljudsko oko, posebno kada se gleda u izvornom kodu, ali funkcionalnost može biti korisna.
• Oznake koje se koriste u HTML-u ne razlikuju velika i mala slova, no zadana je upotreba malih slova (kao što radimo u ovom članku). Mala se slova za oznake toplo preporučuju, također zbog kompatibilnosti s XHTML-om.

Upozorenja

• Neke se oznake više ne koriste i zamijenile su ih druge oznake koje čine isto, ali često nude više mogućnosti.
• Ako želite biti sigurni da je vaša stranica u skladu s HTML standardom, idite na web mjesto W3 da biste testirali svoj kôd u skladu s trenutnim standardom. Mnoge su oznake zastarjele i zamijenjene su oznakama koje bolje funkcioniraju u modernim preglednicima.

Potrebe

• Program za obradu teksta, kao što je Notepad (Windows) ili Text Editor (Mac).
• list papira ili bilježnicu (neobavezna)
• Program posebno dizajniran za pisanje HTML-a, kao što je Notepad ++ za Windows ili TextWrangler za Mac (neobavezna)