• 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: , , <html> , <head> , <br> , <p> </i> atd. - to všechno jsou značky. <br>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í.</p> <p>Existuje mnoho značek a mají různé účely.</p> <p>Existují značky, které je třeba zavřít. Například, <br>otevřete značku <i><p> </i> <br>a nezapomeňte štítek zavřít <i></p> </i> </p> <p>A existují jednotlivé značky, například tento <i><br> </i> .</p> <p>Tag je druh kontejneru, který může obsahovat text, obrázky a další tagy...</p> <p>○ Věnujte pozornost správnému pořadí otevírání a zavírání tagů:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг2> </тэг1> <i> </i></p> <p>Značka, kterou jsme otevřeli jako první, je uzavřena jako poslední, druhá je předposlední atd.</p> <p>○ 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:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг1> </тэг2> </p> <p>Chyba byla v<тэг1>A<тэг2> .<br>Při psaní kódu buďte opatrní.</p> <p><img src='https://i2.wp.com/bloggood.ru/wp-content/uploads/2013/05/osnovi-html-100.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p><b>Připravený kód.</b><br>Takto vypadá hotový standardní povinný HTML kód pro webovou stránku.</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>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:

    Existují další jednotlivé značky ( , ,
    , , , ,


    , , , , , , , , , ), ale seznámím vás s nimi o něco později.

    Nyní si povíme něco o „uzavíracích“ značkách. Samotný název „uzavírací značka“ naznačuje, že značka vyžaduje povinné uzavření. To se provádí za účelem jasného omezení části textu, kterou tag ovlivňuje.

    Pro jasný příklad se podívejme na značku , který se používá ke zvýraznění textu, nastaví písmo na tučné. Tagy A jsou hranice, které definují oblast výběru textu. Zde je kód, kde zapomněli zavřít značku na posledním řádku :

    Můj první web Ahoj všichni! A toto je můj první web.
    Ahoj všichni! A toto je můj první web.

    Jak vidíte, není to nic složitého, nyní můžete vytvořit několik vzájemně propojených stránek.

    Značky pro zvýraznění textu

    Text na stránce lze zvýraznit několika způsoby. To lze provést pomocí stylů nebo můžete použít značky. Nás (zatím) zajímá druhá možnost.

    — nastaví písmo na tučné.

    — nastaví styl písma kurzíva.

    — přidá k textu podtržení.

    — určené ke zdůraznění textu. Prohlížeče zobrazují tento text kurzívou.

    - přeškrtne text. Tato značka byla z HTML5 odstraněna, doporučujeme ji používat

    — zobrazí text jako text s proporcí. Odstraněno z HTML5.

    — zobrazí písmo jako horní index. Písmo se zobrazí nad účaří textu a ve zmenšené velikosti.

    — zobrazí písmo jako dolní index. Text je umístěn pod účaří zbývajících znaků v řádku a je zmenšen.

    — určené ke zdůraznění textu. Prohlížeče zobrazují tento text tučně.

    — Zmenší velikost písma o jednu ve srovnání s běžným textem. V HTML se velikost písma měří v libovolných jednotkách od 1 do 7, průměrná výchozí velikost textu je 3. Tag zmenší text o jednu konvenční jednotku. Vnořené značky jsou povoleny a velikost písma bude menší o 1 s každou vnořenou úrovní, ale nemůže být menší než 1.

    — zvětší velikost písma o jednu ve srovnání s běžným textem. V HTML se velikost písma měří v libovolných jednotkách od 1 do 7, průměrná výchozí velikost textu je 3. Přidání značky zvětší text o jednu konvenční jednotku. Vnořené značky jsou povoleny a velikost písma bude s každou úrovní větší.

    — používá se ke zvýraznění uvozovek v textu. Obsah kontejneru se v prohlížeči automaticky zobrazí v uvozovkách.

    — navržený ke zvýraznění dlouhých uvozovek v dokumentu. Text označený touto značkou se tradičně zobrazuje jako zarovnaný blok s odsazením vlevo a vpravo (přibližně 40 pixelů), stejně jako s odsazením nahoře a dole.

    
    — definuje blok předformátovaného textu.  Takový text je obvykle zobrazován v jednoprostorovém písmu a se všemi mezerami mezi slovy.  Ve výchozím nastavení je libovolný počet mezer v kódu na webové stránce zobrazen jako jedna.  Štítek 
    Umožňuje obejít tuto funkci a zobrazit text podle požadavků vývojáře.

    — definuje textový odstavec. Štítek

    Jedná se o blokový prvek, vždy začíná na novém řádku, odstavce textu následující za sebou jsou odděleny výplní. Množství odsazení lze ovládat pomocí stylů. Pokud není žádná uzavírací značka, má se za to, že konec odstavce se shoduje se začátkem dalšího prvku bloku.

    ..
    ..

    - HTML nabízí šest nadpisů na různých úrovních, které udávají relativní důležitost sekce za nadpisem. Ano, tag

    představuje nejdůležitější nadpis první úrovně a značku

    slouží k označení nadpisu šesté úrovně a je nejméně významný. Ve výchozím nastavení je nadpis první úrovně zobrazen největším tučným písmem a nadpisy následujících úrovní jsou menší. Tagy

    ,…,

    Odkazují na prvky bloku, vždy začínají na novém řádku a za nimi se na dalším řádku objeví další prvky. Navíc se před a za nadpis přidá mezera. Značka má atribut zarovnat, který definuje zarovnání nadpisu, může nabývat hodnot vlevo, odjet— zarovnání záhlaví doleva, centrum- zarovnání na střed, že jo- pravé zarovnání, ospravedlnit— zarovnání podle šířky (současně podél pravého a levého okraje). Tato hodnota funguje pouze pro záhlaví, která jsou delší než jeden řádek.

    — je kontejner pro změnu vlastností písma, jako je velikost, barva a typ písma. Přestože je tento tag stále podporován všemi prohlížeči, je považován za zastaralý a jeho používání se doporučuje opustit ve prospěch stylů. Značka má 3 atributy: barva— nastaví barvu textu, tvář— definuje typ písma, velikost— nastavuje velikost písma v konvenčních jednotkách.

    — označí text jako citaci nebo poznámku pod čarou k jinému materiálu. Toto zvýraznění je užitečné pro změnu stylu textu pomocí CSS a také se používá k rozdělení kódu HTML do strukturních prvků. Prohlížeče obvykle nastavují text uvnitř kontejneru kurzívou.

    — označuje, že posloupnost znaků je zkratka. Použití atributu titul je uvedeno dekódování zkratky, které umožňuje těm lidem, kteří ji neznají, zkratce porozumět. Vyhledávače navíc indexují fulltextovou verzi zkratky, což lze využít ke zlepšení hodnocení dokumentu.

    Ve výchozím nastavení je text uzavřen v kontejneru podtrženo tečkovanou čarou.

    Níže je kód, ve kterém jsem použil všechny tyto značky:

    Můj první web

    HTML a CSS jsou dvě základní technologie pro vytváření webových stránek. HTML poskytuje strukturu stránky, CSS(vizuální a zvukové) uspořádání pro různé zařízení. Spolu s grafikou a skriptováním jsou HTML a CSS základem vytváření webových stránek a webových aplikací. Další informace naleznete níže:

    Co je HTML?

    HTML je jazyk pro popis struktury webových stránek. HTML poskytuje autorům prostředky k:

    Publikování online dokumentů s nadpisy, textem, tabulkami, seznamy, fotografiemi atd.
    Získejte online informace prostřednictvím hypertextových odkazů kliknutím na tlačítko.
    Navrhněte formuláře pro provádění transakcí se vzdálenými službami, pro použití při vyhledávání informací, provádění rezervací, objednávání produktů atd.
    Zahrnout tabulky, videoklipy, zvukové klipy a další aplikace přímo do svých dokumentů.
    U HTML autoři popisují strukturu stránek pomocí značek. Prvky jazyka označují části obsahu, jako je např „odstavec“, „seznam“, „tabulka“ a tak dále.

    Co je XHTML?

    XHTML je a varianta HTML který používá syntaxi XML, Extensible Markup Language. XHTML má všechny stejné prvky (pro odstavce atd.) jako varianta HTML, ale syntaxe se mírně liší. Protože XHTML je XML aplikace, můžete použít jiné XML nástroje s ním (jako je XSLT, jazyk pro transformaci obsahu XML).

    Co je CSS?

    CSS je jazyk pro popis prezentace webových stránek, včetně barev, rozložení a písem. Umožňuje přizpůsobit prezentaci různým typům zařízení, jako jsou velké obrazovky, malé obrazovky nebo tiskárny. CSS je nezávislý HTML a lze je použít s libovolným označením založeným na XML Jazyk Jazyk. Oddělení HTML od CSS usnadňuje údržbu webů, sdílení šablon stylů napříč stránkami a přizpůsobení stránek různým prostředím. Toto je označováno jako oddělení struktury (nebo: obsahu) od prezentace.

    Co je WebFonts?

    WebFonts je technologie, která lidem umožňuje používat písma na vyžádání přes web bez nutnosti instalace do operačního systému. W3C má zkušenosti se stahováním písem HTML, CSS2 a SVG. Až donedávna nebyla písma ke stažení na webu běžná kvůli nedostatku interoperabilního formátu písem. Snaha WebFonts to plánuje vyřešit vytvořením průmyslově podporovaného otevřeného formátu písem pro web (nazývané "WOFF").

    Přednáška je u konce, doufám, že nabyté znalosti se vám budou hodit! V další přednášce vám řeknu, co v sobě tag ukládá , naučíme se provádět nejrůznější manipulace s obrázky a seznámíme se s tabulkami.

    Při psaní tohoto článku byl popis některých tagů převzat odtud

    Pískoviště

    Leonid Jakubovič 26. května 2015 v 11:18 hodin

    Školení HTML/CSS/JS

    • CSS
    • HTML,
    • JavaScript
    Youtube
    • www.youtube.com/user/agragregra- velmi zajímavý kanál, který vám pomůže zdokonalit se ve vytváření webů různé složitosti od začátku;
    • www.youtube.com/user/ArtSorax- spousta užitečného materiálu pro začátečníky.Důraz je kladen na CSS a JS;
    • www.youtube.com/user/WebMagistersRu- Osobně jsem se začal seznamovat s vývojovým prostředím webu z tohoto kanálu. Vše je vyprávěno přístupným a srozumitelným jazykem, takříkajíc základy.
    • www.youtube.com/user/loftblog- tým LoftBlog vede rozhovory s aspirujícími a zavedenými IT specialisty a vývojáři a také vede videoškolení;
    • www.youtube.com/user/TheSWAT727- videokanál obsahuje informace a školicí materiály o vývoji webu obecně, pokrývající front-end, back-end, recenze textových editorů a další užitečné informace pro začínající vývojáře a designéry.
    Internetové zdroje
    • htmlbook.ru je svatyně pro začínající specialisty. Tento zdroj obsahuje obrovské množství informací v přístupné a srozumitelné formě + fórum. Zde doporučuji začít se seznamovat s HTML/CSS;
    • webdesign-master.ru - vzdělávací stránka pro hlubší seznámení s webovým designem a layoutem;
    • learn.javascript.ru - název webu mluví sám za sebe. Doporučuji vám, abyste se začali učit poté, co se seznámíte se základy HTML5/CSS3.
    Služby
    • www.codecademy.com je služba v anglickém jazyce, kde si můžete vyzkoušet své znalosti v praxi. Vše je intuitivní, není nutná hluboká znalost anglického jazyka;
    • htmlacademy.ru je ruskojazyčná služba, kde je kladen důraz na praxi + trochu teorie. Velmi zajímavý zdroj, kurzy a úkoly;
    • jsfiddle.net je „pískoviště“ pro webové vývojáře, abych tak řekl. Zde můžete kódovat online a okamžitě vidět výsledek. Služba vám pomůže upozornit na chyby;
    • validator.w3.org - zde můžete zkontrolovat platnost svého kódu, abyste mohli opravit své chyby nebo nedostatky v HTML kódu;
    • jigsaw.w3.org/css-validator – podobná služba určená ke kontrole platnosti kódu CSS.

    Sečteno a podtrženo

    Na internetu je spousta užitečných, správných a potřebných informací, ale už neužitečných. Učte se, cvičte, pište kód.

    Štítky: Školení, materiál, webové stránky, vývoj webových stránek