2 Scileanna i bhForbairt Gréasáin - COGG · 7 Scileanna i bhForbairt Gréasáin – Cuid A Tús eolais ar HTML An chaoi a n-oibríonn an gréasán Céard a tharlaíonn nuair a fhéachann

2 Scileanna i bhForbairt Gréasáin – Cuid A


Luaigh mar: SFGM, Ríomheolaíocht na hArdteistiméireachta, Ceardlann Scileanna i bhForbairt Gréasáin, Baile

Átha Cliath, 2019

Forbhreathnú ar an lámhleabhar

Is é is cuspóir leis an lámhleabhar seo an t-eolas, na scileanna agus an mhuinín a

theastaíonn ó mhúinteoirí Chéim a hAon de chuid Ríomheolaíocht na hArdteistiméireachta a

thabhairt dóibh ionas go mbeidh siad in ann suíomhanna gréasáin agus feidhmchláir

ghréasáin a dhearadh agus a fhorbairt go neamhspleách.

Cé go mbeidh an lámhleabhar ina ábhar tacaíochta do mhúinteoirí a fhreastalaíonn ar an

gCeardlann ar Fhorbairt Feidhmchláir Ghréasáin atá mar chuid dár gclár forbartha gairmiúla

leanúnaí dhá bhliain, táthar ag súil go mbainfear an luach is mó uaidh cúpla mí i ndiaidh na

ceardlanna a chur i gcrích. Taobh amuigh de na ceardlanna seo, féadfar an lámhleabhar a

úsáid mar thagairt bhunúsach don fhorbairt gréasáin, ach níos tábhachtaí ná sin, mar

acmhainn teagaisc a d’fhéadfaí a úsáid chun foirm thógachaíoch den oideolaíocht a chur

chun cinn i measc múinteoirí maidir le pleanáil agus le teagasc na forbartha gréasáin i

seomra ranga Ríomheolaíocht na hArdteistiméireachta.

Cúig rannán ar leith atá sa lámhleabhar seo, agus tá sé roinnte i dtrí cháipéis chruachóipe ar

leith. Baineann an cháipéis seo le Cuid A.

Cuid A

Rannán 1 – HTML

Rannán 2 – Stílbhileoga Cascáideacha

Rannán 3 – Dearadh UX

Cuid B

Rannán 4 – JavaScript

Cuid C

Rannán 5 – Bunachair Shonraí


Rannán 1

HTML


Clár Ábhar

Tús eolais ar HTML 07

● An chaoi a n-oibríonn an gréasán ● Céard is HTML ann? ● Mo chéad leathanach ● Brabhsálaithe gréasáin ● Clibeanna HTML ● Struchtúr leathanaigh HTML ● Leaganacha HTML ● Cleachtadh 1 – an chéad leathanach ● Cleachtadh machnaimh

Bunfhormáidiú téacs 18

● An chaoi a leacaítear spás bán ● Ceannteidil a chruthú leis na heilimintí <hn> ● Ceannteidil agus ailt a struchtúrú ● Ailt a chruthú leis an eilimint <p> ● Bristeacha líne a chruthú leis an eilimint <br> ● Téacs réamhfhormáidithe a chruthú leis an eilimint <pre> ● Cleachtadh 2 – Caifé ● Cleachtadh machnaimh

Obair le liostaí 24

● Liostaí le hurchair leis na heilimintí <ul> agus <li> ● Ordliostaí leis na heilimintí <ol> agus <li> ● An tréith thosaigh a úsáid chun an uimhir thosaigh in ordliostaí a athrú ● Marcóir a shainiú leis an tréith chineáil ● Liostaí sainmhínithe leis na tréithe <dl>, <dt> agus <dd> ● Liostaí neadaithe

An téacs a bheachtú 29

● An eilimint <strong> ● An eilimint <cite> ● An eilimint <q> ● An eilimint <blockquote> ● An eilimint <dfn> ● An eilimint <code> ● An eilimint <var> ● An eilimint <samp> ● Cleachtadh 3 – Oidis don Chaifé ● Cleachtadh machnaimh


Naisc agus Nascleanúint 34

● Nasc bunúsach le leathanach san fhillteán céanna a chruthú leis an eilimint <a>

● Nasc le suíomh gréasáin seachtrach a chruthú ● Dathanna na nasc ● Nasc chun ríomhphost a sheoladh ● Leabharmharc a chruthú ● Cleachtadh 4 – Naisc idir leathanaigh a chur isteach

Táblaí 38

● Tábla bunúsach ● Cleachtadh 5 – Tábla uaireanta oscailte

Íomhánna & Físeáin 40

● Íomhá a chur isteach leis an eilimint <img> ● Tréithe airde agus leithid ● Íomhánna a úsáid mar naisc ● Físeán ar YouTube a leabú ● Cleachtadh 6 – Caifé ● Cleachtadh machnaimh

Foirmeacha 45

● Rialtáin téacs ● Rialtáin roghanna ● Ticbhoscaí ● Cnaipí raidió ● Liostaí ● Cnaipí ● Rialtáin lipéadaithe ● Rialtáin ghrúpála ● Cleachtadh 7 – Foirmeacha

Cleachtaí ar leithligh 54

● Cleachtadh A – Marcáil na nArrachtaí ● Cleachtadh B – Marcáil ar litir fhoirmiúil

Gluais HTML 63

Acmhainní HTML 64


Tús eolais ar HTML

An chaoi a n-oibríonn an gréasán

Céard a tharlaíonn nuair a fhéachann tú ar leathanach gréasáin ar bhrabhsálaí gréasáin ar

ríomhaire nó ar fhón póca? Níl na mionsonraí seo riachtanach chun cód gréasáin a scríobh

sa ghearrthéarma, ach ní fada go mbeidh tairbhe á baint agat as tuiscint ar a bhfuil ag tarlú

sa chúlra.

Cliaint agus freastalaithe

Tugtar cliaint agus freastalaithe ar ríomhaire atá nasctha leis an ngréasán.

● Is é is cliant ann na gléasanna a bhíonn in úsáid ag an ngnáthúsáideoir gréasáin

chun nascadh leis an idirlíon (mar shampla ríomhaire nasctha le Wi-Fi nó fón póca

nasctha leis an líonra móibíleach) agus bogearraí ar na gléasanna sin chun an

gréasán a rochtain (brabhsálaí gréasáin amhail Firefox nó Chrome go hiondúil).

● Is freastalaithe iad ríomhairí ar a stóráiltear leathanaigh ghréasáin, suíomhanna nó

feidhmchláir. Nuair is mian le gléas cliaint leathanach gréasáin a rochtain,

íoslódáiltear cóip den leathanach gréasáin sin ar ghléas an chliaint agus taispeántar

an chóip sin i mbrabhsálaí gréasáin an úsáideora.

Comhpháirteanna eile an bhosca uirlisí


Níl an scéal iomlán sa chur síos thuasluaite ar chliant agus freastalaí. Is iomaí comhpháirt

eile atá ann freisin, agus déanfaimid cur síos orthu thíos.

Faoi láthair, samhlaímis gur bóthar atá sa ghréasán. Tá an cliant, mar a bheadh do theach

ann, suite ag bun an bhóthair. Tá an freastalaí suite ag ceann an bhóthair, agus tá sé cosúil

le siopa ar mian leat rud a cheannach ann.

Anuas ar an gcliant agus ar an bhfreastalaí, is gá dúinn labhairt fúthu seo a leanas freisin:

● An nasc idirlín: cuireann sé sin ar do chumas sonraí a sheoladh agus a ghlacadh ar

an ngréasán. An tsráid idir do theach agus an siopa atá ann, go bunúsach.

● TCP/IP: Is prótacail chumarsáide iad Prótacal Rialaithe Tarchurtha (TCP) agus

Prótacal Idirlín (IP) lena sainítear an chaoi ar ceart do shonraí taisteal thar an

ngréasán. Tá siad cosúil leis na meicníochtaí iompair a chuireann ar do chumas ordú

a dhéanamh, dul chuig an siopa, agus do chuid siopadóireachta a dhéanamh.

● DNS: Tá Freastalaithe Ainmneacha Fearainn (DNS) cosúil le leabhar seoltaí le

haghaidh suíomhanna gréasáin. Nuair a chuireann tú seoladh gréasáin isteach sa

bhrabhsálaí, féachann an brabhsálaí ar an DNS chun teacht ar fhíorsheoladh an

tsuímh gréasáin sular féidir leis an mbrabhsálaí an suíomh gréasáin sin a

thaispeáint. Ní mór don bhrabhsálaí fáil amach cén freastalaí ar a bhfuil an suíomh

gréasáin chun gur féidir leis teachtaireachtaí HTTP a sheoladh chuig an áit cheart

(féach thíos). Tá sé sin cosúil le seoladh an tsiopa a chuardach le gur féidir leat dul

ann.

● HTTP: Prótacal feidhmchláir is ea Prótacal Aistrithe Hipirtéacs (HTTP) lena sainítear

teanga chun gur féidir le cliaint agus le freastalaithe labhairt le chéile. Is í sin an

teanga a úsáideann tú chun do chuid earraí a ordú.

● Comhaid chomhpháirte: Bíonn go leor comhaid éagsúla i suíomh gréasáin, agus is

iad sin comhpháirteanna éagsúla na n-earraí a cheannaíonn tú ón siopa. Dhá chineál

comhaid atá ann go príomha:

https://developer.mozilla.org/en-US/docs/Glossary/Protocol


o Comhaid chóid: Le HTML, CSS agus JavaScript a thógtar suíomhanna

gréasáin go príomha.

o Sócmhainní: Is ainm coiteann é seo ar na comhpháirteanna eile go léir i

suíomh gréasáin, amhail íomhánna, ceol, físeáin, doiciméid Word, agus

PDFanna.

Céard a tharlaíonn, mar sin?

Nuair a chuireann tú seoladh gréasáin isteach sa bhrabhsálaí (tá sé cosúil le siúl chuig an

siopa inár míniú thuas):

1. Téann an brabhsálaí chuig an bhfreastalaí DNS, agus aimsíonn sé fíorsheoladh an

fhreastalaí ar an bhfuil an suíomh gréasáin lonnaithe.

2. Seolann an brabhsálaí teachtaireacht iarratais HTTP chuig an bhfreastalaí, agus

iarrann sé air cóip den suíomh gréasáin a sheoladh chuig an gcliant. Is le TCP/IP a

sheoltar an teachtaireacht sin, agus na sonraí go léir eile a sheoltar idir an cliant

agus an freastalaí, thar do nasc idirlín.

3. Má cheadaíonn an freastalaí iarratas an chliaint, seolann an freastalaí teachtaireacht

“200 OK” chuig an gcliant, rud a chiallaíonn “Cinnte is féidir leat féachaint ar an

suíomh gréasáin sin! Seo duit é”, agus tosaíonn sé ar chomhaid an tsuímh gréasáin

a sheoladh chuig an mbrabhsálaí i smutáin bheaga ar a dtugtar paicéid sonraí.

4. Cuireann an brabhsálaí na smutáin le chéile chun suíomh gréasáin iomlán a chruthú

agus taispeánann sé duit é (tagann na hearraí chomh fada le do dhoras!).

Míniú ar DNS

Ní hionann fíorsheoltaí gréasáin i ndáiríre agus na seoltaí suntasacha a chuireann tú isteach

sa bharra seoltaí chun teacht ar na suíomhanna gréasáin is fearr leat. Is uimhreacha

speisialta iad a bhfuil cuma mar seo a leanas orthu: 63.245.215.20.


Seoladh IP a thugtar air sin, agus tagraíonn sé d’áit ar leith ar an ngréasán. Ach níl sé éasca

cuimhneamh ar sheoladh den saghas sin. Sin an fáth ar thángthas suas le Freastalaithe

Ainmneacha Fearainn. Is freastalaithe speisialta iad sin, agus déanann siad seoladh

gréasáin a chuireann tú isteach sa bhrabhsálaí (mar shampla “mozilla.org”) a mheaitseáil le

fíorsheoladh (IP) an tsuímh gréasáin. Is féidir dul go díreach chuig suíomhanna gréasáin ach

a seoladh IP a chur isteach. Is féidir teacht ar sheoladh IP suímh gréasáin ach a fhearann a

chur isteach in uirlis amhail Seiceálaí IP.

Paicéid

Bhaineamar leas as an téarma “paicéid” thuas chun cur síos a dhéanamh ar an bhformáid

ina seoltar na sonraí ón bhfreastalaí chuig an gcliant. Go bunúsach, nuair a sheoltar sonraí

thar an ngréasán, seoltar iad mar na mílte smután beag chun gur féidir le go leor úsáideoirí

éagsúla gréasáin an suíomh gréasáin céanna a íoslódáil ag an am céanna. Dá seolfaí

suíomhanna gréasáin in aon smután mór amháin, ní bheadh ach aon úsáideoir amháin in

ann aon smután amháin a íoslódáil ag an am, rud a d’fhágfadh go mbeadh an gréasán thar

a bheith neamhéifeachtúil agus nach mbainfí mórán taitnimh as é a úsáid.

Céard is HTML ann?

Is é HTML an teanga mharcála chaighdeánach a úsáidtear chun leathanaigh ghréasáin a

chruthú. Ní teanga ríomhchlárúcháin atá ann; is teanga mharcála é a úsáidtear chun eolas a

thabhairt don bhrabhsálaí ar an gcaoi leis na leathanaigh ar a bhféachann tú a leagan

amach. D’fhéadfadh sé a bheith casta nó simplí, faoi mar a thograíonn an forbróir gréasáin.

https://developer.mozilla.org/en-US/docs/Glossary/IP_Address


⮚ Seasann HTML do Theanga Mharcála Hipirtéacs, nó Hyper Text Markup Language

⮚ Cuireann HTML síos ar struchtúr leathanach gréasáin trí úsáid a bhaint as marcáil

⮚ Is iad eilimintí HTML clocha tógála leathanach HTML

⮚ Seasann clibeanna d’eilimintí HTML

⮚ Le clibeanna HTML, déantar píosaí ábhair a lipéadú mar cheannteideal, alt, tábla,

agus mar sin de

⮚ Ní léirítear clibeanna HTML i mbrabhsálaithe, ach úsáidtear iad chun inneachar an

leathanaigh a thaispeáint.

An chéad leathanach gréasáin


⮚ Sainítear leis an bhfógra <!DOCTYPE html> gur HTML5 atá sa doiciméad seo.

⮚ Tá an eilimint <html> ar an bhfréamheilimint de leathanach HTML.

⮚ Tá meiteafhaisnéis ar an doiciméad le fáil san eilimint <head>.

⮚ Sainítear teideal don doiciméad leis an eilimint <title>.

⮚ Tá an t-inneachar atá le feiceáil ar an leathanach le fáil san eilimint <body>.

⮚ Sainítear ceannteideal mór leis an eilimint <h1>.

⮚ Sainítear alt leis an eilimint <p>.

Brabhsálaithe gréasáin


Is é cuspóir brabhsálaí gréasáin (Chrome, IE, Firefox, Safari) doiciméid HTML a léamh agus

a thaispeáint. Ní léirítear clibeanna HTML sa bhrabhsálaí, ach úsáidtear iad le cinneadh

conas an doiciméad a thaispeáint:

Clibeanna HTML

Ainmneacha eiliminte idir lúibíní uilleacha atá i gclibeanna HTML:

<tagname> bíonn an t-inneachar le feiceáil anseo…</tagname>

⮚ I bpéirí amhail <p> agus </p> a úsáidtear clibeanna HTML go hiondúil

⮚ An chlib thosaigh atá sa chéad chlib den phéire, agus an chlib dheiridh atá sa dara

clib

⮚ Scríobhtar an chlib dheiridh faoi mar a scríobhtar an chlib thosaigh, ach amháin go

gcuirtear tulslais roimh ainm na clibe


Is iad seo príomh-chomhpháirteanna na heiliminte:

1. An chlib thosaigh: Cuimsítear ann ainm na heiliminte (p, sa chás seo),

idir lúibíní uilleacha oscailte agus dúnta. Sonraítear leis cá gcuirtear tús nó

feidhm leis an eilimint.

2. An chlib dheiridh: Tá sé ar aon dul leis an gclib thosaigh, ach amháin go

gcuirtear tulslais roimh ainm na heiliminte. Sonraítear leis cá gcuirtear deireadh

leis an eilimint. Earráid choitianta i measc foghlaimeoirí is ea dearmad a

dhéanamh clib dheiridh a chur isteach, agus tagann torthaí aisteacha chun cinn

dá bharr sin.

3. An t-inneachar: Inneachar na heiliminte.

4. An eilimint: Cuimsítear leis an eilimint an chlib thosaigh agus an chlib dheiridh

agus an t-inneachar.


Struchtúr leathanaigh HTML

Úsáidtear ceannteidil agus ailt i bhformhór na dtéacsanna struchtúraithe, is cuma má bhíonn

scéal, nuachtán, téacsleabhar ollscoile nó iris á léamh agat.

● Bíonn sé de nós ag úsáideoirí atá ag féachaint ar leathanach gréasáin spléachadh a

thabhairt ar an leathanach chun teacht ar inneachar ábhartha, agus is minic nach

léann siad ach ceannteidil i dtosach (ní chaithimid ach tamall an-ghearr ar

leathanach gréasáin go hiondúil). Mura bhfeiceann siad rud úsáideach go tapa, gach

seans go n-éireoidís mífhoighneach agus go n-imeoidís ar aghaidh chuig leathanach

eile.

● I gcás na n-inneall cuardaigh a dhéanann an leathanach a innéacsú, féachann siad

ar inneachar na gceannteideal mar eochairfhocail thábhachtacha a théann i gcion ar

rangú cuardaigh an leathanaigh. Gan cheannteidil, ní bheidh torthaí maithe ag an

leathanach i dtéarmaí SEO (optamú inneall cuardaigh).

http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

https://developer.mozilla.org/en-US/docs/Glossary/SEO


● Is minic nach léann daoine a bhfuil tromlagú radhairc orthu leathanaigh ghréasáin:

éisteann siad leo ina ionad sin. Úsáideann siad bogearra ar a dtugtar léitheoir

scáileáin chun é sin a dhéanamh. Leis an mbogearra sin, is féidir inneachar téacs ar

leith a rochtain go tapa. I measc na dteicnící éagsúla a úsáidtear, tugann siad

achoimre ar an doiciméad trí na ceannteidil a léamh amach, rud a chuireann ar

chumas na n-úsáideoirí teacht go tapa ar an bhfaisnéis atá uathu. Mura bhfuil

ceannteidil ar fáil, bheadh orthu éisteacht leis an doiciméad go léir á léamh amach go

hard.

● Chun inneachar a dhearadh le CSS, nó chun rudaí spéisiúla a dhéanamh leis le

JavaScript, is gá an t-inneachar ábhartha a chur idir eilimintí le gur féidir le

CSS/JavaScript dul i gcion air go héifeachtach.

Léirshamhlú ar struchtúr leathanaigh HTML

Inneachar na heiliminte <head> atá sa cheannteideal HTML. Murab ionann is inneachar na

heiliminte <body> (a bhíonn le feiceáil ar an leathanach nuair a lódáiltear i mbrabhsálaí é), ní

léirítear inneachar an cheannteidil ar an leathanach. Ina ionad sin, meiteashonraí faoin

doiciméad a bhíonn sa cheannteideal.

Sonraí a chuireann síos ar shonraí eile is ea iad meiteashonraí, agus tá bealach “oifigiúil” ag

HTML chun meiteashonraí a chur le doiciméad – an eilimint <meta>. Is iomaí eilimint éagsúil

<meta> atá ann ar féidir iad a chur le ceannteideal an leathanaigh, ach ní dhéanfaimid

iarracht iad go léir a mhíniú anseo.

http://en.wikipedia.org/wiki/Screen_reader

http://en.wikipedia.org/wiki/Screen_reader

https://developer.mozilla.org/en-US/docs/Glossary/CSS

https://developer.mozilla.org/en-US/docs/Glossary/JavaScript


Leaganacha HTML

Is iomaí leagan HTML a bhí ann ó thús ré an ghréasáin:

HTML5

Tá HTML5 ar an gcaighdeán nua don ghréasán. Tagann sé i ndiaidh HTML4 (a tháinig

amach in 1997) agus XHTML. Tháinig forbairt mhór ar an ngréasán ó tugadh isteach

HTML4, agus ba ghá beart a ghlacadh chun aghaidh a thabhairt ar na nuatheicneolaíochtaí

go léir agus ar na cineálacha ilmheán is úire. Tháinig HTML5 chun cinn mar thoradh ar

chomhoibriú a thosaigh in 2006 idir Feadhnacht an Ghréasáin Dhomhanda (W3C) agus an

Mheitheal um Theicneolaíocht maidir le Feidhmeanna Hipirtéacs Gréasáin (WHATWG).


Dhá bhunchuspóir atá le HTML5: (1) feabhas a chur ar an teanga; agus (2) tacú leis na

cineálacha ilmheán is úire. Rinne W3C agus WHATWG bunrialacha áirithe a leagan síos

chun é sin a bhaint amach. Ina measc, bhí laghdú ar an ngá le breiseáin sheachtracha

(amhail breiseáin Flash), láimhseáil níos fearr ar earráidí, agus eilimintí marcála (clibeanna)

sa bhreis in ionad scripteanna. Ba cheart do HTML5 a bheith neamhspleách ar an ngléas (is

é sin, go mbeadh sé intuigthe ag ríomhairí agus ag an iliomad gléasanna atá ar an bhfód sa

lá atá inniu ann), agus ba cheart dó a bheith soléite freisin.

Cleachtadh 1

Cruthaigh an leathanach gréasáin simplí seo a leanas. Clóscríobh an téacs.

Machnamh

Déan machnamh ar ar fhoghlaim tú faoi HTML go dtí seo.

Scríobh cúig rud faoi HTML sa spás thíos.

1.

2.


3.

4.

5.


Bunfhormáidiú téacs

An chaoi a leacaítear spás bán

Úsáidtear ceannteidil agus ailt i bhformhór na dtéacsanna struchtúraithe, is cuma má bhíonn

scéal, nuachtán, téacsleabhar ollscoile nó iris á léamh agat.

Taispeántar san alt thíos an chaoi a láimhseáiltear spásanna iomadúla idir focail mar aon

spás amháin. Leacú spáis bháin a thugtar air sin, agus ní fheicfear na spásanna móra idir

cuid de na focail nuair a thaispeánfar an leathanach sa bhrabhsálaí. Léirítear ann freisin an

