Dělat webové stránky špatně ach těžkéje to tak, jak to vypadá. Naučte se kódovat jednoduchá stránka Spomocí jazyka HTMLa značkování pro web.

Navrhnout a vytvořit jednoduchý web je velmi snadné. Dokonce i začátečníci se mohou naučit webdesign, aniž by vynaložili příliš mnoho úsilí a času.

HTML je hlavní značkovací jazyk pro webové stránky. Pojďme se naučit základy a zkusit vytvořit jednoduchou stránku.

Úvod do HTML

HTML je hypertextový značkovací jazyk.

Hypertext je text, který funguje jako odkaz.

HTML definuje strukturu webové stránky a zajišťuje její správné zobrazení v prohlížeči. HTML dokument může být velmi jednoduchý nebo složitý, v závislosti na úkolu, který právě provádíte.

Webové prohlížeče přijímají dokumenty HTML z webového serveru a zobrazují je jako webové stránky. Každý prohlížeč rozumí HTML a vykresluje obrázky, text, videa tak, jak je napsáno v kódu.

HTML je primární značkovací jazyk pro web. Používá se však k vytváření statických webových stránek, bez interaktivity a animace. html5, Nejnovější verze HTML je v tomto ohledu o něco lepší, zejména pokud jde o video nebo zvuk.

HTML je dnes HTML5, nejnovější verze, která přidává více funkcí než předchozí verze a nyní může definovat, jak se videa, obrázky a text zobrazují na obrazovce prohlížeče.

HTML5 je jedním z mocných nástrojů pro vývoj webových stránek. S HTML5 je streamování médií možné bez použití pluginů třetích stran, jako je Flash. HTML5 také podporuje ukládání dat na straně klienta. To lze použít k podpoře webových aplikací, když je klient offline.

Web a HTML

Web se skládá z propojených webových stránek a aplikací, stejně jako obrázků, videí, animací a interaktivního obsahu. Značkovací jazyky tvoří základ webu. Tyto jazyky se používají od dob, kdy byly webové stránky velmi jednoduché a budou i nadále součástí webu, jeho vývoje a budoucnosti.

HTML zůstává základní dovedností pro všechny webové vývojáře a designéry.

Podle průzkumu W3Techs je HTML jazykem, který používá 74,3 % všech webových stránek.

Jak vytvořit jednoduchou HTML stránku

Vývoj HTML je snadný, a proto se lze snadno naučit kódovat jednoduchou HTML stránku. Nejprve se ale musíte naučit základy jazyka.

Kódování HTML pomocí textového editoru

HTML dokument je v podstatě Textový dokument. Existuje mnoho textových editorů, které můžete použít k psaní HTML. Dvě nejoblíbenější jsou Dreamweaver a Vznešený text. Bezplatné redakce- Notepad++ pro Windows a Text Wrangler pro Mac. Ve skutečnosti můžete vytvořit webovou stránku Microsoft Word, ale neměli byste to dělat, protože to přidává další a nepotřebný kód do HTML dokumentů.

Jako editor použijeme například Notepad++. Můžete si vybrat libovolný editor podle svého výběru.

Vytváření a úpravy HTML

Vytvoření nového dokumentu HTML je stejné jako u jakéhokoli jiného typu dokumentu. Vyberte "Soubor" - "Nový" pro otevření nového dokumentu v programu Poznámkový blok++. Proveďte změny v dokumentu a klikněte na Uložit.

Ukládání HTML

HTML dokument je soubor s příponou .htm nebo .html. Některé editory mohou také poskytovat možnost „Uložit jako HTML“. Je lepší pojmenovat soubor latinkou, malým písmenem a mezery nahradit pomlčkami nebo tečkami.

Pokud jste kód napsali v programu Poznámkový blok a uložili jej jako textový dokument, můžete jej pomocí programu přeložit na html stránku Total Commander. Vyberte příkaz "Přejmenovat" a změňte příponu souboru z .txt na .html.

Formát stránky HTML

