HTML

Mnoho webových stránek na internetu obsahuje velmi zajímavá a užitečná data. Takových dat může být velký objem a mohou být rozházená po různých stránkách pod mnoha odkazy a není v našich silách je ručně ze stránek vykopírovat. Příkladem budiž například historická data o naměřených teplotách ze stránek Českého hydrometeorologického ústavu. Tato data jsou dostupná pouze skrze tabulky vložené přímo do webových stránek. Pokud chceme takovéto množství dat ze stránek dostat do našeho programu, musíme použít takzvaný web scraping.

Web scraping je technika pomocí které můžeme strojově číst obsah webových stránek na internetu. Webové stránky často vypadají velmi komplikovaně a sofistikovaně, ale nakonec jsou to pouhopouhé textové soubory psané ve speciálním jazyce zvaném HTML (HyperText Markup Language). Naštěstí pro nás není HTML jazyk programovací, nýbrž takzvaně značkovací. Není tedy zdaleka tak složitý jako například jazyk Python. Jazyk HTML má relativně jednoduchou strukturu a ani pro úplného začátečníka není těžké se v něm zorientovat. Pomocí HTML tvůrci webů definují samotný obsah stránek, tedy texty, obrázky, odkazy apod. Samotný vzhled stránky (barvičky, styl písma, rozmístění prvků na stránce apod.) se vytváří v jazyce zvaném CSS, který ale v tuto chvíli můžeme nechat být, neboť z hlediska zpracování dat nás vzhled stránek nezajímá.

HTML značky (tagy)

V následující ukázce vidíte HTML kód celé webové stránky tak, jak by si ji stáhl prohlížeč odněkud ze serveru.

<html>
<head>
  <meta charset="UTF-8">
  <title>Ukázka</title>
</head>
<body>
  <h1>Nadpis první úrovně</h1>
  <p>
    Text nějakého odstavce, který obsahuje
    <em>zvýrazněný text</em> a také <strong>
    důležitý text.</strong>
  </p>

  <h2>Nadpis druhé úrovně</h2>
  <div class="sekce1">
    <p>
      Druhý odstavec je v takzvaném divu, což je
      značka, která nemá sama o sobě žádný význam.
      Také zde máme
      <a href=&quothttp;://www.czechitas.cz"> odkaz na
      stránky Czechitas</a>.
    </p>

    <ol type="a">
      <li>První položka seznamu</li>
      <li>Druhá položka seznamu</li>
      <li>Třetí položka seznamu</li>
    </ol>
  </div>
</body>
</html>

Stránka se poté v prohlížeči zobrazí nějak takto. Zatím nevypadá příliš vábně, protože není nastylovaná. Styly nás však v této lekci nezajímají, protože pro webscraping nejsou důležité.

Vytvořte si ve Visual Studiu soubor ukazka.html, zkopírujte do něj výše uvedený kód a soubor uložte. Poté tento soubor najděte v průzkumníku a dvojklikem by se vám měl otevřít ve vašem oblíbeném prohlížeči. Můžete tak zkontrolovat, že prohlížeč vaši stránku skutečně zobrazí tak, jak je uvedeno na obrázku výše.

V naší první webové stránce jsme viděli takzvané HTML tagsHTML značky. Značky se píší do špičatých závorek a většina značek má otevírací a zavírací část. Například značka em pro zvýraznění textu vypadá takto

Značky mohou mít takzvané atributy, které dále specifikují, co značka bude přesně zobrazovat. Například značka ol představuje seznam položek a má atribut zvaný type, který určuje, jestli se číslování položek děje pomocí písmen nebo čísel.

Zajímavá a téměř nejpoužívanější je značka div, která sama o sobě nemá žádný vizuální význam. Slouží totiž k členění stránky na menší části. Všimněte si, že naší ukázkové stránka značku div také používá. Navíc u ní najdeme atribut class. Ten se běžně používá k stylování stránky a často podle něj můžeme při webscrapingu odlišit důležité části stránky.

Všech HTML značek je kolem stovky a mnoho z nich má spoustu možných atributů. Rozumět všem těmto značkám je prací webových vývojářů. Nám bude stačit získat nějaké malé povědomí alespoň o pár základních.

Pokud by vás zajímalo, co vše je v HTML možné, přehled všech používaných značek najdete zde (anglicky).

Cvičení

Porozumění HTML

zapni hlavu

Cílem tohoto cvičení je pokusit se vyznat ve zdrojovém kódu jednoduché webové stránky a získat tak povědomí o tom jak funguje jazyk HTML. Postupujte dle následujících kroků.

Stáhněte si následující ZIP soubor, který rozbalte někam na váš počítač. V rozbalené složce dhmo rozklikněte soubor index.html. V prohlížeči by se vám měla otevřít jednoduchá webová stránka pojednávající o škodlivosti jedné velmi zajímavé chemikálie. Stránka nevypadá příliš vábně, protože není napojena na žádné CSS styly, a vidíme tedy jen čistý obsah.
Složku dhmo si otevřete ve Visual Studiu a podívejte se na obsah souboru index.html. Uvidíte spoustu HTML značek. Některé z nich znáte, některé jste v životě neviděli. Nenechte se vylekat tím, že některým částem tohoto souboru vůbec nerozumíte. Zkuste v souboru najít nějaký kousek textu, který vidíte na vaší otevřené webové stránce a tím se trochu zorientovat.
V úvodním odstavci stránky jsou tři překlepy. Opravte je přímo v souboru index.html. Nezapomeňte jej uložit. Obnovte stránku ve vašem prohlížeči (zkratka Ctrl+R nebo CMD+R) a měli byste vidět změny, které jste provedli.
Najděte v souboru index.html část, která obsahuje výčet faktů o DHMO. Tyto seznamy jsou číslované, což naznačuje HTML značka <ol>. Změňte u obou seznamů tuto značku na <ul>, což znamená nečíslovaný seznam. Nezapomeňte změnit i uzavírací značku seznamu (ta s lomítkem). Otevírací a uzavírací značky musí vždy souhlasit!
Najděte poblíž začátku souboru index.html značku <img>, která do stránky vkládá úvodní obrázek. Atribut src udává cestu k souboru s obrázkem. Všimněte si, že blízko ke konci souboru těsně před seznamem odkazů je ještě jedna značka <img>, které ale atribut src chybí a proto na stránce žádný obrázek nevidíme. Nastavte atribut src na hodnotu img/dhmo-ban.png a podívejte se, jak se stránka změnila.
Podobně jako náš obrázek, poslední odkaz v seznamu odkazů nemá atribut href, což způsobuje, že se odkaz na stránce nezobrazuje jako odkaz. Atribut href říká, na kterou adresu má odkaz vést. Nastavte proto v posledním odkazu hodnotu atributu href na http://www.snopes.com/science/dhmo.asp.
Téměř na začátku souboru index.html najdete značku <title>. Ta udává název stránky, který se zobrazuje v záložce prohlížeče. Změňte tento název prostě na "DHMO šíří hrůzu".
Pokud chcete vidět, jak by tato stránka vypadala nastylovaná, vložte na nový řádek před značkou <title> tento kód

<link rel="stylesheet" href="style.css" />

Uložte soubor, obnovte stránku v prohlížeči a kochejte se.

následující »

Web scraping v Pythonu