Ovaj dio stranice u potpunosti je posvećen dvama jezicima za kreiranje stranice, odnosno HTML-u i CSS-u. Ovdje možete učiti jezike korak po korak, naučiti sve od osnova do najtežih trenutaka.

Ovaj odjeljak je izgrađen na principu proučavanja materijala korak po korak, stoga se prije svakog naslova lekcije o HTML-u i CSS-u nalazi broj koji odgovara serijskom broju lekcije. Ovo je prirodno ako želite sve naučiti od samih osnova i ne praviti nered u glavi. Ako već znate nešto o HTML i CSS jezicima, onda ovdje možete pronaći i znanje koje vam nedostaje ili produbiti ono što ste već naučili.

IN ovaj odeljak Lekcije o jezičkim standardima HTML5 i CSS3 su objavljene, odnosno ako postoje novije verzije ovih jezika, one će se takođe odraziti u novim lekcijama u ovom odeljku, a vi ćete to sigurno saznati.

Vjerovatno je svaka osoba koja se barem jednom u životu susrela s kreiranjem web stranice sigurno čula za takvu kombinaciju kao što su html i css, mogu sa sigurnošću reći da ako želite sami napraviti web stranice, onda ne možete bez poznavanja ovih dvije stvari.

Nakon što ste primili opšti koncepti Očigledno postoji dvosmislena slika u vašoj glavi o tome šta je html, i mislim da to nije iznenađujuće. Vrijeme je da prijeđete direktno na praksu i kreirate svoj prvi HTML dokument.

Kao i html jezik, CSS ima svoje karakteristike, pravila i strukturu. U ovoj lekciji ću vam reći o osnovnim konceptima CSS jezika, njegovoj strukturi, dizajnu, a mi ćemo uraditi prvi CSS tabela stilova i naučite kako povezati stilski list sa html dokumentom.

Selektori u CSS-u su osnova samog jezika i njihovo učenje i razumevanje je veoma važno, pa ću vam u ovoj lekciji reći o još nekoliko tipova selektora i opisati njihove mogućnosti.

Vrlo važna tačka u kreiranju web stranice je rad s tekstom, a kao što razumijete, također morate znati raditi s tekstom u html-u, te znati koje oznake postoje i kako se mogu koristiti.

Nakon što ste naučili sve HTML oznake za rad sa tekstom, sada je vrijeme da prijeđete direktno na CSS rad sa tekstom, što će značajno proširiti vaše znanje i mogućnosti.

CSS sadrži ogroman broj svih vrsta praktičnih i kvalitativnih promjena izgled svojstva i nastavljamo da proučavamo CSS rad sa tekstom iu ovoj lekciji ćemo se udubiti u temu rada sa tekstom i pogledati nova svojstva teksta.

Rad sa slikama prilikom kreiranja sa web stranice jedna je od ključnih točaka, kako prilikom kreiranja dizajna, tako i prilikom jednostavnog postavljanja ili pisanja bilo kojeg materijala za vašu web stranicu.

CSS uvelike proširuje mogućnost rada sa bilo kojim html objekti, u ovoj lekciji želim vam detaljno reći o parametrima koji se mogu primijeniti na slike.

Ovaj članak nije namijenjen da bude sveobuhvatan vodič za jezik za označavanje HTML dokumenata. Opisuje osnove HTML-a - osnovne principe, koncepte i definicije ove tehnologije, savladavši koju, lako možete nastaviti u proučavanju HTML kodiranja.

Cool

Mucaj

Da biste proučili lekciju, preuzmite arhivu s potrebnim datotekama.

HTML je jezik za označavanje dokumenata. Tačan izgovor je HTT.

Vjerovatno ste ikada radili u Word uređivaču dokumenata ili slično. kancelarijske aplikacije? Vjerovatno to znate ovaj tip uređivači imaju bogate mogućnosti za uređivanje teksta, sređivanje elemenata, umetanje slika itd.

Zašto biste, mogli biste se pitati, pisati o programima za obradu teksta u članku o HTML-u? Ali zašto. Ako shvatite, šta je uredski urednik? Ovo je aplikacija za uređivanje i prikaz dokumenata.

