HTML Beginner

Klixova večernja škola - tutoriali, savjeti, praktična rješenja
Post Reply

Nastaviti sa HTML ucenjem ili ne

Trebam nastaviti pisati HTML Tutorial?
11
100%
Da prestanem pisati Tutorial?
0
No votes
 
Total votes: 11

Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#1 HTML Beginner

Post by Cookie85 »

Evo da pokusamo nekako od pocetka od nekog uvoda :)

Većina stvari na webu se ne razlikuje od stvari na vašem računaru - to je samo čitav teret datoteka sortiran u čitavom opsegu direktorija.
HTML datoteke nisu ništa više od jednostavnih tekstualnih datoteka, tako da počnete pisati u HTML-u, ne trebate ništa više od jednostavnog tekst urednika.

Notepad je uobičajeni editor teksta na računarima zasnovanim na operativnom sistemu Windows (obično se nalazi u meniju Programs (Programi)> Accessories (Dodatna oprema)), a Mac OSX računari se isporučuju sa tekstualnim programom TextEdit, ali svaki program koji vam dozvoljava da izvedete sa tekstom.

Ja licno koristim Sublime Text, ali mozete koristiti gore navedeno.

Ukucajte ovo u svoj tekst editor:

Code: Select all

Ovo je moja prva web stranica
Sada kreirajte fasciklu pod nazivom "html" gdje god želite da sačuvate datoteke na računaru i sačuvate datoteku kao "mojaprvastranica.html".

Budite pazljivi. Važno je da je dodatak ".html" naveden - neki tekstualni urednici, kao što je Notepad, će u drugom slučaju automatski sačuvati kao ".txt".
Takođe morate osigurati da se vaša datoteka čuva kao običan tekst. TextEdit će, na primjer, pokrenuti nove datoteke kao "Rich text", koji sadrže puno ekstrakcija za formatiranje, po podrazumevanom podešavanju. U takvim slučajevima idite u željene postavke i proverite da li je pre nego što ste napravili novu datoteku proverili opciju "Običan tekst".


Za pretraživanje HTML datoteka, čak ni ne moraju biti na webu. Otvorite web pretraživač, kao što su Chrome, Firefox, Safari ili (Ne daj Boze) Internet Explorer, a u browser, gdje obično upišete web adrese, unesite lokaciju datoteke koju ste upravo snimili (na primjer, "c: \ html \ mojaprvastranica.html ") enter. Kao alternativu, idite u meni File u browseru, odaberite Open i pretražite file. Ili desni klik na file i opet with...

Wow. Tamo je. Vaša prva web stranica. A sve što je potrebno bilo je nekoliko tipkanih reči.

Ovde smo rekli da koristite osnovni tekst editor, kao što je Notepad, ali možda ćete biti u iskušenju da koristite namenski softver kao što je Adobe Dreamweaver.
Trebalo bi da budete veoma pažljivi kada koristite ove programe, pogotovo ako ste početnik, jer često bacaju nepotrebni ili nestandardni kod kako bi vam "pomogao".
Ako ste ozbiljni u vezi sa učenjem HTML-a, trebalo bi da pratite ovu temu :), tako da barem imate osnovno razumevanje onoga što se dešava.
Softverski programi nikada neće vam dati istu kontrolu nad web stranicom kao kodiranje ručno.


<!-- Tags, Attributes, and Elements -->


Iako su osnove HTML-a običan tekst, potrebno je malo više da bismo postali lijepi i sjajni HTML dokument.

<!-- Tags -->

Osnovna struktura HTML dokumenta uključuje oznake, koje okružuju sadržaj i primjenjuju značenje za njega.
Promenite svoj dokument tako da izgleda ovako:

Code: Select all

<!DOCTYPE html>
<html>
<body>
    Ovo je moja prva stranica
</body>
</html>
Sada sačuvajte dokument ponovo, vratite se na web browser i ponovo učitajte stranicu.

Pojava stranice se uopšte neće promeniti, ali svrha HTML-a je da primeni značenje, a ne prezentaciju, a ovaj primjer je sada definirao neke osnovne elemente web stranice.

Prva linija na vrhu, <! DOCTYPE html>, je deklaracija tipa dokumenta i omogućava pregledaču da zna koji HTML-a koristite (HTML5, u ovom slučaju). Veoma je važno držati ovo - ako ne, pretraživači će pretpostaviti da ne znate šta radite i da postupite na vrlo poseban način.

Da se vratimo na tačku, <html> je otvaranje oznaka koja otvara stvari i govori pregledaču da je sve između tog i zatvaranja tag </ html> HTML dokument. Stvari između <body> i </ body> su glavni sadržaj dokumenta koji će se pojaviti u prozoru pregledača.

<!-- Closing tags -->

</ Body> i </ html> približavaju svoje elemente (više o elementima malo kasnije).

