Webové stránky, blogy, webové stránky – v naší době již známé pojmy. S rozvojem internetu se stránky pro hostování webových stránek staly neuvěřitelně populární a není se čemu divit: pro někoho je mít vlastní web nutnost, pro jiného je to příjemná zábava. V prvním případě se obvykle bavíme o firmách, korporacích, soukromých podnikatelích, když inzerují jakýkoli žádaný produkt nebo službu. Druhá je o bloggerech.
Kromě toho existují uživatelé internetu, kteří jednoduše hledají informace, čtou blogy, sledují videa a tak dále.
K vytvoření kvalitního webu existuje mnoho možností. Zaměříme se na webové programování prostřednictvím HTML.
Co je HTML
HTML znamená Hyper Text Mark-Up Language. V překladu z angličtiny to znamená „Hypertext Markup Language“.
Jinými slovy, HTML je sada kódů, pomocí kterých můžete vytvářet hlavní prvky webu, jeho rámec, např.jak se slova skládají z vět.
HTML kódy jsou psány výhradně latinkou a nazývají se tagy a každý kód je uzavřen v lomených závorkách. Některé značky jsou spárované, některé nespárované.
Spárovaný znamená, že musí být bezpodmínečně používány ve dvojicích. Například úvodní značka označuje, kde na webové stránce začíná, a závěrečná značka označuje, kde končí. Ten se od prvního liší přítomností znaku lomítka za lomenou závorkou. Například je úvodní tag,je závěrečný tag.
Nespárované štítky nepotřebují partnera.
Mnoho značek může mít atributy – další prvky, které jim dávají konkrétnější význam. Například tag.
Kde se používá HTML
Klasické chápání toho, kde je potřeba HTML, je tvorba webových stránek.
V praxi to může stačit, protože HTML umožňuje vytvářet hlavní prvky webu, nabídky (včetně víceúrovňových), nastavovat pozadí, vkládat text, obrázky, zvuk, video, upravovat písma a mnohem více.
Existují však další jazyky, které vám umožňují přidat na webovou stránku zajímavější a často nezbytné prvky:
- CSS nastavuje styly pro celý web bez nutnosti neustále předepisovat stylové vlastnosti jednotlivých prvků pomocí tagů – například barvu a font textu.
- Skriptovací jazyk vám umožňuje vyvíjet a vkládat na web miniprogramy (skripty), odbanální estetické věci (změna barvy odkazu při najetí myší) a konče funkčními (sbírání e-mailových adres zákazníků, telefonních čísel).
- S PHP si můžete vyvinout vlastní knihu návštěv nebo systém komentářů.
Při vytváření e-mailů pro distribuci se používá také HTML.
Co je to odkaz
Umožňují vám přejít na jinou webovou stránku, a to jak uvnitř webu, tak externí.
Odkazy HTML se běžně používají:
- Přejít na externí webový zdroj.
- Pro pohyb po stránkách v rámci webu.
- Přejít na formuláře Google.
Často se také uvádí odkaz na zdroj v HTML, zejména proto, že při kopírování materiálu z jiného webu musíte uvést autora. V opačném případě může kopírování bez uvedení zdroje spadat pod definice porušování autorských práv, krádeže obsahu a selhávání. Kromě toho použití vypůjčených, nejedinečných materiálů snižuje výkon SEO a uvedení odkazu na zdroj snižuje rizika.
Typy odkazů
V klasickém slova smyslu je odkaz adresa webového zdroje, na který můžete přejít kliknutím na něj.
Kromě toho jsou zde hypertextové odkazy: text a obrázky. V těchto případech je odkaz HTML „skryt“pod nějakou větou (slovem) nebo obrázkem a abyste jej mohli sledovat, musíte na text nebo obrázek kliknout.
Další typy odkazů:
- Unvisited – odkaz, na který ještě nikdo neklikl během konkrétní relace. Pokud jste například včera následovali tento odkaz, pak jste vypnuli počítač a dnes jej znovu zapnuli, nyní je odkaz znovu nenavštíven, protože začala nová relace.
- Aktivní – v tomto stavu je odkaz uložen na velmi krátkou dobu: interval mezi kliknutím na odkaz a jeho sledováním.
- Navštíveno – odkaz, který již byl během jedné relace alespoň jednou navštíven.
U běžných textových odkazů mají navštívené odkazy tendenci měnit barvu, pokud není uvedeno jinak.
Obrázek s hypertextovým odkazem nemění svůj vzhled, ať už je navštěvován nebo ne.
Jak vložit běžný odkaz
Mnoho webových zdrojů vnímá adresu stránky jako odkaz, okamžitě na ni lze kliknout a zvýraznit ji barvou. Pokud je například adresa zaslána v messengeru nebo e-mailem, kliknutím na ni můžete přejít na stránku.
V případě, že si web vytváříte sami pomocí HTML, musíte vložit odkaz pomocí speciální značky. Bude to vypadat takto: adresa webu. Text odkazu v HTML musí být specifikován celý, s protokolem.
Jak vložit textový hypertextový odkaz
Už dříve bylo řečeno, že textový hypertextový odkaz plní stejnou funkci jako běžný odkaz, ale vypadá estetičtěji: místo adresy webu, která je často zbytečně dlouhá, je uvedeno slovo nebo fráze. Například ve větě „Zde hledejte informace“můžete odkaz skrýtslovo „zde“. Bude zvýrazněna a kliknutím na ni se uživatel přesune na požadovanou stránku.
Jak vytvořit odkaz HTML již bylo diskutováno dříve. Pomocí stejné značky můžete vložit textový hypertextový odkaz. Jediný rozdíl je v tom, že mezi tagy musíte zadat text, pod kterým bude odkaz skryt: viditelný text.
Jak vložit hypertextový odkaz na obrázek
Tady je to trochu složitější. Používáme stejný tag, ale místo textu je potřeba zadat cestu k obrázku.
Cesta je umístění obrázku. Pokud je obrázek (fotografie) umístěn ve službě sdílení souborů, musíte zadat všechny složky podél cesty k obrázku pomocí lomítka. Pokud je to možné, můžete také vložit odkaz na obrázek.
K označení
kromě src jsou použitelné i další atributy, které vám umožňují upravit výšku, šířku a umístění obrázku a mnoho dalšího. Některé z nich:
- Src – určuje cestu k obrázku.
- Lowsrc – identický s předchozím atributem, ale určený pro obrázky nízké kvality.
- Výška - výška obrázku.
- Šířka – její šířka.
- Alt – popis obrázku. Když najedete na fotku nebo obrázek, zobrazí se text uvedený v tomto atributu.
- Border – určuje tloušťku okraje kolem obrázku.
Atributy jsou uvedeny za tagem a jsou součástíjeho složení. Za atributem musí následovat jeho hodnota. Například pro atributy „height“nebo „width“(výška, šířka) udává výšku obrázku na webové stránce. Jednotkou měření jsou pixely, pokud není uvedeno jinak.
Bude to vypadat takto: <a href="adresa webové stránky"
. Tyto atributy pomohou nastavit vhodnou velikost obrázku. Border pomáhá vytvořit neviditelný okraj kolem obrázku.
Výše uvedené atributy platí samostatně pro značku vložení obrázku. Například:.
Co jsou kotevní odkazy
Vytváření kotevních odkazů je velmi užitečná dovednost. Často je potřeba rozložit webovou stránku s dlouhým textovým blokem nebo s několika podsekcemi na jedné stránce. V tomto případě můžete ihned začít se seznamem odkazů na podsekce textu nebo webové stránky a po kliknutí na ně uživatel přejde přímo do požadované sekce.
Vytvoření kotevních odkazů bude vyžadovat více použití značek atributů než jiné typy odkazů.
Nejprve musíte nastavit celkovou hodnotu pro každý blok informací nebo podsekci textu pomocí horního atributu a poté jej přiřadit k odpovídajícímu odkazu.
Jejich vlastnosti jsou rozsáhlejší, proto je vhodné nejprve zvládnout tvorbu jednodušších odkazů a poté přejít k tvorbě kotevních odkazů.
Tipy
Pomoc od zkušenýchprogramátoři:
- Můžete to udělat tak, aby se informace o odkazu zobrazovaly při najetí myší v HTML. K tomu se nám může hodit atribut alt, který používáme i pro grafické prvky.
- Je možné vytvořit seznam odkazů pomocí HTML. To může být užitečné zejména pro kotevní odkazy, stejně jako když potřebujete vytvořit seznam webových zdrojů, na které může následovat odkaz přímo z aktuální webové stránky.
- Pomocí CSS a JavaScriptu a některých funkcí HTML můžete vytvořit jiný design textových odkazů a hypertextových odkazů než obvykle. Když například najedete na odkaz, může změnit barvu a vrátit se na předchozí, když je od něj kurzor pryč. To lze provést pomocí vlastního skriptu JavaScript. Barvu odkazu lze navíc nastavit na jinou než modrou pro nenavštívené nebo fialovou pro navštívené. To je práce CSS.
- Nezneužívejte odkazy. Webová stránka s mnoha nevhodnými odkazy vypadá nedbale a nedbale.
- Ujistěte se, že uživatel chápe, že hypertextový odkaz s obrázkem je skutečně obrázkem, nikoli pouze obrázkem.
Závěr
Odkaz na stránku v HTML je velmi snadné. Je důležité dodržovat všechny hlavní body tohoto jazyka, protože i malá chyba může vést k tomu, že nebude výsledek a kód nebude fungovat.
