Nemilosrdni resursi html. Najbolji resursi za učenje html-a i css-a. Što je HTML5

Ova stranica sadrži materijale za osobe uključene u razvoj standarda.

Većina ovih informacija nije zaštićena lozinkom. Međutim, kada pristupate nekim stranicama, možda ćete trebati lozinku.

Kodeks ponašanja

Članovi ISO-ovih odbora, radnih skupina ili “Coming together to achieve consensus” potiču se da rade u skladu s načelima Kodeksa ponašanja.

Vodiči za usklađenost s konkurencijom

Usklađenost sa zakonodavstvom u procesu postavljanja standarda važna je za osiguranje učinkovitog funkcioniranja tržišnih mehanizama i jačanje konkurentnosti, kao i za povećanje povjerenja u standarde. ISO daje smjernice o pravnim pitanjima svim sudionicima u procesu razvoja standarda.

Sva pitanja u vezi sa smjernicama zakona o tržišnom natjecanju mogu se uputiti ISO-ovom pravnom timu na .

Autorska prava

Svi sudionici u aktivnostima normizacije moraju poštivati autorska prava u odnosu na ISO publikacije i razvoj projekata, kao i svaki sadržaj koji se odnosi na ISO. Ta su pravila sadržana u Deklaraciji s kojom se moraju složiti sve strane zainteresirane za standardizaciju.

Politika u području komunikacije rada povjerenstva s vanjskim stranama i očuvanja dokumenata

Sudionici u procesima razvoja ISO standarda mogu biti potaknuti (na primjer od strane medija) ili mogu pokrenuti vlastitu inicijativu (na primjer putem društvene mreže) razmjenjuju informacije s vanjskim stranama o različitim aspektima rada odbora. ISO je razvio operativnu politiku za takve vanjske interakcije.

Sva pitanja u vezi s ovom politikom možete uputiti na elektronička pošta Tajništvo TMB-a: .

Politika zaštite podataka

Sve strane uključene u proces standardizacije imaju prava i obveze u pogledu zaštite podataka. Oni se odražavaju u Politici zaštite podataka razvijenoj za članove ISO-a, kao iu Izjavi, koje se moraju pridržavati sve strane uključene u ovaj proces. Odnosi se na podatke pohranjene u ISO IT uslugama, kao i mnoge osobne podatke prikupljene tijekom rada na standardizaciji (npr. popisi prisutnih, zapisnici).

Objašnjenje pojmova i izraza koji se koriste u ISO normama Međunarodne norme i trgovina Vrste pravnih sankcija u ISO

ISO je razvio dokument koji sažima pitanja koja se odnose na sankcije i proces razvoja standarda.

Uključivanje dionika i izgradnja konsenzusa

ISO-ov rad ima za cilj osigurati da standarde razvijaju dionici, za dionike, tako da se potrebe tržišta zadovoljavaju učinkovitije.

U nastavku možete pronaći dokumente koji daju smjernice o uključivanju dionika.

Odlučio sam nastaviti ovu vruću temu. Sastavio sam popis najboljih izvora za učenje html-a i css-a kako bih pomogao onima koji su zainteresirani za učenje ovih pitanja. Sjećam se da mi je, kad sam počeo kao webmaster, jako nedostajao takav izbor visokokvalitetnih i korisnih izvora.

Prvo neke definicije:

Html (od engleskog "HyperText Markup Language" - jezik za označavanje hiperteksta) je standardni jezik označavanje web stranice.

Css (od engleskog "Cascading Style Sheets" - kaskadni stilski listovi) je tehnologija opisa izgled Internet stranice.

Bez poznavanja html-a i css-a, rad vaše web stranice bit će vrlo problematičan - nećete moći čak ni instalirati statistički brojač ili čak banner. Ne bismo li trebali potražiti pomoć stručnjaka ili stvarati temu za temom na forumima? Samo ga trebate uzeti i naučiti.

Iz vlastitog iskustva mogu reći da se html i css mogu naučiti za 1 mjesec. Naravno, ne govorim o profesionalnim visinama - možete ih sami dosegnuti ako želite.