Nisu svi tagovi opremljeni sa oznakama za zatvaranje (<html> </ html>) neke oznake, koje se ne zatvaraju oko sadržaja, zatvaraju se. Oznaka linije za razbijanje, na primer, izgleda ovako: <br> - prelom linije ne sadrži nikakav sadržaj, tako da oznaka sretno sjedi zbog svog usamljenog selfa. Naći ćemo te primere kasnije. Sve što treba da zapamtite je da sve oznake sa sadržajem između njih treba zatvoriti, u formatu otvaranja oznake → sadržaja → zatvaranje oznake. Nije strogo rečeno, uvijek je uslov, ali to je konvencija koju koristimo u ovim tutorijalima jer je dobra praksa koja rezultira čistijim i lakšim razumevanjem koda.



Možda ćete naleteti na "self-closing" oznaka, pri čemu će br tag, na primer, izgledati kao "<br />" umjesto jednostavno "<br>". Ovo je ostatak XHTML-a, oblika HTML-a zasnovanog na drugom jeziku markiranja koji se zove XML. HTML5 je mnogo hladniji od XHTML-a i biće zadovoljan sa bilo kojim formatom. Neki programeri preferiraju jedan način, neki preferiraju drugu. Bacili smo novčić i odlučili se držati jednostavnije verzije.

<!-- Attributes -->

Oznake mogu imati atribute, koji su dodatni detalji informacija. Atributi se pojavljuju unutar otvaranja oznake i njihove vrijednosti se nalaze unutar znakova navoda. Izgledaju nešto poput <tag attribute = "value"> Margarine </ tag>.

<!-- Elements -->

Oznake ne čine mnogo više od obeležavanja početka i kraja elementa. Elementi su bitovi koji čine web stranice. Rekao bi, na primjer, da je sve što je između (i uključuje) oznake <body> i </ body> element tela. Kao još jedan primer, dok su "<title>" i "</ title>" oznake, "<title> Naslov </ title>" je naslovni element.

Nadam se da ce neko ovo procitati :D
Nastavit cu ako bude zainteresovanih :D :izet:
Last edited by Cookie85 on 21/08/2018 11:40, edited 2 times in total.
developer10
Posts: 785
Joined: 12/12/2012 13:45
Location: München, DE

#2 Re: HTML

Post by developer10 »

Image

:-D :-D
User avatar
drag_gost
Posts: 5498
Joined: 17/04/2010 19:09
Location: Tu, odmah :)

#3 Re: HTML

Post by drag_gost »

Svaka cast. Mnogo je vremena potrebno za ovo. Nadam se da ce biti onih koji ce pratiti.
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#4 Re: HTML

Post by Cookie85 »

developer10 wrote:Image

:-D :-D
Upravo tako :izet:

Ali moraju početi sa nečim, kasnije CSS, JS, Jquery, frameworks, php... ;-)
developer10
Posts: 785
Joined: 12/12/2012 13:45
Location: München, DE

#5 Re: HTML

Post by developer10 »

Cookie85 wrote:
developer10 wrote:Image

:-D :-D
Upravo tako :izet:

Ali moraju početi sa nečim, kasnije CSS, JS, Jquery, frameworks, php... ;-)
Znam, zezam se malo. Koji web developer nije počeo s osnovama HTML-a.. Nisam vidio sve što si stavio ali danas je fokus na HTML 5 tako da obavezno stavljaj materijale koji obrađuju HTML 5.

:thumbup:
User avatar
spree
Posts: 7856
Joined: 04/04/2009 02:10
Location: oʌǝɾɐɹɐs

#6 Re: HTML

Post by spree »

:thumbup:
kiligonzales
Posts: 5435
Joined: 01/12/2016 10:32
Contact:

#7 Re: HTML

Post by kiligonzales »

:thumbup: :bih:
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#8 Re: HTML

Post by Cookie85 »

Evo da nastavimo sa HTML-om

<!-- Page Titles -->

Sve HTML stranice trebaju imati naslov stranice.

Da biste dodali naslov na svoju stranicu, promenite svoj kod tako da izgleda ovako:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Moja Prva Stranica</title>
</head>
<body>
    Ovo je moja prva stranica
</body>
</html>
Ovde smo dodali dva nova elementa, koja počinju sa oznakom glave i oznakom naslova (i pogledajte kako se oba ova zatvaraju).

Element glave (onaj koji počinje sa oznakom <head> otvaranja i završava oznakom za zatvaranje </ head>) se pojavljuje pre elementa tela (počevši sa <body> i završava se </ body>) i sadrži informacije o stranici . Informacije u elementu glave se ne pojavljuju u prozoru pregledača.

Vidjet ćemo kasnije da se drugi elementi mogu pojaviti unutar elementa glave, ali najvažniji od njih je naslovni element.

Ako pogledate ovaj dokument u browseru (sačuvajte i ponovo učitajte kao ranije), videćete da će se "Moja Prva Stranica" pojaviti na kartici ili naslovnoj traci prozora (ne u stvarnom području platna/papira kako god nazvati). Tekst koji ste stavili između oznaka naslova postao je naslov dokumenta (iznenađenje!). Ako biste ovu stranicu dodali u svoje "omiljene" (ili "markere", zavisno od vašeg pretraživača), videćete da se naslov koristi i tamo.