HTML jako jazyk se skládá z prvků, značek a atributů, které definují obsah webu. HTML prvky nám umožňují přidávat na webovou stránku tabulky, obrázky, video, audio atd.

HTML prvky

Prvky definují strukturu a obsah webové stránky. Označeno lomenými závorkami kolem názvu prvku. Obsah, který není mezi „<>" se zobrazí na webu. Prvek vypadá asi takto:

značky

Prvek s lomenými závorkami kolem něj tvoří značku ( ). Značky se nezobrazují na obrazovce, ale pomáhají prohlížeči pochopit, co by měl zobrazovat. Počáteční značka označuje začátek prvku a koncová značka označuje jeho konec.

Například:

Úvodní štítek:

Závěrečný štítek:

Obsah mezi otevírací a uzavírací značkou je obsahem prvku.

Tagy lze použít dvěma způsoby:

Použití značek ve dvojicích

Párové tagy obsahují otevírací a uzavírací tag. Takto vypadají:

Zde je nějaký text

Je tam otevírací štítek ( ) a uzavírací značku () pro označení konce odstavce. To znamená, že vše mezi těmito dvěma značkami je odstavec.

Jednotlivé značky

Jednotlivé značky se používají k definování samouzavíracích prvků a vkládání prvků, jako jsou obrázky. Nemusíte definovat začátek a konec těchto prvků.

Tyto prvky jsou zapsány takto:

Závěr / (lomítko) je také volitelný. To je stejné jako nahrávání . Aby však nedošlo k záměně s úvodní značkou, je dobré na konec přidat / (lomítko).

Atributy

Atributy jsou prvky, které rozšiřují značky dodatečné informace. Atribut je umístěn v úvodní značce a obsahuje název a hodnotu.

Značka atributu bude vypadat takto:

Výše uvedená značka 'HTML' má atribut 'lang' s hodnotou 'en-US'.

Struktura dokumentuHTML

Každý HTML dokument má definovanou základní strukturu následující položky:

DOCTYPE neboDTD: Deklarace typu dokumentu určuje verzi používaného HTML. Tato značka je umístěna na začátku dokumentu.

HTML: Pár HTML tagy definuje začátek a konec HTML dokumentu.

KapitolaHLAVA< hlava>: tato sekce definuje obecná informace pro stránku a obvykle krátké. Obsah tohoto prvku se na stránce nezobrazuje. Název obsahuje značku TITLE, která definuje název dokumentu zobrazený v záhlaví prohlížeče. HEADER může také obsahovat metadata nebo odkazy na externí soubory.

KapitolaTĚLO: Tato sekce obsahuje hlavní část stránky. Jeho obsah se zobrazí v prohlížeči. Většina kódu stránky HTML je uvnitř prvku body.

kódování: tato značka určuje kódování použité v dokumentu HTML. Kódování určuje, jak se soubor uloží a jak bude zobrazen. Speciální symboly. Obecně přijímaná hodnota pro tento tag je UTF-8, která umožňuje zobrazit téměř všechny znaky v jazyce.

jednoduchá stránkaHTML

Nyní, když rozumíme základnímu HTML prvky Zkusme vytvořit základní HTML stránku. Začněme vytvořením prázdného textového dokumentu v textovém editoru.

Krok 1: První řádek kódu HTML, který se má přidat, určuje prvek DOCTYPE jako „html“. To znamená, že se používá nejnovější verze HTML.

Krok 3: Poté přidáme značku title se značkou Title a informacemi o znakové sadě.

Ahoj světe

Krok 4: Poté se zapíše značka BODY.

Ahoj světe

Krok 5: Nyní je prázdný dokument HTML připraven. Začněme přidávat text k zobrazení. Přidáme značku názvu

a tag

Definují nadpis první úrovně a odstavec pod ním.

Ahoj světe

Ahoj světe

Jednoduchá HTML stránka

Hlavní HTML stránka je připravena a můžeme ji uložit do složky dle vlastního výběru.

Zobrazení stránkyHTML