Ovdje je ključna riječ dokument. Odnosno, kreiramo, uređujemo i pregledavamo dokument u nekom programu, u ovom slučaju - u urednica ureda. Ako otvorite takav dokument u jednostavnom uređivač teksta, na primjer, u Notepadu ćemo vidjeti mnogo čudnih simbola i znakova. Ova zbrka simbola je neshvatljiva čovječanstvu, ali razumljiva kompjuterima. Zahvaljujući ovom unutrašnjem jeziku, Word dokument dobija određenu strukturu i izgled u samom uređivaču, a dokument se pred nama pojavljuje u svom sjaju sa formatiranim tekstom i slikama na svom mestu.

HTML je jezik za označavanje dokumenata za pretraživač. Riječ je ovdje pretraživač, a dokument je HTML stranica. Ovo je sama osnova HTML tehnologije, čije je razumijevanje neophodno da se ne pobrka jezik za označavanje web dokumenata sa programskim jezicima. koristeći HTML we obeležavanje, gdje će se na stranici prikazati element, slika ili tekst i kojim redoslijedom će se pojaviti jedan pored drugog.

Da, jednostavno kucanje i formatiranje teksta u uredskim aplikacijama nema nikakve veze s programiranjem. Ali pažljiv čitalac će primijetiti važan detalj - u program za obradu teksta Mi kucamo, uređujemo i formatiramo tekst i slike pomoću vizuelnih dugmadi i menija, ali zašto se HTML kod piše ručno? Zašto naučiti toliko tehničkih detalja o pisanju oznaka za dokument?

U stvari, postoji mnogo uređivača pomoću kojih možete kreirati i uređivati ​​HTML stranice, slično Wordu. Odnosno, izvorni HTML kod je skriven za nas i ne ulazimo u njega.

Neka vrsta Worda za HTML. Takve vizuelni urednici zovu se:

WYSIWYG urednici - Šta vidiš šta vidiš šta vidiš. Odnosno, ako to prevedemo na ruski: ono što vidimo to i dobijamo.

Ja ih zovem "wuzivoogies". Iako je ovo fonetski netačno, jasno pokazuje besmislenost ovog izuma. Početnici vrlo često koriste takve urednike za kreiranje svojih prvih web stranica. Naravno, ovo je zgodno - ne morate se upuštati u proučavanje oznaka, stilova dizajna i drugih, na prvi pogled, neugodnih i složenih stvari. Sam uređivač automatski pretvara naše radnje u HTML kod.

Ali, kako kažu, ništa se jednostavno ne dešava. Tačnije, ovaj pristup ima veoma ozbiljne nedostatke. Šta sve sprečava da koriste vizuelne uređivače za dizajniranje HTML stranica? Činjenica je da ovako formirane stranice obično imaju mnogo nepotrebnog koda i mnogo grešaka sa semantičke tačke gledišta. Sada, naravno, nema problema sa brzi internet veze i razlika u veličini stranice od 400 kb i 100 kb nije značajna za brzinu, međutim optimiziran i ispravno napisan HTML kod otklanja mnoge probleme i pruža mnoge prednosti, a to su:

• Kompetentan HTML kod ima pozitivan učinak na optimizacija za pretraživače, brzina puzanja od strane robota za pretragu stranice. Kilobajti koda koje generiše vuzivuga nisu prihvatljivi, pa čak i štetni;
• HTML kod koji generiše WYSIWYG editor ima mnogo semantičkih grešaka. Odnosno, oznake koje generiše takav uređivač koriste se u druge svrhe, gdje ih treba koristiti, na primjer, liste
  , uređivač će generirati još jednu oznaku koja nam nije potrebna. Zavisi, naravno, o uređivaču, ali ovdje mislimo na kompleksna rješenja za izradu web stranica, ne jednostavno uređivanje tekst u tekstualnom području koristeći WYSIWYG.
  • Generiše se mnogo nepotrebnih oznaka i struktura dokumenta postaje naduvana. Recimo da pomjerite element u takvom programu, prvo udesno, zatim ulijevo, pa u centar - svaka radnja ostavlja trag u originalni HTML kod. Editor je program i ne može znati šta tačno želite da dobijete kao rezultat, on generiše tone koda uzimajući u obzir sve moguće opcije ponašanje dokumenta u pretraživaču.
  • Po pravilu, uređivači za vizuelni dizajn HTML koda brzo zastarevaju. A zbog nezainteresovanosti profesionalaca uglavnom su uskraćeni za podršku i prestaju da se razvijaju. A HTML se razvija. Sve se razvija osim wuzivoogija. Shodno tome, ne mogu da generišu ispravan i moderan kod koji bi koristio nove karakteristike i rešenja.
  • Podržavati i razvijati takve projekte je nebeska kazna. O korištenju uzoraka i ponovo koristiti Kodeks govora uopšte ne može postojati.

  Dakle, pisaćemo HTML samo olovkama. Adekvatni alati za vizuelno uređivanje HTML-a još uvek nisu izmišljeni i malo je verovatno da će se pojaviti. HTML jezik za označavanje lako je naučiti i razumjeti, a postoji mnogo alata za automatizaciju pisanja HTML koda, ali više o tome u drugim lekcijama.

  Nakon što su se malo poigrali sa WYSIWYG editorom, mladi HTML gurui ostavljaju ovaj uzaludan zadatak i idu dalje.

  Struktura HTML dokument

  Za časove preporučujem preuzimanje i instaliranje uređivača Sublime Text. Toplo preporučujem da ne koristite ugrađeni Windows Notepad za HTML izgled ako ne želite da razbijete svoju psihu u ranim fazama učenja HTML-a.

  Odlučili smo da ćemo ručno napisati kod HTML dokumenta, odnosno otkucati ga. HTML Layout - proces Kreiranje HTML-a dokument. U običnim ljudima i informisanim krugovima, to je samo raspored. Svaki dokument ima strukturu i određena pravila konstrukcije. Od kojih elemenata se sastoji kod, kakva je struktura HTML-a?

  Kreirajmo početni predložak na računaru - datoteku index.html, otvorimo je pomoću editora i zalijepimo sljedeći kod u nju:

  Telo dokumenta zaglavlja Imajte na umu da HTML dokumenti imaju ekstenziju .html.

  Dakle, redom prema primjeru.

  - vrsta dokumenta (doctype)

  Ova konstrukcija je uvijek naznačena na početku dokumenta tako da pretraživač ispravno „razumije“ koja se verzija HTML-a koristi prilikom izrade dokumenta.

  Zbog činjenice da se HTML stalno razvija, ima nekoliko verzija, kao i svaka druga softverski proizvod. Trenutna verzija HTML-a je peta, a tip dokumenta dat u primjeru je trenutni.

  U principu, nema smisla ulaziti dublje u proučavanje tipova dokumenata, jer sa izdavanjem HTML5 ovaj dizajn je postao standard. Samo ga umetnite na početak dokumenta svaki put kada počnete kreirati izgled web stranice.

  - početak dokumenta

  Prva oznaka koju vidimo nakon doctype je .

  HTML oznaka - strukturna jedinica Označavanje HTML dokumenta. HTML kod se sastoji od građevnih blokova koji se nazivaju tagovi. Svaka oznaka ima svoju funkciju, a učenje HTML jezika za označavanje je u konačnici učenje oznaka i njihovih svojstava u dokumentu.

  Želio bih napomenuti da učenje HTML-a nije tako teško kao što se na prvi pogled čini. Učenje oznaka koje se koriste u označavanju dokumenata nije tako lako. teško opterećenje na mozgu.

  Dakle, označavanje dokumenta počinje oznakom i završava se završnom oznakom. Svaki tag koji sadrži druge oznake ili elemente mora biti zatvoren završnom oznakom. Na primjer, , , , itd.

  Oznaka je obavezna jer sadrži cijelu strukturu dokumenta i omotač je za ostale elemente.

  Tag

  Zatim vidimo oznaku koja sadrži druge elemente koji nam još nisu jasni. Sadrži druge elemente - to znači da se elementi ili oznake nalaze između početne i završne oznake konstrukcije:

  sadržaj ili druge oznake

  Svrha oznake je pohranjivanje meta informacija HTML dokumenta, odnosno informacija koje se ne prikazuju u samom dokumentu, ali su važne i u velikoj mjeri određuju kako će dokument izgledati i ponašati se.
  Ova oznaka je obavezna u dokumentu.

  Tag - naslov dokumenta Naslov

  Naslov je obavezna oznaka koja sadrži tekstualne meta informacije koje se pojavljuju u naslovu pretraživača ili kartice. Oznaka mora biti u . Također, koristi se sadržaj ove oznake tražilice za prikaz dokumenta u rezultatima pretrage.

  Meta tag

  Meta tag je specijalizovana oznaka dizajnirana da pruži strukturirane podatke o stranici. Meta tagovi se najčešće koriste u . Meta oznake nisu potrebne u strukturi HTML dokumenta.

  Favicon

  Dokumentu prilaže datoteku sa slikom ikona ikona. Favicon je minijaturna ikona koja se prikazuje pored naslova dokumenta na kartici pretraživača. Favicon je grafički fajl, veličine 16 x 16 (ili 32 x 32) piksela, koji mogu imati različite formate, kao što su png, jpg, ico, gif. Tradicionalno korišteno ico format. Animirani favikoni su gif datoteke koji sadrže animaciju. Možete vidjeti animirani favicon, na primjer, na VKontakteu, kada stigne nova poruka.

  CSS stilovi dokumenata

  Povezuje se na CSS dokument HTML stilski fajl.

  CSS- kaskadno HTML stilovi dokumenata. Svaka oznaka koja se nalazi u oznaci ima skup svojstava, kao što su boja, širina, visina, pozicija u odnosu na druge elemente. Sva ova svojstva su CSS stilovi koji se mogu izvesti u eksternu datoteku. Dizajn povezuje vanjske datoteke sa HTML dokumentom, uključujući CSS stilove.

  Napomena: Svojstvo href konstrukcije specificira lokaciju eksterne datoteke. U našem primjeru, fajl style.css I favicon.ico, nalaze se u istoj fascikli kao i datoteka index.html.

  Tag

  nema završnu oznaku.

  Oznaka sadrži kod ili vezu do javaScript datoteke i najčešće se koristi unutar oznake, iako Googleov alat za optimizaciju brzine stranice preporučuje korištenje ove oznake na kraju dokumenta, prije završne oznake. U našem primjeru spojen je vanjski fajl script.js

  , koji se nalazi u istoj fascikli kao i glavna datoteka index.html.

  Dakle, prijatelji, pogledali smo glavne elemente koji se najčešće koriste u tag-u. Pored ovih elemenata, postoji niz drugih koji su specifičniji i opcioni.

  Tijelo aka tijelo

  Ovdje počinju sve zabavne i vizualno opipljive stvari u HTML izgledu dokumenta. index.html Pređimo direktno na izgled vidljivog dijela stranice. Sve što napišemo i rasporedimo unutar oznake biće prikazano u pretraživaču. Hajde da otvorimo naš fajl

  u pretraživaču kako bismo jasno vidjeli šta radimo u editoru. Oznaka može sadržavati bilo koje HTML oznake

  potrebno za pripremu dokumenta i osiguranje njegove funkcionalnosti (obrazac). Navest ću tabelu najčešće korištenih oznaka i ukratko opisati svaku od njih. Možete odmah pokrenuti primjere date u editoru.	Tag
  	Opis Oznaka za kreiranje veza u dokumentu.
  ,	Primjer: tekst veze Atribut href specificira dokument do kojeg vodi veza. Pravi tekst kurziv ili podebljano (naglašeno).
  , , , , ,	Primjer: kurziv tekst podebljan (naglašen) tekst Naslovi dokumenata. Ukupno postoji 6 nivoa naslova, ali se u praksi koriste samo h1 do h4. U dokumentu treba postojati samo jedan naslov, označen oznakom h1, kao glavni naslov dokumenta.
  ,	Liste dokumenata. Oni su numerisani ili označeni brojevima. Element takve liste je oznaka primjeri: Element bulleted list 1 Bullet Item 2 Stavka numerisane liste 1 Stavka numerisane liste 2
  	Paragraf. Ova oznaka definira pasus teksta odvojen od ostalih pasusa. Veoma je preporučljivo zatvoriti ovu oznaku. primjer: Izgled HTML markupa je u velikoj mjeri određen CSS stilovima. Međutim, neki webmasteri odlučuju da ne koriste stilove u ranim fazama projekta.
  	Slika. Koristeći ovu oznaku, možete umetnuti sliku u HTML oznaku. Obavezno uključite alternativni tekst za sve slike - atribut "alt". Ova oznaka se samozatvara. primjer:
  + +	Obrasci i elementi unosa. Obrasci su dizajnirani da unose informacije u sistem na serveru. Nekako povratne informacije korisnika i stranice. Na primjer, obrasci se koriste kada trebate poslati neku poruku na server. Osim toga, obrasci mogu obavljati i druge funkcije, ali glavni zadatak je slanje podataka na server. Primjer je jednostavan obrazac za slanje poruke, u kojem korisnik stranice navede svoje ime, e-mail i neki tekst: Tekst poruke
  	Definira podniz unutar niza. Koristi se za stiliziranje dijela linije koristeći CSS. Jedna od najčešće korištenih oznaka. Bez dizajna se ni na koji način ne manifestira u pretraživaču. Primjer: Učenje HTML-a u većini slučajeva ne izaziva nikakve poteškoće početnicima.
  ,	Oznake su dizajnirane da umetnu video i audio u dokument. Završna oznaka je obavezna. Primeri: Parametar kontrole nam govori da stranica treba da prikazuje kontrole medijskog sadržaja, baš kao običan audio/video plejer.
  	Zaista kraljevska oznaka. Najčešće korišteni i popularna oznaka V HTML markup stranice. Ovo je blok element dizajniran za upravljanje blokovima na stranici. Često se koristi koncept "divnog" izgleda - to znači da su svi blokovi na web stranici postavljeni pomoću ovih oznaka. Može sadržavati druge oznake. Primjer: Tekst u ugniježđenom bloku Svi elementi, u većini slučajeva, su formatirani CSS svojstva stilova. Završna oznaka je obavezna.
  	Ova oznaka učitava vanjsku stranicu u dokument. primjer:

  Nismo uzeli u obzir sve oznake i to nije neophodno. u ovoj fazi. Glavna stvar je razumjeti osnovnu ideju HTML-a, naučiti kako koristiti gore navedene oznake, a zatim nastaviti dalje.

  Imajte na umu da sva imena u uključenim fajlovima moraju biti napisana latinični znakovi, bez razmaka.

  Na primjer, nemojte:

  Ovo je neophodno za veću kompatibilnost sadržaja stranice. Osim toga, standardi za pisanje HTML koda nalažu.

  Dakle, sada znamo neke osnove HTML-a: kakvu strukturu treba da ima tipičan HTML dokument, znamo neke od najpopularnijih oznaka, vrijeme je da pređemo na najukusniji dio – naime, kolačiće.

  Praktični zadatak o HTML izgledu

  Ako još niste preuzeli arhivu sa primjerima, učinite to. Na primjer, možete pogledati datoteku example.html, koja je također bila u arhivi.