<!-- Paragraphs -->

Sada kada imate osnovnu strukturu HTML dokumenta, možete se malo zbuniti s sadržajem.

Vratite se u tekstualni editor i dodajte drugu liniju na svoju stranicu:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Moja Prva Stranica</title>
</head>
<body>
    Ovo je moja prva stranica
    Kako uzbudljivo zar ne ?
</body>
</html>
Pogledajte dokument u vašem browser-u.

Možda ste očekivali da će se vaš dokument pojaviti dok ste ga kucali u dve reči, ali umesto toga bi trebalo da vidite nešto poput ovoga:

Ovo je moja prva stranica Kako uzbudljivo zar ne ?

To je zato što web browser obično ne prima nikakvu naredbu na koju liniju vaš kod je uključen. Takođe ne uzima u obzir razmake (dobili biste isti rezultat ako ste otkucali "Ovo je moja prva stranica Kako uzbudljivo zar ne ?").

Ako želite da se tekst pojavi na različitim linijama, odnosno, ako nameravate da postoje dva različita bloka teksta (jer, zapamtite, HTML je značenje, a ne prezentacija), morate to eksplicitno navesti.

Promjenite dve linije sadržaja tako da izgledaju ovako:

Code: Select all

   
    <p>Ovo je moja prva stranica</p>
    <p>Kako uzbudljivo zar ne ?</p>
Oznaka p se koristi za paragrafe.

Pogledajte rezultate ovoga. Dvije linije će se sada pojaviti u dvije linije, jer ih browser prepoznaje kao zasebne stavke.

Zamislite HTML sadržaj kao da je knjiga - sa paragrafima gde je to prikladno.

<!-- Emphasis -->

Možete naglasiti tekst u paragrafu koristeći em (naglasak) i strong (jak značaj).

Code: Select all

<p> Da, stvarno <em> je </ em> uzbudljivo. <strong> Upozorenje: </ strong> nivo uzbuđenja može dovesti do eksplozije glave. </ p>
Tradicionalno, browseri će em prikazati italic, a strong podrazumevano će biti označeni debelim slovima(bold), ali oni nisu isti kao i i b oznake koje (iako su tačno redefinisane u HTML5) imaju svoje poreklo u italic i boldu - zapamtite - HTML nije za prezentaciju. Ako želite naglasiti nešto vizuelno (na primer, nešto italic), gotovo sigurno želite da ga općenito naglasite. Ne možete pisati samo italic .

<!-- Line breaks -->

Oznaka linije pauze (line-break) se takođe može koristiti za odvajanje linija poput ove:

Code: Select all

Ovo je moja prva stranica<br>
Kako je samo uzbudljivo
Nema nikakvog sadržaja za prekidanje linija, tako da nema oznake za zatvaranje.
Može biti izazov za prekoračenje preloma linija i br ne treba koristiti ako su dva bloka teksta namijenjena da budu odvojena jedna od druge (jer ako je to ono što želite učiniti, verovatno želite p tag).


Do slijedeće lekcije :)
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#9 Re: HTML

Post by Cookie85 »

<!-- Headings -->

Oznaka p je samo početak formata teksta.

Ako imate dokumente sa originalnim naslovima(Headings), onda postoje HTML oznake posebno dizajnirane samo za njih.

Oni su h1, h2, h3, h4, h5 i h6, h1 je najveci, a h6 je najmanji.

Promenite svoj kod na slijedeće:

Code: Select all


<!DOCTYPE html>
<html>
<head>
    <title>Moja prva stranica</title>
</head>
<body>
    <h1>Moja prva stranica</h1>
    <h2>Šta je ovo?</h2>
    <p>Jednostavna stranica sastavljena pomoću HTML-a</p>

    <h2>Zašto je to?</h2>
    <p>Da biste naučili HTML</p>
</body>
</html>
Imajte na umu da se oznaka h1 koristi samo jednom, kao glavni naslov stranice. h2 do h6, međutim, mogu se koristiti često po želji, ali ih uvek treba koristiti redom, kako je bilo namijenjeno. Na primjer, h4 bi trebao biti podnaslov h3, koji bi trebao biti podnaslov h2.


<!-- Lists -->

Postoje tri vrste liste; neuređene liste, naručene liste i liste definicija. (unordered lists, ordered lists i definition lists)

Neuređene liste i naručene liste rade na isti način, osim što se prva koristi za nespecijalne liste sa listićima kojima obično prethodi metke(bullets), a poslednje su za sekvencijalne liste, koje su obično predstavljene inkrementalnim brojevima.

Oznaka ul se koristi da definira neuređene liste i ol tag se koristi za definisanje naručenih listova. Unutar liste, oznaka li koristi se za definisanje svake stavke liste.

