MyCity » Web dizajn / HTML » Članak: WEB Dizajn Tutorijali

WEB Dizajn Tutorijali

Napisano na dan: 2.11.2012
1

WEB Dizajn Tutorijali
Sledeća strana Pagination

Idi na vrh

Poslao: 02 Nov 2012 18:16
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Arrow Šta je to HTML?
----------------------------------
HTML je opisni jezik za opisivanje veb stranica. Sastoji se od oznaka (još mogu da se zovu i tagovi). Neki od osnovnih su: Head, Body ....
Postoji više verzija a trenutno aktuelna je 4 dok se radi na 5 (sve više se koristi).

Arrow Šta je to CSS?
----------------------------------
CSS u kombinaciji sa HTML-om čine veb stranu. Koristi se za definisanje izgleda stranica, boje teksta, pozadine i slično.

SADRŽAJ
-----------------------------------------------------------------------------------------------------------

Osnove HTML i CSS

1. Osnove HTML
2. Dodavanje teksta
3. Dodavanje slika
4. Kako promeniti pozadinu?
5. Linkovi
6. Forme i dugmad
7. Title, heading I div
8. Pozicija elemenata, float, marigine i padding
9. Tabele
10.SEO optimizacija HTML elemenata
11.Responsive dizajn-Slike
12.Slike kao linkovi
13.HTML 5 Audio Player

14.HTML 5 Video Player

-----------------------------------------------------------------------------------------------------------
Kako napraviti i dizajnirati sajt?
1. Kako napraviti jednostavan sajt?
2.
-----------------------------------------------------------------------------------------------------------

Još tutorijala na: [Link mogu videti samo ulogovani korisnici]

Ziveli



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 02 Nov 2012 19:17
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Osnove HTML
Za početak govorićemo o nekim osnovama html a to su oznake. Najosnovije oznake u html su:

<html>
<head>
<body>

Svaka oznaka mora da bude zatvorena (ovo ne važi za "self-closing" oznake). Oznake se zatvaraju kosom crtom /. Hajde da pogledamo kako to izgleda na ovim osnovim oznakama:

</html>
</head>
</body>

Sada ćemo napraviti strukturu veb strane. Prvo ćemo otvoriti html dokument sa html oznakom:
<html>
Ispod oznake html dodajemo oznaku head
<head>
Napravimo razmak (za oznake koje će se nalaziti u head oznaci) pa zatvorimo head tag
</head>
Isto to radimo i za body oznaku:
Otvaramo
<body>
Pravimo razmak i zatvaramo body oznaku:
</body>
I na kraju zatvaramo ceo html dokument
</html>
Sve složeno izgleda ovako:
Citat:
<html>
<head>

</head>
<body>

</body>
</html>

U sledećem postu naučićemo šta se stavlja u razmak koji smo napravili prilkom otvaranja osnovih html oznaka! Ziveli

P.S samo jedno pitanje nevezano za tutorijal, primeto sam da kada stavim kod u oznaku za kod nije moguće obojiti tekst?



Poslao: 02 Nov 2012 19:31
Idi na vrh
offline
  • 100%Milanista
  • Information Technology
  • Pridružio: 23 Avg 2008
  • Poruke: 2634
  • Gde živiš: Milan, Italy

Nije moguce kad stavis pod kod, ali probaj ovako da stavis pod citatom:

Citat:
<html>
<head>

</head>
<body>

</body>
</html>

Poslao: 02 Nov 2012 19:33
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

E vidiš to nije loša ideja.. znači sad stavljam pod citat, hvala! Smile

Poslao: 02 Nov 2012 21:28
Idi na vrh
offline
  • Fil  Male
  • Legendarni građanin
  • Pridružio: 11 Jun 2009
  • Poruke: 16586

Pozdravljam ideju Ziveli
Samo napred.

Slobodno me cimni za svaki vid moderacije ovog bloga Smile

Poslao: 03 Nov 2012 12:39
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Dodavanje teksta
Jedan od najbitnijih elemenata na web strani jeste I sam tekst. Tekst se dodaje pomoću oznake <p> i ona se stavlja u body oznaku (šta je to body oznaka možete da pročitate u postu uvod u html) zajedno sa ostalim sadržajem (slike, tabele i slično). Primer dodavanja teksta:
Citat:
<html>
<head>
</head>
<body>
<p>Ovde ide tekst</p>
</body>
</html>