Po mom mišljenju, Najbolji način naučiti html, css i druge teme, uključujući promociju web stranica, znači imati vlastitu web stranicu i vježbati na njoj. Inače, možete vidjeti prvu web stranicu koju sam napravio za mape za igricu Counter-Strike, čijom sam se izradom tada zainteresirao. Evo mapa i njihovih screenshotova koje je napravio starac Globator u ono doba kada još nije znao što su top 10, TCI i PR, te se bezbrižno brčkao na suncu stvarajući trodimenzionalne karte :) Ovu sam stranicu napravio u mjesec dana, u praksi sam naučio html i css.

Ne morate biti tehnički stručnjak da biste naučili html i css. Na primjer, ja sam generalno humanist i iz matematike sam uglavnom dobila dvojku :) Tako da svatko može naučiti html i css. Resursi koje sam naveo također su prikladni tako da ih u bilo kojem trenutku možete koristiti kako biste saznali bilo koju točku koja vas zanima u vezi s html i css.

Web stranice za učenje html-a i css-a

Započet ću izbor korisnih resursa za učenje html-a i css-a sa stranice koju sam osobno koristio. Ovo su Wild html lekcije koje je napisala Valentina Akhmetzyanova aka Dikarka. Opisala je sve potrebne točke tako veselo i zanimljivo da se učenje html-a i css-a uz pomoć njezinih lekcija pretvara u uzbudljivu aktivnost. Usput, možete pročitati web mjesto za blog. Divlje lekcije dovoljne su da naučite html i css na razini potrebnoj za rad kao webmaster.

Možete li zamisliti tko bih ja bio da sam se dalje razvijao u temi Photoshopa? Bio bih pravo čudovište! Ali upustio sam se u SEO i vegetiram ovdje, tipkajući ova slova prstima zgrčenim od hladnoće :) Šalim se, ovdje je i toplo i hrana je dobra :)

Zadnje ažuriranje 9. studenog 2019. u 06:54:54 (UTC/GMT +8 sati)

Što je HTML?

HTML je kratica za Hyper Text Markup Language koji se koristi za stvaranje web stranica, kao i drugih vrsta dokumenata koji se mogu vidjeti u web pregledniku.

HTML je standard koji specificira i održava World Wide Web Consortium.

Od svog izuma, HTML je evoluirao kroz različite verzije. Trenutna verzija HTML-a je HTML 4.01.

Sljedeća verzija HTML-a je HTML 5, koji je u razvoju, ali programeri su već počeli koristiti neke od njegovih značajki.

Na sljedećim stranicama ćemo detaljno raspravljati o HTML 4.01. Naučivši to, moći ćeš samostalno kreirati web stranice.

HTML kod jednostavne web stranice

Primjer HTML stranice Ovo je primjer HTML stranice

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. In hac habitasse platea dictumst. In sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilis. Donec vel odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi at sem eget nisl euismod porta. Sed semper, tortor eu molestie iaculis, felis massa vestibulum massa, vitae suscipit arcu nunc quis ante. Phasellus aliquam elit i nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Aliquam varius scelerisque erat ut egestas.

Naučite HTML s web stranice

Ovo je primjer HTML stranice

Značajke w3resource HTML tutorijala

Pokrili smo sve HTML 4.01 elemente ili oznake i njihove atribute. Zato što su HTML elementi (ili oznake) i atributi ono što morate razumjeti da biste učili HTML. Dok smo raspravljali o HTML oznaci ili elementima u našim HTML vodičima, koristili smo sljedeće značajke kako bismo vam pomogli da bolje razumijete:

1. Započeli smo s jasnim i jednostavnim opisom.

2. Dali smo sintaksu kako biste se mogli sjetiti kako je napisati.

3. A Koristite da vam pokaže kako to napisati u praksi.

4. Prikazali smo Rezultat korištenja.

5. Budući da HTML oznake mogu i ne moraju imati završnu oznaku za zatvaranje elementa, uvijek smo pokazivali jesu li početne i završne oznake potrebne ili ne.

6. U koju kategoriju spada HTML element, tj. ako je to za tekst ili za naslov ili za stvaranje obrazaca itd.

7. Koje druge elemente ili kakvu vrstu sadržaja ta HTML oznaka može sadržavati.

8. Unutar kojih se drugih elemenata ta HTML oznaka može nalaziti.

9. Različiti atributi te oznake, njihov opis i primjeri.

10. Primjer te HTML oznake.

11. Rezultat tog primjera.

12. Pogledajte primjer u pregledniku.

13. Kako ta oznaka izgleda u različitim preglednicima.

Tko je na svijetu najslađi, najcrveniji i najpoželjniji? Nemojte misliti ništa vulgarno, mislim samo na novu verziju označnog jezika - HTML5. Najnovije verzije Moderni preglednici već razumiju neke HTML5 trikove, što znači da je vrijeme da ga počnete koristiti u svojim projektima.

Što je HTML5?

Na prvi pogled, HTML5 je samo nova verzija označni jezik. Međutim, sada ovaj izraz znači nešto malo drugačije. Jednostavno je apsurdno razmatrati HTML5 bez spominjanja CSS3, budući da je bez njega nemoguće razviti istinski moderne web aplikacije. Ne smijemo zaboraviti na JavaScript. Uz njegovu pomoć implementiran je pristup bogatom API-ju opisanom u standardu HTML5. Rezimirajući sve gore navedeno, definicija se nameće sama od sebe: HTML5 je skup modernih tehnologija/standarda (JS, HTML5, CSS3 i tako dalje) koji se koriste za razvoj web aplikacija.

Kap povijesti

HTML5 se nije pojavio iznenada. Njegov razvoj započeo je 2007. Za proces rada bila je odgovorna posebno stvorena grupa iz konzorcija W3C. Ali mnoge značajke HTML5 izumljene su unutar okvira standarda Web Application 1.0 i oni ga proučavaju od 2004. Dakle, u stvarnosti, HTML5 nije tako mlada tehnologija kao što se može činiti na prvi pogled.

Prvi nacrt HTML5 specifikacije postao je dostupan 22. siječnja 2008. Prošle su tri godine, ali konačna verzija specifikacije još uvijek nije gotova i malo je vjerojatno da će biti gotova u sljedećih godinu ili dvije. Ovaj tužan trenutak obvezuje programere da pažljivo primjenjuju nove značajke u svojim projektima. Specifikacija se može lako promijeniti, i to ne sve moderni preglednici(FireFox 4, Google Chrome 10, IE9, Opera 11) u potpunosti podržavaju nove značajke.

Zdravi recepti

O teoriji HTML5 možemo govoriti jako dugo, ali naš odjeljak se zove "Kodiranje", pa vas pozivam da iskusite mogućnosti standarda u praksi. Nisam se trudio stvarati super-originalne recepte, već sam odlučio dati primjere stvari koje su stvarno korisne i koje se mogu i trebaju koristiti na vašim stranicama upravo sada. Pa, idemo.

Recept br. 1: Uključite Drag&Drop do kraja

Jedna od lijepih stvari u vezi s HTML5 (vjerojatno niste trebali konzumirati toliko energetskih pića, jer bi riječ "trikovi" trebala biti tu - napomena urednika) HTML5 bila je mogućnost korištenja API-ja za datoteke i API-ja za povlačenje i ispuštanje.

Uz njihovu pomoć možete organizirati prekrasan prijenos datoteka s korisničkog računala na poslužitelj. Sjećate se, prije je uvijek postojalo polje s gumbom "Pregledaj" za slanje datoteka? Nakon što kliknete na njega, pojavit će se standardni dijaloški okvir za odabir datoteke u kojem se od vas traži da odaberete datoteku za prijenos. Imenujte ovu metodu zgodan jezik ne okreće se. Osobito kada se radi o dodavanju više datoteka u red čekanja za preuzimanje.

Nešto kasnije, obrtnici su počeli stvarati flash uploadere, koji su pružali više funkcionalnosti, ali su imali ozbiljan nedostatak - potrebu za instaliranim bljeskalicom. Osim toga, u oba slučaja korisnik nije imao mogućnost dodavanja datoteka za prijenos jednostavnim povlačenjem miša na stranicu.

Ali Drag&Drop tehnologija se dosta često koristi u sustavu. Ja sam osobno uvijek želio samo istaknuti potrebne datoteke i laganim pokretom štakora baciti ga na stranicu. Ovo je mnogo praktičnije od traženja datoteke pomoću standardnog dijaloškog okvira.

HTML5 je napravio svoje prilagodbe i sada vas ništa ne sprječava da organizirate punopravni Drag&Drop za prijenos datoteke na stranicu. Googleovi su prvi implementirali ovu značajku u Gmail. Ako koristite Google, vjerojatno ste odavno primijetili područje gdje možete povući datoteke za prilaganje pismu. Osobno aktivno koristim ovu funkciju i sada ću vam pokazati kako izraditi istu za svoj projekt. Naš projekt sastojat će se od tri datoteke: sample.html, style.css i scripts.js. Mi bismo se, naravno, mogli ograničiti na jednu html datoteku, ali tada bi kod ispao nečitljiv. Nema potrebe miješati HTML s JS ili CSS. Bolje je sve razbiti u datoteke i onda mirno raditi s njima. Prije svega, pripremimo strukturu naše aplikacije. Napravite datoteku sample.html i upišite u nju:

Povucite svoje datoteke ovdje

Radi lakšeg pisanja koda u JavaScriptu, uključio sam biblioteku jquery. Nakon toga opisao sam strukturu budućeg html dokumenta. Vrlo je jednostavno - moramo opisati polje u koje korisnik treba povući i ispustiti datoteke. Ovo zahtijeva samo jedan div spremnik. Ako sada otvorite stranicu u pregledniku, nećete vidjeti ništa dobro. Kako bi naše polje postalo vizualno uočljivo, potrebno ga je oblikovati CSS pomoć. Otvorite datoteku style.css i u nju upišite sljedeći kod:

#kutija (
širina: 500px;
visina: 300px;
rub: 2px isprekidano #000000;
boja pozadine: #FCFFB2;
poravnanje teksta: središte;
boja: #3D91FF;
veličina fonta: 2em;
obitelj-fontova: Verdana, sans-serif;

Moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#oznaka (
položaj: relativan;
vrh: 2%;
}

Identifikator "box" je naš budući spremnik za primanje datoteka (korisnik mora povući dokumente u ovo područje). Kako korisnik ne bi promašio, povećavam područje i odabirem isprekidane - točkaste linije - kao opciju uokvirivanja. Obične isprekidane linije ne izgledaju baš dobro, pa sam odmah postavio vrijednosti za svojstva: -moz-border-radius i -webkitborderradius. Sada možete otvoriti kreiranu stranicu u pregledniku i procijeniti cjelokupni izgled.

Međutim, ako sada pokušate nešto povući, neće se dogoditi ništa zanimljivo. Povučena datoteka jednostavno će se otvoriti u web pregledniku i to je to. Mali dio JavaScript koda pomoći će ispraviti situaciju:

