Mogućnost pravilnog formatiranja CSS koda važna je za svakog web dizajnera. Ova lekcija je namijenjena početnicima koji tek prave prve korake.
Uvod
Morate biti izuzetno oprezni kada radite sa CSS-om. Kada pišete kod, trebali biste zadržati ekstremnu koncentraciju.
Ova lekcija će pokazati primjer kako kreirati jednostavnu HTML stranicu koristeći blok raspored (bez korištenja tablica). Također ćemo naučiti kako staviti stilove u poseban stilski list.
Korak #1 - Označavanje i korištenje oznaka
HTML oznake uvijek su ispred stilova. Nema smisla skakati u CSS bez potpunog spremanja HTML-a.
HTML je jezik za označavanje hiperteksta, drugim riječima, HTML opisuje strukturu tekstualnih informacija stranice. Prije nego počnemo primjenjivati CSS stilove, moramo naučiti kako primijeniti elemente strukture.
Prilikom izrade markupa koristimo "tagove" koji su okruženi ugaonim zagradama. Oznake se koriste za definiranje nečega na stranici. CSS se kasnije koristi za određivanje gdje (u pretraživaču) se prikazuje sadržaj određene oznake.
Najjednostavniji tagovi na stranici su:
Većina oznaka i sadržaja se koristi unutar .
Vrlo važna oznaka za odvajanje i definiranje strukture je . Pomoću ove oznake možete podijeliti sadržaj u ćelije. Unutar ove oznake možete koristiti druge oznake za definiranje sadržaja (na primjer, veze, tekst, slike), koji se zatim mogu lijepo stilizirati pomoću CSS-a.
Koristite bilo koji uređivač slika da nacrtate sljedeću skicu:
Kod za ovaj šablon bi trebao izgledati ovako:
Kao što vidite, div oznake imaju ID. Ovo će nam trebati da dizajniramo svaku ćeliju. ID se koristi za označavanje oznake i davanje joj jedinstvenog stila. Dok se "klasa" koristi za ponavljanje elemenata dizajna.
Također, primjer koristi još jedan div "omotač", koji "omata" sve druge oznake. Ovo će nam kasnije biti od koristi za pozicioniranje naše stranice.
U listi stilova definiramo elemente dizajna stranice. Možete kreirati ili interni stilski list ili eksterni. U ovoj lekciji ćemo koristiti eksternu.
Ako sada pogledate svoju stranicu u pretraživaču, ništa se neće pojaviti. To je zato što našim oznakama nismo dali nikakvu boju ili oblik. A pošto će naš CSS biti eksterni, prva stvar koju treba da uradite je da se uverite da stranica ima vezu do stilskog lista.
Dodajte sljedeći kod između:
Korak #3 - Kreirajte CSS
CSS sintaksa se sastoji od selektora, svojstva i vrijednosti. Selektor je oznaka koju treba stilizirati u dizajnu, svojstvo je tip atributa koji želite dodati, a vrijednost je kvantitativno mjerenje svojstva.
Selektor, osim oznake tijela, napisan je u CSS-u koji počinje s “#” ili “.”. “#” specificira ID, a “.” (tačka) specificira klasu selektora. Unutar selektora može biti mnogo svojstava i sva moraju biti okružena ( ).
#selektor (
svojstvo:vrijednost;
svojstvo:vrijednost;
svojstvo:vrijednost;
}
Trebamo stilizirati sljedeće oznake koristeći
CSS:
* tijelo
* omotač
*header
* navigacija
*meni
* sadržaj
*podnožje
Svojstva i moguće vrijednosti u CSS-u:
Svojstvo "pozadina" može biti slika ili boja, ili oboje. Da biste prikazali sliku, vrijednost se mora sastojati od putanje do slike. Za određivanje boje koristi se heksadecimalni kod.
Svojstvo "color" se koristi za definiranje boje selektora. Vrijednosti se pišu kao heksadecimalni kod (primjer: #FFFFFF za bijelo).
Svojstvo "font-family" vam omogućava da definirate font koji će se koristiti. Norma je uključiti najmanje 3 vrste fontova. Ovo se radi u slučaju da pretraživač ne može da prikaže prvi font, koristiće se drugi itd. (primjer: Trebuchet MS, Arial, Times New Roman)
Svojstvo "font-size" specificira veličinu fonta i ima vrijednost u pikselima.
Svojstvo "margin" se koristi za određivanje pozicije selektora. Vrijednosti određuju udaljenost strana birača do ruba prozora pretraživača sljedećim redoslijedom: gore, lijevo, dolje, desno. Ako trebamo centrirati stranicu, pišemo "0px auto 0px". Navođenje sve četiri strane nije obavezno.
Svojstvo "width" specificira željenu širinu u pikselima bilo kojeg selektora.
Svojstvo "height" je visina u pikselima.
Svojstvo "float" nam omogućava da pozicioniramo elemente unutar selektora, u većini slučajeva desno ili lijevo.
Da biste kreirali CSS datoteku, otvorite svoj omiljeni uređivač teksta i sačuvajte novi dokument kao style.css u folderu stranica stranice. Dodajte sljedeći kod:
tijelo (
pozadina: #f3f2f3;
boja: #000000;
porodica fontova: Trebuchet MS, Arial, Times New Roman;
veličina fonta: 12px;
}
#wrapper (
pozadina: #FFFFFF;
margina: 60px auto;
širina: 900px;
visina: 1024px;
}
#header (
pozadina: #838283;
visina: 200px;
širina: 900px;
}
#navigation (
pozadina: #a2a2a2;
širina: 900px;
visina: 20px;
}
#meni (
pozadina: #333333;
float: lijevo;
širina: 200px;
visina: 624px;
}
#content (
pozadina: #d2d0d2;
širina: 900px;
visina: 624px;
}
#footer (
pozadina: #838283;
visina: 180px;
širina: 900px;
}
Zaključak
Prošli ste kroz školu mladog CSS ratnika i stilizirali sve selektore koristeći gore navedena svojstva.
Nadam se da ste uživali u lekciji! Radujem se vašim povratnim informacijama i prijedlozima.
Ovaj članak nije namijenjen da bude sveobuhvatan vodič za jezik za označavanje HTML dokumenata. Opisuje osnove HTML-a - osnovne principe, koncepte i definicije ove tehnologije, savladavši koju, lako možete nastaviti u proučavanju HTML kodiranja.
Da biste proučili lekciju, preuzmite arhivu s potrebnim datotekama.
HTML je jezik za označavanje dokumenata. Tačan izgovor je HTT.
Jeste li vjerovatno ikada radili u Word uređivaču dokumenata ili sličnim uredskim aplikacijama? Vjerovatno znate da ovaj tip uređivača ima bogate mogućnosti za uređivanje teksta, sređivanje elemenata, umetanje slika itd.
Zašto biste, mogli biste se pitati, pisati o programima za obradu teksta u članku o HTML-u? Ali zašto. Ako shvatite, šta je uredski urednik? Ovo je aplikacija za uređivanje i prikaz dokumenata.
Ovdje je ključna riječ dokument. Odnosno, kreiramo, uređujemo i pregledamo dokument u nekom programu, u ovom slučaju - u uredskom uređivaču. Ako takav dokument otvorimo u jednostavnom uređivaču teksta, na primjer, Notepad, vidjet ćemo mnogo čudnih simbola i znakova. Ova zbrka simbola je neshvatljiva čovječanstvu, ali razumljiva kompjuterima. Zahvaljujući ovom internom jeziku, Word dokument poprima određenu strukturu i izgled u samom uređivaču, a dokument se pred nama pojavljuje u svom svom sjaju sa formatiranim tekstom i slikama na svom mjestu.
HTML je jezik za označavanje dokumenta za pretraživač. Word je ovdje pretraživač, a dokument je HTML stranica. Ovo je sama osnova HTML tehnologije čije je razumijevanje neophodno kako se ne bi pobrkali jezik za označavanje web dokumenata sa programskim jezicima. Ime govori za sebe - koristeći HTML we obeležavanje, gdje će na stranici biti prikazan element, slika ili tekst i kojim redoslijedom će se pojaviti jedan pored drugog.
Da, jednostavno kucanje i formatiranje teksta u uredskim aplikacijama nema nikakve veze s programiranjem. Ali pažljivi čitalac će primijetiti važan detalj - u program za obradu teksta kucamo, uređujemo i formatiramo tekst i slike pomoću vizuelnih dugmadi i menija, ali zašto se HTML kod piše ručno? Zašto naučiti toliko tehničkih detalja o pisanju oznaka za dokument?
U stvari, postoji mnogo uređivača pomoću kojih možete kreirati i uređivati HTML stranice, slično Wordu. Odnosno, izvorni HTML kod je skriven za nas i ne ulazimo u njega.
Neka vrsta Worda za HTML. Ovi vizuelni uređivači se zovu:
WYSIWYG urednici - Šta vidiš šta vidiš šta vidiš. Odnosno, ako to prevedemo na ruski: ono što vidimo to i dobijamo.Ja ih zovem "wuzivoogies". Iako je ovo fonetski netačno, jasno pokazuje besmislenost ovog izuma. Početnici vrlo često koriste takve urednike za kreiranje svojih prvih web stranica. Naravno, ovo je zgodno - ne morate se upuštati u proučavanje oznaka, stilova dizajna i drugih, na prvi pogled, neugodnih i složenih stvari. Sam uređivač automatski pretvara naše radnje u HTML kod.
Ali, kako kažu, ništa se jednostavno ne dešava. Tačnije, ovaj pristup ima veoma ozbiljne nedostatke. Šta sve sprečava da koriste vizuelne uređivače za dizajniranje HTML stranica? Činjenica je da ovako formirane stranice obično imaju mnogo nepotrebnog koda i mnogo grešaka sa semantičke tačke gledišta. Sada, naravno, nema problema sa brzom internet vezom i razlika u veličini stranice od 400 kb i 100 kb nije značajna za brzinu, međutim optimiziran i ispravno napisan HTML kod otklanja mnoge probleme i pruža mnoge prednosti, naime:
- Kompetentan HTML kod ima pozitivan učinak na optimizaciju pretraživača i brzinu kojom robot za pretraživanje indeksira web stranicu. Kilobajti koda koje generiše vuzivuga nisu prihvatljivi, pa čak i štetni;
- HTML kod koji generiše WYSIWYG editor ima mnogo semantičkih grešaka. Odnosno, oznake koje generiše takav uređivač koriste se u druge svrhe, gdje ih treba koristiti, na primjer, liste
- , uređivač će generirati još jednu oznaku koja nam nije potrebna. Ovisi, naravno, o uređivaču, ali ovdje mislimo na kompleksna rješenja za kreiranje web stranica, a ne samo uređivanje teksta u tekstualnom području pomoću WYSIWYG alata.
- Generiše se mnogo nepotrebnih oznaka i struktura dokumenta postaje naduvana. Recimo da pomerate element u takvom programu, prvo udesno, zatim ulevo, pa u centar - svaka radnja ostavlja trag u izvornom HTML kodu. Editor je program i ne može znati šta tačno želite da dobijete kao rezultat, on generiše tone koda, uzimajući u obzir sve moguće opcije za ponašanje dokumenta u pretraživaču.
- Po pravilu, uređivači za vizuelni dizajn HTML koda brzo zastarevaju. A zbog nezainteresovanosti profesionalaca uglavnom su uskraćeni za podršku i prestaju da se razvijaju. A HTML se razvija. Sve se razvija osim wuzivoogija. Shodno tome, ne mogu da generišu ispravan i moderan kod koji bi koristio nove karakteristike i rešenja.
- Podržavati i razvijati takve projekte je nebeska kazna. O korištenju obrazaca i ponovnoj upotrebi koda uopće ne može biti govora.
Dakle, pisaćemo HTML samo olovkama. Adekvatni alati za vizuelno uređivanje HTML-a još uvek nisu izmišljeni i malo je verovatno da će se pojaviti. HTML jezik za označavanje lako je naučiti i razumjeti, a postoji mnogo alata za automatizaciju pisanja HTML koda, ali više o tome u drugim lekcijama.
Nakon što su se malo pozabavili WYSIWYG editorom, mladi HTML gurui ostavljaju ovaj uzaludan zadatak i nastavljaju dalje.
Struktura HTML dokumentaZa časove preporučujem preuzimanje i instaliranje uređivača Sublime Text. Toplo preporučujem da ne koristite ugrađeni Windows Notepad za HTML izgled ako ne želite da razbijete svoju psihu u ranim fazama učenja HTML-a.
Odlučili smo da ćemo ručno napisati kod HTML dokumenta, odnosno otkucati ga. HTML Layout je proces kreiranja HTML dokumenta. U običnim ljudima i informisanim krugovima, to je samo raspored. Svaki dokument ima strukturu i određena pravila konstrukcije. Od kojih elemenata se sastoji kod, kakva je struktura HTML-a?
Kreirajmo početni predložak na računaru - datoteku index.html, otvorimo je pomoću editora i zalijepimo sljedeći kod u nju:
Telo dokumenta zaglavlja Imajte na umu da HTML dokumenti imaju ekstenziju .html.
Dakle, redom prema primjeru.
- vrsta dokumenta (doctype)Ova konstrukcija je uvijek naznačena na početku dokumenta tako da pretraživač ispravno „razumije“ koja se verzija HTML-a koristi prilikom izrade dokumenta.
Zbog činjenice da se HTML stalno razvija, ima nekoliko verzija, kao i svaki softverski proizvod. Trenutna verzija HTML-a je peta, a tip dokumenta dat u primjeru je trenutni.
U principu, nema smisla ulaziti u proučavanje tipova dokumenata, jer je izdavanjem HTML5 ovaj dizajn postao standard. Samo ga umetnite na početak dokumenta svaki put kada počnete kreirati izgled web stranice.
- početak dokumentaPrva oznaka koju vidimo nakon doctype je .
HTML oznaka je strukturna jedinica označavanja HTML dokumenta. HTML kod se sastoji od građevnih blokova koji se nazivaju tagovi. Svaka oznaka ima svoju funkciju, a učenje HTML jezika za označavanje je u konačnici učenje oznaka i njihovih svojstava u dokumentu.
Želio bih napomenuti da učenje HTML-a nije tako teško kao što se čini na prvi pogled. Učenje oznaka koje se koriste u označavanju dokumenata nije tako veliko opterećenje za mozak.
Dakle, označavanje dokumenta počinje oznakom i završava se završnom oznakom. Svaki tag koji sadrži druge oznake ili elemente mora biti zatvoren završnom oznakom. Na primjer, , , , itd.
Oznaka je obavezna jer sadrži cijelu strukturu dokumenta i omotač je za ostale elemente.
TagZatim vidimo oznaku koja sadrži druge elemente koji nam još nisu jasni. Sadrži druge elemente - to znači da su elementi ili oznake između početne i završne oznake konstrukcije:
sadržaj ili druge oznake
Svrha oznake je pohranjivanje meta informacija HTML dokumenta, odnosno informacija koje se ne prikazuju u samom dokumentu, ali su važne i u velikoj mjeri određuju kako će dokument izgledati i ponašati se.
Ova oznaka je obavezna u dokumentu.
Naslov je obavezna oznaka koja sadrži tekstualne meta informacije koje se pojavljuju u naslovu pretraživača ili kartice. Oznaka mora biti u . Takođe, sadržaj ove oznake koriste pretraživači za prikaz dokumenta u rezultatima pretrage.
Meta tagMeta tag je specijalizovana oznaka dizajnirana da pruži strukturirane podatke o stranici. Meta tagovi se najčešće koriste u . Meta oznake nisu potrebne u strukturi HTML dokumenta.
FaviconDokumentu prilaže datoteku sa slikom ikona ikona. Favicon je minijaturna ikona koja se prikazuje pored naslova dokumenta na kartici pretraživača. Favicon je grafička datoteka veličine 16 x 16 (ili 32 x 32) piksela, koja može imati različite formate, kao što su png, jpg, ico, gif. ico format se tradicionalno koristi. Animirani favikoni su gif datoteke koje sadrže animaciju. Možete vidjeti animirani favicon, na primjer, na VKontakteu, kada stigne nova poruka.
CSS stilovi dokumenataUključuje CSS fajl sa HTML stilom u dokument.
CSS- kaskadno HTML stilovi dokumenata. Svaka oznaka koja se nalazi u oznaci ima skup svojstava, kao što su boja, širina, visina, pozicija u odnosu na druge elemente. Sva ova svojstva su CSS stilovi koji se mogu izvesti u eksternu datoteku. Dizajn povezuje vanjske datoteke sa HTML dokumentom, uključujući CSS stilove.
Napomena: Svojstvo href konstrukcije specificira lokaciju eksterne datoteke. U našem primjeru, fajl style.css I favicon.ico, nalaze se u istoj fascikli kao i datoteka index.html. nema završnu oznaku.
TagOznaka sadrži kod ili vezu do javaScript datoteke i najčešće se koristi unutar oznake, iako Googleov alat za optimizaciju brzine stranice preporučuje korištenje ove oznake na kraju dokumenta, prije završne oznake.
U našem primjeru spojen je vanjski fajl script.js, koji se nalazi u istoj fascikli kao i glavna datoteka index.html.
Dakle, prijatelji, pogledali smo glavne elemente koji se najčešće koriste u tag-u. Pored ovih elemenata, postoji niz drugih koji su specifičniji i opcioni.
Tijelo aka tijeloOvdje počinju sve zabavne i vizualno opipljive stvari u HTML izgledu dokumenta.
Pređimo direktno na izgled vidljivog dijela stranice. Sve što napišemo i rasporedimo unutar oznake biće prikazano u pretraživaču. Hajde da otvorimo naš fajl index.html u pretraživaču kako bismo jasno vidjeli šta radimo u editoru.
Oznaka može sadržavati bilo koje HTML oznake potrebne za dizajn dokumenta i pružanje njegove funkcionalnosti (forme). Navest ću tabelu najčešće korištenih oznaka i ukratko opisati svaku od njih. Možete odmah pokrenuti primjere date u uređivaču.
Nismo uzeli u obzir sve oznake, a to u ovoj fazi nije potrebno. Glavna stvar je razumjeti osnovnu ideju HTML-a, naučiti kako koristiti gore navedene oznake, a zatim nastaviti dalje.
Imajte na umu da sva imena u uključenim datotekama moraju biti napisana latiničnim znakovima, bez razmaka.
Na primjer, nemojte:
Ovo je neophodno za veću kompatibilnost sadržaja stranice. Osim toga, standardi za pisanje HTML koda nalažu.
Dakle, sada znamo neke osnove HTML-a: kakvu strukturu treba da ima tipičan HTML dokument, znamo neke od najpopularnijih oznaka, vrijeme je da pređemo na najukusniji dio – naime, kolačiće.
Praktični zadatak o HTML izgleduAko još niste preuzeli arhivu sa primjerima, učinite to. Na primjer, možete pogledati datoteku example.html, koja je također bila u arhivi.
Ovim je završena lekcija o osnovama HTML-a, u sljedećoj lekciji “Osnove CSS-a” naučit ćemo kako upravljati stilovima elemenata dokumenta, upoznati kaskadne listove stilova, naučiti kako koristiti klase stilova i učiniti naš izgled lijepim i šarenim .
Vidimo se ponovo, prijatelji!
1.1. Na vašem lokalnom Xampp serveru, u fascikli htdocs, kreirajte test fasciklu pod nazivom test, sa fasciklama css, slikama i stranicama u njemu, kao i praznom glavnom stranicom index.html našeg test sajta. Zatim u folderu pages kreirajte praznu web stranicu page_1.html, au css folderu dvije prazne css datoteke: styles_1.css i styles_2.css. Ubuduće nemojte brisati test folder, u njemu ćemo izvoditi sve vježbe. U html dokumentima ne zaboravite navesti utf-8 kodiranje i naslov stranice "title". Da biste brzo pristupili glavnoj stranici, kreirajte marker u svom pretraživaču. Putanja adrese do stranice bi trebala izgledati kao http://localhost/test/index.html. Pokaži rješenje.
Rješenje problema br. 1.1
1.2. Ponovo kreirajte kod za web stranicu prikazanu na slici. Koristite interni stilski list, p i selektore elemenata span, css svojstva boje i širine. Postavite širinu pasusa na 300px. Koristite crvenu i plavu boju. Pokaži rješenje.
Uslov zadatka br. 1.2
CSS zadaci p( boja: crvena; širina: 300px; ) span( boja: plava)
Rješenje problema br. 1.2
1.3. Koristite uslov drugog zadatka, ali stavite stilski list u vanjsku datoteku styles_1.css . Za povezivanje eksternog stilskog lista koristite servisni element "link". Pokaži rješenje.
CSS zadaci
Tekst pasusa treba da bude crvenom bojom. Ali ne, jer... Sadržaj elementa "span" treba biti plave boje.
Rješenje problema br. 1.3
1.4. Koristite uslov trećeg zadatka, ali povežite eksterni stilski list pomoću svojstva @import, postavljajući pravilo u servisni element "style". Pokaži rješenje.
CSS zadaci /* Možete koristiti različite unose pravila */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url("http://localhost/test/css/styles_1.css");
Tekst pasusa treba da bude crvenom bojom. Ali ne, jer... Sadržaj elementa "span" treba biti plave boje.
Rješenje problema br. 1.4
1.5. Koristite uslov drugog problema, ali postavite pravilo pasusa u vanjsku datoteku styles_1.css i pravilo za element "span" u vanjski fajl styles_2.css . Povežite jednu od ovih datoteka pomoću elementa usluge "link", a drugu pomoću svojstva @import, postavljajući pravilo u element usluge "style". U sva četiri zadatka rezultat bi trebao biti isti! Pokaži rješenje.
CSS zadaci @import url("http://localhost/test/css/styles_1.css");
Tekst pasusa treba da bude crvenom bojom. Ali ne, jer... Sadržaj elementa "span" treba biti plave boje.
Rješenje problema br. 1.5
1.6. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Koristite ID, klasu i selektore atributa. Pokaži rješenje.
CSS zadaci
Plavi "span".
Zeleni "span".
Šifra stranice za zadatak br. 1.6
Potreban izgled stranice u zadatku br. 1.6
#p_1( boja: crvena; širina: 300px; ) .s_1( boja: plava; ) span( boja: zelena; )
Rješenje problema br. 1.6
1.7. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Dozvoljeno je koristiti samo kontekstualne, podređene i susjedne selektore u CSS pravilima. Pokaži rješenje.
CSS izaziva narandžasti "em"
Prvi crveni red pasusa.
Plavi "span".
Šifra stranice za zadatak br. 1.7
Potreban izgled stranice u zadatku br. 1.7
Rješenje problema br. 1.7
1.8. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Koristite selektore pseudoklasa i pseudoelemenata :hover , :visited , ::first-letter . Za paragraf koristite običan selektor elemenata. Pokaži rješenje.
CSS izazovi Kada pređete iznad mene, postajem narandžast.
Prvi crveni red pasusa.
Već su me posjetili.
Šifra stranice za zadatak br. 1.8
Potreban izgled stranice u zadatku br. 1.8
P( boja: crvena; širina: 300px; ) em:hover( boja: narančasta; ) p::first-letter( boja: plava; ) a:posjećeno( boja: zelena; )
Rješenje problema br. 1.8
1.9. Koji selektor ima više specifičnosti: p em(...) ili p.class(...), #m_d(...) ili em.m_cl(...), div p#my_id span(... ) ili div span#s_id(...), div>div.my_class p.red_color span:hover(...) ili div p+div p.green_color span(...). Pokaži rješenje.
Određujemo specifičnosti i upoređujemo. p em(...) em.m_cl(...), jer (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), jer (0,4,4)>(0,2,5).
Rješenje problema br. 1.9
§2. CSS svojstva za tekst, font, liste, tabele i forme2.1. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Postavite širinu (širinu) pasusa na 500px, pozadinu (boja pozadine), respektivno, postavite na žutu i ljubičastu (ljubičastu), udaljenost između riječi 3px i 12px, udaljenost između pojedinačnih slova - 1px i 2px, visinu linije - 1,1em i 1,6em , uvlačenje prvog reda - 1% i 3% . U drugom pasusu tekst treba poravnati udesno. Ne zaboravite precrtati (podvući) odgovarajuće linije. Uporedite rezultate formatiranja oba pasusa. Pokaži rješenje.
CSS zadaci
Prva rečenica paragrafa.
Prva rečenica paragrafa. Druga duža rečenica paragrafa. Treća i poslednja rečenica paragrafa.
Šifra stranice za zadatak br. 2.1
Potreban izgled stranice u zadatku br. 2.1
P_1( širina: 500px; boja pozadine: žuta; razmak između riječi: 3px; razmak između slova: 1px; visina linije: 1.1em; uvlaka teksta: 1%; ) #p_2( dekoracija teksta: kroz liniju) .p_3( širina: 500px; boja pozadine: ljubičasta; razmak između riječi: 12px; razmak između slova: 2px; visina linije: 1,6em; uvlaka teksta: 3%; poravnanje teksta: desno; ) #p_4( tekst -dekoracija: podvučena;)
Rješenje problema br. 2.1
2.2. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Postavite širinu (širinu) pasusa na 500px, pozadinu (boja pozadine), respektivno, postavite na žutu i ljubičastu (ljubičastu). Za prvi pasus koristite font Arial, a za drugi - Times New Roman. Postavite veličinu fonta u oba pasusa na 1em. Koristite font-variant , font-weight , font-style svojstva gdje je potrebno. Uporedite rezultat oblikovanja teksta sa rezultatom oblikovanja u zadatku 2.1. Pokaži rješenje.
CSS zadaci
Prva rečenica paragrafa. Druga duža rečenica paragrafa. Treća i poslednja rečenica paragrafa.
Prva rečenica paragrafa. Druga duža rečenica paragrafa. Treća i poslednja rečenica paragrafa.
Šifra stranice za zadatak br. 2.2
Potreban izgled stranice u zadatku br. 2.2
P_1( širina: 500px; boja pozadine: žuta; porodica fontova: arial; veličina fonta: 1em; ) #p_2( varijanta fonta: mala slova; ) .p_3( širina: 500 piksela; boja pozadine: ljubičasta; font-family: "times new novel"; veličina fonta: 1em; font-weight: bold; ) #p_4( font-style: italic; )
Rješenje problema br. 2.2
2.3. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Postavite širinu (širinu) lista na 500px, pozadinu (boja pozadine), respektivno, postavite na žutu i ljubičastu (ljubičastu). Koristite svojstva list-style-type i list-style-position, gdje je to potrebno. Uporedite rezultate formatiranja obje liste. Pokaži rješenje.
CSS zadaci
- Koristimo tip decimalnog markera.
Šifra stranice za zadatak br. 2.3
Potreban izgled stranice u zadatku br. 2.3
Lista_1 ( širina: 500px; boja pozadine: žuta; tip-stil liste: decimalni; pozicija-stil liste: izvan; ) .list_2( širina: 500px; boja pozadine: ljubičasta; tip stila liste: kvadrat; list-style-position: inside; )
Rješenje problema br. 2.3
2.4. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Koristite svojstva caption-side, border-collapse border-spacing, empty-cells. Uporedite rezultat formatiranja obje tabele. Pokaži rješenje.
CSS zadaci
| Ćelija 1.1 | Ćelija 1.2 |
| Ćelija 2.1 | Ćelija 2.2 |
| Ćelija 1.1 | Ćelija 1.2 |
| Ćelija 2.2 |
Šifra stranice za zadatak br. 2.4
Potreban izgled stranice u zadatku br. 2.4
Tablica_1( strana naslova: vrh; granica-kolaps: kolaps; ) .table_2( strana natpisa: dno; granica-kolaps: odvojeno; razmak obruba: 5px; prazne ćelije: sakriti; )
Rješenje problema br. 2.4
§3. Postavljanje veličina, ivica, paddinga i margina elemenata3.1. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Postavite širinu prvog pasusa na 400px, drugog na 300px. Postavite visinu prvog pasusa na 10vh, drugog na 200px. U drugom pasusu postavite minimalno ograničenje širine na 400px i maksimalno ograničenje visine na 100px. Koristite svojstva width , height , min-width , max-height . Zabilježite krajnje rezultate širine i veličine drugog pasusa zbog ograničenja koja se primjenjuju. Pokaži rješenje.
CSS zadaci
Širina pasusa je 400px, visina je 10% visine oblasti za pregled prozora pretraživača.
Širina pasusa će biti 400px, jer... širina je manja od min-width, a visina je 100px, jer visina prelazi maksimalnu visinu.
Šifra stranice za zadatak br. 3.1
Potreban izgled stranice u zadatku br. 3.1
P_1(boja pozadine: žuta; širina: 400px; visina: 10vh; ) .p_2(boja pozadine: ljubičasta; minimalna širina: 400px; maksimalna visina: 100px; širina: 300px; visina: 200px; )
Rješenje problema br. 3.1
3.2. U uslovima zadatka 3.1, prikazan je kod HTML stranice, a ispod je izgled stranice kada se prikaže od strane pretraživača. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Iskoristite rezultat Problema 3.1 dodavanjem dodatnih svojstava u stilski list koji postavljaju odgovarajuće granice pasusa: granica , ivica-vrh , ivica-dno . Postavite širinu svih ivica na 4px. Pokaži rješenje.
Potreban izgled stranice u zadatku br. 3.2
P_1(boja pozadine: žuta; širina: 400px; visina: 10vh; ivica: puna crvena 4px; ivica-vrh: tačkasta plava; ivica-donja: isprekidana plava; ) .p_2(boja pozadine: ljubičasta; min-širina: 400px; maksimalna visina: 100px; širina: 300px; visina: 200px; ivica: puno zelena 4px; )
Rješenje problema br. 3.2
3.3. U uslovima zadatka 3.1, prikazan je kod HTML stranice, a ispod je izgled stranice kada se prikaže od strane pretraživača. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Iskoristite rezultate problema 3.1 i 3.2 dodavanjem dodatnih svojstava u stilski list koji postavljaju zaokruživanje odgovarajućih uglova prvog pasusa i vanjskih granica drugog pasusa: border-radius , border-bottom-right-radius , granica-dolje-lijevo-radijus, obris, obris-offset. Postavite zaokruživanje ivice na 1em i donje uglove na 2em. Postavite udaljenost između unutrašnjih i vanjskih granica na 2px. Postavite širinu vanjske ivice na 4px. Pokaži rješenje.
Potreban izgled stranice u zadatku br. 3.3
P_1(boja pozadine: žuta; širina: 400px; visina: 10vh; granica: puna crvena 4px; ivica-vrh: tačkasta plava; granica-donja: isprekidana plava; radijus ivice: 1em; radijus obruba dolje desno: 2em; border-bottom-left-radius: 2em; ) .p_2( boja pozadine: ljubičasta; min-širina: 400px; maksimalna visina: 100px; širina: 300px; visina: 200px; ivica: čvrsta zelena 4px; obris: puna plava 4px; outline-offset: 2px; )
Rješenje problema br. 3.3
3.4. U uslovima zadatka 3.1, prikazan je kod HTML stranice, a ispod je izgled stranice kada se prikaže od strane pretraživača. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Iskoristite rezultate zadataka 3.1, 3.2 i 3.3 dodavanjem dodatnih svojstava u stilski list koji postavljaju unutrašnje i vanjske uvlake pasusa: padding, padding-left, margin, margin-top. Postavite padding u oba pasusa na 0,5em, a zatim redefinirajte njihov padding na 0,8em. Postavite marginu na 30px, ali u drugom pasusu redefinirajte gornju marginu na 50px. Uporedite rezultate sva četiri problema. Pokaži rješenje.
Potreban izgled stranice u zadatku br. 3.4
P_1(boja pozadine: žuta; širina: 400px; visina: 10vh; granica: puna crvena 4px; ivica-vrh: tačkasta plava; granica-donja: isprekidana plava; radijus ivice: 1em; radijus obruba dolje desno: 2em; border-bottom-left-radius: 2em; padding: 0.5em; padding-left: 0.8em; margina: 30px; ) .p_2( boja pozadine: ljubičasta; min-width: 400px; maksimalna visina: 100px; širina: 300px; visina: 200px; granica: puna zelena 4px; obris: puna plava 4px; outline-offset: 2px; padding: 0,5em; padding-left: 0,8em; margina: 30px; margin-top: 60px; )
Rješenje problema br. 3.4
§4. Postavljanje boje i pozadine, korištenjem animacije4.1. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Kopirajte sliku aktovke u mapu slika, koja se nalazi u probnoj mapi koju smo ranije kreirali na lokalnom serveru (ako ste je izbrisali, pogledajte stanje zadatka br. 1.1 na početku knjige problema i kreirajte sve opet). Tekst prvog pasusa treba da bude crven, pozadina treba da bude žuta, a širina pasusa treba da bude 300px. Širina drugog pasusa treba da bude 300px, postavite pozadinu na ljubičastu. Takođe dodajte pozadinsku sliku, koja se ne smije ponavljati, dimenzije trebaju biti 20% širine i 40% visine pasusa, početna pozicija treba biti određena koordinatama x =15px i y =15px. Odaberite samo područje sadržaja pasusa za pozadinu. Pokaži rješenje.
CSS zadaci
Tekst ovog pasusa treba da bude crven, a pozadina žuta. Širina pasusa treba da bude 300px.
Širina pasusa treba da bude 300px, a pozadina ljubičasta. Slika ne treba da se ponavlja, dimenzije treba da budu 20% širine i 40% visine pasusa. Početnu poziciju treba odrediti koordinatama x=15px i y=15px. Odaberite samo područje sadržaja pasusa za pozadinu.
Šifra stranice za zadatak br. 4.1
Potreban izgled stranice u zadatku br. 4.1
Background_1( boja: crvena; boja pozadine: žuta; ) .background_2( boja pozadine: ljubičasta; background-image: url("http://localhost/test/images/cabinet.png"); background-repeat: ne -repeat; background-position: 15px 15px; background-size: 20% 40%; background-clip: content-box; ) .border_1( padding: 15px; širina: 300px; granica: puna 2px zelena; )
Rješenje problema br. 4.1
4.2. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Tekst prvog pasusa treba biti crn, a pozadina linearni gradijent od crvene do bijele. Širina pasusa treba da bude 300px, a visina 150px. Širina drugog pasusa treba da bude 300px, a visina 150px. Pozadina bi trebala biti radijalni gradijent od zelene do bijele. Elipsa gradijenta treba da ima poluprečnike od 250px i 280px, a centar treba da se nalazi u tački sa koordinatama x =100px i y =180px. Pokaži rješenje.
CSS zadaci
Tekst ovog pasusa bi trebao biti crn, a pozadina bi trebala biti linearni gradijent od crvene do bijele. Širina pasusa treba da bude 300px, a visina 150px.
Širina pasusa treba da bude 300px, a visina 150px. Pozadina bi trebala biti radijalni gradijent od zelene do bijele. Elipsa gradijenta treba da ima radijuse od 250px i 280px, a centar treba da se nalazi u tački sa koordinatama x=100px i y=180px.
Šifra stranice za zadatak br. 4.2
Potreban izgled stranice u zadatku br. 4.2
Background_1( boja: crna; background-image: linear-gradient(90deg, #ff0000, #ffffff); ) .background_2( background: radial-gradient(250px 280px na 100px 180px, #00ff00, #ffffff); ) .border_1( padding: 15px; širina: 300px; visina: 150px; granica: puna 3px plava; )
Rješenje problema br. 4.2
4.3. Ispod je kod za html stranicu, kao i kod za eksterni stilski list styles_1.css. Upišite ih u Notepad++ i eksperimentirajte promjenom vrijednosti svojstava animacije.
CSS zadaci
HTML kod stranice za zadatak br. 4.3
Pozadina_1( padding: 0px; širina: 450px; visina: 100px; granica: puna 3px crvena; naziv-animacije: primjer_1; kašnjenje animacije: 1s; trajanje-animacije: 4s; brojanje-iteracije animacije: beskonačno; smjer animacije: reverse; funkcija-vremenska-animacija: jednostavnost-u; animacija-fill-mode: unatrag; ) @keyframes example_1( 0%( pozadina: #ff0000; visina: 0px; ) 100% (pozadina: #0000ff; visina: 200px; ) )
Kod eksternog stilskog lista za zadatak br. 4.3
4.4. Ispod je kod za html stranicu, kao i kod za eksterni stilski list styles_2.css. Upišite ih u Notepad++ i eksperimentirajte promjenom vrijednosti tranzitnih svojstava.
Kreiranje efekata tranzicije
Kod HTML stranice za zadatak br. 4.4
Background_1( padding: 10px; širina: 100px; visina: 100px; granica: čvrsta 3px plava; boja pozadine: #ff0000; svojstva prijelaza: širina, boja pozadine; kašnjenje tranzicije: 0,2 s; trajanje prijelaza: 2 s; prijelaz-tajming-funkcija: jednostavnost; ) p:hover(kursor: pokazivač; boja pozadine: #0000ff; širina: 450px; )
Kod eksternog stilskog lista za zadatak br. 4.4
§5. Prikaz elemenata u dokumentu5.1. Ispod je kod za html stranicu, kao i kod za eksterni stilski list styles_2.css. Upišite ih u Notepad++. Obratite pažnju na to kako se paragrafi ponašaju dok skrolujete po stranici i kako se izgled elementa "span" menja kada pređete mišem preko njega i, kao rezultat, menja se vrednost svojstva prikaza primenjenog na njega.
CSS zadaci
Promjena prikaza
pozicija: fiksna;
pozicija: apsolutna;
Kod HTML stranice za zadatak br. 5.1
Div_0( padding: 10px; širina: 200px; visina: 200px; granica: čvrsta 3px narandžasta; ) span:hover( kursor: pokazivač; display: block; ) .div_1( padding: 10px; širina: 200px; visina: 600px; granica : čvrsta 3px narandžasta; pozadina: linear-gradient(180deg, #0000ff, #ffffff); pozicija: fiksna; vrh: 250px; ) .div_2( padding: 10px; širina: 200px; visina: 100px; granica: puna 3px crvena; pozadina: linear-gradient(90deg, #0000ff, #ffffff); pozicija: apsolutna; vrh: 1100px; lijevo: 0px; )
Kod eksternog stilskog lista za zadatak br. 5.1
5.2. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Potrebne karakteristike elemenata su naznačene na samim crtežima. Pokaži rješenje.
CSS zadaci Za glavni div, fiksno pozicioniranje je postavljeno, gornji pomak je 30px, lijevi pomak je 35px, širina diva je 300px, visina diva je 400px, interni padding je 15px.
div_2 Za drugi div, širina je 70px, visina 50px, gradijent (35px 35px na 10px 10px, #00ffff, #ffffff), padding je 5px, širina obruba je 2px. Pluta na lijevoj strani.
div_3 Za treći div, širina je 70px, visina je 50px, gradijent (45deg, #0000ff, #ffffff), padding je 5px, širina granice je 2px. Pluta na desnoj strani. Kada zadržite kursor, mijenja svoju transparentnost u 0.3.
Šifra stranice za zadatak br. 5.2
Potreban izgled stranice u zadatku br. 5.2
Div_1( padding: 15px; širina: 300px; visina: 400px; granica: isprekidana 5px #00ff00; pozicija: fiksna; vrh: 30px; lijevo: 35px; ) .div_3:hover( kursor: pokazivač; neprozirnost: 0,3; ) .div_2 ( padding: 5px; širina: 70px; visina: 50px; granica: čvrsta 2px narandžasta; pozadina: radial-gradient(35px 35px na 10px 10px, #00ffff, #ffffff); float: lijevo; ) .div_3( padding: 5px; širina: 70px; visina: 50px; ivica: tačkasto 2px crvena; pozadina: linear-gradient(45deg, #0000ff, #ffffff); float: desno; )
Rješenje problema br. 5.2
5.3. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Potrebne karakteristike elemenata su naznačene na samim crtežima. Pokaži rješenje.
CSS zadaci Za glavni div, postavljeno je apsolutno pozicioniranje, gornji pomak je 30px, lijevi pomak je 35px, širina diva je 500px, visina diva je 200px, interni padding je 15px.
Za drugi div, širina je 200px, visina je 100px, padding je 5px, širina obruba je 2px Pluta na lijevoj strani overflow: scroll Za treći div, širina je 200px, visina je 100px, padding je 5px, širina granice je 2px. Pluta na desnoj strani. preliv: auto
Šifra stranice za zadatak br. 5.3
Potreban izgled stranice u zadatku br. 5.3
Div_1( padding: 10px; širina: 500px; visina: 200px; granica: isprekidana 5px #0000ff; boja pozadine: žuta; pozicija: apsolutna; vrh: 30px; lijevo: 35px; ) .div_2( padding: 5px; širina: 200px ; visina: 100px; granica: puna 2px plava; float: lijevo; overflow: pomicanje; ) .div_3( padding: 5px; širina: 200px; visina: 100px; ivica: točkasto 2px plava; float: desno; overflow: auto; )
Rješenje problema br. 5.3
§6. @-pravila. Umetanje sadržaja. Odštampajte dokument.6.1. Ispod je kod html stranice, kao i izgled stranice kada se prikaže u pretraživaču. Na stranicu je povezan vanjski stilski list, čiji kod treba vratiti. Da biste kreirali brojače za tijelo dokumenta i element h2, koristite svojstvo poništavanja brojača i ubacite vrijednosti brojača koristeći svojstva sadržaja i brojača. Pokaži rješenje.
CSS izazovi Uvod u HTML Šta je HTML? Prikaz web dokumenta u pretraživaču. Koncept HTML oznake i njena sintaksa.
Oblikovanje teksta Blok i inline elementi. Rastavljanje teksta na pasuse. Primjena zaglavlja.
Šifra stranice za zadatak br. 6.1
Potreban izgled stranice u zadatku br. 6.1
Body( poništavanje brojača: parag_1; /* Kreiraj brojač za tijelo dokumenta */ ) h2( poništavanje brojača: parag_2; /* Kreiraj brojač za zaglavlje "h2" */ ) /* Broji sve "h2 " u elementu "body" */ /* Ubacite sadržaj ispred svakog "h2": red+trenutna vrijednost brojača+red */ h2:before( kontrainkrement: parag_1 1; sadržaj: "§" brojač(parag_1) ". "; ) /* Broji u elementu "h2" sve "h3" */ /* Ubaci sadržaj prije svakog "h3": trenutna vrijednost brojača parag_1+line+trenutna vrijednost brojača parag_2+line */ h3:before( inkrement brojača: parag_2 1; sadržaj: counter( parag_1) "." counter(parag_2) "."; )
Rješenje problema br. 6.1
§7. Praktičan izgled elemenata web stranice u HTML i CSS7.1.1 Preuzmite tutorial kod za adaptivni okvir stranice, koristite komentare da ga proučite, a zatim ga sami dizajnirajte.
7.1.2 Preuzmite tutorial kod za adaptivni okvir stranice, proučite ga koristeći komentare, a zatim ga sami dizajnirajte. Uporedite sa prvom opcijom.
7.1.3 Preuzmite tutorial kod za adaptivni okvir stranice, proučite ga koristeći komentare, a zatim ga sami dizajnirajte. Uporedite sa prethodnim opcijama.
7.2.1 Vodič za preuzimanje pokazuje vam kako da kreirate bočnu navigaciju stranice za pomeranje gore ili dole. Nema komentara, ali nema puno koda, tako da razumijevanje neće biti previše teško. Proučite primjer i onda ga napravite svojim.
7.2.2 Koristeći kod iz prethodnog primjera, kreirajte dugme "Nazad na vrh" na dnu stranice. Uklonite bočnu navigaciju. Ako niste bili u mogućnosti da dovršite zadatak, pogledajte rješenje, a zatim sami upišite kod.
7.2.3 Vodič za preuzimanje pokazuje kako kreirati dugme "Nazad na vrh" sa strane stranice koje se pojavljuje nakon pomicanja stranice za određeni broj, na primjer, piksela. Malo je komentara, ali nema puno koda, tako da razumijevanje neće biti teško. Proučite primjer i onda ga napravite svojim.
7.3.1 Kreirajte horizontalni meni prikazan na slici. Koristite listu da to uradite, postavljajući veze u stavke liste. Da bi stavke izgledale kao linija, pretvorite ih u inline elemente. Kada pređete mišem preko stavki menija, one bi trebale promijeniti boju u crnu. Možete preuzeti rješenje. Pretvorite meni u vertikalni. Da biste uklonili brojeve stavki, koristite odgovarajuće svojstvo za oznake liste (pogledajte CSS referencu).
Potreban izgled menija zadataka br. 7.3.1
7.3.2 Proučite sljedeći kod padajućeg menija, a zatim ga sami unesite.
7.3.3 Proučite sljedeći vertikalni padajući kod višeslojnog menija, a zatim ga unesite sami.
7.3.4 Proučite sljedeći kod za horizontalni glatki padajući meni, a zatim ga sami otkucajte.
Izrada obrazovne web stranice br. 1
7.4.1 Prvo pregledajte stranice obrazovne stranice, preuzmite i pažljivo proučite njen kod, a zatim sami dizajnirajte stranicu (bez komentara, samo kod).
Izgled obrazovne web stranice br. 2
7.5.1 Da biste se dodatno uvježbali u izgledu web stranice, preuzmite još jedan primjer za obuku web stranice i pomoću komentara proučite njen kod, a zatim, koristeći gotov izgled i grafičke predloške, sami dizajnirajte stranicu.
Pokušajte sami kreirati stilski list za visoke rezolucije. Ako radite na laptopu, onda da biste simulirali veće rezolucije, promijenite rezolucije u medijskim upitima sa 1366px, na primjer, na 1266px, tako da stilski list za velike rezolucije ekrana radi. Kada kreirate stilski list, koristite faktor veličine 1,3. Zatim pogledajte rezultat prikaza u pretraživaču i prilagodite.
Veličine slika mogu se mijenjati ili u grafičkom uređivaču ili rastegnuti pomoću odgovarajućeg CSS svojstva (pogledajte primjer i referencu).
Samo za pretplatnike
Samo za pretplatnike
Samo za pretplatnike
Samo za pretplatnike
Samo za pretplatnike
Samo za pretplatnike
Metodička izrada praktičnih radova iz računarstva na teme "HTML Markup Language" i "Savremene web tehnologije" (za učenike srednjih škola).
Prilikom izvođenja nastave pomoću ovih metodoloških razvoja, za kreiranje HTML i CSS datoteka, preporučuje se korištenje običnog uređivača teksta koji podržava isticanje sintakse za HTML i CSS jezike, a također poželjno uključuje mogućnost rada s više datoteka u višestraničnom načinu rada. .
Na primjer, Notepad++ (notepad-plus-plus.org) je pogodan za Windows. U uređivaču teksta Notepad++, da biste premotali dugačke redove, potrebno je da iz menija izaberete View -> Line Break. Notepad2 (flos-freeware.ch/notepad2.html) je takođe veoma dobar uređivač teksta. Međutim, ne podržava rad na više stranica. Postavljanje prijeloma reda u njemu se vrši pomoću naredbe View -> Word Wrap.
1. HTML dokument. Paragrafi, prijelomi reda, poravnanje1 struktura HTML dokumentaIzvorni kod HTML dokumenta sastoji se od oznaka i sadržaja.
Oznake mogu imati različite atribute sa određenim svojstvima. U starijim verzijama HTML jezika, atributi su korišteni za dizajniranje sadržaja: postavljanje veličine i boje fonta, poravnanje teksta, postavljanje uvlaka i još mnogo toga. Danas se sadržaj HTML dokumenta obično formatira pomoću CSS jezika.
Svaki HTML dokument uvijek uključuje html, head i body kontejnere, koji su ugniježđeni jedan unutar drugog na sljedeći način:
Zadatak 1. Kreirajte fajl i dajte mu strukturu prikazanu iznad. Sačuvaj.
Kontejner glave obično sadrži kontejner naslova, čiji se sadržaj prikazuje u naslovu prozora dokumenta.
Zadatak 2. Dodajte spremnik naslova dokumentu:
RAČUNAR - elektronski računar
Sačuvajte datoteku i otvorite je u svom pretraživaču. Pronađite sadržaj naslova koji ste unijeli.
Sadržaj tijela se prikazuje u prozoru pretraživača.
Oznaka kontejnera se koristi za označavanje pasusa. Jedna oznaka b omogućava vam da pređete na novi red bez kreiranja novog pasusa, tj. stvara prelom reda.
Zadatak 3. Dodajte sljedeći sadržaj u tijelo spremnika:
Pojava personalnih računara ranih sedamdesetih (paralelno sa postepenom evolucijom velikih računara) danas se smatra revolucionarnim udarom. Razmjere njenog utjecaja na ljudsko društvo upoređuju se s posljedicama pronalaska tiska.
U svijetu već postoje milioni i milijarde kompjutera.
Njihov broj stalno raste!
Sačuvaj. Osvježite dokument u vašem pretraživaču. Zabilježite koliko pasusa vidite gdje je prijelom reda.
2 Poravnanje pasusa. stari stilPoravnanje pasusa je određeno vrijednostima lijevo (lijevo), desno (desno), centar (centar) i justify (justificirano). Ove vrijednosti se mogu dodijeliti svojstvu poravnanja, koje vrijedi za mnoge oznake.
Tako se, na primjer, poravnanje pasusa po sredini može postaviti ovako:
Zadatak 4. Za prethodno kreirane pasuse postavite poravnanje tako da bude poravnato (za prvi pasus) i desno (za drugi).