Kada upišemo samo ovaj kod dobijamo običan, „normalan“ prikaz teksta. Da bi ste promenili izgled teksta (bold, italic ili podvučeno) koristićemo oznake a da bi smo povećali ili promenili boju teksta koristićemo css, hajde da pogledamo kako se to radi, na sledećem primeru.

Stil (izgled teksta)

Iskošen (italic) tekst

Iskošen (italic) tekst dodajemo pomoću oznake <i> ,evo jednog primera dodavanja iskošenog teksta na stranicu:
Citat:<p><i>Ovde ide tekst</i></p>

Bold (podebljana slova)
Za ova slova koristimo oznaku <b>, primer dodavanja bold teksta na stranu:
Citat:<p><b>Ovde ide tekst</b></p>

Podvučen tekst
Za podvučen tekst koristićemo oznaku <u> , primer dodavanja podvučenog teksta na stranu:
Citat:<p><u>Ovde ide tekst</u></p>

Veličina slova
Veličinu slova ćemo raditi pomoću CSS. Ovo je prvi tutorijal u kojem ćemo pored HTML koristiti i CSS.

Kako napraviti i povezati css sa html-om?

Napravite jedan prazan dokument koji ćete nazvati kako Vi želite (npr stil ili izgled) a završna ekstenzija fajla treba da bude css. Znači ovako nekako bi trebalo da izgleda : style.css (ili ime koje vi izabereta pa na kraju ide.css)
Sada kada ste napravili css dokument povezaćemo ga se html-om. Otvorite vaš html dokument u kojem se nalazi vaša stranica i u head tag dodajte sledeći kod:

Citat:<link rel="stylesheet" type="text/css" href="style.css" />

U kod se nalazi deo gde piše style.css to je naziv mog fajla, potrebno je da vi zamenite taj naziv sa nazivom fajla koji ste imenovali kada ste pravili css dokument.
Kada je sve uspešno povezano sada će html da „povlači“ instrukcije iz css i da prikazuje sadržaj onako kako je tamo definisan (u css-u).
Veličina slova
U css možete da menjate veličinu slova za svaku oznaku koja može da prikaže tekst (p, h1 , h2). Pošto smo u prethodnom delu tutorijala dodavali tekst na stranicu pomoću <p> oznake, hajde da naučimo kako povećati tekst za ovu oznaku.

Otvorite već napravljeni css dokument i unesite sledeći kod:
Citat:p {font-size:100px;}
Prvi deo kod definiše koju oznaku želimo u ovom slučaju <p>
Drugi deo kod je definiše veličinu slova, potrebno je da promenite sadržaj iza font-size teksta, tj broj. To je veličina kojom ćete prikazati tekst na stranici. Ovo možete da raditi za bilo koju drugu oznaku koja prikazuje tekst npr:
Citat:H1 {font-size:50px;}
H2 {font-size:30px;}

Boja slova
Boja slova se definiše slično kao i veličina, stim što ćemo ovde koristiti sledeći kod:
Citat:p {color:#00ff00;}
Isto prvi deo definiše oznaku a u drugom delu se podešava boja slova. Isto i ovde važi da možete da koristiti za svaku oznaku koja podržava tekst.
Za kraj, sve što smo današ naučili spojeno u jedan html dokument:
HTML
Citat:<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Ovde ide tekst</p>
<p><i>Ovde ide tekst</i></p>
<p><b>Ovde ide tekst</b></p>
<p><u>Ovde ide tekst</u></p>
</body>
</html>
CSS
Citat:p {font-size:50px;}
p {color:#ffffcc;}

Za sada toliko, u sledećem postu govorićemo o dodavanju slika na web sajt Ziveli

Poslao: 04 Nov 2012 14:54
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Dodavanje slika
Sliku dodajmo pomoću koda koji postavljano u body oznaku ( gde i ostali sadržaj):
Citat:<img src="slika.jpg">

U delu posle src (označeno crvenom bojom) dodajemo putanju do naše slike npr. slika.jpg ili slika.png u zavisnosti od ekstenzije sa kojom se slika završava (jpg, png ,gif).

Arrow Napomena: naziv slike mora u html mora da bude isto napisan kao i naslov fajla u kojem se nalazi slika. Ovo je važno jer linuks serveri zahtevaju da putanja i naziv slike budu isti (velika, mala slova) primer:
Naziv slike je: Slika.jpg
Pravilno je u html napisati Slika.jpg a ne slika.jpg

Ovde se često dešava greška pa je to najčešći razlog zašto se slika koja se ispravno prikazuje na Windows operativnom sistemu, ne prikazuje na Linuks sistemima.

Ukoliko se slika nalazi u nekom folderu onda putanja do foldera pa do slike izgleda ovako: Citat:<img src="imefoldera/slika.jpg">
Znači folder i slika odvajaju se kosom crtom /

Veličina slike

Ukoliko sliku niste doveli na željenu veličinu prilikom obrade u nekom programu to možete da uradite preko html (napomena: iako se na sajtu prikazuje manja slika, uvek se učitava cela, što može da utiče na dužinu učitavanja Vašeg sajta)

Sliku možete smanjiti tako što ćete sledeći kod kombinovati sa kodom za sliku:
Citat:width="50" height="100"

U kombinacijom se kodom za sliku, sve zajedno izgleda ovako:
Citat:<img src="slika.jpg" width="50" height="100">

U delu kod koji se naziva width podešava širinu slike a u height delu podešavate visinu Vaše slike.
Kada se sve spoji izgleda ovako:

Citat:<html>
<head>
</head>
<body>
<img src="slika.jpg" width="50" height="100">
</body>
</html>

To je to što bi ste trebali da znate o postavljanju slika na Vaš web sajt, do sledećeg posta! Ziveli

Poslao: 05 Nov 2012 13:38
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Kako promeniti pozadinu?
Kada napravite novi HTML dokument dobijate belu pozadinu. Da bi ste ovo promenili možete da:


-Koristite neku boju kao pozadinu
-Ili da koristite neku sliku


Kako koristiti boju kao pozadinu?

Napravite novi CSS dokument i povežite ga sa HTML-om (ako ne znate kako, možete da pročitate u ovom postu) kada ste sve to odradili u CSS unesite sledeći kod:

Citat:body {background-color:#00FF00;}

On definiše boju (u ovom slučaju boju za body oznaku), nakon dela koda background-color: (označeno crvenom bojom) potrebno je da uneste boju koju želite da se prikazuje, ovo možete da uradite na više načina:

-korišćenjem HEX boje
-korišćenjem RGB boje
-ili jednostavnim ukucavanjem reči (npr. Blue, green i slično. Ova opcija nije preporučljiva jer brauzeri mogu da prikazuju boju na različite načine. Npr Mozilla će prikazati boju na jedan a Explorer na drugi način. Najčešće se koriste prve dve opcije dodavanje boje, Hex i Rgb.)


Kako koristiti sliku ka pozadinu za Web sajt?

Ovde ćemo isto koristiti CSS stim što ćemo ovde umesto prethodnog koda za dodavanje pozadine pomoću boje, koristiti sledeći kod (razlika je u tome što umesto background-color ovde imamo background-image, što je i logično jer kao pozadinu želimo da postavimo sliku):

Citat:body {background-image:url('pozadina.jpg');}

U delu posle url (označeno crevnom bojom) potrebno je da uneste pravilnu putanju i ekstenziju do Vaše slike koju ćete koristiti kao pozadinu na Vašem web sajtu.

Ponavljanje pozadine

Pozadine može da se ponavlja vertikalno, horizontalno i vertikalno i horizontalno ili da se ne ponavlja.
Ako želite da se ponavlja vertikalno dodajte repeat-y a ako želite horizontalno onda dodajte repeat-x
Primer dodavanja horizontalne pozadine:

Citat:body
{
background-image:url('slika.jpg');
background-repeat:repeat-x;
}

Primer dodavanja vertikalne pozadine:

Citat:body
{
background-image:url('slika.jpg');
background-repeat:repeat-y;
}

U principu kod je isti samo što je malo izmenjen i dodat kod koji definiše ponavljanje pozadine.
Ako ne želite da se slika pozadine ponavlja napišite no-repeat

Citat:body
{
background-image:url('slika.jpg');
background-repeat:no-repeat;
}

Do sledećeg posta! Ziveli

Poslao: 06 Nov 2012 15:20
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Linkovi
Linkovi se u HTML-u dodaju pomoću sledećeg koda:
Citat:<a href="url">Link</a>

Na primeru to izgleda ovako:

Citat:<a href="pocetna.html">Početna</a>

U delu url stavlja se adresa sajta (link) a nakon dela > stavlja se naziv linka

Korišćenjem ovog linka, stranica koju otvarate u linku otvara se u istom prozoru.Da bi ste sajt otvorili u drugom prozor potrebno je da u delu koda za link dodate sledeći kod:
Citat:target="_blank"

Sve spojeno izgleda ovako:
Citat:<a href="pocetna.html" target="_blank">Početna</a>

Ukoliko želite da link ne bude podvučen u css dodajte sledeći kod:
Citat:a { text-decoration:none }

Primer jednog sajta na kojem se nalazi link:
Citat:<html>
<head>
</head>
<body>
<a href="pocetna.html">Početna</a>
</body>
</html>

Ovo je bio jedan od kraćih postova, do sledećeg posta! Ziveli

Poslao: 06 Nov 2012 21:33
Idi na vrh
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Forme i dugmad
Forme u HTML služe za unos podataka koje dalje mogu da se prosleđuju ostalim programskim jezicima (php, javascript itd)

Formu dodajemo pomoću oznake <form>

Citat:<form>

</form>

Primer jedne forme:

Citat:<form>
Tekst 1: <input type="text" name="tekst"><br>
Tekst2: <input type="text" name="tekst">
</form>

U prvom delu koda je naziv opcije a dalje se prikazuje polje za unos teksta

Radio buttons (kružić dugmad)

Kružić dugmad se isto dodaju pomoću koda za formu, stim ima postoji razlika u definisanju izgleda forme koju želimo da prikažemo:

Citat:<form>
<input type="radio" name="tekst" value="tekst1">Tekst 1<br>
<input type="radio" name="tekst" value="tekst2">Tekst 2
</form>

U polju input type koji treba da definiše izgled, ovde se definiše radio buton (kružić) dok se u kodu iznad definiše polje za unos teksta.
Nakon dela koda > dodaje se tekst koji će se prikazati pored opcije (kružića za odabir)

Isto se ovo može uraditi ako želite da umesto kružića polje za oznaku opcije bude kockica:

Citat:
<form>
<input type="checkbox" name="tekst" value="Tekst1">Tekst 1<br>
<input type="checkbox" name="tekst" value="Tekst2">Tekst 2
</form>

Znači umesto radio imam checkbox koji definiše izgled opcije.

Dugmad u HTML

Dugmag se dodaju pomoću jednostavnog koda:

Citat:<button type="button">Tekst dugmeta</button>

Kako sve ovo izgleda, pogledajte na slici ispod:



Ovo je ono osnovne što možete dodati pomoću HTML, naravno možete promeniti izgled forme i dugmeta u CSS ali nešto više o tome u nekom od narednih postova. Do sledećeg posta! Ziveli

------------------------------------------
Šta mislite o blogu? Da li je sve ok? Da li treba nešto promeniti, dodati? Ziveli

MyCity » Web dizajn / HTML » Članak: WEB Dizajn Tutorijali

Ko je trenutno na forumu
 

Ukupno su 1101 korisnika na forumu :: 101 registrovanih, 7 sakrivenih i 993 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: 1MAP, 357magnum, Abebe Bikila, Aleksandar_1980, alternator, Andrija357, Avalon015, Azzo, babaroga, bbrasnjo3, black_arrow, bojankrstc, bojcistv, BraneS, Cigi, coaaco, cojapop, d.arsenal321, Dimitrise93, Djordje29, Dorcolac, Dovla, dukajov, Electron, esx66, FAMAS, Flashburn, goran.vvv, HogarStrashni, HrcAk47, ibssa, ILGromovnik, interesujeme, jodzula, Jovan1983, kendzo-andzo-boni-fju, kokodakalo, Kosmos Banja Luka, Krusarac, Kubovac, kybonacci, Lester Freamon, Lieutenant, M74AB3, maiden6657, Manjane, mean_machine, Metanoja, milanpetkovicv, milenko crazy north, Milo97, mir, mnn2, monomah, mrav pesadinac, Mravojed, nazgul75, nemkea71, nenooo, Nikola00, nnnnnnnnnn, novator, Oscar, OtacMakarije, Panter, pedjolino76, Povratak1912, proka89, Raso75, Reddot, rednap, risima, rodoljub, samocitam, Sančo, SD izvidjac, Shilok, Shinobi, skvara, Smajser, sokars, sova72, spalev, Sr.Stat., Stoilkovic, Strasni JA, strelac07, theNedjeljko, tuja, Tvrtko I, vathra, Velizar Laro, Vlad000, vuk77, Wrangler, Yellow Pinky, Yugol33, zafon031, zlatkoa987, |_MeD_|, Žrnov