Defnyddio XHTML - Rhan 1: Strwythur
Canllawiau XHTML
- Cyfwyniad
- Rhan 1: Strwythur
- Rhan 2: tagiau cyffredin
Rhannau o'r dudalen 'arferol' a gosodiad
Caiff tudalen we normal ei rhannu i:
DTD(document type declaration)HTML(tag i gwmpasu'r dudalen sy'n defnyddio (X)HTML)HEAD(ardal anweledig sy'n cynnwys priodweddau'r dudalen, cysylltiadau a sgriptiau)BODY(ardal gweledig y dudalen)
Hefyd mae gwybodaeth ychwanegol ar:
DTD Δ
Mae sawl DTD gwahanol a allwch ddefnyddio ond yr un safonol am nawr yw XHTML Transitional 1.0 ac mae'n edrych fel hyn:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
PEIDIWCH Â newid EN i CY nac unrhyw beth arall. Mae 'EN' yn golygu iaith y tagiau, e.e. "<table>". Nid oes tagiau swyddogol ar gael yn y Gymraeg am y rhain eto. I fod yn onest, dwi erioed wedi gweld tagiau mewn ieithoedd eraill - mae bron pawb yn Ewrop yn defnyddio tagiau Saesneg. Serch hynny, os ydych yn defnyddio XML gallwch osod unrhyw enw tu fewn i'r tagiau, ond ysgyfarnog arall yw honno.
HTML Δ
Y cwbl mae hwn yn gwneud yw dweud wrth y porwr lle bo'r (X)HTML yn dechrau a gorffen. Mae'n rhaid i'r tagiau hyn cwmpasu gweddill y dudalen.
<html>
...
</html>
HEAD Δ
Mae'n bosib taw'r adran HEAD yw'r un bwysicaf ar y dudalen. Fama gallwch osod eich steiliau, eich ffeiliau CSS, eich sgriptiau a chysylltiadau i ffeiliau eraill, e.e. RSS. Hefyd mae priodweddau'r dudalen yn cael eu gosod yma, pethau fel pennawd y dudalen, disgrifiad a geiriau allweddol. Yn ogystal â hyn gallwch osod enw'r awdur a chod nodau'r iaith (e.e. utf-8). Mae'r rhain yn bwysig oherwydd gallant gyfeirio corynnod peiriannau chwilio i indecsio'ch tudalennau. Os ydych am ranc uchel mewn Google neu Yahoo, er enghraifft mae hyn yn bwysig. Y term am hwn yw 'SEO'. Dylai'r teitl, disgrifiad a geiriau allweddol adlewyrchu yr hyn sydd ar y dudalen. Yn ogystal â hyn, mae peiriannau chwilio yn cymryd llawer o sylw o'r testun ar y dudalen - felly peidiwch ag anghofio am hyn. Gall tudalennau sydd yn bwrpasol yn cynnwys gwybodaeth ffug neu gamarweiniol yn eu priodweddau gael eu cosbi neu hyd yn oed eu gwahardd gan beiriannau chwilio. Caiff hwn gael ei alw'n rhan o "Black Hat SEO"
<head> ... </head>
Mae gan y tag briodoleddau (attributes) arbennig, e.e. lang, xml:lang, dir. Dylech pob amser osod priodoleddau iaith i'r tag, e.e. lang="cy",xml:lang="cy", dir = "ltr" (sef bod yr iaith yn cael ei hysgrifennu left to right - nid oes angen defnyddio hwn fel rheol oherwydd y gosodiad diofyn yw 'ltr'.)
<head lang="cy" xml:lang="cy"> ... </head>
Os ydym am gynnwys priodweddau'r dudalen, steiliau, ffeiliau CSS neu sgriptiau gallwn wneud y canlynol:
<head lang="cy" xml:lang="cy">
<title>Fy hafan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "description" content = "fy nisgrifiad yma ..." />
<meta name = "keywords" content = "gair1, gair2, gair3 ..." />
<meta name = "author" content = "Alan Davies" />
<style>p{color="red";}</style>
<link href="css/prif.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="js/agor.js"></script>
</head>
BODY Δ
Mae'r tag hwn yn cwmpasu POPETH gweledig. Gall y tag hwn gynnwys priodoleddau fel ID, CLASS a sawl priodoledd javascript fel ONLOAD. Yn bersonol, dwi pob amser yn gosod ID yn hafal i enw'r dudalen neu addasiad ohono. Gall hwn fod yn ddefnyddiol wrth addasu'r cyfeirbar (navbar) gan ddefnyddio PHP, e.e. peidio â dangos y dudalen bresennol ar y cyfeirbar fel dolen. Yn ogystal â hyn, mae modd steilio'r dudalen mewn ffordd unigryw gyda STYLE neu CSS.
<body id="index">
...
</body>
Gosod y dudalen Δ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head lang="cy" xml:lang="cy">
<title>Fy hafan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "description" content = "fy nisgrifiad yma ..." />
<meta name = "keywords" content = "gair1, gair2, gair3 ..." />
<meta name = "http-equiv" content="utf-8" />
<meta name = "author" content = "Alan Davies" />
<style>p{color="red";}</style>
<link href="css/prif.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="js/agor.js"></script>
</head>
<body id="index">
<p>Helo pawb</p>
</body>
</html>
Mewnoliadau Δ
Rydych wedi sylwi o'r uchod bod rhai tagiau â mewnoliad(au) [indents]. Mae hwn yn ffordd safonol o ysgrifennu cod. Mae tagiau sy'n dod tu fewn tagiau eraill 'lefel bloc' fel rheol yn derbyn mewnoliad. Rhai sydd ddim yw HTML, HEAD, BODY. Y prif dagiau bloc yw: DIV, FORM, TABLE, UL, OL, DL, IFRAME, OBJECT, SELECT a FIELDSET. Mae rhai efengylwyr HTML yn mynnu llinell newydd ar gyfer pob priodoledd, dwi ddim yn deall pwrpas hwn, ond digon i ddweud bod sawl camp yn bodoli. Edrychwch ar W3Schools am y ffyrdd safonol.
<form action="form_handler.php" method="post" id="fy_ffurflen" name="fy_ffurflen">
<fieldset>
<legend>Manylion</legend>
<label for="enw">Enw: </label>
<input type="text" name="enw" id="enw" />
<br />
<label for="ffon">Rhif ffôn: </label>
<input type="text" name="ffon" id="ffon" />
<br />
<input type="submit" value="Anfon!" name="hala" id="hala" />
</fieldset>
</form>
Sylwch nid yw'r mewnoliadau (x)html yn trosi i beth sy'n weledig ar y sgrin. Dim ond ar gyfer tacluso'r HTML, felly eich bod yn gallu ei ddarllen yn haws. Dyma yr hyn sy'n ymddangos ar y sgrin:
Sylwch fod golwg gwael ar y ffurflen oherwydd nid oes unrhyw steilio/CSS wedi'u gosod arni.