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, respektivno; ako postoje novije verzije ovih jezika, one će se također odraziti na nove lekcije u ovom odjeljku, a sigurno ćete 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 dve stvari.

Nakon što ste primili opšti koncepti Jasno je da je u vašoj glavi nejasna slika 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 jezik, o njegovoj strukturi, uređaju, a prvi ćemo uraditi sa vama 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 s 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 sa proučavanjem CSS rad sa tekstom iu ovoj lekciji ćemo se pozabaviti temom rada sa tekstom i pogledati nova svojstva teksta.

Rad sa slikama prilikom kreiranja sa web stranice, jedan od ključne točke, kako prilikom kreiranja dizajna, tako i prilikom jednostavnog postavljanja ili pisanja bilo kojeg materijala za svoju 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.

Sada je teško zamisliti osobu koja radi sa internetom i ne zna šta je html. Mnogi ljudi žele da nauče ovaj jezik. Čini se da ništa ne može biti jednostavnije - postoji zastrašujuće ogroman broj knjiga posvećenih ovoj temi. Da li je html jezik zaista toliko složen da su mu posvećene ogromne količine?

U ovom članku želim pokušati dati osnovna znanja o ovoj temi onim ljudima koji žele naučiti layout, da ih usmjerim u pravom smjeru. To ne znači da je ono što sam napisao nepromenljiva istina. Samo želim da novajlije imaju malo uvida u opšta pitanja.

Za početak, htio bih donijeti grubi plan Ovaj članak. Ako nekoga nešto ne zanima, može to bezbedno da preskoči.

• Koje oznake trebate znati?
• Kako to učiniti lijepim?

Šta je html i zašto je potreban?

html nije programski jezik, kako mnogi misle. To je samo jezik za označavanje. Njegova svrha je da odredi strukturu dokumenta. Ako vam neko kaže da je html potreban za određivanje izgleda stranice, nemojte mu vjerovati! Ova osoba je ili iz prošlosti ili ne razumije u potpunosti temu.

html definira semantički (smisleni) raspored elemenata. Koji pasus koji slijedi, koji sadržaj je logički povezan i koji predstavlja potpuno različite skupove podataka, gdje ubaciti sliku i kuda ići klikom na ovaj link. U principu, kada bi se sada koristio samo html za izgled stranice, teško da bi sve stranice izgledale mnogo drugačije. Ako neko kaže da je instalacija pozadinska slika- html zadatak - pljune mu u lice ne vjeruj mu.

HTML, kao i mnoge druge tehnologije vezane za web, podržava W3C konzorcij. Ako želite sve znati iz prve ruke, posjetite njihovu web stranicu. Ali moram vas upozoriti: specifikacije koje je izdao W3C su savjetodavne prirode, tako da pretraživači uvijek različito tumače istu stvar html kod. Ovo čini da izgled izgleda mnogo komplikovanije nego što zapravo jeste.

Trenutno je najnovija html specifikacija 4.0. tu su i, xhtml jezik, koji je mnogo zahtjevniji za programera jer sadrži strože standarde. Dakle, oznake u html-u mogu se pisati u svakom slučaju, ali u xhtml - samo malim slovima. I tako dalje. Držim se xhtml specifikacije i opisat ću je u nastavku.

HTML jezik se sastoji od skupa oznaka. Ovo su direktive pretraživaču koje mu govore o strukturi vašeg dokumenta. Napomena: struktura. Danas je druga tehnologija zaslužna za izgled - CSS, o čemu će biti riječi u nastavku. Da biste naučili html, zapravo, morate naučiti skup tagova i njihovih atributa i to je to! Možete početi kreirati test stranice.

Koje oznake trebate znati?

Da biste započeli, morate naučiti mali skup oznaka. Sada ću ih navesti, grupisajući ih prema određenim kriterijumima. (Grupiranje je moja subjektivna vizija subjekta i ne tvrdi da je apsolutno istinito)

• Osnovno: html, glava, naslov, tijelo;
• Strukturno: div, span;
• Tekst: p, ul, ol, li, h1-h6, br, pre;
• Tablice: stol, tr, td;
• Linkovi: a;
• Multimedija: img, objekt;
• Okviri: frameset, frame, iframe;
• Obrasci: obrazac, unos, tekstualno područje, oznaka, odabir, opcija;
• Opciono: hr;
• Posebno: skripta, link, meta;

Kao što vidite, nema toliko oznaka. Međutim, njihovo učenje može potrajati značajno vrijeme jer mnoge od ovih oznaka mogu imati atribute koji uzrokuju da se elementi ponašaju drugačije.