Chcete-li zobrazit stránku HTML, musíme ji otevřít v prohlížeči. Přejděte do složky, kde byl dokument HTML uložen, a dvakrát na něj klikněte.

Otevře se v prohlížeči a uvidíme velmi jednoduchou stránku. Můžete zkontrolovat, co ukazuje:

Název jako "Ahoj světe"

Nadpis první úrovně jako „Ahoj světe“

Odstavec s textem "Jednoduchá stránka HTML"

Nyní, když jsme vytvořili jednoduchou HTML stránku, podívejme se, jak můžeme přidat další funkce. HTML poskytuje mnohem více funkcí, než jaké jsme přidali na hlavní HTML stránku. Můžete přidat barvu pozadí, písma, barvy písem, obrázky, odkazy, seznamy a další a vytvořit tak krásnou stránku HTML. Pojďme se na některé z nich podívat další funkce.

Pokročilé formátování textu

HTML poskytuje speciální prvky pro speciální formátování textu.

Úrovně nadpisů lze nastavit pomocí značek

-

. K dispozici je celkem 6 úrovní nadpisů. A

- toto je velikostně největší z nich,

- nejmenší.

značky

se používají k označení začátku nového odstavce. Prohlížeč obvykle přidá jeden prázdný řádek mezi dva odstavce.

Prvky formátování se používají k zobrazení speciálních typů textu. Text lze formátovat pomocí následujících značek:

Tučně -

kurzíva -

podtrženo -

Písmo -

Kompletní seznam těchto značek je k dispozici zde.

Přidávání odkazů

Toto je text odkazu


Přidávání obrázků

Štítek je jeden tag, žádný uzavírací tag. Můžete zadat atributy obrázku.

Atribut src určuje umístění obrázku.

Atribut stylu má mnoho možností, včetně šířky a výšky obrázku v pixelech.

Atribut alt dává Stručný popis Snímky. Používá se, pokud se z nějakého důvodu nenačte obrázek.


Přidání názvu

Štítek

je novinkou v HTML5 a určuje nejvyšší prvek webové stránky. Nadpisy obvykle obsahují logo společnosti, kontaktní informace, navigační odkazy atd. V jednom dokumentu může být více prvků<>.

Pokročilé pojmy v HTML

HTML je technologie, která se snadno učí, takže mnoho návrhářů pracuje pouze se základními pojmy. Pokud chcete plně využít výhod HTML, budete se muset seznámit s pokročilými koncepty. To vám pomůže vytvořit atraktivní web s menší námahou.

Zmíníme několik konceptů, které vám pomohou dále. Můžete se i nadále učit více a používat pokročilé HTML a jeho funkce.

Ověření HTML kódu

Ověření HTML se používá ke kontrole chyb v kódu HTML. Pokud se vaše webová stránka nenačítá, můžete pomocí kontroly najít příčinu problému.

Validace také poskytuje doporučení pro kód, který neodpovídá nejnovějšímu standardu HTML. Neplatný kód HTML způsobí, že web nebude použitelný. To může způsobit problémy s načítáním nebo nekonzistenci výstupu různé prohlížeče. Mnoho ověřovacích služeb je zdarma, například validator.w3.org

Přidání dalších značek

Existuje mnohem více HTML značek a atributů, než jsme zde probírali. Dva dobré výukové zdroje jsou w3schools a HTML Dog, které mají více tutoriálů a úplný seznam značky.

Můžete také použít "Zobrazit zdrojovou stránku" v prohlížeči, abyste prozkoumali kód dobře navržených webových stránek a viděli nové techniky.

S webhostingovou službou můžete do své webové domény přidat více stránek HTML. Mohl bys potřebovat software FTP uploady pro přenos vašich HTML souborů na webový server. Existuje mnoho webhostingových služeb, které poskytují funkci FTP.

DodatekCSS aJavaScript

CSS lze použít k rychlému zlepšení vzhled tvoje stránka. Pomocí CSS můžete přidat barvy, písma a změnit umístění prvků. S tabulkovou vazbou css styly na stránku HTML, můžete změnit styl celého textu.

