Vodič za početnike za izradu HTML5 / CSS3 web stranica

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

HTML5 i CSS3 olujni su web u samo dvije godine. Prije njih bilo je mnogo izmijenjene semantike u načinu na koji se od web dizajnera očekuje da stvaraju web stranice, a njihovim dolaskom dolazi mnoštvo sjajnih podrške kao što su alternativni mediji, oznake u stilu XML-a i progresivni atributi unosa za web dizajnere kako bi postigli sanjive značajke kao što su animacija.

Iako se čini da većina programera prikazuje potencijalne, ali komplicirane demo verzije, HTML5 / CSS3 zapravo nisu raketna znanost, a ja ću vas provesti kroz opuštajući proces kako biste izgradili standardnu HTML5 / CSS3 web stranicu s sveobuhvatnim, ali detaljnim objašnjenjem i tada! Bonusi kao što su resursi za učenje i besplatni HTML5 predlošci dostupni su za vas, pa iskoristite ovu priliku da pokrenete svoje HTML5 putovanje!

Promjene između HTML4 i HTML5

Možda se pitate zašto je čak i važno prebaciti se na HTML5. Postoji mnogo razloga, ali uglavnom zato što ćete biti rad s globalnim internetskim standardima kao i svaki drugi dizajner. Na taj ćete način pronaći više podrške na mreži i vašoj web-lokacije ispravno će se prikazivati u modernim preglednicima koje se stalno poboljšavaju.

(Izvor slike: W3C)

Uspoređivanje između HTML4 i HTML5 teško je uočiti na razini površine. Pregledom novog nacrta HTML5 možete vidjeti istaknute elemente i ispravljene postupke rukovanja pogreškama. Programeri preglednika posebno su uživali u novim specifikacijama za prikazivanje zadanih web-stranica.

Štoviše, HTML5 je konverzija našeg modernog web-preglednika. S ovim novim specifikacijama web kao cjelina sada se gleda kao aplikacijsku platformu za HTML (osobito HTML5), CSS i JavaScript koji će se graditi na. Također, ovaj sustav elegantno stvara harmoniju između web dizajnera i programera postavljanjem zajedničkih standarda koje bi trebali slijediti svi preglednici.

Osim toga, stvoreni su mnogi elementi predstavljaju digitalne medije novoga doba. To uključuje i koji su ogromni za multimedijsku podršku. U nekim preglednicima možete dovršiti provjeru obrasca izravno u HTML-u. Doduše, još uvijek postoji velika potreba za jQuery, budući da postoje mnogi programeri koji još nisu prepoznali značajke. Ako želite popis oznaka, provjerite ovu tablicu W3Schools da biste saznali više o njima.

Bare HTML5 kostur

Smatram da je najjednostavniji način razumjeti bilo koju temu uronite pravo u nju. Zato ću konstruirati osnovni HTML5 skeletni predložak za web stranicu. Uključio sam nekoliko novijih elemenata, za koje se nadam da ću ih malo kasnije kategorizirati.

   Naša prva HTML5 stranica       Dobro došli, svi!
   Dom
 O nama
 kontakti
 
 
 
   neke sadržaje ovdje.
 
  ali i neke ovdje!
 
 
  Neke autorske i pravne napomene ovdje. Možda koristite simbol © malo.

Odmah se to ne razlikuje mnogo od standardne HTML4 web stranice. Ono što možete primijetiti je da smo mi ne morate uključivati više oznaka koje se same zatvaraju. Ovo je doista divna vijest jer će vam uštedjeti mnogo vremena izvan vaših razvojnih projekata.

Za one koji ne znaju, u XHTML nacrtima je obilježeno mnogo elemenata self-zatvaranja. To bi se završilo s kosom crtom ispred operatera 'veći od' kako bi se označilo da ne trebate uključiti još jednu završnu oznaku negdje drugdje. Kao primjer možete izraditi oznaku meta ključnih riječi koju biste koristili bez potrebe za zatvaranjem drugdje.