Neko će možda biti ogorčen i reći da zna druge oznake koje rade. Da, zaista, nisam naveo sve oznake koje podržavaju pretraživači. Međutim, ovi tagovi su osnovni, a osoba koja ih poznaje može reći da zna html. Namjerno nisam uključio oznake poput fontova u svoju listu, koje su zastarjele. Ove oznake su toliko loše da o njima nema smisla ni govoriti, jer sada postoje mnogo moćniji alati koji vam omogućavaju da kontrolišete izgled stranica i njihovih delova. Lično smatram da je poznavanje gore navedenih tagova neophodno i dovoljno. Jer ostali su ili potrebni vrlo rijetko ili uopće nisu potrebni. Stoga predlažem da počnete proučavati html proučavajući ove oznake.

Kako to učiniti lijepim?

Svako ko pokuša da dizajnira stranicu koristeći gore navedene tagove na kraju će dobiti prilično skromno dizajniranu stranicu, koja će biti bijela sa crnim tekstom i plavim linkovima. Neki ljudi mogu biti u mogućnosti da diverzifikuju pozicioniranje blokova informacija pomoću tabela i poravnanja atributa. Neko će pokušati da oživi stranicu umetanjem slika. Međutim, postoji poseban lijek da prilagodite izgled stranica. Ovo je CSS.

Danas gotovo nijedna web stranica ne može bez korištenja CSS tehnologije. Upravo je CSS-u povjerena misija da odredi dizajn dokumenta. Pozadina stranice, padding, poravnanje, fontovi, boje i još mnogo toga su odgovornost CSS-a. Stoga se sada preporučuje da se ne koriste oznake i atributi koji određuju dizajn stranica i elemenata, već da se umjesto toga koriste CSS pravila. O tome kako koristiti CSS je boljičitati u knjigama. Ali želim reći da ako naiđete na oznaku ili atribut koji određuje izgled elementa, razmislite 10 puta prije nego što ga koristite! Bolje je saznati koje je CSS pravilo odgovorno za prikaz elementa na način na koji želite da se vidi. Uz vrlo rijetke izuzetke, takvo pravilo se uvijek nađe.

Gdje je najbolje započeti učenje rasporeda?

Najbolje je započeti kreiranje izgleda nakon što shvatite principe kako web funkcionira. Lično bih napravio ovakav plan treninga:

1. Učenje principa web rad i klijent-server strukture
2. Proučavanje oznaka i njihovih atributa, sa praktične vježbe na njihovu prijavu
3. Naučite CSS pravila uz praktične vježbe o tome kako ih primijeniti
4. Proučavanje rasporeda stola
5. Izgled jednostavnog izgleda sa tabelama
6. Izgled složenog izgleda sa tabelama
7. Istraživanje DOCTYPE direktiva
8. Studiranje blok raspored(div oznaka)
9. Izgled jednostavnog izgleda pomoću diva
10. Izgled složenog izgleda pomoću divova
11. Trikovi, trikovi, hakovi i druge mudrosti od gurua

U principu, za početni nivo obuke i poznavanje osnova HTML-a dovoljno je proći samo prvih 5 tačaka. (ova opcija će biti idealna za web programere koji neće dizajnirati web stranice. Poznavanje html-a trebaju samo da iznesu podatke dobijene kao rezultat izvršavanja skripte.)

Jednom davno sam želio da napravim svoju prvu web stranicu sa IT temom. Iz ove oblasti sam znao samo vrlo jednostavne osnove HTML-a i možda je to sve. Ali imao sam više nego dovoljno želje i hrabrosti, pa sam bez mnogo straha registrovao svoj prvi naziv domene.

Moj put u savladavanju CSS-a i HTML-a bio je dug, oko 2,5 godine, i mislim da se proces samoučenja nikada neće završiti. Ali sada se sećam da sam zaista želeo da pronađem uporište odakle bih mogao da počnem da savladavam ovo novo za mene područje, jer je mnogo informacija stiglo odjednom i nije ih bilo lako probaviti.

Pun odlučnosti, registrovao sam svoju prvu domenu i počeo da ostvarujem svoje ciljeve. Tada sam znao da većina sajtova koji se nalaze na internetu radi na raznim gotovim sistemima za upravljanje materijalima, odnosno CMS. I moj prvi zadatak je bio pronaći CMS.

