Mala škola Linuxa: html

Showing posts with label html. Show all posts

Nov 12, 2023

rpm -qa oddjob

Komanda rpm -qa oddjob se koristi za proveru da li je paket oddjob instaliran na sistemu. Ova komanda radi sledeće:

rpm: Ovo je alat koji se koristi za rad sa RPM paketima na sistemima zasnovanim na RPM (Red Hat Package Manager) sistemu (kao što su distribucije poput Red Hat, CentOS, Fedora).
-qa: Ova opcija znači "query all" i koristi se za prikazivanje svih instaliranih paketa.
oddjob: Ovo je naziv paketa za koji želite proveriti da li je instaliran.

Ako izvršite ovu komandu i ne vidite nikakav izlaz, to znači da paket oddjob nije instaliran na vašem sistemu. Ako je paket instaliran, komanda će vratiti informacije o verziji paketa i drugim detaljima.

Napomena: U nekim distribucijama Linuxa, možda ćete morati koristiti sudo ispred ove komande kako biste imali dozvole za pregled instaliranih paketa. Na primer, sudo rpm -qa oddjob.

Oddjob je sistemsko alat koji se koristi za automatizaciju određenih administrativnih zadataka na Unix/Linux operativnim sistemima. Glavni cilj Oddjob-a je pojednostavljivanje i automatizacija rutinskih administrativnih zadataka kako bi se olakšalo upravljanje sistemom.

Evo nekoliko ključnih karakteristika Oddjob-a:

Automatizacija Zadataka: Oddjob omogućava automatizaciju različitih administrativnih zadataka, kao što su upravljanje korisničkim nalozima, generisanje sigurnosnih ključeva, postavljanje privilegija i drugi slični zadaci.
Integracija sa PAM-om (Pluggable Authentication Modules): PAM je sistem za upravljanje autentifikacijom na Unix/Linux sistemima. Oddjob se često koristi za integraciju sa PAM-om kako bi pružio dodatne funkcionalnosti i poboljšao sigurnost sistema.
Politike Bezbednosti: Oddjob može primenjivati sigurnosne politike i ograničenja, obezbeđujući kontrolu pristupa resursima sistema.
Pravljenje Poslova (Jobova): Oddjob može definisati i izvršavati "poslove" (jobs) koji obavljaju određene zadatke u skladu sa prethodno definisanim pravilima.
Korišćenje DBus Sistema: Oddjob koristi DBus, sistem za komunikaciju između softverskih komponenti, kako bi omogućio komunikaciju između različitih procesa na sistemu.
Rad sa SELinux-om: Može sarađivati sa SELinux-om (Security-Enhanced Linux) kako bi obezbedio dodatne nivoe sigurnosti na sistemu.

Oddjob je često korišćen u okruženjima gde je potrebno centralizovano upravljanje i automatizacija administrativnih zadataka.

Oct 29, 2023

HTML Forme

HTML forme (<form>) se koriste za prikupljanje podataka od korisnika na web stranici. Obično se koriste za kreiranje kontaktnih obrazaca, pretrage, registracije i mnoge druge vrste interaktivnih elemenata na web stranicama. Ovde su osnovni koncepti i elementi HTML formi:

Osnovni koncepti:

<form> element: Osnovni okvir forme. Definiše početak i kraj forme.
<input> element: Koristi se za unos podataka. Može biti u obliku teksta, broja, dugmeta za slanje, i drugih vrsta.
<textarea> element: Omogućava unos više teksta u okviru forme.
<select> element: Koristi se za izbor iz padajućeg menija. Ovo se često koristi za izbor iz niza opcija.
<button> element: Dodaje dugme koje korisnici mogu kliknuti za slanje forme.
<label> element u HTML-u se koristi za obeležavanje (labeliranje) drugih elemenata, često za povezivanje sa elementom za unos podataka kao što su <input>, <textarea>, ili <select>. Labeliranje elemenata poboljšava pristupačnost i korisničko iskustvo tako što omogućava korisnicima da lakše razumeju šta treba uneti u određeno polje.

Atributi forme: Formama se mogu dodati različiti atributi kao što su action (adresa za slanje podataka), method (HTTP metoda za slanje podataka, obično "GET" ili "POST"), i drugi atributi koji definišu ponašanje forme.

Primer forme:

Evo jednostavnog primera forme za unos korisničkog imena i lozinke:

<!DOCTYPE html>

<html>

<head>

<title>Prijava</title>

</head>

<body>

<h1>Prijava na sistem</h1>

<label for="korisnickoIme">Korisničko ime:</label>

<label for="lozinka">Lozinka:</label>

<button type="submit">Prijavi se</button>

</form>

</body>

</html>

U ovom primeru, forma sadrži dva polja za unos korisničkog imena i lozinke, kao i dugme za slanje podataka. Kada korisnik popuni formu i klikne na dugme "Prijavi se," podaci će biti poslati na adresu procesiranje.php putem HTTP POST metode (može se koristiti i GET metoda) radi dalje obrade.

HTML forme su osnovni alat za interakciju sa korisnicima na web stranicama i omogućavaju prikupljanje, obradu i slanje podataka sa web stranica.

<input> element

<input> element se koristi za unos podataka na web stranici, i može imati različite tipove u zavisnosti od vrste podataka koja se očekuje od korisnika. Ovde su neki od najčešće korišćenih tipova <input> elemenata:

Text (tekstualni unos):

Ovaj tip omogućava korisnicima da unesu tekstualne podatke kao što su ime, prezime, ili druge informacije.

Password (lozinka):

Ovaj tip se koristi za unos lozinke, a unos će biti sakriven zvezdicama ili tačkama radi bezbednosti.

Email (e-mail adresa):

Ovaj tip se koristi za unos e-mail adrese i može automatski proveriti da li je adresa u ispravnom formatu.

Number (broj):

Ovaj tip omogućava unos brojeva, a može se postaviti i minimalna i maksimalna vrednost.