JavaScript je programovací jazyk a lze jej použít k přidání dalších funkcí na stránky HTML. Příkazy JavaScriptu se vkládají mezi značky. Lze je použít k přidání interaktivních tlačítek, provádění matematických výpočtů a dalších.

Otevře se před vámi úžasný svět vývoje webu. Odvažte se! Zdolání tohoto vrcholu je snadné, stačí jen začít.


Obecně odhadnu čas na základní studium html jako 2-8 hodin, zbytek je volitelný. A samozřejmě doba studia závisí na zájmu. Doporučuji to rozdělit do několika dnů po 20-30 minutách.

Jsi připravený? Tak jdeme!

K vytvoření stránky v html NEPOTŘEBUJEME připojení k internetu.

Budeme potřebovat

1) Vybrat textový editor . na poprvé dost poznámkový blok(v něm potřebujeme pouze příkaz Uložit jako)
Pokud chcete okamžitě začít programovat ve specializovaných textových editorech, věnujte pozornost:
1) pro Okna
Poznámkový blok++(stáhnout nebo )
intype(stažení)

2) pro Mac A linux
editor bluefish(stažení)

Jejich rozdíl od běžných textových editorů spočívá především v tom, že provádějí automatické odsazování, ! umožnit znovu uložit soubor v jiném kódování (všimněte si, že se s ním setkáte v budoucnu), malovat značky v různých barvách, jako je kód ve spodní části lekce. V běžném editoru bude jednobarevný.

2) Jakýkoli internetový prohlížeč jako např internet Explorer pro Windows popř safari pro Mac OS X a iOS. Ano, můžete také Mozilla, Google Chrome , Opera, Yandex A Pošta prohlížeče atd.

Začneme vytvářet HTML stránku

1) vytvořit složku na ploše html. Uděláme to tak, aby byly lekce strukturované a obsažené na jednom místě.

2) Vytvořit náš soubor v textovém editoru, jako je Poznámkový blok. Dále Uložit jako.

Kódování je lepší zvolit UTF-8 a poté vybrat všechny typy souborů a zvolte název souboru s .html na konci, například index.html

Zvolíme jako adresář (složku), kam uložit naše html
Klikněte Uložit. Připraveno!

Často se klade otázka o čem přípona souboru není viditelná. Vezměme to popořadě

Možnost vidět přípony souborů může pomoci určit typ souboru a umožňuje vám to ručně (pomocí příkazu přejmenovat) změnit nejen příponu, ale také typ souboru (například z txt na html)

NEMĚLO by to vypadat takto: fotografie, textový dokument, hra
takhle by to mělo vypadat: foto.jpg; textový dokument.txt; game.exe

Pokud ale názvy souborů stále vypadají jako v první možnosti (BEZ, například .txt ; jpg ; .exe na konci názvu souboru), proveďte následující:

Podíváme se na nastavení souborů a složek:

Pro Windows XP Otevřete libovolnou složku - Nástroje (nahoře na panelu) - Možnosti složky - Zobrazit - Skrýt přípony registrovaných souborů (zrušte zaškrtnutí) - Použít

Pro Windows 7 Otevřete libovolnou složku - Uspořádat - Možnosti souborů a hledání - Zobrazit - Skrýt přípony pro registrované typy souborů (zrušte zaškrtnutí) - Použít

Pro Operační Systém Mac Klikneme na plochu - Finder - Předvolby (Nastavení) - Pokročilé (Upřesnit) - zaškrtneme políčko Zobrazit všechny přípony souborů (Zobrazit přípony všech souborů) - Použít

3) vložte do něj celý kód (spolu s komentáři) níže:



<br>


Název mé stránky


4) otevřete soubor. Pro otevření tohoto souboru můžete zvolit jiný prohlížeč, k tomu stiskneme pravé tlačítko myši na našem souboru index.html - Chcete-li otevřít pomocí a vyberte prohlížeč ze seznamu, například Internet Explorer, Google Chrome, Mozilla, Yandex Browser atd.