Promenite svoj kod na sledeće:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Moja prva stranica</title>
</head>
<body>
    <h1>Moja prva stranica</h1>

    <h2>Šta je ovo?</h2>
    <p>Jednostavna stranica sastavljena pomoću HTML-a</p>

    <h2>Zašto je to?</h2>
    <ul>
        <li>Da biste naučili HTML</li>
        <li>Praviti se važan</li>
        <li>Zato što sam se zaljubljen u svoj kompjuter i želim da dam malo ljubavi prema HTML-u.</li>
    </ul>
</body>
</html>


Ako pogledate ovo u vašem browseru, videćete listu markiranih. Jednostavno promenite oznake ul na ol i videćete da će se lista postati numerisana.

Liste se takođe mogu uključiti u liste kako bi se formirala strukturna hijerarhija stavki.


Promenite svoj kod na sledeće:

Code: Select all


<ul>
    <li>Da biste naučili HTML</li>
    <li>
        Praviti se važan
        <ol>
            <li>Mom šefu</li>
            <li>Mojim prijateljima</li>
            <li>Mom psu</li>
            <li>Za malu pričajuću patku u mom mozgu</li>
        </ol>
    </li>
    <li>Zato što sam se zaljubljen u svoj kompjuter i želim da dam malo ljubavi prema HTML-u.</li>
</ul>

Lista unutar liste. Možete postaviti još jednu listu u to. A drugi unutar toga. I tako dalje i tako dalje.

Liste opisa (Description Lists )

Opisne liste (Description Lists) su često zaboravljene i rijetko se koriste, ali ipak da spomenemo Description Lists.

Ovo je možda zato što su mnogo specifičnije od naređenih i neuređenih listi i stoga manje korisne, uopšteno, ali tamo gde postoji lista izraza i opisa (kao što je rječnik), opisna lista je vaš idejni element.

dl je slično ul i ol elementima, uspostavljajući listu. Međutim, umjesto da sadrže li elemente, opisne liste imaju dt elemente, što su uslovi(terms), a zatim slijede elementi dd, koji su opisi (Description) povezani sa elementima dt.

Ne mora biti jedan dt koji prati jedan dd, može biti i bilo koji broj. Na primjer, ako postoji niz riječi koje imaju isto značenje, možda postoji i broj dt-a koje prati jedan dd. Ako imate jednu reč koja znači razne različite stvari, možda će biti i jedan dt, a zatim nekoliko DD-ova.

Code: Select all


<h1>Neki slučajni pojmovnik rječnika</h1>
<dl>
    <dt>HTML</dt>
    <dd>Skraćenica za HyperText Markup Language - jezik koji se koristi za izradu web stranica.</dd>

    <dt>Pas</dt>
    <dd>Svaka mesojed životinja koja pripada porodici Canidae.</dd>
    <dd>Udomljene podvrste porodice Canidae, Canis lupus familiaris.</dd>

    <dt>Coca Cola</dt>
    <dt>Sarajevska Piva</dt>
    <dt>Mlijeko</dt>
    <dd>Bela tečnost koju proizvode krave i koristi se za ljudsku upotrebu.</dd>
</dl>

<!-- Links -->

Do sada ste pravili samostalnu web stranicu, što je sve vrlo dobro i lijepo, ali ono što čini internet tako posebnim jeste to što se sve povezuje.

"H" i "T" u "HTML-u" predstavljaju "hipertekst", što u suštini znači sistem povezanog teksta.

(Anchor) Sidrena oznaka (a) se koristi za definisanje veze, ali takođe treba dodati nešto sidrenoj oznaci - odredištu veze.

Dodajte ovo u svoj dokument:

Code: Select all


<!DOCTYPE html>
<html>
<head>
    <title>Moja prva stranica</title>
</head>
<body>

    <h1>Moja prva stranica</h1>

    <h2>Šta je ovo?</h2>
    <p>Jednostavna stranica sastavljena pomoću HTML-a</p>

    <h2>Zašto je to?</h2>
    <p>Da biste naučili HTML</p>

    <h2>Gdje pronaći tutorial</h2>
    <p><a href="https://forum.klix.ba/html-t150819.html">Klix Forum</a></p>

</body>
</html>
Cilj veze je definisan u atributu href oznake. Veza može biti apsolutna, kao što je "http://www.klix.ba", ili može biti relativna prema trenutnoj stranici.
Dakle, ako ste, na primer, imali drugu datoteku pod nazivom "mojadrugastranica.html" u istom direktoriju, onda bi linija koda jednostavno bila <a href="mojadrugastranica.html"> Moja druga stranica </a> .
Veza ne mora da se povezuje sa drugom HTML datotekom, ona može da se poveže sa bilo kojom datotekom bilo gdje na web-u.
Veza može takođe poslati korisnika na drugi dio iste stranice na kojoj se nalaze. Možete dodati atribut id samo za bilo koju oznaku, na primer <h2 id = "naziv"> Naziv </ h2>, a zatim ga povezati koristeći nešto ovako: <a href="#naziv"> Idi na Naziv </a>. Odabir ove linije pomjeriće stranicu direktno na element pomoću tog ID-a. (ID primjer Naziv možete napisati bilo šta)
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#10 Re: HTML

