Formatering

Jy kan jou inhoud met verskillende HTML elemente vertoon. Ons sal in die kursus deeglik aandag hieraan gee.

Basiese HTML Elemente

Die <p> element skep ‘n nuwe paragraaf. Dit het spasies voor en na die paragraaf. Om ‘n skakel te maak, gebruik ‘n mens die <a> element.

Teks Semantiek

italics = <em>text</em>

bold = <strong>text</strong>

~~deleted text~~ = <del>text</del>

inserted text = <ins>text</ins>

abbreviations = <abbr title=”Full text for the abbreviation”>abbreviation</abbr>

definitions = <dfn title=”Full text for the definition”>definition</dfn>

Aanhalings en Kodes

Inline quotations = <q>Quotation text</q>

Longer quotations = <blockquote>Quotation text</blockquote>

short inline computer code = <code>code</code>

larger code snippet = <pre>code</pre>

side comments and small print = <small>text</small>

CSS Classes wat jy kan gebruik

Highlight Inhoud

Drop caps = <p class=”dropcap”>Drop caps</p>

small boxes = <em class=”box”>small boxes</em>

box-content = <div class=”box-content”>text</div>

box-note = <div class=”box-note”>text</div>

box-info = <div class=”box-info”>text</div>

box-warning = <div class=”box-warning”>text</div>

box-hint = <div class=”box-hint”>text</div>

box-download = <div class=”box-download”>text</div>

horizontal rule = <hr />

dotted horizontal rule = <hr class=”dotted” />

Definition Lists

Dit lyk as volg:

Definition List One: definition description one
Definition List Two: definition description two – this description can wrap to several extra lines to fit in beautifully with the tabbed format that definition lists provides
Definition List Three: definition description three; definition description three – extra line

Dit word as volg in html gekodeer:

<dl class="separator"> <dt>Definition List One</dt> <dd>definition description one</dd> <dt>Definition List Two</dt>

<dd>definition description two - this description can wrap to several extra lines to fit in beautifully with the tabbed format that definition lists provides</dd>

<dt>Definition List Three</dt> <dd>definition description three</dd> <dd>definition description three - extra line</dd> </dl>