HTML / CSS / JS / Inspect : Entry Masterclass

Avgust 16, 2024, 19:52:03 POSLE PODNE

HTML / CSS / Javascript / Inspect : Entry Masterclass.

pod autorskim pravima od strane Marko Simić.

Ova tema sadrži sadržaj vezan za: HTML, CSS, JavaScript, Inspect.

1. HTML (HyperText Markup Language)

Korisni Linkovi

Šta je to HTML ?
HTML je osnovni jezik za kreiranje i strukturiranje web stranica. Omogućava vam da dodate i organizujete tekst, slike, linkove i druge elemente na stranici, pružajući osnovnu strukturu i funkcionalnost vašem web sadržaju.

Kroz korišćenje oznaka (tagova), HTML definiše različite delove sadržaja, kao što su naslovi, paragrafi, liste, tabele, i još mnogo toga. Ove oznake služe kao blokovi izrade vaše stranice, omogućavajući vam da kreirate jasan i organizovan raspored.

U kombinaciji sa CSS-om, koji dodaje stilizaciju, i JavaScript-om, koji donosi interaktivnost, HTML postaje moćan alat za izradu modernih i dinamičnih web stranica. Bilo da ste početnik ili iskusni dizajner, HTML je vaš prvi korak ka stvaranju profesionalne online prisutnosti.

Osnove HTML-a

Kod [Izaberi]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Naslov Stranice</title>
</head>
<body>
    <h1>Ovo je naslov</h1>
    <p>Ovo je paragraf teksta na stranici.</p>
</body>
</html>

- Objasnjene
<!DOCTYPE html> Deklaracija dokumenta koja obaveštava pregledač da je u pitanju HTML5 dokument.
<html lang="en"> Početna oznaka koja označava početak HTML dokumenta. Atribut lang definiše jezik dokumenta.
<head> Oznaka za zaglavlje dokumenta koja sadrži metapodatke, kao što su karakter set, naslov stranice, i informacije o prikazu (viewport).
<meta charset="UTF-8"> Postavlja kodiranje karaktera na UTF-8, što omogućava ispravno prikazivanje različitih jezika i simbola.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Ova meta oznaka osigurava da stranica bude responzivna, tj. prilagodljiva različitim veličinama ekrana.
<title> Oznaka za naslov stranice, koja se prikazuje u naslovnoj traci pregledača ili na kartici.
<body> Oznaka za telo dokumenta gde se nalazi sav vidljivi sadržaj stranice, uključujući tekst, slike, linkove, i druge elemente.

<h1> do <h6> Oznake za naslove. <h1> je najveći i najvažniji naslov, dok je <h6> najmanji.

Kod [Izaberi]

<h1>Naslov 1</h1>
<h2>Naslov 2</h2>

<p> Oznaka za paragraf teksta.

Kod [Izaberi]

<p>Ovo je paragraf teksta.</p><a> Oznaka za link. Atribut href definiše odredište linka.

Kod [Izaberi]

<a href="https://www.primer.com">Klikni ovde</a><img> Oznaka za sliku. Atribut src definiše putanju do slike, dok alt pruža alternativni tekst.

Kod [Izaberi]

<img src="slika.jpg" alt="Opis slike"><ul> i <ol> Oznake za neuređene (<ul>) i uređene (<ol>) liste. Svaka stavka u listi je označena sa <li>.

Kod [Izaberi]

<ul>
    <li>Stavka 1</li>
    <li>Stavka 2</li>
</ul>

Kod [Izaberi]

<ol>
    <li>Prva stavka</li>
    <li>Druga stavka</li>
</ol>

<div> Oznaka za blok element, koja se koristi za grupisanje sadržaja u celinu. Često se koristi u kombinaciji sa CSS-om za stilizaciju.

Kod [Izaberi]

<div>
    <h2>Podnaslov</h2>
    <p>Tekst unutar div-a.</p>
</div>

<span> Oznaka za inline element, koji se koristi za stilizaciju određenih delova teksta ili sadržaja unutar bloka.

Kod [Izaberi]

