Učení základů příkladu html jazyka s výsledkem. Základy HTML pro začátečníky

Ahoj všichni!!! Jsem velmi rád, že jste se rozhodli dobýt vrcholy základů HTML a toto správná volba... Než totiž vytvoříte svůj první web, musíte znát základy HTML. Navíc se budete muset více než jednou vypořádat s kódováním HTML na webu. Vřele doporučuji přečíst si lekce 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. Teď v HTML dokument programovací jazyky jako JavaScript, VBScript lze vložit dodatečně.

HTML není programovací jazyk, je určen pouze k označování textových dokumentů.

Pro výuku HTML stačí mít v počítači prohlížeč a standardní poznámkový blok, popř.
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. Napište si ruku do standardního sešitu popř textový editor Notepad ++ a po dokončení tohoto kurzu budete moci používat akcelerační programy. Přihlaste se k odběru aktualizací mého blogu a přečtěte si, jak je používat programy společnosti Microsoft FrontPage, Adobe Dreamweaver.

Pro lepší pochopení jsem připravil příklad. Pečlivě zvažte výkres:

Vyjasnění.

1). Jakýkoli dokument HTML začíná řádkem, jako je tento:


"https://www.w3.org/TR/html4/loose.dtd">

Tímto řádkem sdělujeme prohlížeči, že náš dokument HTML 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. Je to proto, abyste věděli, 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 zbytku servisních štítků se dozvíte v dalších lekcích, v této fázi školení tyto informace stačí.

4). a- název dokumentu.
Tento titul se zobrazí v prohlížeči:

ve vyhledávání I ndex nebo v Google.

5). a- tělo dokumentu.
Zde se nachází obsah dokumentu, např. 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 muset číst a slyšet slovo „tag“.
Značka je vše mezi závorkami< >... Například: , , <html> , <head> , <br> , <p> </i> a ostatní jsou všechny 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 při prohlížení zobrazí v prohlížeči.</p> <p>Značek je mnoho a liší se svým účelem.</p> <p>Existují značky, které je třeba zavřít. Například, <br>otevřete štítek <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>Značka je druh kontejneru, který může obsahovat text, obrázky a další značky ...</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>Tag, který jsme otevřeli jako první - zavřeme poslední, druhý - předposlední atd.</p> <p>○ A zde je příklad nesprávné sekvence počátečních a koncových značek. 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í požadovaný 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 jste ze všeho výše uvedeného pochopili málo nebo téměř nic. Ve druhé lekci se bude více procvičovat a vše si můžete ručně napsat sami a podívat se, jak HTML funguje.

Přejděte na další lekci

Rozhodl jsem se věnovat více pozornosti začátečníkům, kteří chtějí získat znalosti v oblasti stavby stránek. Dotlačil mě k tomu můj učitel, který dělal v příručkách příliš mnoho chyb laboratorní práce... Klidně bych se podíval na zdroj, ze kterého bylo vzdělávací infa převzato, a nechal tam pár řádků svého názoru. Ale o tom teď nejde. Ve své první přednášce budu mluvit o

Jaká je struktura dokumentu HTML

Štítek informuje, že se spustí struktura html dokumentu, - co 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 další informace jsou určeny uživateli, přirozeně to znamená, že informace pro uživatele docházejí.

Teď to trochu vysvětlím. 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ěkteré z nejjednodušších „jednotlivých“ značek:


- tag, který je zodpovědný za zabalení do nového řádku, v místě, kde je tento tag nainstalován. Pojďme se podívat na kód pomocí této značky.

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

Můžete vidět výsledek.

Je značka, která kreslí vodorovnou čáru. Tato značka odkazuje na prvky bloku, řádek vždy začíná na novém řádku. Má 5 atributů:

  • zarovnat - Určuje zarovnání čáry. Lze nastavit vlevo, uprostřed, vpravo.
  • barva – Nastaví barvu čáry.
  • noshade - Nakreslí čáru bez 3D efektů.
  • velikost - Nastavuje tloušťku čáry.
  • width - Nastavuje šíř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 je nalezen.