$(dokument).ready(funkcija() (

//Dodaj rukovatelje događajima

Varijanta mybox = document.getElementById("box")

Mybox.addEventListener("dragenter", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("drop", drop, false);
});
funkcija dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funkcija dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funkcija dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
funkcija drop(evt) (

Evt.stopPropagation();

Evt.preventDefault();

Var datoteke = evt.dataTransfer.files;

Var count = files.length;

Ako (broj > 0)

HandleFiles(datoteke);
}
funkcija handleFiles(files) (

//Uzmite prvu datoteku

//Ako trebate raditi s nekoliko

//datoteke, onda ovdje trebate organizirati pretragu

Var datoteka = datoteke;

Document.getElementById("label").innerHTML =
"Uhvaćeno: " + file.name;

Var reader = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(file);
}
funkcija handleReaderProgress(evt) (

If (evt.lengthComputable) (

Ako (evt.loaded = evt.total) (

Upozorenje("Učitano...");
}
}
}

Na prvi pogled kod se može činiti glomazan i nerazumljiv, no oni koji su barem malo upoznati s JavaScriptom i jqueryjem trebali bi odmah shvatiti što se događa. Na samom početku identificiram događaje čija me pojava zanima. Za svaki od njih opisujem zasebnu funkciju. Na primjer, događaj dragExit događa se kada korisnik pomakne kursor miša od elementa koji se povlači. Ako korisnik povuče datoteku, funkcija handleFiles() preuzima kontrolu.

U njemu namjerno pristupam prvoj datoteci (datotekama) i počinjem raditi s njom. Imajte na umu da korisnik može povući i ispustiti nekoliko datoteka odjednom. Ako vaša aplikacija mora biti u stanju nositi se s takvim situacijama, tada ćemo organizirati pretragu čitavog niza datoteka. Funkcija handleFiles() mjesto je gdje se događa sva zabava.

Prvo prikazujem u elementu oznake (sjećate se natpisa "Povucite svoje datoteke ovdje"?) naziv datoteke koju je korisnik povukao na aktivno područje, a zatim je počinjem čitati pomoću objekta tipa FileReader() . Više o tome možete pročitati u ovom članku: html5rocks.com/tutorials/file/dndfiles. Za svaki slučaj, definiram onProgress rukovatelj događajima za objekt tipa FileReader(). Ovaj će se događaj pozvati svaki put kada se neki podatak pročita. U samom rukovatelju postavio sam uvjet: ako je volumen učitanih podataka jednak veličini datoteke, tada je čitanje uspješno dovršeno i može se prikazati sretna poruka.

Recept br. 2: Pijte pivo, gledajte video, slušajte rock

Prije pojave HTML5, gledanje videa na webu provodilo se pomoću svih vrsta flash playera. To ne znači da je gledanje videozapisa na ovaj način nezgodno. Jedini problem imamo u sigurnosti (u zadnje vrijeme Flash Player jednostavno vrvi ranjivostima) i potrebu za instaliranjem samog dodatka. HTML5 standard nudi elegantno rješenje – ugrađenu mogućnost reprodukcije video i audio sadržaja.

Vjerojatno su mnogi već pogodili da govorim o oznakama i . Omogućuju vam da ugradite audio i video izravno na stranicu. Jedino razočaranje s kojim se moramo nositi je skup podržanih kodeka. Nažalost, ovaj skup je drugačiji za svaki preglednik, tako da postoji velika vjerojatnost da će vaš video savršeno biti prikazan u Chromeu, ali korisnici FireFoxa će ostati u šumi. Kako biste izbjegli dolazak u takvu situaciju, preporučuje se pobrinuti se za opciju sigurnosne mreže - reprodukciju videa pomoću Flash playera. Razgovarali smo o ljupkosti (ne, ipak nije pobrkao riječi, morat će se liječiti elektrokonvulzivnom terapijom od ovisnosti o animeu - napomena Lozovskog) i problemima, a sad idemo na praksu. Za demonstraciju video reprodukcije, sakupio sam jednostavan primjer:

Ovdje bi trebao biti video. Ako vidite ovaj tekst, vaš preglednik ne podržava novi standard.

Imajte na umu da sam u primjeru za oznaku naveo atribut poster. U njemu ukazujem na put do grafička datoteka, koji bi trebao biti prikazan odmah nakon učitavanja stranice - "prvi okvir".

Za što ovo može biti korisno? Alternativno, možete umetnuti logotip svoje tvrtke/projekta kao takvu sliku. Oznaka se primjenjuje na isti način. Omogućuje vam da odredite više izvora za medijsku datoteku odjednom. Na ovaj način možete učitati istu datoteku na različite formate(ogg, mp3). Ako korisnikov preglednik nema mp3 kodek, pokušat će se reproducirati ogg. Ispada da je jednostavnim manipulacijama lako riješiti problem kompatibilnosti i biti siguran da će korisnik moći reproducirati sadržaj.

Recept #3: Gdje ste sada (geolokacijski API)

Geolocation API je softversko sučelje za određivanje korisničkih koordinata. Na temelju dobivenih podataka lako je označiti lokaciju korisnika na, recimo Google karte. Gdje se ova značajka može koristiti? Da, mnogo mjesta! Na primjer, programeri popularne usluge mikroblogiranja Twitter koriste Geolocation API u web sučelju Twitter klijenta. Ako korisnik dopusti dijeljenje svoje lokacije, grad u kojem se trenutno nalazi bit će dodan svim njegovim tweetovima.

Ne sumnjam da vas sada muči pitanje: "Odakle GAPI-jima informacije o lokaciji?" Nemojte ni pomišljati da su špijunski sateliti i druge stvari o Bondu upleteni. Sve je mnogo prozaičnije - paket informacija za analizu izgrađen je na temelju podataka o IP adresi, obližnjim Wi-Fi žarišnim točkama, GPS-u (ako postoji uređaj), ID-u GSM ćelije i tako dalje. Ako vas zanima teorija i praksa dobivanja približnih koordinata iz gore navedenih izvora, savjetujem vam da otvorite mapu ][ i pronađete Stepov članak na tu temu, gdje je temeljito analizirao teorijski dio i dao pregled odgovarajući softver. Sada pogledajmo primjer korištenja GAPI-ja. Sve je vrlo jednostavno i jasno:

if (navigator.geolocation) (
navigator.geolocation.getCurrentPosition(
funkcija (položaj) (
document.getElementById("latitude").innerHTML =
pozicija.koordinate.geografska širina;
document.getElementById("dužina").innerHTML =
position.coords.longitude;
},
);
}

Geografska širina: nepoznata

Zemljopisna dužina: nepoznata

Prije nego pokušate dobiti koordinate, morate provjeriti podržava li vaš preglednik GAPI. Ako je metoda geolociranja vratila true, onda je sve u redu i možete pokušati dobiti koordinate. Da bismo to učinili, koristit ćemo metodu getGurrentPosition objekta navigatora. Ako uspije, primit ćemo koordinate koje će biti poslane izravno u dokument.

Recept #4: Baza podataka u pregledniku

Pri razvoju web aplikacija navikli smo koristiti baze podataka. MySQL, SQLite su proizvodi poznati svakom programeru. Peta verzija HTML-a donosi nam još jedan dar - mogućnost korištenja samostalne SQLite baze podataka. Stop!

Ispada da će svi podaci biti pohranjeni na računalu korisnika? Da točno. Nema potrebe vikati da nije sigurno. Za određene projekte ova bi značajka mogla dobro doći. Nažalost, svi preglednici još ne dopuštaju rad s ovom bazom podataka.

Primjerice, IE9 i FF4 još nemaju ovu značajku, pa se sa značajkom u praksi možete upoznati tek u Google Chromeu. Neću dati primjer pravog koda, već ću samo pokazati opći princip djela:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("kreiraj moju tablicu ako ne postoji " +
"checkins(id integer primarni ključ asc, field_number_one string)",
, function() ( console.log("Zahtjev uspješno dovršen"); ));
);

Ako bolje pogledate gornji primjer, primijetit ćete da se općenito rad s ugrađenom bazom podataka odvija na potpuno isti način kao i s običnim SQLiteom: otvaramo bazu podataka, pripremamo tekst upita i izvršavamo ga.

HTML5.Shutdown()

Na vama je hoćete li koristiti HTML5 u svojim projektima ili ne. Mislim da je sada vrijeme. Ako ste profesionalni programer web stranica, nemojte biti lijeni da sada ugradite HTML5 značajke. Naravno, ne zaboravite voditi računa o kompatibilnosti - implementirajte podršku za moderne i zastarjele preglednike. Imate sve što vam je potrebno za ovo. Nemojte usporavati i pokušajte da se vaši projekti ističu od ostalih. Sretno!

Kako se osigurati?

Kroz ovaj sam članak rekao da moderni preglednici trenutno podržavaju različite stupnjeve funkcionalnosti HTML5. Zato morate biti oprezni i pokušati ne koristiti vrlo egzotične stvari. Odmah se postavlja pitanje: "Kako možete saznati koje značajke HTML5 podržava određeni preglednik?" Postoji nekoliko načina za rješavanje ovog problema, ali moj omiljeni je korištenje malene JavaScript biblioteke pod nazivom Modernizr (modernizr.com).

Knjižnica se distribuira potpuno besplatno i nakon što je povežete sa svojim projektom, odmah će prikazati popis HTML5 značajki koje vaš preglednik podržava. Da biste testirali funkcionalnost biblioteke, ne morate je odmah preuzeti i povezati sa svojim projektom. Samo trebate otići na službenu web stranicu knjižnice i odmah ćete vidjeti što vaš preglednik podržava, a što ne. Pogledajte snimke zaslona posjeta stranici kada Google pomoć Chrome i Internet Explorer 9. Unatoč dobroj PR kampanji i pohvalnim člancima, Microsoftov preglednik očito podržava manje značajki od Google Chromea.

HTML5 će potisnuti Flash