Date (datum):

Ovaj tip omogućava unos datuma. Korisnici mogu odabrati datum iz kalendara.

Checkbox (potvrdni okvir):

Ovaj tip omogućava korisnicima da označe/odbiju određene opcije. Može se koristiti za prihvatanje uslova ili odabir više opcija.

Radio (radio dugme):

<input type="radio" name="pol" id="muski" value="muski"> Muški

<input type="radio" name="pol" id="zenski" value="zenski"> Ženski

Ovaj tip se koristi kada korisnici trebaju da odaberu samo jednu opciju iz više ponuđenih.

File (fajl):

Ovaj tip omogućava korisnicima da odaberu fajl sa svog uređaja.

Submit (dugme za slanje):

Ovaj tip se koristi za slanje podataka sa forme na server.

Button (obično dugme):

Ovaj tip se koristi za stvaranje dugmeta koje može izvršiti JavaScript funkciju na klik.

Hidden (sakriveno polje):

Ovaj tip omogućava sakrivanje vrednosti koja se šalje na server.

Ovo su samo neki od najčešće korišćenih tipova <input> elemenata. Svaki od njih ima svoju svrhu i koristi se u zavisnosti od potreba forme i vrste podataka koju treba prikupiti od korisnika.

HTML Head

<head> element u HTML-u je deo web stranice koji sadrži metapodatke i informacije o dokumentu, ali se ne prikazuje direktno na stranici. Ovaj element se koristi za postavljanje različitih informacija o web stranici, kao što su naslov, karakterna šifra, veze ka spoljnim resursima i druge metapodaci. Evo objašnjenja i primera <head> elementa:

Objašnjenje:

Naslov stranice (title): <title> oznaka u <head> se koristi za postavljanje naslova stranice koji se prikazuje u traci za naslov web pregledača. Naslov je važan jer pomaže korisnicima da identifikuju sadržaj stranice i poboljšava SEO (optimizaciju za pretraživače).
Karakterna šifra (character set): <meta charset="UTF-8"> oznaka se koristi za definisanje karakterne šifre koja se koristi na stranici. UTF-8 karakterna šifra je često preporučena jer podržava mnoge jezike i karaktere.
Veze ka spoljnim resursima: <link> oznake se koriste za povezivanje sa spoljnim resursima kao što su CSS fajlovi (za stilizaciju), ikone (favicon), i drugi resursi. Takođe, <script> oznake se koriste za uključivanje JavaScript fajlova.

Primeri:

<!DOCTYPE html>

<html>

<head>

<title>Primer Head Elementa</title>

</head>

<body>

<h1>Dobrodošli na moju web stranicu</h1>

<p>Ovo je primer korišćenja <head> elementa.</p>

</body>

</html>

U ovom primeru, <head> element sadrži naslov stranice ("Primer Head Elementa"), karakternu šifru (UTF-8), i veze ka spoljnim resursima (CSS fajl i favicon ikona). Ovi metapodaci pomažu web pregledačima i pretraživačima da razumeju i obrade stranicu na odgovarajući način.

HTML Putanje do fajlova

HTML putanje do fajlova (File Paths) se koriste da biste naveli putanju do resursa kao što su slike, stilovi (CSS), JavaScript fajlovi i druge datoteke koje se koriste na web stranici. Postoje dve osnovne vrste HTML putanja: apsolutne (absolute file paths) i relativne (relative file paths).

Apsolutne putanje (Absolute File Paths): Apsolutne putanje počinju od korenskog direktorijuma ili URL-a. One precizno određuju lokaciju resursa nezavisno od trenutnog direktorijuma u kojem se nalazi HTML fajl. Na primer:

Apsolutna putanja za URL adrese: https://www.example.com/images/pic.jpg

Apsolutna putanja za direktorijume na serveru: /images/pic.jpg

Apsolutna putanja za lokalne fajlove: C:/Users/User/Documents/myfile.txt

Relativne putanje (Relative File Paths): Relativne putanje počinju od trenutnog direktorijuma i koriste se za navigaciju do resursa u odnosu na trenutni HTML fajl. Postoje različite vrste relativnih putanja:

Relativna putanja do istog direktorijuma: pic.jpg (nema predstava direktorijuma, pa se pretpostavlja da je u istom direktorijumu kao HTML fajl).

Relativna putanja do poddirektorijuma: images/pic.jpg (slika se nalazi u poddirektorijumu "images" u odnosu na trenutni direktorijum).

Relativna putanja za prelazak na nadređeni direktorijum: ../pic.jpg (prikazuje sliku u direktorijumu iznad trenutnog).

Primer relativnih putanja:

<!DOCTYPE html>

<html>

<head>

<title>Primer HTML Putanja</title>

</head>

<body>

<h1>Slika iz istog direktorijuma</h1>

<h2>Slika iz poddirektorijuma</h2>

<h3>Slika iz nadređenog direktorijuma</h3>

</body>

</html>

Ovi primeri ilustruju kako se koriste relativne putanje za uključivanje slika i stilova na web stranici. Relativne putanje su često praktičnije jer omogućavaju da se lakše premeste ili prenesu celokupne web stranice na različite lokacije, dok apsolutne putanje zavise od specifičnih adresa i direktorijuma.

HTML JavaScript

JavaScript se koristi za dodavanje dinamičkog ponašanja na web stranici. Na primer, možete koristiti JavaScript za validaciju forme, animaciju, interaktivne elemente i još mnogo toga. Evo osnovnog primera koji koristi JavaScript za prikaz poruke korisniku:

<!DOCTYPE html>

<html>

<head>

<title>Moj Prvi HTML i JavaScript Primer</title>

</head>

<body>

<h1>Kliknite na dugme</h1>

<button id="mojeDugme">Klikni me</button>

// JavaScript kod

document.getElementById("mojeDugme").addEventListener("click", function() {

document.getElementById("poruka").innerText = "Hvala što ste kliknuli!";

});

