Programozás 2 HTML és CSS
Az Internet programozása I. utolsó változtatás 2008.04.27.
Internet
Sok millió kisebb (akadémiai, üzleti, kormányzati és magán) hálózat összekapcsolt világmératű nyilvánosan hozzáférhető hálózata. Hálózat: fizikai adathordozókkal (vezeték, optikai szál, elektromágneses hullámok) összekapcsolt csomópontok (útválasztók, számítógépek, PDA-k, mobilok, stb). Az interneten mozgó adatok (e-mail, chat, web oldalak) csomagokban haladnak a fizikai hordozókon keresztül az n1es hálózati csomópontok között. Az adatok az n1es csomópontokon változó ideig tartózkódnak. A következő csomópont kiválasztása statisztkius módszerekkel dinamikusan történik.
Protokoll
A protokoll egy olyan szabvány, ill konvenció, ami leírja az adat továbbítás és szinkronizáció szabályait. A protokoll megvalósítható szoftver és/vagy hardver alapon. A protokollokat rétegekre szokás bontani. Az interneten legelterjedtebb az 5 szintű TCP/IP protokoll. (TCP - Transmission Control Protocol, IP – Internet Protokoll ) A többszintű protokollok lényege, hogy az adattovábbítást leválasszuk a fizikai megvalósításról. A magasabb szintű protokoll
A TCP/IP protokoll rétegei 1. 2. 3. 4. 5.
Fizikai réteg Adatkapcsolati réteg Hálózati réteg Szállítási réteg Alkalmazási réteg
A TCP/IP protokoll rétegei 1. Fizikai réteg 1.
Adatbitek továbbítására szolgál, függetlenül azok jelentéséről. A biteket azonban bármilyen fizikai jelekkel reprezentálhatja, illetve csoportokba összefoglalva is továbbíthatja Definíciója tartalmazza a fizikai jelek paramétereit, a vezetékek és csatlakozók paramétereit. Pl. ethernet vezetéken, optikai szálon, mikrohullámon keresztüli átvitel
A TCP/IP protokoll rétegei 2. Adat kapcsolati réteg Feladata az adatátvitel szomszédos WAN vagy LAN csomópontok között (hop to hop). A hálózati rétegből jövő kéréseket továbbítja a fizikai réteg felé. Gondoskodik a fizikai rétegben esetlegesen megjelenő adathibák javításáról. ide tartozik pl. az Ethernet, FDDI, WiFi protokoll
A TCP/IP protokoll rétegei 3. Hálózati réteg A szállítási rétegből származó kéréseknek megfelelő kéréseket továbbítja az adatkapcsolati rétegnek Feladata az adatátvitel a kezdő és végpont között Az internetes hálózati kapcsolatok nem állandó kapcsolatiak (nem olyanok, mint pl. a vonalas telefonnál), ezért minden adatcsomagnak tartalmaznia kell a cél címét. Ezen a szinten mind a rögzített, mind a rögzítetlen kapcsolatok kezelhetőek Ide tartozik pl. az IP (IPv4, IPv6) protokoll
A TCP/IP protokoll rétegei 4. Szállítási réteg
A legfelső alkalmazási réteg és a hálózati réteg közötti kapcsolat. Az interneten legelterjedtebb az állandó kapcsolati TCP (Transmission Control Protocol) és a nála n1szerűbb UDP (User Datagram Protokoll) Adatcsomagokat hoz létre, a fejlécébe beírja a csomag sorszámát, a kiindulási és a cél címet és port-ot. A port egy olyan azonosító szám, aminek a révén az ugyanazon IP címekre érkező csomagok szétálogathatóak. A TCP megbízható kapcsolatot jelent a kiinulási és a cél állomás között. Az UDP esetében a megbízhatóságról az alkalmazásnak kell gondoskodnia. Az UDP gyorsabb, ezért gyakran használják valósidejű multimédiás alkalmazásokban.
A TCP/IP protokoll rétegei 5. Az alkalmazási réteg Ez az, amivel mi foglalkozunk. Nem foglalkozik az adat továbbítás módjával, csak az adattal magával Ide tartozó protokollok pl.
1. 2. 3. 4. 5. 6.
HTTP – web oldalak továbbítása FTP – adattovábbítás POP3,IMAP – levelek letöltése SMTP – levelek továbbítása SSH – biztonságos titkosított adatátvitel DHCP – automatikus IP cím kiosztás
A HTTP protokoll I.
HyperText Transfer Protocoll A HTTP egy kérés-válasz alapú protokoll a felhasználónál futó program (a kliens) és a HTTP szerverek között. A kliens lehet egy WEB böngésző, egy internet pók, stb A szerver futhat ugyanazon a gépen, ahol a kliens, vagy egy másik gépen. Általában a TCP/IP protokollt használja
A HTTP protokoll II. A működés menete:
1.
2.
A kliens létrehoz egy TCP kapcsolatot a szerverrel általában a 80 – as, vagy a 443-as porton. Az utóbbi titkosított (SSL) kapcsolatot jelent. A kliens küld egy kérést a szervernek. A kérés egy módszer sorból, opcionális fejléc sorokból és egy üres sorból áll. Minden sort két bájt zár le. Ezek a 13-as (CR) és 10-es (LF) kódok. A módszer az alábbi szavak n1ike: HEAD, GET, POST, PUT, DELETE, TRACE, OPTIONS és CONNECT
3.
A szerver választ küld a kérésre. A válasz egy állapot sorból, azt követő fejléc sorokból, egy üres sorból és az üres sort esetleges követő adatokból áll. Minden sort CR LF pár zár le, de az adatokban nem feltétlenül van így.
A HTTP protokoll Példa
Kérés:
GET / HTTP/1.1 Host: www.photographyblog.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13 Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language: en-us,hu;q=0.7,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: UTF-8,* Keep-Alive: 300 Connection: keep-alive Cookie: __...
A HTTP protokoll Példa (folyt.)
Válasz:
HTTP/1.x 200 OK Date: Sun, 13 Apr 2008 11:19:09 GMT Server: Apache/1.3.37 (Unix) mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_log_bytes/1.2 mod_bwlimited/1.4 PHP/4.4.4 FrontPage/5.0.2.2635.SR1.2 mod_ssl/2.8.28 OpenSSL/0.9.7a X-PoweredPowered-By: PHP/4.4.4 SetSet-Cookie: exp_last_visit=1207996317; exp_last_visit=1207996317; expires=Mon, 13 Apr 2009 11:19:09 GMT; path=/; domain=.photographyblog.com domain=.photographyblog.com SetSet-Cookie: exp_last_activity=1208081949; exp_last_activity=1208081949; expires=Mon, 13 Apr 2009 11:19:09 GMT; path=/; domain=.photographyblog.com domain=.photographyblog.com SetSet-Cookie: exp_tracker=a%3A1%3A%7Bi%3A0%3Bs%3A5%3A%22index%22%3B%7D; exp_tracker=a%3A1%3A%7Bi%3A0%3Bs%3A5%3A%22index%22%3B%7D; path=/; domain=.photographyblog.com domain=.photographyblog.com Expires: Mon, 26 Jul 1997 05:00:00 GMT LastLast-Modified: Sun, 13 Apr 2008 11:19:11 GMT Pragma: Pragma: nono-cache KeepKeep-Alive: timeout=2, max=1000 Connection: KeepKeep-Alive TransferTransfer-Encoding: chunked ContentContent-Type: text/html ---------------------------------------------------------http://www.photographyblog.com/index.php?css =weblog/weblog_css http://www.photographyblog.com/index.php?css=
HTML (Hypertext Markup Language)
Az első általánosan használt internetes oldal leíró nyelv volt. (1990) Markup – olyan szöveg kiegészítés, ami megadja az oldal strukturáját, megjelenését vagy formázását. Alapvetően a WEB oldalak tartalmat és a megjelenítést írja le. Rendszerint szöveges formátumú. Az n1es html szimbólumok < > közötti szövegek. egy HTML elem egy nyitó és egy záró szimbólumból és a köztük levő n1éb elemekből áll. Pl.
dőlt Tartalmazhat ún. Hiper hivatkozásokat (Hyperlinks). Manapság korszerűbbnek tekintink a tartalmi, formai és viselkedésbeli leírásokat szétválasztását. A tartalmat megadja a HTML, a megjelenítést leírja a CSS (ld. később), a viselkedést pedig a script-ek. Konvencionálisan a HTML tartalmú fájlok kiterjesztése .htm, vagy .html, de bármi más is lehet. Gyakran előforduló kiterjesztések még:
.php, vagy .phtml - PHP nyelvű kódot tartalmazó fájl. A PHP kód a szerver oldalon hajtódik végre, a kliens oldalon már nem látszik .asp, .aspx – Microsoft: 'Active Server Pages'
HTML fájl példa
Minimális szabványos html fájl szerkezet:
Ez egy HTML fájl
egy HTML fájl felépítése
dokumentum típus definíció sor:
fejléc sorok. Ezeket általában nem mutatja meg a böngésző. (Kivétel a
...) Ide szokás beírni, vagy betölteni stílus (CSS) és javascript (js) fájlokat, megadni kulcsszavakat ls n1éb ún. "meta" információt. Ezt ... határolja. A HTML fájl törzse ..
HTML szimbólumok I.
A dokumentum strukturáját leíró szimbólumok (csak a nyitó nyitó szimbó szimbólumokat soroljuk itt fel. A szimbó szimbólumokban ugyan kis és nagybetű nagybetű ugyanaz volt, de az xhtml és dhtml szabvá szabványokban kisbetű kisbetűk szerepelnek.)
dokumentum megnevezése
(fejlé (fejlécben) fej sorok: <h1>,<h2>,<h3>,<h4>,<h5>,<h6> paragrafus: <p> nem rendezett (számozatlan) lista: <ul> <br />
<br />
<br />
<br />
rendezett (számozott) listák: <ol> <br />
<br />
<br />
<br />
<br />
<br />
a listaelemek: a szó <dt>, a jelentése <dd><br />
<br />
<div> és <span> <table> <br />
<br />
<br />
<br />
a listaelemek <li><br />
<br />
szótár listák: <dl> <br />
<br />
<br />
<br />
a listaelemek <li><br />
<br />
<th>,<tr>,<td><br />
<br />
<frameset>,<frame><br />
<br />
HTML szimbólumok II. <br />
<br />
Megjelenítéssel kapcsolatos szimbólumok: <br />
<br />
<br />
<br />
új sor: <br/> (egy önmagát bezáró szimbólum) aláhúzás: </hr> szöveg formázás: <b>, <i>, <u>, <em>, <strong>, <del>,<sub>,<sup> <center>, <pre> (a <font> tag-et már nem szokás használni)<br />
<br />
hiperhivatkozások adatbeviteli szimbólumok: <form>, <input><br />
<br />
egy HTML szimbólum részletei <br />
<br />
<br />
<br />
<br />
<br />
Attributumok: módosítják a szimbólumok jelentését. A formátum: <szimbólum attribútum1 attribútum2 > Pl. <p id="SajatParagrafus" class="SajatClass" title="Ez egy paragrafus" align="center">a szöveg</p> Általánosan használható attribútumok: <br />
<br />
id, class, name, title, align, valign, bgcolor, backround (URL), width, height<br />
<br />
Attribútumok lehetséges értékei <br />
<br />
Általános <br />
<br />
<br />
<br />
Specifikus pl. <br />
<br />
<br />
<br />
align: "center", "left", "right" valign: "top","middle","bottom" bgcolor: decimális v. hexa szám,RGB érték background="/kep.jpg" ol: start=kezdőszám type="type betű"> "a","A","b","B" ul: type="square","disc","circle"<br />
<br />
<a> : HTML link: <br />
<br />
ugyanazon a lapon levő <a name="cim" rel="nofollow">-re href="#cim"<br />
<br />
<br />
<br />
ugyanazon a WEB címen levő más fájlra href="./kepek/kep.jpg"<br />
<br />
<br />
<br />
globális címre ugrás href="http://www.azEnLapom.hu/index.phtml"<br />
<br />
Cascading Style Sheets <br />
<br />
CSS – megadja a WEB lap formázását egy CSS elem megadása: html szimbólum {attribútum1:értéke; attribútum2:értéke;…}<br />
<br />
1.<br />
<br />
A CSS lehet egy adott HTML elemben megadva pl. <p style="color:red; font-family:"Ariel"><br />
<br />
2.<br />
<br />
vagy belső (a <head>…</head> en belül) <style type="text/css"> css definíciók </style><br />
<br />
3.<br />
<br />
vagy külső fájlban megadott <link rel="stylesheet" type="text/css" href="sajat.css" /><br />
<br />
<br />
<br />
Ha több módon is megadjuk ugyanannak a HTML elemnek a stílusát, akkor ezek a stílusok összeolvadnak (cascade) egy virtuális stílusba a következő prioritási sorrend szerint (ld a fenti számozást): Ha van, akkor 1, ha nincs akkor 2, ha az sincs akkor 3 és ha az sincs, akkor a böngésző beli default<br />
<br />
CSS Lehetőség van arra is, hogy csoportosítsunk elemeket. Ehhez osztályokba (class) rendezzük azokat. Az osztály kiválasztására a . (pont) szolgál Ekkor:<br />
<br />
<br />
<br />
1.<br />
<br />
különböző HTML elemeknek ugyanazt a stílust is megadhatjuk <br />
<br />
pl. a CSS definíciókban ln1en .osztaly { color: red; font-decoration:underline }<br />
<br />
<br />
<br />
a HTML törzsében pedig: <p class="osztaly">...</p> - ez a paragrafus piros és alá aláhűzott lesz <h3 class="osztaly">...</h3> - ahogy ez a fejsor is<br />
<br />
2.<br />
<br />
a dokumentum különböző részeiben ugyanazon html elemeknek több különböző stílust is megadhatunk és ezek között az osztály megadásával választhatunk: <br />
<br />
pl. a CSS definíciókban ln1enek .p.alahuz { color: red; font-decoration:underline } .p.cim {font-family: Arial,sans-serif ;}<br />
<br />
<br />
<br />
a HTML törzsében pedig: <p class="alahuz">...</p> - ez a paragrafus piros és alá aláhűzott lesz az alap betü betütípussal <p class="cim">...</p> - ez pedig Arial betü betütípusu és a bö böngé ngésző szőben megadott szí színű <p class="alahuz cim">...</p> - ez pedig mindkettő mindkettő<br />
<br />
CSS II. <br />
<br />
Megadhatjuk a stílusokat attributum szerint is: pl. input[type="text"] {background-color: blue} ekkor minden olyan <input...> elem, aminek a type attributuma "text" kék háttérszínű lesz<br />
<br />
<br />
<br />
Megadhatjuk az id szerint is: pl. #green {color: green} – minden olyan elem zöld színű lesz, amelyiknek az id attributuma "green" p#green {color: green} – az a paragrafus, aminek az id attributuma "green" zöld lesz<br />
<br />
<br />
<br />
A CSS ben megjn1zéseket is elhelyezhetünk /* és */ között<br />
<br />
CSS III. <br />
<br />
A CSS ben vannak ún. pszeudo osztályok. Ezeket nem kell nekünk sem deklarálnunk, sem megadnunk class-szal. Ezek speciális helyzetekben léteznek:<br />
<br />
:focus<br />
<br />
aikor egy (input) elemen van a fókusz<br />
<br />
:link<br />
<br />
amikor egy linket még nem használtunk<br />
<br />
:visited<br />
<br />
amikor már használtuk<br />
<br />
:hover<br />
<br />
amikor az egér mutatója az elem felett van<br />
<br />
:active<br />
<br />
amikor egy elem aktív<br />
<br />
:first-child<br />
<br />
ha ez az elem egy másik elem első "gyermeke"<br />
<br />
:lang<br />
<br />
ez az elem ilyen nyelvű<br />
<br />
A dőlt betűs elemeknek a CSS definícióban fenti sorrendben KELL jönniük n1más után, de bármelyik kihagyható.<br />
<br />
CSS IV. <br />
<br />
Példa pszeudo osztály használatára: a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */<br />
<br />
<br />
<br />
A pszeudo osztályok normál osztályokkal kombinálhatóak: a.piros:visited {color: #FF0000} <a class="piros" href="http://www.fat.bme.hu" rel="nofollow">Atomfizika Tsz.</a><br />
<br />
CSS pszeudo osztály példa: <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<html> <head> <style type="text/css "> type="text/css"> a.n1 :link {color: #ff0000} a.n1:link a.n1 n1:visited a. :visited {color: #0000ff} a.n1 :hover {color: #ffcc00} a.n1:hover a.n2:link {color: #ff0000} a.n2:visited {color: #0000ff} a.n2:hover {font{font-size: 150%} a.n3:link {color: #ff0000} a.n3:visited {color: #0000ff} a.n3:hover {background: #66ff66} a.n4:link {color: #ff0000} a.n4:visited {color: #0000ff} a.n4:hover {font{font-family: monospace} monospace} a.n5:link {color: #ff0000; texttext-decoration: none} a.n5:visited {color: #0000ff; texttext-decoration: none} a.n5:hover {text{text-decoration: underline} </style> </head><br />
<br />
CSS pszeudo osztály példa folyt. <br />
<br />
<body> <p>Vidd az egeret a link fölé, hogy lásd mi történik.</p><br />
<br />
<br />
<br />
<p><b><a class="n1" href="default.asp" target="_blank" rel="nofollow">ennek a linknek megváltozik a színe</a></b></p> <p><b><a class="n2" href="default.asp" target="_blank" rel="nofollow">ennek a linknek megváltozik a betümérete</a></b></p> <p><b><a class="n3" href="default.asp" target="_blank" rel="nofollow">ennek a linknek megváltozik a háttérszíne</a></b></p> <p><b><a class="n4" href="default.asp" target="_blank" rel="nofollow">ennek a linknek megváltozik a betü osztálya</a></b></p> <p><b><a class="n5" href="default.asp" target="_blank" rel="nofollow">ennek a linknek megváltozik a megjelenése</a></b></p> </body><br />
<br />
<br />
<br />
</html><br />
<br />
<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/programozas-s-2-html-es-s-css-az-internet-programozasa" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Programozás s 2 HTML és s CSS. Az Internet programozása"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