Ovo se pravilo i dalje primjenjuje u HTML5. Ali sada ti ne trebate čak ni dodatnu kosu crtu! je potpuno vrijedi, iako je dopušteno nastaviti s korištenjem XHTML / XML standarda. Za sve preglednike koji zadovoljavaju standarde oba se elementa prikazuju na isti način.

Definiranje područja naših stranica

Većina našeg novog koda ne bi trebala biti previše šokantna. Naše Doctype je urnebesno jednostavniji nego ikad, nema potrebe za prekomjernim atributima tijela, informacije u našem naslovu su jasno označene. Krenuvši dalje želim vam skrenuti pozornost na sadržaj unutar našeg označiti. To uključuje svu strukturu glavne stranice. Namjerno sam upotrijebio nekoliko lijepih HTML5 oznaka kako bih označio kako ih možete uključiti u svoj rad.

Prvo ćete vidjeti cijelu stranicu enkapsulirano unutar div označiti. To sam označio s ID-om omot, što znači da se obavija oko cijelog sadržaja naše web-lokacije. Ovo je korisna za postavljanje maksimalne širine ili sadržaja položaja oko zaslona. Dalje sam razlomio stranicu na 3 osnovna elementa - jedan

, jezgra

, i kratko

. Unutar prilagođenog zaglavlja dodao sam pojednostavljen prikaz naslova stranice i navigacijske stavke pomoću

kao omot.

Sada za

s ID-om srž Primijenio sam sekundarnu clearfix. Ova značajka omogućuje da je možemo slobodno plutaju 2 stupca unutra i nećemo iskusiti nikakav ispušteni sadržaj ili čudne pojave. I to s pravom, jer sam iznutra postavio dva

oznake koje će uključivati naše glavno područje sadržaja i bočnu traku. Koristit ćemo CSS stilove kako bismo ih razdvojili.

Isto tako i tišina podnožje označiti dobro funkcionira kako bi se ovaj sadržaj razlikovao na stranici. Unutra sam stavio svečani stavak koji može sadržavati neke podatke o autorskim pravima i vlasništvu. No, dobre su šanse da želite uključiti malo više sadržaja, kao što su sekundarne veze na vaše stranice.

Kreativno CSS3 čarobnjaštvo

Da bismo završili ovaj osnovni raspored matrica možemo koristiti nekoliko CSS stilova. U osnovnom HTML5 predlošku dodao sam vanjski CSS stil tako da možemo držati područja kodova odvojena. Ovo će razjasniti mnogo konfuzije na duge staze, kada se vaše stranice i stilovi počnu prikazivati na različitim stranicama.

(Izvor slike: W3C)

Tako da nisam proveo mnogo vremena s CSS-om, ali dovoljno da pokažem nekoliko urednih efekata. Prije svega koristio sam neke od postavke granice radijusa za izgradnju vrlo kul efekte navigacijske veze. Isti učinak možete ciljati u kodu predloška, samo dodajte sljedeće retke u CSS dokument.

 nav display: block; margin-bottom: 10px;  nav ul style-list: none; veličina fonta: 14px;  nav ul li prikaz: inline;  Nav. plutajući: lijevo; obloga: 3px 6px; boja: # 575c7d; text-decoration: none; font-weight: bold;  Navigirajte: hover pozadina: # deff90; boja: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 3px; obloga: 3px 6px; margina: 0; text-decoration: none;

Još jedan uredan učinak je stilovi clearfixa. To nije posve novi koncept s CSS3, ali je važan za izgradnju web-stranica usklađenih sa standardima. Često kada želite prikazati sadržaj jedan do drugog doživjet ćete bugove pozicioniranja. To je uzrokovano odstupanjem margina i pogreškama pri postavljanju apsolutnih širina za vaš plutajući sadržaj.

Ovaj koncept može izgledati pomalo zbunjujuće i dodao sam mali dio koda u nastavku kako bih pomogao. U osnovi ciljamo dvije

elementi, #lijevo i #pravo da odgovara njihovoj strani stranice. Postavio sam svaku s određenom širinom i plutajući lijevo, tako da će se slagati jedan do drugog. Od našeg kontejnera div # jezgra sadrži clearfix klasa, to znači da svi unutarnji sadržaji mogu slobodno se krećite i automatski briše dodatni prostor nakon toga.

