Potrebno je brzo vidjeti sve promjene na samoj stranici, bez uticaja na fajlove i kod stranice postavljene na Internet. Na primjer, promijenite shemu boja bloka, premjestite pomaknuti element, itd.
Da bi to učinili, mnogi webmasteri koriste lokalne Denwer ili OpenServer servere, pokrećući punu kopiju stranice na svom računalu. Ova metoda je univerzalna i prikladna za profesionalce, s njom možete provjeriti rad različitih skripti i dodataka, eksperimentirati s promjenom dizajna i uređivati sve datoteke web stranice, a nakon testa prenijeti odgovarajuće izmjene direktno na stranicu.
Za korisnike koji su daleko od umjetnosti webmastera, preporučujem korištenje pretraživača u ove svrhe. Pošto koristim Chrome, daću uputstva sa snimcima ekrana za ovaj konkretan pretraživač. Po analogiji, možete raditi sa Opera, Yandex.Browser, Mozilla Firefox i drugim pretraživačima, princip njihovih alata je sličan.
Uputstvo 1: kako da vidite ceo HTML kod sajta u pretraživaču
Otvorite potrebnu web stranicu svoje stranice. Kliknite desnim tasterom miša na traženi element, pojaviće se padajući meni pretraživača sa dostupnim komandama:
Slika 1. Pregled cijelog HTML koda web stranice u Chrome pretraživaču
Bitan: Naredbe u padajućem izborniku mogu se razlikovati, na primjer, za aktivne elemente (linkovi, slike, video zapisi) i neaktivne elemente (tekst, pozadina, div):
Slika 2. Padajući meni preglednika Chrome
Stoga, ako ne pronađete potrebnu komandu, samo kliknite desnim tasterom miša negde drugde ili koristite prečice pretraživača.
Vraćajući se na sliku 1, prikazuje potrebnu naredbu za pregled cijelog HTML koda originalne web stranice, zove se " Pogledajte kod stranice". Kliknemo na naredbu, otvara se nova kartica sa punim kodom originalne web stranice, veliki plus za sve - pregled je dostupan sa isticanjem sintakse:
Slika 3. Isječak koda za ovu stranicu
Ovaj alat je vrlo koristan za pronalaženje i uređivanje elemenata koje tražite.
Alternativni načini za pregled svih HTML web stranica
Za brži pristup, možete koristiti druge načine za pozivanje ovog alata
- Na slici 1 takođe vidimo da je ova komanda dostupna preko prečice na tastaturi. + ;
- Zalijepite u adresnu traku pretraživača view-source: site umjesto moje domene, zalijepite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim pretraživačima.
U početku će se nekima možda učiniti da ovo uopće nije neophodan alat, ali pregled cijelog HTML koda stranice je odličan za pronalaženje potrebnih elemenata u kodu, to mogu biti linkovi, tagovi, meta tagovi, atributi i ostali elementi.
Kombinacija vrućih tipki +otvorite okvir za pretragu, u Chrome pretraživaču se pojavljuje u gornjem desnom uglu:
Slika 3. Pretraživanje prema kodu stranice
Nakon što podnesete zahtjev obrascu za pretragu, ekran će se premjestiti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati onaj koji vam je potreban:
Slika 4. Pretraživanje prema HTML kodu web stranice
Uputstvo 2: Kako pregledati i urediti HTML i CSS kod web stranice u Google Chrome pretraživaču
Sada najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod stranice u pretraživaču. zatim prenesite promjene u pretraživač.
Evo tako korisnog alata koji je uvijek dostupan u vašem pretraživaču, eksperimentirajte s drugim komandama koje će vam olakšati uređivanje stranice.
Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i smjeru stranice. Primjer 4-1 prikazuje kod za jednostavan dokument koji sadrži osnovne oznake.
Primjer 4.1. Izvorni kod web stranice
Primjer web stranice
header
Prvi paragraf.
Drugi paragraf.
Kopirajte sadržaj ovog primjera i sačuvajte ga u folderu c:\www\ kao example41.html. Nakon toga pokrenite pretraživač i otvorite datoteku kroz stavku menija Datoteka > Otvori datoteku (Ctrl+O). U dijalogu za odabir dokumenta navedite datoteku example41.html. Web stranica prikazana na sl. 4.1.
Rice. 4.1. Rezultat pokretanja primjera
Elementsluži za označavanje tipa tekućeg dokumenta - DTD (definicija tipa dokumenta, opis tipa dokumenta). Ovo je neophodno kako bi pretraživač razumeo kako da interpretira trenutnu web stranicu, jer HTML postoji u nekoliko verzija, osim toga postoji XHTML (EXtensible HyperText Markup Language, prošireni jezik za označavanje hiperteksta), koji je sličan HTML-u, ali se razlikuje od to u sintaksi. Da se pretraživač "ne zbuni" i shvati po kom standardu da prikaže web stranicu, potrebno je postaviti u prvom redu koda
.
Postoji nekoliko tipova, razlikuju se ovisno o verziji HTML-a na koju ciljaju. U tabeli. 4.1. date su glavne vrste dokumenata sa njihovim opisom.
Tab. 4.1. Važeći DTD | DOCTYPE |
Opis |
|---|
| HTML 4.01
|
|
|
Stroga HTML sintaksa. |
|
|
Prijelazna HTML sintaksa. |
|
|
Okviri se koriste u HTML dokumentu. |
| HTML 5
|
|
|
Ova verzija HTML-a ima samo jedan tip dokumenta. |
| XHTML 1.0
|
|
|
Stroga XHTML sintaksa. |
|
|
Prijelazna XHTML sintaksa. |
|
|
Dokument je napisan u XHTML-u i sadrži okvire. |
| XHTML 1.1
|
|
|
Programeri XHTML 1.1 očekuju da će postepeno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na tipove, jer je sintaksa ista i poštuje jasna pravila. |
Razlika između striktnih i prelaznih opisa dokumenata je različit pristup pisanju koda dokumenta. Strogi HTML zahtijeva striktno pridržavanje HTML specifikacije i ne oprašta greške. Prijelazni HTML je "tiši" u pogledu nekih nedostataka koda, tako da je ovaj tip poželjniji u određenim slučajevima.
Na primjer, strogi HTML i XHTML zahtijevaju oznaku
, ali u prelaznom HTML-u se može izostaviti i ne specificirati. Istovremeno, zapamtite da će pretraživač u svakom slučaju prikazati dokument, bez obzira na to da li se podudara sa sintaksi ili ne. Takva provjera valjanosti se provodi pomoću validatora i namijenjena je prvenstveno programerima da prate greške u dokumentu.</p>
<p>U nastavku ćemo uglavnom koristiti strict<!DOCTYPE>, osim tamo gdje je izričito navedeno. Ovo će nam omogućiti da izbjegnemo uobičajene greške i naučimo nas pisati sintaktički ispravan kod.</p>
<p>Često je moguće naići na HTML kod bez korištenja<!DOCTYPE>, web stranica će i dalje biti prikazana u tom slučaju. Međutim, može se desiti da se isti dokument drugačije prikazuje u pretraživaču kada se koristi<!DOCTYPE>i bez toga. Osim toga, pretraživači mogu prikazati takve dokumente na svoj način, kao rezultat toga, stranica će se „srušiti“, tj. će biti prikazan na potpuno drugačiji način, kako to zahtijeva programer. Da biste izbjegli takve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Tag <html>definira početak HTML datoteke, zaglavlje se pohranjuje unutar njega ( <head>) i tijelo dokumenta ( <body>
).</p><p>Naslov dokumenta, kako se i blok naziva <head>, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije prikazan direktno na stranici, osim spremnika <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Tag <meta>je univerzalan i dodaje čitavu klasu funkcija, posebno uz pomoć meta tagova, kako se ova oznaka općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Da bi pretraživač shvatio da ima posla sa UTF-8 kodiranjem (Unicode transformacijski format, Unicode transformacijski format) i dodaje se ova linija.</p><p>
<title>Primjer web stranice
Tag
definira naslov web stranice, to je jedan od važnih elemenata dizajniranih za rješavanje mnogih problema. U operativnom sistemu Windows, tekst naslova se prikazuje u gornjem levom uglu prozora pretraživača (slika 4.2).</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>Rice. 4.2. Prikaz zaglavlja u pretraživaču</p>
<p>Tag <title>je obavezan i mora biti prisutan u šifri dokumenta.</p><p>Obavezno dodajte završnu oznaku</head> da označi da je naslovni blok dokumenta završen.</p><p>Tijelo dokumenta <body>namijenjen je postavljanju oznaka i sadržaja web stranice.</p><p>
<h1>header</h1>
</p><p>HTML nudi šest različitih nivoa tekstualnih naslova koji ukazuju na relativnu važnost odjeljka koji slijedi nakon naslova. da, oznaka <h1>predstavlja najvažniji naslov prvog nivoa i oznaku <h6>služi za označavanje naslova šestog nivoa i najmanje je značajan. Podrazumevano, naslov prvog nivoa se prikazuje najvećim podebljanim fontom, naslovi sledećeg nivoa su manji. oznake <h1>...<h6>su elementi na nivou bloka, uvijek počinju u novom redu, a nakon njih se drugi elementi pojavljuju u sljedećem redu. Osim toga, prazan prostor se dodaje ispred i iza naslova.</p><p>
<!-- Комментарий -->
</p><p>Neki tekst se može sakriti od prikazivanja u pretraživaču tako što ćete ga ostaviti komentarom. Iako korisnik neće vidjeti takav tekst, on će se i dalje prenositi u dokumentu, tako da gledajući izvorni kod možete pronaći skrivene bilješke.</p>
<h3>Ctrl+U</h3>
<h3>Kako vidjeti izvorni kod elementa?</h3>
<p>Kliknite desnim dugmetom miša na element stranice od interesa.</p>
<p>Google chrome : <b>“Pogledaj kod elementa”</b></p>
<p>Opera : <b>"Istraži element"</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_opera.png' height="402" width="261" loading=lazy loading=lazy></p>
<p>Firefox: <b>“Analiziraj element”</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_firefox.png' height="298" width="222" loading=lazy loading=lazy></p>
<p>U drugim pretraživačima potražite sličnu stavku menija.</p>
<p>Zdravo!</p>
<p>Posebno sam na početku članka iznio cijelu poentu, za one koji traže brzi odgovor.</p>
<p>Informacije su možda poznate mnogima, ali budući da pišem za blogere početnike, web programere i druge istraživače, ovaj članak pomoći mora biti prisutan.</p>
<p>U budućnosti ćete svakako proučavati izvorni kod stranica i pojedinačnih elemenata.</p>
<p>Pogledajmo konkretan primjer kako možete koristiti prikaz izvora stranice.</p>
<p>Na primjer, želimo vidjeti koje se ključne riječi koriste za određenu stranicu. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl + U. Izvorni kod ove stranice će se otvoriti u posebnom prozoru ili na posebnoj kartici. Pritisnite Ctrl+F <span>za traženje dijela koda. U ovom slučaju u polje za pretragu upisujemo riječ “ <i>ključne riječi".</i> Automatski ćete biti preusmjereni na isječak koda s ovom meta oznakom i riječ za pretraživanje će biti istaknuta.</p>
<p>Po analogiji, možete pretraživati i proučavati druge isječke koda.</p>
<p>Pregledanje cijelog izvornog koda stranice u većini slučajeva nije baš zgodno, pa je u svim pretraživačima moguće vidjeti kod jednog elementa ili fragmenta.</p>
<p>Koristimo konkretan primjer da vidimo kod elementa. Na primjer, da vidimo da li veza ima atribut nofollow. Kliknemo desnim tasterom miša na link koji nas zanima iu padajućem kontekstualnom meniju kliknemo levim tasterom miša na stavku <span>“Pogledaj kod elementa”</span> ili slično (u zavisnosti od vašeg pretraživača). U nastavku, u posebnom prozoru za analizu koda, dobijamo nešto slično.</p>
<p>Vidimo da je rel=”nofollow” prisutan u kodu veze. To znači da ovaj link neće “procuriti” i PR. O tome ćemo detaljnije govoriti u budućim člancima. Za sada je važno da sada znate kako vidjeti izvorni kod stranice i izvorni kod pojedinog elementa.</p>
<p>". Ista stavka se nalazi iu kontekstualnom meniju koji, ako kliknete desnim tasterom miša na tekst <b>stranice</b>. Možete koristiti i prečicu na tastaturi CTRL + U. Mozilla FireFox ne koristi eksterne programe - original <b>kod</b> <b>stranice</b> sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.</p> <p>U Internet Exploreru kliknite na stavku menija Datoteka i izaberite Uredi u Notepad-u. Umjesto naziva Notepad može se napisati još jedno, u postavkama pretraživača ste dodijelili da vidite original <b>kod</b> ali. On Click <b>stranice</b> Desnim klikom otvara se kontekstni meni, koji takođe ima stavku koja vam omogućava da otvorite izvor <b>kod</b> <b>stranice</b> u eksternom programu - "Prikaži HTML- <b>kod</b> ali".</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>U pretraživaču Opera otvorite meni, idite na odjeljak "Stranica" i imat ćete priliku odabrati stavku "Izvor" u pododjeljku "Alati za razvoj". <b>kod</b>” ili stavka „Inicijal <b>kod</b> okvir". Prečice CTRL+U i CTRL+SHIFT+U su dodijeljene ovom odabiru, respektivno. U kontekstualnom meniju u prilogu kliknite <b>stranice</b> desnim klikom, tu je i stavka "Izvor <b>kod</b>". Opera izvor <b>stranice</b> u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača za uređivanje HTML datoteka.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p>Google Chrome pretraživač bez ikakve sumnje ima najbolju organizaciju izvornog pretraživača. <b>kod</b> ali. Desnim klikom miša možete odabrati View <b>kod</b> ali <b>stranice</b>” i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili možete odabrati u istom meniju liniju "Prikaz <b>kod</b> element" i na istoj kartici će se otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS - <b>kod</b> element <b>stranice</b>. Pretraživač će reagovati na pomeranje kursora preko redova <b>kod</b> i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a <b>kod</b> ali.</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Vjerovatnoća gledanja u početni <b>kod</b> web <b>stranice</b>, koji pretraživač prima kao rezultat zahtjeva serveru, zapravo se nalazi u svakom Internet pretraživaču. Pristup odgovarajućoj komandi organizovan je približno identično, ali postoje značajne razlike u tome na koji način i u kom obliku će vam biti predstavljen početni <b>kod</b> .</p>
<h3>Uputstvo</h3>
<p><b>1.
</b> U pretraživaču Mozilla FireFox proširite odjeljak "Prikaz" iz menija i kliknite na "Inicijalno <b>kod</b> <b>stranice</b>". Ista stavka se nalazi iu kontekstualnom meniju koji se pojavljuje kada kliknete desnim tasterom miša na tekst <b>stranice</b>. Dozvoljena je i prečica na tastaturi CTRL + U. Mozilla FireFox ne koristi eksterne programe - početno <b>kod</b> <b>stranice</b> sa isticanjem sintakse će se otvoriti u posebnom prozoru pretraživača.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95d5fa552552b95d5fe3.jpg' height="748" width="680" loading=lazy loading=lazy></p><p><b>2.
</b> U Internet Exploreru kliknite na stavku menija Datoteka i izaberite Uredi u Notepad-u. Umjesto naziva Notepad može se napisati drugi program koji ste u postavkama pretraživača dodijelili za pregled početnih <b>kod</b> ali. On Click <b>stranice</b> desnim tasterom miša iskače kontekstni meni koji takođe ima stavku koja vam omogućava da otvorite početni <b>kod</b> <b>stranice</b> u eksternom programu - "Prikaži HTML- <b>kod</b> ali".</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p><p><b>3.
</b> U pretraživaču Opera otvorite meni, idite na odjeljak „Stranica“ i vjerovatno ćete preferirati stavku „Inicijal“ u pododjeljku „Alati za razvoj“. <b>kod</b>” ili stavka „Inicijal <b>kod</b> okvir". Prečice CTRL+U i CTRL+SHIFT+U su dodijeljene ovom odabiru, respektivno. U kontekstualnom meniju u prilogu kliknite <b>stranice</b> desnim klikom, tu je i stavka "Inicijal <b>kod</b>". Opera otvorenog koda <b>stranice</b> u eksternom programu koji je dodijeljen u OS-u ili u postavkama pretraživača za uređivanje HTML datoteka.</p><p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p><p><b>4.
</b> Google Chrome pretraživač, bez ikakve sumnje, ima najbolju organizaciju za pregledavanje početnih <b>kod</b> ali. Desnim klikom na stranicu, možda ćete preferirati View <b>kod</b> ali <b>stranice</b>” i tada će se izvorni kod sa isticanjem sintakse otvoriti u posebnoj kartici. Ili možete preferirati u istom meniju liniju "Prikaz <b>kod</b> element" i pretraživač na istoj kartici će otvoriti dva dodatna okvira u kojima možete pregledati HTML i CSS <b>kod</b> bilo koji element <b>stranice</b>. Pretraživač će reagovati na pomeranje kursora preko redova <b>kod</b> i, isticanje elemenata na stranici koji odgovaraju ovom dijelu HTML-a <b>kod</b> ali.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p><p><b>5.
</b> U pregledniku Apple Safari proširite odjeljak "Prikaz" i odaberite redak "Prikaži HTML <b>kod</b> ali". U meniju koji se pojavljuje kada kliknete desnim tasterom miša na otvaranje <b>stranice</b>, odgovarajuća stavka je naslovljena "Prikaži izvor". Prečice CTRL + ALT + U su dodijeljene ovoj radnji. <b>kod</b> otvara u posebnom prozoru pretraživača.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b960eafe52552b960eb45.jpg' width="100%" loading=lazy loading=lazy></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Top Related Articles</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/o-premii-muz-tv-o-premii-muz-tv-golosovanie-za-nominantov-muz.html">
<div class="img_container"><img src="/uploads/0ef01b6c28f8f566857fb20f21ef5345.jpg" border="0" alt="O nagradi mus-tv Glasanje za mus tv nominacije" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">O nagradi mus-tv Glasanje za mus tv nominacije</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/kto-vruchal-premiyu-muz-tv-priz-za-vklad-v-razvitie-muzykalnoi.html">
<div class="img_container"><img src="/uploads/9763b42bdc7b010bc2e64041cc499d86.jpg" border="0" alt="Nagrada"За вклад в развитие музыкальной индустрии"" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Nagrada "Za doprinos razvoju muzičke industrije"</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/etapy-i-mehanizm-processa-inficirovaniya-i-razmnozhenie-virusov-kak.html">
<div class="img_container"><img src="/uploads/cbe7bd1ce4264b83d3e19553689c6b8b.jpg" border="0" alt="Kako djeluje virus gripe: zašto se razbolijevamo?" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako djeluje virus gripe: zašto se razbolijevamo?</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Kategorije:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/bs/category/programs/">Programi</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/errors/">Greške</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html> 