Hyrje në HTML dhe CSS për Designers

Një hyrje në HTML dhe CSS për dizajnerët.

Si një dizajner grafik, ju ndoshta jeni të vetëdijshëm për marrëdhëniet gjithnjë në zhvillim midis dizajnit dhe teknologjisë. Kjo është veçanërisht e vërtetë për ata që merren me dizajnin e uebit. Në këtë industri, ne duhet të kemi një kuptim bazë se si paraqitjet tona të krijuara me kujdes bëhen faqe të gjalla në internet. Kur kuptojmë bazat e këtij procesi (dhe kufizimet e tij), ne mund të komunikojmë me saktësi me zhvilluesit dhe të krijojmë faqet e internetit me perfekte piksel.

Kjo nuk do të thotë që ju duhet të dini se si të kodoni një faqe interneti nga lart poshtë (edhe pse kjo do të ishte e mrekullueshme!), por thjesht do të thotë që ju duhet të kuptoni bazat. Në këtë postim, ne do të fillojmë me një hyrje shumë themelore të HTML. Do të mësoni se si të shkurtoni dizajnet e uebit në Photoshop dhe të formatoni HTML duke përdorur CSS. Hyrje në HTML dhe CSS për Designers

Çfarë është HTML?

Pothuajse gjithçka që shihni kur shfletoni ueb është një dokument i gjuhës së shënjimit të hipertekstit (HTML). Hiperteksti është tekst që i referohet dhe i referohet tekstit tjetër në ekranin tuaj, duke ju lejuar të aksesoni përmbajtjen me një klikim të thjeshtë. Gjuha e shënimit është një grup etiketash të mbyllura në kllapa katrore <>. Këto etiketa HTML zakonisht vijnë në çifte:

<etiketa e fillimit> : Njihet gjithashtu si etiketa hapëse.
: quhet gjithashtu etiketa mbyllëse dhe përfshin një prerje përpara /

Kur mbyllni përmbajtjen midis këtyre dy etiketave, e gjithë gjëja quhet element :

Ky është një paragraf

Kur kjo gjuhë përkthehet në internet, shikuesit nuk do t'i shohin etiketat—ata do të shohin vetëm përmbajtjen midis tyre.

HTML 5, versioni aktual i HTML, përmban rreth 100 etiketa me atribute që ndryshojnë funksionin ose pamjen e tyre. Ju duhet të dini vetëm 30-40 nga këto etiketa për të filluar të kuptoni dhe krijoni HTML. Hidhini një sy atyre dhe vini re se si grupohen sipas funksionit. Le ta shohim këtë në veprim.

Prerja e imazheve në Photoshop.

Hyrje në HTML dhe CSS për Designers

Para se të kodojmë, duhet të vendosim se cilat seksione të faqes në internet duhet të përfshijnë imazhe dhe cilat mund të kodohen. Le të përfitojmë mjet Photoshop Fetë (fshehur nën menynë Mjet i prerjes ) dhe theksoni zona të tilla si një fotografi e një burrito dhe taco Joan .

Tani duhet të eksportojmë fragmentet tona - zgjidhni File > Save for Web (Alt + Shift + Ctrl + S). Kur zgjidhet një fragment specifik, mund të vendosni opsionet e tij të eksportimit në anën e djathtë të dritares (JPG, PNG, etj.). Nëse klikoni dy herë një fragment specifik, do të shihni një dritare kërcyese " Parametrat e fragmentit" - Kjo ju lejon të emërtoni skedarë të veçantë të fragmenteve.

Si parazgjedhje, të gjitha imazhet vendosen në: /images/ nëndrejtori. Nëse dëshironi të eksportoni vetëm fragmentet që krijoni, zgjidhni " Të gjitha fragmentet me porosi" në dritaren "Ruaj". Hyrje në HTML dhe CSS për Designers

Krijimi i një dokumenti bazë HTML

Ne kemi slicers tona, le të krijojë një dokument bazë HTML. Hyrje në HTML dhe CSS për Designers

Rreshti 1 : Deklaron se dialekti HTML 5 është gjuha e dokumentit.

Rreshti 2 : element përfaqëson rrënjën e një dokumenti HTML. Ky është një kontejner i detyrueshëm që tregon kufijtë e dokumentit tonë.

3 : kapitulli përmban elemente të padukshme të faqes si meta informacion, titull, etj.

Rreshti 4 : Kjo është deklarata e kodimit të dokumentit − utf-8 - zgjedhje e sigurt - mund të lexoni më shumë rreth kodimeve të karaktereve HTML këtu .

