xhtml - Aariset.com | slideum.com

xhtml - Aariset.com

Transcript xhtml - Aariset.com

HTML

©Reino Aarinen, 2015

XML

XHTML-dokumentti alkaa XML-versiom ää rittelyll ä :

ja XHTML –dokumenttityyppim ää rittelyll ä (seuraava sivu) . N ä m ä m ää rittelyt kertovat Internet-selaimille (browser, navigator, explorer), ett ä kyseess ä on standardi XML dokumentti, mit ä k ä ytetty, mill ä sek ä mist ä standardimerkist öä dokumentissa on XHTML-versiolla dokumentti on kirjoitettu dokumenttityypin m ää rittelyt (DTD) l ö ytyv ä t.

XHTML 1.0/1.1 dokumenttityypit

html

PUBLIC "-//W3C//DTD XHTML 1.0

Strict

//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html

PUBLIC ”-//W3C//DTD XHTML 1.0

Transitional

//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

html

PUBLIC "-//W3C//DTD XHTML 1.0

Frameset

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> //EN"

html

PUBLIC "-//W3C//DTD XHTML

1.1

//EN" "http://www.w3.org/TR/xhtml

/DTD/xhtml

.dtd">

HUOM!

Jokaisella XML dokumentilla täytyy olla juurielementti, jonka sisällä kaikki muut elementit ovat. XHTML:ssä juurielementti on .

Juurielementti ja nimiavaruus

Seuraavaksi dokumentissa määritellään käytettävä (tässä oletus-)

nimiavaruus

, joka ilmoitetaan juurielementissä xmlns (XML name space) -attribuutilla ja sille annettavalla URL-osoitteella. Attribuutti xml:lang puolestaan ilmoittaa, mitä kieltä dokumentin tekstissä käytetään: ...

Juurielementin

sisään kirjoitetaan dokumentin otsikko eli

elementti ja sisältö eli

elementti:

elementin sisään kirjoitetaan koko dokumentin-otsikko, <meta> tietoa dokumentista, sekä sivulla käytettäviä tyylisivuja <style> ja skriptejä <script>. </p> <p><b><body> </b></p> <p>elementin sisään sijoitetaan varsinaiset WWW sivulle </p> <p><b>näkyviin tarkoitetut elementit (ja sisällöt).</b></p> <p>HTML-dokumentissa voi olla vain yksi <head> ja yksi <body> elementti.</p> <a id="p5" href="#"></a> <h3><b>Mallipohja XHTML 1.0 dokumentista:</b></h3> <p><?xml version=”1.0” encoding=”ISO-8859-1”?> <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <</p> <p><b>html</b></p> <p>xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”fi” > <</p> <p><b>head</b></p> <p>> < <</p> <p><b>title</b></p> <p>>Mallisivu

body

> <

>Tässä sitten kappale jotakin tekstiä

XHTML pystyy kaikkeen samaan kuin HTML, ja lisäksi siihen voi helposti upottaa muita XML pohjaisia muotoja kuten SVG-kuvia tai MathML-kaavoja. XHTML saattaa tuntua hankalammalta kuin HTML, koska koodi pitää kirjoittaa tiukempien sääntöjen mukaan eikä virheitä sallita

Mallipohja HTML5-dokumentista:

html

xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”fi” > < <

head

Mallisivu

body

> <

Tässä sitten kappale jotakin tekstiä

http://html5test.com/results/desktop.html

Merkkaussääntöjä

   Elementtien sisältö rajataan tageilla renderoitava sisältö.

Jokaisella tagilla on oltava myös päättävä tagi. Tyhjät elementit merkitään tai .

Elementtien on oltava aidosti sisäkkäin, eli elementin päättävän tagin on oltava saman elementin sisällä kuin aloittava tagi. Tästä seuraa dokumentin puurakenne.

Tagit suositellaan kirjoitettavaksi pienillä kirjaimilla. Joka tapauksessa aloittava ja päättävä tagi on aina kirjoitettava samalla tavalla kuin aloittava tagi.

  Attribuutit kirjoitetaan aloittavaan tagiin toisistaan välilyönnillä erotettuna. Jokaisella attribuutilla on aina oltava arvo, ja se on kirjoitettava normaaleihin lainausmerkkeihin, attribuutti=”arvo”.

Lohkotason elementit

    Lohkotason (block-level) elementit muodostavat kukin oman itsenäisen lohkon tai kappaleen.Elementit erotetaan oletusarvoisesti ympäristöstään tyhjällä rivillä. HUOM! body -elementin sisällä pitäisi aina käyttää vain lohkotason elementtejä.

Tyypillisiä esimerkkejä lohkotason elementeistä ovat otsikot ( h1..h6

), p - elementti, luettelot ( ol, ul, dl ), taulukot ( table ), lomakkeet ( form ) … Lohkotason elementtien sisällä voi olla toisia lohkotason elementtejä (ei kuitenkaan p eikä dt elementtien sisällä). div -elementti kokoaa ja rajaa useamman elementin kokonaisuuden yhdeksi yleensä nimetyksi ( id = ”nimi” ) block-elementiksi