</script>

</body>

</html>

U ovom primeru, JavaScript se koristi da dodamo "slušalac događaja" na dugme. Kada korisnik klikne na dugme, JavaScript reaguje i menja sadržaj paraagrafa sa ID-om "poruka".

Kada kombinujete HTML i JavaScript, možete stvoriti interaktivne i dinamičke web stranice koje omogućavaju korisnicima da komuniciraju sa sadržajem i pruže bogato korisničko iskustvo.

HTML Iframe

Objašnjenje:

Atributi <iframe> oznake: Ključni atribut za <iframe> oznaku je src, koji definiše izvor (URL) stranice koja će se ugnježdavati. Takođe, možete koristiti druge atribute za postavljanje visine, širine, okvira, i druge osobine.

Primeri:

Uključivanje druge web stranice unutar trenutne stranice:

Postavljanje visine i širine <iframe> elementa:

Korišćenje <iframe> za ugnježdavanje Google Mape:

Korišćenje <iframe> za uključivanje YouTube video zapisa:

Važno je napomenuti da <iframe> može predstavljati sigurnosni rizik, posebno ako se uključuje sadržaj sa nepouzdanih izvora. Takođe, prilagodite visinu i širinu <iframe> elementa kako bi odgovarala ugnježdenom sadržaju i izbegavajte promociju sadržaja koji krši autorska prava ili druga pravila.

HTML ID atribut

ID atribut (Identifier attribute) se koristi za jedinstveno identifikovanje određenog HTML elementa na web stranici. Svaki ID atribut mora biti jedinstven unutar HTML dokumenta, što znači da ne možete dodeliti isti ID više od jednom elementu. ID atribut je često korišćen za ciljanje specifičnih elemenata CSS-om ili za manipulaciju elementima putem JavaScript-a. Evo objašnjenja i primera za ID atribut:

Objašnjenje:

ID atribut: ID atribut se dodeljuje HTML elementima koristeći id atribut, na primer: <div id="mojElement">. Vrednost ID atributa može sadržati slova, brojeve i crte. Obeležje ID atributa treba da bude jedinstveno unutar HTML dokumenta.

Primeri:

Korišćenje ID atributa za ciljanje elementa sa CSS-om:

<!DOCTYPE html>

<html>

<head>

<style>

#mojElement {

color: red;

}

</style>

</head>

<body>

<p>Ovo je <span id="mojElement">crveni</span> tekst.</p>

</body>

</html>

Korišćenje ID atributa za manipulaciju elementa putem JavaScript-a:

<!DOCTYPE html>

<html>

<head>

function promeniTekst() {

var element = document.getElementById("mojElement");

if (element) {

element.innerText = "Promenjen tekst";

}

</script>

</head>

<body>

<p>Ovo je <span id="mojElement">originalni</span> tekst.</p>

<button onclick="promeniTekst()">Promeni tekst</button>

</body>

</html>

Upotreba ID atributa za navigaciju na određeni deo stranice:

<!DOCTYPE html>

<html>

<head>

<style>

#sekcija1 {

background-color: lightblue;

}

#sekcija2 {

background-color: lightgreen;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#sekcija1">Sekcija 1</a></li>

<li><a href="#sekcija2">Sekcija 2</a></li>

</ul>

</nav>

<h2>Sekcija 1</h2>

<p>Ovo je prva sekcija.</p>

</section>

<h2>Sekcija 2</h2>

<p>Ovo je druga sekcija.</p>

</section>

</body>

</html>

ID atribut je koristan za označavanje i identifikovanje specifičnih elemenata na stranici, omogućava ciljanje tih elemenata putem CSS-a ili JavaScript-a, kao i navigaciju na određene delove stranice. Važno je koristiti jedinstvene vrednosti za ID atribut kako biste izbegli konflikte.

HTML Page Title

Naslov stranice (Page Title) je tekst koji se prikazuje u naslovnoj traci web pregledača i koristi se za identifikaciju i opisivanje sadržaja web stranice. Naslov stranice je ključan za SEO (optimizacija za pretraživače) i za korisničko iskustvo, jer pomaže korisnicima i pretraživačima da brže razumeju o čemu se radi na web stranici.

Evo objašnjenja i primera za postavljanje naslova stranice u HTML dokumentu:

Objašnjenje:

<title> oznaka: Naslov stranice se postavlja unutar <title> oznake u <head> delu HTML dokumenta. Sadržaj ove oznake je ono što će se prikazivati u naslovnoj traci web pregledača kada posetilac otvori stranicu.

Primeri:

Postavljanje osnovnog naslova stranice:

<!DOCTYPE html>

<html>

<head>

<title>Ovo je naslov moje web stranice</title>

</head>

<body>

<h1>Dobrodošli na moju web stranicu</h1>

<p>Ovo je primer kako se postavlja naslov stranice.</p>

</body>

</html>

Upotreba dinamičkog naslova na web stranici koristeći JavaScript:

<!DOCTYPE html>

<html>

<head>

<title id="dinamickiNaslov">Ovo je početni naslov</title>

</head>

<body>

<h1>Dobrodošli na moju web stranicu</h1>

<button onclick="promeniNaslov()">Promeni naslov</button>

<p>Ovo je primer kako se dinamički menja naslov stranice.</p>

function promeniNaslov() {

document.getElementById("dinamickiNaslov").innerText = "Novi naslov stranice";

}

</script>

</body>

</html>

Korišćenje promenljive vrednosti naslova na stranici (na primer, naslov se može učitati iz baze podataka):

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Dobrodošli na moju web stranicu</h1>

<p>Ovo je primer kako se dinamički menja naslov stranice na osnovu promenljive vrednosti.</p>

</body>

</html>

Naslov stranice je važan za SEO jer pomaže pretraživačima da indeksiraju i razumeju sadržaj stranice. Takođe je važan za korisničko iskustvo, jer pruža jasne informacije o tome šta posetioci mogu da očekuju na stranici.

