<!--
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.
<!--
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
P.S.
Ako sam nešto propustio, javite mi