Tekstitason elementit

   Tekstitason (inline-level) elementit voivat sijaita ainoastaan lohkotason elementtien sisällä.

Tyypillisiä esimerkkejä tekstitason eli inline elementeistä on input -elementti, jonka täytyy sijaita lohkotason elementin form strong elementti p tai h1 sisällä, tai esimerkiksi jne. elementin sisällä.

span ( -elementin avulla voi rajata useamman inline elementin kokonaisuuden yhdeksi, yleensä nimetyksi id=”nimi” name=”nimi” ), inline-elementiksi.

Korvattavat elementit

    Korvattaviksi (replaced) elementeiksi kutsutaan elementtejä, jolla merkitään HTML dokumenttiin esimerkiksi ulkoisen (upotettavan) tiedoston paikka.

Tyypillinen esimerkki korvattavaksi tarkoitetusta elementistä on img -elementti, jonka paikalla selain näyttää elementin src -attribuutilla määritellyn kuvan.

Muita tällaisia elementtejä ovat audio, video, object, applet ja embed sekä iframe . Myös lomakkeiden nappulat ( button , radio - ja checkbox , valikot ja menut jne.) ovat periaatteessa tällaisia.

Attribuutit

  Elementtien ominaisuuksia asetetaan, ohjataan tai täsmennetään attribuuteilla.

Attribuutit sijoitetaan elementin aloitustagiin. Attribuutin arvon pitää aina olla ”oikeissa” lainausmerkeissä ( attrNimi = ”attrArvo” ).   Lähes

kaikilla elementeillä on seuraavat attribuutit

:    Ydinattribuutit (core) Kielitukiattribuutit (i18n, internationalization) Tapahtuma-attribuutit (events) Elementeillä on lisäksi omia spesifisiä attribuuttejaan, kuten width, height, align, src, href, border …, joista jotkin voivat olla jopa pakollisia.

Yhteiset attribuutit Ydin- eli core-attribuutit

  id, elementin yksikäsitteinen tunniste title, elementin otsikko   class, välilyönnillä erotettu lista tyyliluokista, johon elementin rajaama alue kuuluu style, elementin yksityinen tyylimäärittely

Kielituki

attribuutit (i18n)

 lang, kielikoodi (IANA)  dir, kirjoitussuunta (rtl tai ltr)

Tapahtuma-attribuutit (events)

onblur onchange onselect onkeypress onkeydown onkeyup onclick ondblclick onmousemove onmouseover onmouseup onmousedown onerror onload, onunload onreset, onsubmit onresize onscroll

xHTML elementit