HTML Images (Slike)

Slike (Images) su ključni deo web stranica i koriste se za vizuelni prikaz grafika, fotografija i drugih vizuelnih elemenata. Da biste uključili slike u HTML dokument, koristite <img> oznaku. Evo objašnjenja i primera za uključivanje slika u HTML dokument:

Objašnjenje:

<img> oznaka: Oznaka za prikazivanje slika u HTML dokumentima je <img>. Ova oznaka ne zahteva zatvarajući tag, jer ne sadrži unutrašnji sadržaj. Umesto toga, koristi se atribut src za navođenje putanje do slike.
Atribut src: Atribut src (source) se koristi za navođenje putanje do slike. Putanja može biti apsolutna (npr. URL) ili relativna (npr. putanja do lokalne slike na serveru). Na primer, <img src="slika.jpg">.
Atribut alt: Atribut alt (alternative text) se koristi za pružanje alternativnog teksta koji se prikazuje ako slika ne može da se učita ili za osobe sa oštećenim vidom. Na primer, <img src="slika.jpg" alt="Opis slike">.

Primeri:

Uključivanje slike sa apsolutnom putanjom:

Uključivanje slike sa relativnom putanjom (slika se nalazi u istom direktorijumu kao HTML dokument):

Dodavanje širine i visine slike (koristeći width i height atribute) kako bi se prilagodila:

Uključivanje slike kao hyperlinka (slika se može kliknuti i vodi na drugu stranicu):

</a>

Slike su ključni deo web dizajna i često se koriste za poboljšanje vizuelnog sadržaja na web stranicama. Važno je pridržavati se pravila autorskih prava i koristiti odgovarajuće formate slika kako bi se obezbedila dobra performansa i ispravan prikaz na različitim uređajima.

HTML CSS

CSS (Cascading Style Sheets) je jezik za stilizaciju koji se koristi za definisanje izgleda i dizajna web stranica. On omogućava odvajanje stila (dizajna) od strukture (HTML) web stranica, što olakšava promene u izgledu bez uticaja na sadržaj.

Inline CSS

Inline CSS je tehnika stilizacije HTML elemenata gde se stilovi definišu direktno unutar HTML elemenata koristeći style atribut. Ovo omogućava primenu specifičnih stilova samo na odabrane elemente. Evo objašnjenja i primera inline CSS-a:

Objašnjenje:

Da biste koristili inline CSS, dodajte style atribut u HTML otvarajući tag elementa i definišite stilove unutar ovog atributa. Inline CSS ima prioritet nad eksternim i internim CSS stilovima, što znači da će stilovi definisani inline biti primenjeni čak i ako postoje konflikti sa drugim stilovima.

Primeri:

Promena boje teksta i pozadine za <p> element:

<p style="color: red; background-color: yellow;">Ovo je crveni tekst na žutoj pozadini.</p>

Promena font veličine i poravnavanje za <h1> element:

<h1 style="font-size: 24px; text-align: center;">Naslov</h1>

Dodavanje granice i margine za <div> element:

<div style="border: 1px solid blue; margin: 10px;">Ovo je div sa plavom granicom i margina od 10px.</div>

Inline CSS je korisno kada želite brzo primeniti specifične stilove na određene elemente bez potrebe za definisanjem eksternih ili internih CSS fajlova. Međutim, treba ga koristiti sa oprezom, posebno za globalnu stilizaciju, jer može dovesti do nepreglednog koda ako se često ponavlja. Za opštu stilizaciju celog web sajta preporučuje se upotreba eksternih CSS fajlova.

Interni CSS

Interni CSS, takođe poznat kao ugnežđeni CSS, je tehnika stilizacije HTML elemenata gde se stilovi definišu unutar samog HTML dokumenta, obično unutar <style> oznake u <head> delu HTML dokumenta. Ovo omogućava definisanje stilova koji se primenjuju na celu stranicu ili na određene delove stranice. Evo objašnjenja i primera internog CSS-a:

Objašnjenje:

Da biste koristili interni CSS, koristite <style> oznaku unutar <head> dela HTML dokumenta. Unutar <style> oznake možete definisati CSS pravila za različite HTML elemente koristeći selektore.

Primeri:

Unutarnji stil za celu stranicu:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

</style>

</head>

<body>

<h1>Naslov</h1>

<p>Ovo je primer internog stila.</p>

</body>

</html>

Unutarnji stil za određeni HTML element:

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

color: blue;

}

</style>

</head>

<body>

<h1>Naslov 1</h1>

<h2>Naslov 2</h2>

</body>

</html>

Unutarnji stil za klasu:

<!DOCTYPE html>

<html>

<head>

<style>

.naslov {

font-weight: bold;

}

</style>

</head>

<body>

<h1 class="naslov">Boldovan naslov</h1>

<p>Ovo nije boldovan tekst.</p>

</body>

</html>

Unutarnji CSS je koristan za primenu stilova na određene HTML stranice ili delove stranica. Međutim, treba imati na umu da će se stilovi primeniti samo na stranicu na kojoj su definisani. Za deljenje stilova između više stranica, često se koriste eksterni CSS fajlovi.

Eksterni CSS

Eksterni CSS (External CSS) je tehnika stilizacije HTML elemenata gde se stilovi definišu u posebnom CSS fajlu koji se zatim povezuje sa HTML dokumentom. Ovo omogućava centralizovanje stilova i njihovo ponovno korišćenje na više stranica. Evo objašnjenja i primera eksternog CSS-a:

Objašnjenje:

Da biste koristili eksterni CSS, potrebno je da kreirate zaseban CSS fajl sa ekstenzijom .css koji sadrži definicije stilova. Zatim, u HTML dokumentu koristite <link> oznaku unutar <head> dela kako biste povezali CSS fajl sa HTML dokumentom.

Primeri:

Eksterni CSS fajl (style.css):