Jedna od najzanimljivijih značajki HTML5 je mogućnost stvaranja animacija. To se postiže miješanjem HTML5 i CSS3.

Ova animacija izgleda prilično lijepo iu mnogim slučajevima može zamijeniti Flash. Sa sigurnošću mogu reći da se to neće dogoditi vrlo brzo, budući da je sada lakše svladati Flash nego razumjeti opskurni HTML5/CSS3 kod (IMHO). Ipak, morate znati za takvu značajku. Toplo preporučam da slijedite donje veze i vlastitim očima vidite prekrasne demo snimke koji pokazuju mogućnost animacije.

Prekrasan demo koji pokazuje mogućnosti Canvasa: feedtank.com/labs/html_canvas;
Prekrasan 3D okvir s ugrađenom trakom za pretraživanje iz Googlea: ;
Jedan klik i stranica će se početi puniti kuglicama. Više klikova - više lopti. Nakon što ispunite stranicu do ruba, pokušajte ih oštro povući. Izgleda jako smiješno: mrdoob.com/projects/chromeexperiments/ball_pool ;
Samo sjajan demo koji prikazuje razne kemijske spojeve. Svakako vrijedi pogledati: alteredqualia.com/canvasmol;
Jeste li se ikada željeli osjećati kao patolog i istraživati misterije ljudskog tijela?

Ako da, onda je ovaj link definitivno za vas. Google je napravio odličan demo koristeći mješavinu WebGL, HTML5, CSS3 i Flash tehnologija. Rezultat koktela bila je interaktivna aplikacija koja demonstrira 3D ljudsko tijelo, u kojem možete ispitati strukturu unutarnjih organa. Kad sam ga prvi put vidjela, nisam se mogla otrgnuti.

…Iako je sintaksu HTML-a relativno jednostavno naučiti,…postoji još mnogo elemenata, atributa i…drugih koncepata koje ćete morati naučiti i pratiti.…Iako je ovaj tečaj namijenjen upoznavanju upoznate s osnovama HTML-a, on...stvarno nije osmišljen da vas podučava svakom pojedinom elementu i atributu koji je dostupan....Imajući to na umu, želim vam dati nekoliko online HTML resursa,...koji vam stvarno mogu pomoći počnete učiti HTML, i...može poslužiti kao vrijedna referenca kasnije, dok budete pisali svoje stranice....Sada ćemo početi, od samih specifikacija....

A ovo je nešto, dva dokumenta koja ste svakako trebali označiti.…Dakle, ovo je W3Cs verzija HTML5.…Možete vidjeti da imaju najnoviju verziju za izdavače.…Možete otići vidjeti Urednikov nacrt,…ako želite vidjeti što dolazi dolje, niz cijevi.…I, ovo je prilično veliko.…Ako se pomaknem prema dolje, možete vidjeti da je ovdje samo Sadržaj.…I neću čak ni listati kroz sve od njih.…

Automatsko pomicanje prijepisa životopisa

Ažurirano 30.3.2017. Objavljeno 16.3.2015

HTML je programski jezik koji pokreće web. I kao i svaki drugi jezik, nakon što ga savladate, možete početi stvarati vlastiti sadržaj, bilo da se radi o jednostavnim web-mjestima ili složenim web-aplikacijama. Ovaj tečaj pruža dubinski uvid u bitne stvari: sintaksu HTML-a i najbolje prakse za pisanje i uređivanje vašeg koda. Stariji autor James Williamson pregledava strukturu tipičnog HTML dokumenta i pokazuje kako podijeliti stranice i formatirati svoj sadržaj pomoću HTML-a. Osim toga, naučite kako stvoriti veze i popise i saznajte kako HTML radi s CSS i JavaScript za stvaranje bogatih, zanimljivih korisničkih iskustava. Stoga otvorite uređivač teksta, pogledajte ove videozapise i počnite učiti stvarati HTML na pravi način.

Teme uključuju:

Zašto je HTML važan?
Istraživanje HTML dokumenta
Oblikovanje sadržaja
Prikaz slika
Korištenje elemenata nav, article i div
Povezivanje na stranice i sadržaj za preuzimanje
Izrada popisa
Upravljanje stilom (fontovi, boje i više)
Pisanje osnovnih skripti