<p>Ovo je <span style="color: red;">crveni tekst</span>.</p>

Class / ID
class i id su ključni atributi u HTML-u koji služe za identifikaciju i stilizaciju elemenata na web stranici.

class
Koristi se za grupisanje više elemenata koji dele iste stilove ili funkcionalnosti. Može se dodeliti više elemenata istom klasom na stranici.

Kod [Izaberi]

<div class="moja-klasa">Ovo je div element</div>
<p class="moja-klasa">Ovo je paragraf sa istom klasom</p>

CSS Primer

Kod [Izaberi]

.moja-klasa {
    color: blue;
    font-size: 20px;
}

U CSS-u, klase se referenciraju tačkom (.) ispred imena klase.

id
Koristi se za jedinstvenu identifikaciju jednog elementa na stranici. Svaki id mora biti jedinstven unutar dokumenta. Idealan za ciljanje specifičnog elementa u CSS-u ili JavaScript-u.

Kod [Izaberi]

<div id="jedinstveni-id">Ovo je jedinstveni div element</div>
CSS Primer

Kod [Izaberi]

#jedinstveni-id {
    color: red;
    font-size: 25px;
}

U CSS-u, id atributi se referenciraju sa znakom # ispred imena id-a.

Razlike između class i id

class se može koristiti na više elemenata, omogućavajući zajedničke stilove ili funkcionalnosti.
id treba biti jedinstven za svaki element i koristi se kada vam je potreban specifičan stil ili funkcionalnost samo za taj element.

CSS / JS Import
Da biste dodali stilove i funkcionalnost svojoj web stranici, CSS i JavaScript fajlovi se uvoze u HTML dokument na sledeći način.

Importovanje CSS-a
CSS /b] se obično uvozi u <head> sekciju HTML dokumenta koristeći <link> oznaku.

Kod [Izaberi]

<head>
    <link rel="stylesheet" href="styles.css">
</head>

- Objasnjene
rel="stylesheet" Označava da je povezani fajl stil.
href="styles.css" Putanja do CSS fajla. Ova putanja može biti relativna ili apsolutna.

Importovanje JavaScript-a
JavaScript se može uvesti u HTML dokument pomoću <script> oznake.

Unutar <head> sekcije

Kod [Izaberi]

<head>
    <script src="script.js"></script>
</head>

Ako JavaScript zavisi od elemenata u body-ju, preporučuje se da se skripta učita na kraju body sekcije ili da koristi defer atribut.

Na kraju <body> sekcije

Kod [Izaberi]

<body>
    <!-- Sadržaj stranice -->
    <script src="script.js"></script>
</body>

Sa defer ili async atributima
defer Uverava da će skripta biti učitana paralelno, ali će se izvršiti nakon što se stranica potpuno učita.
async Skripta se učitava paralelno i izvršava odmah nakon učitavanja.

Kod [Izaberi]

<head>
    <script src="script.js" defer></script>
    <!-- ili -->
    <script src="script.js" async></script>
</head>

2. CSS (Cascading Style Sheets)

Korisni Linkovi

Šta je to CSS ?
CSS je jezik za stilizaciju web stranica koji se koristi za opisivanje izgleda i formatiranja HTML dokumenata. CSS omogućava odvajanje sadržaja (HTML) od njegovog vizualnog prikaza i rasporeda, što omogućava veću fleksibilnost i kontrolu nad izgledom web stranica.

Osnove CSS-a

Globalni Stilovi

Kod [Izaberi]

body {
    font-family: Arial, sans-serif; /* Definiše osnovni font za celu stranicu, koristeći Arial kao primarni font i sans-serif kao alternativu */
    line-height: 1.6; /* Postavlja visinu reda za bolju čitljivost teksta, što čini tekst lakšim za čitanje */
    margin: 0; /* Uklanja podrazumevane margine oko tela stranice */
    padding: 0; /* Uklanja podrazumevane paddinge oko tela stranice */
    color: #333; /* Definiše osnovnu boju teksta na stranici */
    background-color: #f4f4f4; /* Postavlja pozadinsku boju stranice na svetlo sivu */
}

body pravila definišu globalni izgled stranice. Koristeći ove stilove, obezbeđuješ dosledan izgled svih elemenata na stranici, kao što su font, boje i margine.

Glavni Kontejner

Kod [Izaberi]

.container {
    width: 80%; /* Postavlja širinu kontejnera na 80% širine preglednika */
    margin: auto; /* Automatski centriranje kontejnera horizontalno u okviru roditeljskog elementa */
    overflow: hidden; /* Sakriva bilo koji sadržaj koji izlazi izvan granica kontejnera */
}

.container stil se koristi za centralizovanje i stilizovanje glavnog kontejnera stranice, omogućavajući sadržaju da bude centriran i da se prilagođava širini ekrana.

Naslovi

Kod [Izaberi]

h1, h2, h3 {
    color: #333; /* Definiše boju teksta naslova na tamno sivu */
    margin-top: 0; /* Uklanja podrazumevani gornji razmak kod naslova */
}

h1, h2, h3 stil se primenjuje na sve naslove (h1, h2, h3) za postizanje doslednog izgleda, uklanjajući nepotreban razmak na vrhu.

Navigacija

Kod [Izaberi]

nav {
    background: #333; /* Postavlja pozadinsku boju navigacije na tamno sivu */
    color: #fff; /* Definiše boju teksta u navigaciji na belu */
    padding: 10px 0; /* Dodaje 10px padding na gornju i donju stranu navigacije */
}

nav a {
    color: #fff; /* Definiše boju teksta linkova u navigaciji na belu */
    text-decoration: none; /* Uklanja podcrtavanje sa linkova */
    padding: 0 15px; /* Dodaje horizontalni padding od 15px oko linkova */
}

nav a:hover {
    text-decoration: underline; /* Dodaje podcrtavanje linkovima kada se prelazi mišem */
}

nav stilizuje navigaciju na stranici, postavljajući pozadinsku boju, boju teksta i padding.
nav a stilizuje linkove u navigaciji, uklanjajući podcrtavanje i dodajući padding.
nav a:hover dodaje efekt podcrtavanja na linkove kada se prelazi mišem, što poboljšava korisničko iskustvo.

Sekcija

Kod [Izaberi]

.section {
    padding: 20px; /* Dodaje 20px padding unutar sekcija */
    margin: 20px 0; /* Dodaje 20px razmak između sekcija */
    background: #fff; /* Postavlja pozadinsku boju sekcija na belu */
    border-radius: 8px; /* Dodaje zaobljene ivice sekcijama sa radijusom od 8px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Dodaje senku oko sekcija za 3D efekat */
}

.section ovaj stil se koristi za stilizovanje sekcija stranice, dodajući padding, razmak između sekcija, pozadinsku boju, zaobljene ivice i senku.

Naslov Sekcije

Kod [Izaberi]

.section h2 {
    font-size: 24px; /* Postavlja veličinu fonta za naslove sekcija na 24px */
    margin-bottom: 10px; /* Dodaje 10px razmak ispod naslova sekcije */
}

.section h2 stilizuje naslove unutar sekcija, postavljajući veličinu fonta i razmak ispod naslova.

Paragrafi

Kod [Izaberi]

p {
    margin: 0 0 10px; /* Postavlja donji razmak za paragrafe na 10px, uklanjajući gornji razmak */
}

Kod [Izaberi]

p Stilizuje paragrafe tako da imaju samo donji razmak, što pomaže u postizanju urednog rasporeda teksta.

Dugme

Kod [Izaberi]

.button {
    display: inline-block; /* Postavlja dugme da se ponaša kao inline element sa blok karakteristikama */
    font-size: 16px; /* Postavlja veličinu fonta na 16px */
    color: #fff; /* Postavlja boju teksta na belu */
    background: #007bff; /* Postavlja pozadinsku boju dugmeta na plavu */
    padding: 10px 20px; /* Dodaje 10px vertikalni i 20px horizontalni padding */
    text-decoration: none; /* Uklanja podcrtavanje sa linka */
    border-radius: 5px; /* Dodaje zaobljene ivice dugmetu sa radijusom od 5px */
}

.button:hover {
    background: #0056b3; /* Menja pozadinsku boju dugmeta na tamniju plavu pri prelasku mišem */
}

.button stilizuje dugmad sa osnovnim izgledom, uključujući boju, veličinu, padding i zaobljene ivice.
.button:hover dodaje efekat promene boje pozadine pri prelasku mišem preko dugmeta.

Slike

Kod [Izaberi]

img {
    max-width: 100%; /* Osigurava da slike ne prelaze širinu svog roditeljskog elementa */
    height: auto; /* Održava proporcije slike prilikom promena veličine */
    display: block; /* Postavlja slike kao blok elemente za bolju kontrolu rasporeda */
    margin: 0 auto; /* Automatski centrira slike horizontalno */
}

img osigurava da slike budu responsivne i da se automatski prilagođavaju širini roditeljskog elementa.

Footer

Kod [Izaberi]

footer {
    background: #333; /* Postavlja pozadinsku boju footera na tamno sivu */
    color: #fff; /* Postavlja boju teksta u footeru na belu */
    text-align: center; /* Centriranje teksta u footeru */
    padding: 10px 0; /* Dodaje 10px padding na gornju i donju stranu footera */
    position: absolute; /* Postavlja footer u apsolutnu poziciju */
    bottom: 0; /* Poravnava footer na dnu stranice */
    width: 100%; /* Postavlja širinu footera na 100% */
}

footer Stilizuje footer stranice sa pozadinskom bojom, bojom teksta, centriranjem teksta i postavljanjem na dno stranice.

Specifični ID za Zaglavlje

Kod [Izaberi]

#header {
    background-color: #333; /* Postavlja pozadinsku boju zaglavlja na tamno sivu */
    color: #fff; /* Postavlja boju teksta u zaglavlju na belu */
    padding: 15px; /* Dodaje 15px padding unutar zaglavlja */
    text-align: center; /* Centriranje teksta u zaglavlju */
}

#header h1 {
    margin: 0; /* Uklanja margine oko naslova u zaglavlju */
    font-size: 2em; /* Postavlja veličinu fonta na 2em za naslove u zaglavlju */
}

#header stilizuje specifično zaglavlje stranice sa jedinstvenim bojama, paddingom i centriranjem teksta.
#header h1 stilizuje naslov unutar zaglavlja, uklanjajući margine i povećavajući veličinu fonta.

Specifični ID za Kontakt Sekciju

Kod [Izaberi]

#contact-section {
    background-color: #f4f4f4; /* Postavlja pozadinsku boju kontakt sekcije na svetlu sivu */
    padding: 20px; /* Dodaje 20px padding unutar kontakt sekcije */
    border: 1px solid #ddd; /* Dodaje 1px svetlu sivu ivicu oko kontakt sekcije */
    border-radius: 5px; /* Dodaje zaobljene ivice kontakt sekciji sa radijusom od 5px */
}

#contact-section stilizuje specifičnu kontakt sekciju stranice sa svetlom sivom pozadinom, paddingom, ivicom i zaobljenim ivicama.

3. JS (Javascript)

Korisni Linkovi

Šta je to JS ?
JavaScript je programski jezik koji se koristi za dodavanje interaktivnosti i dinamičnih funkcionalnosti web stranicama. On je klijent-side jezik, što znači da se izvršava na korisnikovom pregledniku, i može se koristiti za manipulaciju HTML-a i CSS-a, kao i za rad sa podacima.

Osnove JS-a

Kod [Izaberi]

[b]Varijable[/b]
let ime = "Ana";
const godine = 25;

Varijable se koriste za skladištenje vrednosti. U JavaScript-u možete koristiti var, let ili const za deklaraciju varijabli.

Tipovi podataka
JavaScript podržava različite tipove podataka.

Broj

Kod [Izaberi]

(Number)Tekst

Kod [Izaberi]

(String)Boolean

Kod [Izaberi]

(true/false)Nedefinisan