/* style.css */

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

h1 {

color: #333;

}

HTML dokument sa povezanim eksternim stilom:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Naslov</h1>

<p>Ovo je primer eksternog stila.</p>

</body>

</html>

Korišćenje istog eksternog CSS fajla na više HTML stranica:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Naslov na prvoj stranici</h1>

</body>

</html>

-------------------------------------------------

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Naslov na drugoj stranici</h1>

</body>

</html>

Eksterni CSS omogućava efikasno upravljanje stilovima na više stranica. Promene u stilu se primenjuju na sve stranice koje koriste isti eksterni CSS fajl, što olakšava održavanje i konsistentnost izgleda na celom sajtu.

HTML Liste

HTML liste se koriste za organizaciju i prikazivanje informacija u obliku uređenih i neuređenih lista. Postoje tri osnovna tipa HTML listi:

Neuređene liste (Unordered Lists): Ove liste koriste se za prikazivanje stavki koje nisu numerisane ili poredane u određenom redosledu. Stavke obično su označene simbolima kao što su kružići ili kvadrati.

Primer neuređene liste:

<ul>

<li>Prva stavka</li>

<li>Druga stavka</li>

<li>Treća stavka</li>

</ul>

Uređene liste (Ordered Lists): Ove liste koriste se za prikazivanje stavki koje su numerisane ili poredane u određenom redosledu, obično koristeći brojeve ili slova.

Primer uređene liste:

<ol>

<li>Prva stavka</li>

<li>Druga stavka</li>

<li>Treća stavka</li>

</ol>

Definiciona lista (Definition Lists): Ova lista se koristi za prikazivanje definicija ili termina zajedno sa njihovim odgovarajućim opisima.

Primer definicione liste:

<dl>

<dd>HyperText Markup Language - označava jezik za označavanje hiperteksta koji se koristi za kreiranje web stranica.</dd>

<dd>Cascading Style Sheets - jezik za stilizaciju koji se koristi za definisanje izgleda web stranica.</dd>

</dl>

U HTML-u, liste se često koriste za organizaciju sadržaja, kao što su navigacijski meniji, indeksiranje sadržaja i sl. Možete dodavati i stilizovati liste pomoću CSS kako biste prilagodili izgled vaših stranica.

HTML Tabele

HTML tabele se koriste za organizaciju i prikaz podataka u obliku redova i kolona na web stranici. Tabele su često korisne kada želite predstaviti podatke u urednom i preglednom formatu, kao što su rasporedi, popisi proizvoda, raspored događanja i slični sadržaji.

Osnovna struktura HTML tabele:

<table>: Oznaka koja definiše početak i kraj tabele.

<tr>: Oznaka koja definiše red u tabeli.

<th>: Oznaka koja definiše zaglavlje tabele (naslove kolona).

<td>: Oznaka koja definiše ćeliju u tabeli (podatke).

Primer HTML tabele:

<table>
    <tr>
        <th>Ime</th>
        <th>Prezime</th>
        <th>Godine</th>
    </tr>
    <tr>
        <td>Marko</td>
        <td>Petrović</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Jovana</td>
        <td>Jovanović</td>
        <td>25</td>
    </tr>
</table>

Ovaj primer kreira tabelu sa tri kolone (Ime, Prezime, Godine) i dva reda podataka. Prvi red definiše zaglavlje tabele pomoću <th> oznaka, dok drugi i treći red sadrže stvarne podatke koristeći <td> oznake.

Kako definisati atribute i stilizaciju tabela:

Border: Možete definisati širinu i stil obruč za tabelu ili ćelije koristeći border atribut.
Width (Širina): Definišite širinu tabele koristeći width atribut.
Header (Zaglavlje): Koristite <th> oznake za definisanje zaglavlja tabele.
Padding (Razmak): Dodajte razmak unutar ćelija koristeći CSS stilizaciju sa padding svojstvom.
Spacing (Rastojanje): Postavite rastojanje između ćelija koristeći cellspacing atribut za tabelu.
Colspan (Spajanje kolona): Spojite više kolona u jednu koristeći colspan atribut u <td> oznakama.
Rowspan (Spajanje redova): Spojite više redova u jedan koristeći rowspan atribut u <td> oznakama.
Colgroup (Grupa kolona): Koristite colgroup element za grupisanje kolona i primenu zajedničkih atributa na celu grupu kolona.

Podešavanje Border-a na Tabeli

Da biste postavili granicu (border) na tabeli u HTML-u, možete koristiti atribut border u tabeli ili CSS stilizaciju:

<!DOCTYPE html>

<html>

<head>

<title>Podešavanje Border-a na Tabeli</title>

<style>

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid black;

}

th, td {

padding: 8px;

text-align: left;

}

</style>

</head>

<body>

<h1>Podešavanje Border-a na Tabeli</h1>

<p>Da biste postavili granicu (border) na tabeli u HTML-u, možete koristiti atribut <code>border</code> u tabeli ili CSS stilizaciju.</p>

<h2>Pomoću atributa border:</h2>

<tr>

<th>Prezime</th>

<th>Godine</th>

</tr>

<tr>

<td>Marko</td>

<td>Petrović</td>

</tr>

<tr>

<td>Jovana</td>

<td>Jovanović</td>

</tr>

</table>

<h2>Pomoću CSS stilizacije:</h2>

<table>

<tr>

<th>Prezime</th>

<th>Godine</th>

</tr>

<tr>

<td>Marko</td>

<td>Petrović</td>

</tr>

<tr>

<td>Jovana</td>

<td>Jovanović</td>

</tr>

</table>

Da biste postavili granicu (border) koristeći CSS, koristite stilizaciju <code>border</code> i

Evo svih primera:

Border (Obrub): Možete definisati širinu i stil obruba za tabelu ili ćelije koristeći border atribut. Na primer, border="1" će postaviti tanak obrub oko svih ćelija.

</table>

Width (Širina): Definišite širinu tabele koristeći width atribut.

</table>

Header (Zaglavlje): Možete koristiti <th> oznake za definisanje zaglavlja tabele. Zaglavlje će biti boldirano i centralizovano po podrazumevanim postavkama.

<table>

<tr>

<th>Prezime</th>

<th>Godine</th>

</tr>

</table>

Padding (Razmak): Možete dodati razmak unutar ćelija koristeći CSS stilizaciju sa padding svojstvom. Na primer, style="padding: 10px;" će dodati 10 piksela razmaka unutar ćelija.

<table>

<tr>

<td style="padding: 10px;">Podatak 1</td>

<td style="padding: 10px;">Podatak 2</td>

</tr>

</table>

Spacing (Rastojanje): Rastojanje između ćelija možete postaviti koristeći cellspacing atribut za tabelu

</table>

Colspan (Spajanje kolona): Možete spojiti više kolona u jednu koristeći colspan atribut u <td> oznakama. Na primer, colspan="2" će spojiti dve kolone u jednu.

<table>

<tr>

<td>Podatak 1</td>

<td colspan="2">Spajam dve kolone</td>

</tr>

</table>

Rowspan (Spajanje redova): Slično kao za colspan, možete spojiti više redova u jedan koristeći rowspan atribut u <td> oznakama. Na primer, rowspan="3" će spojiti tri reda u jedan.

<table>

<tr>

<td rowspan="3">Spajam tri reda</td>

<td>Podatak 1</td>

</tr>

<tr>

<td>Podatak 2</td>

</tr>

<tr>

<td>Podatak 3</td>

</tr>

</table>

Colgroup (Grupa kolona): colgroup element omogućava grupisanje kolona i primenu zajedničkih atributa na celu grupu kolona. Ovo se obično koristi za postavljanje zajedničkog stila za određene kolone.

<table>

<col>

</colgroup>

<tr>

<th>Prezime</th>

</tr>

</table>

Ovo su osnovni atributi i tehnike za rad sa tabelama u HTML-u. Možete kombinovati ove tehnike kako biste postigli željeni dizajn i stil za vaše tabele.

Oct 28, 2023

HTML Favicon

Favicon (skraćeno od "favorite icon") je mala ikona koja se prikazuje u kartici web pregledača pored naslova stranice. Favicon se takođe koristi kao ikona pri označavanju web stranice ili dodavanju na početni ekran na mobilnom uređaju. Ova ikona pomaže korisnicima da brže prepoznaju i identifikuju vašu web stranicu među mnogim drugim otvorenim karticama ili oznakama na traci za brzo biranje.

Evo kako možete dodati favicon u svoju HTML stranicu:

Kako dodati Favicon:

Da biste dodali favicon, pratite ove korake:

Izradite favicon ikonu: Prvo, morate kreirati favicon ikonu. Obično je veličine 16x16 piksela ili 32x32 piksela. Ikona se često čuva u formatu .ico, ali možete je sačuvati i u drugim formatima kao što su .png ili .jpg.
Postavite favicon ikonu u korenu vašeg veb servera: Preporučuje se da favicon ikonu postavite u korenu vašeg veb servera tako da je dostupna svim stranicama na vašem sajtu. Na primer, možete je postaviti na adresu https://www.vaša-web-stranica.com/favicon.ico.
Dodajte link ka favicon ikoni u HTML-u: U dodatku na <head> sekciju vašeg HTML dokumenta, dodajte sledeći red koji definiše link ka favicon ikoni:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Ovaj red koristi <link> element sa atributom rel="icon" kako bi označio favicon. href atribut definiše URL do vaše favicon ikone, dok type atribut definiše tip ikone. Tip image/x-icon se često koristi za favicon ikone.

Evo primera HTML koda za dodavanje favicon ikone:

      
<!DOCTYPE html>

<html>

<head>

<link rel="icon" href="https://www.vaša-web-stranica.com/favicon.ico" type="image/x-icon">

</head>

<body>

</body>

</html>

Nakon što dodate ovaj kod u svoj HTML dokument i postavite favicon ikonu na veb server, favicon će se prikazati u kartici web pregledača svaki put kada posetioci posete vašu stranicu.

HTML Linkovi

HTML linkovi se koriste za povezivanje različitih web stranica i resursa na internetu. Linkovi omogućavaju korisnicima da prelaze s jedne stranice na drugu ili da pristupe različitim veb resursima.

Kreiranje linka:

Da biste kreirali link u HTML-u, koristite <a> (anchor) element:

<a href="URL">Tekst linka</a>

href atribut definiše URL odredišta, a Tekst linka je vidljiv tekst linka.

Primer linka:

Ovde je primer HTML koda koji kreira jednostavan link:

<a href="https://www.primer.com">Posetite naš veb sajt</a>

Ovaj link će voditi korisnike na web stranicu "https://www.primer.com" kada se klikne na njega.

Sada znate kako kreirati osnovne linkove u HTML-u i povezivati svoju web stranicu sa drugim resursima na internetu.

HTML target Atribut

HTML target atribut se koristi u linkovima kako bi se odredilo kako će se otvoriti povezani resurs kada korisnik klikne na link.

1. `_blank` - Otvori u novom prozoru ili kartici:

Otvori povezani resurs u novom prozoru ili kartici web pregledača. Korisno za zadržavanje trenutne stranice otvorenom:

<a href="https://www.primer.com" target="_blank">Posetite naš veb sajt</a>

2. `_self` - Otvori u trenutnom prozoru ili kartici:

Otvori povezani resurs u trenutnom prozoru ili kartici web pregledača (podrazumevana vrednost ako target nije naveden):

<a href="https://www.primer.com" target="_self">Posetite naš veb sajt</a>

3. `_parent` - Otvori u nadređenom okviru:

Otvori povezani resurs u nadređenom okviru ako je stranica ugrađena u okvire ili koristi okvire:

