< Return to Video

HTML links

  • 0:00 - 0:03
    Už jsme se naučili hromadu HTML tagů.
  • 0:03 - 0:05
    Ale víte vlastně, co to HTML znamená?
  • 0:05 - 0:09
    HTML je zkratka pro hypertextový
    značkovací jazyk.
  • 0:09 - 0:14
    Značkovací jazyk používá značky,
    neboli tagy, k označení obsahu.
  • 0:14 - 0:17
    Ale co je to vlastně hypertext?
  • 0:17 - 0:21
    Je to fráze, která byla vynalezena
    ještě před existencí Internetu, v šedesátých letech.
  • 0:21 - 0:24
    Byl to text, který byl spojen
    s jiným textem,
  • 0:24 - 0:26
    na který se čtenář mohl ihned přesunout.
  • 0:26 - 0:30
    Tim Berners-Lee vynalezl HTML,
  • 0:30 - 0:33
    a ostatní součásti Internetu,
    například HTTP,
  • 0:33 - 0:35
    jako způsob spojování
    textu s jiným textem
  • 0:35 - 0:37
    kdekoliv na světě.
  • 0:37 - 0:39
    Jak spojujeme webové stránky s ostatními
  • 0:39 - 0:41
    v hypertextovém značkovacím jazyce?
  • 0:41 - 0:43
    Pomocí hyperlinku, samozřejmě!
  • 0:43 - 0:46
    Česky mu říkáme prostě odkaz.
  • 0:46 - 0:49
    Jak se tvoří odkaz v HTML?
  • 0:49 - 0:50
    Tady nastává problém.
  • 0:50 - 0:53
    Mysleli byste si, že použijete značku
    'link' …
  • 0:53 - 0:58
    Ta je ale ve skutečnosti použita pro
    jiné typy odkazů v HTML.
  • 0:58 - 1:02
    Místo toho používáme tag '',
    kde 'a' znamená "anchor",
  • 1:02 - 1:03
    což je anglicky kotva.
  • 1:03 - 1:06
    To zakotví odkaz na stránce v dané oblasti
  • 1:06 - 1:09
    a propojí kotvu s jinou stránkou.
  • 1:09 - 1:12
    Víme, že pro vytvoření odkazu
    musíme napsat tag,
  • 1:12 - 1:15
    ale musíme se také rozhodnout,
    jaký bude text odkazu
  • 1:15 - 1:17
    a jaká bude adresa odkazu.
  • 1:17 - 1:24
    Pojďme udělat odkaz na stránku s dalšími
    informacemi o vzniku Internetu.
  • 1:24 - 1:30
    Text odkazu napíšeme mezi
    otevíracím a uzavíracím tagem .
  • 1:30 - 1:32
    Takže tam nechám kurzor a napíšu,
  • 1:32 - 1:37
    "Přečtěte si více o historii HTML".
  • 1:37 - 1:41
    Nyní vidíme, že tento text
    vypadá jako odkaz,
  • 1:41 - 1:44
    ale zatím nikam nepřesměruje.
    Musíme přidat adresu.
  • 1:44 - 1:47
    Nechceme ovšem adresu odkazu
    zobrazit na stránce,
  • 1:47 - 1:50
    pouze potřebujeme, aby prohlížeč věděl,
    co s tím.
  • 1:50 - 1:53
    Takže to dáme do atributu tagu .
  • 1:53 - 1:57
    Konkrétně atributu "href".
    (pozn. číst jako há-ref)
  • 1:57 - 2:00
    Co samotné "href" znamená?
  • 2:00 - 2:03
    Dám vám nápovědu:
    Už jste to "h" viděli hodně.
  • 2:03 - 2:06
    Znamená to "hyper"! Hyper-reference.
  • 2:06 - 2:12
    Nyní vložím dovnitř atributu adresu,
    které se také říká URL.
  • 2:12 - 2:16
    Všimli jste si, že URL začíná protokolem
    "http:"?
  • 2:16 - 2:19
    A hádejte co to "h" znamená?
    Hyper!
  • 2:19 - 2:21
    Celé HTML je o hyper.
  • 2:22 - 2:26
    URL adresa specifikuje vše, co prohlížeč
    potřebuje k nalezení webové stránky:
  • 2:26 - 2:28
    Protokol, který je použit,
  • 2:28 - 2:30
    na jaké je doméně,
  • 2:30 - 2:34
    a cesta ke stránce, která je
    na nějakém serveru.
  • 2:34 - 2:39
    Jelikož to specifikuje vše,
    nazýváme to "absolutní URL".
  • 2:39 - 2:43
    Na některých stránkách můžete vidět URL
    adresy, které začínají lomítkem a cestou.
  • 2:44 - 2:46
    To řekne prohlížeči, aby zůstal
    na stejné doméně,
  • 2:46 - 2:49
    a pouze v této doméně
    našel jinou cestu.
  • 2:49 - 2:51
    Tomu říkáme "relativní URL".
  • 2:51 - 2:54
    Používáme je po celé Khan academy,
    když odkazujeme mezi obsahem.
  • 2:54 - 2:58
    Na vašich stránkách se raději
    držte absolutních URL,
  • 2:58 - 2:59
    tím nic nezkazíte.
  • 2:59 - 3:02
    Můžeme také prohlížeči říci,
    kde má stránku otevřít:
  • 3:02 - 3:05
    do aktuálního okna, nebo do nového.
  • 3:05 - 3:07
    Aby otevřel prohlížeč odkaz v novém okně,
  • 3:07 - 3:11
    přidáme další atribut, 'target'.
  • 3:11 - 3:15
    target="_blank"
  • 3:15 - 3:19
    Nyní chci, aby jste stopnuli video a
    vyzkoušeli kliknout na odkaz.
  • 3:19 - 3:23
    Nebojte se a zkuste to, počkám.
    klik-klik!
  • 3:23 - 3:24
    Co se stalo?
  • 3:24 - 3:28
    Asi jste viděli varování o odkazu
    generovaném uživatelskou stránkou.
  • 3:28 - 3:31
    A dále když kliknete na "OK",
    otevře se odkaz.
  • 3:31 - 3:33
    S odkazy na stránkách
    vytvořených na Khan Academy
  • 3:33 - 3:34
    zacházíme totiž opatrně.
  • 3:34 - 3:38
    Nechceme, aby si lidé mysleli,
    že je odkazujeme
  • 3:38 - 3:41
    na stránky Khan Academy, a pak se dostali
    na nebezpečné, neznámé stránky.
  • 3:41 - 3:44
    Takže každý zde udělaný odkaz
    má toto varování.
  • 3:44 - 3:46
    A každý odkaz vyskočí do nového okna.
  • 3:46 - 3:50
    To znamená, že vlastně můžu odstranit
    tento atribut target,
  • 3:50 - 3:53
    jelikož je o něj už postaráno.
  • 3:53 - 3:54
    Nebo to tu můžu nechat,
  • 3:54 - 3:58
    v případě že bych chtěla jednou
    přesunout toto HTML z Khan Academy
  • 3:58 - 4:01
    a chci, aby se odkaz
    otevřel v novém okně.
  • 4:01 - 4:03
    Kdy byste měli atribut target používat?
  • 4:03 - 4:06
    Obecně pokud odkaz směřuje
    na jinou stránku na stejné doméně,
  • 4:06 - 4:08
    měla by se otevřít ve stejném okně.
  • 4:08 - 4:12
    A pokud směřujete na stránku jiné domény,
    je dobré ji otevřít v novém okně.
  • 4:13 - 4:17
    Ještě vám chci ukázat jednu věc.
  • 4:17 - 4:19
    K odkazování nemusíme používat jen text.
  • 4:19 - 4:22
    K vytvoření odkazu můžeme
    použít třeba i obrázek!
  • 4:22 - 4:27
    Zde máme obrázek,
    na kterém je Tim Berners-Lee.
  • 4:27 - 4:30
    Tento kód vyjmu...
  • 4:30 - 4:34
    A vložím ho zde dovnitř tohoto odkazu.
  • 4:34 - 4:36
    No krása!
  • 4:36 - 4:39
    Nyní, pokud přejedu myší tento obrázek,
  • 4:39 - 4:41
    uvidím, že můj kurzor se
    změní na ručičku,
  • 4:41 - 4:44
    a kliknutím se dostanu na stránku CERNu.
  • 4:44 - 4:47
    Ve skutečnosti můžete udělat
    odkaz z celé stránky.
  • 4:47 - 4:50
    Celá by se podtrhla a vybarvila modře.
  • 4:50 - 4:57
    Ale to prosím nedělejte!
    A odkazy vytvářejte s láskou.
Title:
HTML links
Video Language:
English
Duration:
04:57
Daniel Hollas edited Czech subtitles for HTML links
Petra Maz edited Czech subtitles for HTML links
Daniel Hollas edited Czech subtitles for HTML links
Daniel Hollas edited Czech subtitles for HTML links
Daniel Hollas edited Czech subtitles for HTML links
skupina2 edited Czech subtitles for HTML links
skupina2 edited Czech subtitles for HTML links
skupina2 edited Czech subtitles for HTML links
Show all

Czech subtitles

Revisions