Další "single" tag je ... Tato značka slouží k ukládání informací určených pro prohlížeče a vyhledávače. Vyhledávače hledají meta tagy, aby získaly popisy stránek, klíčová slova a další data. Je povolen neomezený počet meta tagů, všechny musí být 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 pro stroje, neprovádějí žádné vizuální změny, proto poskytnu pouze zdrojový kód:

Tento řádek označuje, že tvůrce stránky si myslí, že stránka používá kódování UTF-8. Vše se v HTML5 zjednodušilo, pro upřesnění kódování stačí 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írání značek. Samotný název „uzavírací značka“ znamená, že značka vyžaduje povinné uzavření. To se provádí za účelem jasného omezení části textu, na kterou značka působí.

Pro názorný příklad se podívejte na tag který se používá ke zvýraznění textu, nastaví písmo na tučné. Tagy a jsou okraje, které definují oblast výběru textu. Zde je kód, kde poslední řádek zapomněl značku zavřít :

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 propojených stránek.

Značky pro zvýraznění textu

Text na stránce lze zvýraznit několika způsoby. Můžete to udělat 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í písmo na kurzívu.

- přidává podtržení textu.

- navrženo tak, aby zvýraznilo text. Prohlížeče vykreslují takový text kurzívou.

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

- zobrazí text v monospace textu. Vyjmuto z HTML5.

- zobrazí písmo jako horní index. Písmo je zobrazeno nad účaří textu a jeho velikost je zmenšena.

- zobrazí písmo jako dolní index. Zároveň je text umístěn pod účaří zbývajících řádkových znaků a zmenšenou velikostí.

- navrženo tak, aby zvýraznilo text. Prohlížeče vykreslují takový text tučně.

- Zmenší velikost písma o jednu ve srovnání s normálním textem. V HTML se velikost písma měří v konvenčních jednotkách od 1 do 7, průměrná velikost textu používaná ve výchozím nastavení je 3. Tag zmenší text o jednu konvenční jednotku. Vnořené značky jsou povoleny , v tomto případě bude velikost písma 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 normálním textem. V HTML se velikost písma měří v libovolných jednotkách od 1 do 7, průměrná velikost textu použitá ve výchozím nastavení je 3. Přidání značky zvětší text o jednu konvenční jednotku. Vnořené značky jsou povoleny , 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 tak, aby zvýraznil dlouhé uvozovky v dokumentu. Text označený touto značkou se tradičně zobrazuje jako zarovnaný rámeček s odsazením vlevo a vpravo (přibližně 40 pixelů) a odsazením nahoře a dole.


- definuje blok předformátovaného textu.  Takový text je obvykle zobrazen písmem s jednotnou mezerou a se všemi mezerami mezi slovy.  Ve výchozím nastavení je libovolný počet mezer v řádku 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 neexistuje koncová značka, konec odstavce se považuje za začátek dalšího prvku bloku.


..
..

- HTML nabízí šest nadpisů na různých úrovních, které ukazují relativní důležitost sekce za nadpisem.  Takže značka 
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, nadpisy další úrovně jsou menší.  Tagy 
,…,
jsou blokové prvky, vždy začínají na novém řádku a za nimi se na dalším řádku zobrazí další prvky.  Kromě toho jsou před a za nadpisem přidána bílá místa.  Značka má atribut zarovnat, který určuje zarovnání nadpisu, může být vlevo, odjet- zarovnání nadpisu doleva, centrum- zarovnání na střed, že jo- pravé zarovnání, ospravedlnit- zarovnání do bloku (pravá i levá).  Tato hodnota funguje pouze pro záhlaví, které má více než jeden řádek.



- je kontejner pro změnu vlastností písma, jako je velikost, barva a typ písma.  Ačkoli je tato značka stále podporována všemi prohlížeči, je zastaralá a doporučuje se ji vypustit ve prospěch stylů.  Značka má 3 atributy: barva- nastavuje barvu textu, tvář- definuje typ písma, velikost- nastavuje velikost písma v libovolných jednotkách.



- označí text jako citaci nebo poznámku pod čarou k jinému materiálu.  Tento výběr je užitečný pro změnu stylu textu pomocí CSS a je také užitečný pro rozdělení kódu HTML do strukturních prvků.  Prohlížeče obvykle vkládají text do kontejneru kurzívou.



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


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