V důsledku toho, otevřením internetového prohlížeče, výsledný index.html, měla by se vám zobrazit tato stránka:


Obrázek 1.

Na Obrázek 1 vidíme, jak prohlížeč ve výsledku zobrazil vaši stránku. Text následujících prvků je zvýrazněn červeně:



<br>Název vaší první stránky <br>

Název mé stránky

Toto je moje první webová stránka!

V kódu níže vidíte základní minimum html dokumentu. Musí se to naučit a nemýt se místy otevíráním a zavíráním tagů.



Štítek hlava vybere hlavičku dokumentu. Předepisuje prvky související zejména s používáním Prohlížeče při zpracování prvků vaší stránky (název, klíčová slova, autorství atd.) Konkrétně o jeho obsahu si povíme později.

Štítek titul znamená titulek stránky. Toto je jediný tag obsažený v hlava Ten, který je zobrazen na stránce. To, co zadáte po úvodní a před závěrečnou značkou, bude Název vaší stránky na internetu



<br>Název stránky <br>


Štítek tělo znamená tělo stránky. Co napsat po úvodní a závěrečné značce tělo a bude obsahem vaší stránky


<br>Název stránky <br>

Jakýkoli titul


Jen text

Text v odstavci. Bude se psát s nový řádek a končí uzavírací značkou


Jiný text



Téměř všechny značky v HTML otevírání a zavírání(výjimkou je např. tag img, což znamená vložit obrázek).



<br>Název stránky <br>



Ještě jednou připomínám, že je důležité nezapomínat psát uzavírací značky u všech ostatních typů značek, jinak Prohlížeč přesně nepochopí, kde jste chtěli ten či onen prvek ukončit. Jak je uvedeno níže:



<br>

Chci zvýraznit text tučné, a tento kurzívou



Záměrně jsme zapomněli na závěrečnou značku b za slovem tučně. V důsledku toho prohlížeč zobrazil následující

Chci zvýraznit text tučné, a tento kurzívou

Jak vidíte, text až do konce bude tučný a ten, který měl být kurzívou, bude tučný i kurzíva. Buď opatrný!

5) Pokud chcete ve svém souboru něco upravit index.html(a nyní je standardně otevřen pouze prohlížečem), poté stiskneme pravé tlačítko myši na našem souboru index.html- Vybrat Chcete-li otevřít pomocí a ze seznamu vybereme již textový editor, bude to buď poznámkový blok, nebo jiný textový editor, který jste nainstalovali.

V zásadě vysvětlil základy. Zatím html stránka vypadá docela jednoduše, ale v dalších lekcích vám podrobně povím o těchto a dalších prvcích a jejich účelu - budeme vkládat obrázky, dělat odkazy a mnoho dalšího)

Gratulujeme!
Je to lehké?)

Začněme naši dnešní lekci vytvořením nejjednodušší webové stránky. K tomu si nejprve připravíme textový dokument, poté jej převedeme na htm dokument, poté do něj vložíme pár řádků kódu a poté otevřeme naši vytvořenou webovou stránku v prohlížeči. Poté se seznámíme s konceptem tagů, požadovanými prvky a jejich variantami, které by měly být přítomny na každé webové stránce. Budeme se zabývat jejich rozdíly a vlastnostmi jejich aplikace. Poté se naučíme základní pravidla nezbytná při psaní kódů. Týkají se požadovaných prvků, pravidel pro psaní značek a funkcí prohlížeče při vnímání kódu.

Základní struktura HTML
Pojďme vytvořit ultimátní jednoduchý html dokument. Chcete-li to provést, vytvořte v počítači složku. Pojmenujte ji, jak chcete. Jdeme do toho, klikneme klikněte pravým tlačítkem myši myši podle prázdné pole a vyberte Nový > Textový dokument. Otevřete vytvořený textový dokument a horní menu vyberte "Soubor" > "Uložit jako...". V dialogovém okně, které se otevře, napíšeme do řádku "Název souboru" index.htm. V řádku "Kódování" vyberte UTF-8 a klikněte na "Uložit". Budeme mít indexový soubor, do kterého zadáme všechny HTML kódy.