<a href="https://www.primer.com" target="_parent">Posetite naš veb sajt</a>

4. `_top` - Otvori u najvišem okviru:

Otvori povezani resurs u najvišem okviru, zatvarajući sve okvire ako su prisutni:

<a href="https://www.primer.com" target="_top">Posetite naš veb sajt</a>

Postoji i mnogo drugih vrednosti za target atribut, ali ovi su najčešće korišćeni. Korišćenje ovog atributa vam omogućava kontrolu nad načinom otvaranja povezanih resursa nakon klika na link.

HTML Boja

U HTML-u možete lako primenjivati boje na tekst, pozadinu i druge elemente na vašoj web stranici. Postoje različiti načini za postavljanje boja:

1. Korišćenje Imena Boja

HTML omogućava korišćenje imena boja kao što su "red" (crvena), "blue" (plava), "green" (zelena), itd. Primer:

<p style="color: red;">Ovo je crveni tekst.</p>
<p style="background-color: blue; color: white;">

Ovo je tekst sa plavom pozadinom.</p>

2. Korišćenje Heksadecimalnih Vrednosti Boja

Heksadecimalna notacija boja se često koristi u web dizajnu. Svaka boja je predstavljena šestocifrenim heksadecimalnim brojem. Primeri:

<p style="color: #00FF00;">Ovo je zelena boja.</p>
<p style="background-color: #FFA500; color: white;">

Ovo je narandžasta pozadina.</p>

3. Korišćenje RGB Vrednosti Boja

RGB (Red, Green, Blue) vrednosti boja omogućavaju preciznije podešavanje boja korišćenjem kombinacije crvene, zelene i plave komponente. Primer:

<p style="color: rgb(255, 0, 0);">Ovo je crveni tekst.</p>
<p style="background-color: rgb(0, 0, 255); color: white;">

Ovo je tekst sa plavom pozadinom.</p>

4. Transparentnost Boja

Možete dodati transparentnost bojama koristeći RGBA vrednosti. Na primer, rgba(255, 0, 0, 0.5) predstavlja crvenu boju sa 50% transparentnošću.

<p style="color: rgba(0, 128, 0, 0.7);">

Ovo je zelena boja sa 70% transparentnošću.</p>

Sada znate kako primeniti boje u HTML-u. Igrajte se sa bojama kako biste prilagodili izgled vaše web stranice prema vašim potrebama i stilu.

HTML Komentari

HTML komentari su način da uključite napomene ili opise u izvorni kôd web stranice koji neće biti prikazani na samoj stranici, već služe za dokumentaciju i razumevanje koda. Komentari su korisni za programere i dizajnere kako bi lakše pratili i razumeli kôd, kao i za buduće modifikacije i održavanje web stranice.

Kako dodati komentare:

Ovo je primer komentara u jednom redu:

        <!-- Ovo je komentar u jednom redu -->

A ovo je primer komentara u više redova:

        <!--
            Ovo je komentar
            u više redova.
        -->

Primeri upotrebe komentara:

        <title>Moja Web Stranica</title>
        <!-- Ovde se nalazi meta tag za karakternu šifru -->
        <meta charset="UTF-8">
        <h1>Dobrodošli na moju web stranicu</h1>
        <p>Ovo je glavni sadržaj stranice.</p>
        <!-- Footer sekcija -->
        <footer>
            <p>© 2023 Moja Web Stranica</p>
        </footer>

HTML Atribut Style

HTML atribut style se koristi za postavljanje stilova (CSS) direktno na HTML elementima. Ovaj atribut omogućava vam da definišete stilove kao atribute za pojedinačne HTML elemente, što može biti korisno kada želite primeniti stilove samo na određene delove vaše web stranice. Evo kako se koristi style atribut:

        <p style="color: blue; font-size: 16px;">

        Ovo je plavi tekst veličine 16 piksela.</p>

U ovom primeru, style atribut je postavljen na <p> element, a vrednost atributa je CSS deklaracija koja definiše boju teksta (plava) i veličinu fonta (16 piksela) za taj paragraf. Možete koristiti različite CSS svojstva i vrednosti u style atributu kako biste prilagodili izgled i stil pojedinačnih elemenata.

Međutim, treba napomenuti da se upotreba style atributa obično ne preporučuje za velike stilizacije web stranica, jer može dovesti do neurednog i teško održivog koda. Umesto toga, preporučuje se da koristite odvojeni CSS fajl (ili interno stilizovanje u <style> sekciji) kako biste centralizovano upravljali stilovima za celu web stranicu. style atribut je koristan kada želite brzo primeniti stil na određeni element ili kada pravite jednostavne primere.

Ovde su neki od najčešće korišćenih CSS svojstava koje možete postaviti putem style atributa:

color: Boja teksta.
font-size: Veličina fonta.
background-color: Boja pozadine.
font-family: Izbor fonta.
text-align: Poravnanje teksta (npr. "left", "center", "right").
margin, padding: Spacing i margine oko elementa.

Važno je napomenuti da se style atribut primenjuje na jedan element, dok se stilovi u odvojenim CSS fajlovima mogu primeniti na više elemenata i pružaju bolju organizaciju i održavanje stilova na celoj web stranici.

HTML Paragrafi

HTML oznaka za paragraf je <p>. Paragraf se koristi za formatiranje i grupisanje teksta u blokove na web stranici. Evo kako možete koristiti oznaku za paragraf:

        <p>Ovo je primer paragrafa. Tekst unutar ove oznake će biti 
    prikazan kao odvojen paragraf na web stranici.</p>

U ovom primeru, tekst između <p> i </p> oznaka će biti prikazan kao odvojen paragraf na web stranici. Oznake <p> se često koriste za formatiranje teksta, dodavanje odeljaka i organizaciju sadržaja na stranici.

Ako želite da dodate više paragrafa, jednostavno ponovite oznaku <p> i </p> za svaki paragraf:

        <p>Prvi paragraf.</p>
        <p>Drugi paragraf.</p>
        <p>Treći paragraf.</p>

