Introducere în HTML și CSS pentru designeri

O introducere în HTML și CSS pentru designeri.

Ca designer grafic, probabil că ești conștient de relația în continuă evoluție dintre design și tehnologie. Acest lucru este valabil mai ales pentru cei implicați în design web. În această industrie, trebuie să avem o înțelegere de bază a modului în care machetele noastre atent concepute devin pagini web vii. Când înțelegem elementele de bază ale acestui proces (și limitările acestuia), putem comunica cu acuratețe cu dezvoltatorii și putem crea site-uri web cu perfect pixel.

Acest lucru nu înseamnă că trebuie să știți cum să codificați un site web de sus în jos (deși ar fi grozav!), înseamnă doar că trebuie să înțelegeți elementele de bază. În această postare, vom începe cu o introducere de bază în HTML. Veți învăța cum să decupați design-urile web în Photoshop și să formatați HTML folosind CSS. Introducere în HTML și CSS pentru designeri

Ce este HTML?

Aproape tot ceea ce vedeți când navigați pe web este un document HTML (hipertext markup language). Hipertext este text care face referire și face referire la alt text de pe ecran, permițându-vă să accesați conținutul cu un simplu clic. Limbajul de marcare este un set de etichete cuprinse între paranteze drepte <>. Aceste etichete HTML vin de obicei în perechi:

<eticheta de pornire> : cunoscut și sub numele de etichetă de deschidere.
: numit și eticheta de închidere și include o bară oblică /

Când includeți conținut între aceste două etichete, totul se numește element :

Acesta este un paragraf

Când această limbă este tradusă pe Internet, spectatorii nu vor vedea etichetele, ci vor vedea doar conținutul dintre ele.

HTML 5, versiunea actuală a HTML, conține aproximativ 100 de etichete cu atribute care își schimbă funcția sau aspectul. Trebuie să cunoașteți doar 30-40 dintre aceste etichete pentru a începe să înțelegeți și să creați HTML. Aruncă o privire la ele și observați cum sunt grupate după funcție. Să vedem asta în acțiune.

Decuparea imaginilor în Photoshop.

Introducere în HTML și CSS pentru designeri

Înainte de a codifica, trebuie să decidem ce secțiuni ale site-ului ar trebui să includă imagini și care pot fi codificate. Să profităm instrument Photoshop Felie (ascuns în submeniu Instrument de decupare ) și evidențiați zone precum fotografia unui burrito și taco joan .

Acum trebuie să ne exportăm fragmentele - alegeți Fișier > Salvare pentru web (Alt + Shift + Ctrl + S). Când este selectat un anumit fragment, puteți seta opțiunile de export ale acestuia în partea dreaptă a ferestrei (JPG, PNG etc.). Dacă faceți dublu clic pe un anumit fragment, veți vedea o fereastră pop-up " Parametrii fragmentului" - Acest lucru vă permite să denumiți anumite fișiere fragmente.

Implicit, toate imaginile sunt plasate în subdirectorul: /images/. Dacă doriți să exportați numai fragmentele pe care le creați, selectați „ Toate fragmentele personalizate" în fereastra „Salvare”. Introducere în HTML și CSS pentru designeri

Crearea unui document HTML de bază

Avem slicerele noastre, haideți să creăm un document HTML de bază. Introducere în HTML și CSS pentru designeri

Linia 1 : Declara că dialectul HTML 5 este limba documentului.

Linia 2 : element reprezintă rădăcina unui document HTML. Acesta este un container obligatoriu care denotă limitele documentului nostru.

3 : capitolul conține elemente invizibile ale paginii, cum ar fi metainformații, titlul etc.

Linia 4 : Aceasta este declarația de codificare a documentului − utf-8 - alegere sigură - puteți citi mai multe despre codificarea caracterelor HTML aici .

Linia 5 : Pagina Exemplu Acesta este titlul paginii care apare în bara de titlu a browserului.

6 : închide eticheta de pe linia 3.

Linia 7 : Acest element body va conține tot conținutul vizibil al paginii.

Linia 8 : închide eticheta de la rândul 2. Acest element marchează sfârșitul documentului. Introducere în HTML și CSS pentru designeri

Există și alte modalități posibile de a codifica același design. Vom folosi etichete semantice HTML 5 (header, nav, article, footer) pentru a crea structura de bază a documentului:

Acesta este aspectul tradus în HTML:

Câteva note:

Rândurile 11 și 12 : Elementele sunt esența Internetului, deoarece sunt folosite pentru a crea hiperlinkuri . Acestea sunt legate de atributul HREF și trebuie să leagă ținta URL-ul .

Rândurile 18–20 : Acestea sunt câteva etichete de formatare a textului: denotă un titlu de nivel întâi; denotă un paragraf; înseamnă întrerupere de linie.

Formatarea cu foi de stil în cascadă (CSS).

Introducere în HTML și CSS pentru designeri

Când deschideți doar fișierul HTML într-un browser web, veți vedea că nu este formatat ca designul nostru anterior. Acest lucru se datorează faptului că codul HTML nu este suficient - trebuie să îl formatăm cu Foi de stil în cascadă (CSS) . CSS este un limbaj pentru foi de stil care este folosit pentru a formata elemente HTML.

Dar de ce exact trebuie să combinăm HTML cu CCS? Cu ceva timp în urmă, formatarea a fost realizată prin adăugarea de atribute la etichetele HTML. Cu toate acestea, acest lucru a dus la un cod de necitit și de neîntreținut. Soluția a fost separarea conținutului documentului (HTML) de formatarea documentului (CSS).

Să defalcăm simplu regula CSS : .

Selector : Acesta este elementul HTML pe care doriți să-l stilați. De exemplu: <articol>

Anunț : O regulă CSS poate avea una sau mai multe declarații. Fiecare declarație constă dintr-o proprietate și o valoare și este separată prin punct și virgulă. Puneți declarațiile între acolade {}. Introducere în HTML și CSS pentru designeri

Proprietate : aceasta este caracteristica stilului, pe care doriți să o schimbați. De exemplu: culoare de fundal, dimensiune font etc.

Valoare : Fiecare proprietate are asociată o valoare. De exemplu: #ffcc11 (pentru culoarea de fundal), 16px (pentru dimensiunea fontului), etc.

Există multe proprietăți CSS, care poate fi setat pentru fiecare element HTML, dar nu este nevoie să le scrieți pe toate singur. Vă puteți baza pe setările implicite ale browserului dvs. sau puteți utiliza o foaie de stil de bază care resetează browserul dvs. la setări rezonabile. De fapt, să selectoare de scriere a face asta singur necesită multe cunoștințe și experiență.

Să ne uităm la câteva reguli CSS necesare pentru a formata designul nostru simplu.

Proprietăți de poziționare CSS : există 4 metode diferite (static, fix, relativ și absolut) care ne permit să poziționăm anumite elemente în designul nostru. După setarea uneia dintre aceste metode, puteți poziționa elemente folosind proprietățile de sus, dreapta, jos și stânga - acestea vor funcționa diferit în funcție de care dintre cele 4 metode pe care le utilizați. În acest caz am dori să poziționăm imagine_placă, folosind absolut poziționare.

Model de casetă CSS : acest model este un cadru care include toate elementele HTML, inclusiv marginile, marginile, umplutura și conținutul. Marja este zona invizibilă din jurul chenarului și umplutura dintre chenar și conținut.

Dacă CHIAR doriți să aflați mai multe despre codificare, arunca o privire la acest site tare: Codecademy .