Post by Cookie85 »

<!-- Images -->

Stvari mogu izgledati malo sive i dosadne sa svim ovim formatiranjem teksta. Naravno, mreža nije samo tekst, već multimedijska prikaz, a najčešći oblik je slika.

Oznaka img se koristi za stavljanje slike u HTML dokument i izgleda ovako:

Code: Select all

<img src="http://www.mojaprvastranica.ba/slika1.gif" width="120" height="90" alt="Moja Prva Stranica">
Atribut src govori browseru gde da pronađe sliku. Kao oznaka, ovo može biti apsolutno, kao što pokazuje gornji primer, ali je obično relativno. Na primer, ako kreirate sopstvenu sliku i sačuvate kao "slika12.jpg" u direktorijumu pod imenom "slike", onda će kod biti <img src = "slike/slika12.jpg" ...

Atributi širine i visine (width i height) su neophodni, jer ako su isključeni, browser će težiti da izračunate veličinu dok se slika učitava, umesto kada se stranica učitava, što znači da se izgled dokumenta može pomjeriti dok se stranica učitava.

Alt atribut je alternativni opis (alternative description). Ovo je razmatranje pristupačnosti, pružajući korisne informacije korisnicima koji nisu u mogućnosti da vide sliku (ako su na primer slabi vidoviti). Takodjer je veoma bitno za SEO (Search engine optimization = Optimizacija pretraživača ) , a o tome ćemo razgovarati kada stignemo do SEO.

Imajte na umu da, kao br tag, jer img element ne obuhvata bilo koji sadržaj, nije potrebno zatvaranje oznake.
Najčešće korišćeni formati datoteka koji se koriste za slike su JPEG, GIF i PNG. Oni su kompresovani formati i imaju veoma različitu upotrebu.

JPEG koristi matematički algoritam za kompresiju slike i malo će iskriviti original. Što je niža kompresija, to je veća veličina datoteke, ali jasnija je slika.

JPEG se obično koriste za slike kao što su fotografije.

GIF ne može imati više od 256 boja, ali zadržava boje originalne slike. Što je niži broj boja koje imate na slici, to će biti niža veličina datoteke. GIF-i takođe omogućavaju da bilo koji piksel na slici bude transparentan.

GIF se obično koriste za slike sa čvrstim bojama, kao što su ikone ili logotipi.

PNG replicira boje, slično GIF-u, ali omogućava 16 miliona boja, kao i alfa transparentnost (to jest, područje može biti transparentno 50%).

PNG se obično koriste za svestranu sliku u složenijim dizajnom, ali oni nisu u potpunosti podržani od strane starijih browsera.

Web uvjek postaje brži i brži, ali očito želite da vaše web stranice preuzmu što je brže moguće. Korišćenje slike visoke slike ne čini vašu ili vašu propusnost korisnika (ili strpljenje) bilo kakvu uslugu. Kompresija slike je odličan alat i potrebno je uravnotežiti kvalitet slike i veličinu slike. Većina modernih programa za manipulaciju slikama vam omogućavaju da kompresujete slike i najbolji način da saznate šta je najbolje za vas je probavanjem. :D

<!-- Tables -->

HTML tabele (tables) su još uvek poznate po tome što se koriste i zloupotrebljavaju da postavljaju stranice (lay out).
Doći ćemo kako postaviti stranicu bez tabela u CSS-u (Kada stignemo do CSS). Prava upotreba tabela jeste da uradite tačno ono što biste očekivali od tabele - da biste strukturirali tabelarne podatke (structure tabular data).

Postoji nekoliko oznaka koje se koriste u tabelama, a kako bi se u potpunosti uspjelo uhvatiti kako oni rade vjerovatno je najteža područja ovog HTML početnog tutoriala.

Kopirajte sledeći kod u vaš dokument i onda ćemo proći kroz ono što svaka oznaka radi:

Code: Select all

<table>
    <tr>
        <td>Red 1, ćelija 1</td>
        <td>Red 1, ćelija 2</td>
        <td>Red 1, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 2, ćelija 1</td>
        <td>Red 2, ćelija 2</td>
        <td>Red 2, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 3, ćelija 1</td>
        <td>Red 3, ćelija 2</td>
        <td>Red 3, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 4, ćelija 1</td>
        <td>Red 4, ćelija 2</td>
        <td>Red 4, ćelija 3</td>
    </tr>
</table>
Element table definiše tabelu.

tr element definiše red tebele.

td element definiše ćeliju podataka. Oni moraju biti zatvoreni u tr oznake, kao što je prikazano gore.

Ako zamislite tabelu 3x4, koja je 12 ćelija, trebalo bi da postoje četiri tr elementa da bi se definisali redovi i tri td elementa unutar svakog od redova, čineći ukupno 12 td elemenata.


<!-- Forms -->