Ovo će stvoriti tri odvojena paragrafa na web stranici. Možete dodati tekst, slike ili druge elemente unutar oznake za paragraf kako biste oblikovali sadržaj na svojoj stranici.

HTML Naslovi

Naslovi u HTML-u se označavaju pomoću oznaka od <h1> do <h6>, pri čemu <h1> označava najvažniji naslov, a <h6> označava najmanje važan naslov. Naslovi se koriste za organizaciju i hijerarhijsko označavanje sadržaja na web stranici. Evo primera naslova sa odgovarajućim oznakama:

Naslov nivoa 1 (<h1>):

   <h1>Ovo je naslov nivoa 1</h1>

Naslov nivoa 2 (<h2>):

     <h2>Ovo je naslov nivoa 2</h2>

Naslov nivoa 3 (<h3>):

       <h3>Ovo je naslov nivoa 3</h3>

Naslov nivoa 4 (<h4>):

        <h4>Ovo je naslov nivoa 4</h4>

Naslov nivoa 5 (<h5>):

        <h5>Ovo je naslov nivoa 5</h5>

Naslov nivoa 6 (<h6>):

        <h6>Ovo je naslov nivoa 6</h6>

Naslovi se koriste za strukturu stranice i daju informaciju o važnosti ili hijerarhiji sadržaja. Obično, <h1> se koristi za naslov stranice, dok se ostali naslovi koriste za podnaslove ili podsekcije. Kada se koristi pravilno, ovi naslovi pomažu u boljem razumevanju i navigaciji po web stranici.

HTML Atributi

HTML atributi su dodatne informacije koje se pridružuju HTML oznakama da bi se prilagodio ili proširio njihov sadržaj ili ponašanje. Atributi se obično koriste za postavljanje vrednosti ili opcija za HTML elemenata. Evo nekoliko čestih HTML atributa i njihovih primera:

src: Atribut src se koristi za postavljanje izvora slike ili druge multimedijalne datoteke.
href: Atribut href se koristi za postavljanje URL-a za hyperlinkove.
alt: Atribut alt se koristi za pružanje alternativnog teksta za sliku.
width i height: Atributi width i height se koriste za postavljanje širine i visine slike.
class i id: Atributi class i id se koriste za dodeljivanje CSS stilova ili za identifikaciju elemenata putem JavaScript-a.
value: Atribut value se često koristi za postavljanje vrednosti polja forme.
placeholder: Atribut placeholder se koristi za postavljanje privremenog teksta u poljima forme.
disabled: Atribut disabled se koristi za onemogućavanje ili zaključavanje određenih elemenata forme ili dugmadi.
target: Atribut target se koristi za postavljanje načina otvaranja hyperlinkova u novom prozoru ili tabu.

Ovo su samo neki od uobičajenih HTML atributa i njihovih primera. Atributi variraju u zavisnosti od elemenata i služe za prilagođavanje i oblikovanje sadržaja na web stranici.

Primeri atributa:

Atribut src za slike:

        <img src="slika.jpg" alt="Opis slike">

Atribut href za hyperlinkove:

        <a href="https://www.example.com">Posetite Example.com</a>

Atribut alt za opis slike:

        <img src="slika.jpg" alt="Opis slike">

Atributi width i height za dimenzije slike:

        <img src="slika.jpg" alt="Opis slike" width="300" height="200">

Atributi class i id za stilizaciju i identifikaciju elemenata:

        <p class="tekst-paragrafa">Ovo je paragraf sa određenim

            stilom.</p>
        <div id="kontejner">Ovo je div element sa jedinstvenim

            identifikatorom.</div>

Atribut value za unos teksta u formi:

        <input type="text" name="korisnicko_ime" value="Vaše

            korisničko ime">

Atribut placeholder za privremeni tekst u poljima forme:

        <input type="email" name="email" placeholder="Unesite svoj

            e-mail">

Atribut disabled za onemogućavanje dugmeta forme:

        <button type="submit" disabled>Pošalji</button>

Atribut target za otvaranje hyperlinkova u novom tabu:

        <a href="https://www.example.com" target="_blank">Posetite

            Example.com</a>

Svaki primer ilustruje specifičnu upotrebu atributa u HTML-u. Ovi atributi su od suštinskog značaja za kreiranje interaktivnih i prilagodljivih web stranica. Sada imate osnovno razumevanje kako ih koristiti u praksi. Srećno sa svojim HTML projektima!

Nov 12, 2023

Oct 29, 2023

<input> element

Inline CSS

Interni CSS

Eksterni CSS

Osnovna struktura HTML tabele:

Primer HTML tabele:

Kako definisati atribute i stilizaciju tabela:

Podešavanje Border-a na Tabeli

Oct 28, 2023

Kako dodati Favicon:

Kreiranje linka:

Primer linka:

HTML target Atribut

1. _blank - Otvori u novom prozoru ili kartici:

2. _self - Otvori u trenutnom prozoru ili kartici:

3. _parent - Otvori u nadređenom okviru:

4. _top - Otvori u najvišem okviru:

1. Korišćenje Imena Boja

2. Korišćenje Heksadecimalnih Vrednosti Boja

3. Korišćenje RGB Vrednosti Boja

4. Transparentnost Boja

Kako dodati komentare:

<h1>Ovo je naslov nivoa 1</h1>

<h2>Ovo je naslov nivoa 2</h2>

<h3>Ovo je naslov nivoa 3</h3>

<h4>Ovo je naslov nivoa 4</h4>

<h5>Ovo je naslov nivoa 5</h5>

<h6>Ovo je naslov nivoa 6</h6>

1. `_blank` - Otvori u novom prozoru ili kartici:

2. `_self` - Otvori u trenutnom prozoru ili kartici:

3. `_parent` - Otvori u nadređenom okviru:

4. `_top` - Otvori u najvišem okviru: