Hyper Text Markup Language – HTML – 3. korak

Hyper Text Markup Language – HTML – 3. korak

 

Dobro došli na poslednje druženje sa HTML-om u ovoj godini! 🙂 

 

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:

<iframe width=”560” height=”315”

Src=https://www.youtube.com/embed/6IbBc1lX7Q0

frameborder=”0″ allowfullscreen></iframe>

 

*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>

<html>

<head>

<title> Provera znanja </title>

<meta name=”description” content=”Studenica”>

</head>

<body>

<h2> Provera znanja </h2>

<form id=”formular”>

<p>1. Kraljeva crkva je podignuta:

<input type=”radio” name=”odgovori1″ value=”0″>1114 god.

<input type=”radio” name=”odgovori1″ value=”0″>1214 god.

<input type=”radio” name=”odgovori1″ value=”5″>1314 god.

<input type=”radio” name=”odgovori1″ value=”0″>1414 god.

</p>

<p>2. Ktitor Kraljeve crkve je: <input type=”text” id=”odgovor2″></p>

<p>2. Opisite u nekoliko recenica arhitekturu Kraljeve crkve. <br>

<textarea id=”odgovor3″ cols=”60″ rows=”3″></textarea></p>

<p>4. Kraljeva crkva je posvecena: <select id=”odgovor4″ size=”1″>

<option value=”0″> Sv. Savi

<option value=”5″> Joakimu i Ani

<option value=”0″> Kralju Milutinu

<select></p>

<p><input type=”button” value=”Predaj odgovore”></p>

</form>

</body>

</html>

 
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.

 

<form id=”formular”>

. . .

</form>

 

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

<input type=”text” id=”odgovor1”>

 

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

<input type=”buton” value=”Predaj odgovore”>

 

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.

<input type=”radio” name=”odgovori1″ value=”0″>1114 god.

<input type=”radio” name=”odgovori1″ value=”0″>1214 god.

<input type=”radio” name=”odgovori1″ value=”5″>1314 god.

<input type=”radio” name=”odgovori1″ value=”0″>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.

<select id=”odgovor4” size=”1”>

<option value=”0”>Sv. Savi

<option value=”5”>Joakimu i Ani

<option value=”0”>Kralju Milutinu

</select>

 

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:

<textarea id=”odgovor3” cols=”60” rows=”3”></textarea>

 


 

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.

U iščekivanju pozitivnih kao i negativnih kritika Nooberka vas pozdravlja! 🙂 

 


 

Uživajte u praznicima koji slede! itgirls

Potrudite se da sebi ulepšate svaki sledeće momenat.

Sa osmehom dočekajte Novu godinu.

Ne zaboravite da svoje slobodno vreme posvetite učenju čega god.

To će se jednog dana sasvim sigurno isplatiti. 🙂 

 

 

 

 

  • Katarina Kokerić

    jedno pitanjce 🙂 zasto se se stavlja id ako se vec nigde ne poziva (nema js scripte)?
    id=”odgovor4″ i id=”odgovor2″