HTML-i-CSS .pptx

web dizajn

1. HTML i CSS Marina Šušnja

2. Uvod u HTML Osnove Weba HTML, skraćeno od HyperText Markup Language, predstavlja temeljni jezik za izradu web stranica. Definira strukturu i sadržaj stranica, organizirajući tekst, slike, videozapise i druge elemente. Interpretacija Pretraživača Pretraživači, poput Chromea, Firefoxa ili Safarija, interpretiraju HTML kod i prikazuju web stranice korisniku.

3. HTML Struktura i Osnove 1 Glavni elementi Osnovni elementi HTML dokumenta uključuju html , head i body . head sadrži meta podatke, a body vidljivi sadržaj. 2 Elementi za sadržaj Za tekst se koriste p (paragraph), h1 - h6 (naslovi), ul i ol (liste). 3 Dodatni elementi Za slike se koristi img , za poveznice a i za tablice table .

4. Rad sa Stilovima CSS-a Kaskadni stilovi CSS, skraćeno od Cascading Style Sheets, definira izgled i prezentaciju web stranica. Upravlja bojama, font-ovima, pozicioniranjem i drugim aspektima. Stiliranje HTML-a CSS se povezuje s HTML-om i primjenjuje na određene elemente pomoću selektora. Stilovi se mogu pisati unutar HTML dokumenta, u vanjskoj CSS datoteci ili pomoću JavaScript-a.

5. Pozicioniranje i Layout Blokovski model HTML elementi se prikazuju kao kutije (box-ovi) s marginama, padding-om, granicama i pozadinskim bojama. Pozicioniranje Elementi se mogu pozicionirati relativno, apsolutno ili fiksirano u odnosu na svoje roditeljske elemente. Fleksibilni Layout CSS Flexbox omogućuje lako prilagodbu layout-a web stranica na različite veličine zaslona.

6. Responzivni Dizajn Prilagodba zaslonima Responzivni dizajn osigurava optimalno prikazivanje web stranica na različitim uređajima (desktopi, tableti, telefoni). Media Queries CSS Media Queries definiraju skup pravila koja se primjenjuju ovisno o veličini zaslona, orijentaciji i drugim karakteristikama uređaja. Optimalna iskustva Responzivni dizajn osigurava ugodno korisničko iskustvo na svim uređajima, poboljšavajući SEO optimizaciju i vidljivost web stranice.

7. Pristupačnost i Semantika 1 Prilagodba Pristupačnost čini web stranice dostupnima svima, uključujući osobe s invaliditetom. 2 Semantika Semantičko HTML korištenje značajnih elemenata poboljšava razumljivost i pristupačnost web stranica. 3 ARIA ARIA (Accessible Rich Internet Applications) koristi dodatne atribute za opisivanje uloge i funkcionalnosti elemenata. 4 Ugodnost Pristupačne web stranice pružaju bolje korisničko iskustvo za sve korisnike, poboljšavajući SEO optimizaciju.

8. Alati i Resursi Code Editori Uobičajeni code editori za HTML i CSS uključuju Visual Studio Code, Sublime Text i Atom. Frameworkovi Frameworkovi poput Bootstrap i Tailwind CSS olakšavaju brzu izradu responzivnih web stranica. Dokumentacija Dokumentacija na web stranicama W3C-a (World Wide Web Consortium) pruža sveobuhvatne informacije o HTML-u i CSS-u. Online alati Dostupni su razni online alati za testiranje kompatibilnosti i validaciju HTML i CSS koda.

9. Zaključak HTML i CSS su nezamjenjivi alati za izradu web stranica. Korištenjem odgovarajućih alata i resursa možete stvoriti moderne, responzivne i pristupačne web stranice. Sretno!