Sadržaj
HTML (HyperText Markup Language) ili jezik za označavanje hiperteksta, standard je koji se koristi za razvoj web stranica, jezik se temelji na oznakama koje strukturiraju informacije na temelju hijerarhije sadržaja. HTML sam po sebi ne daje grafičke karakteristike prezentiranim informacijama, već ih samo organizira tako da ima logičan redoslijed čitanja.Drugo CSS (Cascading Style Sheet) ili kaskadni stilski listovi jezik je koji se koristi za definiranje i stvaranje prezentacije strukturiranog dokumenta napisanog u HTML -u, zadužen je za formuliranje specifikacija stilskih listova koji će poslužiti kao standard za preglednike.
U ovom ćemo vodiču predstaviti osnovnu strukturu dokumenta HTML5, najpopularnije oznake i hijerarhijski redoslijed za njihovo proglašavanje. Zauzvrat ćemo objasniti odnos između HTML5 i CSS3, način na koji se oni mogu povezati, strukturu deklaracija danih u CSS3 i grafičke atribute koje mogu dati HTML dokumentu.
Za primjere koje ćemo izvesti, potrebno je imati uređivač koda, u našem slučaju odabrani uređivač je Dreamweaver CC 2014, u vodiču Dreamweaver CS6 Osnove: Poznavanje radnog okruženja opisane su karakteristike aplikacije koje ostaju iste unatoč razlici u njihovim verzijama
1. Struktura HTML5 dokumenta
DO) Ova oznaka označava verziju koju ćemo koristiti u dokumentu, u ovom slučaju to je verzija 5 HTML -a.
B) Označava otvaranje HTML dokumenta, to je prva oznaka koja je deklarirana.
C) Možete dodati naslov dokumenta, skripte, stilove, metapodatke, između ostalog.
D) Pruža metapodatke o HTML dokumentu. Metapodaci se neće prikazivati na stranici, samo će se analizirati kao priloženi podaci. Elementi se obično koriste za navođenje opisa stranice, ključnih riječi, autora dokumenta, između ostalog. U primjeru prikazanom na slici koristili smo charset atribut za definiranje skupa znakova u kojima će se stranica prikazivati, charset = "utf-8" u slučaju španjolskog jezika.
I) Omogućuje nam da dodijelimo naziv stranici koja će biti prikazana u preglednicima.
F) Velika većina oznaka u HTML -u treba uvodnu i završnu deklaraciju:
Sadržaj oznakeU ovom slučaju prikazana slika zatvara oznaku glave s
G) Preglednik će prikazati sve unutar ovog elementa, odnosno unutar ove oznake označit ćemo sav vizualni sadržaj našeg HTML dokumenta.
H) Na isti način kako je objašnjeno u odjeljku Ž ovo je zatvaranje oznake
Ja) Na isti način kako je objašnjeno u odjeljku Ž ovo je zatvaranje oznake
Struktura CSS3 dokumenta
DO) .class: Sve deklaracije koje počinju s točkom su tipa klase, njihove grafičke karakteristike mogu se primijeniti na bilo koju HTML oznaku.
B) #Id: Deklaracije koje počinju znakom funte ukazuju na to da je ID tipa. I klase i ID -ovi koriste se za određivanje grafičkih atributa koje želimo dati našem HTML sadržaju. Međutim, razlike između ove dvije vrste izjava su sljedeće:
ID -ovi su jedinstveni:
- Svaki element može imati samo jedan ID.
- Svaka stranica može imati samo jedan element s tim ID -om.
Naš HTML kôd neće proći provjeru valjanosti ako se isti ID koristi u više od jednog elementa.
Nastava nije jedinstvena:
- Ista klasa može se koristiti u nekoliko elemenata.
- Možete koristiti nekoliko klasa u istom elementu.
Svaki stil koji se mora primijeniti na više objekata na stranici mora biti izveden klasom. Važno je napomenuti da je sve navedeno u CSS dokumentima osjetljivo na velika i mala slova.
C) {Otvaranje zagrada koja započinje deklaraciju atributa.
D) } Ključ koji zatvara deklaracije dane u klasi ili ID -u.
I) Struktura atributa: nakon deklariranja atributa potrebno je navesti njegovu vrijednost, u primjeru prikazanom na slici dodjeljujemo visinu od 600 piksela #Id -u.
Za odvajanje atributa i njihovih vrijednosti koristi se točka -zarez; kako je prikazano na slici.
Ovo su, na jednostavan način, opće karakteristike strukture koda HTML, potrebne naljepnice i kako ih naručiti. U slučaju CSS vrste deklaracija i njihova opća struktura. S tim znanjem bit ćemo spremni napraviti prvi HTML i etiketama dati grafičke karakteristike.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod