Ovaj dio stranice u potpunosti je posvećen dvama jezicima za kreiranje stranice, odnosno HTML i CSS. 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 rednom broju lekcije. Ovo je prirodno u slučaju da želite da naučite sve od samih osnova, a ne da sebi pravite 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.

Ovaj odjeljak sadrži lekcije o jezičkim standardima HTML5 i CSS3, odnosno ako postoje novije verzije ovih jezika, one će se također odraziti u novim lekcijama ovog odjeljka, a sigurno ćete saznati.

Vjerovatno, svaka osoba koja se barem jednom u životu susrela s kreiranjem web stranice, naravno, čula za takvu gomilu kao što su html i css, mogu s povjerenjem reći da ako želite sami napraviti web stranice, onda možete ne mogu bez znanja o ove dvije stvari.

Jednom kada ste dobili opštu ideju o tome šta je html u vašoj glavi, jasno je da postoji dvosmislena slika, i mislim da to nije iznenađujuće. Vrijeme je da pređete direktno na praksu i kreirate svoj prvi html dokument.

Baš kao i html, CSS ima svoja pravila, pravila i strukturu. U ovoj lekciji ću vam reći o osnovnim konceptima CSS jezika, njegovoj strukturi, uređaju, a mi ćemo sa vama napraviti prvi CSS stilski list i naučiti kako povezati stilski list sa html dokumentom.

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

Veoma važna tačka u kreiranju sajta je rad sa tekstom, a kao što razumete, takođe morate znati da radite sa tekstom u html-u, i da znate šta su oznake i kako se mogu koristiti.

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

CSS ima ogroman broj svih vrsta zgodnih svojstava koja mijenjaju kvalitetu, a mi nastavljamo proučavati CSS rad s tekstom u ovoj lekciji, ući ćemo u temu rada s tekstom i razmotriti nova svojstva teksta.

Rad sa slikama prilikom kreiranja sa sajta jedna je od ključnih tačaka, kako prilikom kreiranja dizajna, tako i prilikom jednostavnog izgleda ili pisanja bilo kakvog materijala za Vaš sajt.

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

HTML je jezik za označavanje hiperteksta koji je učinio web onakvim kakvim ga poznajemo i volimo. Zahvaljujući ovom prekrasnom alatu stranice izgledaju lijepo i moderno, a osigurana je i pogodnost njihovog korištenja. HTML jednostavno raspoređuje elemente web stranice na način prilagođen korisniku. Njegov rad je uporediv sa onim što rade MS Word ili OpenOffice. Oni pretvaraju bezličnu masu slova u dokument koji ima pasuse, podebljan tekst, kurziv, tabele, pa čak i slike. Približno isti jezik radi i HTML, sa jedinom razlikom što se njegovi dokumenti prikazuju u pretraživaču, a mogućnosti ovog alata su mnogo šire od onih kod uređivača teksta. Za označavanje se koriste oznake - posebne naredbe koje opisuju strukturu web stranice. One su zatvorene u ugaonim zagradama -<тег>tako da ih pretraživač može razlikovati od većine teksta. Zatim ćemo pokriti osnove HTML-a za početnike.

Vizuelni uređivači

Početnici koji su tek stupili na put učenja HTML-a često započinju rad sa programima koji vam omogućavaju da kreirate sajtove bez ikakvog znanja. U njima možete jednostavno rasporediti elemente na ekranu onako kako će biti prikazani u pretraživaču. Čini se da je ovdje - izvor vječne milosti, koji vam omogućava da se riješite većine web programera. Ali nije sve tako jednostavno, budući da vizualni uređivači imaju dosta nedostataka zbog kojih je nemoguće koristiti ih u ozbiljnim projektima.

Svi ovi programi stvaraju mnogo nepotrebnih oznaka koje konačnu verziju stranice čine glomaznom i neoptimalnom. Naravno, u ovo doba brzog interneta, ovo je manje važno nego prije, ali postoji niz razloga zašto se sažeta i dobro napisana stranica ispostavi da je praktičnija od svog pandana kreiranog u vizualnom uređivaču. Web stranicu napravljenu u takvom programu roboti za pretraživanje će loše obraditi, jer im je svaki kilobajt koda važan, a glomazan i nelogičan kod sa gomilom teško da će im biti po ukusu. Osim toga, urednici su često u zaostatku za vremenom, postaju nebitni i ne isplati se trošiti sredstva na njihov razvoj, jer niti jedan profesionalac ne koristi ove proizvode. Stoga, svako ko želi da se bavi kreiranjem web sajtova treba da poznaje osnove HTML-a.

oznake

Kao što je gore spomenuto, oznake opisuju strukturu web stranice pretraživaču. Većina njih ima oznaku za otvaranje i zatvaranje, ali ne svi. Na primjer, , gdje je sadržaj umjesto tačaka. Prvi pokazuje gdje oznaka počinje, a drugi je zatvara. Unutra mogu biti drugi elementi za označavanje stranica, mogu biti ugniježđeni jedan unutar drugog poput lutke za gniježđenje. Važno je blagovremeno zatvoriti tagove kako bi stranica bila ispravno prikazana.

Postoje i pojedinačne oznake koje ne treba zatvarati. U njima je sadržaj unutra, baš kao što se može napisati za većinu HTML oznaka i postavlja svojstva elementa. Naznačen je u početnoj oznaci i izgleda otprilike ovako: atribut = "...", gdje se umjesto tačaka nalazi vrijednost atributa. Poznavanje oznaka je prvi i najvažniji korak u savladavanju HTML-a. Osnove ove umjetnosti također uključuju razumijevanje strukture web stranice.

Struktura dokumenta