• Raspakujte arhivu i kreirajte datoteku index.html u fascikli sa raspakovanim fajlovima. Otvorite kreiranu datoteku pomoću uređivača teksta Sublime Text;
• Kreirajte početnu strukturu dokumenta sa tipom dokumenta, oznakom koja sadrži i i nastavite sa uređivanjem sadržaja oznake;
• Otvorite datoteku readme.txt i dovršite odgovarajuće zadatke u datoteci index.html koju ste kreirali. Da provjerite rezultat, otvorite index.html u svom omiljenom pretraživaču.

Ovim je završena lekcija o osnovama HTML-a, u sljedećoj lekciji “Osnove CSS-a” naučit ćemo kako upravljati stilovima elemenata dokumenta, upoznati kaskadne listove stilova, naučiti kako koristiti klase stilova i učiniti naš izgled lijepim i šarenim .

Dobrodošli na stranice mog bloga. HTML je jednostavan jezik za označavanje koji se koristi za kreiranje web stranica. Rekao sam da je jednostavno da se ne biste uplašili da ga naučite. html jezik je jednostavno idealan za početnike - mnogo je teže odmah savladati programski jezik od nule, ali html je zapravo mnogo jednostavniji.

U ovom članku želim vam reći kako najbrže i najefikasnije naučiti ovaj jezik, kako biste ga za mjesec-dva znali savršeno. Mislite li da je nemoguće? Počeo sam učenje html-a krajem marta. Krajem maja sam već znao 90% tagova potrebnih za rad bez ikakvih problema.

