Uvod u HTML i CSS za dizajnere

Uvod u HTML i CSS za dizajnere.

Kao grafički dizajner, vjerovatno ste svjesni stalnog razvoja odnosa između dizajna i tehnologije. Ovo posebno važi za one koji se bave web dizajnom. U ovoj industriji, moramo imati osnovno razumijevanje o tome kako naši pažljivo izrađeni izgledi postaju žive web stranice. Kada shvatimo osnove ovog procesa (i njegova ograničenja), možemo precizno komunicirati sa programerima i stvarati web stranice sa savršenim pixel.

To ne znači da morate znati kako kodirati web stranicu od vrha do dna (iako bi to bilo sjajno!), to samo znači da morate razumjeti osnove. U ovom postu ćemo početi sa vrlo osnovnim uvodom u HTML. Naučit ćete kako izrezati web dizajn u Photoshopu i formatirati HTML koristeći CSS. Uvod u HTML i CSS za dizajnere

Šta je HTML?

Gotovo sve što vidite kada pretražujete web je dokument jezika za označavanje hiperteksta (HTML). Hypertext je tekst koji upućuje i referencira drugi tekst na vašem ekranu, omogućavajući vam da pristupite sadržaju jednostavnim klikom. Markup language je skup oznaka zatvorenih u uglastim zagradama <>. Ove HTML oznake obično dolaze u parovima:

<početna oznaka> : Također poznat kao početna oznaka.
: naziva se i završna oznaka i uključuje kosu crtu /

Kada stavite sadržaj između ove dvije oznake, cijela stvar se zove element :

Ovo je paragraf

Kada se ovaj jezik prevede na Internet, gledaoci neće vidjeti oznake – vidjet će samo sadržaj između njih.

HTML 5, trenutna verzija HTML-a, sadrži oko 100 oznaka s atributima koji mijenjaju njihovu funkciju ili izgled. Potrebno je da znate samo 30-40 ovih oznaka da biste počeli da razumete i kreirate HTML. Pogledajte ih i primijetite kako su grupirani prema funkciji. Pogledajmo ovo na djelu.

Rezanje slika u Photoshopu.

Uvod u HTML i CSS za dizajnere

Prije kodiranja, moramo odlučiti koji dijelovi web stranice trebaju uključivati slike, a koji se mogu kodirati. Hajde da iskoristimo prednost alat photoshop Rezina (skriveno u podmeniju Alat za obrezivanje ) i označite područja kao što su fotografija burrita i taco joan .

Sada treba da izvezemo naše isječke - odaberite File > Save for Web (Alt + Shift + Ctrl + S). Kada je odabran određeni isječak, možete postaviti njegove opcije izvoza na desnoj strani prozora (JPG, PNG, itd.). Ako dvaput kliknete na određeni fragment, vidjet ćete skočni prozor " Parametri fragmenta" - Ovo vam omogućava da imenujete određene datoteke fragmenta.

Po defaultu, sve slike su smještene u: /images/ poddirektorij. Ako želite izvesti samo isječke koje kreirate, odaberite " Svi prilagođeni fragmenti" u prozoru "Sačuvaj". Uvod u HTML i CSS za dizajnere

Kreiranje osnovnog HTML dokumenta

Imamo naše slicere, napravimo osnovni HTML dokument. Uvod u HTML i CSS za dizajnere

Linija 1 : Izjavljuje da je HTML 5 dijalekt jezik dokumenta.

Linija 2 : element predstavlja korijen HTML dokumenta. Ovo je obavezan kontejner koji označava granice našeg dokumenta.

3 : poglavlje sadrži nevidljive elemente stranice kao što su meta informacije, naslov, itd.

Linija 4 : Ovo je deklaracija kodiranja dokumenta − utf-8 - siguran izbor - možete pročitati više o HTML kodiranju znakova ovdje .

Linija 5 : Uzorak stranice Ovo je naslov stranice koji se pojavljuje u naslovnoj traci pretraživača.

6 : zatvara oznaku iz reda 3.

Linija 7 : Ovaj element tijela će sadržavati sav vidljivi sadržaj stranice.

Linija 8 : zatvara oznaku iz reda 2. Ovaj element označava kraj dokumenta. Uvod u HTML i CSS za dizajnere

Postoje i drugi mogući načini za kodiranje istog dizajna. Koristićemo HTML 5 semantičke oznake (header, nav, article, footer) da kreiramo osnovnu strukturu dokumenta:

Ovo je izgled preveden u HTML:

nekoliko napomena:

Linije 11 i 12 : Elementi su suština interneta jer se koriste za stvaranje hiperveze . Oni su vezani za HREF atribut i moraju vezati cilj URL .

Redovi 18–20 : Ovo su neke oznake za formatiranje teksta: označava naslov prvog nivoa; označava paragraf; znači prekid linije.

Formatiranje sa kaskadnim stilskim listovima (CSS).

Uvod u HTML i CSS za dizajnere

Kada otvorite samo HTML datoteku u web pretraživaču, vidjet ćete da ona nije formatirana kao naš prethodni dizajn. To je zato što HTML kod nije dovoljan - moramo ga formatirati Kaskadni listovi stilova (CSS) . CSS je jezik lista stilova koji se koristi za formatiranje HTML elemenata.

Ali zašto tačno treba da kombinujemo HTML sa CCS? Prije nekog vremena, formatiranje je postignuto dodavanjem atributa HTML oznakama. Međutim, to je rezultiralo nečitljivim i neodrživim kodom. Rješenje je bilo odvojiti sadržaj dokumenta (HTML) od formatiranja dokumenta (CSS).

Hajdemo jednostavno CSS pravilo :.

Selektor : Ovo je HTML element koji želite stilizirati. Na primjer: <članak>

Ad : CSS pravilo može imati jednu ili više deklaracija. Svaka deklaracija se sastoji od svojstva i vrijednosti i odvojena je tačkom i zarezom. Deklaracije stavljate u vitičaste zagrade {}. Uvod u HTML i CSS za dizajnere

Vlasništvo : ovo je karakteristika stila, koji želite da promenite. Na primjer: boja pozadine, veličina font itd.

vrijednost : Svako svojstvo ima pridruženu vrijednost. Na primjer: #ffcc11 (za boju pozadine), 16px (za veličinu fonta) itd.

Tamo mnoga CSS svojstva, koji se mogu postaviti za svaki HTML element, ali nema potrebe da ih sve sami pišete. Možete se osloniti na zadane postavke vašeg pretraživača ili koristiti osnovni stilski list koji resetuje vaš pretraživač na razumne postavke. U stvari, da selektori pisanja da to uradite sami zahteva mnogo znanja i iskustva.

Pogledajmo neka CSS pravila potrebna za formatiranje našeg jednostavnog dizajna.

Svojstva CSS pozicioniranja : postoji 4 različite metode (statične, fiksne, relativne i apsolutne) koje nam omogućavaju da pozicioniramo određene elemente u našem dizajnu. Nakon postavljanja jedne od ovih metoda, možete pozicionirati elemente koristeći svojstva gornjeg, desnog, donjeg i lijevog - oni će raditi drugačije ovisno o tome koju od 4 metode koristite. U ovom slučaju želimo da se pozicioniramo slika_ploce, koristeći apsolutno pozicioniranje.

CSS Box Model : ovaj model je okvir koji obuhvata sve HTML elemente, uključujući margine, ivice, padding i sadržaj. Margina je nevidljivo područje oko ivice i razmak između ivice i sadržaja.

Ako ZAISTA želite saznati više o kodiranju, pogledaj na ovu cool stranicu: Kodekademija .