Prev
Viki vietnes		Next
Pielāgotu datu apstrāde

Tīmekļa tehnoloģiju pamati

Lapas saturs

Ieraksts

Tīmekļa adreses papildinājumi

Tīmekļa adreses papildinājumus izmanto, lai nodotu papildu informāciju serverim (ar parametriem) vai arī pārlūkprogrammai (ar enkuriem).
Enkurā norādīto informāciju pārlūkprogramma var izmantot, lai nosūtītu papildu informāciju serverim.

  • Tīmekļa adreses parametri ...?parametrs=vērtība&parametrs2=vērtība2
  • Tīmekļa adreses enkuri    ...#Uz sākumu

Tīmekļa lapu saturs

Tīmekļa lapu saturu apraksta, izmantojot HTML un CSS standartus. HTML nosaka (galvenokārt) lapas saturu, bet CSS tās izskatu, atkarībā no satura iezīmēm. Datu satura aprakstīšanai izmantot arī XML valodu, kurā ir plašas datu struktūras apraksta iespējas, bet, atšķirībā no HTML, nav nekādu uz izskatu attiecināmu iezīmju (piem., <em>, <i>, <b>, <h1> u.t.t.).

HTML

HTML ir valoda, kurā vienkāršā, neformatētā tekstā ar īpašām iezīmēm apraksta, kā to ir nepieciešams noformēt.
Lapas HTML kodu var aplūkot, pārlūkprogrammā spiežot Ctrl+U taustiņus.

Vienkāršs, bet vizuāli bagāts HTML piemērs

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sveiki!</title>
</head>
<body>
<h1>Sveika pasaule!</h1>
Šis ir <i>vienkāršs</i> teksta <b>dokuments</b> ar:
<ul>
<li>hipersaiti uz <a href="http://odo.lv/">odo.lv</a></li>
<li>attēlu<br/><img src="http://odo.lv/xwiki/bin/download/Custom/OdoTheme/logo.png"></li>
<li>video<br/><video width="300" controls="controls" src="http://odo.lv/ftp/lectures/Viki_01.ogv"></video></li>
<li>iframe<br/><iframe width="320" height="195" src="http://www.youtube.com/embed/Mr4dDk9nSag" frameborder="0" allowfullscreen></iframe></li>
</ul>
Tas arī īsumā viss!
</body>
</html>

Parauga failu var lejuplādēt no pielikuma (klikšķiniet uz saites ar labo peles pogu, un izvēlieties Saglabāt kā...)

CSS

CSS ir iezīmju valoda, ar kuru apraksta HTML dokumenta elementu (iezīmju) izskatu.