Kako besplatno naučiti jezik?

Naravno, za najbrže učenje trebali biste pronaći nekoliko korisnih stranica. Prvo će vam trebati html reference. Koriste ga čak i iskusni programeri, jer je jednostavno nemoguće zadržati desetine oznaka i njihovih atributa u glavi.

Od referentnih knjiga mogu vam preporučiti - htmlbook. Ovo je stvarno cool stranica koja prikuplja sve oznake i pokazuje rezultat njihovog rada detaljan opis. Ali priručnik je samo dodatni alat, najveći efekat se može postići stvarnom praksom.

Interaktivni kursevi

I ovdje govorim o interaktivnim kursevima. Ovo je mogućnost pisanja koda i odmah vidjeti kako se prikazuje. Tokom kurseva dobijate zadatke. Prvo, jednostavni, na primjer, pretvaranje teksta u naslov ili pravljenje tabele. Tada je teže. Na kraju ćete steći razumijevanje šta možete učiniti s HTML-om. Ako mislite da za ovo morate platiti, varate se.

je divan sajt sa kursevima html i css. Prvih 16-18 kurseva su besplatni! Ako želite da nastavite studije i dobijete pristup plaćenim, moraćete da plaćate 300 rubalja mesečno ili 1800 godišnje. Lično sam platio 300 rubalja, završio sve plaćene kurseve za mjesec dana i od toga dobio mnogo koristi.