Kod [Izaberi]

(undefined)Bezvrednost

Kod [Izaberi]

NullObjekat

Kod [Izaberi]

(Object)Niz

Kod [Izaberi]

(Array)

Kod [Izaberi]

let broj = 42;
let tekst = "Hello, world!";
let istina = true;

Operatori
JavaScript koristi različite operatore za obavljanje operacija

Aritmetički

Kod [Izaberi]

+, -, *, /, %Upitni

Kod [Izaberi]

==, ===, !=, !==Logički

Kod [Izaberi]

&&, ||, !

Kod [Izaberi]

let zbir = 5 + 3;
let jednakost = (5 == 5);

Funkcije
Funkcije su blokovi koda koji se mogu pozvati kad god su potrebni.

Kod [Izaberi]

function pozdravi(ime) {
    return "Zdravo, " + ime + "!";
}
let poruka = pozdravi("Ana");

Uslovni izrazi
Uslovni izrazi omogućavaju izvršavanje koda na osnovu određenih uslova.

Kod [Izaberi]

let broj = 10;
if (broj > 5) {
    console.log("Broj je veći od 5");
} else {
    console.log("Broj nije veći od 5");
}

Petlje
Petlje omogućavaju izvršavanje koda više puta.

for petlja

Kod [Izaberi]

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while petlja

Kod [Izaberi]

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

Objekti
Objekti su kolekcije ključ-vrednost parova i koriste se za grupisanje više vrednosti u jednoj jedinici.

Kod [Izaberi]

let osoba = {
    ime: "Ana",
    godine: 25,
    pozdrav: function() {
        return "Zdravo, " + this.ime + "!";
    }
};

Kod [Izaberi]

console.log(osoba.pozdrav());
Nizovi
Nizovi su lista vrednosti koje se mogu pristupiti pomoću indeksa.

Kod [Izaberi]

let boje = ["crvena", "plava", "zelena"];
console.log(boje[0]); // "crvena"

DOM Manipulacija
JavaScript omogućava interakciju sa DOM-om (Document Object Model) da bi se menjala struktura web stranice.

Kod [Izaberi]

document.getElementById("mojElement").innerText = "Novi tekst";

Eventi
JavaScript može reagovati na različite događaje, kao što su klikovi, unosi sa tastature, i mnogi drugi.

Kod [Izaberi]

document.getElementById("mojDugme").addEventListener("click", function() {
    alert("Dugme je kliknuto!");
});

4. Inspect(Inspect Element)

Šta je to Inspect ?
Inspect Element je funkcionalnost koja je dostupna u većini modernih web pregledača i omogućava korisnicima da pregledaju i analiziraju HTML i CSS kod stranice u realnom vremenu. Ovo je vrlo korisno za web developere i dizajnere jer omogućava brzu analizu i manipulaciju elemenata stranice direktno u pregledniku.

Osnove Inspect-a

Otvorite Inspect Element

Google Chrome: Desni klik na bilo koji deo stranice i izaberite "Inspect" ili pritisnite Ctrl + Shift + I (Windows/Linux) ili Cmd + Option + I (Mac).

Mozilla Firefox: Desni klik i izaberite Inspect Element ili pritisnite Ctrl + Shift + I (Windows/Linux) ili Cmd + Option + I (Mac).

Microsoft Edge: Desni klik i izaberite Inspect ili pritisnite Ctrl + Shift + I (Windows/Linux) ili Cmd + Option + I (Mac).

Safari: Da biste koristili Inspect Element u Safariju, prvo morate omogućiti Developer alatke u Safari Preferences. Idite na Safari > Preferences > Advanced i označite Show Develop menu in menu bar. Zatim, desni klik i izaberite Inspect Element ili pritisnite Cmd + Option + I.

Razumevanje Inspect-a

Elements (Elementi): Ovaj panel prikazuje HTML strukturu stranice. Možete pregledati i uređivati HTML kod stranice u realnom vremenu. Klikom na elemente možete videti i menjati njihove atribute, stilove i više.

