[ccpw id="5"]

Veb SajtoviHyper Text Markup Language – HTML – 3. korak

Hyper Text Markup Language – HTML – 3. korak

-

Pravljenje strana u HTML-u.

Kako promeniti ikonicu?

Nalovi.

Formatiranje teksta.

Lista.

Kako napraviti tabelu?

Slike.

Linkovi.

Sve gore navedeno smo uspešno savladali. Ovaj post će vam poslužiti da vašu stranu u HTML-u obogatite još više.

Umetnuti sadržaj

Stranica može da sadrži linkove ka drugim sadržajima na vebu, ali može u sebi da ima i ugrađene sadržaje sa drugih veb lokacija. Sajtovi koji barataju sa velikim količinama sadržaja često sami nude spreman HTML element koji se jednostavnim kopiranjem umeće u bilo koju veb stranicu koju kreiramo. Primeri sajta koji nudi ovakve opcije deljenja je opšte poznat You Tube.

Ukoliko želimo da u našu stranicu umetnemo film sa sajta You Tube koji sadrži recimo prikaz fotografija nekog grada, potrebno je da prvo pronađemo željeni film na sajtu You Tube. Ispod filma se nalazi opcija za deljenje ovog sadržaja. Kada kliknemo na Share, pa ispod toga na Embed, pojavljuje se spreman element IFRAME sa postavljenim vrednostima atributa u otvorenom tagu, koji možemo da iskopiramo i umetnemo u HTML kod stranice koju kreiramo.

link-word

Element IFRAME

Atribut src sadrži adresu sadržaja na vebu. Element IFRAME kojim ćemo uključiti link sa izabranim prikazom unutar veb-stranice izgleda ovako:

*Budite pažljivi prilikom izbora materijala koji ćete uključiti na vašu veb-stranicu. Možete sami da kreirate video vajlove. U ovom primeru je u veb-stranicu uključen video koji je kreiran od fotografija jednog posetilaca navedenog grada. Video je nakon kreiranja I objavljen na sajtu You Tube, odakle je preuzet link sa adresom za uključivanje.

Element FORM

Element FORM u HTML dokumentu služi kao kontejner za kontrole i koristimo ga kada treba da na veb-stranicu postavimo neki formular koji će popunjavati posetioci naše veb-stranice. Kontrole su elementi grafičkog interfejsa i služe za komunikaciju sa korisnikom. Primeri nekih od kontrola su: dugme, polje za unos teksta, polje za unos lozinke, ček-boks, kombo-boks, radio-dugme, razne vrste listi i tako dalje.

Možemo, na primer, da kreiramo veb-stranicu sa pitanjima za proveru znanja. Upotrebićemo nekoliko različitih vrsta kontrola. Nakon što se popuni odgovori i klikne na dugme, bilo bi poželjno da se izvrši obrada odgovora. Za obradu unetih podataka, u ovom slučaju odgovora na data pitanja, možemo da pišemo programski kod koji se izvršava na klijentu, ili da pišemo programski kod koji se izvršava na serveru. Oba načina programiranja će biti obrađena u narednim tekstovima, dok će ovde bizi prikazano samo formiranje formulara u okviru HTML dokumenta.

Izgled veb-stranice sa pitanjima i kontrolama pomoću kojih mogu da se unesu odgovori.

<!doctype html>

Provera znanja

1. Kraljeva crkva je podignuta:

1114 god.

1214 god.

1314 god.

1414 god.

2. Ktitor Kraljeve crkve je:

2. Opisite u nekoliko recenica arhitekturu Kraljeve crkve.

 

4. Kraljeva crkva je posvecena:

 

htmltest1

ntml-test

Element FORM je označen otvorenim i zatvorenim tagom između kojih se nabrajaju kontole koje se nalaze na formularu. Kako je nakon unosa podataka, potrebno da se izvrši neki program ili na klijentu, ili na serveru, potrebno je da možemo da pristupimo podacima unetim kroz kontrole. Prvenstveno iz tog razloga, koristimo identifikatore kontrola i celog formulara koje definišemo kao vrednost atributa id.

. . .

Polje za unos teksta je element INPUT koji je tekstualnog tipa. Na primer:

Dugme je takođe element INPUT. Tekst koji piše na dugmetu se definiše kao vrednost atributa value.

Radio-dugme je element INPUT čiji je tip radio. Ukoliko postavimo nekoliko ovih kontrola na formular, možemo da obezbedimo da samo jedno u jednom trenutku bude označeno, tako što ćemo da stavimo svima isto ime kao vrednost atributa name. Za ovu kontrolu može da se veže i vrednost value koja može da se upotrebi kasnije u program, na primer za boldovanje, tako što tačan odgovor ima vrednost 5, a ostali 0.

1114 god.

1214 god.

1314 god.

1414 god.

Izbor tačnog od više ponuđenih odgovora, može da se realizuje I padajućom listom koja je element SELECT. Za svaku stavku liste postoji tekst koji piše, a vrednost koja je vezana za tu stavku. U ovom slučaju će na listi pisati redom tri ponuđena odgovora, a vrednosti će moći kasnije u program da se iskoriste za bodovanje.

Polje sa mogućnošću unosa i prikaza veće količine teksta je element TEXTAREA.

Veličina ovog polja se definiše brojem kolona, odnosno redova. Na primer:

Još jedan korak dalje u HTML-u.

Naučili smo još dve bitne stvari vezane za HTML.

*Kao i uvek, koristila sam Notepad ++ editor, koji je najednostavniji za početnike.

Sledeće godine se takođe družimo sa HTML-om dok ne pređemo na CSS.

Iskreno se nadam da vam je sve jasno, ako ipak postoje nedoumice oko nekih pojedinosti, možete kontaktirati sa mnom.

Ako svakako idete korak po korak kao u mom postu, nedoumica biti neće.

Radujem se sledećem druženju.

Poslednji postovi

Kako odabrati odgovarajući sto i stolicu za kompjuter?

Mnogo toga treba uzeti u obzir pri izboru kancelarijske stolice, od materijala, podrške i prilagodljivosti do ukupnog stila i cene. Odabir kancelarijske stolice verovatno nije nešto...

Software and Data Engineering – novina u obrazovanju

Još jedna sjajna sagovornica, Marina Marjanović Jakovljević, reći će nam ovom prilikom nešto više o novom smeru na fakultetu posvećenom Data Science, odnosno – nauci...

Fabrika znanja – ITgirls u Podgorici!

Regionalna IT manifestacija biće održana sedmi put za redom u Podgorici, na Univerzitetu Donja Gorica, između 10. i 11. oktobra. Najveći IT događaj u regionu okupiće...

Calling ITgirls: Prvi Beyond Code meetup u Beogradu

Prvi Beyond Code meetup biće održan u sredu, 6. septembra sa početkom u 18h u prostorijama beogradskog Startit Centra. Nakon Amerike, serija ovih događaja sledi...

Popularno