Základy WEB programovacího jazyka HTML. Základy HTML pro začátečníky Programovací jazyk HTML pro začátečníky
Ahoj všichni!!! Jsem velmi rád, že jste se rozhodli pokořit výšiny základů HTML a toto je správná volba. Než totiž vytvoříte svůj první web, musíte znát základy HTML. Navíc se s HTML kódováním na webu budete muset vypořádat více než jednou. Vřele doporučuji se na lekce podívat. HTML pro začátečníky na mém blogu a zaručuji, že po absolvování tohoto kurzu si snadno vytvoříte webovou stránku nebo dokonce web sami.
Začněme! Nejprve to zjistíme HTML- (z angličtiny. Hyper Text Markup Language) je hypertextový značkovací jazyk. Poprvé jej vyvinul britský vědec Tim Berners-Lee v letech 1991-1992. HTML bylo určeno pouze k označení textu, obrázků a tabulek na webových stránkách. Nyní lze do dokumentu HTML vložit také programovací jazyky, jako je JavaScript a VBScript.
HTML není programovací jazyk, je určen pouze pro označování textových dokumentů.
Naučit se HTML stačí mít prohlížeč a standardní poznámkový blok nebo . Chcete-li otevřít standardní poznámkový blok, proveďte v počítači následující: „Start“ => „Programy“ => „Příslušenství“ => „Poznámkový blok“.
Pokud jste slyšeli o programech, které zjednodušují práci při psaní HTML kódu (Microsoft FrontPage, Adobe Dreamweaver), pak je v této fázi školení nedoporučuji používat. Procvičte si své dovednosti ve standardním poznámkovém bloku nebo v textovém editoru Notepad++ a po absolvování tohoto kurzu budete moci používat programy k urychlení. Přihlaste se k odběru aktualizací mého blogu a přečtěte si, jak používat aplikace Microsoft FrontPage a Adobe Dreamweaver.
Pro lepší pochopení jsem připravil příklad. Podívejte se pozorně na obrázek:
Vysvětlení.
1). Jakýkoli dokument HTML začíná tímto řádkem:
"https://www.w3.org/TR/html4/loose.dtd">
Tímto řádkem sdělujeme prohlížeči, že náš HTML dokument vyhovuje mezinárodní specifikaci verze 4.01. Díky tomuto řádku bude vaše stránka vypadat stejně. Tento řádek není nutné si pamatovat, HTML dokument bude fungovat i bez něj. To je jen proto, abyste si byli vědomi toho, co to je.
2). A- toto je začátek a konec dokumentu.
3).
A- hlava dokumentu. Často se zde vkládají další servisní značky, jedna z těchto značek je . O dalších servisních štítcích se dozvíte v dalších lekcích, v této fázi školení tyto informace stačí.
4).
A- název dokumentu. V prohlížeči se zobrazí tato hlavička:
ve vyhledávání jsem index nebo v Google.
5).
A- tělo dokumentu. Zde je obsah dokumentu, například text, obrázky, tabulky, hudba, filmy atd. Více o tom, jak vkládat hudbu, text, obrázky do těla dokumentu, se dozvíte v následujících lekcích.
Poznámka:
Často budete číst a slyšet slovo „tag“. Značka je vše, co je mezi závorkami< >. Například:
,
,
,
,
,
atd. - to všechno jsou značky. Tagy nejsou viditelné při prohlížení stránky v prohlížeči, ale vše, co není v závorkách, se v prohlížeči při prohlížení zobrazí.
Existuje mnoho značek a mají různé účely.
Existují značky, které je třeba zavřít. Například, otevřete značku
a nezapomeňte štítek zavřít
A existují jednotlivé značky, například tento
.
Tag je druh kontejneru, který může obsahovat text, obrázky a další tagy...
○ Věnujte pozornost správnému pořadí otevírání a zavírání tagů:
<тэг1>
<тэг2>
<тэг3>
... тэг3>
тэг2>
тэг1>
Značka, kterou jsme otevřeli jako první, je uzavřena jako poslední, druhá je předposlední atd.
○ Zde je příklad nesprávného pořadí otevírání a zavírání tagů. U této objednávky se mohou na webové stránce vyskytnout chyby:
<тэг1>
<тэг2>
<тэг3>
... тэг3>
тэг1>
тэг2>
Chyba byla v<тэг1>A<тэг2>
. Při psaní kódu buďte opatrní.
Připravený kód. Takto vypadá hotový standardní povinný HTML kód pro webovou stránku.
Název stránky
Text stránky, tabulky, obrázky, hudba a video.
Nenechte se odradit, pokud ze všeho výše napsaného rozumíte málo nebo téměř ničemu. Ve druhé lekci se více procvičíte a budete si moci vše ručně napsat sami a uvidíte, jak HTML funguje.
Pokračujte na další lekci
Rozhodl jsem se v tomto horkém tématu pokračovat. Sestavil jsem seznam nejlepších zdrojů pro výuku html a css, abych pomohl těm, kteří se zajímají o tyto problémy. Pamatuji si, že když jsem začínal jako webmaster, opravdu mi chyběl takový výběr kvalitních a užitečných zdrojů.
Nejprve pár definic:
Html (z angličtiny "HyperText Markup Language" - hypertextový značkovací jazyk) je standardní značkovací jazyk pro webové stránky.
Css (z anglického „Cascading Style Sheets“ – kaskádové styly) je technologie pro popis vzhledu webové stránky.
Bez znalosti html a css bude provoz vašeho webu velmi problematický – nebudete moci nainstalovat ani počítadlo statistik nebo dokonce banner. Neměli bychom běžet za specialisty o pomoc nebo vytvořit téma za tématem na fórech? Stačí si to vzít a naučit se to.
Z vlastní zkušenosti mohu říci, že html a css se dá naučit za 1 měsíc. Samozřejmě nemluvím o profesionálních výškách - můžete je dosáhnout sami, pokud chcete.
Podle mého názoru je nejlepším způsobem, jak se naučit html, css a další témata včetně propagace webu, vytvořit si vlastní web a cvičit na něm. Mimochodem, můžete se podívat na první web, který jsem vytvořil pro mapy pro hru Counter-Strike, na jejímž vzniku jsem se tehdy nadchl. Zde jsou mapy a jejich screenshoty, které vytvořil stařík Globator v těch dobách, kdy ještě nevěděl, co je to top 10, TCI a PR, a bezstarostně dováděl na slunci a vytvářel trojrozměrné mapy :) Tyto stránky jsem vytvořil za měsíc, naučil jsem se html a css v praxi.
Nemusíte být technický expert, abyste se naučili html a css. Například já jsem obecně humanista a v matematice jsem většinou dostal dvojku :) Takže každý se může naučit html a css. Zdroje, které jsem uvedl, jsou také vhodné, abyste je mohli kdykoli použít k nalezení jakéhokoli bodu, který vás zajímá ohledně html a css.
Webové stránky pro výuku html a css
Začnu výběrem užitečných zdrojů pro výuku html a css z webu, který jsem sám používal. Toto jsou lekce Wild html, které napsala Valentina Akhmetzyanova aka Dikarka. Všechny potřebné body popsala tak vesele a zajímavě, že se učení html a css pomocí jejích lekcí promění ve vzrušující aktivitu. Mimochodem, můžete si přečíst stránky pro blog. Divoké lekce stačí k tomu, abyste se naučili html a css na úrovni nezbytné pro práci webmastera.
Dokážete si představit, kdo bych byl, kdybych se dále rozvíjel v tématu Photoshop? Byl bych opravdové monstrum! Ale zapojil jsem se do SEO a vegetovat tady, psaní těchto písmen s prsty křečovitými od chladu :) Dělám si srandu, je tu také teplo a jídlo je dobré :)
HTML znamená H yper T ext M arkup L jazyk, tzn. Hypertext Markup Language je základním stavebním kamenem webových stránek, který slouží k vytváření a vizuální prezentaci webových stránek.
HTML přidává označení do prostého textu. Hypertext obsahuje různé odkazy, pomocí kterých jsou webové stránky vzájemně propojeny. Pomocí HTML může kdokoli vytvářet statické i dynamické webové stránky. HTML je jazyk, který popisuje strukturu a sémantiku obsahu webového dokumentu. Obsah webové stránky je označen pomocí značek, které představují prvky HTML. Příklady takových prvků jsou , ,
a tak dále. Tyto prvky tvoří stavební kameny jakékoli webové stránky.
HTML vynalezl v roce 1991 vědec Tim Berners-Lee a původně byl určen pro výměnu dokumentů mezi vědci z různých univerzit. Tim Burns-Lee svým vynálezem položil základy moderního internetu.
Existuje několik verzí HTML. Jazykový standard je průběžně aktualizován a doplňován a díky tomu je téměř každý rok vydávána nová verze HTML. Verze „HTML 2.0“ byla první standardní HTML specifikace, která byla zveřejněna v roce 1995. HTML 4.01 je hlavní verze HTML, která byla publikována koncem roku 1999 a dnes je široce používána. Dnes je nejoblíbenější verzí HTML-5, což je rozšíření HTML 4.01, vydané v roce 2012.
HTML dokument nebo webová stránka je jednoduchý textový dokument obsahující značky (které jsou zase prostý text uzavřený v lomených závorkách<имя тэга>). Webovou stránku lze psát buď v běžném textovém editoru (Poznámkový blok, WordPad, Word atd.), nebo ve specializovaném se zvýrazněním kódu (Poznámkový blok++, Sublime Text atd.). HTML dokumenty se ukládají jako soubory s příponou .htm nebo .html.
Online příklady v každé lekci
Při předkládání materiálu vám každá lekce poskytne příklady, které vám pomohou podrobně porozumět každému kódu a díky procvičování si učení užít. Pomocí našeho online HTML editoru můžete upravit HTML dokument a poté kliknout na oranžové tlačítko "Spustit" v editoru, které se nachází nad levým oknem editoru, abyste viděli výsledek. Pokud používáte specializovaný HTML editor, můžete příklad zkopírovat a zobrazit výsledky své práce v prohlížeči nainstalovaném na vašem počítači.
Příklad HTML:
Zkus to sám
Název stránky
Toto je název
Toto je odstavec.
Online příklady HTML
Výukový program HTML vám poskytuje více než 100 online příkladů, které vám pomohou snadno zvládnout značkovací jazyk. Lepší jednou vidět než stokrát slyšet! Teorie a praxe jsou klíčem k vašemu úspěchu při zvládnutí HTML.
Rozhodl jsem se více věnovat začátečníkům, kteří chtějí získat znalosti v oblasti tvorby webových stránek. Dotlačila mě k tomu moje učitelka, protože v příručkách pro laboratorní práce dělala spoustu chyb. Rád bych se podíval na zdroj, ze kterého byly vzdělávací informace převzaty, a nechal tam pár řádků svého názoru. Ale o tom to teď není. Ve své první přednášce budu mluvit o
Jaká je struktura dokumentu HTML?
Štítek oznamuje, že začíná struktura html dokumentu, - která končí. Mezi tagy Většina informací je uložena pro prohlížeč a vyhledávače. Ve značkách obsahuje název naší stránky. Štítek označuje, že následující informace jsou určeny pro uživatele, To přirozeně znamená, že informace pro uživatele docházejí.
Dovolte mi to nyní trochu vysvětlit. Všechny značky ( tag - prvek hypertextového značkovacího jazyka) se dělí na dva typy: „jednoduché“ a „uzavírací“. Značky jsou navíc uzavřeny v následujících znacích <
A >
, jsou to ty, které značku odlišují z prostého textu html. Podívejme se na několik nejjednodušších „jednotlivých“ značek:
— tag, který je zodpovědný za přelomení na nový řádek v místě, kde je tento tag nainstalován. Podívejme se na kód pomocí této značky.
Můj první web
Ahoj všichni! A toto je můj první web.
Výsledek lze vidět.
— značka, která kreslí vodorovnou čáru. Tento tag se vztahuje na prvky bloku, řádek vždy začíná na novém řádku. Má 5 atributů:
zarovnat — Určuje zarovnání čáry. Může mít hodnotu vlevo, uprostřed, vpravo.
barva — Nastaví barvu čáry.
noshade - Nakreslí čáru bez 3D efektů.
velikost — Nastaví tloušťku čáry.
width — Nastaví šířku čáry.
Kód pomocí značky :
Můj první web
Ahoj všichni! A toto je můj první web.
Vizuální příklad naleznete zde.
Další „jediná“ značka je . Tato značka slouží k ukládání informací určených pro prohlížeče a vyhledávače. Vyhledávače vyhledávají meta tagy, aby získaly popisy stránek, klíčová slova a další data. Můžete používat neomezený počet meta tagů, všechny musí být umístěny mezi nimi A . Parametry jakéhokoli meta tagu mají tvar „name=value“, který je určen klíčovými slovy obsah, název nebo http-ekviv. Protože meta tagy jsou určeny pro stroje, neprovádějí žádné vizuální změny, proto uvedu pouze zdrojový kód:
Tento řádek označuje, že tvůrce stránky věří, že stránka používá kódování UTF-8. V HTML5 se vše zjednodušilo, ke specifikaci kódování potřebujete pouze následující řádek: