Budování vlastního webu pro začátečníky: 5 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Ať už jste někdy snili o tom, že budete počítačovým programátorem, nebo jste někdy použili webové stránky, přiznejme si to, jsme téměř všichni, informační technologie se staly páteří podnikání. Ačkoli se programování může zpočátku zdát trochu děsivé, mým cílem je naučit vás základní základy webového designu, abyste si po tomto tutoriálu mohli vytvořit vlastní webovou stránku. Když to jde stranou, pojďme na to!

Zásoby

• Macintosh nebo Windows PC (i když lze použít i distribuce Linuxu, prozatím je přeskakuji, protože toto je úvod pro začátečníky).
• Váš výběr textového editoru (Poznámkový blok ve Windows, TextEdit na Mac) nebo vaše volba IDE. Podle mých zkušeností jsem zjistil, že Visual Studio Code funguje nejlépe pro mě, takže bych také doporučil zkontrolovat zde: https://code.visualstudio.com/ nemluvě o tom, že funguje na všech platformách OS.

Krok 1: Značky a trocha historie

Jakmile se rozhodnete pro výběr textového editoru nebo IDE, začněme se základy.

Věřte tomu nebo ne, HTML nebo HyperText Markup Language existuje již téměř 30 let a s každým rokem přichází další a další vylepšení jazyka. Nyní se možná ptáte, jak prohlížeč interpretuje, co dát na obrazovku? To se provádí v několika částech:

Formátování dokumentu HTML je snadné. Máte dvě části známé jako hlava a tělo. Hlava webu obsahuje kód, který není pro uživatele viditelný. To se používá k propojení stylů a deklaraci dalších nezbytných bitů potřebných pro správné zobrazení webu. Po hlavě je tělo, jak to zní, tělo webové stránky. Tady můžete mluvit svým hlasem a ukázat publiku své fantastické HTML dovednosti! Nyní to není tak jednoduché, jako když zadáte text do těla a necháte jej zobrazit přesně tak, jak chcete, ale v určitém smyslu je to téměř tak snadné s použitím věcí, kterým říkáme tagy.

Zde jsou některé ze základních značek HTML:

• title - slouží k informování prohlížeče o názvu stránky. To je také to, co vidíte, když se podíváte na kartu webové stránky.
• h1, h2, h3, h4 - které se používají pro různé velikosti záhlaví, přičemž h1 je největší a h4 je nejmenší. Více o tom pojednám v další části.
• p - odstavec, slouží k psaní odstavců textu. Jako odstavce na papíře.
• br - break, který vloží zlom v souladu s textem.
• a - slouží k vytváření odkazů na jiné stránky, například na odkazy, na které lze kliknout.
• img - slouží k propojení obrázku s webovou stránkou.
• ul, ol, li - neuspořádané seznamy, seřazené seznamy a položky seznamu.
• - slouží k vytváření vložených komentářů v kódu, které koncový uživatel neuvidí.

A zde jsou některé CSS tagy (vizuální):

• barva - slouží k přiřazení konkrétní barvy konkrétnímu prvku nebo sadě na webové stránce.
• font-size-slouží ke změně velikosti písma na stránce.
• barva pozadí-slouží ke změně barvy pozadí určitého prvku nebo celé stránky.

Také jsem připojil malý cheat list, který vám pomůže, pokud se budete cítit trochu ztraceni, ale nebojte se, brzy to zvládnete! Kromě toho je www.w3schools.com také fantastickým zdrojem pro všechny vaše otázky ohledně programování. Určitě mi také ušetřili čas.

V zásadě je způsob, jakým prohlížeč čte soubor, snadný. Jde to řádek po řádku a zpracovává funkci po funkci. Znaky se používají k deklaraci tagu jako

a slouží k uzavření tagu jako např

. To je důležité, jinak prohlížeč neví, kde zastavit. Mezi tím

a

tagy, je místo, kde zadáváte, co chcete!

Krok 2: Nastavení editoru

Nyní, když jsme se trochu zabývali základními prvky HTML webu, pojďme se ponořit a vyzkoušet si to sami. V tomto dalším kroku použiji k programování webu kód Visual Studio, ale rozvržení kódu bude stejné, pokud vám více vyhovuje používání programu Poznámkový blok nebo TextEdit.

V programu Poznámkový blok:

• S programem Poznámkový blok se program spouští s prázdným souborem, takže je velmi snadné začít. To nám také umožní přeskočit pár kroků oproti používání VS Code. Začněme uložením souboru ve správném formátu.
• Klikněte na Soubor> Uložit
• Zadejte název souboru následovaný.html a v části Uložit jako typ vyberte všechny soubory. Klikněte na Uložit.

V rámci VS kódu:

• Nejlepší způsob, jak využít všech funkcí IDE, je začít vytvořením souboru a sdělením IDE, o jaký typ souboru se jedná. To lze provést následujícím způsobem:
• Klikněte na Soubor> Nový soubor
• Otevře se prázdný soubor
• Dále budete chtít začít uložením souboru, i když prázdného, protože to umožní IDE pochopit, jaký typ souboru bude konečný produkt. Při ukládání nezapomeňte na konec názvu souboru zahrnout příponu.html. Klikněte na Uložit.

Krok 3: Plány

Poté, co úspěšně uložíte soubor filename.html, začneme vytvořením rámce pro naši webovou stránku. Pamatujte si shora, jaké klíčové části souboru musíme deklarovat, než budeme moci začít s tvorbou zbytku HTML stránky. Tip: Při spuštění rámce pro web značka! DOCTYPE HTML sděluje prohlížeči, že soubor, který čte, je soubor html. To může přijít vhod, pokud máte ve stejném souboru různé typy kódu a chcete přepínat mezi tlumočníky. V rámci rozsahu tohoto pokynu se toho nebudeme příliš dotýkat, ale pokud vás po tomto Instructable zajímá více o vývoji HTML, neváhejte to zkusit. Pro osvědčené postupy vložím značku HTML! DOCTYPE do horní části souboru. Nezapomeňte otevřít a zavřít pomocí.

Tady je uložení souboru před zahájením programování užitečné, když IDE ví, že pracuje se souborem HTML, použije intellisense k dokončení výrazu a nabídne návrhy, abyste náhodou nezapomněli zavřít tag. Všimněte si toho, že pro ty z vás, kteří používají Poznámkový blok, intellisense není k dispozici jako v IDE. Začneme zadáním značek hlavy a těla následujícím způsobem: (viz druhý obrázek).

Nyní, když je nastavení dokumentu dokončeno, můžeme vyrazit do závodů a užít si zábavu!

Krok 4: Kód; Kód; Kód;

Můžeme začít vložením názvu pro náš nově vytvořený soubor. Zadejte co chcete. Pamatujte si, že toto je jméno, které se zobrazuje na kartě prohlížeče. Začněme také zadáním nadpisu na náš web. Připomeňme si z minulosti, jak to děláme. Slyšel jsem h1/2/3/4? To je správně!

Než budeme pokračovat, považuji za užitečné otevřít náš soubor v okně prohlížeče, abychom v reálném čase viděli, jak se naše změny odrážejí v prohlížeči. Můžete to udělat kliknutím na Soubor> Uložit a uložit soubor, přejít do složky, do které je uložen soubor HTML, pro mě je to plocha a otevřít soubor pomocí zvoleného prohlížeče a podívat se na to „Tady je vaše webová stránka! Poznámka: Osobně používám Safari jako zvolený prohlížeč na svém počítači, nicméně při vývoji webu je Firefox zlatým standardním prohlížečem pro testování, protože funguje téměř s každým skriptovacím jazykem.

Jak vidíte, nadpis se zobrazuje na kartě a také náš nadpis h1. Dávám přednost otevření okna prohlížeče souboru vedle IDE, protože když provedete změnu v IDE a uložíte, změny jsou v prohlížeči okamžité.

Neváhejte zkusit přidat značky a pohrát si s různými věcmi, které můžete s HTML dělat. Jak vidíte níže, přidal jsem několik odstavců, zlomů, externí hypertextový odkaz na Instructables.com, obrázek (který lze propojit buď z externího zdroje, nebo ve stejném adresáři, jako je uložen soubor. HTML), příklad neuspořádaného seznamu, seřazeného seznamu a nakonec komentáře.

Pokud chcete zkusit přidat nějaké barvy a možnosti uspořádání, můžete zadat značku stylu do záhlaví souboru. Toto je bod, ve kterém se to přesouvá z HTML do CSS, ale pro vizuální účely zadám několik řádků, abyste viděli, jak to funguje. CSS funguje v podstatě tak, že vám umožňuje ovládat prvky HTML v rámci funkcí pomocí závorek {}, do kterých zadáte kód pro konkrétní prvek HTML.

Krok 5: Závěrečné myšlenky

A tady to máte; úspěšně jste vytvořili svou první webovou stránku! Protože se jedná o průvodce pro začátečníky, chci, aby vaše první zkušenost s HTML byla příjemná. Nejlepší způsob, jak se podle mých zkušeností naučit, je ponořit se do toho a vyzkoušet si věci na vlastní kůži, zjistit, co můžete s kódem dělat, a také zjistit, jak ho můžete prolomit. Tím se vytvoří integrita a pomůže vám to lépe pochopit, jak a proč kód funguje tak, jak funguje. Pamatujte si, že www. W3Schools.com je skvělý zdroj pro dotazy a dokonce nabízí virtuální sandbox v prohlížeči k vyzkoušení vašeho kódu. Doufejme, že jste se něco naučili a šťastné kódování!