Važnost zapisa

Još jedan moj savjet – zapišite! Zapišite sve informacije koje su vam nove i važne. Ako to ne zapišete, rizikujete da ne zadržite potrebno znanje u svom pamćenju. Lično, na svojoj polici imam tri opće bilježnice, gotovo u potpunosti ispunjene spisima, i s vremena na vrijeme ih pogledam kada zaboravim ovo ili ono imanje.

Paralelno proučavanje html-a i css-a

HTML je samo jedna web tehnologija koja pomaže u kreiranju strukture i izgleda web stranice. CSS je u potpunosti odgovoran za dizajn u razvoju web stranica. Ove jezike treba učiti istovremeno jer su u interakciji jedni s drugima.

Samostalna praksa

Nakon što steknete neko znanje, možete sami vježbati. Kako to učiniti? Pokušajte postaviti članak sa slikama, tabelom, ugniježđenom listom, jednostavnim izgledom stranice u dvije kolone ili nečim drugim. Morate vježbati jer je to jedini način da brzo ugradite u mozak razumijevanje kako stvari funkcioniraju. Najbolje je, naravno, pronaći sebi učitelja u ovoj stvari, ali najvjerovatnije ćete morati platiti za to.

Lekcije iz webformyself tima

Webformyself je prekrasan internet portal koji pruža gomilu informacija o izradi web stranica. Na njihovoj web stranici možete pronaći mnogo besplatnih članaka o HTML-u, CSS-u i izgledu web stranice, ali su objavili i plaćene video tutorijale, čija je svrha da vam što prije prenesu korisna znanja.

Na kraju krajeva, trebali biste imati razlog zašto učite ove web tehnologije. To se obično radi kako bi naučili kako sami kreirati izgled web stranice. Ako i vi imate ovaj cilj, onda bi odlična opcija za vas bila da kupite pristup premium lekcijama na webformyself.com. Kao rezultat, možete dobiti ne samo pristup lekcijama o HTML-u i CSS-u, već i mnogim drugim. Na primjer, JavaScript i WordPress.

Ovdje je link do opisa premium odjeljka. Postoje korisne lekcije, uključujući mogućnost da napravite svoj prvi izgled koristeći lekcije. Ovo je veoma važno, jer ćete dobiti dobru praksu, nakon čega ćete moći sami da unapredite svoje veštine, pokušavajući da kreirate druge izglede sajtova koje pronađete na internetu.

Koliko je vremena potrebno za učenje jezika?

U prosjeku, HTML i CSS se mogu naučiti vrlo brzo pravi pristup. Na primjer, meni je trebalo nekoliko mjeseci. Ako znate gdje dobiti znanje, proces učenja se može nekoliko puta ubrzati.

Dao sam vam dobre stranice sa korisnim materijalima - onda je na vama. U principu, gore navedeni resursi su najbolji na Internetu. Na primjer, više od sto hiljada ljudi završilo je kurseve iz Htmlacademy, a više od 87 hiljada ljudi se pretplatilo na ažuriranja Webformyself-a.

HTML je skraćenica od H yper T ext M arkup L anguage, tj. Hypertext Markup Language je osnovni gradivni blok web stranica, koji se koristi za kreiranje i vizualno predstavljanje web stranica.

HTML dodaje oznake običnom tekstu. Hipertekst sadrži različite veze preko kojih su web stranice međusobno povezane. Uz HTML, svako može kreirati i statičke i dinamičke web stranice. HTML je jezik koji opisuje strukturu i semantiku sadržaja web dokumenta. Sadržaj web stranice se označava pomoću tagova, koji predstavljaju HTML elemente. Primjeri takvih elemenata su, , i tako dalje. Ovi elementi čine gradivne blokove za bilo koju web stranicu.

