(https://imgur.com/LDJyrqU.png)
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- https://www.w3schools.com/html/
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://html.spec.whatwg.org/
Š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<!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.
<h1>Naslov 1</h1>
<h2>Naslov 2</h2>
<p> Oznaka za paragraf teksta.
<p>Ovo je paragraf teksta.</p><a> Oznaka za link. Atribut href definiše odredište linka.
<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.
<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>.
<ul>
<li>Stavka 1</li>
<li>Stavka 2</li>
</ul>
<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.
<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.
<p>Ovo je <span style="color: red;">crveni tekst</span>.</p>
Class / IDclass i
id su ključni atributi u HTML-u koji služe za identifikaciju i stilizaciju elemenata na web stranici.
classKoristi se za grupisanje više elemenata koji dele iste stilove ili funkcionalnosti. Može se dodeliti više elemenata istom klasom na stranici.
<div class="moja-klasa">Ovo je div element</div>
<p class="moja-klasa">Ovo je paragraf sa istom klasom</p>
CSS Primer.moja-klasa {
color: blue;
font-size: 20px;
}
U CSS-u, klase se referenciraju tačkom (.) ispred imena klase.idKoristi 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.
<div id="jedinstveni-id">Ovo je jedinstveni div element</div>CSS Primer#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 idclass 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 ImportDa biste dodali stilove i funkcionalnost svojoj web stranici, CSS i JavaScript fajlovi se uvoze u HTML dokument na sledeći način.
Importovanje CSS-aCSS /b] se obično uvozi u <head> sekciju HTML dokumenta koristeći <link> oznaku.<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<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<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.<head>
<script src="script.js" defer></script>
<!-- ili -->
<script src="script.js" async></script>
</head>
2. CSS (Cascading Style Sheets)
Korisni Linkovi- https://www.w3schools.com/css
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://css-tricks.com
Š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 Stilovibody {
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.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.
Naslovih1, 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.
Navigacijanav {
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.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.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.
Paragrafip {
margin: 0 0 10px; /* Postavlja donji razmak za paragrafe na 10px, uklanjajući gornji razmak */
}
p Stilizuje paragrafe tako da imaju samo donji razmak, što pomaže u postizanju urednog rasporeda teksta.
Dugme.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.
Slikeimg {
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.
Footerfooter {
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#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#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- https://www.w3schools.com/js
- https://developer.mozilla.org/en-US/docs/Web/JavaScript
- https://www.javascript.com
Š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[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 (Number)Tekst (String)Boolean (true/false)Nedefinisan (undefined)Bezvrednost NullObjekat (Object)Niz (Array)let broj = 42;
let tekst = "Hello, world!";
let istina = true;
Operatori
JavaScript koristi različite operatore za obavljanje operacija
Aritmetički +, -, *, /, %Upitni ==, ===, !=, !==Logički &&, ||, !let zbir = 5 + 3;
let jednakost = (5 == 5);
Funkcije
Funkcije su blokovi koda koji se mogu pozvati kad god su potrebni.function pozdravi(ime) {
return "Zdravo, " + ime + "!";
}
let poruka = pozdravi("Ana");
Uslovni izrazi
Uslovni izrazi omogućavaju izvršavanje koda na osnovu određenih uslova.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 petljafor (let i = 0; i < 5; i++) {
console.log(i);
}
while petljalet 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.let osoba = {
ime: "Ana",
godine: 25,
pozdrav: function() {
return "Zdravo, " + this.ime + "!";
}
};
console.log(osoba.pozdrav());
Nizovi
Nizovi su lista vrednosti koje se mogu pristupiti pomoću indeksa.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.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.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ć
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...