Nyní zkopírujte níže uvedený kód a vložte jej do souboru index. Důležité! Tento soubor musíte otevřít pomocí speciálního editoru. Obvykle používám Poznámkový blok. Chcete-li to provést, klepněte pravým tlačítkem myši na soubor index a vyberte "Otevřít pomocí..." > "Poznámkový blok". Existují další speciální editory se zvýrazněním značek. Kdo je pohodlnější. Poté stisknutím kláves Ctrl + S uložíme naše změny a poté dvakrát klikneme na index. V prohlížeči se otevře naše první vytvořená webová stránka.

Moje první webová stránka

Toto je moje první webová stránka

Aby prohlížeč při zobrazení dokumentu pochopil, že se nejedná o prostý text, ale o formátovací prvek a jsou aplikovány tagy. Existují dva typy štítků – jednoduché a párové (kontejnery). Jeden tag se používá samostatně, zatímco párový tag může obsahovat další tagy nebo text. Párové štítky se skládají ze dvou částí - otevírací a zavírací. Úvodní tag je označen jako jeden tag a lomítko tag> se používá v závěrečném tagu.

Každý HTML dokument musí začínat tagem a končit jeho protějškem, tagem. Kromě nich, v daný soubor obsahuje další tři páry značek, které musí být přítomny v jakémkoli jiném HTML dokumentu. Pár značek

A používají se k odkazování na jakékoli informace o samotném dokumentu HTML. Značky a slouží k přidání názvu, který se zobrazí v záhlaví prohlížeče. Značky a se používají k odkazování na jakýkoli text zobrazený na stránce HTML.

Povinné prvky dokumentu XHTML
V jazyce XHTML více nová verze HTML, pro vytvářené webové stránky je potřeba ještě jeden prvek – tag. Slouží k označení typu aktuálního dokumentu - DTD (definice typu dokumentu, popis typu dokumentu). To je nezbytné, aby prohlížeč věděl, jak interpretovat aktuální webovou stránku. Tato značka se objeví v horní části souboru a identifikuje aktuální HTML dokument jako vyhovující požadavkům XHTML (nebo vyhovujícím specifikaci XHTML). Pokud vytváříte dokument kompatibilní s XHTML, může vypadat nějak takto:

Moje XHTML stránka Toto je moje první XHTML stránka.

Tag má tři varianty: Strict, Transitional a Frameset. V horní části dokumentu HTML deklarujete, který z nich chcete použít.

Přísný Tuto variantu značky použijte pouze v případě, že jste si jisti, že všichni návštěvníci vaší webové stránky používají novější webové prohlížeče, které umí správně interpretovat šablony stylů. Striktní varianta vypadá takto:

Přechodné Použijte tuto odrůdu, pokud nevíte přesně které software se použije k zobrazení vaší webové stránky.

Sada rámů Tuto odrůdu použijte při práci s rámečky.

Věnujte pozornost dalšímu rozdílu mezi XHTML kódy a běžnými. HTML dokumenty: Značka má tři nové atributy: xmlns, xml:lang a lang. Když HTML aplikace museli jste zahrnout pouze značku k identifikaci souboru jako dokumentu HTML, ale v tomto případě musíte přidat atribut xmlns, který spojuje dokument s definicí XHTML W3C, která se stále vyvíjí. Prozatím nezapomeňte zahrnout značku a celou značku na všechny své webové stránky.

Správné kódování
Samotné značky k vytvoření dobré webové stránky nestačí. Pokud stále můžete při psaní HTML kódů dělat nějaké chyby, pak XHTML kódy vyžadují přísné dodržování pravidel. Ačkoli aktuální verze většina moderních prohlížečů je schopna správně interpretovat vaše kódy, i když jsou zadány z nesprávných značek, následující verze prohlížečů se v takové vynalézavosti nebudou lišit. Nyní můžete myslet na budoucnost a naučit se některé následovat základní principy psaní webových kódů, které odpovídají standardům XHTML.

