Komentáre a iframe

Aj keď sme si ani zďaleka neprebrali všetky tagy, ktoré jazyk HTML ponúka, možno ste si všimli, že pomocou pár tagov už vieme spraviť dosť základných vecí na webstránke, ktoré zvyčajne na nich vidíme. Tieto tagy patria medzi najpoužívanejšie a ich výskyt v zdrojovom kóde každej stránky je veľmi častý (mnohonásobný). Jedná sa najmä o tag div, ktorým si vytyčujeme istú časť/blok stránky, ale týka sa to aj iných tagov. Aby bol zdrojový kód prehľadnejší, používa sa odsadzovanie, ktoré sme si už ukázali, pomocou ktorého je ľahšie vidieť napríklad čo je obsahom ktorého divu alebo iného elementu.

 

Okrem odsadzovania existuje ešte jedna štandardná vymoženosť programovania, ktorý by sa mala dodržiavať v každom jazyku a to je komentovanie kódu. V jazykoch CSS a HTML sa to nezvykne robiť až v takej miere, ako v iných programovacích jazykoch, ako je napríklad PHP, k čomu sa dostaneme neskôr, ale aj v HTML to nie je v malej miere na škodu. O čo sa jedná? Komentáre (popis, poznámky) je časť kódu, ktorá sa ignoruje, to znamená, že sa neprekladá ako kód jazyka HTML a nezobrazuje sa na webstránke. Slúži to na písanie poznámok (komentárov) programátora v kóde, aby mu to pomohlo napríklad orientovať sa v kóde alebo aby vedel, prečo daný kód (časť kódu) písal a na čo bol určený. Predstavte si klasickú webstránku so základnými časťami (hlavička, menu, logo...). Taká štandardná webstránka má viac ako desať tagov div, kde každý div je nejaká iná časť. Aby sa v tom programátor, ktorý danú stránku píše nestratil, resp. aby mal väčší prehľad, ktorý div je na čo určený, okomentuje si každý div s informáciou, na čo je daný div určený.

 

Jeden význam komentovania kódu je to, že to uľahčuje prácu programátorovi, ktorý daný kód píše (tvorí ho od základov) v aktuálnom čase vytvárania. Druhý význam komentovania kódu je ten, že veľmi často sa stáva, že jeden programátor (alebo skupina) webstránku alebo už hocijaký iný naprogramovaný projekt vytvorí, ale ďalej sa už tomu nevenuje. Neskôr (o pár mesiacov/rokov) však vlastník projektu môže mať nové požiadavky na projekt alebo by ho len chcel pozmeniť (najčastejšie dizajn), pôvodný programátor však už nie je v dosahu alebo nemôže na tom robiť z iných dôvodov a tak vlastník muís nájsť nového programátora. Ten však ale nebude robiť všetko odznova po svojom, ale bude len pracovať už s existujúcim kódom. Tu však nastáva problém, že keďže daný kód nevytváral on, nemusí mu hneď rozumieť čo na čo je určené a môže sa v ňom stratiť. Kód webstránky je vo väčšine niekoľko stoviek riadkov kódu, takže jeho modifikácia nie je pre cudzieho programátora jednoduchá. Toto je druhý význam komentovania kódu, kedy by komentáre mali pomôcť aj iným programátorom, aby boli schopný čítať a porozumieť danému kódu. Mali by im priblížiť, čo na čo je určené alebo by mali popísať správanie sa nejakej časti kódu, ktorá by mohla byť ťažko zrozumiteľná iným ľuďom, resp. robí niečo špecifické, čo si pôvodný programátor sám navrhol.


Poďme si to ale ukázať, ako to funguje. Komentárom je obyčajný text, ktorý môže byť v jednom riadku, ale kľudne môže byť aj vo viacerých. Musí byť ohraničený špeciálnym tagom na to určeným. Začiatočný tag pre komentáre v jazyku HTML je zatvorený zobáčik, výkričník a dve pomlčky (<!--) a uzatvárajúci je dve pomlčky a otvorený zobáčik (-->). Ako sme si už povedali, hlavný význam komentovania kódu je pre lepšiu prehľadnosť či už samotného programátora alebo pre budúcnosť, pre hocikoho, kto sa stretne s daným kódom. Vlastnosť, že ak niečo obalíme do týchto tagov sa nezobrazí na stránke má však ešte jedno výhodné využitie. Týmito tagmi môžeme ohraničiť ktorýkoľvek text, tým pádom aj samotný kód webstránky alebo jeho časť. Na čo je to dobré? Predstavte si, že máte na webstránke množstvo elementov a pracujete na nej. Jeden element vám však zavadzia z nejakého dôvodu, napríklad chyba v dizajne a nevidíte cez neho iné elementy, s ktorými potrebujete pracovať. Ak si daný element v kóde obalíme týmito tagmi, kód bude braný ako komentár a na webstránke sa nezobrazí a nebude nám dočasne zavadzať. Alebo si niečo naprogramujete na stránke, čo tam chcete mať, otestujete si to a všetko funguje ako má. Z nejakého dôvodu to ale ešte nechcete zobrazovať na stránke. Zatiaľ to v kóde môžete mať, ale bude to dočasne zakomentované. V tom čase, kedy to už budete chcieť zobrazovať na stránke stačí iba odstrániť tagy pre komentáre a element sa na stránke zobrazí. V nasledujúcom príklade si teda ukážeme aj komentovanie kódu pre prehľadnosť a aj pre nezobrazenie istej časti kódu:

 

<!-- Hlavny div pre celu webstranky-->
<div>

    <!-- Hlavicka-->
    <div>
        <p>Logo webstranky</p>
    </div>

    <!-- Obsah stranky - content -->
    <div>

        <!-- Menu -->
        <div>
            <a href="http://www.w3schools.com">Klikni!</a>
        </div>

        <!-- Jadro stranky -->
        <div>
            <p>Nejaky dlhy text</p>

            <span>Tento druhy odkaz nevidime, lebo je zakomentovany.</span>
            <!--
                <a href="http://www.w3schools.com">Klikni!</a>
            -->

        </div>
    </div>

    <!-- Paticka -->
    <div>
        <p>Copyright</p>
    </div>

</div>

 

V tejto kapitole si ukážeme ešte jeden element, ktorý má mnoho rôznych využití. Bol často používaný v minulosti, v súčasnosti sa využíva menej, pretože odborníci majú na to svoje dôvody, prečo by sa nemal využívať. My však teraz nejdeme filozofovať s našimi zatiaľ nie veľmi širokými vedomosťami, či sa má používať alebo nie. Je to šikovný element a vysvetlíme si, ako sa používa. Stručne povedané, tento element slúži na zobrazenie webstránky vo webstránke. Predstavte si webstránku ako jedno okno v prehliadači, napríklad google.sk. A na spodku tejto stránky by bol obdĺžnik (div), v ktorom by bola táto istá webstránka zobrazená. Znie to čudne, ale mali by sme na v googli ďalší google. Možno sa vám význam tohto zdá čudný, samozrejme tento element sa nepoužíva na zobrazenie tej istej stránky.

 

Možno ste už videli stránku, kde na jej bočnej strane bol nejaký obdĺžnik a v ňom bola zobrazená fanúšikovská stránka Facebooku danej stránky. V tom menšom rámci sa dalo scrollovať, klikať a podobne, ako keby bola tá stránka zobrazená na celé okno. Presne tento rámec bol náš element. Presne tento prípad je hlavné využitie tohto elementu. Slúži na zobrazenie inej stránky v menšom, ktorá nejako súvisí s obsahom hlavnej stránky. Alebo len chceme na našej stránke zobraziť v menšom nejakú inú stránku pre nejaký dôvod. Tento spôsov je šikovnejší, pretože v opačnom prípade by musel byť iba link napríklad kliknite sem pre zobrazenie našej Fun page a to by vás presmerovalo na novú kartu s Facebook stránkou. Táto metóda je však rýchlejšia, pretože niekto si chce len mätne a rýchlo scrollnuť prvý pár príspevkov na Facebook stránke a nepotrebuje vidieť celú stránku v novom okne.

 

Poďme si to ale názorne ukázať. Tento element má párovú značku iframe (inline frame – vnútroriadkový rám/rám v riadku). Obsah, ktorý zobrazuje, určuje podobne ako v prípade tagu img atribút src (source), ktorého hodnota je URL adresa stránky, ktorú chceme zobraziť. V nasledujúcej ukážke je najprv tag iframe použitý, ako si ho budeme skúšať neskôr, keď nebudeme využívať online simulátor na stránke w3schools. Tento simulátor totiž blokuje externé (vonkajšie) zdroje/stránky, takže nám stránku google.sk v iframe nezobrazí. Hneď za ním sme ako zdroj iframe tagu použili internú stránku http://www.w3schools.com/, ktorá sa už zobrazí ako sa má. Všimnite si, že v našom rámci (frame) sa stránka zobrazí presne ako keď si ju otvoríme na novej karte prehliadača, môžeme scrollovať, klikať a podobne. Všimnite si, že ak aj na niečo klikneme, nezobrazí sa to v aktuálnom okne prehliadača, ale stále sa pohybujeme v iframe. Ešte by som podotkol na malý detail, ktorý ste si asi všimli. Keďže je to inline frame, je to aj inline element (nie blokový), takže nezaberá celú šírku stránku a nezalamuje riadky pred sebou, takže sme použili aj tag br, aby to bolo lepšie viditeľné:

 

<div>
    <p>Toto je nasa webstranka</p>

    <span>V nej si zobrazujeme obsah inej stranky pomocou iframe:</span>
    <br>
    <iframe src="http://www.google.sk"></iframe>
    <br>
    <br>
    <span>Tu je interna stranka v iframe:</span>
    <br>
    <iframe src="http://www.w3schools.com/"></iframe>
</div>

 

Ako vidíte, náš rám je dosť malý na to, aby sa v ňom dalo ľahko prezerať vnorenú webstránku. Tag podobne ako element img disponuje atribútmi height a width, ktorých číselné hodnoty určujú počet pixelov. Skúste si zadať tieto atribúty a meniť si rozmer ifrejmu:) Tento element má ešte jedno využitie, ktoré si teraz ukážeme. Spomeňte si na tag a (odkaz) a jeho atribút target (cieľ). Týmto atribútom sme určovali, kde sa cieľ nášho odkazu zobrazí. Ako možnosti sme si ukázali, že buď sa náš cieľ zobrazil v aktuálnom okne prehliadača (presmeroval nás zo súčasnej stránky na cieľovú) alebo otvoril obsah na novej karte prehliadača. Okrem tohto vieme pomocou hodnoty atribútu target povedať odkazu, aby nám cieľ odkazu zobrazil vo vnútri iframe, ktorý sa nachádza na stránke. Keďže môžeme mať ifrejmov na stránke viacero, iframe disponuje ďalším atribútom, ktorý má názov name (meno) a jeho hodnota je text, ktorý by mal byť jedinečný na stránke. To znamená, že by každý iframe mal mať svoj zatiaľ nepoužitý názov (name). Práve túto hodnotu atribútu name potom použijeme ako hodnotu atribút target v odkaze. To zabezpečí, že sa náš cieľ zobrazí priamo vo vnútri ifrejmu:

 

<div>
    <ol>
        <li>
            <a href="http://www.w3schools.com" target="nas_iframe_1">W3Schools.com</a>
        </li>

        <li>
            <a href="http://www.w3schools.com/html/default.asp" target="nas_iframe_1">HTML</a>
        </li>

        <li>
            <a href="http://www.w3schools.com/css/default.asp" target="nas_iframe_1">CSS</a>
        </li>
    </ol>
    <iframe src="" name="nas_iframe_1" height="400" width="600"></iframe>
</div>

 

Všimnite si, že na tomto príklade sme použili zotriedený zoznam (ol) ako menu s odkazmi. Cieľ odkazov je nastavený na iframe, ktorý sa nachádza naspodku. Všimnite si tiež, že na začiatku neobsahuje atribút src ifrejmu žiadnu hodnotu. Naschvál som ju nepoužil, aby ste videli, že iframe môže byť na začiatku aj prázdny a po kliknutí na niektorú položku, sa zobrazí jeho cieľ v našom rámci. Celkom šikovné nie? Ešte by som podotkol, že za zoznamom sme nepoužili tag br a aj tak máme iframe na novom riadku. Čo to znamená? No že aj zoznam patrí medzi blokové elementy:)

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

komentarekomentovanie kodukomentar v htmliframehtml <iframe>stranka v strankeiframe src

IT ftip

Sedí maniak pred počítačom a zrazu ho trhne: - Sakra, veď ja som už na tom internete zavislý! Chvíľu rozmýšľa, otvorí si nové okno s browserom a hovorí: - Hmm... niekde tu na to musí niečo byť.