Prilikom odabira CMS-a obratio sam pažnju samo na jedno - CMS ne bi trebao biti zahtjevan za resurse servera, jer je želja vjerovatno svakog početnika u ovoj oblasti da sve troškove minimizira. Pa, jasno je da bi CMS trebao biti baziran na blogu.

Nakon dugog lutanja po webu, naišao sam na CMS Textpattern. Nakon 2,5 godine, sa sigurnošću mogu reći da sam donio pravu odluku kada sam izabrao Textpattern. Ovo je najviše najbolji CMS za blog koji je u javnosti.

Uz izvanredne performanse, ovaj CMS se može hostirati na gotovo svakom hostingu koji ima podršku za MySQL i PHP. Trenutno koristim jeftin hosting, a ne VPS, i hostujem 16 stranica na njemu. Dnevna posjeta svim stranicama je otprilike 5.000 jedinstvenih posjetitelja dnevno. Mislim da je ovo dobar pokazatelj performansi Textpatterna.

Glavni problem na koji sam naišao nakon instaliranja ovog CMS-a je moje apsolutno nepoznavanje osnova CSS-a. Izvlačio sam informacije malo po malo iz zajednice ruskog govornog područja dok na kraju nisam naišao na stranicu http://htmlbook.ru. Prije ovog otkrića razmišljao sam o kupovini knjige na CSS-u, ali sada mi je čak drago što nisam imao vremena za ovo, jer bi to bila još jedna kupovina novog sakupljača prašine.

Na sajtu HTMLbook Našao sam mnogo dobro strukturiranih informacija. Za početnika, ovo je samo blago. I sada se često obraćam ovom resursu, jer je nemoguće zapamtiti sve, a nema potrebe za tim. Glavno znanje osobe je znati gdje nabaviti ono što vam treba!

Ako ste tek na samom početku svog profesionalnog životnog puta i planirate da savladate CSS i HTML, onda vam moj savjet: ne kupujte papirnate knjige koje zastare prije nego što budu objavljene, već koristite WEB servise koji neće samo uštedjeti novac, ali će vam biti odlična pomoć uvijek pri ruci.

P.S. Uvijek se začudim kada naletim na neki “bezgrešni blog” ili, kako je to sada moderno, na “beskućnika” koji pokušava zaraditi puno novca, ali nema pojma kako da to uradi sam jedinstven dizajn za vašu stranicu i ispostavilo se da postoji gomila beskućnika sličnih jedni drugima. Naravno, možete platiti dizajn, ali jedan peni štedi rublju, a niko to ne može učiniti bolje od vas samih.

Odlučio sam da posvetim više pažnje početnicima koji žele steći znanja iz oblasti izrade web stranica. Moja učiteljica me je natjerala da to uradim, jer je napravila mnogo grešaka u priručnicima za obuku. laboratorijski rad. Rado bih pogledao izvor sa kojeg su obrazovne informacije preuzete i tu ostavio par redaka svog mišljenja. Ali to sada nije o tome. Na svom prvom predavanju govoriću o

Koja je struktura HTML dokumenta?

Tag obavještava da počinje struktura html dokumenta, - koji se završava. Između oznaka Većina informacija se pohranjuje za pretraživač i pretraživače. U oznakama sadrži naslov naše stranice. Tag označava da su ono što slijedi informacije namijenjene korisniku, To naravno znači da informacije za korisnika ponestaju.

Sada da malo objasnim. Sve oznake ( tag - element jezika za označavanje hiperteksta) dijele se na dva tipa: „jednostruki“ i „zatvarajući“. Dodatno, oznake su zatvorene u sljedećim znakovima < I > , oni su ti koji razlikuju oznaku iz običnog teksta html. Pogledajmo nekoliko najjednostavnijih "single" oznaka:

— oznaka koja je odgovorna za prelazak na novi red na mjestu gdje je ova oznaka instalirana. Pogledajmo kod koristeći ovu oznaku.

Zdravo svima!
I ovo je moja prva stranica.

Rezultat se može pogledati.

• align — Određuje poravnanje linije. Može uzeti vrijednost lijevo, centar, desno.
• boja — Postavlja boju linije.
• noshade - Crta liniju bez 3D efekata.
• size — Postavlja debljinu linije.
• širina — Postavlja širinu linije.

Šifrirajte koristeći oznaku

Zdravo svima!

Vizualni primjer možete pronaći ovdje.