Zahrňte do kódů svých webových stránek všechny požadované prvky XHTML popsané v tomto kurzu. Můžete si sami vytvořit šablonu dokumentu XHTML, která bude zpočátku obsahovat všechny potřebné značky.

Pro všechny značky používejte malá písmena. Pro prohlížeč záznamů

A jsou ekvivalentní (i když nemusí nutně být). Používejte malá písmena ve všech příkazech, abyste nemuseli kódovat své webové stránky, když se změní standardy XHTML.

Nikdy nepoužívejte mezery v názvech souborů. starý počítačové systémy mám potíže se čtením názvů souborů, které obsahují mezery (jako moje první stránka .htm). Místo mezery zadejte podtržítko (například my_first_page.htm).

Všechny hodnoty atributů tagu musí být uzavřeny ve dvojitých nebo jednoduchých uvozovkách. Absence uvozovek nepovede k chybám, prohlížeče v mnoha případech správně zpracovávají kód bez uvozovek, s výjimkou textu obsahujícího mezery. Potom prohlížeč vezme jako hodnotu pouze první slovo. Proto si vždy zvykněte uvádět hodnoty atributů tagů.

Pokud byl některý tag nebo jeho atribut zapsán nesprávně, prohlížeč bude takový tag ignorovat a zobrazí text, jako by tag neexistoval. Opět je třeba se vyhnout neznámým značkám, protože HTML kód neprojde validací.

Existuje určitá hierarchie vnoření značek. Například tag

Musí být uvnitř kontejneru a nikde jinde. Abyste předešli chybám, ujistěte se, že jsou značky v kódu umístěny správně. Pokud jsou značky v hierarchii odkazů navzájem ekvivalentní, pak na jejich pořadí nezáleží. Můžete tedy prohodit značky, což neovlivní konečný výsledek.

Pro koncovou značku existují tři stavy: Povinné, Nevyžadováno nebo Nevyžadováno. Požadovaný koncový tag musí být vždy přítomen, jinak dojde při vykreslování dokumentu k chybě. U některých značek není koncová značka vůbec. Nepovinná uzavírací značka označuje, že ji vývojář může přidat nebo vynechat, nepovede to k chybě. Doporučuje se však všechny zavřít podobné značky, včetně volitelných, disciplinuje, vytváří harmoničtější a přísnější kód, který lze snadno upravovat.

Zajímá vás, jak vytvořit HTML stránku? Chcete-li to provést, musíte strávit několik hodin a budete vědět a svou první stránku můžete vytvořit za 5 minut.

HTML je zkratka pro HyperText značkovací jazyk. V překladu to znamená „Hypertextový značkovací jazyk“. Je důležité pochopit, že HTML není programovací jazyk, ale značka webu.

Všechno moderní prohlížeče schopen to rozpoznat. Informace pak zobrazují uživatelsky přívětivým způsobem, jak zamýšlel autor.

Tento jazyk používá speciální značky. Každý tag má svou vlastní funkci. Je jich hodně. Ideální je naučit se všechno. Pro začátečníka ale stačí základní znalosti.

Základy HTML

Než vytvoříte stránku HTML, musíte vědět, z čeho se skládá. V tomto jazyce existují dva pojmy: prvek a značka.

Počáteční a koncové značky se používají k označení, kde tento prvek začíná a končí. Vypadá to takhle.

<открывающий тег>obsah

Jak vidíte, jediný rozdíl mezi počáteční a závěrečnou značkou je "/".

Celý dokument HTML je sbírkou těchto prvků. Existovat určité požadavky ke struktuře dokumentu. Veškerý obsah stránky musí být mezi dvěma značkami. A. Když píšete kód, zvykněte si vkládat otevírací a zavírací tag současně.

Pamatujte také, že struktura jazyk HTML má svou hierarchii. Jinak se tomu říká hnízdění. je nejdůležitější, protože všechny ostatní jsou uvnitř.

HTML má dva podřízený prvek:

  • ... ;
  • .. .

