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ë referon dhe lidh tekstin 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 .
FAQ. Një hyrje në HTML dhe CSS për dizajnerët.
1. Çfarë është HTML dhe për çfarë përdoret?
HTML (Gjuha e shënjimit të HyperText) është një gjuhë standarde shënjimi për krijimin e faqeve në internet. Përdoret për të strukturuar përmbajtjen në një faqe interneti duke përdorur etiketa që i tregojnë shfletuesit se si të shfaqë tekstin, imazhet, lidhjet dhe elementët e tjerë.
2. Çfarë është CSS dhe për çfarë përdoret?
CSS (Cascading Style Sheets) është një gjuhë stilimi që përdoret për të përshkruar pamjen e një dokumenti HTML. CSS kontrollon paraqitjen, ngjyrat, fontet dhe aspekte të tjera vizuale të faqeve të internetit.
3. Si të filloni me HTML dhe CSS?
Për të filluar me HTML dhe CSS, do t'ju duhet një redaktues teksti (siç është Notepad++, Sublime Text ose Visual Studio Code) dhe një shfletues uebi për të parë faqet tuaja. Krijo dy skedarë: një me shtesën .html për kodin HTML dhe një tjetër me shtrirje .css për stilet CSS.
4. Cila është struktura e një dokumenti HTML?
Një dokument HTML përbëhet nga disa etiketa bazë:
Titulli i faqes
Drejtimi
Paragrafi i tekstit.
5. Si të lidhni HTML dhe CSS?
Në një dokument HTML, ju mund të lidhni një skedar CSS duke përdorur një etiketë <link> në seksion <head>:
6. Si të aplikoni stilet në CSS?
CSS përdor përzgjedhës për të zgjedhur elementë HTML dhe për të aplikuar stile në to:
trupi {
ngjyra e sfondit: #f0f0f0;
}
h1 {
color: #333333;
font-family: Arial, sans-serif;
}
P {
madhësia e shkronjave: 16px;
lartësia e vijës: 1.5;
}
7. Cilat janë klasat dhe identifikuesit në HTML dhe CSS?
Klasat dhe identifikuesit përdoren për të aplikuar stile në elemente specifike:
- klasat: Mund të aplikohet në shumë elementë. Në HTML ato tregohen nga atributi
class, dhe në CSS - një pikë (.):
- Identifikuesit: unike për çdo element. Në HTML ato tregohen nga atributi
id, dhe në CSS - një hash (#):
Drejtimi
#header {
ngjyra e sfondit: # 333333;
ngjyra: #ffffff;
padding: 20px;
}
8. Si të krijoni paraqitje duke përdorur CSS?
Ju mund të përdorni vetitë për të krijuar paraqitje display, flex, grid dhe të tjerët:
- Flexbox: Një mënyrë fleksibël për të krijuar paraqitje.
css
.konteiner {
shfaq: përkul;
justify-content: space-mes;
}
- Grid: Një mjet i fuqishëm për krijimin e paraqitjeve komplekse.
css
.grid-container {
shfaqja: rrjetë;
grid-template-kolona: përsërit (3, 1fr);
boshllëk: 10 px;
}
9. Si të punohet me ngjyrat dhe shkronjat në CSS?
- ngjyrë: Mund të specifikohet duke përdorur emrat e ngjyrave, vlerat heksadecimal, RGB ose HSL.
css
- fonts: mund të vendoset duke përdorur pronën
font-family.css
.tekst {
font-family: 'Arial', sans-serif;
}
10. Cilat mjete dhe burime mund t'i ndihmojnë dizajnerët të mësojnë HTML dhe CSS?
- Kurse dhe mësime online: të tilla si Codecademy, freeCodeCamp, MDN Web Docs.
- Mjetet e Zhvillimit: veglat e integruara të shfletuesit (DevTools) për korrigjimin dhe testimin e kodit.
- Kornizat CSS: të tilla si Bootstrap, të cilat përshpejtojnë procesin e zhvillimit.
Mësimi i HTML dhe CSS është hapi i parë për krijimin e faqeve të internetit profesionale dhe funksionale. Këto gjuhë janë themeli i zhvillimit të ueb-it dhe ofrojnë mjete të fuqishme për projektuesit për të sjellë në jetë idetë e tyre në ueb.