Obrasci (Forms) se koriste za prikupljanje podataka koje korisnik unosi. Mogu se koristiti kao interfejs za web aplikaciju, na primjer, ili za slanje podataka preko Interneta.
Sama po sebi, obično nisu naročito korisne forme. One se koriste u kombinaciji sa programskim jezikom za obradu informacija koje korisnik unese. Ove skripte uzimaju sve oblike koji su u velikoj mjeri izvan nadležnosti ovog tutoriala, jer zahtijevaju druge jezike osim HTML i CSS.
Osnovne oznake koje se koriste u HTML obliku su form, input, textarea, select i option.

<!-- form -->

(Form)Obrazac definiše oblik i unutar ove oznake, ako koristite obrazac da korisnik podnese informacije (koje pretpostavljamo na ovom nivou), potreban je atribut akcije (action) kako bi se ispunio obrazac na kojem će se njegov sadržaj poslati.

Atribut metode (method) govori obrazac o tome kako će se podaci u njemu poslati i može dobiti vrijednost dobiti (get), koja je podrazumevana, i zatvara informacije o obliku na web adresu ili post, što (u suštini) nevidljivo šalje podatke .
get koristi se za kraće delove neosetljivih informacija - možda ćete videti informacije koje ste podneli u potrazi za web stranicom, na primer, da se pojave na web adresi svoje stranice sa rezultatima pretrage. Post koristi se za duža, sigurnija dostava, kao što je u kontaktnim formularima.
Tako će form elementa izgledati ovako:

Code: Select all

<form action="script.php" method="post"></form>
<!-- input -->

input tag je tata svjetskog oblika. Može da uzme mnoštvo promena, od kojih su najčešći navedeni ispod
Input lista cjele lude porodice

Optional Attributes / Opcioni atributi
  • name - Ime kontrole forme, da bude uparen sa njegovom vrijednošću.
    type - Tip kontrole oblika.

    - text: Tekstno polje - tekst bez preloma linija. (default)
    - password: Tekstualno polje sa nejasnim ulazom.
    - checkbox: Označi polje / označite kvadratić.
    - radio: Radijsko dugme - omogućava odabir jedne kontrole u grupi od ovih deljenja iste vrednosti atributa.
    - submit: Pošalji dugme - podnosi obrazac.
    - reset: Reset dugme - resetuje kontrole u obliku na njihove početne vrednosti.
    - hidden: Sakrivenu kontrolu kojoj korisniku ne može pristupiti direktno, a vrijednost koja se dostavlja sa ostalim informacijama o obliku.
    - image: Slika koja će, kada se klikne ili na drugi način izabere, podneti obrazac. Koordinate tačke piksela na koje je slika kliknuta će postati vrijednost kontrole.
    - file: Preuzimanje datoteke - omogućava da se lokalna datoteka izabere za slanje.
    - button: Dugme bez podrazumevanog ponašanja.
    - search: Tekstno polje za nizove pretraživanja.
    - tel: Tekst polje za brojeve telefona.
    - url: Tekstualno polje za apsolutna URLs.
    - email: Tekst polje za adrese e-pošte.
    - date: Kontrola izbora datuma.
    - time: Kontrola izbora vremena.
    - number: Tekstualno polje ili spinner za numeričke vrednosti.
    - range: Klizač(slider) ili slično za izbor numeričke vrednosti iz potencijalno nepreciznog opsega.
    - color: Boja sa 8-bitnom sRGB vrijednošću.

    value - Inicijalna vrednost.
    checked - Podešava polje za potvrdu(checkbox) ili radio tip koji će se podrazumevano proveravati.
    maxlength - Maksimalan broj dopuštenih znakova u vrijednosti.
    minlength - Minimalan broj dopuštenih znakova u vrijednosti.
    src - Koristi se i zahteva se kada je tip slika. Lokacija datoteke slike koja će se koristiti.
    alt - Koristi se i zahteva se kada je tip slika. Alternativni tekst koji će zameniti sliku ako slika koju je odredila src nije dostupna.
    width - Širina piksela slike.
    height - Visina piksela slike.
    accept - Koristi se kada je tip datoteka. Označava koji tipovi datoteka su prihvaćeni.

    - audio/*: Audio fajlovi.
    - video/*: Video fajlovi.
    - image/*: slike.
    - MIME type, kao što je aplikacija/pdf.
    - Specifične nadogradnje datoteka, kao što su .pdf.

    disabled - Onemogućava kontrolu forme.
    readonly - Korisnik vrši kontrolu formulara koji je nepromenljiv.
    autocomplete - Ako bi browser trebao izvršiti autokomplete na kontroli ili ne.

    - on (default)
    - off
    autofocus - Označava da se kontrola formata treba fokusirati na opterećenje stranica. Trebalo bi se koristiti samo na jednoj formi kontrole na stranici.
    dirname - Dodaje dodatno polje za slanje koje sadrži smernicu vrednosti kontrolne forme.
    -Tekst (bez razmaka). dirname = "this.dir" će priložiti this.dir = ltr (lijevo-desno) ili this.dir = rtl (desno-na lijevo) za slanje podataka, na primjer.

    form - Eksplicitno povezuje kontrolu sa elementom formulara, u koji se može ili ne mora uvrstiti unutar. Ako je odsutno, kontrola će biti povezana sa njegovim pretkom.
    - Tekst koji odgovara vrednosti atributa id elementa obrasca.

    formaction - Koristi se kada se tip pošalje ili slika. Na adresu na koju se dostavljaju podaci o obrazcu treba poslati. Da li će prevladati atribut akcije elementa obrasca.
    formmethod - Koristi se kada se tip pošalje ili slika. HTTP metod kojim se šalju podnijeti podaci obrazaca. Da li će prevladati atribut metode elementa obrasca.
    - get: uvlači vrijednosti formulara na URL adresu na koju je obrazac dostavljen. Koristi se za jednostavno slanje podataka, kao što su upit za pretraživanje, na primjer.
    - post: Nevidljivo šalje podatke o obliku u telo podnetog HTTP zahteva. Koristi se za detaljnije ili sigurnije slanje podataka, na primer kontakt obrazaca.
    formenctype - Koristi se kada se tip pošalje ili slika. MIME tip se koristi za kodiranje podataka o obliku. Hoće li prekloniti atribute enctype elementa formulara.
    formnovalidate - Koristi se kada se tip pošalje ili slika. Označava da formular ne treba validirati pre nego što se podnese. Prekriži atribut novalidata elementa forme elementa.
    formtarget - Koristi se kada se tip pošalje ili slika. Kontekst pretraživanja u kojem bi se otvorio odredišna URL adresa dostavljene forme. Da li će prevladati atribut cilja elementa elementa formulara.
    list - Povezuje kontrolu forme sa listom opcija koje sugerišu korisniku.
    max - Koristi se kada je tip datum, vreme, broj ili opseg. Maksimalna vrijednost.
    min - Koristi se kada je tip datum, vreme, broj ili opseg. Minimalna vrednost.
    step - Koristi se kada je tip datum, vreme, broj ili opseg. Povećanja u kojima se vrednost može povećati ili smanjiti.
    multiple -Koristi se kada je tip e-pošta ili datoteke. Označava da korisnik može uneti više od jedne vrednosti.
    pattern -Redovni izraz prema kojem se može proveriti vrednost.
    placeholder - Vidljivi nagoveštaj o tome kakve podatke treba da unese korisnik.
    required -Označava da polje formulara mora biti završeno.
    size - Broj znakova u kontrolama tipa teksta koji bi trebalo očekivati od korisnika tokom uređivanja.
/* Ako sam izostavio nešto, recite!*/

