WEB Dizajn Tutorijali

• 6Ovo se svidja korisnicima: E.L.I.T.E., CyberSrbin032, TwinHeadedEagle, Drezgić, Jimmy4, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Hvala, biće još tutorijala ali ovih dana ne stižem.. škola, obaveze...

• 6Ovo se svidja korisnicima: TwinHeadedEagle, CyberSrbin032, ThePhilosopher, E.L.I.T.E., Jimmy4, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Tabele
Tabele se na sajt dodaju pomoću html oznake <table> | </table>
Ovoj oznaci se dodaju još dve html oznake <tr> i <td> | </tr> i </td>

<tr> sa ovom oznakom se prave redovi u tabeli
<td> sa ovom oznakom se tabela deli na više kolona. Takođe sa ovom oznaku u tabelu se dodaju:

Slike
Tekst
Linkovi
I ostalo...


Na tabele takođe mogu da se dodaju i CSS stilovi kao i za ostale html element koji se nalaze u samoj tabeli.

Primer jedne tabele:

Citat:
<table border="2">
<tr>
<td>Tekst 1 </td>
<td>Tekst 2</td>
</tr>
<tr>
<td>Tekst 3</td>
<td>Tekst 4</td>
</tr>
</table>


U prvom delu koda tabele smo definisali debljinu okvir-a tabele. Dalje smo u kodu definisali tabelu sa dva reda sa po četiri kolone. U tabelu možete dodati I slike, linkove I slično pomoću html kodova koji su predviđeni za to.
Kod treba postaviti između oznaka <td> ovde Ide kod </td>
U CSS možete da definišite izgled tabele unosom sledećeg koda u CSS dokument Vašeg veb sajta:

Citat:table
{
Ovde ide CSS
}

Primer jedne tabele:


Do sledećeg posta!

• 2Ovo se svidja korisnicima: Jimmy4, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Od danas tutorijale takođe možete pratiti i na novom veb sajtu, na adresi: Svet Web Dizajna
Vidimo se!

