Jak na web První 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.

Prezentace na téma: "Jak na web První 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."— Transkript prezentace:

1 Jak na web První krůčky Lukáš Reindl

2 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 :-)

3 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

4 Dva kroky napsání stránky = vytvoření souboru html (nebo více propojených souborů) vystavení takového souboru na internet

5 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

6 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

7 Základní příklad na HTML Kus HTML kódu: Tučný text, text kurzívou. 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.

8 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í.

9 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. Co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky zapsáno: text a zase text a a zase text

10 Druhý příklad - struktura HTML Má první stránka Moje první html stránka. 5 A nějaké další texty.

11 Co znamenají jednotlivé tagy: začíná dokument končí dokument a začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například a, vymezující název dokumentu (může se lišit od jména souboru) Co je mezi a, se bude zobrazovat. 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.