Blok HEAD obsahuje různé servisní informace. Tyto informace se v prohlížeči nezobrazují. Například návody pro vývojáře, pro libovolné programy, pro roboty a mnoho dalšího.

Nejdůležitější je, že zde není žádný obsah.

Sekce BODY určuje obsah dokumentu, který se zobrazí uživateli.

Naučte se okamžitě vytvářet otevřené a uzavřené značky, protože vnořených prvků může být 10. Kromě toho se pro pohodlí doporučuje, aby byly vnořené značky odsazeny. Například takto.

To se děje tak, že značky stejné důležitosti jsou na stejné úrovni a podřízené značky jsou „uvnitř“. Je to tedy mnohem pohodlnější pro vnímání a hledání potřebného kusu kódu. Jinak se můžete splést. Ale pro úsporu místa může být tělo také provedeno bez odsazení. To se děje tak, aby všichni ostatní neměli odsazení navíc. Všechno ostatní by mělo být odděleno.

Jak vytvořit jednoduchou HTML stránku

K psaní kódu potřebujete nějaký editor. Je jich hodně. Oblíbené jsou Notepad++ a Adobe Dreamweaver. Lze použít i poznámkový blok.

Takto vypadá editor Notepad++.

Toto je velmi pohodlný editor a přitom zdarma. Výše uvedený Adobe Dreamweaver je placený. Rozdíl mezi editory určenými pro psaní a poznámkovým blokem je v tom, že jsou zvýrazněny speciální značky. Pokud to není zvýrazněno, pak jsi napsal špatně.

Aby zvýraznění odpovídalo jazyku, musí být specifikováno v nastavení.

Podívejme se, jak vytvořit HTML stránku v poznámkovém bloku. To znamená, že dokončíme technickou část a poté přistoupíme přímo ke studiu značek.

Jak vytvořit webovou stránku v HTML poznámkovém bloku

Nejprve otevřete poznámkový blok.

Poté do něj zadejte to, co je uvedeno na následujícím snímku obrazovky.

Zvykněte si psát rukama, ne jen opisovat. Když píšete rukama, lépe si zapamatujete celou databázi značek.

Poté lze soubor otevřít v prohlížeči a obdivovat výsledek. Nyní byste měli být schopni pochopit, jak vytvořit webovou stránku v HTML Poznámkovém bloku.

Světové konsorcium W3C

Existuje taková organizace jako W3C, která vyvíjí a implementuje všechny standardy pro internet. Všechny prohlížeče se řídí těmito standardy a zpracovávají označení stránek (kódy) podle těchto pravidel.

Na oficiálních stránkách vývojářů jazyka HTML najdete tabulku se všemi značkami a pravidly jejich použití. V tomto článku se podíváme na ty nejzákladnější.

Napadá vás, jaká by mohla být pravidla? Všechny popisované tagy mají své doporučení. Je jich několik:

  • Volitelný štítek.
  • Zakázáno.
  • Prázdný štítek.
  • Zastaralý
  • Ztracený.

Značky v HTML

Před vytvořením stránky HTML musíte zjistit, co by mělo být v servisní části HEAD.

Oblast HEAD má povinné i volitelné značky. Značka názvu je povinná. Označuje se záhlaví. Je přiřazen k celému dokumentu. A co vidíte ve výsledcích vyhledávač Google je značka názvu.

Přejděme do sekce BODY. Existují prvky, které se zobrazují v prohlížeči, a některé se nezobrazují. Uživateli se například nezobrazují komentáře. Mohou být použity pro poznámky nebo jako nápověda pro ostatní zaměstnance, pokud pracujete v týmu.

Jsou označeny jako

Všechno mezi tím, program takto nahlíží. Všimněte si, že nemůžete vnořit značku komentáře do jiné značky komentáře. Protože jakmile otevřete.

Příklad takového hnízdění:

pokračování prvního komentáře -->

Výsledek v prohlížeči bude následující

pokračování prvního komentáře -->

A tady je kousek nebude vidět. Druhý otevírací štítek