/ * jezgra stranice * / div # core (prikaz: blok; jasno: oboje; margin-bottom: 20px;  odjeljak # lijevo širina: 550px; plutajući: lijevo; margina: 0 15px;  odjeljak # desno float: lijevo; širina: 300px;  / * clearfix * / .clearfix: poslije content: "."; prikaz: blok; jasno: oboje; vidljivost: skrivena; visina linije: 0; visina: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix visina: 1%;

Ovi dijelovi koda su jednostavni za početak. Oni se također odnose na naš HTML5 predložak šablona koji je ranije konstruiran, tako da je to jednostavna praksa. Ali kada je riječ o stvarnim ovisnicima o webu, gledat ćete u više CSS3 funkcionalnosti.

Manje poznata sintaksa CSS3

Za izgradnju punih HTML5 / CSS3 web stranica početi ćete koristiti mnogo složenije stilove. Mnogi dizajneri znaju za skraćeni kod (kao što je font: svojstvo), budući da su to bili standardi čak i prije CSS2.

No, u CSS3 postoji nekoliko novih svojstava o kojima mnogi dizajneri ne razmišljaju. Mnogi od njih nisu namijenjeni samo estetici, već uključuju i animacijske efekte. U nastavku je kratak popis koji objašnjava neka od svojstava s kojima se možete igrati. Pokušajte googling za sintaktičke primjere ako se osjećate izgubljeno.

kutija-sjena: dodaje uredan efekt sjene na vaše elemente stranice. Dobili ste 4 parametra koji postavljaju položaj lijevo / desno, gore / dolje, zamućenje u sjeni i boju. Napominjemo da se sjenke okvira ne smatraju dodatnim prostorom u odnosu na izvornu širinu / visinu.
text-shadow: stvara prekrasne sjene iza teksta stranice. S pravim efektima vaša slova mogu se pojaviti na popisu s desne strane stranice.
granica-radijus: Zaobljeni kutovi dugo su trajali da bi postali prihvaćeni standardi. Prije nekoliko godina mnogi dizajneri weba 2.0 izradili su pozadinske slike samo da bi se uklopili u zaobljene kutove s CSS-om. Ali koristeći CSS3 granični radijus možete manipulirati krivuljom svake granice na bilo kojem elementu.
neprozirnost: Čini se kao jednostavna imovina koju mnogi dizajneri ne razmatraju. Neprozirnost očekuje jedan numerički ulaz u rasponu od 0 do 1.0 (0% - 100%). Ovaj efekt izvrsno funkcionira kao animacija lebdenja.
'Font-lica: Još jedan lijepi primjer nekih složenih CSS stilova i tipografije. Web dizajneri sada mogu raditi s vlastitim prilagođenim fontovima definirajući ih kao varijable unutar CSS dokumenata.
kutija-kalibracija: prema zadanim postavkama veličina okvira postavit će sve vaše elemente kao sadržaj kutija. To znači da su širina, obloga i granice uključeni u maksimalnu širinu. Ali postavite na border-box možete definirati maksimalnu širinu (recimo 20px), a dodano obrubljivanje / granice uključiti će se u ovo, čime će se ukloniti prostor unutar objekta. To je fantastična nekretnina nakon što ovladate njezinom snalažljivošću.

Sva ta svojstva imaju svoje nedostatke i padove. Ne bih preporučio da ih sve pokušavate strpati u vaše web stranice. Ali praksa će vam dati jasan način razmišljanja s lakoćom ući u razvoj daljnjih web-lokacija.

Još jedna bitna sintaksa vrijedna spomena je izbornici atributa. S CSS3 sada možete definirajte stilove na temelju HTML atributa (kao što su tip, href, naslov) i čak pružaju određene vrijednosti. Tako bismo, na primjer, mogli ciljati veze s definiranim atributom naslova i dati im skup ikona pozadine.

 ul li [naslov ^ = "ico"] background: url ('my-icon.gif');