Augšminētais piemērs, papildināts ar CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sveiki!</title>
<style>
body {font-family:"Times New Roman"; background: #ADA;}
h1 {font-family:"Arial"; color: #ADAADA;}
</style>
</head>
<body>
<h1>Sveika pasaule!</h1>
Šis ir <i>vienkāršs</i> teksta <b>dokuments</b> ar:
<ul>
<li>hipersaiti uz <a href="http://odo.lv/">odo.lv</a></li>
<li>attēlu<br/><img src="http://odo.lv/xwiki/bin/download/Custom/OdoTheme/logo.png"></li>
<li>video<br/><video width="300" controls="controls" src="http://odo.lv/ftp/lectures/Viki_01.ogv"></video></li>
<li>iframe<br/><iframe width="320" height="195" src="http://www.youtube.com/embed/Mr4dDk9nSag" frameborder="0" allowfullscreen></iframe></li>
</ul>
Tas arī īsumā viss!
</body>
</html>

Parauga failu var lejuplādēt no pielikuma (klikšķiniet uz saites ar labo peles pogu, un izvēlieties Saglabāt kā...)

JavaScript

JavaScript ir vadošā programmēšanas valoda dinamiskai tīmekļa lapu uzvedībai.
Informāciju par JavaSript stkatīt http://www.w3schools.com/js/.

Augšminētais piemērs, papildināts ar JavaScript:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sveiki!</title>
<style>
body {font-family:"Times New Roman"; background: #ADA;}
h1 {font-family:"Arial"; color: #ADAADA;}
</style>
</head>
<body>
<script>
alert("Sveicināti!");
</script>
<h1>Sveika pasaule!</h1>
<h1>Sveika pasaule!</h1>
Šis ir <i>vienkāršs</i> teksta <b>dokuments</b> ar:
<ul>
<li>hipersaiti uz <a href="http://odo.lv/">odo.lv</a></li>
<li>attēlu<br/><img src="http://odo.lv/xwiki/bin/download/Custom/OdoTheme/logo.png"></li>
<li>video<br/><video width="300" controls="controls" src="http://odo.lv/ftp/lectures/Viki_01.ogv"></video></li>
<li>iframe<br/><iframe width="320" height="195" src="http://www.youtube.com/embed/Mr4dDk9nSag" frameborder="0" allowfullscreen></iframe></li>
</ul>
Tas arī īsumā viss!
</body>
</html>

Datu pārraide ar HTTP

HTTP standarts nosaka, kā tīmekļa lapas tiek pieprasītas, un kā tiek atgriezts pieprasīto lapu saturs.

GET pieprasījums

Ar GET pieprasījumu serverim papildu informāciju nodod pieprasījuma adresē.
Piemēram, atverot adresi: http://odo.lv/?user=Valdis, parādās apsveikums
Att01.png

Tīmekļa pārlūkprogrammas darbību var atdarināt pats, rakstot komandas ar roku.

  1. Atver termināļa programmu
    1. Windows datorā spiež starta pogu, klikšķina uz Run ievada cmd un spiež Enter
    2. Linux datorā atver termināli

  2. Atvērtajā logā ievada sekojošu pieprasījumu:

    telnet odo.lv 80

    ar šo komandu tiek izveidots savienojums ar serveri odo.lv

  3. Pārliecinās, ka parādās paziņojums

    Trying 92.240.68.210...
    Connected to odo.
    Escape character is '^]'.

  4. Ievada komandu:

    GET / HTTP/1.0

    kur / ir mapes vai faila nosaukums uz servera, divas reizes spiež Enter, lai beigās būtu tukša rinda!

  5. Pārliecinās, ka uz ekrāna parādās pieprasītās adreses lapas saturs HTML formātā.

GET pieprasījums ar parametru

  1. Līdzīgi kā iepriekšējā piemērā, izveido savienojumu ar serveri

  2. Ievada komandu:

    GET /?user=Valdis HTTP/1.0

  3. Pārliecinās, ka servera atgrieztajā HTML kodā ir rinda:

    ...
    <div id="xwikicontent">
    <div class="box plainmessage"><p>Sveiki Valdis!</p>
    ...

POST pieprasījums

  1. Izveido jaunu savienojumu

    telnet odo.lv 80

  2. Kad savienojums ir izveidots, ievada pieprasījumu:

    POST / HTTP/1.0
    Host: odo.lv
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 11

    user=Valdis

    un spiež Enter

    Content-Length ir jābūt norādītam sagaidāmajam simbolu (burtu skaitam)!

Visa informācija, kas turpinās līdz kolam, ir t.s. pieprasījuma hederi. Izmantojot pieprasījuma hederus, pārlūkprogramma var nodod dažādu papildu informāciju.

Sīkfaili

Standarta HTML serveris neko par tīmekļa klientu neatceras. Ja ir nepieciešams atcerēties, serveris klientam nosūta sīkfailu (žargonā kukiju vai "cepumu") un klients to saglabā pie sevis. Pēc tam klients serverim par sevi atgādina, katrā pieprasījumā nosūtot visu saistīto informāciju no sīkfailiem:

https://imgs.xkcd.com/comics/server_attention_span.png

Papildu informācija

https://www.riga.lv/LV/Channels/About_Riga/Kaleidoscope/talmaciba.htm skatīt "Mājas lapu veidošana"

Prev
Viki vietnes		Next
Pielāgotu datu apstrāde

Created by Valdis Vītoliņš on 2013-07-31 12:28
Last modified by Valdis Vītoliņš on 2016-04-02 12:06
 
Xwiki Powered
Creative Commons Attribution 3.0 Unported License