<input type = "text"> ili jednostavno <input> je standardno polje za tekst. Ovo takođe može imati atribut vrijednosti, koji postavlja početni tekst u tekstualni okvir.

<input type = "password"> je sličan tekstovnom sandučetu, ali će karakteri koje je korisnik unesen sakriven.

<input type = "checkbox"> je polje za potvrdu, na koje korisnik može uključiti i isključiti. Ovo takođe može imati atribut čekiranog (<check type> checkbox> - atribut ne zahtjeva vrijednost), i čini početno stanje check boxa uključeno, kako je bilo.

<input type = "radio"> je sličan checkbox-u, ali korisnik može izabrati samo jedno radio dugme u grupi. Ovo takođe može imati i provereni atribut.

<input type = "submit"> je taster koji će, kada je izabran, dostaviti obrazac. Možete da kontrolišete tekst koji se pojavljuje na dugmetu za slanje sa atributom vrijednosti, na primer <input type = "submit" value = "Ooo. Vidi tekst na dugmetu. Wow">.
Imajte na umu da, kao img i br oznake, ulazna oznaka, koja ne obuhvata bilo koji sadržaj, ne zahteva zatvaranje oznake.
<!-- textarea -->

textarea je, u osnovi, veliki, višenamenski tekst box. Predviđeni broj redova i stupaca može se definisati redovima i atributima kola, iako možete manipulirati veličinom do sadržaja vašeg srca koristeći CSS.

Code: Select all

<textarea rows="5" cols="20">Vidi tekst</textarea>
Svaki tekst koji odaberete da postavite između oznaka za otvaranje i zatvaranje (u ovom slučaju "vidi tekst") formira početnu vrednost tekstualnog područja.

<!-- select -->

The select tag radi sa option tag da napravite padajuće kutije za odabir.

Code: Select all


<select>
    <option>Opcija 1</option>
    <option>Opcija 2</option>
    <option value="third option">Opcija 3</option>
</select>

Kada se formular podnese, vrijednost izabrane opcije će biti poslana. Ova vrednost će biti tekst između izabrane oznake otvaranja i zatvaranja, osim ako je eksplicitna vrednost navedena sa atributom vrijednosti, u kom slučaju će se ovo poslati umjesto toga.Dakle, u prethodnom primeru, ako je izabrana prva stavka, biće poslata "Opcija 1", ako se izabere treća stavka, biće poslata "third option".

Slično asistiranom atributu polja za potvrdu i radio dugmadi, oznaka opcije može imati i odabrani atribut, da započne sa jednim od već odabranih predmeta, npr. <odabrana opcija> Naziv neki </ option> bi prethodno odabrao "Naziv neki" iz stavki.

<!-- Names -->

Sve navedene oznake će izgledati vrlo lijepo prikazane na stranici, ali ako spojite svoj obrazac na skriptu za obradu formata, svi će biti ignorirani. To je zato što polja trebaju imena. Dakle, za sva polja, treba dodati ime atributa, na primer <input type = "text" name = "Pas">.

Na primer, kontaktni formular za Nojevu Arku može izgledati nešto slično dole. (Napomena: ovaj obrazac neće raditi ako ne postoji datoteka "contactus.php", koja se navodi u atributu akcije oznake za obradu, da bi se nosio sa podacima).

Code: Select all


<form action="contactus.php" method="post">

    <p>Ime:</p>
    <p><input type="text" name="name" value="Vaše Ime"></p>

    <p>Vrsta:</p>
    <p><input name="vrsta"></p>
    <!-- remember: 'type="text"'nije u stvari potreban -->

    <p>Koment: </p>
    <p><textarea name="koment" rows="5" cols="20">Vaš Koment</textarea></p>

    <p>Ti si:</p>
    <p><input type="radio" name="tisi" value="musko"> Musko</p>
    <p><input type="radio" name="tisi" value="zensko"> Zensko</p>
    <p><input type="radio" name="tisi" value="skulptura"> Skulptura</p>
    <p><input type="radio" name="tisi" value="bespolan"> Bespolan</p>

    <p><input type="submit"></p>

</form>



oooj umorih se, dosta za danas :) uživajte u čitanju :-D

P.S.

Ako sam nešto propustio, javite mi
Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#11 Re: HTML Beginner

Post by Cookie85 »

<!-- Sve zajedno -->

Ako ste prošli kroz sve stranice u ovom HTML početnom tutorijalu, trebali biste biti kompetentni HTML.

Sljedeći kod uključuje sve metode koje sam pisao:

Code: Select all


<!DOCTYPE html>
<html>
<head>

    <title>Moja Prva Stranica</title>

    <!-- Ovo je Komentar -->

</head>

<body>

<h1>Moja Prva Stranica</h1>

<h2>Šta je ovo?</h2>
<p>Jednostavna stranica sastavljena pomoću HTML-a. <em> Rekao sam Jednostavna stranica sastavljena pomoću HTML-a. </ em> Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a. Jednostavna stranica sastavljena pomoću HTML-a.</p>

<h2>Zašto je to?</h2>
<ul>
    <li>Da biste naučili HTML</li>
    <li>
       Praviti se važan
        <ol>
            <li>Mom šefu</li>
            <li>Mojim prijateljima</li>
            <li>Mom psu</li>
            <li>Za malu pričajuću patku u mom mozgu</li>
        </ol>
    </li>
    <li>Zato što sam se zaljubljen u svoj kompjuter i želim da dam malo ljubavi prema HTML-u.</li>
</ul>

<h2>Gdje pronaći tutorial</h2>
<p><a href="https://forum.klix.ba/html-t150819.html"><img src="https://static.klix.ba/media/images/vijesti/m32_180820045.jpg" width="120" height="90" alt="Klix Forum"></a></p>

<h3>Tabela</h3>
<table>
    <tr>
        <td>Red 1, ćelija 1</td>
        <td>Red 1, ćelija 2</td>
        <td>Red 1, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 2, ćelija 1</td>
        <td>Red 2, ćelija 2</td>
        <td>Red 2, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 3, ćelija 1</td>
        <td>Red 3, ćelija 2</td>
        <td>Red 3, ćelija 3</td>
    </tr>
    <tr>
        <td>Red 4, ćelija 1</td>
        <td>Red 4, ćelija 2</td>
        <td>Red 4, ćelija 3</td>
    </tr>
</table>

<h3>Neka Forma</h3>
<p><strong>Bilješka:</strong> Izgleda kao deo, ali neće uraditi prokletu stvar.</p>

<form action="script.php" method="post">

<p>Ime</p>
<p><input name="ime" value="Vaše Ime"></p>

<p>Komentar: </p>
<p><textarea rows="10" cols="20" name="komentar">Vaš Komentar</textarea></p>

<p>Ti si:</p>
<p><input type="radio" name="tisi" value="musko"> Musko</p>
<p><input type="radio" name="tisi" value="zensko"> Zensko</p>
<p><input type="radio" name="tisi" value="skulptura">Skulptura</p>
<p><input type="radio" name="tisi" value="bespolan" checked> Bespolan</p>

<p><input type="Posalji"></p>

</form>
</body>
</html>


Eto ga. Snimite fajl i igrajte se sa njim - ovo je najbolji način da shvatite kako sve funkcioniše.

Završen HTML Beginner tutorial.

Sada ćemo naučiti CSS za početnike (CSS Beginner Tutorial) , pa ćemo se vratiti na HTML Intermediate Tutorial ... Sretno!

Ako imate kakvih pitanja, pišite mi
Post Reply