Dnes bych Vás chtěl seznámit, jak jsem slíbil minule, se systémem souborů a s některými tagy které můžou využívat zadávání příme cesty souborům, nebo odkazovat na úplně jinou stránku, zhruba tak jak to tady budu popisovat. Předně takový slovníček:
URL (Uniform Resource Locator)
URL jsou znaky, které dohromady dávají přesnou webovou adresu serveru, na kterém jsou uložena nějaká data (soubory, obsah).
Tyto adresy se vyskytují se ve tvaru:
schéma://doménové jméno:port/adresář/soubor?parametry=hodnotaparametru
schéma nebo také protokol je na začátku URL a určuje způsob jak bude k datům prohlížeč
přistupovat (http:// ftp:// file:///)
doménové jméno je adresou v Internetu vázanou na nějaký server (ve tvaru subdoména.doména.TLD, doména.tld).
port v protokole http:// je přednastavený na 80, tudíž se nemusí při běžném prohlížení zadávat.
adresář ukazuje na umístění souboru.
soubor určuje název souboru, který potom příslušným způsobem prohlížeč zpracuje.
parametry se píší za otazníka na za koncem názvu souboru (za příponou) a využívají je skriptovací jazyky k rychlému předání informací (soubor.php?parametr=data) .
Existují nejméně dva pojmy které si představí webdesigner při vyslovení názvu URL, a to typy URL.
Absolutní
To jsou adresy (většinou odkazy na jiné stránky, nebo reklamy) uvedené v odkazu jako celá webová adresa („http://www.d.tld“). Využívá se většinou jen v případě odkazů na jiné webové stránky, nebo ve webových reklamách a bannerech.
Relativní
Je to odkaz (na soubor…), ke kterému se nezadává plná adresa(sjiaphoto.euweb.cz), ale
napíše se jen cesta k souboru, podle vztahu složky ze které odkazujete s okolím.
Jako cesta se zapíše jen „slozka/soubor.pripona“ a ne celá adresa jako u absolutních „www.worldwideweb.cz/slozka/soubor.pripona“
Do nadřazené složky (ve které je umístěna aktuální složka) se dostaneme použitím dvou teček „../“ podobně jako adresář. Když chci někde vyzdvihnout okolnost, že daný soubor nebo cesta začíná v aktuálním adresáři, nebo nechci mít na začátku adresy „/“, napíšu před „/“ tečku jednu, a ukazuju tak, že se jedná o původní adresář.
Co musíte důkladně znát a prozkoumat (nebo pokaždé kontrolovat), jsou cesty k souborům, které používáte.
složky se píšou do adresy mezi dvě „/“ např. „/slozka/“
Používání relativních cest k souborům, velmi doporučuji, protože se s němi dá mnohem lépe zacházet a trochu ulehčí práci při přemísťování webových stránek (např. na zakoupenou doménu atp.)
Nejčastější tagy v nichž se tyto adresy vyskytují jsou tag pro obrázek (<img src=“cesta/soubor.přípona“/>)
a odkazy na soubory vlastních webových stránek(<a href=“zasecesta/soubor.přípona“></a>).
Když budete toto znát, můžete se pustit do prvních kroků k vlastní webové stránce. Dnes si jen vytvoříme soubor, abyste mohli zkoušet nové věci, které se naučíte. Zde je základní postup:
popřípadě jakýkoliv textový editor v Mac OS nebo nějaký lepší program jako PSPad Editor…
Tento soubor vytvořte jako HTML(v PSPadu šablona), nebo dejte v Poznámkovém Bloku soubor>uložit a
dole do políčka název souboru zadejte i s uvozovkama „nazevsouboru.html“ a pod tím v roletkové liště zvolte
možnost všechny soubory. V další roletkové liště kódování, zvolte UTF-8.
To spolu s dalšími věcmi zajišťuje správné vypisování Českých znaků a nejen jich(Zachycení správného nastavení je níže)
PSPad to dělá většinou automaticky, ale měli bychom začít všichni asi takto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Titulek webu</title> </head>
Toto zajistí (společně s kódováním UTF-8 souboru) správné zobrazení stránky
ve většině prohlížečů.
Teď musíme vytvořit tělo dokumentu, a to tagem body, kterému doplníme i koncový tag, aby byl řádně ukončen
a abychom jej my nezapomněli ukončit, uděláme hned to co jsem dělal já, tedy že jsem hned ukončil </body> a </html>, a teprve potom doplňoval obsah.
<body> <!-- sem patří obsah, který za chvíli budeme vytvářet --!> </body> </html>
Teď do těla (mezi oba tagy <body>)přidáme kód s prvním textem:
<h3>Moje první stránka</h3> <p>Lorem ipsum, a tak dále :D</p>
Teď soubor někam uložte, a spusťte v prohližeči. Je to sice jen text, ale nemůže být hned všechno perfektní že… Pro začátek to asi stačí, teď ještě vysvětlím pár věcí v tom kódu:
<h3> je tag pro nadpis 3.tí úrovně
<p> je tag pro odstavec
Lorem ipsum je bezvýznamný text tvářící se jako Latinský, ze kterého Latinu nezastává ani jedno slovo. Používá se k výplni grafických šablon různých věcí.
Příště se naučíme nějakým způsobem formátovat text, a něco o textu si řekneme.