elementti</h3> <p>  <head> elementti!</p> <p>elementin sisälle kirjoitettava <title> elementti on HTML 4.01:ssä erikoinen elementti: se on ainoa <b>pakollinen</b> <title> elementin sisältö tulee näkyviin selaimen yläpalkkiin. Se toimii myös hakukoneiden antamana otsikkona (linkkinä) dokumenttiin. Siksi sen on syytä olla sivua eli dokumenttia lyhyesti, mutta mahdollisimman tarkasti kuvaava teksti. </p> <a id="p16" href="#"></a> <h3><meta> elementti</h3> <p><head> elementin sisään sijoitetaan myös mahdolliset <meta> elementit. Elementillä voidaan määritellä sivun tekijä, käytetty editori, hakusanoja ja luokitus sivun aihealueesta. Esim.</p> <p><head> ...</p> <p> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> <meta name=”description” content=”Content määrite sisältää lyhyen kuvauksen sivun olennaisimmasta sisällöstä.” /> <meta name=”keywords” content=”hakusanoja, pilkulla, erotettuna” /> <meta name=”author” content=”Reino Aarinen” /> ...</p> <p></head></p> <a id="p17" href="#"></a> <h3><link> ja <style> elementti</h3> <p>    <link> elementti määrittelee yhteyden XHTML-dokumentin ja ulkoisen dokumentin välillä. Selaimissa näistä toteutettu on yleensä vain CSS tyylisivu (stylesheet): <link rel=”stylesheet” type=”text/css” href=”tyyli.css” /> Tyylimääritykset (säännöt) voidaan kirjoittaa myös <style type=”text/css”>Säännöt</style> elementtiin.</p> <p>Molemmat elementit voidaan sijoittaa vain dokumentin voivat sisältää useampia tyylimäärittelyitä.</p> <p><head> elementin sisään. Molempia voi tarvittaessa olla useampia, ja molemmat Jos sama asia tyylitellään kahteen kertaan, viimeisin pätee (Cascading Style Sheets, CSS).</p> <a id="p18" href="#"></a> <h3><script> elementti</h3> <p>  Elementti määrittelee asiakaspäässä (selaimessa) suoritettavan skriptin, yleensä <b>JavaScript</b>. Kieli määritellään type tyyppiattribuuttilla type=”text/javascript” (oletus) .</p> <p>Elementti sisältää skriptin koodin, tai osoittaa ulkoiseen skriptitiedostoon src-attribuutilla src=”skripti.js” <script type=”text/javascript”> JavaScript-koodi </script> <script src=”skripti.js”> </script></p> <a id="p19" href="#"></a> <h3><b>HTML 4.01 ja XHTML rungot</b></h3> <a id="p20" href="#"></a> <h3>Elementtien sisältö</h3> <p>   Elementin sisältö voi olla:  Tyhjä (esim. <br />, <hr />, <img />, <input /> … )    Tekstiä Toisia elementtejä Tekstiä ja toisia elementtejä (mix) Jokaisella elementillä on tasan yksi <b>äitielementti</b>, jonka sisällä se kokonaan on. Saman elementin sisällä olevat lapsielementit ovat sisaruksia (sibling).</p> <p>Elementit sijoittuvat näytölle normaalisti peräkkäin siinä järjestyksessä kuin ne tulevat lähdekoodissa vastaan. Ne asettuvat äitielementtinsä sisällä seuraavaan vapaaseen paikkaan. Jokainen elementti on joko <b>inline</b>- tai <b>block</b>-elementti.</p> <a id="p21" href="#"></a> <h3>Attribuutit</h3> <p>   Elementeillä voi olla lisätietoa attribuuteissa ( ominaisuuksia tai parametreja.</p> <p>nimi=”arvo” pareja aloittavassa tagissa), jotka määrittelevät sisällölle Kaikilla elementeillä on standardiattribuutit, joista tärkeimmät ovat:  id, title, style ja class  tapahtuma-attribuutit (näistä myöhemmin lisää) Jokaisen elementin ympärille voidaan määritellä CSS tyylisivun avulla täyte (padding) ja rajaviiva (border). Lisäksi elementillä voi olla marginaali (margin)sisaruksiinsa.</p> <a id="p22" href="#"></a> <h3><b>Otsikot ja lohkotaso</b></h3> <p><b>html head title meta link style script body h1..h6</b></p> <p><b>p ol tai ul li dl dt dd div</b></p> <p><b>Dokumentin otsikkotiedot</b>. Koskevat koko dokumenttia.</p> <p>Ei renderoida näytölle.</p> <p><b>Dokumentin näkyvä (renderoitu) osa </b>koostuu lohko- eli <b>block</b>-elementeistä ja niiden sisällä olevista lohko- ja <b>inline </b>elementeistä.</p> <p>Tässä ensin <b>lohkotason elementtejä</b>.</p> <a id="p23" href="#"></a> <h3><b>Lohkotaso jatkuu</b></h3> <p><b>body</b></p> <p>jatkuu</p> <p><b>table form caption thead , tbody , tfoot tr th , td</b></p> <p>method=GET|POST action=URL</p> <p><b>input</b></p> <p>type=text|hidden|password|submit|reset| button|checkbox|radio|image|file</p> <p><b>textarea select option optgroup button label fieldset legend</b></p> <a id="p24" href="#"></a> <h3><b>Inline-taso</b></h3> <p><b>Fyysiset tyylit </b></p> <p>tt,i,b,big,small,u,s,strike, font,basefont</p> <p><b>Loogiset tyylit </b></p> <p>em , strong , dfn , code , q , sub , sup , samp , kdb , var , cite , abbr , acronym</p> <p><b>Muut tyylit </b></p> <p>br , span , bdo, ins , del</p> <p><b>Linkit ja ankkurit</b></p> <p>a , nav</p> <p><b>Median upotus </b></p> <p>img, embed, applet, object, iframe, map</p> <a id="p25" href="#"></a> <h3><b>XHTML Strict yhteenveto</b></h3> <p>© Reiska 2015</p> <a id="p26" href="#"></a> <h3><b>XHTML Strict mallipohja</b></h3> <p><b>Seuraavilla sivuilla on luettelo viimeisimmän XHTML 1.0 Strict /XHTML 1.1 version elementeistä:</b></p> <a id="p27" href="#"></a> <h3><b>XHTML 1.0 Strict elementit</b></h3> <p><b>Structure</b></p> <p>html head body div span</p> <p><b>Meta Information</b></p> <p>DOCTYPE title meta link style</p> <p><b>Text</b></p> <p>p h1, h2, h3, h4, h5, h6 strong em abbr address bdo blockquote cite q code ins del dfn kbd pre samp var br</p> <p><b>Links</b></p> <p>a base</p> <a id="p28" href="#"></a> <p><b>Images and Objects</b></p> <p>img map area object param</p> <p><b>Lists</b></p> <p>ul ol li dl dt dd</p> <p><b>Tables</b></p> <p>table tr td th tbody thead tfoot caption col colgroup</p> <p><b>Forms</b></p> <p>form input textarea select option optgroup button label fieldset legend</p> <p><b>Scripting</b></p> <p>script noscript</p> <p><b>Presentational</b></p> <p>b, i, tt, sub, sup, big, small, hr</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com © 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>  <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>