Jak na web

Jak na webJak na webJak na webJak na webPrvní krůčkyPrvní krůčky

Lukáš Reindl

Co je potřeba

• Budeme potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (ve Windows Notepad - Poznámkový blok)

• Potřebujete webový prohlížeč. Na novějších strojích je vždycky -- Internet Explorer (modré éčko), případně Mozilla, Firefox nebo třeba Opera , vše to je zdarma

• Přístup na internet• Musíme mít o čem psát :-)

Co není potřeba• Obejdeme se i bez drahých nebo složitých

programů• Nemusíme umět programovat• Pro základní pokusy – umístění vašich stránek

na internet nemusíte nic platit

Dva kroky

• napsání stránky = vytvoření souboru html (nebo více propojených souborů)

• vystavení takového souboru na internet

Soubory

• Internetová stránka je soubor s příponou htm nebo html

• Je to skoro obyčejný textový soubor obohacený o značky jazyka HTML (tagy)

• Soubor s příponou .html má na disku ikonku, která ukazuje, že jde o stránku

Jak tedy psát web• HTML editory – programy

– Jsou speciálně určené pro tvorbu stránek. Pro začátečníky jsou použitelné zejména „wysiwyg“ (= co vidíš, to dostaneš) editory, ve kterých píšete rovnou text a kódem html se nezabýváte – ten se generuje automaticky. ( Zjednodušeně řečeno word který generuje html kód)

– Například MS Frontpage

• „Ťukání zdroje“ – Psaní html kódu ručně bez jakýchkoliv programů– Využití textových editorů (v našem případě notepad)– Může se zdát jako nejhorší varianta, ale je dobré alespoň vědět jak se

dá psát web „zadarmo“, a jak vypadá zdrojový kód, co jak funguje…– Znalosti základního psaní kódu budou výhodou i v HTML editorech

Základní příklad na HTML

Kus HTML kódu:

<b>Tučný text</b>, <i>text kurzívou</i>. Hezké, ne?

• Zkusme si ho zkopírovat do naší stránky - Index.html

Tento zdroj se v prohlížeči zobrazí takto: Tučný text, text kurzívou. Hezké, ne?

• Značky v ostrých závorkách určují smysl a vzhled dokumentu a říká se jim tagy.• Tip: ostré závorky se na české klávesnici dělají pomocí pravého altu

stisknutého s těmi klapkami <, >. nad ním (nebo např. zavináč je pravý alt + V, s pravým altem se dá udělat celá řada dalších klikyháků), zkuste si to.

Vaše první webová stránka

• Vytvořte si novou složku na ploše - například „Můj web“ a přejděte do ní

• V této složce vytvořte nový textový soubor (pravé tlačítko > Nový > textový dokument)

• Přejmenujte jej na jméno index.html (potvrďte změnu přípony), změní se ikona u souboru

• Otevřete dvojklikem. V prohlížeči se zobrazí prázdná stránka.• Zadejte Zobrazit - Zdroj. Spustí se textový editor, zatím prázdný.• Sem napište nějaký text, podle libosti jej doplňte libovolnými HTML

značkami (vizte příklady v základech HTML).• Soubor - uložit.• Přepněte se zpátky do prohlížeče a zadejte obnovit (F5).• Prohlédněte si změny• Případně se vraťte do textového souboru a znovu upravte zdroj. Po

uložení a obnovení se změny projeví.

Tagy = značky• HTML soubor je obyčejný text obalený značkami, které se

nazývají tagy.• Tagy určují, jak bude text vypadat, tedy jakou bude mít formu.• Všechny tagy jsou uzavřeny v <ostrých závorkách>.

• Co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky zapsáno:

• <tag> text </tag> a zase text a <tag> a zase text

Druhý příklad - struktura HTML

<html> <head> <title> Má první stránka</title> </head>

<body> Moje první html stránka. 5 A nějaké další texty. </body></html>

Co znamenají jednotlivé tagy:

• <html>• začíná dokument• </html>• končí dokument• <head> a </head>• začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé

důležité údaje, například• <title> a </title>,• vymezující název dokumentu (může se lišit od jména souboru)• <body>• Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým

začíná vlastní tělo dokumentu (angl. body = tělo).

• Tímto příkladem jsem popsal základní strukturu dokumentu. Výše uvedené tagy by měl obsahovat každý html soubor.

Documents

Jak na web