Rreshti 5 : Faqe mostër Ky është titulli i faqes që shfaqet në shiritin e titullit të shfletuesit.

6 : mbyll etiketën nga rreshti 3.

Rreshti 7 : Ky element i trupit do të përmbajë të gjithë përmbajtjen e dukshme të faqes.

Rreshti 8 : mbyll etiketën nga rreshti 2. Ky element shënon fundin e dokumentit. Hyrje në HTML dhe CSS për Designers

Ka mënyra të tjera të mundshme për të koduar të njëjtin dizajn. Ne do të përdorim etiketat semantike HTML 5 (header, nav, artikull, footer) për të krijuar strukturën bazë të dokumentit:

Kjo është faqosja e përkthyer në HTML:

Disa shënime:

Rreshti 11 dhe 12 : Elementet janë thelbi i internetit pasi ato përdoren për të krijuar hiperlidhjet . Ato janë të lidhura me atributin HREF dhe duhet të lidhin objektivin URL .

Rreshtat 18–20 : Këto janë disa etiketa të formatimit të tekstit: tregon një titull të nivelit të parë; tregon një paragraf; do të thotë thyerje e linjës.

Formatimi me fletë stilesh Cascading (CSS).

Hyrje në HTML dhe CSS për Designers

Kur hapni vetëm skedarin HTML në një shfletues ueb, do të shihni se ai nuk është i formatuar si dizajni ynë i mëparshëm. Kjo është për shkak se kodi HTML nuk është i mjaftueshëm - duhet ta formatojmë me të Fletët e stilit kaskadë (CSS) . CSS është një gjuhë e fletës së stilit që përdoret për të formatuar elementet HTML.

Por pse saktësisht na duhet të kombinojmë HTML me CCS? Disa kohë më parë, formatimi u arrit duke shtuar atribute në etiketat HTML. Megjithatë, kjo rezultoi në kod të palexueshëm dhe të pambajtur. Zgjidhja ishte ndarja e përmbajtjes së dokumentit (HTML) nga formatimi i dokumentit (CSS).

Le ta zbërthejmë thjeshtë Rregulli CSS : .

Përzgjedhësi : Ky është elementi HTML që dëshironi të stiloni. Për shembull: <artikull>

Reklamë : Një rregull CSS mund të ketë një ose më shumë deklarata. Çdo deklaratë përbëhet nga një pronë dhe një vlerë dhe është e ndarë me një pikëpresje. Ju vendosni deklaratat në kllapa kaçurrelë {}. Hyrje në HTML dhe CSS për Designers

Prona : kjo është karakteristikë e stilit, të cilën dëshironi ta ndryshoni. Për shembull: ngjyra e sfondit, madhësia font etj

Vlerë : Çdo pronë ka një vlerë të lidhur me të. Për shembull: #ffcc11 (për ngjyrën e sfondit), 16 px (për madhësinë e shkronjave), etj.

Atje shumë veti CSS, të cilat mund të vendosen për çdo element HTML, por nuk ka nevojë t'i shkruani të gjitha vetë. Mund të mbështeteni në cilësimet e paracaktuara të shfletuesit tuaj ose të përdorni një fletë stili bazë që e rivendos shfletuesin tuaj në cilësime të arsyeshme. Në fakt, për të shkruani përzgjedhës ta bësh vetë kërkon shumë njohuri dhe përvojë.

Le të shohim disa rregulla CSS të nevojshme për të formatuar dizajnin tonë të thjeshtë.

Karakteristikat e pozicionimit të CSS : ekziston 4 metoda të ndryshme (statike, fikse, relative dhe absolute) të cilat na lejojnë të pozicionojmë disa elementë në dizajnin tonë. Pas vendosjes së njërës prej këtyre metodave, mund t'i poziciononi elementët duke përdorur vetitë e sipërme, djathtas, poshtë dhe majtas - ato do të funksionojnë ndryshe në varësi të cilës prej 4 metodave përdorni. Në këtë rast dëshirojmë të pozicionojmë imazhi i pllakës, duke përdorur absolute pozicionimi.

Modeli i kutisë CSS : ky model është një kornizë që përfshin të gjithë elementët HTML, duke përfshirë kufijtë, kufijtë, mbushjen dhe përmbajtjen. Marzhi është zona e padukshme rreth kufirit dhe mbushja midis kufirit dhe përmbajtjes.

Nëse vërtet dëshironi të mësoni më shumë rreth kodimit, hidhni një vështrim në këtë faqe të lezetshme: Codecademy .