HTML je 1991. godine izumio naučnik Tim Berners-Lee, a prvobitno je bio namijenjen za razmjenu dokumenata između naučnika na različitim univerzitetima. Tim Burns-Lee je svojim izumom postavio temelje moderna mreža Internet.

Postoji nekoliko verzija HTML-a. Jezički standard se kontinuirano ažurira i dopunjuje, zbog čega se objavljuje gotovo svake godine nova verzija HTML. Verzija "HTML 2.0" je bila prva standardna HTML specifikacija, koja je objavljena 1995. godine. HTML 4.01 je glavna verzija HTML-a koja je objavljena krajem 1999. godine i danas se široko koristi. Danas je najpopularnija verzija HTML-5, tj HTML ekstenzija 4.01, a objavljena 2012.

HTML dokument ili web stranica je jednostavan tekstualni dokument koji sadrže oznake (koje su zauzvrat u običnom tekstu, u ugaonim zagradama). Web stranica se može kucati ili u običnom uređivaču teksta (Notepad, WordPad, Word, itd.) ili u specijalizovanom sa isticanjem koda (Notepad++, Sublime Text, itd.). HTML dokumenti se pohranjuju kao datoteke sa ekstenzijom .htm ili .html.

Online primjeri u svakoj lekciji

Dok predstavljamo materijal, svaka lekcija će pružiti primjere koji će vam pomoći da detaljno razumijete svaki kod i, kroz praksu, uživate u učenju. Pomoću našeg HTML uređivača na mreži možete urediti HTML dokument, a zatim kliknuti na narandžasto dugme "Pokreni" u uređivaču, koje se nalazi iznad lijevog prozora uređivača da vidite rezultat. Ako koristite specijalizirani HTML editor, tada možete kopirati primjer i vidjeti rezultate svog rada u pretraživaču instaliranom na vašem računalu.

Primjer HTML-a: Probajte sami


Naslov stranice

Ovo je naslov


Ovo je paragraf.



Online HTML primjeri

HTML vodič vam pruža više od 100 online primjera koji će vam pomoći da lako savladate jezik za označavanje. Bolje je jednom vidjeti nego sto puta čuti! Teorija plus praksa je ključ vašeg uspjeha u savladavanju HTML-a.

Ovom serijom želim da otvorim seriju lekcija posvećenih HTML-u. Donio sam ovu odluku jer bih želio pokušati naučiti korisnike kako da kreiraju web stranice od nule. Ova misao je bila u mojoj glavi već duže vrijeme. Jedino pitanje koje se pojavilo bilo je odakle početi, sa HTML-om ili nastaviti direktno sa instalacijom motora i daljem konfiguracijom.

Ali ako počnete sa učenjem motora, onda će neki od korisnika koji ne znaju HTML biti izostavljeni. Zato sam odlučio da počnem od osnova i to tako da i svaki početnik može da shvati šta i kako.

Dakle, šta je HTML?

Sama skraćenica označava jezik za označavanje hiperteksta (HyperText Markup Language).

Jednostavno rečeno, HTML je poseban jezik za označavanje koji govori pretraživaču kako da prikaže određenu web stranicu. Odnosno, kojim fontom treba da bude prikazan tekst, kojim redosledom elementi treba da budu raspoređeni, koji elementi treba da budu prikazani podvučeni itd. I zavisno od toga na koji element pretraživač naiđe, u skladu sa pravilima postavljenim u samom pretraživaču , ovaj element će izgledati tako prikazan. Međutim, ova pravila se tada mogu mijenjati, ali ću o tome govoriti u svojim sljedećim lekcijama, koje će biti posvećene CSS-u.

Predlažem da počnemo sa primjerom najjednostavnije web stranice koja može biti. Sada ne biste trebali fokusirati svoju pažnju na to šta znače ove ili one oznake. Za sve postoji vrijeme, za početak, samo obratite pažnju gdje se sve nalazi u kodu i kako se sve to odnosi na ono što se prikazuje u pretraživaču. Razmotrite primjer HTML dokumenta:

Naslov stranice Jedan dan u mom životu Priprema za koncert

Danas sam se rano probudio jer me čekao težak dan. Uostalom, danas moram da nastupim na koncertu pred stotinu gledalaca. A da bih bio siguran da sve prođe kako treba, moram da ponovim program probe

