za izgled dokumenta.
Da bi preglednici ispravno prikazali web stranicu, morate koristiti elementu prvom redu koda.
U sljedećem poglavlju ćemo se upoznati sa CSS sintaksom i povezivanjem tablica u HTML te napisati prvi stil.
Pozdrav dragi webmasteri početnici. Počnimo učiti programske jezike.
A mi ćemo ih početi proučavati s html-om.
Odmah ću reći da ćete na kraju tečaja moći sami napisati web stranicu u čistom html-u i postaviti je na Internet. Ali ipak preporučam da odvojite vrijeme i nakon html-a, upoznate se sa css-om.
Tada ćete stranicu učiniti hladnijom, a moći ćete korigirati izgled stranice napravljene na već gotovom CMS-u (sustav za upravljanje sadržajem).
Učenje programskog jezika i učenje stranog jezika nije isto, a mnogo je lakše. Štoviše, nije zastrašujuće, već vrlo uzbudljivo.
Samo te neshvatljivo uvijek plaši, ali obećavam ti da će nakon prvih lekcija svi strahovi proći.
Učit ćemo pomoću editora kojeg trebate instalirati na svoje računalo.
U ovom uređivaču datoteka možete napisati kod i odmah vidjeti kako ga preglednik prikazuje. Vrlo udobno.
Hajde, prvo ću vam reći nešto o tome što je HTML, i ovo će biti dosadni dio našeg tečaja, a onda ćemo ući u najzanimljiviju praksu. Tamo sigurno neće biti dosadno.
HTML (HyperText Markup Language) doslovno znači jezik za označavanje hiperteksta. Koristi se za izradu web stranica.
A ako je, po našem razumijevanju, zbirka jednostavnih stranica objedinjenih jednom temom knjiga, ili čak, bolje rečeno, debeli časopis, onda je zbirka web stranica objedinjenih jednim imenom domene web stranica.
Svaka web stranica ima svoj jedinstveni tekst, koji ste napisali vi i ograđen u html kodu.
Kod je uputa pregledniku kako prikazati određeni element. Recimo da ste napisali riječ, ali u kojem će se obliku pojaviti na ekranu ovisi o tome u koji je kod ugradite.
Html kod se sastoji od sljedećih elemenata:
2. Atributi oznake.
3. Vrijednosti atributa.
Pogledajmo ih redom.
HTML oznaka je glavni element koda. Napisano je ovako:
Kao što vidite, sastoji se od dva dijela. Prve uglaste zagrade su početni dio, a druge, s kosom crtom, završni su dio.
Između ova dva dijela ispisan je ostatak koda stranice koji će biti prikazan na ekranu.
Označiti govori pregledniku da je ovo HTML dokument i glavna je (roditeljska) oznaka za sve ostale elemente.
U preostalim tagovima, elementima koda, u uglastim zagradama ispisuje se slovo ili riječ koja će biti naziv oznake i odrediti koji će element biti prikazan na ekranu uz ovu oznaku.
Na primjer, ako slovo h1 stavite u uglaste zagrade, tekst će se prikazati na ekranu kao naslov.
zdravo
To jest, font riječi "Zdravo" bit će veći i podebljeniji od ostatka teksta.
Ako slovo p stavite u uglaste zagrade, tada će se tekst u oznaci prikazati kao odlomak.
zdravo
Odnosno, font će biti normalan, ali sve što je napisano nakon ove oznake počet će u novom retku.
Postoji nekoliko desetaka takvih slova, pa čak i riječi koje određuju vrstu naredbe, u html-u, iako se često ne koristi više od 10-15 oznaka.
Usput ćemo detaljnije pogledati svaku od njih.
Sljedeći su atributi oznaka. Često korišten, također ne više od desetak. A nedavno još manje, jer su sve funkcije atributa prebačene u css.
Ali više o tome kasnije, ali za sada ćemo još saznati što je atribut, jer neki od njih nisu izgubili svoju važnost i nikada neće izgubiti.
Atribut je dodatna naredba. Napisano je u početnom dijelu oznake. Na primjer, ako želite da naslov bude u boji, tada morate umetnuti atribut boje u početni dio h1 oznake
I idemo odmah na vrijednosti atributa. Poanta je da atribut mora imati vrijednost. Odnosno, ako ste dali naredbu da se naslov oboji, tada morate naznačiti koja će boja biti.
Ova indikacija će biti vrijednost atributa. Ovako izgleda:
Ovo je crveno.
Na isti način, ali koristeći druge atribute, možete postaviti veličinu teksta, uvlake, poravnanja i još mnogo toga.
Iako se dizajn sve više seli na CSS, a atributi dizajna postupno postaju zastarjeli i izvan prakse.
A sada iz svega navedenog izvlačimo zaključak:
HTML je jezik koji preglednici razumiju. Potreban nam je kako bismo komunicirali s preglednikom, ili, reklo bi se, kontrolirali ga, odnosno davali mu naredbe kako da percipira i prikazuje na ekranu ono što pišemo.
Želio bih dodati da se oznake, atributi i njihova značenja lako pamte tijekom praktičnih vježbi, što će u biti biti i svi sljedeći članci.
Tu odmah vidite tag, saznate njegovo značenje, u kojem padežu i na kojem mjestu se koristi, koji su znakovi popraćeni i kako se piše, tako da vam sada neću pokazati sve oznake i atribute, sve ćemo vidjeti u praksi.
Ako nekoga zanima, uvijek možete pogledati cijeli popis html oznaka i atributa. .
Iako, ako se nećete profesionalno baviti programiranjem, bit će dovoljno znati nekoliko (oko desetak) osnovnih oznaka i nekoliko atributa.
Pa, to je sve, pretpostavljam. Nekoliko? I za sada nema potrebe za više. Ostalo ćemo naučiti tijekom procesa učenja na konkretnim primjerima.
Mislim da će se bolje razumjeti uz primjere. Naš cilj je napraviti web stranicu i razumjeti kako sve to funkcionira, stoga samo naprijed i vježbajte.
Skretanje
Čim sjedneš učiti probudit će te neki gad!!!
U školi učitelj kaže učenicima:
Za pojavu HTML-a, moderni svijet ima jednog znanstvenika iz Europskog vijeća za nuklearna istraživanja (Conseil Européen pour la Recherche Nucléaire, CERN) za zahvalu. Ime ovog znanstvenika je Timothy John Berners-Lee. Prva verzija HTML-a nastala je za potrebe oblikovanja znanstvenih dokumenata. To je strukturno oblikovanje bez elemenata opisa shema boja, parametara fonta itd. Stoga je HTML izvorno omogućio isticanje naslova, odlomaka, popisa i sličnih strukturnih elemenata u tekstu. Rezultat obrade ili “igranja” HTML-a ne bi trebao ovisiti o tehničkim značajkama hardvera za njegovu vizualizaciju, budući da on nije sadržavao parametre ove vizualizacije. S vremenom je ova značajka jezika za označavanje hiperteksta djelomično izgubljena.
Dakle, pojava prvih verzija HTML-a datira iz 1986. godine, a 1991. godine HTML je značajno unaprijeđen i počeo se koristiti upravo za prijenos hiperteksta širom World Wide Weba. Kažu da se svjetski poznata kratica HTML, što znači Hyper Text Markup Language, pojavila upravo u ranim 90-im godinama prošlog stoljeća. A sada kratki izlet u pedigre označnih jezika. Prva verzija HTML jezika za označavanje hiperteksta stvorena je na temelju Standard Generalized Markup Language (SGML), koji se na neki način može smatrati prototipom eXtensible Markup Language. XML standard stekao je ogromnu popularnost u naše vrijeme zbog velikog broja njegovih proširenja koja se koriste u računalnoj tehnologiji. Da potpuno zbunim čitatelja, odmah ću dodati da je naknadno, na temelju XML-a, razvijen hipertekstualni označni jezik XHTML (Extensible Hypertext Markup Language), koji u biti replicira HTML. Kao rezultat toga, imamo akronime SGML, HTML, XML i XHTML, i moramo razumjeti što je što. Zapravo, sve je jednostavno: SGML nije ništa više od skupa pravila na temelju kojih se može izgraditi bilo koji označni jezik. HTML je jedan od tih jezika - SGML aplikacija. Drugim riječima, SGML definira kako elementi označavanja trebaju izgledati, a HTML definira što točno elementi trebaju biti i kako ih preglednici trebaju interpretirati. XHTML je pak primjena XML-a, a sam XML nije ništa više od pojednostavljene verzije SGML-a. , unatoč činjenici da su vrlo slični po izgledu, oni imaju značajne skrivene razlike, koje, uglavnom, leže u principu njihove obrade.
Sada se vratimo na povijest razvoja HTML-a. Dakle, do 1994. HTML se još uvijek koristio samo za strukturno označavanje podataka, iako je već uključivao oznake za označavanje teksta podebljanim ili kurzivom. Iste 1994. godine stvorena je organizacija W3C (World Wide Web Consortium) - World Wide Web Consortium, na čijem je čelu, sasvim logično, isti Tim Berners-Lee, a 1995. godine objavljena je preporuka HTML 2.0. Tvorci HTML-a već su shvatili da će se njihova zamisao s vremenom razviti iz jezika statičnog označavanja teksta u glavni alat za stvaranje dinamičkih internetskih izvora. Glavni dodatak HTML 2.0 bilo je pojavljivanje obrazaca kao dijela jezika sa skupovima korisničkih kontrola koje su se trebale koristiti za unos parametara za HTTP zahtjeve.
Nakon izdavanja druge verzije, odmah je počeo rad na sljedećoj generaciji HTML-a. Godine 1997. objavljena je preporuka HTML 3.2 koja je nadopunila označni jezik tablicama, okvirima, slikama i nekim drugim važnim oznakama. Ali najvažnije postignuće treće verzije je to što su se njeni autori ponovno vratili problemu vizualizacije označavanja u pregledniku, prisjećajući se da HTML treba samo označavati strukturu dokumenta i ne smije izravno sadržavati parametre za grafičke stilove za prikaz elemenata u preglednik. Rezultat njihova rada na HTML 3.2 bila je pojava neovisnog CSS jezika (Cascading Style Sheets) - kaskadnih stilskih listova, čiji se kod sada može povezati s HTML kodom za označavanje i na taj način prilagoditi izgled stranice.
Izdavanjem verzije 4 HTML-a 1997. godine, osoblje W3C-a oslobodilo je svoju zamisao onih nepotrebnih elemenata koji su, s pojavom CSS-a, postali zastarjeli i kompromitirali ideju o odvajanju označavanja strukture od parametrizacije prezentacije. Ali nitko ne bi blokirao novu verziju zbog takvih sitnica. Glavno postignuće preporuka HTML 4.0 bila je pojava objektnog modela stranice (Document Object Model, DOM), čijim se elementima sada može manipulirati putem skriptnih programskih jezika koje izvode preglednici. Najpopularniji takav programski jezik je JavaScript. HTML plus DOM plus JavaScript jednako je Dynamic HTML ili jednostavno DHTML, koji je označio proboj u web dizajnu. Sada elementi učitane internetske stranice mogu mijenjati svoj izgled kao odgovor na radnje korisnika, kao i dodavati nove i brisati postojeće elemente. Dana 24. prosinca 1999. objavljeno je posljednje izdanje 4. verzije jezika za označavanje hiperteksta, HTML 4.01.
HTML5 još nije dobio status službene W3C preporuke, ali već je jasno da autori HTML-a nastavljaju raditi na razvoju zahtjeva za podršku objektnog modela dokumenta i interpretaciju JavaScripta. Iako će HTML5 dobiti brojne nove oznake, većina preporuka i dalje se odnosi na ponašanje preglednika u kontekstu DHTML-a: postojat će ugrađena podrška za funkcije povuci i ispusti, mogućnost crtanja na virtualnom platnu , kontrolirati povijest pregledavanja i dijeliti poruke između stranica, spremati kontekst izvršenja i još mnogo toga. Nadamo se da će s objavljivanjem novih HTML preporuka postupno nestati problemi nedostatka kompatibilnosti s više preglednika, kada se isti JavaScript kod različito izvršava pod različitim preglednicima. Uostalom, nastavit će se tendencija definiranja zahtjeva za rad s objektnim modelom i JavaScriptom, a programeri preglednika će (ako žele da se koriste njihovi softverski proizvodi) morati slijediti te zahtjeve.
Izdavanje HTML5 planirano je za 2014. Možda će do tog vremena W3C razviti zasebne preporuke koje se odnose samo na JavaScript programiranje, a HTML će konačno ponovno postati isključivo označni jezik za strukturu dokumenta. Unatoč činjenici da je danas tek 2012., mnoge već podržavaju najpopularniji preglednici. Mnogo toga što su web dizajneri ranije morali sami raditi (isti drag-and-drop), s izdavanjem HTML5 bit će podržano na razini preglednika, a ovaj razvoj događaja ne može ne veseliti. Možemo se samo nadati da će se trend nastaviti.
Nećemo ulaziti u detalje i povijest onoga što je HTML, već ćemo odmah prijeći na glavne točke. HTML je osnova za izradu svake web stranice! Kada proučavate temu izrade web stranice, morate početi s njom. Ovdje nema ništa teško. APSOLUTNO SVATKO može savladati ovu tehnologiju!
Želio bih odmah napomenuti da ovo NIJE programski jezik, već označni jezik.
Zašto je lako naučiti HTML?
Da biste tečno govorili engleski, ne morate znati sve riječi na engleskom jeziku. Dakle, ovdje samo trebate naučiti neke od osnovnih oznaka i naučiti kako raditi s njima. A onda sve što trebate učiniti je vježbati i razvijati vještinu.
Počnimo proučavati ovu fascinantnu, au isto vrijeme jednostavnu tehnologiju.
Malo teorije...
Svaka stranica sastoji se od oznaka. Odnosno, stranica zapravo ne izgleda onako kako smo navikli vidjeti, već se sastoji od mnogo oznaka od kojih svaka ima određenu ulogu.
To je poput velikog zida od cigli. Ako su sve cigle na njemu uredno poslagane, onda cijeli zid izgleda lijepo. Stoga je prilikom pisanja strukture stranice potrebno obratiti pozornost na svaki tag jer je on “građevni blok” naše buduće stranice.
Ali što je oznaka u HMTL-u?
Ovo je element HTML stranice koji na neki način utječe na prikaz i izgled stranice. Prilično je teško to razumjeti riječima, pa morate odmah sve pogledati u praksi i naviknuti se na kod. Pogledajte sliku ispod:
Ovo je struktura najjednostavnije stranice. Ali ove ponovljene riječi u trokutastim zagradama su oznake. Ako otvorite uređivač teksta i napišete ovaj kod, a zatim ga spremite u HTML formatu, dobit ćete HTML stranicu. Još nije jasno što je HTML? 🙂
Iz ove strukture možete vidjeti one oznake koje moraju biti prisutne. Ovo su oznake:
i zatvaranje
i zatvaranje
i zatvaranje
Kako bi bilo jasnije, označio sam ih narančastom bojom na slici ispod:
Sve što ćemo napisati između oznaka
I nećemo vidjeti na našoj stranici. Ove oznake mogu reći pregledniku o kodiranju, o naslovu naše stranice, ovdje se mogu povezati razni stilovi, skripte i tako dalje. Sve ćete to vidjeti u narednim lekcijama.
I ovdje su sve oznake koje ćemo napisati između oznaka
I, ovisno o svojoj namjeni, utjecat će na strukturu naše HTML stranice.
Pa, je li postalo jasnije što je HTML? 😉 Ali mi ne stajemo i idemo dalje...
Neke oznake mogu imati završnu oznaku, a neke ne. Na primjer oznaka
postoji oznaka za zatvaranje. Kao što ste već mogli pogoditi, oznake se zatvaraju kosom crtom.
Vrlo je važno poštovati otvarajuće i zatvarajuće oznake. Da ne bude greške. Preglednik možda neće prikazati grešku, ali će struktura vaših stranica biti netočna i bit će velikih problema pri daljnjem radu sa stilovima (gdje ćemo se baviti izgledom). Stoga, ako oznaka ima završnu oznaku, ona mora biti prisutna na ispravnom mjestu.
Pogledajmo primjer kako NE zatvoriti oznake i kojim redoslijedom to treba učiniti. Primjer dvije oznake:
Ispravan HTML KOD
Ono što vidite gore je ovo je ispravan redoslijed pisanja završnih oznaka . Ali može postojati takva situacija
POGREŠKA U HTML KODU
Zato zatvori oznake je strogo zabranjeno !
Vježbajte kako biste razumjeli što je HTML...
Samo kroz praksu možete naučiti više o tome što je HTML. Za to možete koristiti bilo koji uređivač teksta. Čak i blok za pisanje. Ali preporučujem korištenje Notepada++ jer ima mnogo više funkcija za rad s HTML-om. Možete ga preuzeti na linku Download Notepad++. Ovaj uređivač ima sve mogućnosti za izradu i uređivanje HTML stranica.
Započnimo. Nakon otvaranja programa vidjet ćete sljedeći prozor:
Da biste stvorili HTML stranicu, trebate unijeti "tijelo" stranice u ovaj okvir. Možete kopirati donji tekst i jednostavno ga zalijepiti. Ali bolje je unijeti sve ručno. Na taj način možete brzo zapamtiti i naviknuti se na oznake.
Dakle, trebali biste dobiti sljedeće:
Zatim morate spremiti ovu stranicu u HTML formatu. Da biste to učinili, kliknite na izbornik "Datoteka", zatim kliknite na "Spremi kao...". Unesite naziv HTML stranice. Nazvao sam ga index.html. Zatim ga jednostavno spremimo na prikladno mjesto na našem računalu. Nakon toga će HTML oznake biti istaknute jer će uređivač Notepad++ shvatiti da se radi o HTML dokumentu. I puno je ugodnije raditi s pozadinskim osvjetljenjem.
Da bismo razumjeli što je HTML i zašto je potreban, otvorimo bilo koju stranicu u pregledniku i pogledajmo njen izvorni kod.
Na primjer, otvorit ću stranicu tražilice Yandex.
Sva grafika i tekst koji vidite na stranici generirani su pomoću HTML koda.
HTML – ovo je poveznica između web stranice i dodatnih tehnologija koje će se na njoj koristiti.
U biti, sve HTML naredbe koje vidite na gornjoj slici običan su tekst koji se može napisati u bilo kojem uređivaču teksta. Promjenom ekstenzije tekstualne datoteke u *.html (kasnije ćemo govoriti o tome kako to učiniti), dobivamo potpunu web stranicu koju preglednik može obraditi.
Sada pogledajmo samu definiciju i razmotrimo što ona znači.
HTML je skraćenica za HyperText Markup Language ili prevedena na ruski kao "HyperText Markup Language".
Da bismo razumjeli što sve ovo znači, pogledajmo svaku riječ u ovoj kratici zasebno.
Jezik.
HTML je, prije svega, Jezik pomoću kojih pregledniku možete dati informacije o tome koji se elementi nalaze na web stranici i kakvo značenje nose.
Kao i svaki drugi jezik, HTML ima riječi (naredbe) i pravila za pisanje tih riječi (sintaksa jezika).
Obilježava.
Imajte na umu da je glavni zadatak HTML-a informirati preglednik o značenju koje elementi na web stranici nose.
HTML kod vam omogućuje da "razbijete" web stranicu na pojedinačne elemente i kažete pregledniku koji je element što.
Na primjer, ovaj obrazac za snimanje:
Kaže pregledniku da se bavi odlomkom.
A ovo je obrazac za snimanje:
Naslov
Označava da je element naslov.
Iz toga slijedi da HTML nije odgovoran za izgled i dizajn dokumenta.
Da bismo to vidjeli, uzmimo jednu web stranicu kao primjer i na njoj onemogućimo stilove koji su odgovorni za dizajn i vidimo kako se mijenja.
Stranica sa stilovima dizajna:
Ista stranica, ali s onemogućenim stilovima (koristi se samo jedan HTML kôd):
Također, HTML nije programski jezik i nije odgovoran za izvođenje logičkih i programskih operacija na stranici i obradu podataka. To možete jednostavno provjeriti ako u svom pregledniku onemogućite podršku za programski jezik klijenta.
Često početnici zaborave ovo pravilo i pokušavaju koristiti HTML kako bi prisilili element da se prikaže na ovaj ili onaj način ili ga prisilili da izvrši neke radnje na stranici pomoću HTML-a, ali to nije točno. Svaka radnja na elementu ima svoje tehnologije.
Hipertekst.
I na kraju, zadnja riječ u definiciji HTML jezika je hiperveza. Postoji element na web stranicama koji te stranice čini posebnima i razlikuje ih od običnog teksta sa slikama. Ovaj element su veze.
Prefiks "hiper" znači da kada kliknete na poveznicu, može se otvoriti drugi resurs (stranica) na Internetu, koji se može nalaziti na drugom poslužitelju.
HTML je jezik koji je razvijen posebno za stvaranje stranica koje sadrže hiperveze.
Ukratko, možemo reći da je HTML jezik koji je stvoren kako bi pregledniku pomogao razumjeti od kojih se dijelova sastoji web stranica i kakvo značenje ti elementi nose.
To je za sada sve s teorijom. Prijeđimo na sljedeći praktični korak. Sada je naš zadatak pripremiti programe koje ćemo koristiti za rad s HTML-om.
