Diseinatzaileentzako HTML eta CSSrako sarrera

HTML eta CSSrako sarrera diseinatzaileentzat.

Diseinatzaile grafiko gisa, ziurrenik diseinuaren eta teknologiaren arteko etengabeko eboluzioaz jabetuko zara. Hau bereziki egia da web diseinuan parte hartzen dutenentzat. Industria honetan, gure arretaz landutako diseinuak web orri biziak nola bilakatzen diren jakiteko oinarrizko ulermena izan behar dugu. Prozesu honen oinarriak (eta bere mugak) ulertzen ditugunean garatzaileekin zehatz-mehatz komunikatu eta sortu perfektua duten webguneak pixela.

Horrek ez du esan nahi webgune bat goitik behera kodetzen jakin behar duzunik (nahiz eta hori bikaina izango litzateke!), oinarriak ulertu behar dituzula esan nahi du. Argitalpen honetan, HTMLrako oinarrizko sarrera batekin hasiko gara. Photoshop-en web-diseinuak mozten eta HTML formatuan CSS erabiliz ikasiko duzu. Diseinatzaileentzako HTML eta CSSrako sarrera

Zer da HTML?

Webean arakatzen duzunean ikusten duzun ia guztia hipertestu-marka-lengoaia (HTML) dokumentu bat da. Hipertestua Zure pantailako beste testu batzuei erreferentzia egiten eta erreferentzia egiten dien testua da, edukira klik soil batekin atzitzeko aukera ematen dizu. Markatze-lengoaia kortxete artean <> sartutako etiketa multzoa da. HTML etiketa hauek binaka etorri ohi dira:

<hasi etiketa> : Hasierako etiketa bezala ere ezaguna.
: itxiera etiketa ere deitzen zaio eta barra-barra dakar /

Bi etiketa hauen artean edukia sartzen duzunean, gauza osoa deitzen da elementua :

Hau paragrafo bat da

Hizkuntza hau Internetera itzultzen denean, ikusleek ez dituzte etiketak ikusiko; haien arteko edukia bakarrik ikusiko dute.

HTML 5, HTMLren egungo bertsioak, 100 etiketa inguru ditu bere funtzioa edo itxura aldatzen duten atributuak dituztenak. Etiketa hauetako 30-40 bakarrik ezagutu behar dituzu HTML ulertzen eta sortzen hasteko. Begiratu haiei eta ohartu nola multzokatzen diren funtzioen arabera. Ikus dezagun hau ekintzan.

Irudiak moztea Photoshop-en.

Diseinatzaileentzako HTML eta CSSrako sarrera

Kodetu aurretik, webguneko zein atal sartu behar diren irudiak eta zein kodetu daitezkeen erabaki behar dugu. Aprobetxa dezagun tresna Photoshop Slice (azpimenuan ezkutatuta Moztu tresna ) eta nabarmendu eremuak, hala nola burrito baten argazkia eta taco joan .

Orain gure zatiak esportatu behar ditugu - aukeratu Fitxategia > Gorde Weberako (Alt + Shift + Ctrl + S). Zatiketa zehatz bat hautatzen denean, bere esportazio-aukerak ezar ditzakezu leihoaren eskuinaldean (JPG, PNG, etab.). Zati zehatz batean klik bikoitza egiten baduzu, pop-up leiho bat ikusiko duzu " Parametro zatiak" - Honek zati-fitxategi zehatzak izendatzeko aukera ematen du.

Lehenespenez, irudi guztiak: /images/ azpidirektorioan kokatzen dira. Sortzen dituzun zatiak soilik esportatu nahi badituzu, hautatu " Zati pertsonalizatu guztiak" "Gorde" leihoan. Diseinatzaileentzako HTML eta CSSrako sarrera

Oinarrizko HTML dokumentu bat sortzea

Gure slicers ditugu, sor dezagun oinarrizko HTML dokumentu bat. Diseinatzaileentzako HTML eta CSSrako sarrera

1. lerroa : HTML 5 dialektoa dokumentuaren hizkuntza dela adierazten du.

2. lerroa : elementu HTML dokumentu baten erroa adierazten du. Gure dokumentuaren mugak adierazten dituen derrigorrezko edukiontzia da.

3 : kapitulua orrialdeko elementu ikusezinak ditu, hala nola meta informazioa, izenburua, etab.

4. lerroa : Hau dokumentua kodetzeko adierazpena da - utf-8 - Aukera segurua - HTML karaktereen kodeketari buruzko informazio gehiago irakur dezakezu Hemen .

5. lerroa : Lagin orria Hau da arakatzailearen izenburu-barran agertzen den orriaren izenburua.

6 : etiketa ixten du 3. lerrotik.

7. lerroa : Gorputz-elementu honek orriaren eduki ikusgai guztia edukiko du.

8. lerroa : etiketa ixten du 2. lerrotik. Elementu honek dokumentuaren amaiera markatzen du. Diseinatzaileentzako HTML eta CSSrako sarrera

Diseinu bera kodetzeko beste modu posible daude. HTML 5 etiketa semantikoak erabiliko ditugu (goiburua, nav, artikulua, orri-oina) dokumentuaren oinarrizko egitura sortzeko:

Hau da HTMLra itzulitako diseinua:

Ohar batzuk:

11. eta 12. lerroak : Elementuak Interneten funtsa dira sortzeko erabiltzen diren heinean hiperestekak . HREF atributuari lotuta daude eta xedea lotu behar dute URL .

18-20 lerroak : Hauek dira testu-formateatzeko etiketa batzuk: lehen mailako goiburua adierazten du; paragrafo bat adierazten du; lerro haustura esan nahi du.

Formateatzea Cascading Style Sheets (CSS) bidez.

Diseinatzaileentzako HTML eta CSSrako sarrera

Web arakatzaile batean HTML fitxategia soilik irekitzen duzunean, ikusiko duzu ez dagoela gure aurreko diseinua bezalako formatua. Hau da HTML kodea ez delako nahikoa - honekin formateatu behar dugu Kaskadako estilo-orriak (CSS) . CSS HTML elementuak formateatzeko erabiltzen den estilo-orrien lengoaia da.

Baina zergatik konbinatu behar dugu HTML eta CCS? Duela denbora pixka bat, HTML etiketari atributuak gehituz lortu zen formatua. Hala ere, horrek kode irakurgaitza eta mantendu ezina sortu zuen. Irtenbidea dokumentuaren edukia (HTML) eta dokumentuaren formatua (CSS) bereiztea izan zen.

Egin dezagun zatiketa sinplea CSS araua : .

Hautatzailea : estiloa jarri nahi duzun HTML elementua da. Adibidez: <artikulua>

Ad : CSS arau batek deklarazio bat edo gehiago izan ditzake. Adierazpen bakoitza propietate batek eta balio batek osatzen dute eta puntu eta komaz bereizten dira. Adierazpenak giltza kizkurren artean jartzen dituzu {}. Diseinatzaileentzako HTML eta CSSrako sarrera

jabetza : Hau estiloaren ezaugarria, aldatu nahi duzuna. Adibidez: atzeko planoaren kolorea, tamaina letra-tipoa etab.

Balio : Jabetza bakoitzak balio bat dauka lotuta. Adibidez: #ffcc11 (atzeko planoaren kolorerako), 16px (letra-tamainarako), etab.

Ez dago CSS propietate asko, HTML elementu bakoitzerako ezar daitekeena, baina ez dago denak zuk zeuk idatzi beharrik. Zure arakatzailearen ezarpen lehenetsietan fidatu zaitezke, edo zure arakatzailea arrazoizko ezarpenetara berrezartzen duen oinarrizko estilo-orri bat erabil dezakezu. Izan ere, to idazteko hautatzaileak zuk zeuk egiteak ezagutza eta esperientzia handia eskatzen du.

Ikus ditzagun gure diseinu sinplea formateatzeko beharrezkoak diren CSS arau batzuk.

CSS Posizionamendu Propietateak : existitzen da 4 metodo ezberdin (estatikoak, finkoak, erlatiboak eta absolutuak) gure diseinuan zenbait elementu kokatzeko aukera ematen digutenak. Metodo hauetako bat ezarri ondoren, elementuak goiko, eskuineko, beheko eta ezkerreko propietateak erabiliz koka ditzakezu; desberdin funtzionatuko dute erabiltzen dituzun 4 metodoetatik zein den. Kasu honetan kokatu nahiko genuke plaka_irudia, erabiliz absolutua kokatzea.

CSS kutxa eredua : eredu hau HTML elementu guztiak biltzen dituen marko bat da, ertzak, ertzak, betegarriak eta edukia barne. Marjina ertzaren inguruko eremu ikusezina eta ertzaren eta edukiaren arteko betegarria da.

BENETAN kodetzeari buruz gehiago ikasi nahi baduzu, begirada bat bota gune polit honetara: Codecademy .