Svaki HTML dokument ima odgovarajuću ekstenziju, kao što je Index.html. Tako pretraživač može razumjeti s čime se bavi i ispravno prikazati stranicu. Preporučljivo je da sve datoteke korištene za kreiranje stranice pohranite u jedan direktorij, što će vam uvelike olakšati život u budućnosti. Osnove HTML jezika za označavanje hiperteksta zahtevaju jasno razumevanje strukture dokumenta. Počinje sa oznakom, koji pretraživaču govori verziju HTML-a koja se koristi u ovom dokumentu. Trenutno je relevantna peta verzija jezika, tako da nema potrebe ništa izmišljati, možete sigurno umetnuti gornju oznaku na početak bilo koje stranice.

Zatim dolaze glavne uparene strukture koje čine "kostur" stranice. Prva oznaka u kojoj su svi ostali ugniježđeni − .... Sve što je izvan njega pretraživač ne prepoznaje kao web stranicu, pa otvara dokument i zatvara ga. Ova oznaka je potrebna za bilo koji dokument. Također sadrži još nekoliko potrebnih oznaka, o kojima će biti riječi u nastavku.

glava

Unutar oznake ... sadrži tehničke informacije koje neće biti prikazane na stranici, ali je ipak važan dio HTML dokumenta. Na ovom mjestu su postavljeni temelji stranice, ovdje se bira kodiranje i upisuje naziv stranice. Sadrži se unutar obavezne oznake . Naziv se prikazuje na vrhu pretraživača, gde možete postaviti i malu ikonicu koja karakteriše sadržaj stranice. Preporučljivo je odmah odrediti kodiranje dokumenta za njegov ispravan prikaz. Ovo se može uraditi pomoću oznake . Meta oznake pružaju informacije o strukturi stranice i obično se nalaze unutar glave.

Veza

Poznavanje osnova HTML-a također uključuje korištenje kaskadnih stilova, ili css. Oni postavljaju svojstva elemenata koji će biti prikazani na stranici. Moderan pristup ovom zadatku uključuje uklanjanje takvih karakteristika kao što su boja, visina i lokacija elementa u vanjskoj datoteci radi veće udobnosti. Oznaka se koristi za povezivanje css datoteke . Kada se završi, izgleda ovako: , gdje href označava lokaciju datoteke, a tip označava njen tip.

Tijelo

U ovom dijelu HTML dokumenta kreira se vidljivi dio stranice. Sve što se radi unutar "tijela" će prikazati pretraživač. IN koristi se veliki broj HTML oznaka. Osnove su formatiranje teksta, rad sa linkovima i najjednostavniji alati za strukturiranje web stranice. Za početak rada u HTML-u dovoljno je poznavati osnovne oznake i znati ih koristiti. Ispod su najpopularniji:

• - koristi se za odabir podniza koji će biti podvrgnut posebnom stilu opisanom u css-u;
• - kreira link na web stranici; adresa za skok je postavljena atributom href;
• - jedna od najpopularnijih oznaka našeg vremena; svi koji se odluče naučiti osnove HTMLl jezika treba da obrate posebnu pažnju na to, jer se radi o blok elementu na osnovu kojeg se pravi lavovski dio modernih stranica (parametri za blokove

  su postavljeni u css, a drugi blokovi se mogu postaviti unutar ove oznake);

• Odabire pasus iz teksta; sadržaj pasusa je između početne i završne oznake;

• - numerisana lista, čiji su elementi zatvoreni u par tag
  1. - lista za nabrajanje, u kojoj su, kao u numerisanoj listi, elementi označeni oznakom

     • -

       - zaglavlja dokumenta (broj označava nivo zaglavlja, tj

       - glavni naslov, a sljedeće opcije su njegovi podnaslovi, usput, naslovi nivoa

       ,

       gotovo nemoguće pronaći na Internetu), također je važno zapamtiti da može postojati samo jedan naslov po stranici

       ;

     • - sličica;
     • - kurziv;
     • - umetanje slike na web stranicu (ovo je jedan tag, ne treba mu tag za zatvaranje, ali mora sadržavati alt atribut, koji specificira tekst za sliku);

     Ovo nisu sve oznake koje su vam potrebne za kreiranje vlastite web stranice, ali su dovoljne da postave temelje HTML-a za početnike.

     css

     Razvoj HTML jezika doveo je do toga da je svaki tag dobio masu atributa, a zahtjevi za izgledom web stranica su se značajno povećali. Kod je postao glomazan i nezgodan, bilo ga je teško čitati, a kamoli prilagođavati ili mijenjati. Osim toga, ako imate deset stranica na vašoj web stranici koje imaju mnogo naslova označenih zelenom bojom, a odjednom želite da ih učinite crvenim, onda morate naporno raditi mijenjajući svaki od njih ručno. Sa pojavom kaskadnih listova stilova, ovaj proces je postao jednostavan i logičan, a HTML kod je postao mnogo čitljiviji.

     

     Primjena CSS-a

     Da biste kreirali web stranice, morate poznavati osnove HTML-a i CSS-a, jer danas nema šta raditi u ovoj oblasti bez poznavanja kaskadnih stilova. Oni postavljaju atribute za bilo koji element koji se primjenjuje na cijeli dokument. Tako možete postaviti boju za sve elemente odjednom

     Or pisanje samo jednog pravila. S obzirom na moderne zahtjeve za izgled web stranica, upotreba kaskadnih stilskih tablica je obavezna.

     Da biste povezali css fajl sa dokumentom, postoji oznaka veze. Princip njegove upotrebe opisan je malo više, ali to nije jedina opcija za kombiniranje svih stilova na jednom mjestu. Postoji još jedna oznaka