Nepotrebno je, razvoj web stranica je ogroman. Veliki dio toga je zato što se gotovo svi nalaze na webu. Međutim, programerima nedostaje programera i zato je nastavni plan i program za web razvoj tako lako dostupan i besplatan. Imajući to na umu, malo ćemo vam pokazati o čemu se radi u HTML-u i CSS-u. Konkretnije, pokazat ćemo vam kako rade "časovi".
Ne krećemo vam od početka, jer tamo već postoje tone besplatnog nastavnog programa. Umjesto toga, posebno ćemo vam pokazati kako satovi rade jer je to nužna komponenta za stiliziranje vaše web stranice. Također smo mislili da bi moglo biti vrijedno pokrivanja prije nego što objavimo Twitterov Bootstrap API, jer su i klase potrebna komponenta u tome.
Kao odricanje od odgovornosti, ako ste potpuno novi u HTML-u i CSS-u, ovo vjerojatno nije dobar početak za vas. Ako ste upoznati, to ne bi trebalo biti previše teško pokupiti. No, ako tražite potpuni vodič za početnike, na internetu postoji puno sjajnih opcija. Da nabrojimo samo neke, tu su FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity i mnogi drugi. Ako se odlučite za početak kopanja u nekoj od njih, toplo bih preporučio da se pridržavate jednog (poput Free Code Camp-a) i dovršite ga prije nego što započnete s drugim, jer puno "osnovnog" sadržaja može se prilično ponavljati.
S tim izlaskom, istražimo o čemu se radi.
Kako rade predavanja
Nastava je izuzetno korisna. Oni ponavljaju stil HTML-a. Bez nastave, svaki bi element u svojoj markirali pojedinačno. A što ako imate dva ista elementa, ali želite svaki od njih drugačije oblikovati? Bio bi to potpuni nered. Zbog toga imamo časove. Klase dodaju neku organizacijsku strukturu vašeg HTML-a, omogućujući vam da svoj kôd budete relativno čisti. I ne samo to, već se klase mogu koristiti više puta. Drugim riječima, nikad nećete morati dvaput izraditi ista pravila o stiliziranju.
Evo kako izgledaju časovi unutar našeg označiti:
Kao što vidite, pod našom oznakom tijela imamo dvije
elementi s različitim klasama. Prvi
oznaka ima klasu "head1", dok druga oznaka ima klasu "head2". Dakle, u našem CSS-u, umjesto da styling primjenjujemo samo na
elementa, možemo primijeniti styling na te pojedinačne klase. Zašto bismo to željeli učiniti?
Primarni razlog je taj što ne želite sve svoje
elementi da imaju isti stil. To bi stvorilo puno glavobolje prilikom izrade web stranica, a uz to web stranice ne bi izgledale vrlo sjajno. Klase nam omogućuju primjenu stilova na samo tu jednu instancu oznake, ne na sve
oznake preko dokumenta. Pa, kako napisati predavanje u HTML-u? Kao ovo:
Neki sadržaj
Možete dodati svojstvo "klase" u gotovo bilo koji HTML element.
Sjajno! Dakle, mi imamo nastavu, ali u svom sadašnjem stanju oni zapravo ništa ne rade. To je zato što još uvijek nismo dodali nikakva pravila o stiliziranju u klasu. Da bismo to učinili, trebat ćemo stvoriti zaseban .css dokument. Samo ću ga nazvati main.css. U tom ćemo dokumentu oblikovati klasu kao što je ovaj:
Za odabir klase koju želimo stilizirati učinimo ovo:
.head1 {boja: crvena; poravnavanje teksta: središte; }
Unutar kovrčavih zagrade nalaze se sva „pravila“ (ili styling) koja primjenjujemo na tu klasu. Postoji puno različitih pravila koja možete postaviti unutar te klase. U mom slučaju, promijenio sam boju teksta u crvenu pomoću pravila "boja" i usredsredio tekst pomoću pravila "usklađivanje teksta". Puni popis CSS pravila kao i njihovu dokumentaciju možete pronaći iz Mozilline razvojne mreže.
Sada se naš stil još uvijek ne primjenjuje na klase u našem HTML dokumentu, a to je zato što dvije datoteke još samo nismo povezali zajedno. Vratite se na svoju HTML datoteku i na oznaku, trebali biste povezati CSS datoteku na sljedeći način:
Vaš HTML dokument trebao bi izgledati ovako:
A vaš testni projekt trebao bi izgledati ovako na Internetu:
Detaljniji videozapis koji prolazi kroz ove korake potražite u nastavku.
Video
Zaključak
I to je sve što postoji na nastavi! Stvarno su jednostavni za razumijevanje. Očito na velikim i popularnim web mjestima koja posjećujete pravila unutar nastave puno su složenija od onoga što smo pokrili, ali u njihovom najosnovnijem obliku, to je način na koji oni funkcioniraju.
Ako imate bilo kakvih pitanja ili imate problema dugo nakon toga, budite sigurni da nas obavijestite u komentarima ispod ili više na forumima PCMech! Ili, ako bi vas mogao zanimati cjeloviti HTML / CSS vodič za početnike na PCMech-u, budite sigurni da nam to i javite!
