Download
1 / 11
110 likes | 239 Views
Lukáš Reindl. Jak na web. První krůčky. 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)
E N D
Lukáš Reindl Jak na web První krůčky
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.
