1 / 21

HTML

HTML. TERME. Hypertext Markup Language. HTML. die taal wat gebruik word om te beskryf hoe webblaaie behoort te lyk. Markup taal. gebruik markup tags om aan te dui hoe die teks op die webblad geformateer moet word . HTML-markup tags.

denver
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML

  2. TERME Hypertext Markup Language HTML die taal wat gebruik word om te beskryf hoe webblaaie behoort te lyk. Markuptaal gebruik markup tags om aan te dui hoe die teks op die webblad geformateer moet word.

  3. HTML-markup tags • is “sleutelwoorde/letter” met skerppunt-hakies rondom. • dui aan hoe die teks op die webblad geformateer moet word. <i> </i> <html> </html> <hr/> Closing tags Opening tags

  4. ELEMENTS • Tags dui die begin en einde van ‘n element aan: • <title> & </title> is tags, • <title>Sneeuwitjie</title> is ‘n titleelement. • <b>ebbehout</b> is ‘n Bold element. • <h1>Opskrif</h1> is ‘n Heading element. Element= begin tag + inhoud van element + eind tag

  5. Die struktuur van 'n HTML-dokument Die <head>-element Bevat ander elemente wat instruksies aan die webblaaier gee. Ons gaan slegs met die <title>-element binne die <head>-element werk. . Die <title>-element Dit bevat die titel van die webblad wat in die tab van die webblaaier sal verskyn of wanneer die gebruiker die webblad as ’n gunsteling (favourite) stoor. Die <html>- element Al die ander elemente word hierin bevat. Die HTML-element wys waar ’n HTML- dokument begin en waar dit eindig. Die <body>- element Al die teks en prente wat jy op die webblad wil laat verskyn. 5

  6. Die basiese elemente met hulle markup tags (1)

  7. Formateer teks in paragrawe Nested Elements • Jy mag een stel tagsbinne ’n ander stel sit om hulle te kombineer. <b><i> ….</i></b> 7

  8. Formateer teks in paragrawe kan gebruik word om die paragraafdaarnasoos ’n voetnotatelaatlyk. Leëelemente <hr/> - Horisontale lyn <br/> - Line break forseer die volgende sin om op ’n nuwe reël te begin

  9. Die basiese elemente met hulle markup tags (2)

  10. Document Type Declaration vir HTML 5 Om seker te maak dat alle webblaaiers die html taal verstaan want daar is verskillende weergawes. <!DOCTYPE html> <html> <head> <title> Website</title> </head> <body> <p>Hello World</p> </body> </html>

  11. Onthou: • Die begin bladsy van ‘n webtuiste word ALTYD “Index.html” genoem. • Dit dui aan dat die “default” webblad is. • Die web server sal dit vertoon as slegs die domainingetik word omdat die URL nie ‘n lêernaam insluit nie. Jy kan nie Tab in ‘n webblad nie - om spasies tussen teks in een reël te laat moet jy non-breaking spaces gebruik: &nbsp; &nbsp;&nbsp; &nbsp; Elkeen verteenwoordig een spasie.

  12. Nog elements List Bullets: (unordered) <ul> <li>Graad 10</li> <li>Graad 11</li> </ul> • Graad 10 • Graad 11 Genommer : (ordered) <ol> <li>Graad 10</li> <li>Graad 11</li> </ol> Graad 10 Graad 11

  13. ATTRIBUTES Word gebruik om vir die webblaaier te beskryf hoe elemente moet lyk. Attribute is kenmerke of eienskappe van ’n element • <bodybgcolor="Yellow"> Naam van attribuut • Waarde van attribuut • Attribute – geskryf as naam = "waarde“. • Naam en waarde van die attribuut word in die begin‑tag gesit. • Elke attribuut kan net vir sekere elemente gebruik word. • Naam van die attribuut – lei af watter eienskap dit sal verander. • Meer as een attribuut kan vir ʼn element aangedui word.

  14. NOG Attributes <body bgcolor = “yellow” text = “blue”> ??????? </body> <font color = “green” face = “Arial” size = “12” align = “left”> ? </font> <hrcolor = “green” align = “left”width = “left”/> <h2 color = “green” align = “left”> ??? </h2> • <imgsrc="images/logo.jpg“ border = “2” alt = skoolwapen” • width = “200” height = “250” />

  15. Nog elements Link <a> </a> anchor element Die bestemming van die link word in diehref attribute van die tag geplaas. • <a href=”www.google.com”>Google</a> Naam van attribuut • Waarde van attribuut Sigbaar op webblad • <a href="www.google.com">GOOGLE</a> • anchor tag

  16. Link(vervolg) Bestemming is dan ‘n anderwebtuiste • Die link kanabsoluutweessoosbv, • <a href="http://www.htmldog.com">HTML Dog</a> • Of ditkanrelatief  tot die bladsyweessoos ‘n anderwebbladin dieselfdewebtuistebv. • <a href="flyingmoss.html">The miracle of moss in flight</a> • ‘n link kanookgaanna ‘n anderdeel op dieselfdebladsy. • Dit word gedoendeur ‘n boekmerkte skep, bv. • <a name ="moss">Moss</a>of<a name ="moss"> </a> • Die hiperskakel of link watjoudannadaardieboekmerksalneemsal so lyk: • <a href="#moss">Go to moss</a> Soos ‘n boekmerk in Ms Word

  17. Om ‘n prenttegebruik as hiperskakel Vervang die tekswat op die bladsysouverskyn met die link na die prent • <a href=” http://www.htmldog.com”> HTML Dog </a> • <a href=” http://www.htmldog.com”> • <imgsrc = “dog.gif” /> • </a> • <a href= ” http://www.htmldog.com”> • <imgsrc = “dog.gif” border = “0”/> • </a>

  18. Link(vervolg) Gaansaam met hrefattribuut Target attribuut • <a href= ” http://www.htmldog.com”target “_self”>HTML Dog</a> • <a href="flyingmoss.html“ target “_blank”>The miracle of moss in flight</a> • <a name ="moss“> Moss</a>of<a name ="moss“> </a> • <a href="#moss“ target “_blank”> Go to moss </a>

  19. Nog elements Images • Die imgtag word gebruikom ‘n prent in ‘n webbladte sit. • Diesrc attribute sêvir die webblaaierwaarom die prenttekry. • Absoluut: <imgsrc=“http://www.htmldog.com/images/logo.gif “/> • (Verwysna ‘n prent op ‘n anderwebtuiste.) • Relatief: <imgsrc="images/logo.jpg"/> • (Verwysna ‘n prentwat in die Images lêergids is.) • width en height attributes  • alt attribute is die alternatiewebeskrywing. <imgsrc="images/logo.jpg“ alt = “skoolwapen”width = “200”height = “200” align = “center”/>

  20. Nog elements • Table <table> <tr> <th>Row 1, cell 1</th> <th>Row 1, cell 2</th> <th>Row 1, cell 3</th> </tr> <tr> <td>Row 2, cell 1</td> <td>Row 2, cell 2</td> <td>Row 2, cell 3</td> </tr> <tr> <td>Row 3, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3 cell 3</td> </tr> <tr> <td>Row 4, cell 1</td> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table> Die table element word gebruikom ‘n tabelte skep. Dietr element verteenwoordig ‘n ry. Dietd element verteenwoordig ‘n sel. Die tdelement moetomsluit word met trtags. Diethelement verteenwoordig ‘n rywat as opskrifgeformateer word. Die thelement moetomsluit word met tr tags.

  21. Table (vervolg) Attributes <table align = “center” border = “2” bordercolor = “green” bgcolor = “lime” cellpadding = “3” cellspacing = “4” width=“80%”> <tralign = “left” valign = “middle”> <thwidth = “50%” align = “left” valign = “middle”> <td width = “50%” align = “left” valign = “middle”>

More Related