WETWORK

Corlan Adnoddau Arlein Cymraeg


Defnyddio XHTML - Rhan 2: Tagiau Cyffredin

Canllawiau XHTML

Dewiswch un o'r dolenni isod i ddangos y tagiau penodol

Pennawd | Paragraff | Rhestr | Delweddau | Dolen | Angor | Toriad | Llinell

brig

Pennawd

Mae defnydd penawdau yn bwysig iawn ac ni ddylwch ddenyddio tagiau P gyda maint mwy i'w cynrychioli. Yn aml caiff H1 ei ddefnyddio i ddynodi prif deitl y dudalen a H2 i'r brif is-deitl. Mae 'na ysgol o feddwl sy'n dweud ni ddylwch ddefnyddio H1 na H2 ar gyfer unrhyw beth arall. Golyga hyn bod pob prif deitl arall y dudalen y dechrau gydag H3. Yn amlwg nid yw hyn yn mynd i weithio os oes gennych mwy na 4 lefel o benawdau (H3, H4, H5, H6). Er, gyda chyfrwng gweledig fel tudalen gwe, a oes wir angen mwy na 4 lefel o benawdau?

<h3>Teitl<h3>

Teitl H1

Teitl H2

Teitl H3

Teitl H4

Teitl H5
Teitl H6

Gallwch amrywio golwg pob teitl gan ddefnyddio STYLE neu ffeil CSS.


brig
Paragraff

Paragraff, P, yw'r tag sy'n cael ei ddefnyddio gan amlaf mewn tudalennau - dyma bara menyn eich testun i'w ddangos.

<p>Dyma enghraifft o baragraff.</p>

<p>Dyma enghraifft o baragraff arall.</p>

Gallwch amrywio golwg pob paragraff unigol gan ddefnyddio STYLE neu ffeil CSS.


brig
Rhestr

Gall rhestrau fod yn ddi-drefn (pwyntiau bwled), UL neu'n rhifol, OL. Caiff eitmau yn y rhestr eu cwmpasu gan dagiau LI.

<ul>

<li>Dyma eitem 1.</li>

<li>Dyma eitem 2.</li>

<li>Dyma eitem 3.</li>

</ul>

Mae'r uchod yn rhoi:

  • Dyma eitem 1.
  • Dyma eitem 2.
  • Dyma eitem 3.

<ol>

<li>Dyma eitem 1.</li>

<li>Dyma eitem 2.</li>

<li>Dyma eitem 3.</li>

</ol>

Mae'r uchod yn rhoi:

  1. Dyma eitem 1.
  2. Dyma eitem 2.
  3. Dyma eitem 3.

Gallwch amrywio golwg rhestrau unigol gan ddefnyddio STYLE neu ffeil CSS.


brig
Delweddau

IMG, y tag gwag yw'r ffordd o ddangos delwedd ar dudalen we. Nid yw'r dudalen yn cynnwys y ddelwedd ei hunan, ond yn hytrach ma'r tag IMG yn pwyntio at ei gyfeiriad ar y we. Sylwch nid oes tag agor a chau gan hwn - tag "gwag" ydyw.

<img src="http://www.gwefan.com/delweddau/llun.jpg" alt="dyma lun o ddydd llun" title="dyma lun o ddydd llun" />

<img src="/mawrth.jpg" alt="dyma lun o ddydd mawrth" title="dyma lun o ddydd mawrth" />

<img src="mercher.jpg" alt="dyma lun o ddydd mercher" title="dyma lun o ddydd mercher" />


O'r uchod gallwch weld sawl priodoledd. Yr un cyntaf SRC (sef source), yw cyfeiriad y ddelwedd. Mae tri brif batrwm - yr un cyntaf yw delwedd ar wefan arall. Mae'n rhaid cofio gosod 'http://' mewn yn gyntaf neu fydd y porwr yn edrych am ffolder o'r enw 'www.gwefan.com' yn eich gwefan chi. Yr ail un yw cyfeiriad absoliwt, sy'n golygu bod y "/" ar y cychwyn yn cyfeirio at y gwreiddffolder (root). Mae'r trydydd yn gyfeiriad cymharol, sy'n cael ei fesur o gyfeiriad y dudalen. Fel, rheol, dylech ddefnyddio cyfeiriadau absoliwt oherwydd os ydych yn symud eich tudalen, bydd y ddolen dal yn ddilys.