Styles (Stilovi): Ovaj panel prikazuje CSS stilove koji su primenjeni na izabrani HTML element. Možete uređivati stilove i odmah videti promene na stranici.

Console (Konzola): Ovaj panel omogućava vam da izvršavate JavaScript kod i vidite sve poruke grešaka i upozorenja.

Network (Mreža): Ovaj panel prikazuje sve mrežne zahteve koje stranica pravi, uključujući HTTP zahteve i odgovore. Korisno je za praćenje performansi i otkrivanje problema sa mrežom.

Sources (Izvori): Ovdje možete videti sve JavaScript fajlove i druge resurse koji su učitani na stranici. Možete i postaviti breakpoints za debagovanje koda.

Application (Aplikacija): Ovaj panel prikazuje podatke o skladištu, poput kolačića, lokalnog skladišta i sesijskog skladišta.

Performance (Performanse): Ovdje možete analizirati performanse stranice, uključujući vreme učitavanja i izvođenja skripti.

Manipulacija elemenata

Izmena HTML-a: Kliknite na HTML kod u panelu Elements i promenite tekst, atribute ili strukturu elemenata. Promene će odmah biti vidljive na stranici.

Izmena CSS-a: U panelu Styles, možete dodati, ukloniti ili promeniti CSS pravila za izabrani element. Ovo vam omogućava da testirate različite stilove bez potrebe za osvežavanjem stranice.

Praćenje i debagovanje

Konzola: Možete unositi JavaScript kod direktno u konzolu i odmah videti rezultate. Ovo je korisno za testiranje malih skripti ili za debagovanje problema.

Breakpoints: Postavite breakpoints u JavaScript kodu kako biste zaustavili izvršavanje koda na određenoj liniji i analizirali stanje varijabli i tok izvršenja.

Testiranje responzivnosti

Responsive Design Mode (Režim responzivnog dizajna): Većina preglednika nudi opciju za testiranje kako vaša stranica izgleda na različitim veličinama ekrana. U Chrome-u i Firefox-u, možete pronaći ovu opciju u panelu za inspekciju pod ikonom koja izgleda kao mali uređaj ili u meniju Toggle Device Toolbar (Ctrl + Shift + M ili Cmd + Shift + M).

Završna Reč

Nadam se da ste kroz ovaj masterclass, koji je posebno prilagođen apsolutnim početnicima, stekli osnovno razumevanje HTML-a, CSS-a, JavaScript-a i alata za inspekciju.
Verujem da sada imate solidnu osnovu za dalji razvoj i istraživanje u svetu web dizajna/developmenta.
Ako imate dodatnih pitanja ili vam je potrebna pomoć, slobodno ostavite komentar ispod.
Želim vam puno uspeha i radujem se vašim budućim projektima.

Srdačan pozdrav, Marko Simić

Avgust 16, 2024, 21:09:53 POSLE PODNE

Ljepo, da je bar neko ovakav PDF otvorio, i sto si ulozio svoje vrijeme ali steta je sto 99% clanova foruma ovo nece ni do kraja procitati...

Avgust 16, 2024, 21:13:00 POSLE PODNE

Citat: noddy_ poslato Avgust 16, 2024, 21:09:53 POSLE PODNELjepo, da je bar neko ovakav PDF otvorio, i sto si ulozio svoje vrijeme ali steta je sto 99% clanova foruma ovo nece ni do kraja procitati...

Bitno je da dodje do onih kojima je potrebno. Jedna osoba je dovoljna.

Avgust 16, 2024, 22:12:25 POSLE PODNE

Masterpiece.

Avgust 17, 2024, 13:36:25 POSLE PODNE

Citat: noddy_ poslato Avgust 16, 2024, 21:09:53 POSLE PODNELjepo, da je bar neko ovakav PDF otvorio, i sto si ulozio svoje vrijeme ali steta je sto 99% clanova foruma ovo nece ni do kraja procitati...

Realno, ko je zainteresovan, procitace.

HTML / CSS / JS / Inspect : Entry Masterclass

markosimic

noddy_

markosimic

MaEsTrOo

Denmla