Ovaj dio stranice u potpunosti je posvećen dvama jezicima za izradu web 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 izgrađen je na principu postupnog proučavanja materijala, stoga se prije svakog naslova lekcije u HTML-u i CSS-u nalazi broj koji odgovara rednom broju lekcije. To je prirodno u slučaju da želite naučiti sve od samih osnova i ne praviti si nered u glavi. Ako već znate nešto o HTML-u i CSS-u, ovdje također možete pronaći znanje koje nedostaje ili produbiti ono što ste već naučili.
V ovaj odjeljak objavljene lekcije o standardima jezika HTML5 odnosno CSS3, ako postoje novije verzije ovih jezika, one će se također odraziti na nove lekcije ovog odjeljka, a to ćete sigurno saznati.
![](https://i2.wp.com/for-net.ru/src/htmlcss/ico_first.png)
Vjerojatno je svaka osoba koja se barem jednom u životu susrela s stvaranjem web stranice sigurno čula za takav paket kao što su html i css, mogu s povjerenjem reći da ako želite sami izraditi web stranice, onda možete nemojte bez znanja o ove dvije stvari.
![](https://i0.wp.com/for-net.ru/src/htmlcss/ico_first_html.jpg)
Nakon što ste primili opći pojmovi očito postoji dvosmislena slika o tome što je html u vašoj glavi, i mislim da to nije iznenađujuće. Vrijeme je da krenete izravno u praksu i izradite svoj prvi html dokument.
![](https://i2.wp.com/for-net.ru/src/htmlcss/ico_first_css.jpg)
Kao i html, CSS ima svoje karakteristike, pravila i strukturu. U ovom vodiču upoznat ću vas s osnovnim pojmovima CSS jezik, o njegovoj strukturi, uređaju i mi ćemo učiniti prvi CSS tablica stylesheet i naučite kako povezati stylesheet s html dokumentom.
Selektori u CSS-u su temelj samog jezika i njihovo učenje i razumijevanje je vrlo važno, pa ću vam u ovoj lekciji reći o još nekoliko vrsta selektora i opisati njihove mogućnosti.
Vrlo važna točka u izradi 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 s 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 ima ogroman broj svih vrsta prikladnih i kvalitativno mijenjanih izgled svojstva i nastavljamo proučavati CSS rad s tekstom i u ovom ćemo tutorialu dublje proći u temu rada s tekstom i pogledati nova svojstva teksta.
Rad sa slikama pri izradi sa stranice, jedan od ključne točke, kao i kod izrade dizajna, također s jednostavnim izgledom ili pisanjem bilo kojeg materijala za svoju stranicu.
CSS uvelike proširuje mogućnosti rada s bilo kojim html objekti, u ovom vodiču želio bih vam detaljno reći o tim parametrima koji se mogu primijeniti na slike.
Sada je teško zamisliti osobu koja radi s internetom i ne zna što je html. Mnogi ljudi žele naučiti ovaj jezik. Čini se, što je jednostavnije - postoji zastrašujuće ogroman broj knjiga posvećenih ovoj temi. Je li html 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, poslati ih u pravom smjeru. To ne znači da je ono što sam napisao nepromjenjiva istina. Samo želim novopridošlicama dati malo općih smjernica.
Za početak, želio bih voditi grubi plan ovog članka. Ako nekoga nešto ne zanima, može to sigurno preskočiti.
- Koje oznake trebate znati
- Kako to učiniti lijepim?
Što je html i zašto je potreban
html nije programski jezik kako mnogi misle. To je samo jezik za označavanje. Njegova je svrha definirati strukturu dokumenta. Ako vam netko kaže da je za određivanje izgleda stranice potreban html – nemojte mu vjerovati! Ova osoba je ili iz prošlosti, ili ne razumije sasvim tu temu.
html definira semantički (smisleni) raspored elemenata. Koji odlomak slijedi koji, koji je sadržaj logički povezan, a koji su potpuno različiti skupovi podataka, gdje umetnuti sliku i kamo ići klikom na ovaj link. U principu, da se sada za izgled stranice koristi samo html, teško da bi sve stranice izgledale jako drugačije. Ako netko kaže da je instalacija pozadinska slika- html zadatak - pljunuti mu u lice ne vjeruj mu.
HTML, kao i mnoge druge tehnologije povezane s webom, održava W3C. Ako želite sve znati iz prve ruke, posjetite njihovu web stranicu. Ali moram vas upozoriti: specifikacije koje je objavio W3C su savjetodavne prirode, tako da preglednici uvijek različito tumače istu stvar. html koda... To čini izgled mnogo težim nego što zapravo jest.
Trenutno je najnovija html specifikacija 4.0. također postoje, xhtml jeziku, koji je puno zahtjevniji za programera, jer sadrži strože standarde. Dakle, oznake u html-u mogu se pisati u svakom slučaju, a u xhtml-u - samo malim slovima. itd. Držim se xhtml specifikacije i opisat ću je u nastavku.
html jezik sastavlja skup oznaka. To su smjernice pregledniku koje mu govore o strukturi vašeg dokumenta. Napomena: struktura. Za izgled danas zaslužna je još jedna tehnologija - CSS, o čemu će biti riječi u nastavku. Da biste naučili html, zapravo morate naučiti skup oznaka i njihovih atributa i to je to! Možete početi stvarati testna mjesta.
Koje oznake trebate znati?
Da biste započeli, morate naučiti mali skup oznaka. Sada ću dati njihov popis, grupiran prema određenim kriterijima. (Grupiranje je moja subjektivna vizija subjekta i ne tvrdi da je apsolutno istinito)
- Osnovno: html, glava, naslov, tijelo;
- Strukturni: div, raspon;
- 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;
- Izborno: hr;
- Posebno: skripta, poveznica, meta;
Kao što vidite, nema toliko oznaka. Međutim, njihovo učenje može potrajati značajno vrijeme jer mnoge od ovih oznaka mogu biti opskrbljene atributima zbog kojih se ti elementi ponašaju drugačije.
Netko bi se mogao uzrujati i reći da poznaje druge oznake koje rade. Da, doista, dao sam popis ne svih oznaka koje preglednici podržavaju. Međutim, ove oznake su osnovne, a osoba koja ih poznaje može reći da zna html. Namjerno nisam uključio u svoj popis oznake poput fontova, koje su zastarjele. Ove oznake su toliko loše da o njima nema smisla niti govoriti, jer sada postoje puno moćniji alati koji vam omogućuju kontrolu izgleda stranica i njihovih dijelova. Osobno smatram potrebnim i dovoljnim poznavati gornje oznake. Jer ostali su ili potrebni vrlo rijetko, ili uopće nisu potrebni. Stoga predlažem da počnete učiti html učenjem ovih oznaka.
Kako to učiniti lijepim?
Svatko tko pokuša stilizirati stranicu pomoću gornjih oznaka završit će s prilično skromno oblikovanom stranicom koja će biti bijela s crnim tekstom i plavim poveznicama. Netko će možda moći mijenjati pozicioniranje blokova informacija pomoću tablica i poravnanja atributa. Netko će pokušati animirati stranicu umetanjem slika. Međutim, postoji specijalni alat za prilagođavanje izgleda stranica. Ovo je CSS.
Sada gotovo nijedna stranica nije potpuna bez aplikacije CSS tehnologije... Upravo je CSS-u povjerena misija definiranja formatiranja dokumenta. Pozadine stranice, padding, poravnanje, fontovi, boje i drugo su u djelokrugu CSS-a. Stoga se sada preporuča ne koristiti oznake i atribute koji određuju izgled stranica i elemenata, već umjesto toga koristiti CSS pravila. Kako se prijaviti CSS je boljičitati u knjigama. Ali moja je poanta da ako naiđete na oznaku ili atribut koji određuje izgled elementa, razmislite 10 puta prije nego što ga upotrijebite! Bolje saznajte koje je CSS pravilo odgovorno za prikazivanje elementa na način na koji želite da se pojavi. Uz vrlo rijetke iznimke, takvo pravilo se uvijek nađe.
Koji je najbolji način za početak učenja izgleda?
Najbolje je početi s kodiranjem nakon što shvatite kako web funkcionira. Osobno bih napravio ovakav plan treninga:
- Načela učenja web rad i strukture klijent-poslužitelj
- Učenje oznaka i njihovih atributa, s praktične vježbe na njihovu primjenu
- Naučite CSS pravila uz praktične upute o tome kako ih primijeniti
- Istraživanje rasporeda tablice
- Izgled jednostavnog izgleda s tablicama
- Složen raspored sa tablicama
- Ispitivanje DOCTYPE direktiva
- Studija blok raspored(div oznaka)
- Izgled jednostavnog izgleda po divovima
- Izgled složenog izgleda diva
- Trikovi, trikovi, hakovi i druge mudrosti od gurua
U principu, za početnu razinu pripreme i poznavanje osnova html-a dovoljno je proći samo prvih 5 točaka. (Ova bi opcija bila idealna za web programere koji neće kodirati stranice. Poznavanje html-a trebaju samo ispisati izlaz iz skripte.)
Jednom davno sam želio napraviti svoju prvu web stranicu vezanu uz IT. S ovog područja znao sam samo vrlo jednostavne osnove HTML-a i možda sve. Ali imao sam više nego dovoljno želje i hrabrosti pa sam bez puno straha registrirao svoju prvu domenu.
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. No, kako se sada sjećam, stvarno sam želio pronaći uporište iz kojeg bih mogao početi svladavati ovo za mene novo područje, budući da je mnogo informacija odjednom propalo i nije ih bilo lako probaviti.
Odlučan, registrirao sam svoju prvu domenu i krenuo ostvarivati svoje ciljeve. Tada sam znao da većina stranica koje se nalaze na internetu radi na raznim gotovim sustavima za upravljanje materijalima, odnosno CMS-u. I moj prvi zadatak je bio pronaći CMS.
Prilikom odabira CMS-a pazio sam samo na jedno - CMS ne bi trebao biti zahtjevan za resurse poslužitelja, budući da je želja, vjerojatno, svakog početnika u ovom području, da sve troškove minimizira. Pa, razumljiva je činjenica da bi CMS trebao biti blog.
Nakon dugog surfanja po netu, naišao sam na CMS Textpattern. Nakon 2,5 godine, mogu sa sigurnošću reći da sam bio u pravu s odabirom Textpatterna. Ovo je najviše najbolji CMS za blog, koji je u javnosti.
Uz izvanredne performanse, ovaj CMS može biti smješten na gotovo svakom hostingu koji ima podršku za MySQL i PHP. Trenutno koristim jeftin hosting, a ne VPS, i na njemu ugošćujem 16 stranica. Dnevni posjet svim stranicama je otprilike 5000 jedinstvenih posjetitelja dnevno. Mislim da je ovo dobar pokazatelj izvedbe Textpatterna.
Glavni problem s kojim sam se suočio nakon instaliranja ovog CMS-a je moje apsolutno nepoznavanje osnova CSS-a. Malo po malo sam izvlačio informacije 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 kupnji knjige na CSS-u, ali sada mi je čak drago što nisam imao vremena za to, jer bi to bila još jedna kupnja novog sakupljača prašine.
Na stranici HTML knjiga Našao sam puno dobro strukturiranih informacija. Za početnika, to je samo blago. Čak se i sada često obraćam ovom izvoru, jer se ne možete sjetiti svega, a ni ne trebate. Glavno ljudsko znanje je znati gdje nabaviti ono što vam treba!
Ako ste tek na samom početku svog profesionalnog života i namjeravate savladati CSS i HTML, onda vam je moj savjet: ne kupujte papirnate kopije, koje su zastarjele prije objavljivanja, već koristite WEB usluge koje ne samo da će vam spasiti novac, ali će biti izvrsna pomoć koja je uvijek pri ruci.
p.s. Uvijek se zapitam kad zalutam u neki "beginner moneymaker's blog" ili koliko je sada moderan "propaš" koji pokušava zaraditi puno novca, ali stvarno nema pojma kako to učiniti sam jedinstven dizajn za vašu stranicu i ispostavilo se da postoji hrpa beskućnika sličnih jedni drugima. Možete, naravno, platiti dizajn, ali uštedite peni po rublju, a nitko to ne može učiniti bolje od vas samih.
Odlučio sam više pažnje posvetiti početnicima koji žele steći znanja iz područja izrade web stranica. Na to me natjerao moj učitelj, koji je napravio previše grešaka u priručnicima za laboratorijski rad... Rado bih bacio pogled na resurs s kojeg je preuzeta infa o treningu i tamo ostavio par redaka svog mišljenja. Ali sada se ne radi o tome. U svom prvom predavanju govorit ću o
Koja je struktura HTML dokumenta
Označiti
obavještava da počinje struktura html dokumenta,
- što završava. Između oznaka
većina informacija pohranjena je za preglednik i tražilice. U oznakama
Sad ću malo objasniti. Sve oznake ( tag - element jezika za označavanje hiperteksta) dijele se na dvije vrste "jedan" i "zatvarajući". Osim toga, oznake su zatvorene u sljedećim znakovima < i > , oni su ti koji razlikuju oznaku iz običnog teksta html... Pogledajmo neke od najjednostavnijih "single" oznaka:
- oznaka koja je odgovorna za prelamanje u novi red, na mjestu gdje je ova oznaka instalirana. Pogledajmo kod pomoću ove oznake.
I ovo je moja prva stranica.
Možete vidjeti rezultat.
Je oznaka koja crta vodoravnu crtu. Ova oznaka se odnosi na blok elementi, red uvijek počinje na novom redu. Ima 5 atributa:
- align - Određuje poravnanje linije. Može se podesiti lijevo, središte, desno.
- boja - Postavlja boju linije.
- noshade - crta liniju bez 3D efekata.
- veličina - Postavlja debljinu linije.
- širina - Postavlja širinu linije.
Šifra pomoću oznake
:
I ovo je moja prva stranica.
Pronađen je vizualni primjer.
Još jedna "single" oznaka je . Ova oznaka koriste se za pohranu informacija namijenjenih preglednicima i tražilicama. Tražilice traže meta oznake kako bi dobile opise web-mjesta, ključne riječi i druge podatke. Dopušten je neograničen broj meta oznaka, svi moraju biti između i ... Parametri bilo koje meta oznake imaju oblik "ime = vrijednost", koji je definiran ključne riječi sadržaj, Ime ili http-ekviv... Jer meta oznake su namijenjene autima, ne prave nikakve vizualne promjene, pa ću samo dati izvor:
Ovaj redak označava da kreator stranice misli da stranica koristi UTF-8 kodiranje. Sve je postalo jednostavnije u HTML5, da biste odredili kodiranje, dovoljan je samo sljedeći redak:
Ima i drugih pojedinačne oznake (,
,