Mae ALT yn gosod disgrifiad testun wrth i'r llygoden symud dros y ddelwedd. Mae hwn yn hollbwysig os yw delweddau wedi'u troi bant neu os ydy rhywun â naw gweledol yn pori'r dudalen (e.e. gyda darllennydd sgrin). Mae TITLE yn ail-adroddiad o ALT. Dwi ddim yn sicr os oes angen hwn ar tag IMG ond rwyf wedi darllen sawl erthygl lle bo hwn yn awgrym cryf.

Mae llwyth o briodoleddau eraill mae modd eu defnyddio, ond gallwch rheoli'r rhain gan ddefnyddio CSS. Y priodoleddau eraill gallwch osod gyda CSS yw WIDTH, HEIGHT, ALIGN a BORDER.


brig
Dolen

Caiff dolenni eu gosod gan y tag A.

<p>Ewch i wefan <a href="http://maes-e.com" title="ewch i faes-e.com" target="_blank">maes-e.com</a> er mwyn darganfod fforymau trafod o safon.</p>

<p>Ewch i <a href="#ul" title="ewch i restrau">ardal y rhestrau.</a></p>


Bydd yr uchod yn edrych fel hyn:

Ewch i wefan maes-e.com er mwyn darganfod fforymau trafod o safon.

Ewch i ardal y rhestrau.


Priodoleddau: HREF - dyma'r cyfeiriad (i ble rydych am fynd). Mae sawl math o batrwm (yn debyg i SRC mewn tag delwedd, IMG. Gallwch ddefnyddio "http://..." i gysylltu â gwefannau allanol. Gallwch ddefnyddio "/..." i greu cysylltiad absoliwt wedi seilio ar y gwreiddffolder. Gallwch ddefnyddio cysylltiad cymharol wedi seilio ar leoliad cymharol y dudalen, e.e. "../../aur.gif" - byddai hyn yn edrych ddau ffolder i fyny am y ffeil 'aur.gif'. Un patrwm ychwanegol yw "#..", dyma'r angor. Gallwch gysylltu dolenni i angorau gan osod '#' o flaen enw'r angor. Mae angorau'n cadw llefydd penodol ar y dudalen. Wrth bwyso dolen ag angor, byddwch yn mynd i le arbennig ar y dudalen.

Caiff TITLE ei ddefnyddio i ddangos testun wrth bod y llygoden yn mynd dros y ddolen.

TARGET yw priodoledd er mwyn diffinio'r ffenestr i ddangos y dudalen newydd ynddi. Mae "_blank" yn golygu dangos y dudalen newydd mewn ffenestr newydd. Caiff tudalennau o wefannau allanol eu dangos fel hyn yn aml. Fel mae'n digwydd, mae ymgyrch i atal hyn. Nid yw agor ffenestri newydd yn cytuno gyda hygyrchedd (accessibility). Yn wir, nid yw DTD XHTML Strict yn cynnal y briodoledd hon bellach (caiff ei edrych fel rhan o broblem fframau dwi'n meddwl). Yn bersonol, dwi'n aml yn gosod y briodoledd TARGET am wefannau allanol. Drwg, ond mae'n rhaid ystyried bydd defnyddwyr yn gadael eich gwefan ac efallai ddim yn dychwelyd os yw'r dudalen allanol yn agor yn yr un ffenestr!


brig
Angor

Caiff angorau eu gosod gan y tag A (fel dolenni).

<a href="#fy_angor_i" title="ewch i'm angor">ewch i'r angor bwysig</a>


...(gweddill y dudalen)...


<a name="fy_angor_i"></a>

Angorau sy'n gyfrifol am weithredu nôl i'r "brig" uwchben.


brig
Toriad

Caiff toriadau (BR) eu defnyddio i osod llinell rhwng brawddegau .

<p>Cafodd y proton newydd ei ffurfio o ddadfeiliad niwtron...</p>


<br />


<img src="/ymbelydredd_beta.png" alt="dyma sut caiff proton ei ffurfio yn ystod ymbelydredd beta" title="dyma sut caiff proton ei ffurfio yn ystod ymbelydredd beta" />


Gwnewch sylwi nid yw gosod bwlch rhwng yr elfennau rydych yn teipio yn trosglwyddo i'r sgrin. Mae HTML ond yn gallu rhoi un bwlch rhwng nodau. Yr unig bryd mae llinell newydd yn cael ei drosglwyddo yw gydag elfen "bloc" newydd. Er, os ydych am ofod arbennig rhwng elfennau, gallwch ddefnyddio CSS (padding a margin).

Caiff toriadau eu defnyddio'n aml er mwyn clirio elfennau "float" - gweler yr adran ar CSS.


brig
Llinell

Caiff llinellau llorweddol eu defnyddio i rhannu tudalen i fyny gan y tag HR.

<p>... a dyna sut gall electron fod mewn dau le ar yr un pryd!</p>


<hr />


<h3>Hydoddiannau Gorddirlawn a Grisialu</h3>

<p>...</p>

Gallwch weld y cod uchod yn cael ei weithredu fel:-

... a dyna sut gall electron fod mewn dau le ar yr un pryd!

Hydoddiannau Gorddirlawn a Grisialu

...

Mae defnydd HR wedi lleihau dros y 10 mlynedd diwethaf, yn bennaf oherwydd dulliau eraill o rhannu'r dudalen i mewn i ardaloedd (gan CSS). Er hyn, mae modd dylunio golwg arbennig i HR hefyd trwy CSS.


Tabl | Ffurflen [adran ffurflenni'n anghyflawn ar hyn o bryd - yn fuan!]

brig
Tabl

Caiff tablau eu defnyddio i gadw data tablaidd! TABLE. Mae'r enghraifft isod yn defnyddio'r tagiau cyffredin ar gyfer tabl syml. Mae tr = 'table row', th = 'table heading', td = 'table data'.

<table>

<tr>

<th>ID<th>

<th>Enw<th>

<th>Cyfenw<th>

<th>Marc<th>

</tr>

<tr>

<td>7<td>

<td>Alan<td>

<td>Davies<td>

<td>43%<td>

</tr>

<tr>

<td>11<td>

<td>Beni<td>

<td>Bach<td>

<td>62%<td>

</tr>

<tr>

<td>21<td>

<td>Delfryn<td>

<td>Evans<td>

<td>86%<td>

</tr>

</table>

Mae'r uchod yn rhoi:

ID Enw Cyfenw Marc
7 Alan Davies 43%
11 Beni Bach 62%
21 Delfryn Evans 86%

Gallwn gynhyrchu tablau ychydig mwy soffistigedig:

<table summary="Dyma dabl arbennig Wetwork">

<caption>Tabl i fod yn falch ohono</caption>

<thead>

<tr>

<th>ID<th>

<th>Enw<th>

<th>Cyfenw<th>

<th>Marc<th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">Dyma waelod<td>

</tr>

</tfoot>

<tbody>

<tr>

<td>11<td>

<td>Beni<td>

<td>Bach<td>

<td>62%<td>

</tr>

<tr>

<td>21<td>

<td>Delfryn<td>

<td>Evans<td>

<td>86%<td>

</tr>

</tbody>

</table>

Dyma'r tabl:

Tabl i fod yn falch ohono
ID Enw Cyfenw Marc
Dyma waelod
11 Beni Bach 62%
21 Delfryn Evans 86%

Mae'r tabl uchod yn cynnwys sawl tag newydd: caption, thead, tbody, tfoot a dwy briodoledd: summary, colspan. Mae'r caption yn gosod pennawd i'r tabl, mae thead, tbody, tfoot yn gosod ardaloedd penodol iddo ac mae summary yn rhoi disgrifiad o'r tabl ar gyfer danllenwyr sgrin ac mae colspan yn cyfuno celloedd.

Priodweddau defnyddiol eraill yw 'width', lle gallwch osod lled arbennig i'r tabl neu'r colofnau (mewn % neu px), e.e.

<table width="90%"> ...

neu

<td width="30"> ...

Efallai eich bod yn siomedig gyda golwg y tablau yn yr enghreifftiau uchod, mae'n rhaid cyfaddef eu bod yn salw. Gallwch eu tacluso gyda rheolau CSS (e.e. border-collapse)- ceisiwch ag osgoi priodoleddau tu fewn i'r tagiau HTML (e.e. border, bgcolor) os oes modd.

Yn y gorffennol cafodd tablau eu defnyddio i greu adeiledd i dudalennau gwe. NI DDYLECH WNEUD HYN!! Os ydych am osod ardaloedd arbennig mewn llefydd arbennig, dylech ddefnyddio CSS. Pam? Er ar yr arwyneb, mae tabl yn edrych yn haws i'w ddefnyddio, mae'n dioddef o sawl anfantais, e.e. y poen enfawr o ail-gynllunio os oes angen newid lleoliad rhyw ardal; y diffyg hygyrchedd (darllenwyr sgrin a phroblemau ail-meintio testun).

Serch hynny, gallaf feddwl am sefyllfa lle bod defnyddio tablau ar gyfer gosod elfennau'n ddefnyddiol iawn ac yn arbed llawer o ffwdan gyda 'floats' - sef ffurflenni.


brig
Ffurflen

Mae ffurflenni, yr elfen form, yn caniatáu data o ddefnyddiwr i gael ei basio o un dudalen i dudalen arall. Nid yw'r adran hon yn mynd i drafod sut i brosesu'r data hwn - gwelwch yr adrannau ar pHp.

Gall ffurflenni ddefnyddio sawl 'widget' i ddal data:

delwedd o widgets ffurflenni

  • textarea ar gyfer darn o destun hir (mwy nag un llinell)
  • fieldset ar gyfer grwpio rhannu o'r ffurflen
  • legend er mwyn rhoi sylw i'r fieldset
  • label ar gyfer darn o destun hir (mwy nag un llinell)
  • input ar gyfer darn o destun hir (mwy nag un llinell)
  • select ar gyfer darn o destun hir (mwy nag un llinell)

Ardaloedd | Steilio

brig
Ardaloedd

Gallwch dorri'r dudalen i fyny mewn i ardaloedd arbennig gan ddefnyddio DIV. Mae DIV yn tag bloc, felly mae'n creu llinell newydd. Ar ben ei hun, nid yw'n gwneud llawer, er wedi'i gyplysu â CSS, mae'n ofnadwy o ddefnyddiol.

<div id="ochr">

<h3>Blog</h3>

<p>Dyma'r blog cyntaf...</p>

</div>

Gan ddefnyddio CSS gall yr holl cynnwys ei osod unrhywle, e.e.


#ochr{

float:right;

width:300px;

border:red 1px solid;

}

Bydd hyn yn creu'r canlynol:

Blog

Dyma'r blog cyntaf


brig
Steilio

Gallwch osod steiliau newydd i ddarnau o baragraff gyda SPAN. Mewn realiti, gallech wneud heb y tag a defnyddio rhywbeth fel EM neu STRONG wedi'u cyplysu gyda phriodoledd CLASS, ond mae SPAN yn safonol ac yn hyblyg.

<p>Pan fydd <span class="pwysig">Cymro</span> yn 'ware'n erbyn Sais, does dim ...</p>

Gan ddefnyddio'r priodoledd CLASS, gallwch osod nifer o steiliau gwahanol i'r testun:


Pan fydd Cymro yn 'ware'n erbyn Sais, does dim ...


Mae'r uchod yn ymddangos fel hyn oherwydd rheolau CSS:


.pwysig{

font-weight:bold;

color:#FF0000;

text-decoration:underline;

}

Bras | Italig | Uwchnod | Isnod

brig
Bras

Gallwch wneud darn o destun ymddangos yn fras gan ddefnyddio'r tagiau STRONG. Peidiwch â defnyddio B - nid yw'n bellach yn ddilys.

<p>Fy enw i yw <strong>LEGION</strong></p>

Mae'r uchod yn rhoi:

Fy enw i yw LEGION


brig
Italig

Gallwch wneud darn o destun ymddangos mewn italig gan ddefnyddio'r tagiau EM. Peidiwch â defnyddio I - nid yw'n bellach yn ddilys.

<p>Beth yw ystyr <em>gerrymandering</em>?</p>

Mae'r uchod yn rhoi:

Beth yw ystyr gerrymandering?


brig
Uwchnod

Os ydych yn ysgrifennu unedau a fformiwlau mathemategol neu gemegol neu am osod cyfeiriad (reference), gallwch ddefnyddio uwchnodau (SUP).

<p>Dyma ïon calsiwm: Ca<sup>2+</sup>.</p>

Mae'r uchod yn rhoi:

Dyma ïon calsiwm: Ca2+.


brig
Isnod

Os ydych yn ysgrifennu unedau a fformiwlau mathemategol neu gemegol, gallwch ddefnyddio isnodau (SUB).

<p>2Na (s) + 2H<sub>2</sub>O (h) -> 2NaOH (d) + H<sub>2</sub> (n)</p>

Mae'r uchod yn rhoi: 2Na (s) + 2H2O (h) -> 2NaOH (d) + H2 (n).

Dylech nodi nid oes modd gosod uwchnod ac isnod o dan ei gilydd, dim ond drws nesaf. Felly ni allwch gynrychioli niwclid yn daclus, e.e. 2311Na. Y rheswm am hyn yw bod angen rhywbeth o'r enw kerning ac nid yw HTML yn dangos cymeriadau yn yr un lleoliad. Un ffordd o gwmpas hyn yw i ddefnyddio CSS i osod offset.


<p>Dyma niwclidau potasiwm: <sup>39</sup> <span class = "kern2"><sub>19</sub></span>K</p>

Dyma'r CSS:

.kern2{

margin-left:-18px;

}

O'r uchod cewch y canlynol, er efallai bydd angen newid 18px i rywbeth arall, dibynnu ar faint eich ffont ac ar sawl rhif sydd ar y gwaelod (isnod):

Dyma niwclidau potasiwm: 39 19K


Acronym | Talfyriad | Dyfyniad Bloc | Adnodd Dyfynnu | Cod | Ffram-i

brig
Acronym

Gallwch osod acronymau i mewn i'ch testun gyda'r tagiau ACRONYM. Un mantais o'r rhain yw eu bod yn caniatáu rhaglenni cyfieithu i'w cyfieithu'n gywir.

<p>A ydych am ddysgu mwy am <acronym lang="en" title="Search Engine Optimization" lang="en" xml:lang="en" >SEO</acronym>?</p>

Gan ddefnyddio'r priodoledd TITLE, gallwch osod y testun llawn sy'n ymddangos wrth i'r lygoden symud drosto. Hefyd bydd darllenwyr sgrîn yn ei ddarllen yn gywir. Dyma'r enghraifft:


A ydych am ddysgu mwy am SEO?


brig
Talfyriad

Gallwch osod talfyriad i mewn i'ch testun gyda'r tagiau ABBR. Un mantais o'r rhain yw eu bod yn caniatáu rhaglenni cyfieithu i'w cyfieithu'n gywir.

<p>A ydych am ddysgu mwy am dalfyriadau mewn Eidaleg, fel <abbr lang="it" xml:lang="it" title="capitolo">cap.</abbr>?</p>

Gan ddefnyddio'r priodoledd TITLE, gallwch osod y testun llawn sy'n ymddangos wrth i'r lygoden symud drosto. Hefyd bydd darllenwyr sgrîn yn ei ddarllen yn gywir. Dyma'r enghraifft:


A ydych am ddysgu mwy am dalfyriadau mewn Eidaleg, fel cap.?


brig
Dyfyniad

Wrth i chi ddyfynnu, gallwch ddefnyddio'r tag BLOCKQUOTE.

<blockquote><p>"Clod i Dduw a Thad ein Harglwydd Iesu Grist! Fe ydy'r Tad sy'n tosturio a'r Duw sy'n cysuro. Mae'n ein cysuro ni yng nghanol ein holl drafferthion, felly dyn ni yn ein tro yn gallu cysuro pobl eraill. Dyn ni'n eu cysuro nhw trwy rannu am y ffordd mae Duw'n ein cysuro ni."</p></blockquote>

Mae'r uchod yn rhoi:

"Clod i Dduw a Thad ein Harglwydd Iesu Grist! Fe ydy'r Tad sy'n tosturio a'r Duw sy'n cysuro. Mae'n ein cysuro ni yng nghanol ein holl drafferthion, felly dyn ni yn ein tro yn gallu cysuro pobl eraill. Dyn ni'n eu cysuro nhw trwy rannu am y ffordd mae Duw'n ein cysuro ni."


Pwysig: gall y BLOCKQUOTE dim ond cynnwys tagiau lefel bloc ac nid testun yn unig. Hynny yw, mae'n rhaid gosod tagiau P a thebyg tu fewn i dag BLOCKQUOTE.

Eto gallwch steilio'r BLOCKQUOTE gyda CSS.


brig
Adnodd Dyfynnu

Ar ô dyfyniad, yn aml bydd adnodd y testun yn cael ei osod. Dylech ddefnyddio CITE ar gyfer teitl y llyfr neu'r darn.

<p>Un o'm hoff ddarnau:</p>

<blockquote><p>"But even as Hoyt screams, he knows that it was not the now-dead Bikura who had condemned him to such pain; the lost tribe of colonists, resurrected by their own cruciforms so many times that they had become idiots, mere vehicles for their own DNA and that of their parasites, had been priests also ... priests of the Shrike."</p></blockquote>

<p><cite>The Fall Of Hyperion</cite> gan Dan Simmons, 1990</p>

Mae'r uchod yn rhoi'r canlynol:

Un o'm hoff ddarnau:

"But even as Hoyt screams, he knows that it was not the now-dead Bikura who had condemned him to such pain; the lost tribe of colonists, resurrected by their own cruciforms so many times that they had become idiots, mere vehicles for their own DNA and that of their parasites, had been priests also ... priests of the Shrike."

The Fall Of Hyperion gan Dan Simmons, 1990


brig
Cod

Mae nifer o wefannau yn cyhoeddu cod (rhaglenni). Dylech ddefnyddio CODE i gympasu hyn. Gall rheolau CSS eich helpu i'w steilio. Dylech ddefnyddio'r rhain pryd bynnag mae newidynnau (variables) yn cael ei osod yn y testun. Wps! Rhaid i mi fynd ati'n syth!

<p>Mae'r newidyn, <code>$_SESSION</code> yn un pwysig iawn mewn <acronym title="Hypertext PreProcessor">PHP</acronym> er mwyn trosglwyddo gwybodaeth o dudalen i dudalen.</p>

Mae'r uchod yn rhoi:

Mae'r newidyn, $_SESSION yn un pwysig iawn mewn PHP er mwyn trosglwyddo gwybodaeth o dudalen i dudalen.


brig
Ffram-i

Mae'r elfen, ffram-i (IFRAME) yn dag rhyfedd iawn. Yn syml, gall ddal unrhyw elfennau eraill, e.e. tudalen o fewn tudalen. Cafodd llawer o ddefnydd ei wneud ohonynt sawl blynedd yn ôl, ond mae widgets (yn aml mewn Ajax) wedi cymryd eu lle erbyn nawr.

<iframe id="fy_ffram" src="http://www.google.co.uk" width="660" height = "400">

</iframe>

Mae'r uchod yn rhoi:

Cliciwch ar yr isod i newid y dudalen yn y ffram-i.

Mae'n bosib y bydd yn rhaid i chi wasgu'r ddolen cyntaf dwywaith.

Hafan | Maes-e | Ysgol Cymer



Dyma'r XHTML/JS i gael hwn i weithio:


<p><a href="#" title="ewch i hafan wetwork" onclick="getElementById('fy_ffram').src = 'index.php';")>Hafan</a> | <a href="#" title="ewch i hafan maes-e" onclick="getElementById('fy_ffram').src = 'http://maes-e.com';")>Maes-e</a> | <a href="#" title="ewch i ysgol cymer" onclick="getElementById('fy_ffram').src = 'http:///www.cymer.org.uk/';")>Ysgol Cymer</a></p>

Efallai ei fod yn amlwg bod hwn yn debyg i ddefnyddio fframau arferol, heb y problemau sydd yn gysylltiedig â nhw. Gall hyn greu system o lwytho gwybodaeth deinamig yn debyg i Ajax.


brig
Gwrthrychau a Mewnosod

Caiff cyfryngau fel fideo a sain eu cynnal gan dagiau OBJECT ac EMBED. Y rheswm bod y ddau yn cael eu defnyddio gyda'i gilydd yw bod rhai hen borwyr ddim yn cynnal naill ai OBJECT neu EMBED. Byddwch wedi gweld cod yn debyg i hyn gyda gwefannau fel YouTube er enghraifft:

<object width="425" height="344">

<param name="movie" value="http://www.youtube.com/v/hZWYwYqbfuM&hl=en&fs=1"></param>

<param name="allowFullScreen" value="true"></param>

<embed src="http://www.youtube.com/v/hZWYwYqbfuM&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>

</object>

Mae'r uchod yn rhoi: