U prosloj lekciji napravili smo prve korake u CSS-u.

Sada ćemo se pozabaviti sredjivanjem teksta na našem sajtu.

Sredjivanje teksta pomoću CSS-a

Pre svega odredite font koji koristi ceo vaš sajt, a to ćemo odraditi kada prekopiramo sledeci atribut u body deo našeg css fajla:

font-family:  Arial, Verdana, Helvetica;

Ovde nam je sve jasno, ali jedna napomena postoji. Trudite se da za ovaj atribut koristite fontove koji su najučestaliji, iz razloga jer da bi korisnici sajta videli Vaš sadržaj onakvim kakav jeste moraju da imaju instaliran ovaj font koji ste Vi naveli, pa je zato upotreba najčešćih fontova pravo rešenje. Ukoliko recimo nemaju Arial, onda će im se otvoriti u Verdana fontu i tako redom. A ukoliko ne poseduju ni jedan od onih koje ste Vi naveli otvoriće se u onom koji je podešen kao podrazumevajući.

Idemo dalje i naša sledeća instrukcija će uticati na izgled h2 naslova u header-u:

#header h2 { margin: 0; padding: 0 20px; font-size: 36px; color: #383838; }

Font-size govori kolika je veličina slova, a sve ostalo nam je jasno.

Nova instrukcija će uticati na izgled h4 naslova u header-u:

#header h4 { margin: 0; padding: 0 20px; font-size: 20px; font-style: italic;  color: #383838; }

Font-style govori koji je stil fonta i u našem slučaju slova su iskošena.

Sad idemo na reči unutar navigation diva:

a.nav { margin: 0; padding: 10px; font-size: 18px; font-weight: bold; line-height: 20px; color: # 101475; text-decoration: none;}

Font-weight govori kolik aje debljina fonta i nama je bold, tj. tekst je podebljan.

Text-decoration:none nam govori da nemamo dekoraciju na tekstu. Po pravilu linkovi imaju underline, a upravo je ova naša akcija pomogla da nam tekstovi Pocetna, Kontkat i Linkovanje ne budu podvučeni.

Još jednu stvar bih napomenuo dok smo još kod navigacije, a to je hover pseudo-klasa. Evo i primera pa nakon toga objašnjenja:

a.nav:hover { margin: 0; padding: 7px; font-size: 18px; font-weight: bold; color: #D0EDF7; background-color: #101475; text-decoration: none;}

Svi atributi su jasni, a uloga ovih atributa je da definiše izgled linkova kada se preko njih predje mišem.

Sada se vraćamo na HTML i naš index.html dokument. I sada unutar ovog dokumenta prekopirajte sadržaj ispod (kopiramo samo u content deo index.html dokumenta a ne u sve html dokumente):

<h1>Ovo je naslov stranice index.html</h1>

<p> Lorem Ipsum je jednostavno model teksta koji se koristi u stamparskoj i slovoslagackoj industriji. Lorem ipsum je bio standard za model teksta jos od 1500. godine, kada je nepoznati stampar uzeo kutiju sa slovima i slozio ih kako bi napravio uzorak knjige. Ne samo sto je ovaj model opstao pet vekova ..</p>

<img src=“ http://www.webtechprofessional.com/images/CSS_and_HTML_urdu_hindi.png“ alt=“css“ />

Verovatno se pitate zašto sam koristio baš ovaj tekst u paragrafu. Dizajneri mahom kada nemaju sadržaj za nešto a trebaju da ispune odredjeno polje koriste tekstove sa sajta Lorem Ipsum, pa sam i ja tako koristio te tekstove kako bi nam stranica dobila neki izgled ka kome težimo.

HTML dokument – ubacivanje slika

U ovom slučaju iskoristio sam priliku da Vam pokazem kako se ubacuju slike.

Img tag je ujedno i otvarajući i zatvarajući kao što vidite u našem primeru.

Unutar njega imamo src koji govori koji je link ka slici i isto se ponaša kao i href u a tagu, dok alt tag predstavlja tekst koji će biti prikazan ukoliko slika iz nekog razloga ne može da se prikaže.

Kao i bilo koji HTML element i sliku možemo da uredjujemo u CSS-u. Pa kao primer u style.css fajlu kopiramo sledeće:

#content img {margin: 15px;}

Toliko o slikama, a kako bi nam paragraf i H1 elementi lepše izgledali možemo ih urediti instrukcijama u CSS fajlu:

#content p { margin: 12px; padding: 0; font-size: 16px; color: #383838; text-align: justify; }

#content h1 { margin: 0; padding: 12px; font-size: 30px; color: #383838; text-align: center;}

Ovo bi bilo sve što se tiče lekcija o HTML i CSS-u, a vama ostavljam da samostalno uredite Kontakt i Linkovanje stranice. Nakon svega što smo radili naš sajt trebalo bi da izgleda ovako:

izgled posle svih promena

Sada ste napravili osnovu i na njoj možete graditi svoja nova znanja.

Napomena: Na bilo kom sajtu kada idete desni klik na mišu i otvorite inspect element (ili koristite prečicu na tastaturi Ctrl+Shift+I) možete videti elemente i styles, tako da Vam i to može biti od koristi u sticanju novih znanja.

Da rezimiramo:

U ovoj lekciji načili smo kako da sredimo tekst i kako dodajemo slike na sajt.