Još jedna “single” oznaka je . Ova oznaka koriste se za pohranjivanje informacija namijenjenih pretraživačima i pretraživačima. Pretraživači traže meta tagove kako bi dobili opise stranica, ključne riječi i druge podatke. Dozvoljeno vam je da koristite neograničen broj meta tagova, svi oni moraju biti locirani između I . Parametri bilo koje meta oznake imaju oblik “ime=vrijednost”, koji se određuje ključne riječi sadržaja, ime ili http-ekviv. Jer meta tagovi su namenjeni mašinama, ne prave nikakve vizuelne promene, pa ću samo dati izvor:

Ova linija označava da kreator stranice vjeruje da stranica koristi UTF-8 kodiranje. U HTML5 je sve postalo jednostavnije; da biste specificirali kodiranje, sve što vam je potrebno je sljedeći red:

Ima i drugih pojedinačne oznake (, ,
, , , ,

Hajde sada da pričamo o "zatvarajućim" oznakama. Sam naziv "zatvarajuća oznaka" ukazuje na to da oznaka zahtijeva obavezno zatvaranje. Ovo se radi kako bi se jasno ograničio dio teksta na koji oznaka utiče.

Za jasan primjer, pogledajmo oznaku , koji se koristi za isticanje teksta, postavlja font na podebljan. Oznake I su granice koje definiraju područje odabira teksta. Evo koda gdje su zaboravili zatvoriti oznaku u posljednjem redu :

Zdravo svima! I ovo je moja prva stranica.
Zdravo svima! I ovo je moja prva stranica.

Kao što vidite, nema ništa komplikovano, sada možete kreirati nekoliko stranica povezanih jedna s drugom.

Omogućava vam da zaobiđete ovu funkciju i prikažete tekst kako to zahtijeva programer.

— definira pasus teksta.  Tag 
To je blok element, uvijek počinje u novom redu, pasusi teksta koji slijede jedan za drugim razdvojeni su paddingom.  Količina paddinga može se kontrolirati korištenjem stilova.  Ako nema završne oznake, smatra se da se kraj pasusa poklapa s početkom sljedećeg elementa bloka.
..
..

- HTML nudi šest naslova na različitim nivoima, što ukazuje na relativnu važnost sekcije nakon naslova.  Da, oznaka 
predstavlja najvažniji naslov prvog nivoa i oznaku 
služi za označavanje naslova šestog nivoa i najmanje je značajan.  Podrazumevano, naslov prvog nivoa se prikazuje najvećim podebljanim fontom, a naslovi narednih nivoa su manje veličine.  Oznake 
,…,
Pogledajte blok elemente, oni uvijek počinju u novom redu, a nakon njih se drugi elementi pojavljuju u sljedećem redu.  Dodatno, razmak se dodaje ispred i iza naslova.  Oznaka ima atribut poravnati, koji definira poravnanje naslova, može uzeti vrijednosti lijevo— poravnanje zaglavlja na lijevo, centar- centriranje, u pravu- desno poravnanje, opravdati— poravnanje po širini (istovremeno duž desne i lijeve ivice).  Ova vrijednost radi samo za zaglavlja koja su duža od jednog reda.


— je kontejner za promjenu karakteristika fonta, kao što su veličina, boja i font.  Iako ovu oznaku još uvijek podržavaju svi pretraživači, ona se smatra zastarjelom i preporučuje se napuštanje njene upotrebe u korist stilova.  Oznaka ima 3 atributa: boja— postavlja boju teksta, lice— definira font fonta, veličina— postavlja veličinu fonta u konvencionalnim jedinicama.

— označava tekst kao citat ili fusnotu uz drugi materijal.  Ovo isticanje je korisno za promjenu stila teksta putem CSS-a, a također se koristi za razdvajanje HTML koda na strukturne elemente.  Pretraživači obično postavljaju tekst unutar kontejnera kurzivom.

— označava da je niz znakova skraćenica.  Korištenje atributa naslov dato je dekodiranje kratice, što omogućava onima koji nisu upoznati s njom da shvate kraticu.  Osim toga, pretraživači indeksiraju verziju u punom tekstu kratice, koja se može koristiti za poboljšanje rangiranja dokumenta.
Podrazumevano, tekst je zatvoren u kontejner podvučeno isprekidanom linijom.
Ispod je kod u kojem sam koristio sve ove oznake:

 




HTML i CSS su dvije osnovne tehnologije za pravljenje web stranica.  HTML obezbeđuje strukturu stranice, CSS(vizuelni i zvučni) izgled za razne uređaje.  Uz grafiku i skriptiranje, HTML i CSS su osnova za izradu web stranica i web aplikacija.  U nastavku saznajte više o:
Šta je HTML?
 HTML je jezik za opisivanje strukture web stranica.  HTML daje autorima sredstva da:

Objavite online dokumente sa naslovima, tekstom, tabelama, listama, fotografijama itd. 
Preuzmite informacije na mreži putem hipertekstualnih veza, jednim klikom na dugme. 
Dizajnirajte obrasce za obavljanje transakcija sa udaljenim servisima, za korištenje u traženju informacija, rezervacijama, naručivanju proizvoda itd. 
Uključite tabele, video klipove, zvučne isječke i druge aplikacije direktno u svoje dokumente. 

 Sa HTML-om, autori opisuju strukturu stranica koristeći markup.  Elementi jezika označavaju dijelove sadržaja kao što su “paragraf”, “list”, “tabela” i tako dalje.
Šta je XHTML?
XHTML je a varijanta HTML-a koji koristi sintaksu XML-a, Extensible Markup Language.  XHTML ima sve iste elemente (za pasuse, itd.) kao i HTML varijanta, ali je sintaksa malo drugačija.  Budući da je XHTML XML aplikacija, možete koristiti drugi XML alata sa njim (kao što je XSLT, jezik za transformaciju XML sadržaja).
Šta je CSS?
CSS je jezik za opisivanje prezentacije web stranica, uključujući boje, izgled i fontove.  Omogućava prilagođavanje prezentacije različitim vrstama uređaja, kao što su veliki ekrani, mali ekrani ili štampači. CSS je nezavisni HTML-a i može se koristiti sa bilo kojom oznakom zasnovanom na XML-u jezik jezik.  Odvajanje HTML-a od CSS-a olakšava održavanje stranica, dijeljenje stilskih listova na stranicama i prilagođavanje stranica različitim okruženjima.  Ovo se naziva odvajanjem strukture (ili: sadržaja) od prezentacije.
Šta je WebFonts?
WebFonts je tehnologija koja omogućava ljudima da koriste fontove na zahtjev preko Weba bez potrebe za instalacijom u operativni sistem.  W3C ima iskustva u fontovima za preuzimanje HTML, CSS2 i SVG.  Do nedavno, fontovi za preuzimanje nisu bili uobičajeni na webu zbog nedostatka interoperabilnog formata fontova.  Napori WebFonts-a planiraju riješiti to kroz stvaranje otvorenog formata fonta koji podržava industrija za web (nazvan "WOFF").


Predavanje je privedeno kraju, nadam se da će vam stečena znanja biti od koristi!  U sljedećem predavanju ću vam reći šta tag pohranjuje u sebi , naučit ćemo kako izvoditi sve vrste manipulacija sa slikama, te se upoznati sa tabelama.
Prilikom pisanja ovog članka, opis nekih oznaka je preuzet odavde
Ovom serijom želim da otvorim seriju lekcija posvećenih HTML.  Ovu odluku sam donio jer bih želio pokušati naučiti korisnike kako da kreiraju web stranice od nule.  Ova misao je bila u mojoj glavi već neko vrijeme.  Jedino pitanje koje se postavilo 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 predstavlja N ureg T lok M arkip L apguage( jezik za označavanje hiperteksta).
I pojednostavljeno rečeno, onda HTML je poseban jezik za označavanje koji pretraživaču govori kako da prikaže ovo ili ono 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 već govoriti u svojim sljedećim lekcijama, koje će biti posvećene CSS.
Predlažem da počnemo tako što ćemo pogledati primjer većine jednostavna web stranica, što može biti.  Sada ne biste trebali fokusirati svoju pažnju na to šta znači ovo ili ono. 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:

 
 
 
 
 
 
Jedan dan mog života
 
Priprema za koncert
 
Danas sam se probudio rano 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 uređivaču teksta (mislim da je najpogodnije Notepad++) i sačuvajte datoteku pod imenom index .html negdje na vašem disku.  Kada dvaput kliknete na sačuvanu datoteku, 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.
Pogledajte 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 se izgubiti u ovom ogromnom kodu i imati poteškoća da shvatite u kojem dijelu dokumenta se 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, ovako neozbiljan stil kodiranja, u kojem osoba preskače veliki broj oznaka, loša je forma pisanja, pa je u svakom slučaju preporučljivo imati sve ove elemente 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 na 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.
Tag html znači da izlaz html koda počinje.
glava– odjeljak sa servisnim informacijama.  Između ostalog, evo naslov, 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.
str– 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 časovima sve će biti još zanimljivije i polako ćemo se doticati rada kaskadni listovi stilova (CSS).
 
< Назад 

Da biste komentarisali, potrebno je da se registrujete.