chaoi a láimhseálfaidh an brabhsálaí aisfhillteacha carráiste (línte nua) iomadúla mar aon

spás amháin.


Ceannteidil a chruthú leis na heilimintí <hn>

Sé leibhéal de cheannteidil rannáin a léirítear leis na heilimintí HTML <h1>–<h6>. Tá <h1>

ar an leibhéal rannáin is airde, agus tá <h6> ar an leibhéal rannáin is ísle.


Ceannteidil agus ailt a struchtúrú

Beidh téacs de shaghas éigin i mbeagnach gach aon doiciméad a chruthóidh tú.

Spás bán agus sreabhadh

Roimh thosú ar an téacs a mharcáil, is fearr tuiscint a fháil ar a ndéanann HTML i gcás

spásanna bána agus ar an gcaoi a mbíonn abairtí fada agus ailt fhada téacs á láimhseáil i

mbrabhsálaithe.

Ceannteidil a chruthú

Bíonn ceannteidil de shaghas éigin le fáil i bhformhór na ndoiciméad, beag beann ar an

gcineál doiciméid atá á chruthú agat.


Ailt a chruthú leis an eilimint <p>

Alt a léirítear leis an eilimint HTML <p>. Is iondúil a léirítear ailt sna meáin amhairc mar

bhloic de théacs atá scartha ó bhloic eile in aice leo le línte bána agus/nó eangú na chéad

líne, ach cuimsítear le hailt HTML aon ghrúpáil struchtúrach d’ábhar gaolmhar, amhail

íomhánna nó réimsí foirme.

Bristeacha líne a chruthú leis an eilimint <br>

Is féidir an eilimint briste líne a úsáid nuair is mian leat líne nua a thosú. Ar an gcaoi sin,

beidh an chéad

fhocal eile le feiceáil ar líne nua. Gan an eilimint briste líne sin, ní thosaítear línte nua ach

nuair a théann an abairt chomh fada le deireadh an scáileáin, ba cheart go mbeadh an

abairt seo fada go leor le timfhilleadh ar an scáileán agat. Bain triail as méid na fuinneoige

brabhsálaí a athrú agus féach ar an athrú a thagann ar an timfhilleadh líne.


Téacs réamhfhormáidithe a chruthú leis an eilimint <pre>

Léirítear leis an eilimint HTML <pre> téacs réamhfhormáidithe atá le taispeáint go díreach

mar atá sé scríofa sa chomhad HTML. Is iondúil a dhéantar an téacs a léiriú le clófhoireann

neamh-chomhréireach (“monaspás”). Léirítear an spás bán laistigh den eilimint seo faoi mar

a scríobhtar é. Tá an téacs seo a leanas scríofa laistigh d’eilimint <pre>.

https://developer.mozilla.org/en-US/docs/XUL/Style/monospace


Cleachtadh 2 – Caifé Samplach

Cruthaigh an leathanach gréasáin simplí seo a leanas do chaifé. Úsáid an comhad téacs atá

curtha ar fáil ionas nach gá an téacs go léir a chlóscríobh.

Machnamh

Déan machnamh ar ar fhoghlaim tú faoi fhormáidiú téacs in HTML go dtí seo.

Scríobh síos sa spás thíos trí chlib a úsáidtear chun téacs a fhormáidiú.

1.

2.

3.


Obair le liostaí

Féachaimis ar liostaí anois. Bíonn liostaí le fáil i ngach aon áit – idir liostaí siopadóireachta

agus an liosta treoracha a leanann tú i ngan fhios duit féin chun dul abhaile gach lá. Bíonn

liostaí le fáil ar fud an ghréasáin freisin, agus ní mór dúinn díriú isteach ar thrí chineál

éagsúla.

Liostaí le hurchair leis na heilimintí <ul> agus <li>

Leis an gclib <ul> a thosaíonn liosta le hurchair. Leis an gclib <li> a thosaíonn gach mír ar

leith den liosta.

Urchair (ciorcail bheaga dhubha) a bheidh roimh mhíreanna an liosta de réir an

réamhshocraithe.


Ordliostaí leis na heilimintí <ol> agus <li>

Ordliosta de mhíreanna a léirítear leis an eilimint HTML <ol>, agus bíonn an liosta le feiceáil

i bhfoirm liosta uimhrithe go hiondúil.


An tréith thosaigh a úsáid chun an uimhir thosaigh in

ordliostaí a athrú

Sonraíonn an tréith thosaigh an luach tosaigh den chéad mhír ar ordliosta.


Liostaí sainmhínithe leis na tréithe <dl>, <dt> agus <dd>

Úsáidtear an chlib <dd> chun cur síos a dhéanamh ar théarma/ainm i liosta tuairiscí.

Úsáidtear an chlib <dd> i gcomhar le <dl> (chun liosta tuairiscí a shainiú) agus le <dt> (chun

téarmaí/ainmneacha a shainiú). Is féidir ailt, bristeacha líne, íomhánna, naisc, liostaí, etc., a

chur laistigh de chlib <dd>.

https://www.w3schools.com/TagS/tag_dl.asp

https://www.w3schools.com/TagS/tag_dt.asp


Liostaí neadaithe

Liosta laistigh de liosta eile is ea liosta neadaithe. Más rud é gur chruthaigh tú liosta le

hurchair i ndoiciméad próiseála focal roimhe seo, gach seans gur bhain tú úsáid as eangaí

agus pointí urchair éagsúla chun míreanna a léiriú mar fhophointe míre eile sa liosta. Is é sin

an éifeacht atá uainn nuair a chruthaímid liostaí neadaithe.


An téacs a bheachtú

An eilimint <strong>

Léirítear leis an Eilimint Ríthábhachtach HTML <strong> go bhfuil tábhacht, tromchúis nó

práinn ar leith ag baint lena bhfuil ann.

San abairt seo a leanas, baineann an eilimint <strong> leis na focail can cause blindness.

An eilimint <cite>

Sainítear leis an gclib <cite> teideal saothair (mar shampla leabhar, amhrán, scannán, clár

teilifíse, pictiúr, dealbh, etc.). Úsáidtear é chun téacs ó fhoinse eile a lua.


An eilimint <q>

Mura mbeidh an sliocht le feiceáil ach laistigh d’aon abairt amháin, ba cheart an eilimint <q>

a úsáid. Úsáidtear an eilimint <q> san abairt seo a leanas chun sliocht a lua:

An eilimint <blockquote>

Sainítear leis an eilimint <blockquote> “sliocht [laistigh de dhoiciméad] atá luaite ó fhoinse

eile”. Úsáidtear an eilimint <blockquote> le sliocht fada téacs ó fhoinse eile a thaispeáint.

Má úsáidtear na stíleanna HTML réamhshocraithe ar fhormhór na mbrabhsálaithe gréasáin,

déanfar na himill ar dheis agus ar chlé a eangú, ar an scáileán agus i bhfoirm chló, ach is

féidir é sin a shárú ach úsáid a bhaint as Stílbhileoga Cascáideacha (CSS).


An eilimint <dfn>

Úsáidtear an eilimint sainmhínithe HTML (<dfn>) chun an téarma atá á shainmhíniú laistigh

de chomhthéacs frása nó abairte sainmhínithe a léiriú. Úsáidtear eilimint <dfn> san abairt

seo a leanas don téarma tábhachtach ‘HTML’.

An eilimint <code>

An eilimint <code> chun cód a chur le leathanaigh ghréasáin

An eilimint <var>

Léirítear leis an eilimint athróige HTML (<var>) ainm athróige i slonn matamaiticiúil nó i

gcomhthéacs ríomhchlárúcháin. Léirítear é go hiondúil le leagan cló iodálaigh den

chlófhoireann reatha.


An eilimint <samp>

Úsáidtear an eilimint <samp> chun aschur ó phróiseas a léiriú, amhail teachtaireacht

earráide ó script ríomhaireachta. Don doiciméadúchán teicniúil a dearadh é ó thús, agus

léirítear inneachar na heiliminte i gclófhoireann monaspáis.


Cleachtadh 3 – Caifé Samplach: Oidis

Cruthaigh an leathanach gréasáin simplí seo a leanas don Chaifé Samplach. Cuirfear an

téacs ar fáil ionas nach gá é a chlóscríobh.

Machnamh

Déan machnamh ar ar fhoghlaim tú faoi bheachtú téacs in HTML go dtí seo.

Scríobh síos sa spás thíos trí chlib a úsáidtear chun téacs a bheachtú.


Naisc agus Nascleanúint

Naisc agus nascleanúint

Nasc bunúsach le leathanach san fhillteán céanna a

chruthú leis an eilimint <a>

⮚ Hipearnaisc is ea iad naisc HTML.

⮚ Is féidir cliceáil ar nasc agus dul ar aghaidh chuig doiciméad eile.

⮚ Athróidh saighead na luchóige ina lámh bheag nuair a théann sé thar nasc.

In HTML, sainítear naisc leis an gclib <a>:

Nasc le suíomh gréasáin seachtrach a chruthú

Sainítear leis an tréith href seoladh sprice (https://www.rte.ie) an naisc. Is é téacs an naisc

an chuid a bhíonn le feiceáil (‘RTÉ Website’).


Dathanna na nasc

Is mar seo a leanas a léireofar nasc de réir an réamhshocraithe (i ngach brabhsálaí):

● Bíonn dath gorm ar nasc nár cliceáladh air, agus bíonn líne faoi

● Bíonn dath corcra ar nasc ar cliceáladh air, agus bíonn líne faoi

● Bíonn dath dearg ar nasc gníomhach, agus bíonn líne faoi

Is féidir na dathanna réamhshocraithe a athrú le CSS.

Nasc chun ríomhphost a sheoladh

Is féidir ríomhphost a sheoladh ach an nasc mailto a úsáid

<A HREF="mailto:[email protected]"> Cliceáil anseo le ríomhphost a sheoladh

chugam </A>

San fhormáid chéanna le hipearnasc a scríobhtar an nasc mailto ach amháin go n-úsáidtear

mailto: in ionad http:// agus go n-úsáidtear seoladh ríomhphoist in ionad seoladh an

leathanaigh nó an URL. Ní mór an cód </A> a chur ag deireadh na líne nó ní oibreoidh an

nasc mailto. NÍL spás ar bith idir mailto: agus an seoladh ríomhphoist.


Leabharmharc a chruthú

⮚ Úsáidtear leabharmharcanna HTML chun gur féidir le léitheoirí dul ar aghaidh chuig

codanna ar leith de leathanach gréasáin.

⮚ Bíonn leabharmharcanna úsáideach má bhíonn an leathanach gréasáin an-fhada.

⮚ Is gá an leabharmharc a chruthú i dtosach agus ansin nasc a chur leis.

⮚ Nuair a chliceáiltear ar an nasc, tabharfar ar aghaidh thú chuig an áit a bhfuil an

leabharmharc.

Ar dtús, cruthaigh leabharmharc leis an tréith id:

<h2 id=”C4”>Caibidil 4</h2>

Ansin cuir nasc leis an leabharmharc (“Téigh ar aghaidh chuig Caibidil 4”), ó laistigh den

leathanach céanna:

<a href=”#C4”>Téigh ar aghaidh chuig Caibidil 4</a>


Sampla 4 – Caifé – Naisc idir leathanaigh a chur isteach

Oscail an leathanach gréasáin seo a leanas do chaifé agus déan eagarthóireacht nó

athruithe air. Bain úsáid as an gcomhad atá curtha ar fáil.

Úsáid an spás thíos don obair gharbh.

Táblaí


Táblaí

Sainítear tábla HTML leis an gclib <table>. Sainítear gach ró sa tábla leis an gclib <tr>.

Sainítear ceanntásc tábla leis an gclib <th>. Bíonn cló trom ar cheannteidil tábla agus bíonn

siad láraithe de réir an réamhshocraithe. Sainítear sonraí/cill tábla leis an gclib <td>.

⮚ Úsáid an eilimint HTML <table> chun tábla a shainiú

⮚ Úsáid an eilimint HTML <tr> chun ró tábla a shainiú

⮚ Úsáid an eilimint HTML <td> chun sonraí tábla a shainiú

⮚ Úsáid an eilimint HTML <th> chun ceannteideal tábla a shainiú

⮚ Úsáid an eilimint HTML <caption> chun fotheideal tábla a shainiú


Sampla 5 – Tábla a chur isteach

Cruthaigh an leathanach gréasáin seo a leanas don Chaifé. Cuirfear comhad téacs ar fáil.

Úsáid an spás thíos don obair gharbh.

⮚

⮚

⮚

⮚

⮚

⮚

⮚

⮚

⮚ Íomhánna ⮚

Íomhánna & Físeáin


Íomhánna & Físeáin

Íomhá a chur isteach leis an eilimint <img>

⮚ In HTML, sainítear íomhánna leis an gclib <img>.

⮚ Clib fholamh is ea <img>, níl aici ach tréithe amháin, agus níl ann do chlib dheiridh.

⮚ Sainítear URL (seoladh gréasáin) na híomhá leis an tréith src.

Tréithe airde agus leithid

⮚ Is féidir leas a bhaint as tréithe airde agus leithid.

⮚ I bpicteilíní a thugtar na tréithe airde agus leithid.



Íomhánna a úsáid mar naisc

Cuir an chlib <img> laistigh den chlib <a> chun íomhá a úsáid mar nasc.

Íomhánna i bhfillteán eile

Mura sonraítear a mhalairt, bíonn an brabhsálaí ag súil leis an íomhá a aimsiú san fhillteán

céanna leis an leathanach gréasáin.

Mar sin féin, is nós coitianta é íomhánna a stóráil i bhfofhillteán. Sa chás sin, is gá ainm an

fhillteáin sin a thabhairt mar chuid den tréith src:

<img src="/images/html5.gif" alt=”Íocón HTML5" style="width:128px;height:128px;"

Físeán ar YouTube a leabú

Lean na céimeanna seo a leanas chun an físeán a sheinm ar leathanach gréasáin:

⮚ Uaslódáil an físeán ar YouTube

⮚ Breac síos sonraí an fhíseáin

⮚ Sainigh eilimint <iframe> sa leathanach gréasáin

⮚ Déan tagairt do URL an fhíseáin sa tréith src

⮚ Úsáid na tréithe airde agus leithid chun toise an tseinnteora a shonrú

⮚ Cuir paraiméadair eile (más ann dóibh) leis an URL (féach thíos)


Machnamh

Déan machnamh ar ar fhoghlaim tú faoi HTML a úsáid go dtí seo.

Breac síos do chuid smaointe thíos.


Cleachtadh 6 – Caifé Samplach

Cruthaigh an leathanach gréasáin simplí seo a leanas do chaifé. Cuirfear gach comhad ar

fáil.

Obair gharbh

Úsáid an spás thíos don obair gharbh:


Foirmeacha

(Ceacht ó http://www.htmlquick.com)

Úsáidtear foirmeacha HTML chun faisnéis a bhailiú, agus seoltar an fhaisnéis sin ar ais

chuig an bhfreastalaí ina dhiaidh sin. Le go n-oibreoidh sé i gceart, tá sé tábhachtach go

ndéantar an fhoirm in HTML a chur le chéile le cód éigin ar thaobh an fhreastalaí, ar a

dtugtar “gníomhaire próiseála” go hiondúil, a bheidh freagrach as an bhfaisnéis a ghlacadh

agus a phróiseáil de réir mar a thograíonn an t-údar. B’fhéidir go gcuimseofaí leis an

bpróiseáil sin, mar shampla, an fhaisnéis a fhaightear a shábháil nó í a sheoladh ar

ríomhphost.

Coimeádán le haghaidh rialtán atá i gceist le foirm go bunúsach. Meastar go mbailíonn gach

rialtán i bhfoirm an fhaisnéis a chuireann úsáideoirí isteach, ar bhealaí lena gcuimsítear línte

téacs, uaslódálacha comhad, roghanna, dátaí, pasfhocail, agus bealaí eile nach iad. Nuair a

bheidh sonraí curtha isteach san fhoirm ag úsáideoirí, is féidir leo an fhoirm a sheoladh ar

ais chuig an bhfreastalaí chun go mbeidh an gníomhaire próiseála in ann an fhaisnéis

bhailithe a riar.

Léirítear bunstruchtúr foirme sa chód seo a leanas, agus is léir na clibeanna oscailte agus

deiridh agus rialtáin eatarthu.

<form>

[rialtáin]

</form>

Níl aon léiriú ann, áfach, ar an gcaoi ná ar an áit a ndéanfar próiseáil ar an bhfoirm. Is féidir

faisnéis den sórt sin a chur ar fáil leis na tréithe amhail iad seo a leanas: action, rud a

léiríonn suíomh an ghníomhaire próiseála; method, lena gcinntear an modh a úsáidtear chun

sonraí ó fhoirm a phacáil sula seoltar na sonraí chuig an ngníomhaire próiseála; agus target,

rud a léiríonn an áit ina dtaispeánfar na torthaí próiseála. Ní phléifimid ach an tréith action

anseo, agus fágfaimid an anailís ar an dá thréith eile sa tagairt do form.

http://www.htmlquick.com/

http://www.htmlquick.com/reference/tags/form.html




Fógraíodh an form seo a leanas le URI gníomhaire próiseála sa tréith action. Is féidir an

gníomhaire a fheiceáil ag dul i mbun feidhme i bhfuinneog nua nuair a chuireann tú an

fhoirm isteach.

<form action="../form-result.php" target="_blank">

<input type=“submit" value=“Seol an fhoirm">

</form>

Rialtáin téacs

Le rialtáin ionchurtha téacs, is féidir sonraí téacs amhail ainmneacha, treoracha, frásaí,

teachtaireachtaí, pasfhocail, etc., a bhailiú. Féachfaimid sna rannáin seo a leanas ar an dá

rialtán téacs is bunúsaí agus is mó a úsáidtear.

Ionchur téacs aon líne

Ní féidir ach aon líne téacs amháin a chur isteach le hionchur téacs aon líne, agus tá sé ar

cheann den líon mór rialtán a fhógraítear leis an eilimint input. Sa chás sin, ba cheart don

eilimint input an luach “text” a chur i láthair sa tréith type.

Bíonn an rialtán le feiceáil gan ach é sin a dhéanamh, ach bíonn gá le name má tá sé i

gceist na sonraí a chuireann an t-úsáideoir isteach sa rialtán seo a bhailiú. Sainaithneofar le

luach na tréithe name, ar thaobh an fhreastalaí, ionchur an úsáideora sa rialtán. Tá cur i

bhfeidhm bunúsach d’ionchur téacs le feiceáil sa sampla seo a leanas. Ina theannta sin, tá

an rialtán agus a lipéad á gcur in alt againn, mar is féidir féachaint orthu sin mar aon aonad

amháin lena mbaineann smaoineamh a scarann an t-aonad sin ón gcuid eile.


<p>

Cuir isteach d’ainm iomlán: <input type="text" name="fullname">

<input type="submit" value="Seol sonraí">

</p>

</form>

Tar éis sonraí na foirme a chur isteach, tá sé le feiceáil go soiléir san fhaisnéis a léiríonn an

gníomhaire próiseála an chaoi a nglactar na sonraí ar thaobh an fhreastalaí. Tá sé le feiceáil

ann chomh maith go gceanglaítear an t-ainm a fhógraítear don rialtán leis na sonraí atá

curtha isteach ag an úsáideoir.


http://www.htmlquick.com/reference/tags/input.html


http://www.htmlquick.com/reference/tags/input-text.html

http://www.htmlquick.com/reference/tags/p.html


Ionchur téacs il-líne

Tá an cineál seo rialtáin an-chosúil leis an ionchur téacs aon líne, ach amháin gur féidir

roinnt línte téacs a chur isteach. Mar bhosca a léirítear rialtán téacs il-líne go hiondúil, agus

bíonn an bosca ard go leor chun níos mó ná aon líne téacs amháin a léiriú ag an am. Bíonn

scrollbharra ann go minic le cur ar chumas úsáideoirí féachaint ar an téacs go léir atá curtha

isteach acu, go háirithe má bhíonn sé fada go leor chun dul thar theorainneacha an bhosca.

Cuirtear isteach ionchur téacs il-líne leis an eilimint text area. Ar an gcaoi chéanna leis an

tréith thuas, tugtar ainm ar an rialtán leis an tréith name, rud a chabhróidh leis na gníomhairí

próiseála na sonraí atá curtha isteach ag an úsáideoir a shainaithint.

Cuirimid feabhas sa sampla seo a leanas ar an form thuas chun gur féidir an dá chineál

teaghráin téacs (aon líne agus il-líne) a chur isteach. San fhreagra a thugtar, téann gach

rialtán in oiriúint don chineál sonraí atá le bailiú aige.


<p>Cuir isteach d’ainm iomlán: <input type="text" name="fullname"></p>

<p>

Fág teachtaireacht:<br>

<textarea name="message"></textarea>

</p>

<input type="submit" value=“Seol sonraí">

</form>

Rialtáin roghanna

Cuireann na rialtáin seo ar chumas úsáideoirí aon rogha amháin nó níos mó a roghnú ó

liosta luachanna réamhshainithe. Is féidir rialtáin roghanna a chur i láthair i stíleanna éagsúla

agus le modhanna éagsúla idirghníomhaíochta leis an úsáideoir, ag brath go príomha ar an

eilimint a úsáidtear. Is féidir liosta roghanna a fhógairt ar thrí bhealach: le ticbhoscaí, le

cnaipí raidió agus le liostaí.

Ticbhoscaí

Cineál rogha ar leith is ea ticbhosca ar féidir leis an úsáideoir tic a chur ann nó é a fhágáil

folamh. Cuireann sé sin ar chumas údar sonraí a bhailiú amhail sainroghanna, glacadh

téarmaí agus coinníollacha, catagóirí, nó aon cheist eile is féidir a fhreagairt le freagra

dearfach nó diúltach. Airí ar leith den rialtán seo is ea go mbíonn gach ticbhosca


http://www.htmlquick.com/reference/tags/input-checkbox.html

http://www.htmlquick.com/reference/tags/input-radio.html

http://www.htmlquick.com/reference/tags/select.html


neamhspleách ar gach ticbhosca eile sa form, fiú nuair is féidir an rialtán a fhógairt mar

chuid de ghrúpa téamach.

Léirítear ticbhoscaí leis an eilimint input nuair a bhíonn an luach “checkbox” leis sa tréith

type. Bíonn ról ag luach na tréithe name freisin, agus is é a aithníonn an rogha ar thaobh an

fhreastalaí. Sa sampla seo a leanas, fógraíodh roinnt ticbhoscaí mar chuid de ghrúpa

téamach roghanna. Ná déan dearmad nach mbaineann an ghrúpáil seo ach le téama agus

le suíomh, agus leo sin amháin; tá roghnú na dticbhoscaí neamhspleách i gcónaí.

<form action="../../form-result.php" target="_blank">

<p>

Roghnaigh na réimsí is spéis leat:<br>

<input type="checkbox" name="movies"> Scannáin<br>

<input type="checkbox" name="sports"> Spóirt<br>

<input type="checkbox" name="videogames"> Físchluichí

</p>

<p><input type="submit" value=“Seol sonraí"></p>

</form>

Tá cúpla rud le sonrú sa sampla thuas. An chéad rud ná nach bhfuil aon bhaint idir an

ticbhosca féin agus an téacs a chuireann síos air nó, ar bhealach eile, nach féidir an

ticbhosca a ghníomhachtú trí chliceáil ar an téacs a bhaineann leis. Is féidir é sin a réiteach

go héasca ach an téacs a thiontú ina label don rialtán, agus féachfaimid air sin níos faide ar

aghaidh sa cheacht seo.

An dara rud ná an chaoi a nglactar na sonraí ón ticbhosca ar thaobh an fhreastalaí. Má

chuireann tú an form isteach, feicfidh tú nach seoltar ach na ticbhoscaí roghnaithe chuig an

ngníomhaire próiseála. Braitheann a luach go mór ar an teanga a úsáidtear ar thaobh an

fhreastalaí, agus is beag tábhacht a bhaineann leis an luach sin toisc gur léiriú ar staid

ghníomhachtaithe an ticbhosca na sonraí a bheith ann, agus é sin amháin.

Cnaipí raidió

Bíonn ticbhoscaí neamhspleách agus is féidir iad a fhógairt leo féin, ach is roghanna atá i

gcnaipí raidió ar gá iad a ghrúpáil le go mbeidh ciall leo. Ní féidir ach aon rogha amháin a

roghnú ag an am. Ar an gcaoi sin, i measc rudaí eile, nuair a roghnaíonn tú rogha amháin,

díroghnaítear an rogha a bhí roghnaithe roimhe sin.



http://www.htmlquick.com/reference/tags/label.html



Fógraítear cnaipe raidió leis an eilimint input freisin, ach bíonn an luach “radio” leis an tréith

type. Ní hionann é seo go díreach agus na ticbhoscaí, mar is gá go mbeadh luach na tréithe

name mar an gcéanna ag na roghanna go léir sa ghrúpa céanna. Ar bhealach eile, is é sin

an córas is gá a úsáid chun grúpa cnaipí raidió a chruthú.

Sa chás sin, áfach, cá bhfuil an luach a úsáidtear chun a chur in iúl don ghníomhaire

próiseála cé acu rogha sa ghrúpa atá roghnaithe? Tá freagra na ceiste sin le fáil sa tréith

value. Is é cuspóir na tréithe sin roghanna a shainaithint i ngrúpa, agus mar sin ba cheart go

mbeadh luach difriúil aici do gach aon rogha.

Sa sampla thíos, fógraíodh grúpa cnaipí raidió chun grúpa a chruthú nach féidir ach aon

rogha amháin a roghnú ann, rud a bhfuil an-chiall leis sa chomhthéacs seo. Chun na críche

sin, bíonn an name céanna ag gach cnaipe agus bíonn value difriúil acu go léir.


<p>

Ioncam:<br>

<input type="radio" name="income" value="lowerthan1000"> Faoi bhun

€1,000.00<br>

<input type="radio" name="income" value="from1000to5000"> Idir

€1,000.00 agus €5,000.00<br>

<input type="radio" name="income" value="higherthan5000"> Os cionn

€5,000.00

</p>


</form>

Liostaí

Rialtán atá i liosta roghanna atá cosúil, ó thaobh oibriú de, leis an dá rialtán a léiríodh thuas,

agus braitheann sé ar thréith Boole multiple a bheith ann. Tagann athrú mór ar iompraíocht

liosta mar thoradh ar an tréith sin a fhágann gur féidir aon rogha amháin nó roinnt roghanna

a roghnú ag an am céanna.

Dhá eilimint atá i struchtúr liosta go príomha: select, a ghníomhaíonn mar an coimeádán do

na roghanna; agus option, a léiríonn ceann de na roghanna éagsúla is féidir a bheith sa

rialtán.

Nuair nach mbíonn ann don tréith multiple, bíonn rialtán liosta cosúil le grúpa cnaipí raidió

nach féidir ach aon rogha amháin a roghnú ann ag an am. Léirítear an iompraíocht sin sa

chéad sampla eile, a oireann go hiontach do chuspóir an réimse.




http://www.htmlquick.com/reference/tags/select.html

http://www.htmlquick.com/reference/tags/option.html


<p>

Inscne:

<select name="gender">

<option>Fear</option>

<option>Bean</option>

</select>

</p>


</form>

Sa sampla thuas, is léir gurb é inneachar an option roghnaithe a sheoltar chuig an

bhfreastalaí. Mar sin féin, is féidir le húdair an iompraíocht sin a athrú má mheasann siad go

bhfuil gá leis sin ach an tréith value a fhógairt don option. Nuair a bhíonn ann don tréith sin,

is é a luach siúd a sheoltar chuig an ngníomhaire próiseála seachas inneachar na heiliminte.

Sa chás sin, nuair a bhíonn an tréith multiple ann, feidhmíonn an liosta mar thacar ticbhoscaí

ar féidir roinnt díobh a roghnú ag an am céanna seachas aon cheann amháin. Sa

chumraíocht sin, is gá péire lúibíní cearnacha a chur i ndiaidh aon luach a roghnaíonn an t-

údar don tréith name. Mura gcomhlíontar an ceanglas sin, ní bhfaighidh na gníomhairí

próiseála ach an chéad rogha atá roghnaithe.

Tá liosta roghanna sa chéad sampla eile ar féidir iad a roghnú gan teorainn. Baintear úsáid

freisin as an tréith value sna roghanna chun luachanna fada nach bhfuil gá leo a sheachaint

sa phróiseáil sonraí ar thaobh an fhreastalaí.


<p>

Roghnaigh catagóirí:<br>

<select multiple name="categories[]">

<option value="art">Ealaín agus siamsaíocht</option>

<option value="tv">Teilifís agus scannáin</option>

<option value="kids">Páistí agus déagóirí</option>

<option value="diy">Déan féin é</option>

</select>

</p>


</form>

Cnaipí

Cineál speisialta rialtáin is ea cnaipe arb é is aidhm leis idirghníomhú leis an úsáideoir ar

bhealach ar leith: cuirtear gníomh i gcrích gach uair a bhrúnn an t-úsáideoir an cnaipe. Is

ann do réimse leathan cnaipí, agus bíonn sainfheidhmeanna nó iompraíocht ar leith acu go




léir, ach ní fhéachfaimid anseo ach ar an dá chnaipe is mó a úsáidtear i bhfoirmeacha

bunúsacha.

Cnaipí curtha isteach

An gníomh réamhshainithe a bhaineann le cnaipe curtha isteach ná an form a chur isteach

nuair a bhrúitear é. Mura bhfuil ann do bhealaí eile chun an fhoirm a chur isteach, is gá don

chnaipe seo a bheith ann má tá sé i gceist go gcuirfidh na húsáideoirí an fhoirm isteach.

Cuirtear isteach cnaipe curtha isteach leis an eilimint input, agus bíonn an luach “submit” leis

an tréith type. Tá an tréith type tábhachtach sa rialtán seo, mar léirítear a luach mar lipéad

laistigh den chnaipe. Tá form ina bhfuil ionchur téacs agus cnaipe curtha isteach sa sampla

seo a leanas.


<p>

Cuir an tuairisc in eagar:

<input type="text" name="desc">

<input type="submit" value=“Sábháil athruithe">

</p>

</form>

Cnaipí athshocraithe

Amhail cnaipí curtha isteach, tá gníomh réamhshainithe ag baint le cnaipí athshocraithe. Is é

atá sa ghníomh réamhshainithe sa chás seo, áfach, ná na réimsí foirme a athshocrú dá

luachanna tosaigh. I bhfocail eile, is ionann staid na réimsí i bhfoirm atá athshocraithe agus

a staid nuair a lódáiltear an leathanach den chéad uair. Leis an ngníomh seo, baintear gach

athrú a rinne an t-úsáideoir ar luachanna na rialtán.

Ba cheart a shonrú anseo gur féidir luach réamhshainithe a bheith ag na rialtáin go léir, is é

sin luach atá san fhoirm nuair a lódáiltear an leathanach. Is ar an rialtán a bhraitheann an

chaoi ar gá d’údair an luach réamhshocraithe sin a shonrú. Le fáil amach conas luach

réamhshocraithe a shonrú i gcineál rialtáin ar leith, seiceáil an tagairt don rialtán sa liosta

seo.

Beidh tú in ann feidhmiúlacht an chnaipe athshocraithe a thástáil leis an sampla seo a

leanas. Fógraíodh an form seo le hionchur téacs aon líne, roinnt cnaipí raidió agus

ticbhosca. Tá luach réamhshocraithe ag na rialtáin sin go léir a shonraítear leis na tréithe

value agus checked.




http://www.htmlquick.com/reference/tags.html#forms

http://www.htmlquick.com/reference/tags.html#forms


http://www.htmlquick.com/reference/tags/input-text.html





<p>Seol teachtaireacht: <input type="text" name="message" value=“Táim

réidh!"></p>

<p>

<input type="radio" name="when" value=“inniu" checked> Inniu<br>

<input type="radio" name="when" value=“amárach"> Amárach

</p>

<p><input type="checkbox" name="copy" checked> Seol cóip chugam</p>

<p>

<input type="reset" value=“Athshocraigh an fhoirm">

<input type="submit" value=“Seol teachtaireacht">

</p>

</form>

Rialtáin lipéadaithe

Is féidir lipéad a chur ar bheagnach gach cineál rialtáin i form. Is fiú go mór rialtáin a lipéadú

chun feabhas a chur ar chúrsaí rochtana ar go leor bealaí. Leis an nasc seo idir téacs agus

rialtán, réiteofar an fhadhb a sonraíodh i gcuid de na samplaí thuas, go háirithe le cnaipí

raidió agus ticbhoscaí.

Is féidir lipéad a shannadh leis an eilimint label. An modh is éasca den dá mhodh reatha

chun label a shannadh do rialtán is ea an téacs agus an rialtán araon a fhógairt mar

inneachar na heiliminte label. Úsáidtear an modh sin chun roinnt lipéad a shannadh do

rialtáin sa sampla thíos. Is léir an chaoi a ndírítear ar an rialtán nuair a chliceáiltear ar a

lipéad.


<p><label>Ainm: <input type="text" name="fullname"></label></p>

<p>

Inscne:

<label><input type="radio" name="gender" value=“male"> Fear</label>

<label><input type="radio" name="gender" value=“female"> Bean</label>

</p>

<p><label><input type="checkbox" name="newsletter"> Ba mhaith liom an

nuachtlitir a fháil</label></p>


</form>

Rialtáin ghrúpála

Uaireanta, i gcás foirm mhór, is féidir deighilt a úsáid chun feabhas a chur ar an eagrú agus

ar chomh héasca is atá sé an fhoirm a úsáid. Is é sin an fáth a gcuirtear an eilimint fieldset








http://www.htmlquick.com/reference/tags/fieldset.html


ar fáil in HTML, agus is coimeádán do rialtáin atá ann. Leis an eilimint sin, is féidir le húdair

an fhoirm a roinnt ina codanna agus rialtáin a eagrú ar bhealach téamach.

Is féidir teideal a thabhairt ar fieldset freisin chun comhdhéanamh nó cuspóir an tacair rialtán

atá ann a shainaithint. Is féidir an teideal sin a chur ar fáil leis an eilimint legend, agus is gá í

sin a dhearbhú ar an gcéad mhac den fieldset. Sa sampla seo a leanas, léirítear foirm bheag

roinnte in dhá ghrúpa théamacha.


<fieldset>

<legend>Sonraí pearsanta</legend>

<p><label>Ainm: <input type="text" name="fullname"></label></p>

<p><label>Seoladh: <input type="text" name="address"></label></p>

</fieldset>

<fieldset>

<legend>Sainroghanna</legend>

<p>

<label><input type="checkbox" name="arts"> Na hEalaíona</label><br>

<label><input type="checkbox" name="television"> Teilifís</label><br>

<label><input type="checkbox" name="videogames">

Físchluichí</label><br>

<label><input type="checkbox" name="sports"> Spóirt</label><br>

</p>

</fieldset>

<input type="submit" value=“Seol sonraí">


http://www.htmlquick.com/reference/tags/legend.html



Cleachtadh 7 – Foirmeacha

1. Féach ar chuid de na comhaid shamplacha a cuireadh ar fáil.

2. Cruthaigh foirm shimplí le haghaidh ceann de na leathanaigh ar shuíomh gréasáin an

Chaifé sa cheacht thuas.

3. Cuir isteach nasc nua (lena ndéantar nasc chuig an bhfoirm) sa roghchlár ag barr an

leathanaigh.

Obair gharbh

Úsáid an spás thíos don obair gharbh:


Cleachtaí ar leithligh

Faighte ó

Cleachtadh A – Marcáil na nArrachtaí

Tús Eolais

Déanfaidh tú leathanach gréasáin atá trína chéile a athdhearadh chun leathanach níos

soiléire agus níos mó eolais a chur ar fáil do léitheoirí! Íoslódáil na comhaid go léir ón

bhfillteán atá curtha ar fáil.

1. Cuir teideal leis le h1

Déanaimis clibeanna h1 a chur timpeall na chéad líne den téacs ar an leathanach.

Ceannteideal, leibhéal 1 atá i gceist le h1, agus tá sé cosúil le teideal barrleibhéil.

Déan iarracht na clibeanna a chur isteach mar seo:

<h1>Ag teastáil: Bailitheoirí arrachtaí</h1>

Má oibríonn sé, ba cheart go mbeadh an teideal le feiceáil ar a líne féin ar an

leathanach gréasáin, mar bloc-eilimint is ea h1.

2. Cruthaigh alt

Ansin, úsáidimis an chlib <p> chun alt a chruthú. Bloc-eilimintí is ea iad ailt. Mar sin,

má dhéanaimid é seo i gceart, beidh an t-alt le feiceáil ar a líne féin, mar a déarfá,

agus beidh spás os a chionn agus faoina bhun.

Déan iarracht rud mar seo a dhéanamh:


<p>An bhfuil sé ionat arrachtaí gan dochar a lorg agus a ghabháil timpeall an bhaile?

An bhfuil tú réidh le slua mór de chréatúir ghleoite a bhailiú agus a oiliúint? Nuair a

thiocfaidh an t-am, an mbeidh an lá leat sa chomórtas chun an t-arracht is gleoite ar

fad a thógáil?</p>

3. Cuir an íomhá ar a líne féin

Anois, déanaimis iarracht an <img> – nó íomhá – a chur ar a líne féin. Is féidir

íomhánna a láimhseáil mar bhloc-eilimintí nó mar eilimintí inlíne, ag brath ar cibé acu

an ndéanann tú téacs inlíne a thimfhilleadh timpeall orthu nó nach ndéanann.

Tugaimis a spás féin don íomhá, le haon alt amháin os a chionn agus ceann eile

faoina bhun. Brúigh an eochair “Return” chun an chlib <img> a chur ar a líne féin mar

seo a leanas:

<img src="monster-1.png" width="25%" alt="Íomhá d’arracht gleoite">

Más mian leat pictiúr eile a úsáid, aimsigh ceann ar líne le hinneall cuardaigh amhail

Creative Commons, rud a aimseoidh íomhánna ar féidir iad a úsáid in aisce. Nuair a

bheidh URL, nó seoladh gréasáin, na híomhá nua agat, cuir an seoladh nua sin

isteach in ionad src – nó foinse – na híomhá bunaidh.

“Téacs malartach” atá i gceist leis an tréith alt anseo. Is é sin an téacs a thaispeánfar

sa chás ina mbeadh fadhb leis an íomhá nó leis an nasc chuici, agus is é sin an

téacs a léifear amach os ard do dhaoine a úsáideann léitheoirí scáileáin chun cabhrú

leo dul ar an ngréasán má bhíonn deacrachtaí acu leathanach a fheiceáil. Cuir téacs

alt le híomhánna i gcónaí chun cur le hinrochtaineacht an leathanaigh gréasáin!

4. Cruthaigh alt agus liosta ina dhiaidh

Cruthóimid liosta sa chéad chéim eile. Cruthóimid an liosta leis na staitisticí a

roinntear ar an leathanach gréasáin. Chun liosta a chruthú in HTML, is féidir úsáid a

bhaint as clib ordliosta – <ol> – le míreanna sa liosta – nó <li> – a léireofar mar

uimhreacha. Is féidir úsáid a bhaint as clib liosta le hurchair – <ul> – freisin chun

liosta a chruthú le hurchair seachas le huimhreacha. Is bloc-eilimint dá chuid féin é

gach liosta agus gach mír ar an liosta.


Déan iarracht alt nua agus liosta ina dhiaidh a chruthú mar seo a leanas:

<p>Imir Bailitheoir Arrachtaí: Fíorghleoite inniu! Ina measc tá:/p>

● <ul>

● <li>345 arracht atá thar a bheith gleoite</li>

● <li>722 spás le haghaidh cumais & trealaimh</li>

● <li>921 scil is féidir a fhoghlaim</li>

● <li>12 leibhéal deacrachta</li>

● <li>Líon mór láithreacha fíorúla bailithe agus catha ar fud na

cruinne</li>

● </ul>

5. Cruthaigh alt deiridh agus seiceáil an nasc

Ar deireadh, cuir an chuid eile den téacs ina alt deiridh féin. Is féidir an téacs a

scaradh i roinnt alt freisin má theastaíonn uait an fhaisnéis a scaradh a thuilleadh.

Déan iarracht rud mar seo a dhéanamh:

<p>Tá fáil ar an uile rud ar d’fhón cliste, uaireadóir, táibléad nó spéaclaí 3T! Le fáil

gach áit a ndíoltar Bailitheoir Arrachtaí: Deireadh Ré. Neamh-chomhoiriúnach le

Bailitheoir Arrachtaí: Eagrán Taistil. Tá Bailitheoir Arrachtaí: Paca Tosaigh 3 ag

teastáil le himirt. Féach ar <a href="https://creaturecollector.netorgcom">

creaturecollector.netorgcom</a> chun teacht ar ábhar eisiach is féidir a íoslódáil.</p>

Caith súil ar an <a> – is clib do nasc atá ann. Naisc inlíne atá i gceist – fanann siad

laistigh den líne téacs ina bhfuil an nasc. Is féidir an href – nó tagairt hipirtéacs – don

nasc a athrú chuig ceann de na suíomhanna gréasáin is fearr leat chun é a roinnt leis

na foghlaimeoirí eile.

6. Cuir stíleanna leis le clibeanna inlíne

Téigh siar trí na hailt agus cuir stíleanna áirithe leo trí úsáid a bhaint as na clibeanna

do chló trom, cló iodálach agus folíne. Déan iarracht úsáid a bhaint as gach clib uair


amháin ar a laghad chun béim a chur ar na codanna den leathanach is mian leat a

aibhsiú.

● Cuir <strong></strong> timpeall ar fhocail is mian leat a léiriú i gcló trom.

● Cuir <em></em> timpeall ar fhocail is mian leat a léiriú i gcló iodálach.

● Cuir <u></u> timpeall ar fhocail ar mian leat líne a chur fúthu.

Comhghairdeas leat as an leathanach gréasáin trína chéile seo a athdhearadh chun

leathanach níos soiléire agus ina bhfuil níos mó eolais a chur ar fáil do léitheoirí!

Féach ar an gcaoi ar bhain tú úsáid as bloc-eilimintí chun faisnéis a roinnt ina

smutáin agus ar an gcaoi ar bhain tú úsáid as eilimintí inlíne chun naisc a chur

isteach agus chun béim a chur ar fhaisnéis thábhachtach. Ná déan dearmad ar na

clibeanna sin ná ar a bhfeidhmeanna agus tú ag obair ar do leathanaigh ghréasáin

féin!

Cleachtadh B – Marcáil ar litir fhoirmiúil

Is é atá le déanamh sa tionscadal seo marcáil a dhéanamh ar litir atá le hóstáil ar inlíon

ollscoile. Freagra atá sa litir ó chomhalta taighde do mhac léinn ionchais PhD maidir lena

iarratas chun dul ag obair san ollscoil

● Dhá chomhad atá de dhíth chun tosú amach – an CSS a bheidh le cur isteach sa

HTML agus téacs na litreach féin.

● Cruthaigh comhad nua .html san eagarthóir téacs chun do chuid oibre a dhéanamh

● Ní gá go mbeadh aon eolas agat ar CSS chun an measúnú seo a dhéanamh; ní gá

duit ach an comhad CSS atá curtha ar fáil a chur in eilimint HTML.

● Úsáid bailíochtóir HTML W3C chun do chód HTML a bhailíochtú –

https://validator.w3.org/

Séimeantaic struchtúrach / bloc-séimeantaic:

● Ba cheart struchtúr cuí a chur ar an doiciméad foriomlán lena n-áirítear eilimintí

doctype agus <html>, <head> agus <body>.


● Go ginearálta, ba cheart an litir a mharcáil le struchtúr alt agus ceannteideal, ach

amháin i gcás na bpointí anseo thíos. Tá ceannteideal amháin ann (an líne “Re:”)

mar aon le trí cheannteideal dara leibhéal.

● Ba cheart dátaí tosaithe an tseimeastair, ábhair staidéir agus rincí galánta a mharcáil

le cineál liosta cuí.

● Is féidir an dá sheoladh a chur laistigh d’ailt. Níl an eilimint <address> oiriúnach dóibh

— cén fáth nach bhfuil? Ina theannta sin, ba cheart gach líne de na seoltaí a chur ar

líne nua, ach níor cheart iad a chur in alt nua.

Séimeantaic inlíne:

● Ba cheart ainmneacha an tseoltóra agus an fhaighteora (agus “Tel” agus “Email”) a

mharcáil mar an-tábhachtach.

● Ba cheart eilimintí cuí ina mbeidh dátaí inléite ag meaisín a thabhairt do na ceithre

dháta sa doiciméad.

● Ba cheart luach tréithe aicme "sender-column” a thabhairt don chéad seoladh agus

don chéad dáta sa litir. Nuair a chuirfidh tú an CSS leis níos déanaí, déanfar na

míreanna sin a ailíniú ar dheis, faoi mar a dhéantar i ngnáthleagan amach litreach.

● Ba cheart na cúig acrainm/ghiorrúchán i bpríomhchorp na litreach a mharcáil sa

chaoi is go dtabharfar míniú ar gach acrainm/giorrúchán.

● Ba cheart na sé fhoscript/fhorscript a mharcáil go cuí — sna foirmlí ceimiceacha,

agus na huimhreacha 103 agus 104 (10 i gcumhacht 3 agus 4, faoi seach, is ceart a

bheith ann).

● Déan iarracht dhá fhocal chuí ar a laghad sa téacs a mharcáil/aibhsiú mar an-

tábhachtach.

● Is ceart hipearnasc a chur isteach in dhá áit; cuir isteach naisc chuí mar aon le teidil.

Maidir leis an suíomh a bhaineann leis na naisc, bain úsáid as http://example.com.

● Ba cheart manna agus lua na hollscoile a mharcáil leis na heilimintí cuí.

Ceannteideal an doiciméid:

● Ba cheart tacar carachtar an doiciméid a shainiú mar utf-8 le meitichlib chuí.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address


● Ba cheart údar na litreach a shainiú i meitichlib chuí.

● Ba cheart an comhad CSS atá curtha ar fáil a áireamh laistigh de chlib chuí.


Cleachtadh II – Marcáil ar litir fhoirmiúil


Cleachtadh C

Don chleachtadh seo, is é atá le déanamh agat eilimintí struchtúracha a chur le hábhar an

leathanaigh baile de shuíomh gréasáin éanbhreathnaithe chun gur féidir leagan amach

leathanaigh a chur i bhfeidhm air. Ní mór na nithe seo a leanas a chur ann:

● Ceanntásc ó thaobh amháin go dtí an taobh eile den suíomh gréasáin ar a mbeidh

príomhtheideal an leathanaigh, lógó an tsuímh, agus an roghchlár nascleanúna.

Beidh an teideal agus an lógó le feiceáil taobh le taobh nuair a bheidh an dearadh

curtha i bhfeidhm, agus beidh an nascleanúint le feiceáil thíos fúthu.

● Príomhréimse ábhair ina mbeidh dhá cholún – príomhbhloc ina mbeidh an téacs

fáiltithe, agus taobh-bharra ina mbeidh mionsamhlacha.

● Buntásc ina mbeidh faisnéis ar chóipcheart agus ar chreidiúintí.

Beidh ort rapar cuí a chur isteach dóibh seo a leanas:

● An ceanntásc

● An roghchlár nascleanúna

● An príomhábhar

● An téacs fáiltithe

● An taobh-bharra d’íomhánna

● An buntásc

Ina theannta sin:

Ba cheart duit an comhad CSS atá curtha ar fáil a chur i bhfeidhm trí eilimint <link> eile a

chur isteach díreach thíos faoin eilimint a cuireadh ar fáil ag an tús.

Noda agus leideanna

● Ní gá go mbeadh aon eolas agat ar CSS chun an measúnú seo a dhéanamh; ní gá

duit ach an comhad CSS atá curtha ar fáil a chur in eilimint HTML.

● Dearadh an comhad CSS sa chaoi is go léireofar i gcló glas ar an leathanach

críochnaithe na heilimintí struchtúracha cearta nuair a chuirfear leis an marcáil iad.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link


● Má bhíonn fadhbanna agat agus mura dtuigeann tú cé na heilimintí is ceart a chur

sna háiteanna éagsúla, cabhraíonn sé go minic léaráid shimplí a tharraingt de leagan

amach an leathanaigh i mbloic, agus na heilimintí is ceart a chur timpeall ar gach

bloc a bhreacadh síos ar an léaráid sin.

Sampla

Léirítear sa ghabháil scáileáin thíos an chuma a d’fhéadfadh a bheith ar an leathanach baile

tar éis na marcála.

Tabhair faoi deara

Tugadh isteach eilimintí struchtúracha nua in HTML5, lena n-áirítear na heilimintí

<header>, <nav>, <article>, <section>, <aside>, agus <footer>.

http://dev.opera.com/articles/new-structural-elements-in-html5/


Tá sé i gceist leis na heilimintí nua sin go léir brí a thabhairt d’eagrú ár leathanach agus

feabhas a chur ar ár séimeantaic struchtúracha. Is eilimintí blocleibhéil iad go léir, agus níl

aon suíomh ná stíl ar leith intuigthe leo. Ina theannta sin, is féidir na heilimintí sin go léir a

úsáid níos mó ná aon uair amháin ar an leathanach, chomh fada is a léirítear an bhrí

shéimeantach cheart le gach úsáid.

Bloceilimintí vs eilimintí inlíne

Eilimintí blocleibhéil nó ar leibhéal inlíne atá i gceist le formhór na n-eilimintí. Céard é an

difríocht?

Tosaíonn eilimintí blocleibhéil ar líne nua, déantar iad a chruachadh ar a chéile, agus

glacann siad an leithead ar fad atá ar fáil.

Is féidir eilimintí blocleibhéil a neadú ina chéile, agus is féidir iad a chur timpeall ar eilimintí

ar leibhéal inlíne. Is minice a fheicfimid eilimintí blocleibhéil in úsáid i gcás ábhar níos mó,

amhail ailt.


Ní thosaíonn eilimintí inlíne ar líne nua. Leanann siad leagan amach an doiciméid, cuirtear

iad i líne ceann i ndiaidh a chéile, agus ní ghlacann siad ach leithead an ábhair lena

mbaineann siad. Is féidir eilimintí inlíne a neadú ina chéile; mar sin féin, ní féidir iad a chur

timpeall ar eilimintí blocleibhéil. Is minice a fheicfimid eilimintí inlíne in úsáid i gcás ábhar

níos lú, amhail líon beag focal.

Gluais HTML

HTML: Teanga Mharcála Hipirtéacs, teanga an ghréasáin, creatlach leathanaigh gréasáin.

Eilimint: cuid de leathanach gréasáin, mar shampla alt nó íomhá.

Clib: lipéad HTML lena sainaithnítear eilimint ar leathanach gréasáin, mar shampla

sainaithnítear alt le <p>.

Clib thosaigh: an chlib lena dtosaítear cuid de leathanach gréasáin, mar shampla <p>

roimh alt.

Clib dheiridh: an chlib ina mbíonn slais lena gcríochnaítear cuid de leathanach gréasáin,

mar shampla </p> ag deireadh ailt.

Tréith: saintréith eiliminte ar leathanach gréasáin, mar shampla background-color nó color.

Luach: luach tréithe, mar shampla “red” i gcás “color” nó “12px” i gcás “font-size”.


Acmhainní HTML

Glitch

www.Glitch.com

CodePen

https://codepen.io

W3 Schools - HTML

https://www.w3schools.com/html

Mozilla Development - HTML

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

HTML Cheat Sheet - A Simple Guide to HTML

http://www.simplehtmlguide.com/cheatsheet.php

Beginner's Guide To HTML

https://www.beginnersguidetohtml.com

HTML Crash Course For Absolute Beginners - YouTube

https://www.youtube.com/watch?v=UB1O30fR-EE

Get HTML Color Codes

https://htmlcolorcodes.com

HTML Tags Ordered Alphabetically

https://www.w3schools.com/tags

HTML CheatSheet

https://htmlcheatsheet.com/

HTML Templates

https://html5-templates.com/

HTML Quick Tutorials

http://www.htmlquick.com

Cleachtaí faighte ó W3 Schools, Mozilla Development & HTML Quick.

http://www.glitch.com/

https://codepen.io/

https://www.w3schools.com/html

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

http://www.simplehtmlguide.com/cheatsheet.php

https://www.beginnersguidetohtml.com/

https://www.youtube.com/watch?v=UB1O30fR-EE

https://htmlcolorcodes.com/

https://www.w3schools.com/tags

https://htmlcheatsheet.com/

https://html5-templates.com/


Rannán 2

Stílbhileoga Cascáideacha


Clár Ábhar

Tús Eolais ar CSS 68

● Céard is CSS ann? ● Stair ● Cúlra ● CSS - sampla I ● Cleachtadh machnaimh

Struchtúr CSS 72

● Struchtúr ● Cén chaoi a dtéann CSS i bhfeidhm ar HTML? ● Cén chaoi a n-oibríonn CSS? ● An chaoi le CSS a chur i bhfeidhm ar HTML ● CSS - sampla II ● Comhréir CSS ● Dearbhuithe CSS ● Níos faide ná an chomhréir: CSS a dhéanamh inléite ● Cleachtadh machnaimh

Roghnóirí 82

● Tús Eolais ar roghnóirí ● Cineálacha éagsúla roghnóirí ● Roghnóirí simplí ● Súda-aicmí agus súdai-eilimintí

Aonaid CSS 86

● Aonaid CSS ● Cleachtadh machnaimh

Cascáid 89

An tsamhail bosca 90

● An tsamhail bosca

Stíl a chur ar théacs 92

● Airíonna clófhoirne – stíl, clómheáchan ● Airíonna téacs – color, text-align, vertical-align ● Leagan amach téacs – ailíniú agus airde líne ● Cleachtadh machnaimh


Stíl a chur ar bhoscaí 98

● Imlíne CSS ● Forbhreathnú ar stíl a chur ar bhoscaí ● Dath imlíne ● Leithead imlíne ● Imlíne – airí gearrscríofa ● Seach-chur imlíne

Leagan amach CSS 103

● Forbhreathnú ar leagan amach CSS ● Gnáthshreabhadh ● Airí taispeána ● Flexbox ● Leagan amach greille

Dearadh freagrúil gréasáin 108

● Réamhrá ● An t-eispéireas is fearr do gach aon úsáideoir

Cleachtaí ar leithligh 110

● Samhail bosca ● Cárta gnó ● Leathanach baile scoile a chlóchur ● Páipéar ceannteidil galánta a chruthú ● Bosca galánta ● Leagan amach leathanaigh gréasáin

Gluais CSS 124

Acmhainní CSS 125


Tús Eolais ar CSS

Céard is CSS ann?

Teanga atá in CSS (Stílbhileoga Cascáideacha) ina ndéantar cur síos ar stíl doiciméid

HTML. Tugtar cur síos in CSS ar an gcaoi ar cheart eilimintí HTML a léiriú.

● Seasann CSS do Stílbhileoga Cascáideacha.

● Tugtar cur síos in CSS ar an gcaoi ar cheart eilimintí HTML a léiriú ar an scáileán, ar

pháipéar nó ar mheáin eile.

● Is féidir go leor oibre a sheachaint le CSS. Is féidir leagan amach go leor leathanaigh

gréasáin a rialú leis ag an am céanna.

● Stóráiltear stílbhileoga seachtracha i gcomhaid CSS.

Stair

Forbraíodh CSS den chéad uair in 1997 le cur ar chumas forbróirí gréasáin cuma na

leathanach gréasáin a bhí á gcruthú acu a shainiú. An aidhm a bhí leis ná cur ar chumas

gairmithe gréasáin an t-ábhar agus an struchtúr de chód suímh gréasáin a scaradh ón

dearadh físiúil, rud nárbh fhéidir a dhéanamh go dtí sin.

Mar thoradh ar an struchtúr agus an stíl a scaradh óna chéile, is fearr atá HTML in ann a

bhunfheidhm a chomhlíonadh, is é sin ábhar a mharcáil, gan dul i ngleic le dearadh ná

leagan amach an leathanaigh féin, ar a dtugtar “cuma agus éirim” an leathanaigh go minic.

https://www.lifewire.com/when-to-build-database-driven-site-3464259


Ní raibh mórán éilimh ar CSS go dtí thart ar an mbliain 2000 nuair a thosaigh brabhsálaithe

gréasáin ar úsáid a bhaint as níos mó ná gnéithe bunúsacha clófhoirne agus datha den

teanga mharcála seo. Faoi mar a thagann éabhlóid ar CSS agus faoi mar a thugtar stíleanna

nua isteach, tá brabhsálaithe gréasáin tosaithe ar mhodúil a chur i bhfeidhm lena dtugtar

isteach tacaíocht do CSS sna brabhsálaithe sin agus lena dtugtar uirlisí cumhachtacha nua

ó thaobh stíleanna de do dhearthóirí gréasáin.

Scéimléaráid ar éabhlóid CSS ó leagan 1 go leagan 3

https://goo.gl/2cwT1I

Cúlra

NÍ RAIBH sé i gceist riamh go n-úsáidfí clibeanna in HTML chun leathanach gréasáin a

fhormáidiú. Cruthaíodh HTML chun cur síos a dhéanamh ar ábhar leathanaigh gréasáin,

mar shampla:

<h1>Is ceannteideal é seo</h1>

<p>Is alt é seo.</p>


Cruthaíodh fadhbanna móra d’fhorbróirí gréasáin nuair a cuireadh clibeanna amhail <font>

agus tréithe datha le sonraíocht HTML 3.2. Próiseas fada costasach a bhí i gceist le

láithreáin ghréasáin mhóra a fhorbairt inar cuireadh faisnéis maidir le clófhoirne agus

dathanna le gach aon leathanach.

Chruthaigh Feadhnacht an Ghréasáin Dhomhanda (W3C) CSS chun an fhadhb sin a

réiteach. Le CSS, baineadh an formáidiú stíle ón leathanach HTML.

I gcomhaid sheachtracha .css a shábháiltear na sainmhínithe stíle go hiondúil. Le comhad

stílbhileoga seachtrach, is féidir cuma suímh gréasáin a athrú ó bhonn gan ach aon

chomhad amháin a athrú.

Sampla de CSS

Acmhainn forbartha de chuid an Ghréasáin Dhomhanda is ea CSS Zen Garden ar

cruthaíodh é le léiriú céard is féidir a bhaint amach ó thaobh físe de le dearadh bunaithe ar

CSS. Cuireann dearthóirí ar fud an domhain stílbhileoga ar fáil, agus úsáidtear iad sin chun

an chuma atá ar chomhad HTML aonair a athrú, trína gcruthaítear na céadta dearaí

éagsúla.

Féach ar na comhaid shamplacha atá curtha ar fáil ón CSS Zen Garden – comhad HTML

agus CSS. Féach ar shuíomh gréasáin an CSS Zen Garden chun féachaint ar dhearaí

éagsúla. Lódálfar an stílbhileog ar an leathanach seo ach cliceáil ar cheann de na dearaí

sin. Fanann an HTML mar a bhí, ní athraítear ach an comhad seachtrach CSS. Léiriú ar

céard is féidir a bhaint amach le dearadh bunaithe ar CSS.

http://www.csszengarden.com/

http://www.csszengarden.com/


Machnamh

Déan machnamh ar ar fhoghlaim tú faoi CSS go dtí seo.

Scríobh cúig rud faoi CSS sa spás thíos.

1

2

3

4

5


Struchtúr CSS

Struchtúr

Teanga is ea CSS agus úsáidtear é leis an gcaoi a gcuirtear doiciméid i láthair úsáideoirí a

shonrú – ó thaobh stíleanna, leagan amach, etc.

Comhad téacs atá i gceist le doiciméad go hiondúil, agus é struchtúraithe le teanga

mharcála – is é HTML an teanga mharcála is coitianta, ach feicfidh tú teangacha marcála

eile freisin amhail SVG nó XML.

Is é atá i gceist le doiciméad a chur i láthair úsáideora ná an doiciméad a thiontú go foirm ar

féidir leis an lucht léite é a úsáid. Is é is aidhm le brabhsálaithe amhail

Firefox, Chrome nó Internet Explorer doiciméid a chur i láthair ar bhealach físiúil, mar

shampla ar scáileán ríomhaire, ar theilgeoir nó ar phrintéir.

Cén chaoi a dtéann CSS i bhfeidhm ar HTML?

Cuireann brabhsálaithe gréasáin rialacha CSS i bhfeidhm ar dhoiciméad leis an gcaoi a

léirítear an doiciméad a rialú. Cruthaítear riail CSS uathu seo a leanas:

● Tacar airíonna lena mbaineann luachanna atá socraithe le nuashonrú a dhéanamh

ar an gcaoi a léirítear ábhar HTML, mar shampla is ionann leithead na heiliminte

agus 50% dá máthaireilimint agus beidh dath dearg ar an gcúlra.

● Roghnóir, lena roghnaítear an eilimint nó na heilimintí ar ar mian leat na luachanna

airíonna nuashonraithe a chur i bhfeidhm. Mar shampla, riail CSS a chur i bhfeidhm

ar na hailt go léir i ndoiciméad HTML.

Is é tacar rialacha CSS laistigh de stílbhileog a rialaíonn an chuma a bhíonn ar leathanach

gréasáin.

https://developer.mozilla.org/en-US/docs/Glossary/SVG

https://developer.mozilla.org/en-US/docs/Glossary/XML

https://developer.mozilla.org/en-US/docs/Glossary/browser

https://developer.mozilla.org/en-US/docs/Glossary/Mozilla_Firefox

https://developer.mozilla.org/en-US/docs/Glossary/Google_Chrome

https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Internet_Explorer


CSS - sampla II

Oscail an dá chomhad don chleachtadh seo san fhillteán dar theideal Struchtúr. Tosaíonn an

chéad riail le roghnóir h1, rud a chiallaíonn go rachaidh a luachanna airíonna i bhfeidhm ar

an eilimint <h1>. Tá trí airí agus a luachanna ann.

1. Cuirtear dath gorm ar an téacs leis an gcéad cheann.

2. Cuirtear dath buí ar an gcúlra leis an dara ceann.

3. Leis an tríú ceann, cuirtear imlíne timpeall ar an gceanntásc atá 1 phicteilín amháin

ar leithead, ar líne iomlán í (seachas poncanna nó daiseanna, etc.), agus a bhfuil

dath dubh uirthi.

Tosaíonn an chéad riail le roghnóir p, rud a chiallaíonn go rachaidh a luachanna airíonna i

bhfeidhm ar an eilimint <p>. Tá aon dearbhú amháin ann lena gcuirtear dath dearg ar an

téacs.

Bheadh an toradh seo a leanas ar an gcód thuas i mbrabhsálaí gréasáin:

Cén chaoi a n-oibríonn CSS?

Nuair a léirítear doiciméad i mbrabhsálaí, ní mór don bhrabhsálaí ábhar an doiciméid a

cheangal lena fhaisnéis stíle. Déanann sé an doiciméad a phróiseáil in dhá chéim:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1


1. Tiontaíonn an brabhsálaí HTML agus CSS ina DOM (Samhaltán Oibiachta

Doiciméid). Is ionann DOM agus an doiciméad i gcuimhne an ríomhaire. Déanann sé

ábhar an doiciméid a cheangal lena stíl.

2. Léirítear inneachar an DOM sa bhrabhsálaí.

An chaoi le CSS a chur i bhfeidhm ar HTML

Feicfidh tú go minic trí bhealach éagsúla le CSS a chur i bhfeidhm ar dhoiciméad HTML,

agus bíonn cuid acu níos úsáidí ná a chéile. Is ann do thrí bhealach chun stílbhileog a chur

isteach:

● Stílbhileog sheachtrach

● Stílbhileog inmheánach

● Stílbhileog inlíne

Stílbhileog sheachtrach

Chonaic tú stílbhileoga seachtracha roimhe seo, ach níor thuig tú gurbh in an t-ainm a bhí

orthu. Is ionann stílbhileog sheachtrach agus an CSS scríofa i gcomhad seachtrach lena

mbaineann iarmhír .css, agus déanann tú tagairt dó ó eilimint <link> HTML. Bíonn cuma mar

seo a leanas ar an gcomhad HTML:

https://developer.mozilla.org/en-US/docs/Glossary/HTML

https://developer.mozilla.org/en-US/docs/Glossary/CSS

https://developer.mozilla.org/en-US/docs/Glossary/DOM


Agus seo an chuma a bhíonn ar chomhad CSS:

D’fhéadfaí a rá gurb é seo an modh is fearr, mar gur féidir úsáid a bhaint as aon stílbhileog

amháin le dul i bhfeidhm ar go leor doiciméid éagsúla.

Stílbhileog inmheánach

Ní úsáidtear comhad seachtrach CSS i gcás stílbhileog inmheánach. Ina áit sin, cuirtear an

CSS laistigh d’eilimint <style> atá sa cheanntásc HTML. Seo a leanas an chuma a bheadh

ar an HTML, mar sin:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML


Bíonn sé sin úsáideach i gcúinsí áirithe (b’fhéidir go bhfuil tú ag obair le córas bainistíochta

inneachair agus nach féidir leat na comhaid CSS a athrú go díreach, ach níl sé baileach

chomh héifeachtúil céanna le stílbhileoga seachtracha – i suíomh gréasáin, níor mhór an

CSS a lua i ngach aon leathanach.

Stíleanna inlíne

Dearbhuithe CSS is ea iad stíleanna inlíne nach dtéann i bhfeidhm ach ar aon eilimint

amháin. Bíonn siad le fáil laistigh d’eilimint stíle:

https://developer.mozilla.org/en-US/docs/Glossary/CMS

https://developer.mozilla.org/en-US/docs/Glossary/CMS


Ní bheadh ort úsáid a bhaint as stíleanna inlíne ach amháin sa chás ina mbeifeá ag obair i

dtimpeallacht oibre thar a bheith sriantach (b’fhéidir nach ligeann an CMS duit an corp HTML

a chur in eagar).

Comhréir CSS

Dhá bhloc tógála atá i gceist le CSS ar an leibhéal is bunúsaí:

Airíonna: Aitheantóirí atá inléite ag daoine lena léirítear na gnéithe stíle (e.g.

clófhoireann, leithead, dath cúlra) is mian leat a athrú.

Luachanna: Tugtar luach do gach airí sainithe, rud a léiríonn conas is mian leat na

gnéithe stíle sin a athrú (e.g. clófhoireann, leithead nó dath cúlra).

Dearbhú CSS a thugtar ar airí atá nasctha le luach. Cuirtear dearbhuithe CSS laistigh de

Bhloic Dearbhuithe CSS. Cuirtear bloic dearbhuithe CSS in éineacht le roghnóirí chun Tacair

Rialacha CSS nó Rialacha CSS a chruthú.

Agus seo an chuma a bhíonn ar chomhad CSS:


Dearbhuithe CSS

Bunfheidhm na teanga CSS is ea airíonna CSS a shainiú ar luachanna sonracha. Oibríonn

an t-inneall CSS amach cé na dearbhuithe a théann i bhfeidhm ar gach aon eilimint ar

leathanach chun é a leagan amach i gceart agus an stíl chuí a chur i bhfeidhm air. Cuirtear

idirstad (:) idir an t-airí agus an luach i ngach péire. Is ann do níos mó ná 300 airí difriúil in

CSS, mar aon leis an iliomad luachanna éagsúla.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference


Bloic dearbhuithe CSS

Déantar dearbhuithe a ghrúpáil i mbloic, agus bíonn lúibín slabhrach tosaigh { agus lúibín

slabhrach deiridh } timpeall ar gach tacar dearbhuithe.

Is gá leathstad (;) a chur idir gach dearbhú i mbloc dearbhuithe nó ní oibreoidh an cód i

gceart (nó beidh torthaí aisteacha leis). Ní gá leathstad a chur tar éis an dearbhaithe deiridh

de bhloc, ach meastar go minic gur dea-chomhartha stíle atá ann.

Roghnóirí agus rialacha CSS

Tá rud amháin in easnamh i gcónaí – ní mór dúinn a insint dár mbloic dearbhuithe cé na

heilimintí ar a rachaidh siad i bhfeidhm. Déantar é sin trí roghnóir a chur roimh gach bloc

dearbhuithe – patrún a thagann le chéile le roinnt eilimintí ar an leathanach. Ní chuirfear na


dearbhuithe lena mbaineann ach leis na heilimintí sin, agus leo sin amháin. Tugtar tacar

rialacha nó riail ar an roghnóir móide an bloc dearbhuithe.


Níos faide ná an chomhréir: CSS a dhéanamh inléite

Is fiú eolas a chur ar roinnt leideanna a chabhróidh leat do chód CSS a dhéanamh níos

éasca le húsáid agus le cothabháil.

Spás bán

Ciallaíonn spás bán spásanna iarbhír, táib agus línte nua. Is féidir spás bán a chur le

stílbhileoga le go mbeidh sé níos éasca iad a léamh. Ar an gcaoi chéanna le HTML, is minic

a dhéanann an brabhsálaí neamhaird de chuid mhór den spás bán sa CSS; is ann do chuid

mhaith den spás bán chun cur leis an inléiteacht.

Tuairimí

Amhail HTML, moltar duit nótaí tráchta a chur sa chód CSS chun cabhrú leatsa a thuiscint

conas a fheidhmíonn an cód nuair a fhilleann tú air tar éis roinnt míonna agus chun cabhrú

le daoine eile é a thuiscint. Bíonn nótaí tráchta úsáideach freisin chun nóta tráchta a

dhéanamh de chodanna áirithe den chód chun críche tástála, mar shampla más mian leat

fáil amach cén chuid den chód is cúis le hearráid. Le /* a thosaíonn nótaí tráchta in CSS

agus le */ a chríochnaíonn siad.


Machnamh

Déan machnamh ar ar fhoghlaim tú faoin gcaoi a n-oibríonn CSS.

Úsáid an spás thíos


Tús Eolais ar roghnóirí

Díreach mar achoimre, is cuid de riail iad roghnóirí agus bíonn siad le fáil díreach roimh

bhloic dearbhuithe CSS.

Cineálacha éagsúla roghnóirí

Is féidir roghnóirí a roinnt sna catagóirí seo a leanas:

● Roghnóirí simplí: Meaitseálann siad aon eilimint amháin nó níos mó bunaithe ar

chineál, aicme nó id na heiliminte.

● Roghnóirí tréithe: Meaitseálann siad eilimint amháin nó níos mó bunaithe ar a

dtréithe/luachanna tréithe.

● Súda-aicmí: Meaitseálann siad eilimint amháin nó níos mó a bhíonn ann i staideanna

áirithe, amhail eilimint ar a bhfuil an pointeoir luiche, nó ticbhosca atá díchumasaithe

nó a bhfuil tic ann, nó eilimint atá ar an gcéad mhac dá mháthair sa chrann DOM.

● Súdai-eilimintí: Meaitseálann siad cuid amháin nó níos mó den inneachar atá i

suíomh ar leith i gcomparáid leis an eilimint, mar shampla an chéad fhocal de gach

alt, nó inneachar a ghintear agus a bhíonn le feiceáil díreach roimh eilimint.

● Teaglamóirí: Ní roghnóirí astu féin iad go díreach, ach is bealaí iad chun dhá

roghnóir nó níos mó a chur le chéile ar bhealaí úsáideacha ar mhaithe le roghnuithe

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-id


an-sainiúil. Mar shampla, d’fhéadfá ailt ar sliocht díreach iad de rannóga (div) nó ailt

a thagann díreach tar éis ceannteideal, agus na hailt sin amháin, a roghnú.

● Roghnóirí iolracha: Arís eile, ní roghnóirí astu féin iad seo. An aidhm atá ann ná gur

féidir roghnóirí iolracha a chur leis an riail CSS chéanna, agus camóga eatarthu,

chun tacar aonair dearbhuithe a chur i bhfeidhm ar na heilimintí go léir atá roghnaithe

ag na roghnóirí sin.

Roghnóirí simplí

Roghnóirí cineáil / roghnóirí eiliminte

Níl sa roghnóir seo ach meaitseáil nach bhfuil íogair ar chás idir ainm an roghnóra agus

ainm eiliminte HTML áirithe. Tá sé seo ar an mbealach is simplí chun díriú ar gach eilimint

de chineál airithe. Féachaimis ar shampla:

Féach ar an sampla thuas (HTML & CSS) san fhillteán atá curtha ar fáil.

Roghnóirí aicme

Ponc, '.', agus ainm aicme ina dhiaidh atá sa roghnóir aicme. Is é atá in ainm aicme luach ar

bith, gan spásanna, a chuirtear laistigh de thréith class HTML. Fút féin atá sé ainm don

aicme a roghnú. Is fiú a lua freisin gur féidir an luach aicme céanna a bheith ag roinnt

eilimintí éagsúla i ndoiciméad, agus is féidir roinnt ainmneacha aicme éagsúla agus spás

bán eatarthu a bheith ag aon eilimint amháin.


Roghnóirí ID

Comhartha haise (#), agus ainm ID eiliminte ar leith ina dhiaidh, atá sa roghnóir ID. Is féidir

tacar ainm ID uathúil a bheith ag aon eilimint ar leith leis an tréith id. Fút féin atá sé ainm ID

a roghnú. Tá sé ar an mbealach is éifeachtúla chun aon eilimint amháin a roghnú.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class



Físeán ar roghnóirí CSS – https://youtu.be/viJJoo8uJuY

Súda-aicmí agus súdai-eilimintí

Súda-aicmí

Is é atá i súda-aicme CSS eochairfhocal a chuirtear ag deireadh roghnóra agus idirstad (:)

roimhe, agus úsáidtear é le sonrú gur mian leat stíl a chur i bhfeidhm ar an eilimint

roghnaithe ach faoi réir coinníoll áirithe, agus sa chás sin amháin. Mar shampla, b’fhéidir gur

mhaith leat stíl a chur i bhfeidhm ar nasc-eilimint nuair a bhíonn an pointeoir luiche os a

chionn, agus sa chás sin amháin, nó ar thicbhosca nuair a bhíonn sí díchumasaithe nó nuair

a bhíonn tic ann. Mar shampla:

● :active

● :checked

https://youtu.be/viJJoo8uJuY


● :default

● :dir

● :disabled

● :empty

● :enabled

● :first

● :first-child

Féachfaimid ar gach súda-aicme, ach seo sampla simplí.

Féach ar na comhaid shamplacha (HTML & CSS) san fhillteán atá curtha ar fáil.

Súdai-eilimintí

Tá súdai-eilimintí an-chosúil le súda-aicmí, ach tá difríochtaí eatarthu. Eochairfhocail atá

iontu agus dhá idirstad (::) rompu ar féidir iad a chur ag deireadh roghnóirí chun cuid ar leith

d’eilimint a roghnú.

● ::after

● ::before

● ::first-letter

● ::first-line

● ::selection

● ::backdrop

Bíonn roinnt iompraíochtaí sainiúla agus gnéithe spéisiúla ag baint leo go léir.



Aonaid CSS

● Úsáidtear roinnt aonaid éagsúla in CSS chun fad a léiriú.

● Bíonn luachanna “length” ag dul le go leor airíonna CSS amhail leithead, imeall,

stuáil, clómhéid, etc.

● Is é atá san fhad uimhir agus aonaid faid ina dhiaidh, mar shampla 10px, 2em, etc.

● Ní féidir spás bán a chur idir an uimhir agus an t-aonad. Mar sin féin, is féidir an t-

aonad a fhágáil ar lár má tá an luach cothrom le 0.

● Ceadaítear faid dhiúltacha i gcás airíonna áirithe CSS.

● Is ann do dhá chineál aonad faid: dearbhfhaid agus faid choibhneasta.

Dearbhfhaid

Aonaid sheasta iad aonaid dearbhfhaid. Má léirítear fad in aon cheann de na haonaid sin,

léireofar an fad sin go díreach.

Ní mholtar aonaid dearbhfhaid a úsáid ar an scáileán mar bíonn éagsúlachtaí móra ann idir

scáileáin éagsúla. Mar sin féin, is féidir úsáid a bhaint astu más eol an meán aschuir, mar

shampla do leagan amach clóite.


Aonad Cur Síos

cm ceintiméadair

mm milliméadair

in orlaí (1in = 96px = 2.54cm)

px * picteilíní (1px = 1/96 de 1in)

pt pointí (1pt = 1/72 de 1in)

pc piocaí (1pc = 12 pt)

Faid choibhneasta

Sonraítear le haonaid faid choibhneasta fad i gcoibhneas le hairí faid eile. Is fearr a

thiontaítear aonaid faid choibhneasta ó thaobh scála de idir meáin rindreála éagsúla.

Aonad Cur Síos

em I gcoibhneas le clómhéid na heiliminte (ciallaíonn 2em dhá oiread mhéid na

clófhoirne reatha).

ex I gcoibhneas le x-airde na clófhoirne reatha (is annamh a úsáidtear é seo)

ch I gcoibhneas le leithead an “0” (a náid)

rem I gcoibhneas le clómhéid na fréamheiliminte


vw I gcoibhneas le 1% de leithead an amharcphoirt*

vh I gcoibhneas le 1% d’airde an amharcphoirt*

vmin I gcoibhneas le 1% de thoise is lú an amharcphoirt*

vmax I gcoibhneas le 1% de thoise is mó an amharcphoirt*

% I gcoibhneas leis an máthaireilimint

Machnamh

Déan machnamh ar ar fhoghlaim tú faoi aonaid CSS.



Cascáid

Ag céim áirithe de do chuid oibre, beidh roghnóirí ag rialacha CSS éagsúla a mheaitseálann

an eilimint chéanna. Sna cásanna sin, cé acu de na rialacha CSS a bheidh ceannasach

agus a chuirfear i bhfeidhm ar an eilimint? Meicníocht ar a dtugtar an chascáid a úsáidtear

chun é sin a rialú; agus baineann sé le hoidhreacht freisin (gheobhaidh eilimintí roinnt

luachanna airíonna óna máthaireilimintí, ach ní bhfaighidh siad luachanna eile).

An Chascáid

Giorrúchán is ea CSS a sheasann do stílbhileog chascáideach, rud a léiríonn an tábhacht a

bhaineann le coincheap na cascáide. Ar an leibhéal is bunúsaí, léiríonn sé go bhfuil

tábhacht ag baint le hord rialacha CSS, ach tá sé níos casta ná sin. Na roghnóirí a bheidh

ceannasach sa chascáid, braitheann siad ar thrí thoisc (tugtar iad in ord meáchain – beidh

ceannas ag na chéad tosca ar thosca a thagann ina ndiaidh):

● Tábhacht

● Sainiúlacht

● Ord foinse

Tábhacht

Is ann do mhír chomhréire speisialta in CSS ar féidir í a úsáid le déanamh cinnte go mbeidh

dearbhú áirithe ceannasach ar gach dearbhú eile i gcónaí: !important.



An tsamhail bosca

Tá an tsamhail bosca CSS ar an mbunchloch don leagan amach ar an ngréasán – léirítear

gach eilimint mar bhosca dronuilleogach, agus bíonn inneachar, stuáil, imlíne agus imeall an

bhosca curtha i mullach a chéile mar a bheadh oinniún ann. De réir mar a dhéanann an

brabhsálaí leagan amach an leathanaigh a rindreáil, déanann sé amach cé na stíleanna a

chuirtear i bhfeidhm ar inneachar gach bosca, cé chomh mór is atá na sraitheanna eile den

oinniún, agus cén áit a gcuirtear na boscaí i gcomparáid lena chéile. Ní mór an tsamhail

bosca a thuiscint roimh fhoghlaim conas leaganacha amach CSS a chruthú.

Is féidir féachaint ar gach eilimint HTML mar a bheadh bosca ann. In CSS, úsáidtear an

téarma “samhail bosca” nuair a bhíonn dearadh agus leagan amach i gceist.

Bosca is ea samhail bosca CSS, go bunúsach, a chuirtear timpeall ar gach eilimint HTML.

Cuimsítear leis imill, imlínte, stuáil agus an t-inneachar féin. Léirítear an tsamhail bosca sa

léaráid thíos:

Míniú ar na codanna éagsúla:

● Content (Inneachar) – Inneachar an bhosca ina mbíonn téacs agus íomhánna le

feiceáil.

● Padding (Stuáil) – Glanann an stuáil limistéar timpeall ar an inneachar. Tá an

stuáil trédhearcach.

● Border (Imlíne) – Imlíne a théann timpeall ar an stuáil agus ar an inneachar.


● Margin (Imeall) – Glanann sé limistéar lasmuigh den imlíne. Tá an t-imeall

trédhearcach.

Cuireann an tsamhail bosca ar ár gcumas imlíne a chur timpeall ar eilimintí, agus spás idir

eilimintí a shainiú.


Stíl a chur ar théacs

Faoi mar a chonaic tú i do chuid oibre le HTML agus CSS go dtí seo, déantar téacs laistigh

d’eilimint a leagan amach laistigh de bhosca inneachair na heiliminte sin. Tosaíonn sé ag

barr an limistéir inneachair ar chlé, agus leanann sé ar aghaidh i dtreo dheireadh na líne.

Nuair a bhaintear deireadh na líne amach, leanann sé ar aghaidh ar an gcéad líne eile atá

thíos faoi, agus ar aghaidh ar an gcéad líne eile, go dtí go mbeidh an t-inneachar go léir sa

bhosca. Go bunúsach, láimhseáiltear inneachar téacs mar shraith eilimintí inlíne, leagtha

amach ar línte in aice a chéile, agus gan bristeacha líne a chruthú go dtí go mbaintear

deireadh na líne amach nó mura gcruthaíonn tú briseadh líne de láimh leis an eilimint <br>.

Le dhá chatagóir go hiondúil a bhaineann na hairíonna CSS a úsáidtear chun stíleanna a

chur ar théacs, agus féachfaimid ar gach catagóir léi féin:

Clóstíleanna: Airíonna a théann i bhfeidhm ar an gclófhoireann a chuirtear i

bhfeidhm ar an téacs. Téann siad i bhfeidhm ar an gclófhoireann a úsáidtear, cé

chomh mór is atá an téacs, cibé acu an úsáidtear cló trom, iodálach etc.

Stíleanna leagan amach téacs: Airíonna a théann i bhfeidhm ar an spásáil agus ar

ghnéithe eile de leagan amach an téacs. Ar an gcaoi sin, is féidir, mar shampla, an

spás idir línte agus litreacha a ionramháil agus an chaoi a ndéantar an téacs a ailíniú

laistigh den bhosca inneachair.

Airíonna clófhoirne

Sainítear le hairíonna clófhoirne CSS fine clófhoirne, meáchan, méid, agus stíl téacs.

Airí na fine clófhoirne

Sainítear le hairí na fine clófhoirne an chlófhoireann d’eilimint. Is féidir roinnt ainmneacha

clófhoirne a chur leis an airí mar an dara rogha. Mura dtacaíonn an brabhsálaí leis an gcéad

chlófhoireann, baineann sé triail as an gcéad chlófhoireann eile.


Is ann do dhá chineál ainmneacha fine clófhoirne:

● family-name – ainm fine clófhoirne amhail “times”, “courier”, “arial”, etc.

● generic-family – ainm fine cineálaí, amhail "serif", "sans-serif", "cursive", "fantasy",

"monospace".

Tosaigh leis an gclófhoireann is fearr leat, agus bíodh fine chineálach agat ag an deireadh i

gcónaí. Ar an gcaoi sin, roghnóidh an brabhsálaí clófhoireann chomhchosúil ón bhfine

chineálach mura bhfuil fáil ar aon chlófhoireann eile.

Clóstíl, clómheáchan, aistriú téacs, agus maisiú téacs

Tá ceithre cinn d’airíonna coiteanna in CSS chun meáchan/béim an téacs a athrú ó thaobh

cuma de:

● font-style: Úsáidtear é seo chun cló iodálach a chur ar siúl nó a mhúchadh. Is iad

seo a leanas na luachanna is féidir a úsáid (is annamh a úsáidfidh tú é seo, mura

mian leat stíl iodálach éigin a mhúchadh ar chúis éigin):

o normal: Socraítear an téacs mar an ghnáth-chlófhoireann (baintear an cló

iodálach atá ann cheana féin)

o italic: Socraítear an téacs leis an leagan iodálach den chlófhoireann a úsáid

má bhíonn fáil air; mura bhfuil fáil air, úsáidfear fiarchló chun aithris a

dhéanamh air.

o oblique: Socraítear an téacs chun leagan ionsamhlaithe de chlófhoireann

iodálach a úsáid; cruthaítear an leagan sin tríd an ngnáthleagan a chlaonadh.

● font-weight: Socraíonn sé sin cé chomh trom is atá an téacs. Is iomaí luach is féidir

a úsáid anseo i gcás ina mbíonn go leor leaganacha éagsúla de chlófhoirne ar fáil


(amhail -light, -normal, -bold, -extrabold, -black, etc.), ach is fíorannamh a úsáidfidh

tú rud ar bith seachas normal agus bold:

o normal, bold: Gnáth-chlómheáchan agus clómheáchan trom

o lighter, bolder: Socraítear troime na heiliminte reatha céim amháin níos

éadroime nó níos troime ná troime na máthaireiliminte.

o 100–900: Luachanna uimhriúla don troime lenar féidir rialú níos cruinne a

dhéanamh ar na heochairfhocail thuas, más gá.

● text-transform: Cuireann sé ar do chumas an chlófhoireann a shocrú lena hathrú.

Cuimsítear leis na luachanna sin:

o none: Cuirtear cosc ar athrú ar bith.

o uppercase: Athraítear AN TÉACS GO LÉIR INA GCEANNLITREACHA.

o lowercase: Athraítear an téacs go léir go cás íochtair.

o capitalise: Cuirtear Ceannlitir Ag Tús Gach Aon Fhocail.

o full-width: Athraítear gach glif lena scríobh laistigh de chearnóg ar leithead

seasta, cosúil le clófhoireann monaspáis, rud a fhágann gur féidir, mar

shampla, carachtair Laidineacha a ailíniú le glifeanna i dteangacha Áiseacha

(amhail an tSínis, an tSeapáinis, agus an Chóiréis).

● text-decoration: Socraítear maisiúcháin téacs ar chlófhoirne nó baintear iad

(úsáidfidh tú é seo go príomha chun na folínte réamhshocraithe faoi naisc a bhaint

agus stíleanna a chur i bhfeidhm orthu). Is iad seo a leanas na luachanna atá ar fáil:

o none: baintear gach maisiúchán téacs atá ann cheana féin.

o underline: Cuirtear líne faoin téacs.

o overline: Cuirtear forlíne ar théacs.

o line-through: Cuirtear líne tríd an téacs.

● An t-airí font-size: Socraítear an chlómhéid leis an airí font-size.


Airíonna téacs

An t-airí color

Sonraítear dath an téacs leis an airí color. Úsáid dath cúlra in éineacht le dath téacs a

fhágann gurb éasca an téacs a léamh.

An t-airí text-align

Sonraítear ailíniú cothrománach an téacs in eilimint leis an airí text-align.

An t-airí vertical-align

Socraítear ailíniú ingearach eiliminte leis an airí vertical-align.

Luach Cur Síos

baseline Déantar an eilimint a ailíniú le bonnlíne na máthaireiliminte. Is é seo

an réamhshocrú

length Ardaítear nó íslítear eilimint de réir an fhaid shonraithe. Ceadaítear

luachanna diúltacha.

% Ardaítear nó íslítear eilimint de réir céatadáin den airí “line-height”.

Ceadaítear luachanna diúltacha

sub Déantar an eilimint a ailíniú le bonnlíne foscripte na máthaireiliminte

super Déantar an eilimint a ailíniú le bonnlíne forscripte na máthaireiliminte.


top Déantar an eilimint a ailíniú le barr na heiliminte is airde ar an líne

text-top Déantar an eilimint a ailíniú le barr chlófhoireann na máthaireiliminte

middle Cuirtear an eilimint i lár na máthaireiliminte

bottom Déantar an eilimint a ailíniú leis an eilimint is ísle ar an líne

text-

bottom

Déantar an eilimint a ailíniú le bun chlófhoireann na máthaireiliminte

initial Socraítear an t-airí seo mar a luach réamhshocraithe

inherit Faightear an t-airí le hoidhreacht ón máthaireilimint

Leagan amach téacs

Anois agus na hairíonna bunúsacha téacs as an mbealach, féachaimis ar airíonna is féidir

linn a úsáid chun dul leagan amach an téacs a shocrú.

Ailíniú téacs

Úsáidtear an t-airí text-align chun an chaoi a n-ailínítear téacs laistigh den bhosca inneachair

a rialú. Is iad seo a leanas na luachanna atá ar fáil, agus oibríonn siad ar an gcaoi chéanna,

a bheag nó a mhór, is a oibríonn siad i ngnáthphróiseálaí focal:

o left: Déantar an téacs a ailíniú ar chlé.

o right: Déantar an téacs a ailíniú ar dheis.

o center: Déantar an téacs a lárú.

o justify: Déantar an téacs a chomhfhadú nó a leathnú amach, agus athraítear na

bearnaí idir na focail chun go mbeidh gach líne téacs ar an leithead céanna. Ní

mór a bheith an-chúramach leis sin — d’fhéadfadh droch-chuma a bheith ar

théacs, go háirithe nuair a chuirtear é i bhfeidhm ar mhír ina bhfuil go leor focail

fhada. Má tá sé i gceist agat é a úsáid, ba cheart duit smaoineamh ar rud éigin

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align


eile a úsáid ina theannta, amhail hyphens chun cuid de na focail is faide a

bhriseadh thar línte.

Airde líne

Socraítear leis an airí line-height airde gach líne téacs — is féidir formhór na n-aonad faid

agus méide a úsáid, agus is féidir luach gan aonad a úsáid freisin, rud a fheidhmíonn mar

iolraitheoir agus meastar go ginearálta gurb é sin an rogha is fearr — déantar an font-size a

iolrú chun teacht ar an line-height. Bíonn cuma níos deise ar an gcorpthéacs agus is éasca é

a léamh nuair a bhíonn spás idir na línte; moltar airde líne thart ar 1.5–2 (spásáil dhúbailte) a

úsáid. Mar sin, úsáidfidh tú é seo chun ár línte téacs a shocrú ag 1.5 oiread airde na

clófhoirne:

Machnamh

Déan machnamh ar ar fhoghlaim tú faoi CSS go dtí seo.

Scríobh cúig rud faoi stíleanna a chur ar théacs sa spás thíos:

1.

2.

3.

4.

5.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size

https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size


Stíl a chur ar bhoscaí

Imlíne CSS

Is é is imlíne ann líne a tharraingítear lasmuigh d’eilimintí, LASMUIGH de na himlínte, chun

béim a chur ar an eilimint.

Forbhreathnú ar stíl a chur ar bhoscaí


Tá na hairíonna imlíne seo a leanas le fáil in CSS:

● outline-style

● outline-color

● outline-width

● outline-offset

● outline


Stíl imlíne

Sonraítear leis an airí outline-style stíl na himlíne, agus is féidir ceann de na luachanna seo

a leanas a thabhairt air:

● dotted - imlíne phoncaithe

● dashed - imlíne daiseanna

● solid - imlíne gan bhriseadh

● double - imlíne dhúbailte

● groove - imlíne eitreach 3T

● ridge - imlíne dhroimneach 3T

● inset - imlíne leabaithe 3T

● outset - imlíne neamhleabaithe 3T

● none - gan imlíne ar bith

● hidden - imlíne fholaithe

Léirítear luachanna éagsúla outline-style sa sampla seo a leanas:

Oscail na comhaid thuas (HTML & CSS) san fhillteán atá curtha ar fáil.


Dath imlíne

Úsáidtear an t-airí outline-colour chun dath na himlíne a shocrú.

Is féidir an dath a shocrú mar seo a leanas:

● name - ainm datha, amhail “red”

● RGB - sonraigh luach RGB, amhail "rgb(255,0,0)"

● Hex - sonraigh luach hex, amhail "#ff0000"

● invert - déantar inbhéartú dathanna (rud a fhágann gur féidir an imlíne a

fheiceáil, beag beann ar dhath an chúlra)

Léirítear sa sampla seo a leanas roinnt imlínte éagsúla agus dathanna éagsúla orthu.

Tabhair faoi deara go bhfuil imeall tanaí dubh laistigh den imlíne ag na heilimintí sin freisin:



Leithead imlíne

Sonraítear leis an airí outline-width leithead na himlíne, agus is féidir ceann de na luachanna

seo a leanas a thabhairt air:

● thin (1px go hiondúil)

● medium (3px go hiondúil)

● thick (5px go hiondúil)

● Méid shonrach (in px, pt, cm, em, etc.)

Léirítear sa sampla seo a leanas roinnt imlínte ar leithid éagsúla:



Imlíne – airí gearrscríofa

Airí gearrscríofa atá san airí imlíne chun na hairíonna imlíne aonair seo a shocrú:

● outline-width

● outline-style (riachtanach)

● outline-colour

Sainítear an t-airí imlíne mar luach amháin, dhá luach nó trí luach ón liosta thuas. Is cuma

faoi ord na luachanna.

Léirítear sa sampla seo a leanas roinnt imlínte atá sainithe leis an airí imlíne gearrscríofa:


Seach-chur imlíne

Leis an airí outline-offset, cuirtear spás idir an imlíne agus imeall na heiliminte. Bíonn spás

trédhearcach idir eilimint agus a himlíne.

Sa sampla seo a leanas, sonraítear imlíne 15px lasmuigh den imeall:



Leagan amach CSS

Forbhreathnú ar leagan amach CSS

Cuireann teicnící leagan amach leathanaigh CSS ar ár gcumas eilimintí i leathanach

gréasáin a roghnú agus a suíomh a rialú i gcomparáid lena suíomh réamhshocraithe sa

ghnáthshreabhadh leagan amach, leis na heilimintí eile timpeall orthu, lena máthairárthach,

nó leis an bpríomh-amharcphort/leis an bpríomhfhuinneog.

Bíonn úsáidí, buntáistí agus míbhuntáistí dá cuid féin ag gach teicníc, agus níor ceapadh

teicníc ar bith lena húsáid léi féin. Má thuigeann tú an aidhm atá le gach modh, is fearr a

thuigfidh tú cé acu de na huirlisí leagan amach is mó a oireann do gach tasc.

Gnáthshreabhadh

Is é atá i gceist le gnáthshreabhadh an chaoi a ndéanann an brabhsálaí leathanaigh HTML

a leagan amach de réir an réamhshocraithe nuair nach ndéanann tú rud ar bith chun an

leagan amach a rialú.


Tabhair faoi deara anseo go léirítear an HTML san ord céanna is a léirítear sa chód

foinseach é, leis na heilimintí carntha ar a chéile — an chéad alt, ansin an liosta le hurchair,

ansin an dara halt.

Bloceilimintí a thugtar ar na heilimintí atá le feiceáil ceann faoin gceann eile, i gcomparáid le

heilimintí inlíne atá le feiceáil taobh lena chéile, amhail focail aonair in alt.

Nuair a úsáideann tú CSS chun leagan amach a chruthú, bogann tú na heilimintí ón

ngnáthshreabhadh, ach i gcás cuid mhór de na heilimintí ar an leathanach, cruthófar an

leagan amach atá uait leis an ngnáthshreabhadh. Is é sin an fáth a bhfuil sé an-tábhachtach

tosú amach le doiciméad HTML atá dea-struchtúrtha mar is féidir leat dul ag obair leis an

gcaoi a bhfuil míreanna leagtha amach de réir an réamhshocraithe seachas troid ina

aghaidh.

Is iad seo a leanas na modhanna lenar féidir na heilimintí in CSS a athrú:

● An t-airí taispeána – is féidir le luachanna caighdeánacha

amhail block, inline nó inline-block iompraíocht eilimintí sa ghnáthshreabhadh a

athrú. Ansin is ann do mhodhanna leagan amach iomlái a chuirtear ar siúl le

luach display, mar shampla CSS Grid agus Flexbox.

● Snámháin – Má chuirtear luach float amhail left i bhfeidhm, is féidir eilimintí

blocleibhéil a thimfhilleadh ar thaobh amháin d’eilimint, faoi mar a bhíonn téacs ar

snámh timpeall ar íomhánna i leagan amach irisí.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/float


● An t-airí suímh – cuireann sé ar do chumas suíomh boscaí laistigh de bhoscaí eile a

rialú go cruinn. Is é suíomh static an réamhshocrú sa ghnáthshreabhadh, ach is féidir

leat eilimintí a leagan amach ar bhealach eile ach luachanna eile a úsáid.

● Leagan amach tábla – is féidir gnéithe atá deartha chun stíl a chur ar chodanna de

thábla HTML a úsáid ar eilimintí neamhthábla le display: table agus le hairíonna a

bhaineann leis.

● Leagan amach ilcholúnach – is féidir inneachar bloic a leagan amach i gcolúin, mar

a bheadh i nuachtán, leis na hairíonna leagain amach ilcholúnaigh.

An t-airí taispeána

Cuireann an t-airí seo ar ár gcumas an chaoi a dtaispeántar rud de réir an réamhshocraithe

a athrú. Bíonn luach display le gach rud sa ghnáthshreabhadh, agus úsáidtear é sin mar

iompraíocht réamhshocraithe na n-eilimintí ar a socraítear iad. Mar shampla, léirítear ailt i

mBéarla ceann faoin gceann eile mar gheall go gcuirtear stíl i bhfeidhm orthu le display:

block. Má chruthaíonn tú nasc timpeall ar roinnt téacs laistigh d’ailt, fanann an nasc sin ar

aon líne leis an gcuid eile den téacs, agus ní théann sé ar aghaidh chuig líne eile. Tarlaíonn

sé sin mar go mbíonn an eilimint <a> socraithe mar display: inline de réir an

réamhshocraithe.

Is féidir an iompraíocht réamhshocraithe sin a athrú. Mar shampla, tá an

eilimint <li> socraithe mar display: block de réir an réamhshocraithe, rud a fhágann go

dtaispeántar na míreanna liosta ceann faoin gceann eile inár ndoiciméad Béarla. Má

athraímid an luach taispeána go inline, léirítear in aice a chéile iad, amhail focail in abairt.

Toisc gur féidir leat luach display a athrú le haghaidh gach eiliminte, is féidir eilimintí HTML a

roghnú as a mbrí shéimeantach, agus ní ga a bheith buartha faoin gcuma a bheidh orthu. Is

féidir a gcuma a athrú.

Anuas ar a bheith in ann an cur i láthair réamhshocraithe a athrú trí mhír a athrú ó block go

inline agus a mhalairt, is ann do mhodhanna leagan amach níos mó a thosaíonn amach mar

luach de chuid display. Mar sin féin, nuair a úsáidtear iad sin, is minic a bheidh ort airíonna

breise a ghlaoch. Is iad display: flex agus display: grid an dá luach is tábhachtaí ó thaobh

leagan amach de.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li


Flexbox

Is é Flexbox an t-ainm gearr ar an modúl Flexible Box Layout a bhfuil mar aidhm leis é a

dhéanamh níos éasca orainn nithe a leagan amach in aon toise amháin – mar ró nó mar

cholún. Chun flexbox a úsáid, cuirtear display: flex i bhfeidhm ar mháthaireilimint na n-

eilimintí is mian leat a leagan amach; déantar míreanna flex de gach ceann de na mic

dhíreacha.

Tá eilimint árthaigh sa mharcáil HTML sa sampla thíos, le haicme wrapper, a bhfuil trí

eilimint <div> laistigh díobh. Thaispeánfaí iad sin mar bhloc-eilimintí de réir an

réamhshocraithe, ceann faoin gceann eile, inár ndoiciméad Béarla.

Mar sin féin, má chuirimid display: flex leis an máthaireilimint, socraíonn na trí mhír iad féin i

gcolúin. Déantar amhlaidh mar is míreanna flex anois iad, agus toisc go n-úsáidtear cuid de

na luachanna tosaigh a thugann flexbox orthu. Taispeántar i ró iad, mar gur row atá i luach

tosaigh flex-direction. Dealraíonn sé go bhfuil siad ag síneadh chuig airde na míre is airde,

mar is é stretch luach tosaigh align-items. Ciallaíonn sé sin go síneann na míreanna go

hairde an árthaigh flex; sa chás seo, tá sé sainithe de réir na míre is airde. Cuirtear na

míreanna go léir isteach i líne ag tús an árthaigh, agus is ag deireadh an ró a bhíonn aon

spás breise.

Oscail na comhaid shamplacha Flexbox thuas (HTML & CSS) san fhillteán atá

curtha ar fáil.

Anuas ar na hairíonna thuasluaite ar féidir iad a chur i bhfeidhm ar an árthach flex, is ann

d’airíonna is féidir a chur i bhfeidhm ar na míreanna flex. Is féidir leis na hairíonna sin, i

measc nithe eile, an chaoi a lúbann na míreanna a athrú, rud a chuireann ar a gcumas

fairsingiú agus cúngú chun dul in oiriúint don spás atá ar fáil.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items


Leagan amach greille

Do leagan amach aontoiseach atá flexbox deartha, ach do dhá thoise atá leagan amach

greille deartha — míreanna a chur i línte de réir rónna agus colún.

Arís eile, is féidir leagan amach greille a chur ar siúl le luach taispeána sonrach — display:

grid. Sa sampla thíos, úsáidtear marcáil chomhchosúil leis an sampla flex le hárthach agus

le roinnt mic-eilimintí. Anuas ar display: grid a úsáid, tá roinnt rianta ró agus colún á sainiú

againn ar an máthaireilimint freisin leis na hairíonna grid-template-rows agus grid-template-

columns faoi seach. Tá trí cholún 1fr agus dhá ró 100px sainithe againn. Ní gá aon rialacha

a chur ar mhaceilimintí; cuirtear iad go huathoibríoch sna cealla atá cruthaithe ag an ngreille.

Oscail sampla Ghreille 1 thuas (HTML & CSS) san fhillteán atá curtha ar fáil.

Nuair a bheidh greille agat, is féidir leat míreanna a chur ann go follasach, seachas a bheith

ag brath ar an iompraíocht socraithe uathoibríoch a léirítear thuas. Sa dara sampla thíos, tá

an ghreille chéanna sainithe againn, ach tá trí mhac-mhír ann an uair seo. Shocraíomar líne

thosaigh agus líne dheiridh gach míre leis na hairíonna grid-column agus grid-row. Ar an

gcaoi sin, téann na míreanna thar rianta éagsúla.

Oscail sampla Ghreille 2 thuas (HTML & CSS) san fhillteán atá curtha ar fáil.

Is ann do mhodhanna leagan amach eile nach bhfuil chomh tábhachtach céanna do

phríomhstruchtúir leagan amach an leathanaigh, ach d’fhéadfá iad a úsáid chun tascanna

sonracha a chur i gcrích. Cuimsítear leo sin snámháin agus suí.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row



Dearadh freagrúil gréasáin

Réamhrá

● Beidh cuma dheas ar an leathanach gréasáin ar gach aon ghléas má bhaintear úsáid

as dearadh freagrúil gréasáin.

● Ní úsáidtear ach HTML agus CSS sa dearadh freagrúil gréasáin.

● Ní ríomhchlár ná JavaScript é dearadh freagrúil gréasáin.

An t-eispéireas is fearr do gach aon úsáideoir

Is féidir go leor gléasanna éagsúla a úsáid chun amharc ar shuíomhanna gréasáin: ríomhairí

deisce, táibléid, agus fóin phóca. Ba cheart go mbeadh cuma dheas ar do leathanach

gréasáin, is cuma cén cineál gléis atá in úsáid le hamharc air.

Níor cheart faisnéis a fhágáil ar lár ó leathanaigh ghréasáin do ghléasanna beaga, ba cheart

a n-inneachar a chur in oiriúint chun dul in oiriúint do ghléas ar bith:

Ríomhaire deisce


Táibléad

Fón

Is é is dearadh freagrúil gréasáin ann CSS agus HTML a úsáid chun méid inneachair a

athrú, nó chun inneachar a fholú, a laghdú, a mhéadú nó a bhogadh chun go mbeidh cuma

dheas air ar scáileán ar bith.


Cleachtaí ar leithligh

Faighte ó

Cleachtadh A – Samhail bosca

Tá sraith trí bhosca sa sampla ineagarthóireachta thíos a bhfuil inneachar téacs iontu go léir

agus atá stílithe chun dul thar leithead an choirp go léir. Léirítear iad leis na

heilimintí <header>, <main>, agus <footer> sa mharcáil. Ba cheart duit díriú ar na trí riail

CSS ag an mbun – iad sin atá dírithe ar gach bosca as féin – agus triail a bhaint astu seo a

leanas:

1. Féach ar shamhail bosca gach eiliminte ar leith ar an leathanach trí uirlisí forbróra an

bhrabhsálaí a oscailt agus cliceáil ar na heilimintí sa chigire DOM.

Tá

amharcóir samhla bosca ag gach brabhsálaí a thaispeánann go díreach an t-imeall,

an imlíne agus an stuáil atá i bhfeidhm ar gach bosca, chomh mór is atá an bosca

inneachair, agus an spás iomlán a ghlacann an eilimint.

2. Socraigh margin-bottom éigin ar an eilimint <main>, 20px cuir i gcás. Anois,

socraigh margin-top éigin ar an eilimint <footer>, 15px cuir i gcás. Tabhair faoi

deara nach ndéanann an dara gníomh sin aon difear don leagan amach —

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom


https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer


taispeánann sé sin leacú imill i bhfeidhm; laghdaítear leithead éifeachtach an imill is

lú go 0, agus ní fhágtar ach an t-imeall is mó.

3. Socraigh margin 30px agus padding 30px ar gach aon taobh den eilimint <main> —

tabhair faoi deara an chaoi a méadaítear an spás timpeall ar an eilimint (margin)

agus an spás idir an imlíne agus an t-inneachar (padding), rud a fhágann go bhfuil

spás níos lú á ghlacadh ag an inneachar féin. Arís, seiceáil é sin leis na huirlisí

forbróra sa bhrabhsálaí.

4. Socraigh imlíne níos mó ar gach taobh den eilimint <main>, 40px cuir i gcás, agus

tabhair faoi deara an chaoi a mbaintear spás ón inneachar seachas ón imeall nó ón

stuáil. D’fhéadfá é sin a dhéanamh trí thacar iomlán nua luachanna a shocrú don

leithead, stíl agus dath leis an airí border, e.g. 60px dashed red, ach ó tharla gur

socraíodh na hairíonna i riail eile roimhe sin, d’fhéadfá díreach border-width nua a

shocrú.

5. De réir an réamhshocraithe, tá width an inneachair socraithe mar 100% den spás atá

ar fáil (tar éis don imeall, imlíne agus stuáil a spás féin a ghlacadh) — má athraíonn

tú leithead na fuinneoige brabhsálaí, méadófar nó laghdófar na boscaí chun go

bhfanfaidh siad laistigh den fhuinneog aschuir shamplach. Fillfidh height an

inneachair d’airde an inneachair atá laistigh de.

6. Déan iarracht leithead agus airde nua a shocrú ar an eilimint <main> – tosaigh le

leithead 400px agus airde 200px, mar shampla – agus féach ar an tionchar atá aige.

Feicfidh tú nach n-athraíonn an leithead a thuilleadh nuair a athraítear méid na

fuinneoige brabhsálaí.

7. Déan iarracht anois leithead céatadáin a shocrú ar an eilimint <main> – leithead 60%,

mar shampla – agus féach ar an tionchar atá aige. Feicfidh tú go n-athraíonn an

leithead arís nuair a athraítear méid na fuinneoige brabhsálaí. Bain socrú height na

heiliminte <main> arís go fóill.

8. Déan iarracht stuáil agus imeall na heiliminte <main> a shocrú mar 5% ar gach taobh,

agus féach ar an toradh. Má úsáideann tú uirlisí forbróra an bhrabhsálaí chun

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

https://developer.mozilla.org/en-US/docs/Web/CSS/padding



https://developer.mozilla.org/en-US/docs/Web/CSS/border

https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

https://developer.mozilla.org/en-US/docs/Web/CSS/width

https://developer.mozilla.org/en-US/docs/Web/CSS/height



https://developer.mozilla.org/en-US/docs/Web/CSS/height




féachaint ar leithead na fuinneoige aschuir samplaí agus chun é sin a chur i

gcomparáid le leithead an imill/na stuála, feicfidh tú gurb ionann 5% agus “5% de

leithead na heiliminte árthaigh”. Mar sin, faoi mar a mhéadaítear méid na fuinneoige

aschuir samplaí, méadaítear an stuáil/na himill.

9. Is féidir luachanna diúltacha a thabhairt ar imill, rud is féidir a úsáid chun boscaí

eiliminte a fhorluí ar a chéile. Socraigh margin-top: -50px; ar an eilimint <main> chun

an éifeacht a fheiceáil.

Cleachtadh B – Cleachtadh Cárta Gnó

Tugadh amhchód HTML agus íomhá duit, agus ní mór duit an CSS a scríobh chun iad sin a

dhearadh mar chárta gnó áisiúil ar líne, a bhféadfaí úsáid a bhaint as freisin mar chárta

cluichire nó mar phróifíl ar na meáin shóisialta. Tá cur síos anseo thíos ar a bhfuil le

déanamh agat.

Na chéad chéimeanna:

1. Ar dtús, cruthaigh comhad nua sa chomhadlann chéanna ina bhfuil na comhaid

HTML agus íomhá. Tabhair ainm an-samhlaíoch air, amhail style.css.

2. Déan nasc idir an CSS agus an comhad HTML le heilimint <link>.

3. Tá an chéad dá thacar rialacha le fáil sa chomhad acmhainní, agus is féidir leat úsáid

a bhaint astú SAOR IN AISCE! Údar mór gliondair is ea é sin, agus ba cheart iad a

chóipeáil agus a ghreamú de bharr an chomhaid CSS nua. Úsáid iad mar thriail le

déanamh cinnte go bhfuil an CSS curtha i bhfeidhm i gceart ar an HTML.

4. Os cionn an dá riail sin, cuir isteach nóta tráchta CSS le léiriú gur tacar stíleanna

ginearálta é don leathanach foriomlán. Dhéanfaidh “stíleanna ginearálta leathanaigh”

cúis. Cuir trí nóta tráchta eile ag bun an chomhaid CSS chun stíleanna a bhaineann

go sainiúil le cumraíocht an árthaigh cárta, stíleanna a bhaineann go sainiúil leis an

gceanntásc agus leis an mbuntásc, agus stíleanna a bhaineann go sainiúil le

príomhinneachar an chárta gnó a léiriú. As seo amach, ba cheart stíleanna eile a

chuirtear leis an stílbhileog a eagrú in áit oiriúnach.



5. Déan cúram de na roghnóirí agus na tacair rialacha atá curtha ar fáil sa chomhad

acmhainne CSS.

6. Féach anois ar na ceithre roghnóir agus ríomh an tsainiúlacht le haghaidh gach

ceann díobh. Scríobh síos iad sin áit éigin ar féidir teacht orthu ar ball, amhail i nóta

tráchta ag barr an CSS.

7. Anois, tá sé in am an roghnóir ceart a chur leis an tacar rialacha ceart! Tá ceithre

cinn de roghnóirí agus de thacair rialacha le cur le chéile sna hacmhainní CSS. Déan

anois é sin, agus cuir le do chomhad CSS iad.

Ní mór duit na nithe seo a leanas a dhéanamh:

8. Tabhair leithead/airde sheasta, dath cúlra iomlán, imlíne, agus border-radius (cúinní

cuara!), i measc nithe eile, don phríomhárthach cárta.

9. Tabhair grádán cúlra don cheanntásc a théann ó níos dorcha go níos éadroime, mar

aon le cúinní cuara a thagann le cúinní cuara atá socraithe ar an bpríomhárthach

cárta.

10. Tabhair grádán cúlra don bhuntásc a théann ó níos éadroime go níos dorcha, mar

aon le cúinní cuara a thagann le cúinní cuara atá socraithe ar an bpríomhárthach

cárta.

11. Cuir an íomhá ar snámh ar dheis lena greamú de thaobh na láimhe deise de

phríomhinneachar an chárta gnó, agus tabhair max-height 100% di (is leid mhaith é

sin lena chinntiú go méadófar/laghdófar í chun go bhfanfaidh sí ar an airde chéanna

leis an máthairárthach, is cuma cén airde a thugtar dó sin).

12. Seachain! Tá dhá earráid sna tacair rialacha atá curtha ar fáil. Bain úsáid as teicníc

ar bith atá ar eolas agat chun teacht orthu sin, agus deisigh iad roimh dhul ar

aghaidh.


13. Tacair rialacha nua is gá a scríobh:

a. Scríobh tacar rialacha ina ndírítear ar cheanntásc an chárta agus ar

bhuntásc an chárta, agus tabhair airde iomlán ríofa 50px dóibh araon

(lena n-áirítear airde inneachair 30px agus stuáil 10px ar gach taobh).

Ach léirigh an airde in em.

b. Tiocfaidh an t-imeall réamhshocraithe atá curtha i bhfeidhm ar

eilimintí <h2> agus <p> ag an mbrabhsálaí salach ar ár ndearadh. Mar sin,

scríobh riail ina ndírítear ar na heilimintí sin go léir agus lena socraítear a

n-imeall mar 0.

c. Le cosc a chur ar an íomhá teacht amach as an bpríomhinneachar cárta

gnó (an eilimint <article>), is ga dúinn airde shainiúil a thabhairt di.

Socraigh airde <article> mar 120px, ach léirithe in em. Cuir dath dubh

leath-thrédhearcach ar an gcúlra freisin, rud a fhágann dath beagán níos

dorcha a ligeann do chuid den dath dearg ar an gcúlra teacht tríd freisin.

d. Scríobh tacar rialacha lena dtugtar clómhéid éifeachtach 20px do <h2>

(ach é léirithe in em) mar aon le hairde líne oiriúnach chun é a chur i lár

bhosca inneachair an cheanntáisc. Cuimhnigh ó níos luaithe gur cheart

airde 30px a bheith ar an mbosca inneachair – tugann sé sin na

huimhreacha go léir duit atá ag teastáil chun an airde líne a ríomh.

e. Scríobh tacar rialacha lena dtugtar clómhéid éifeachtach 15px

do <p> laistigh den bhuntásc (ach é léirithe in em) mar aon le hairde líne

oiriúnach chun é a chur i lár bhosca inneachair an bhuntáisc. Cuimhnigh ó

níos luaithe gur cheart airde 30px a bheith ar an mbosca inneachair –

tugann sé sin na huimhreacha go léir duit atá ag teastáil chun an airde

líne a ríomh.

f. Mar dhlaíóg mhullaigh, tabhair luach stuála oiriúnach don alt laistigh

den <article> chun go mbeidh an t-imeall clé ar aon líne leis


an <h2> agus leis an alt buntáisc, agus cuir dath réasúnta éadrom air

chun go mbeidh sé éasca é a léamh.

Obair gharbh.


Cleachtadh C – Leathanach baile pobalscoile a chlóchur

Tugadh amhchód HTML duit le haghaidh leathanach baile scoile samhailtí, mar aon le cód

CSS chun an leathanach a dhearadh i leagan amach dhá cholún, agus tá roinnt stíleáil

bhunúsach eile ann freisin. Ba cheart na rudaí a chuireann tú leis an CSS a scríobh faoin

nóta tráchta ag bun an chomhaid CSS, le déanamh cinnte go bhfuil sé éasca na codanna

atá déanta agat a mharcáil.

Clófhoirne:

● Ar an gcéad dul síos, íoslódáil roinnt clófhoirne atá saor in aisce. Ó tharla gur scoil

atá i gceist, ba cheart na clófhoirne a roghnú chun cuma sách dáiríre, foirmiúil,

iontaofa a thabhairt ar an leathanach – bheadh sé go deas clófhoireann seirife a

roghnú do chorp an téacs ghinearálta ar fud an tsuímh, mar aon le clófhoireann sans

serif nó seirife cearnógaí do na ceannteidil.


● Úsáid seirbhís oiriúnach chun cód @font-face atá saor ó locht a ghiniúint don dá

chlófhoireann sin.

● Cuir clófhoireann an choirp i bhfeidhm ar an leathanach go léir, agus cuir

clófhoireann an cheannteidil i bhfeidhm ar na ceannteidil.

Stíl an téacs ghinearálta:

● Tabhair font-size 10px don leathanach ar fud an tsuímh.

● Tabhair font-size oiriúnach ar na ceannteidil agus ar chineálacha eile eiliminte atá

sainithe le haonad coibhneasta cuí.

● Tabhair line-height oiriúnach don chorpthéacs.

● Déan an ceannteideal barrleibhéil a lárú ar an leathanach.

● Tabhair beagán letter-spacing do na ceannteidil le déanamh cinnte nach bhfuil

siad róbhrúite, agus roinnt spáis a thabhairt do na litreacha.

● Tabhair roinnt letter-spacing agus word-spacing, de réir mar is cuí, don

chorpthéacs.

● Cuir text-indentation, 20px mar shampla, i bhfeidhm ar an gcéad alt tar éis gach

ceannteidil sa <section>.

Naisc:

● Cuir dathanna ar an nasc agus ar na staideanna ‘visited’, ‘focus’ agus ‘hover’ atá ag

teacht le dath na mbarraí cothrománacha ag bun agus ag barr an leathanaigh.

● Bíodh líne faoi na naisc de réir an réamhshocraithe, ach ná feictear an fholíne nuair a

ainlítear nó nuair a dhírítear ar na naisc.

● Bain an imlíne béime de réir an réamhshocraithe ó na naisc GO LÉIR ar an

leathanach.

● Bíodh stíl an-difriúil ar an staid ghníomhach le go seasann sí amach go soiléir, ach

bíodh sí ag teacht le dearadh foriomlán an leathanaigh.

● Bíodh an deilbhín naisc sheachtraigh in aice le naisc sheachtracha.

Liostaí:

● Déan cinnte go dtagann spásáil na liostaí agus na míreanna liosta le chéile le stíl an

leathanaigh fhoriomláin. Ba cheart go mbeadh an line-height céanna le líne ailt ag


gach mír liosta, agus ba cheart an spásáil chéanna leis an spásáil idir ailt a chur ag

bun agus ag barr gach liosta.

● Tabhair urchar deas do na míreanna liosta a thagann le dearadh an leathanaigh.

Fútsa atá sé íomhá urchair shaincheaptha nó rud éigin eile a roghnú.

Roghchlár nascleanúna:

● Cuir stíl ar an roghchlár nascleanúna a thagann le cuma agus éirim an leathanaigh.

Noda agus leideanna

● Ní gá an HTML a chur in eagar ar bhealach ar bith don chleachtadh seo.

● Ní gá duit cuma cnaipí a chur ar an roghchlár nascleanúna, ach ní mór go mbeadh

sé beagán ní b’airde ionas nach mbeadh cuma amaideach air ar thaobh an

leathanaigh. Cuimhnigh freisin gur roghchlár nascleanúna ingearach atá sa roghchlár

seo.

Léirítear sa ghabháil scáileáin thíos an chuma a d’fhéadfadh a bheith ar an dearadh ag an

deireadh:


Obair gharbh.


Cleachtadh D – Páipéar ceannteidil galánta a chruthú


Tugadh duit na comhaid riachtanacha chun teimpléad do pháipéar ceannteidil a chruthú. Níl

le déanamh ach na comhaid a chur le chéile. Chun é sin a dhéanamh, ní mór duit na nithe

seo a leanas a dhéanamh:

An ceannteideal

● Cuir an CSS i bhfeidhm ar an HTML.

● Cuir dearbhú cúlra leis an gceannteideal chun:

● An íomhá ar bharr a ghreamú de bharr an cheannteidil

● An íomhá ar bun a ghreamú de bhun an cheannteidil

● Grádán leath-thrédhearcach a chur thar bharr an dá chúlra a bhí ann roimhe sin chun

uigeacht áirithe a thabhairt don cheannteideal. Bíodh sé beagán dorcha taobh leis an

mbun agus leis an mbarr, ach bíodh sé iomlán trédhearcach i bhformhór an láir.

● Cuir dearbhú cúlra eile chun an íomhá ar bharr a chur le barr an cheannteidil, mar

chúltacaíocht do na brabhsálaithe sin nach dtacaíonn leis an dearbhú thuas.

● Cuir dath bán ar an gcúlra don pháipéar ceannteidil.

● Cuir imlíne leanúnach 1mm ag an mbun agus ag an mbarr i ndath atá ag teacht leis

an gcuid eile den scéim dathanna.

An lógó

● Cuir an lógó leis an <h1> mar íomhá chúlra.

● Cuir scagaire leis an lógó chun cúlscáil fhíneálta a thabhairt dó.

● Anois, déan nóta tráchta den scagaire agus cuir an chúlscáil i bhfeidhm ar bhealach

difriúil (atá beagán níos comhoiriúnaí do bhrabhsálaithe éagsúla), ach lean cruth na

híomhá cruinne i gcónaí.


deireadh:


Obair gharbh.


Cleachtadh E – Bosca galánta


Is é atá le déanamh agat bosca galánta a chruthú agus dul i dtaithí ar an spraoi a bhaineann

le CSS.

Tasc ginearálta

Cuir an CSS i bhfeidhm ar an HTML.

An bosca a dhearadh

Iarraimid ort an <p> atá curtha ar fáil a dhearadh, agus na nithe seo a leanas a chur i

bhfeidhm:

● Leithead réasúnta do chnaipe mór, abair thart ar 200 picteilín.

● Airde réasúnta do chnaipe mór, agus an téacs a lárú go ceartingearach.

● Méadú beag ar an gclómhéid, go dtí thart ar 17-18 bpicteilín i stíl ríomhairithe. Bain

úsáid as aonaid rem. Scríobh nóta tráchta faoin gcaoi ar oibrigh tú amach an luach.

● Bundath don dearadh. Cuir an dath sin ar an mbosca mar an dath cúlra.

● An dath céanna don téacs; bíodh sé inléite le scáil dhubh ar an téacs.

● Ga imlíne réasúnta fíneálta.

● Imlíne leanúnach 1 phicteilín ar a bhfuil dath cosúil leis an mbundath, ach ar imir

beagán níos dorcha.

● Grádán dubh leath-thrédhearcach líneach ag dul i dtreo na cúinne ar dheis ag an

mbun. Bíodh sé iomlán trédhearcach ag an tús, thart ar theimhneacht 0.2 faoi 30%

den fhad, agus ar an dath céanna go dtí an deireadh.

● Roinnt scáthanna bosca. Tabhair scáth bosca caighdeánach amháin dó, rud a

fhágfaidh go mbeidh an chuma ar an mbosca go bhfuil sé ardaithe de bheagán ón

leathanach. Scáthanna bosca leabaithe is ceart a bheith sna scáthanna eile – scáth

bán leath-thrédhearcach gar don chúinne ar chlé ag an mbarr agus scáth dubh leath-

thrédhearcach gar don chúinne ar dheis ag an mbun – chun cur le cuma ardaithe

dheas 3T an bhosca.


deireadh:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p


Cleachtadh F – Leagan amach leathanaigh gréasáin

Tá amhchód HTML, bunchód CSS, agus roinnt íomhánna curtha ar fáil duit, agus ní mór duit

anois leagan amach a chruthú don dearadh. Ba cheart go mbeadh an dearadh ag teacht

lena bhfuil san íomhá thíos.

Na chéad chéimeanna

● Is féidir na comhaid riachtanacha go léir a íoslódáil ón bhfillteán atá curtha ar fáil.

● Sábháil an doiciméad HTML agus an stílbhileog i gcomhadlann ar an ríomhaire, agus

cuir na híomhánna i bhfillteán ar a dtugtar images. Ba cheart go léireofaí leathanach


le stíl bhunúsach gan aon leagan amach dá n-osclófaí an comhad index.html i

mbrabhsálaí, agus ba cheart go mbeadh sé rud beag cosúil leis an íomhá thíos.

● Tá inneachar go léir an leagan amach le fáil ann faoi mar a léirítear sa bhrabhsálaí

sa ghnáthshreabhadh.

Na tascanna atá romhat

Ní mór duit an leagan amach a chur i bhfeidhm anois. Is iad seo a leanas na tascanna atá le

déanamh agat:

1. Na míreanna nascleanúna a thaispeáint i ró, agus an méid céanna spáis ag gach mír

díobh.

2. Ba cheart don bharra nascleanúna scrollú leis an inneachar agus greamú do bharr

an amharcphoirt nuair a bhaineann sé an t-amharcphort amach.

3. Ba cheart go mbeadh téacs timfhillte timpeall ar an íomhá atá laistigh den alt.

4. Ba cheart na heilimintí <article> agus <aside> a léiriú i leagan amach dhá cholún.

Ba cheart go mbeadh na colúin solúbtha, rud a d’fhágfadh go n-éireodh na colúin ní

ba chúinge dá laghdófaí an fhuinneog brabhsálaí.

5. Ba cheart na grianghraif a thaispeáint mar ghreille dhá cholún agus bearna 1

phicteilín idir na híomhánna.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside


Ní gá duit an HTML a chur in eagar chun an leagan amach seo a bhaint amach, agus ba

cheart duit na teicnící seo a leanas a úsáid:

● Suí

● Snámh

● Flexbox

● Leagan amach greille CSS

Obair gharbh.

Úsáid an spás thíos.


Gluais CSS

Féach ar threoir A-Z W3schools ina bhfuil samplaí léirithe:

https://www.w3schools.com/cssref/

https://www.w3schools.com/cssref/



Acmhainní CSS

Bileog aicearra chun boscaí a ailíniú

https://rachelandrew.co.uk/css/cheatsheets/box-alignment

Gach rud atá le foghlaim faoi leagan amach greille CSS

https://gridbyexample.com/

The Experimental Layout Lab

https://labs.jensimmons.com/

Grid by Example – Rachel Andrew

https://www.youtube.com/playlist?list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR

Uirlis CodePen

https://codepen.io

Cleachtaí CSS

https://www.w3schools.com/css/exercise.asp?filename=exercise_margin3

W3 Schools

https://www.w3schools.com/

Mozilla Development

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

Free Code Camp

https://medium.freecodecamp.org/the-css-handbook-a-handy-guide-to-css-for-developers-

b56695917d11

Liosta de na huirlisí agus na hacmhainní ar líne is úsáidí atá ar fáil saor in aisce

d’fhorbróirí gréasáin

https://html-css-js.com/html/links/

Cleachtaí faighte ó W3 Schools, Mozilla Development, Free Code Camp.

https://rachelandrew.co.uk/css/cheatsheets/box-alignment

https://gridbyexample.com/

https://labs.jensimmons.com/

https://www.youtube.com/playlist?list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR

https://codepen.io/

https://www.w3schools.com/

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

https://medium.freecodecamp.org/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11

https://medium.freecodecamp.org/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11


Rannán 5

Dearadh UX


Clár Ábhar

● Dearadh UX 128

o Céard is Dearadh Eispéireas Úsáideoirí ann? o Dearadh UX i gcomparáid le dearadh UI o Céard a chuireann dearthóirí UX faoi chaibidil? o Dearadh bunaithe ar úsáideoirí is ea dearadh UX o An próiseas eispéireas úsáideoirí o Don Norman o Prionsabail deartha Don Norman o Don Norman ag labhairt faoi UX o Jakob Nielsen o 10 heorastaic maidir le hinúsáidteacht le Nielsen o Rialacha Órga Shneiderman o Cleachtadh machnaimh

● Cleachtadh ar leithligh

143

● Acmhainní UX 144

https://www.nngroup.com/people/jakob-nielsen/


Dearadh UX

Céard is Dearadh Eispéireas Úsáideoirí (UX) ann?

De réir Interaction-Design.org, is é atá i gceist le dearadh eispéireas úsáideoirí (UX) an

próiseas a bhaineann le táirgí a chruthú lena soláthraítear eispéiris ábhartha bhríocha

d’úsáideoirí. Cuimsítear leis sin dearadh an phróisis go léir a bhaineann leis an táirge a fháil

agus a chomhtháthú, lena n-áirítear gnéithe de bhrandáil, dearadh, inúsáidteacht, agus

feidhm.


https://www.interaction-design.org/literature/topics/ux-design

UX i gcomparáid le UI

Is minic a úsáidtear “Dearadh Eispéireas Úsáideoirí” i gciall téarmaí eile amhail “Dearadh

Comhéadain Úsáideora” agus “Inúsáidteacht”. Mar sin féin, cé gur gnéithe tábhachtacha de

Dhearadh UX iad Inúsáidteacht agus Dearadh Comhéadain Úsáideora, níl iontu ach

fothacair de – cuimsítear réimse leathan nithe eile le dearadh UX freisin. Bíonn baint ag

dearthóirí UX leis an bpróiseas go léir a bhaineann le táirge a fháil agus a chomhtháthú, lena

n-áirítear gnéithe de bhrandáil, dearadh, inúsáidteacht, agus feidhm. Scéal atá ann a

thosaíonn i bhfad sula bhfaigheann an t-úsáideoir seilbh ar an ngléas.

“Ní fhorbraítear táirge ar bith as féin. Tá níos mó i gceist le táirge ná díreach an táirge féin. Is tacar fuinte comhtháite eispéireas atá ann. Smaoinigh ar na céimeanna go léir a bhaineann le táirge nó le seirbhís – ó na haidhmeanna atá ann i dtosach go dtí an machnamh deiridh, ón gcéad úsáid go dtí feidhmeanna cabhrach, seirbhíse agus cothabhála. Bíodh siad ar fad ag obair le chéile gan stró.” - Don Norman, an té a chum an téarma “Eispéireas Úsáideoirí”

Dá bhrí sin, ní hamháin go ndéantar táirgí lena mbaineann eispéireas iontach úsáideoirí

(iPhone, mar shampla) a dhearadh ag cuimhneamh ar úsáid an táirge sin, ach cuimhnítear

freisin ar an bpróiseas iomlán a bhaineann leis an táirge sin a cheannach, a shealbhú, agus

fiú a fhabhtcheartú. Ar an gcaoi chéanna, ní hamháin go ndíríonn dearthóirí UX ar tháirgí

inúsáidte a chruthú; díríonn siad freisin ar ghnéithe eile an eispéiris úsáideoirí amhail

taitneamh, éifeachtúlacht agus spraoi. Dá bhrí sin, níl ann d’aon sainmhíniú amháin ar a

bhfuil i gceist le heispéireas maith úsáideoirí. Ina áit sin, is é is eispéireas maith úsáideoirí

ann eispéireas a fhreastalaíonn ar riachtanais úsáideora ar leith sa chomhthéacs sainiúil sin.

Céard a chuireann dearthóirí UX faoi chaibidil – cén fáth,

céard agus cén chaoi?

Déanfaidh dearthóir UX úsáid an táirge, agus an chaoi agus an fáth a n-úsáidfear an táirge,

faoi chaibidil. Baineann “cén fáth” leis na cúiseanna a nglactar le táirge, cibé acu ar

cúiseanna iad a bhaineann le tasc is mian le húsáideoirí a dhéanamh leis nó le luachanna

agus dearcthaí a bhaineann le húinéireacht agus le húsáid an táirge. Baineann “céard” leis

na rudaí is féidir le daoine a dhéanamh leis an táirge – feidhmiúlacht an táirge. Ar deireadh,

baineann “cén chaoi” le dearadh feidhmiúlachta inrochtana a bhfuil cuma dheas air.

https://www.interaction-design.org/literature/topics/ux-design


Tosaíonn dearthóirí UX leis an “cén fáth” sula dtéann siad ar aghaidh chuig an “céard”, agus

ansin an “cén chaoi” chun táirgí a chruthú ar féidir le húsáideoirí eispéiris bhríocha a chruthú

leo. I ndearadh bogearraí, ní mór do dhearthóirí a chinntiú go dtagann bunús an táirge chun

cinn trí ghléas atá ann cheana féin agus go soláthraítear leis eispéireas éasca gan uaim.

Dearadh bunaithe ar úsáideoirí is ea dearadh UX

Toisc go gcuimsítear aistear go léir an úsáideora le dearadh UX, is réimse ildisciplíneach atá

ann. Tagann dearthóirí UX ó chúlraí éagsúla amhail dearadh físeach, ríomhchlárú,

síceolaíocht, agus dearadh idirghníomhaíochta. Bíonn scóip níos mó maidir le

hinrochtaineacht riachtanach sa dearadh le haghaidh úsáideoirí ar daoine iad, agus ina

theannta sin is gá freastal ar shrianta fisiciúla a d’fheadfadh a bheith ar úsáideoirí amhail

deacracht le téacs an-bheag a léamh. Bíonn éagsúlacht i gceist le gnáth-thascanna

dearthóra UX, ach is minic a chuimsítear leo taighde a dhéanamh ar úsáideoirí, úsáideoirí

eiseamláireacha a chruthú, sreangfhrámaí agus fréamhshamhlacha idirghníomhacha a

dhearadh, mar aon le dearaí a thástáil. Bíonn éagsúlacht mhór sna tascanna sin idir

cuideachtaí, ach éilítear leo i gcónaí go mbeadh dearthóirí ag tacú le húsáideoirí agus go

mbeadh riachtanais na n-úsáideoirí ag croílár gach iarrachta sa dearadh agus san fhorbairt.

Is é sin an fáth a mbíonn formhór na ndearthóirí UX ag obair i bpróiseas oibre éigin atá

bunaithe ar an úsáideoir, agus go leanann siad dá sár-iarrachtaí go dtí go mbíonn réiteach

faighte acu ar na saincheisteanna ábhartha agus ar na riachtanais úsáideoirí go léir.


Próiseas atriallach is ea dearadh bunaithe ar úsáideoirí ina n-úsáidtear tuiscint ar úsáideoirí

agus ar a gcomhthéacs mar an pointe tosaithe don dearadh agus don fhorbairt go léir.

An próiseas eispéireas úsáideoirí

Is ionann an t-eispéireas úsáideoirí ginearálta go pointe áirithe i bhformhór na gcásanna,

ach mar sin féin ní féidir a rá nach bhfuil ach aon bhealach amháin ann chun go n-éireoidh

leis an táirge. Is amhlaidh atá sé mar go mbíonn go leor tosca seachtracha agus éagsúlacht

mhór tionscadal ann go minic. Mar shampla, bheadh “Tionscadal Suímh Gréasáin” an-difriúil


le “Togra Aipe Móibílí”. Tarlaíonn sé uaireanta go n-iarrann úinéirí táirge cruthúnas

coincheapa nó leagan béite i dtosach, agus go dteastaíonn uathu ansin féachaint ar

mheastacháin agus ar an gcaoi le tabhairt faoin tionscadal.

Céimeanna Robert Dumitru (www.centric.eu)

1 - Sonraí an tionscadail agus cur síos ar an táirge

Cuid an doiciméadúcháin atá sa chéad chéim seo. Ag brath ar an gcás, d’fhéadfadh an

cliant é a dhéanamh nó d’fhéadfaí gurbh iniúchadh ardleibhéil é. Sa chéim seo, sainímid na

pointí láidre, spriocanna an chliaint, agus na hardáin nó aon fhaisnéis ábhartha eile a

bhaineann le forbairt an tionscadail. Is féidir linn dátaí agus amlínte sonracha a shainiú

maidir leis an tionscadal (dáta tosaithe, leagan béite 1.0, cruthúnas coincheapa,

fréamhshamhlacha).

2 - Iniúchadh ar an táirge

Sa chéim seo, is féidir linn plé a dhéanamh ar an bhfaisnéis a fuaireamar ón roinn

margaíochta agus ar an gcaoi ar féidir linn an táirge a chur ar an margadh. Is féidir linn

labhairt ar ghnéithe amhail aois fhéideartha an úsáideora, a stádas airgeadais, eolas ar

chúrsaí TF, agus réimse oibre (bainc, bardas, etc.).

3 - Anailís ar an tionscadal agus cásanna úsáide

Bunaithe ar an bhfaisnéis thuas, is féidir linn cásanna éagsúla a chruthú agus is féidir linn

“úsáideoirí eiseamláireacha” a chruthú – carachtair fhicseanacha a d’fhéadfadh an táirge a

úsáid (mar shampla bainisteoir, fostaí, úsáideoir nua, lucht riaracháin, etc.).


4 - Coincheap

Nuair a bhíonn an pacáiste réidh, is é an chéad chéim eile ailtireacht na haipe, nó mapa

suímh mar is fearr a thabhairt air, a chruthú. Bunaithe air sin, is féidir linn tosú ar na

sreangfhrámaí a sceitseáil chun léiriú níos fearr a thabhairt ar fheidhmiúlacht agus ar

chomhpháirteanna na haipe (na rudaí is féidir linn a chur ar leathanach ar leith)

5 - Fréamhshamhlacha

Anois is féidir linn tosú ar fhréamhshamhail a thosú bunaithe ar na sreangfhrámaí, ionas gur

féidir linn sreabhadh deas a thabhairt don aip. Ba cheart gur shamhail inchliceáilte atá inti,

agus ba cheart di aithris a dhéanamh ar an bhfeidhmiúlacht ghinearálta. Is céim an-

tábhachtach é seo do dhearthóirí UI/UX a roghnaíonn gan bacadh le UX agus dul díreach

chuig an gcéim UI. Éiríonn leo uaireanta dul i bhfeidhm go mór ar an gcliant, ach beidh

tionchar diúltach aige sin ar an bpróiseas agus cuirfidh sé moill air.

6 - Gnéithe amhairc

Tar éis dúinn teacht ar chomhaontú maidir leis an bhfréamhshamhail agus leis an

bhfeidhmiúlacht, is féidir linn bogadh ar aghaidh chuig céim an chomhéadain úsáideora. Is

éasca é sin a dhéanamh mar tá fréamhshamhail againn cheana féin. Is féidir an chuid

ealaíne a dhéanamh le haistrithe agus le beochaintí, ach freisin le cur chuige dearaidh

comhaontaithe (Material, iOS, dearadh leata, nó meascán díobh).

7 - An coincheap a thástáil agus a bhailíochtú

Fiú má cheapann tú gur rud é a bhaineann le dearthóirí, mar gheall ar na cásanna a

phléamar thuas, bíonn ar an dearthóir a bheith ina thástálaí freisin (ó thaobh feidhmiúlachta

agus feidhmiú de).

Ar deireadh, d’fhéadfadh athrú teacht ar an bplean beag sin ag brath ar chéim agus ar staid

an tionscadail. Is iomaí cás atá ann ina bhfuil an tionscadal tosaithe cheana féin agus nach

bhfuil ag teastáil ach athdhearadh nó athchóiriú, mar aon le cásanna inar theip ar an

tionscadal uair amháin, agus cásanna ina bhfuil go leor srianta orainn (am, airgeadas, etc.).

Ina theannta sin, d’fhéadfadh tionchar mór a bheith ag coincheapa amhail Scrum/Kanban,

Agile/Waterfall.

Don Norman


Údar The Design of Everyday Things, leabhar cinniúnach, agus ba é a cheap an téarma

“eispéireas úsáideoirí” sna laethanta luatha in Apple. Ainmníodh Don Norman mar ghúrú na

teicneolaíochta inoibrithe in Newsweek.

Prionsabail Dearaidh Don Norman

In The Design of Everyday Things, leabhar ceannródaíoch Don Norman, a luaitear na

prionsabail seo.

Infheictheacht

Dá infheicthe is atá na feidhmeanna, is ea is dóichí go dtuigfeadh na húsáideoirí an chéad

chéim eile. I gcomparáid leis sin, nuair nach mbíonn feidhmeanna le feiceáil, is deacra

teacht orthu agus iad a thuiscint.

Aiseolas


Baineann aiseolas le faisnéis a sheoladh ar ais faoi ghníomh a rinneadh agus faoinar

baineadh amach, rud a chuireann ar chumas an duine leanúint leis an ngníomhaíocht. Bíonn

cineálacha éagsúla aiseolais le fáil don dearadh idirghníomhach – aiseolais fuaime,

tadhlach, ó bhéal, agus meascáin díobh sin.

Iallaigh

Tagraíonn coincheap na n-iallach sa dearadh do bhealaí a chinneadh chun srian a chur ar

an gcineál idirghníomhaíochta úsáideoirí is féidir a dhéanamh ag céim ar leith. Is iomaí

bealach inar féidir é sin a bhaint amach.

Mapáil

Tagraíonn sé sin don ghaol idir rialtáin agus a n-éifeachtaí sa saol mór. Bíonn mapáil de

shaghas éigin idir rialtáin agus éifeachtaí ag teastáil i gcás gach cineáil déantán, nach mór,

is cuma an tóirse, gluaisteán, gléasra cumhachta, nó cró píolótaíochta atá ann. Sampla de

mhapáil mhaith idir rialtán agus éifeacht is ea na saigheada suas agus síos ar mhéarchlár

ríomhaire a úsáidtear chun an cúrsóir a bhogadh suas agus síos ar an scáileán.

Comhsheasmhacht

Tagraíonn comhsheasmhacht do chomhéadain a dhearadh le haghaidh oibríochtaí

comhchosúla agus eilimintí comhchosúla a úsáid chun tascanna comhchosúla a bhaint

amach. Go háirithe, cloíonn comhéadan comhsheasmhach le rialacha, mar shampla an

oibríocht chéanna a úsáid chun gach oibiacht a roghnú. Mar shampla, úsáideann oibríocht

chomhsheasmhach an gníomh ionchuir céanna chun aon oibiacht ghrafach sa chomhéadan

a aibhsiú, amhail cliceáil i gcónaí ar an gcnaipe luiche ar chlé. Ar an taobh eile den scéal,

ceadaítear eisceachtaí ar riail i gcomhéadain neamhsheasmhacha.

Acmhainneacht

Téarma a úsáidtear chun tagairt do thréith ruda lena gcuirtear ar chumas daoine a thuiscint

conas í a úsáid. Mar shampla, is léir gur cheart brú ar chnaipe luiche (agus, ar an gcaoi sin,

cliceáil air) sa chaoi ina bhfuil sé curtha ar fáil ar an luchóg phlaisteach. Ar leibhéal an-

simplí, is é atá i gceist leis leid a thabhairt (Norman, 1988). Nuair is léir acmhainneacht ruda

fhisiciúil, is éasca a thuiscint conas idirghníomhú leis an rud sin.


Don Norman ag labhairt faoi UX

https://www.youtube.com/watch?v=9BdtGjoIN4E

Jakob Nielsen

Údar an tseicliosta chlasaicigh ar an inúsáidteacht, Ten Usability Heuristics, agus cosantóir

luath de thástáil inúsáidteachta, ainmníodh Jakob Nielsen mar ghúrú na leathanach gréasáin

inúsáidte in The New York Times.

Deich gcinn de heorastaic ar an inúsáidteacht don dearadh

comhéadain úsáideora

“Na deich bprionsabal is ginearálta don dearadh idirghníomhaíochta. Tugtar heorastaic orthu

mar is treoracha ginearálta iad seachas treoirlínte sonracha ar an inúsáidteacht.”

https://www.youtube.com/watch?v=9BdtGjoIN4E

https://www.nngroup.com/people/jakob-nielsen/


Tá siad seo ar cheann den heorastaic is mó a úsáidtear le haghaidh Dearadh Comhéadain

Úsáideora. Jakob Nielsen a d’fhorbair iad in éineacht le Rolf Molich go luath sna 1990idí.

D’fhoilsigh Nielsen an tsraith dheiridh, atá le feiceáil anseo, in 1994.

Tugtar míniú níos doimhne ar an heorastaic san fhíseán seo.

https://youtu.be/hWc0Fd2AS3s

Infheictheacht stádas an chórais

Ba cheart don chóras úsáideoirí a choinneáil ar an eolas i gcónaí ar a bhfuil ar siúl, trí

aiseolas cuí laistigh de thréimhse réasúnta ama.

Léigh an t-alt iomlán ag https://www.nngroup.com/articles/visibility-system-status/

Comhoiriúnú idir an córas agus an saol nithiúil

Ba cheart teanga shothuigthe a úsáid sa chóras, lena n-áirítear focail, frásaí agus

coincheapa a thuigeann an t-úsáideoir seachas téarmaí atá dírithe ar an gcóras féin. Lean

cleachtais an tsaoil nithiúil, agus cuir faisnéis i láthair in ord nádúrtha loighciúil.

Léigh an t-alt iomlán ag https://www.nngroup.com/articles/match-system-real-world/


Rialú úsáideoirí agus saoirse

Is minic a roghnaíonn úsáideoirí feidhmeanna an chórais trí thimpiste, agus beidh “bealach

éalaithe” atá marcáilte go soiléir ag teastáil uathu chun éalú ón bhfeidhm sin nach

dteastaíonn uathu gan dul trí dhialóg fhada. Ba cheart tacú le cealú agus le hathdhéanamh.

Comhsheasmhacht agus caighdeáin

Níor cheart go mbeadh amhras ar úsáideoirí an bhfuil an rud céanna i gceist le focail,

cásanna nó gníomhartha éagsúla. Lean cleachtais ardáin.

Earráidí a sheachaint

Rud atá níos fearr fós ná teachtaireachtaí earráide maithe is ea dearadh cúramach trína

gcuirtear cosc ar fhadhb ag teacht chun cinn. Faigh réidh le staideanna ina dtagann earráidí

chun cinn nó seiceáil lena n-aghaidh agus tabhair rogha dheimhnithe d’úsáideoirí roimh an

ngníomh a dhéanamh.

Léigh an t-alt iomlán ag https://www.nngroup.com/articles/slips/

Aithint seachas cuimhne

Laghdaigh an méid ar ar gá d’úsáideoirí cuimhneamh trí rudaí, gníomhartha agus roghanna

a dhéanamh infheicthe. Níor cheart go mbeadh ar an úsáideoir cuimhneamh ar fhaisnéis idir

cuid amháin den dialóg agus cuid eile. Ba cheart go mbeadh treoracha chun an córas a

úsáid le feiceáil go soiléir nó ba cheart go mbeifí in ann teacht orthu go héasca nuair is cuí.

Léigh an t-alt iomlán ag https://www.nngroup.com/articles/recognition-and-recall/

Solúbthacht agus éifeachtúlacht úsáide

Is minic a úsáidtear luasairí – nach bhfeiceann an t-úsáideoir úr – chun luas a chur faoin

idirghníomhaíocht don ardúsáideoir, rud a fhágann gur féidir leis an gcóras freastal ar

úsáideoirí a bhfuil go leor taithí acu agus ar úsáideoirí gan mórán taithí. Cuir ar chumas

úsáideoirí gníomhartha minice a chur in oiriúint.

Dearadh aeistéitiúil íostach

https://www.nngroup.com/articles/do-interface-standards-stifle-design-creativity/


Níor cheart go mbeadh faisnéis neamhábhartha ná faisnéis nach gá le fáil i ndialóga. Bíonn

gach mír bhreise faisnéise i ndialóg san iomaíocht leis na míreanna faisnéise ábhartha, agus

laghdaíonn sí chomh hinfheicthe is atá an fhaisnéis ábhartha sin dá réir sin.

Cabhraigh le húsáideoirí earráidí a aithint agus a dhiagnóisiú, agus teacht slán uathu

Ba cheart earráidí teachtaireachta a léiriú i dteanga shoiléir (gan chóid), ba cheart an fhadhb

a léiriú go cruinn iontu, agus ba cheart réiteach a mholadh go dearfach iontu.

Tá treoirlínte eile maidir le teachtaireachtaí earráide le fáil ar

https://www.nngroup.com/articles/error-message-guidelines.

Cabhair agus doiciméadúchán

Cé gur fearr gur féidir an córas a úsáid gan dul i muinín doiciméadúcháin, d’fhéadfaí gur ghá

cabhair agus doiciméadúchán a chur ar fáil. Ba cheart go mbeadh sé éasca rudaí a

chuardach i bhfaisnéis den sórt sin, ba cheart go mbeadh sí dírithe ar thasc an úsáideora,

ba cheart go mbeadh liosta inti de chéimeanna nithiúla atá le glacadh, agus níor cheart go

mbeadh an iomarca faisnéise ann.

Ocht riail órga Shneiderman don dearadh comhéadain

Tá na rialacha órga sin don dearadh comhéadain le fáil sa leabhar Designing the User

Interface a bhfuil Ben Shneiderman ar dhuine de na húdair. Ceapadh ar dtús iad in 1987 ó

thaighde a rinne Shneiderman i réimse na hidirghníomhaíochta idir daoine agus ríomhairí.

Baineann siad le formhór na gcóras idirghníomhach.

Is féidir leis na prionsabail seo cabhrú leat Comhéadan Úsáideoirí dea-dheartha a chruthú,

rud a chuirfeadh le hinúsáidteacht an chórais.

Foinse: Designing the User Interface: Strategies for Effective Human-Computer Interaction

Déan gach iarracht ar mhaithe leis an gcomhsheasmhacht

Ba cheart go n-éileofaí gníomhartha comhsheasmhacha i gcásanna comhchosúla; ba cheart

na téarmaí céanna a úsáid i leideanna, i roghchláir agus ar scáileáin chabhrach; agus ba

cheart orduithe comhsheasmhacha a úsáid ar fud an dearaidh.

http://www.amazon.com/gp/product/0321537351/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0321537351&linkCode=as2&tag=inusabiwetrus-20


Cuir ar chumas úsáideoirí rialta úsáid a bhaint as aicearraí

Faoi mar a théitear i dtaithí ar an úsáid, bíonn fonn ar úsáideoirí an líon idirghníomhaíochtaí

a laghdú agus luas na hidirghníomhaíochta a mhéadú. Bíonn giorrúcháin, eochracha

feidhme, orduithe folaithe, agus acmhainní macra an-chabhrach don úsáideoir oilte.

Tabhair aiseolas cabhrach

Ba cheart go gcuirfí aiseolas córais de shaghas éigin ar fáil tar éis gach gnímh oibreora.

Bíonn freagairt bheag oiriúnach do ghníomhartha minice agus mionghníomhartha, ach ba

cheart go mbeadh an fhreagairt ní ba mhó i gcás gníomhartha neamh-mhinice agus

mórghníomhartha.

Dear an dialóg chun clabhsúr a chur ar fáil

Ba cheart seichimh gníomhartha a eagrú ina ngrúpaí lena mbaineann tús, lár agus deireadh.

Soláthraítear aiseolas cabhrach ag deireadh grúpa gníomhartha, rud a thugann sásamh

d’oibreoirí go bhfuil rud bainte amach acu, faoiseamh, comhartha chun dearmad a

dhéanamh ar phleananna agus roghanna teagmhais, agus léiriú gur féidir ullmhú don chéad

ghrúpa gníomhartha eile.

Cuir láimhseáil earráidí shimplí ar fáil

Nuair is féidir, déan an córas a dhearadh ionas nach féidir leis an úsáideoir earráid mhór a

dhéanamh. Má dhéantar earráid, ba cheart go mbeadh an córas in ann an earráid sin a

bhrath agus meicníochtaí simplí sothuigthe a chur ar fáil chun an earráid a láimhseáil.

Ceadaigh aisiompú éascú gníomhartha

Maolaítear imní leis an ngné sin, mar tuigeann an t-úsáideoir gur féidir earráidí a chur ar

ceal. Ar an gcaoi sin, spreagann sé úsáideoirí triail a bhaint as roghanna nach bhfuil ar eolas

acu. D’fhéadfaí aon ghníomh amháin, iontráil sonraí, nó grúpa iomlán gníomhartha a

aisiompú.

Tacaigh le lócas rialúcháin inmheánach


Teastaíonn go láidir ó oibreoirí ardoilte a bhrath gurb iad atá i gceannas ar an gcóras agus

go bhfreagraíonn an córas ar a ngníomhartha. Dear an córas sa chaoi gurb iad na

húsáideoirí a thionscnaíonn gníomhartha seachas a fhreagraíonn dóibh.

Laghdaigh an méid ar ar gá d’úsáideoirí cuimhneamh sa ghearrthéarma

Mar thoradh ar shrianta ar phróiseáil eolais an duine sa chuimhne ghearrthéarmach, ní mór

taispeáintí a choinneáil simplí, taispeáintí il-leathanach a dhaingniú, minicíocht gluaisne

fuinneog a laghdú, agus am oiliúna imleor a chur ar fáil do chóid, do neamónaic, agus do

sheichimh gníomhartha.

Cleachtadh machnaimh

Déan machnamh ar ar fhoghlaim tú faoi UX.


Gluais UX

Féach ar an ngluais téarmaí ar https://uxmastery.com/resources/glossary/

https://uxmastery.com/resources/glossary/


Cleachtadh ar leithligh

Féach ar chás-staidéar Pol Kuijken maidir le Cleachtadh Dearaidh Google chun réiteach a

fháil ar fhadhb na dídine, cleachtadh a bhí le déanamh aige nuair a bhí sé ag cur isteach ar

phost le Google.

https://medium.com/@polkuijken/pet-adoption-8798b14af117

Ba é seo a leanas an treoir dhearaidh:

Tá na milliúin ainmhithe i ndídean agus i mbailte altrama faoi láthair agus iad ag

fanacht ar a n-uchtú. Dear eispéireas a chabhróidh chun daoine a bhfuil peata nua á

lorg acu agus an peata ceart dóibh a thabhairt le chéile. Cabhraigh le huchtaitheoir

teacht ar pheata oiriúnach dá stíl mhaireachtála, agus cuimhnigh ar thosca amhail

cineál ainmhí, inscne, aois, meon, agus stádas sláinte. Cuir sreabhadh ardleibhéil

agus sreangfhrámaí tacaíochta ar fáil.

https://medium.com/@polkuijken/pet-adoption-8798b14af117


Acmhainní UX

● https://www.interaction-design.org

● https://uxmastery.com

● https://wireframestogo.com/

● https://www.ted.com/talks/don_norman_on_design_and_emotion?language=en

● https://www.youtube.com/watch?v=v6n1i0qojws

● https://www.youtube.com/watch?v=a5KYlHNKQB8

● https://www.youtube.com/watch?v=MELKuexR3sQ

● https://www.springboard.com/blog/ux-design-principles/

● https://asktog.com/atc/principles-of-interaction-design/

● https://www.nngroup.com/

● www.centric.eu

https://uxmastery.com/

https://wireframestogo.com/

https://www.ted.com/talks/don_norman_on_design_and_emotion?language=en

https://www.youtube.com/watch?v=v6n1i0qojws

https://www.youtube.com/watch?v=a5KYlHNKQB8

https://www.youtube.com/watch?v=MELKuexR3sQ

https://www.springboard.com/blog/ux-design-principles/

https://asktog.com/atc/principles-of-interaction-design/

https://www.nngroup.com/


● https://www.immagic.com/eLibrary/ARCHIVES/GENERAL/UXPIN_PL/U141030B.pdf

● https://ddf46429.springboard.com/uploads/resources/1548810145_Ebook__UX_Fun

damentals__Learn_the_Basics_of_IA_UX_and_UI_Design.pdf

● https://medium.com/tag/ux

● https://www.interaction-design.org/courses

● https://www.mockplus.com/blog/post/what-is-interaction-design-and-how-it-works

● https://hackernoon.com/why-ux-design-must-be-the-foundation-of-your-software-

product-f66e431cc7b4

● https://www.nngroup.com/

● https://www.designprinciplesftw.com/collections/don-normans-principles-of-design

● https://badhtml.com/

Samplaí & cleachtadh ar leithligh faighte ó www.interaction-design.org,

www.nngroup.com www.medium.com agus www.centric.eu.

https://www.immagic.com/eLibrary/ARCHIVES/GENERAL/UXPIN_PL/U141030B.pdf

https://ddf46429.springboard.com/uploads/resources/1548810145_Ebook__UX_Fundamentals__Learn_the_Basics_of_IA_UX_and_UI_Design.pdf

https://ddf46429.springboard.com/uploads/resources/1548810145_Ebook__UX_Fundamentals__Learn_the_Basics_of_IA_UX_and_UI_Design.pdf

https://medium.com/tag/ux

https://www.mockplus.com/blog/post/what-is-interaction-design-and-how-it-works

https://hackernoon.com/why-ux-design-must-be-the-foundation-of-your-software-product-f66e431cc7b4

https://hackernoon.com/why-ux-design-must-be-the-foundation-of-your-software-product-f66e431cc7b4

https://badhtml.com/

Documents

2 Scileanna i bhForbairt Gréasáin - COGG · 7 Scileanna i bhForbairt Gréasáin – Cuid A Tús eolais ar HTML An chaoi a n-oibríonn an gréasán Céard a tharlaíonn nuair a fhéachann