Proba

Sve je prošlo bez problema. Niko iz našeg tima nije izgubio ritam, a kako se pokazalo, svi su se uzalud brinuli.

Koncert

Svi su dobro nastupili, mada mislim da je bio trenutak kada je naš bubnjar izgubio tempo. Ali pametno smo se izvukli iz situacije.

Prvo, moraćete da otkucate ovaj tekst u nekom tekstualnom uređivaču (mislim da je najpogodniji Notepad ++) i sačuvate fajl pod imenom index .html negde na vašem disku. At dvaput kliknite Na sačuvanoj datoteci vidjet ćete stranicu koja izgleda otprilike ovako.

Imajte na umu da se same oznake ne prikazuju, ali se prikazuje sam sadržaj koji se nalazi između njih. I odavde možete zaključiti da tagovi djeluju kao element dizajna u HTML-u.

Pogledaj izvorni kod. Kao što ste možda već primijetili, ispred riječi „Jedan“ nalazi se mala uvlaka. Međutim, pretraživač to nije uzeo u obzir, jednostavno ga je tiho progutao, kao da nikada nije postojao. Štaviše, ako pokušate da stavite mnogo razmaka između reči, pretraživač će ih sve percipirati kao jedan razmak - HTML ima ovu funkciju.

I evo još jednog savjeta: kada pišete HTML kod, vježbajte se da uvlačite one oznake koje su ugniježđene unutar drugih. Na primjer, oznake naslova i tijela su ugniježđene unutar html oznake. To znači da kada pišete ove oznake, ne zaboravite da ih uvučete u skladu s tim. Obično se rade pomoću dva razmaka ili tabulatora - ovo je stvar ukusa. Zašto je to potrebno? E sad, u tom malom dijelu dokumenta koji sam gore naveo kao primjer, nema puno informacija, tako da je prilično problematično doći do zabune. Međutim, ako na stranici ima mnogo ugniježđenih elemenata, onda ništa neće biti lakše nego izgubiti se u ovom ogromnom kodu i imati poteškoća da shvatite u kojem se dijelu dokumenta trenutno nalazite. Zato je bolje da se odmah naviknete na dobar stil, onda ćete ga sami razumjeti i dobro će vam služiti u budućnosti.

Također je vrijedno naznačiti minimalni broj oznaka koje bi trebale biti u HTML dokumentu. Govorim o ovom dijelu:

Ali čak i ako ovaj dio nedostaje, većina pretraživača će zažmiriti na sve ovo i i dalje će prikazati vašu stranicu. Međutim, takav neozbiljan stil pisanja koda u kojem osoba nedostaje veliki broj tagovi su loše pisanje, pa je preporučljivo da sve ove elemente u svakom slučaju imate na svojoj stranici. U suprotnom, ovo može predstavljati problem kompatibilnosti s drugim pretraživačima, što bi u konačnici moglo utjecati na izgled vaše stranice, a kao rezultat i promet.

Osim toga, možete pisati komentare u HTML dokumentu - ovo je čisto servisna informacija koja je namijenjena isključivo vama. Obično su to neke važne napomene koje vam služe kao podsjetnik ili samo nešto na što vrijedi obratiti pažnju. Komentare ne obrađuje pretraživač, što znači da ih korisnik neće vidjeti. Obično se pišu ovako:

Pokušajmo sada sami shvatiti koji je tag u našem primjeru iznad za šta odgovoran.

html oznaka znači da počinje izlaz html koda.

glava – odjeljak sa servisnim informacijama. Između ostalog, tu je i title, koji je odgovoran za tekst u naslovu prozora pretraživača. Ovaj odeljak se takođe može tretirati kao informacija koju želimo da obavestimo pretraživač o ovoj stranici.

tijelo – počinje glavni dio dokumenta.

h 1 – naslov.

h 2 – titl.

p – stav.

To je vjerovatno sve! Ako je ovo bio vaš prvi HTML dokument, čestitamo! Da, ne izgleda tako sjajno koliko bismo željeli. Ali ipak, imamo materijal na kojem već možemo raditi. A u narednim lekcijama sve će biti još zanimljivije, a mi ćemo se polako doticati rada sa kaskadnim stilovima (CSS).

• < Назад

Da biste komentarisali, potrebno je da se registrujete.