HTML/CSS za početnike #8 - Početna strana

     U svim prethodnim lekcijama radili smo samo sadržaj koji se odnosi na sve stranice sajta. U ovoj lekciji krenućemo sa izradom sadržaja koji je specifičan za određenu stranicu. U prethodnoj lekciji i par lekcija pre toga bavili smo se isključivo CSS-om. U ovoj lekciji vratićemo se malo i na HTML.
     Kao što naslov lekcije kaže u ovoj lekciji odradićemo polčetnu stranu. Početan strana može da ima različit sadržaj, na primer ako je u pitanju blog na početnoj strani su najčešće skraćene verzije postova, ako je u pitanju web prodavnica na početnoj strani najčešće budu akcije, sniženja... Pošto mi radimo sajt za svrhe učenja i sam sadržaj nam nije toliko bitan, stavićemo na početnoj strani neku poruku dobrodošlice.

     Otvorite index.html stranu i u njoj pronađite sekciju koja odgovara sadržaju stranice. To je deo unutar <div id="content"> ... </div> tagova. Unutar ovih tagova unesite sledeći kod:

<h1>Dobrodošli na moj prvi sajt</h1>
<img src="http://www.blacknonbelieversofdetroit.org/wp-content/uploads/2013/10/iWelcome1.jpg" alt="welcome" width="580" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio et est tincidunt convallis. Aliquam sagittis vulputate ligula, eget gravida sem feugiat ut. Curabitur ac augue lacus. Nullam mattis tristique risus eget eleifend. Sed vel arcu vulputate, cursus lacus mollis, ultricies magna. Ut lectus sapien, viverra id semper vitae, pellentesque in tortor. Vestibulum vel nisl egestas, porttitor justo et, imperdiet sapien. Nunc non mi mauris. Nullam auctor est leo, in consequat elit fermentum quis. Praesent magna magna, elementum at nisi id, commodo mollis tellus. Aliquam molestie neque nisi, vitae congue libero blandit nec. Integer nec enim sit amet velit malesuada dictum. Fusce tortor velit, pulvinar fermentum ipsum id, tincidunt mollis orci. Donec nec pharetra lacus. Quisque scelerisque justo nec felis fringilla, sit amet lobortis nulla rutrum.
</p>

     Prvi element je <h1> element koji je već poznat iz prethodnih lekcija.
     Drugi element je <img> element koji  prvi put srećemo i koji predstavlja element pomoću kojeg se ubacuju slike. Img tag je ujedno otvarajući i zatvarajući tag (isto kao i link tag koji smo koristili za povezivanje HTML i CSS dokumenta), i on mora da sadrži neke obavezne atribute. Obavezni atribut src predstavlja link ka slici, kao i "href" atribut kod linkova može da vodi ka nekoj slici na sajtu ili može da vodi ka slici sa drugog sajta kao kod mog primera. Drugi obavezan atribut je alt koji predstavlja alternativni tekst koji se prikazuje ukoliko slika ne može biti prikazana iz bilo kog razloga. Napomenuo bi da img element može da radi bez alt atributa ali će html validator prijavljivati grešku. Proizvoljni atributi su height i width koji predstavljaju visinu i širinu slike. Na mom primeru podesio sam samo širinu na 580 (što iznosi 580 piksela) pošto nam je širina "content" elementa 600 piksela pa da ima malo prostora sa strane. Height atribut nisam podesio pa je visina slike u ovom slučaju automatski podešena tako da se ne narušava razmera slike (odnos širine i visine). Kao proizvoljni atributi kao i kod svih drugih elemenata mogu da se koriste i id i class atributi.
     Treći element je paragraf koji je ispunjen probnim tekstom koji sam generisao na sajtu lipsum.com. Ovaj probni tekst koristi se još od nastanka štamparije, a u novije vreme preuzeli su ga dizajneri. Postoje zanimljive alternative kao što su slipsum.com ili fucklorem.com.
     Sada pošto smo završili sa HTML-om da pređemo odmah na CSS. otvorite vaš CSS dokument i unesite prvo instrukciju za <h1>:

#content h1 {
margin: 0; padding: 10px;
font-size: 36px;
font-weight: bold;
line-height: 40px;
color: #222222;
text-align: center;
}

     Kod ove instrukcije je već sve poznato iz prethodnih lekcija pa ćemo preći odmah na sledeću instrukciju:

#content img {
margin: 10px;
}

     Kao što vidite kod slike smo samo podesili margine da bi bila na sredini i da bi bila malo odvojena od naslova i paragrafa. Sada za paragraf unesite sledeću instrukciju:

#content p {
margin: 10px; padding: 0;
font-size: 20px;
color: #222222;
letter-spacing: 1px;
text-indent: 40px;
text-align: justify;
}

     Ovde nije baš sve sasvim poznato. Letter-spacing predstavlja razmak između slova tekstualnog elementa. Ja sam dao vrednost 1px što znači da će slova biti za jedan piksel razmaknutija nego što bi normalno trebalo. Letter-spacing može da ima i negativne vrednosti, na primer -1px, kada želimo da tekst bude zbijeniji. Text-indent služi za uvlačenje prvog reda pragrafa, u našem slučaju prvi red paragrafa biće uvučen za 40 piksela u odnosu na ostatak teksta. Text-align ste več imali u prethodnoj lekciji, samo bih rekao da vrednost justify znači da se tekst ravna sa obe strane.
     To bi bilo sve u ovoj lekciji. Do naredne lekcije eksperimentišite sa ovim što ste do sada naučili jer ovo što ja pokazujem je nešto najosnovnije a mogućnosti su beskonačne.

2 comments:

  1. U dubini analize izrada web sajtova može bitiugodno iskustvo . Donedavno smatra tabu među pristojnom društvu , njegov utjecaj na zapadnoj kinematografiji nije dao odgovarajuće priznanje . Jukstapoziciji je izrada web sajtova sa temeljne gospodarske , socijalne i političke strateškog sukoba privlači kritike od onih politički nastrojenih pojedinaca koji žive u prošlosti , koji su tek privikavaju na svom discombobulating prirode . Držite na vaše kape , kao što počnemo putovanje u izrada web sajtova .

    ReplyDelete
  2. Svaka cast znao sam sve ovo oko HTML i CSS i ranije ali ti si mi pomogao u dosta stvari samo tako nastavi najbolji si pomoces mnogim ljudima na ovome!! Dobro bi bilo i da dodas neke testove malo da radimo. samo napred care !

    ReplyDelete