• 5Ovo se svidja korisnicima: ilovephp, vasa.93, TwinHeadedEagle, ThePhilosopher, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Sve pohvale za @ilovephp, tutorijal je definitivno kvalitetan, dobar je za ucenje od o a i valja kao podsetnik (ja, otprilike znam vecinu ovih stvari, al' posto se ne bavim narocito HTML/CSS dobro mi dodje ovaj tutorijal kao podsetnik).

Jos jednom, sve pohvale

• 6Ovo se svidja korisnicima: CyberSrbin032, Drezgić, ThePhilosopher, Jimmy4, mcrule, klok
  
  Registruj se da bi pohvalio/la poruku!

SEO Optimizacija HTML elementata
Odmah ću na početku reći da ovo nije kompletan seo vodič već samo osnove u seo optimizaciju slika, linkova i drugo. Odnosno samu optimizaciju html elemenata.

Optimizacija slika

U kod koji koristimo za dodavanje slika na sajt dodaćemo još jedan kraći kod (alt tag) u kojem ćemo uneti opis slike:

Citat:<img src="slika.jpg" alt="Ovde se unosi opis slike">

Savet: Takođe kada postavljate sliku na sajt, sam naziv slike bi trebao da „govori“ šta je na slici. Pa na primer ako je na slici računar slika bi trebala da se zove računar.jpg a ne img1055.jpg. Ovo je čest slučaj, zato je bolji izdvojiti minut i napisati pravilan naziv slike, jer će se tako slika naći na mnogo većem mestu u rezultatima pretrage slika na pretraživačima- a to znači i više posetioca.

Optimizacija linkova

Isto kao i u slikama, dodaćemo dodatni kod (title tag) u kojem ćemo uneti opis linka:

Citat:<a href=“index.html” title=”Ovde se unosi opis link-a”>LINK</a>


Meta tagovi (oznake)

Citat:<title>Naziv veb sajta</title>
<meta name=”description” content=”Opis sajta”>
<meta name=”keywords” content=”ključne reči,reč1,reč2”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Title tag se koristi za dodavnje naslov koji se prikazuje u samom vrhu na rezultatima pretrage samih veb sajtova ali se sem toga prikazuje i u samim veb brauzerima.

Description tag se koristi za opis sajta, i on se takođe prikazuje u rezulatatima pretrage odmah nakon naslova stranice.

Keywords tag se koristi za unos ključnih reči koje opisuju Vaš sajt. Ključne reči se odvajaju zapetom i mogu da se unesu onoliko reči koliko Vi želite.

Content type definiše i govorti pretraživaču jezik Vašeg sajta. Sem toga govori i pretraživačima kako trebaju da prikažu tekst na stranici.

Znači ovo nije bila kompletna optimizacija sajta, već osnove koje je potrebno imati na samom sajtu i koje su vezane za same html oznake.

Do sledećeg posta!

• 5Ovo se svidja korisnicima: CyberSrbin032, ThePhilosopher, TwinHeadedEagle, Jimmy4, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Responsive dizajn-Slike
Sve više se veb-u pristupa sa prenosnih uređaja kao što su mobilni telefoni ili tableti. Kako svaki uređaj ima drugačiju veličinu ekrana na kojem se prikazuje sadržaj lakše je napraviti jedan veb sajt koji će se prilagođavati veličini ekrana nego praviti više sajtova koji su prilagođeni određenim veličinama ekrana.
U narednih nekoliko postova naučićemo kako napraviti sajt koji se prilagođava veličini ekrana na kojem se prikazuje.

Za početak naučićemo kako prilagoditi slike za ovakve uređaje. Ovde ćemo normalno dodati sliku u HTML pomoću oznake koju smo naučili u prethodnim postovima:

Citat:<img src="svetwebdizajna.jpg" alt="Svet Web Dizajna">

Kako bi slika mogla da se prilagodi uređaju i ekranu, dodaćemo u CSS sledeći kod:

Citat:img {
max-width: 100%;
height: auto;
}

Ovaj kod definiše da se za svaku sliku primeni kod iznad. Max width govori da dužina slike uvek bude 100% popunjena na ekranu, dok drugi deo koda (height:auto) govori da se slika automatski prilagodi visini ekrana.

Primer kako se slika prilagođava veličini ekrana:







Do sledećeg posta!

• 4Ovo se svidja korisnicima: TwinHeadedEagle, Jimmy4, CyberSrbin032, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Slike kao linkovi
Verovatno ste na većini sajtova primetli da je moguće kliknuti na sliku i onda će vas prebacite na novu stranicu ili na neki drugi sajt. Ovo možete uraditi vrlo jednostavno i to samo pomoću par html kodova:

Koristićemo običan kod za sliku u kojem ćemo ubaciti href oznaku za linkovanje stranica:

Citat:<a href="sajt.html"><img src="slika.jpg" alt="Sajt" width="100" height="100"></a>

U prvom delu koda , odmah nakon href taga unosimo adresu stranice ili veb sajta na koji želimo da linkujemo sliku. U drugom delu koda posle img src dodajemo putanju do naše slike. Nakon toga imam alt tag u kojem ćemo opisati sliku (zbog seo optimizacije) i na kraju imamo width i height sa kojima se podešavana širina i visina slike koju linkujemo.
Sve ovo je upakovano u a oznaku.

Možda ste primetli da se u nekim brauzrima prikazuje okvir oko slike. Ako ne želite da imate okvir oko slike, koristite sledeći kod:

Citat:<a href="sajt.html"><img border="0" src="slika.jpg" alt="Sajt" width="100" height="100"></a></p>

Skoro i da nema razlike između prethodnog i ovog koda, samo što ovde imamo border oznaku koja definiše okvire oko slike koju linkujemo. Ovde je postavljeno da je border 0 , što je i logično jer ne želimo da se oko slike prikazuje okvir.

Do sledećeg posta!

• 5Ovo se svidja korisnicima: CyberSrbin032, E.L.I.T.E., vasa.93, Jimmy4, mcrule
  
  Registruj se da bi pohvalio/la poruku!

Obaveštenje

Od 21.12 stižu novi tutorijali i novi templejti koji će biti besplatni za preuzimanje. Vidimo se!

I Love PHP - Svet Web Dizajna

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

ilovephp ::Samo da Vas obavestim da uskoro stižu novi tutorijali, kao i da iste možete pratiti na novom veb sajtu koji stiže ovih dana:




Sajt je takođe optimizovan za mobilne uređaje:



Vidimo se!

Mozes da mi das link od tvog sajta gde izbacujes o Svet web dizajna

• 1Ovo se svidja korisniku: mcrule
  
  Registruj se da bi pohvalio/la poruku!

Pozdrav!
Sajt je još uvek u izradi pa tako nije na internetu-još uvek. Za sada sve o web dizajnu možeš pratiti u ovoj temi!