Ako primijetite da sam uključio a znak simbola prije znaka jednakosti. To je operater koji definira sve stavke popisa s prefiksom, ico. Alternativno možete zamijeniti znak (^) znakom dolara ($) da biste ciljali područje sufiksa vašeg naslova. Na taj način CSS3 zna dodati pozadinske slike gdje možete postaviti naslove kao 'prvi ico' ili 'book ico'. Pročitajte više o selektorima atributa ako ste zainteresirani.

Sve to zajedno

U središtu HTML5 i CSS3 web stranica je jednostavnost. Web-programeri pokušavaju izgraditi vrlo kreativne web-lokacije u manje vremena i uz manje stresa. Nove značajke u HTML5 omogućuju to s mnogo prostora za miješanje. A korištenje nekih od novih CSS3 selektora i svojstava će vam pružiti prednosti na duge staze.

(Izvor slike: W3C)

Ali i ti bi trebao biti s obzirom na krajnjeg korisnika. Proces izgradnje web-stranice na kraju završava nakon objavljivanja internetske stranice. Vaš je cilj molim publiku s lako dostupnim informacijama, i ne samo ljudske čitatelje, nego i pretraživači i roboti za indeksiranje. Semantika je uvelike evoluirala tako da uključuje nove HTML5 elemente rasporeda, dosljedno dijeleći izgled stranica. Nikada nije bilo jednostavnije izraditi mali odjeljak za navigaciju i podnožje u skladu sa svim modernim web-preglednicima.

Kada postanete udobni za izgradnju HTML5 web stranica, vjerojatno ćete početi tražiti animacije stranica. Čak i manje učinke s JavaScript i AJAX mogu majorly poboljšajte korisničko iskustvo i izvedbu web-lokacije. Iako ovo nije dio opsega članka, preporučujem vam da se igrate s jQuery-om ako imate vremena. Knjižnica otvorenog koda je zapanjujuća i omogućuje brzo prototipiranje na vrhu HTML5 elemenata stranice.

Dodatna sredstva

Blogeri diljem svijeta raspravljaju o novim trendovima u HTML5 i CSS3 i dijele resurse javnosti. Vrijeme se mijenja i web zajednica se mijenja s njima. Trebali biste razmotriti nekoliko područja u kojima ćete proučavati i izgraditi mali interes.

U nastavku su navedeni neki dodatni popisi, članci i tutoriali koje možete uživati. Oslobodio sam se dijeljenja popisa na HTML5 i CSS3 resurse. Na temelju onoga što tražite, trebalo bi ovdje biti nekoliko tema za svakoga. Također uživajte u kratkoj galeriji besplatnih HTML tema dostupnih za preuzimanje na internetu!

HTML5

HTML5: 15 nadahnjujućih eksperimenata
HTML5: 19 web-aplikacije
HTML5: 48 potencijalni demo za ubijanje Flash-a
Napravite kontaktni obrazac za HTML5 / CSS3 temeljen na Ajaxu

CSS3

CSS3: Vodič za početnike
CSS3: Stvaranje polja za pretraživanje
CSS3: Korištenje pseudo-klasa
CSS3: 30+ Korisni vodiči

Bonus: HTML5 predlošci i teme

Dizajnerska tvrtka

Spremni za korak u predivan svijet HTML5? Evo potpuno besplatnog HTML5 predloška, s jQuery skriptama i prilagođenim fontovima naoružanim za slobodno testiranje!

HTML5 / CSS3 tema

Ova tema s podrškom za HTML5 / CSS3 ima uobičajeni dizajn bloga za izradu vlastitog HTML5 bloga s opsežnim značajkama ili jednostavno upišite kôd i saznajte nešto o tome.

Yoko

Yoko je moderna WordPress tema koja govori o fleksibilnosti s prilagodljivim rasporedom na temelju CSS3 medijskih upita, što je sposobnost prilagodbe različitim veličinama zaslona, upoznavanje s njim!

siva

Ako vam se više sviđa klasični stil WordPress bloga, Gray je vjerojatno za vas sa svojim ugrađenim CSS3 značajkama kao što su granični radijus, više pozadina, text-shadow, itd..

Vodič za početnike za Flock, preglednik društvenih medija

Vodič za početnike za iOS razvoj Sučelje - I. dio

Vodič za početnike za postavljanje sustava Windows 7 Media Center