Níže je kód, kde 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:


Publikujte online dokumenty 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í 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?

Webfonty 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 povím o tom, 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


základy HTML obsahují základní pravidla jazyka HTML, popis struktury HTML stránky, vztahy ve struktuře HTML dokumentu mezi HTML prvky.


HTML dokument je běžný textový dokument, lze jej vytvořit jako v běžném textovém editoru (notebook) a ve specializovaných se zvýrazněním kódu (Poznámkový blok ++, Visual Studio Code atd.)...  HTML dokument má příponu .html.


HTML dokument se skládá ze stromu HTML prvků a textu.  Každý prvek je ve zdrojovém dokumentu označen počátečním (otvíracím) a koncovým (uzavíracím) tagem (až na vzácné výjimky).


Startovací značka ukazuje, kde prvek začíná, konec - kde končí. Koncová značka se tvoří přidáním lomítka / před název značky:<имя тега> … ...  Mezi počáteční a koncovou značkou je obsah značky - content.


Jednotlivé značky nemohou ukládat obsah přímo do sebe, zapisuje se jako hodnota atributu, například značka vytvoří tlačítko s textem Knoflík uvnitř.


Značky mohou být vnořeny do sebe, např. 
Text
...  Při investování byste měli dodržovat pořadí uzavírání (princip "matrjošky"), například následující záznam bude nesprávný: 
Text
 .


Elementy HTML mohou mít atributy (globální, které platí pro všechny elementy HTML, a jejich vlastní).  Atributy se zapisují do úvodní značky prvku a obsahují název a hodnotu zadanou ve formátu název atributu = "hodnota".  Atributy umožňují měnit vlastnosti a chování prvku, pro který jsou nastaveny.


Každému prvku lze přiřadit více hodnot třídy a pouze jednu hodnotu id.  Více hodnot třídy je odděleno mezerou, 
...  Hodnoty class a id se musí skládat pouze z písmen, čísel, pomlček a podtržítek a musí začínat pouze písmeny nebo čísly.


Prohlížeč prohlíží (interpretuje) dokument HTML, vytváří jeho strukturu (DOM) a zobrazuje jej podle pokynů obsažených v tomto souboru (styky, skripty).  Pokud je označení správné, zobrazí se v okně prohlížeče stránka HTML obsahující prvky HTML – záhlaví, tabulky, obrázky atd.


Interpretační proces (analýza) spustí se před úplným načtením webové stránky do prohlížeče.  Prohlížeče zpracovávají HTML dokumenty sekvenčně od začátku, zatímco zpracovávají CSS a korelují styly s prvky stránky.


HTML dokument se skládá ze dvou částí - nadpisu - mezi tagy  …  a obsahová část - mezi tagy  …  .


Struktura webové stránky



1. Struktura HTML dokumentu


HTML se řídí pravidly nalezenými v souboru deklarace typu dokumentu (Definice typu dokumentu nebo DTD)...  DTD je dokument XML, který definuje, které značky, atributy a jejich hodnoty jsou platné pro konkrétní typ HTML.  Každá HTML verze má svůj vlastní DTD.


DOCTYPE odpovídá za správné zobrazení webové stránky prohlížečem.  DOCTYPE definuje nejen verzi HTML (jako html), ale také odpovídající soubor DTD na internetu.

  

 
 
... 
 
 

 



Prvky uvnitř značky , tvoří strom dokumentů, tzv objektový model dokumentu (DOM)...  V tomto případě prvek je kořenový prvek.

 
Rýže.  1. Nejjednodušší struktura webové stránky 
Pro pochopení interakce prvků webové stránky je nutné uvažovat o tzv "Rodinné vztahy" mezi prvky.  Vztahy mezi více vnořenými prvky jsou kategorizovány jako nadřazené, podřízené a sourozenecké.


Předek- prvek, který obsahuje další prvky.  Na obrázku 1 je předek pro všechny prvky ...  Zároveň živel je předkem všech značek, které obsahuje: 
 , 
 ,  ,