Příklad HTML stránky a základy tvorby

Mnoho jazyků bylo vynalezeno, ale jazyk HTML je jedním z nejvíce speciálních a nejžádanějších. Mnoho dalších klíčových iniciativ v programování je spojeno s tím. Mnohem se stává, když znalost značkovacího jazyka je v mysli vývojáře - HyperText Markup Language (HTML).

V podstatě v HTML není nic komplikovaného a během několika minut si někdo, nejvíce vzdálený od programování a osoba z internetu, vytvoří HTML stránku v notebooku. Příklad, který si zaslouží pozornost, je jednoduchost, která je opravdu přístupná všem.

Obecný popis

Soubor HTML je jedna stránka webu, i když to lze argumentovat, ale skutečnost, že jeden soubor je jedna stránka, je pro začátek srozumitelný.

Soubor HTML začíná hlavičkou DOCTYPE, která označuje, že typ tohoto souboru je HTML. Všechny prvky stránky (značky) jsou označeny v úhlových závorkách. Každý pár ("<"A"> ") obsahuje jednu značku HTML. Typicky jsou značky HTML spárovány, to znamená, že pro každou "značku" existuje "/ tag". Oba jsou uzavřeny v úhlové závorce. Existují jednotlivé značky, z nichž nejpopulárnější "br /" je přechod na další řádek.

Největší značka v souboru je samotný kód HTML, který obsahuje pouze dva značky: HEAD a BODY. V prvním je uvedeno různé popisy, jsou uvedeny odkazy na jiné stránky, mohou být přítomny skripty PHP a jаvascript. Ve druhém je zaznamenán obsah stránky. Také ve formě štítků a skriptů.

Jednoduchá stránka HTML

Příklad vytvoření takové stránky je uveden níže v článku. Zvažte to pečlivě.

Sekce HEAD

Hlavním účelem značky HEAD je obecný popis stránky a běžných skriptů, ačkoli druhý je poměrně relativní koncept. Obvykle jsou důležité pouze dvě věci:

• klíčová slova a popis stránky;
• odkazy na jiné soubory (* .css a * .js).

Chcete-li zobrazit obsah stránky, obsah této části má pouze nepřímý význam, protože to znamená, že někde v jiných souborech existují pravidla CSS pro značky a skripty jiných jazyků.

Stránka HTML obsahuje název (TITLE), který se zobrazuje, když návštěvník přiloží myš na kartu, na které je stránka otevřená. To je důležitý bod, protože to dělá stránku mnohem více prezentovatelné, jednoduše řečeno, podepsané s čitelným textem.

Značky META jsou obecně důležité v internetovém programování, ale když chcete vytvořit stránku HTML v notebooku, příklad je nežádoucí, aby nepořádek s redundantními konstrukty.

Odkazy LINK a SCRIPT by měly být věnovány zvláštní pozornost. První odkazuje na místo, kde se nachází šablona stylů CSS, druhá na umístění souboru kódu jаvascript. Existuje mnoho takových odkazů.

Pokud by se měly skripty oslovit, když je posílena znalost jazyka HTML, měly by se okamžitě věnovat pozornost kaskádovým stylům. Soubory CSS jsou zejména pravidla pro návrh značek HTML.

Sekce BODY

Ve skutečnosti je příkladem stránky HTML oblast BODY. Právě zde obsahuje všechny informace, veškerý obsah stránky webu. Veškeré informace jsou prezentovány ve formě značek a skriptů, například vkládání kódu jаvascript nebo kusů PHP programů.

Je důležité si uvědomit, že příklad webové stránky HTML v prohlížeči a stejný příklad v textovém editoru, zvláště v poznámkovém bloku, je zrovna stejný. V prvním případě máme hotový text HTML, ve kterém jsou spuštěny všechny skripty. Například PHP zpracoval svou část a vytvořil potřebné tagy místo svého kódu na správných místech. jаvascript také splnil své poslání, přestože se o něm stále diskutuje.

HTML je tag, ne skript. Nakonec prohlížeč zobrazí pouze obsah stránky, pouze její značky. Neexistuje žádný PHP kód.

jаvascript má zvláštní postavení, jejím účelem je zobrazovat stránku nejen v době načítání (přetížení), ale také v případě, že je stránka v prohlížeči prohlížeče a uživatel ji studuje.

Jednoduchý příklad HTML kód (pouze část BODY).

A v prohlížeči prohlížeče vypadá to, co je uvedeno níže.

Kód neurčoval, jak by měly vypadat položky zobrazované prohlížečem. Veškerý viditelný design je v pravidlech CSS. V tomto případě v souboru Mcss / scPhpWordRW.css, který byl odkazován (viz první příklad stránky HTML).

Na rozdíl od HTML je téma CSS jednodušší, existují velmi přístupná pravidla a jejich počet je malý, když příklad vytvoření stránky HTML nevyžaduje nic jiného než zápisník. Všechno je velmi dostupné pro okamžité zvládnutí:

To ukazuje, jak snadné je popsáno tag scLogo_vDoc, a tento popis je, že v normálním stavu tag zobrazí obrázek vDoc-logo.jpg, i když myš je nad ním - zobrazí vDoc-logo-h.jpg.

HTML Popis Struktura

Jazyk neznamená žádnou strukturu a koncept syntaxe zde je velmi relativní. Neexistují žádné proměnné, ale existuje mnoho možností. Základem hypertextu je, že existuje prvek (tag), který nutně má jméno.

Název, v případě párového štítku, se skládá z vlastního jména (tagName) a úhlových závorek ("<"+ TagName +"> "), pokud je začátek značky a" ", pokud je zapsán její konec.

Příklad textu HTML stránky popisující atributy je umístěn níže v textu.

Značka může obsahovat atributy, které jsou umístěny za mezerou za názvem značky před uzavíracím úhlem ">". Atributy, pokud mají značku, jsou zapsány pouze na začátku značky. Obsah značky je to, co se nachází mezi začátkem tagu a jeho koncem.

Obecný obsah popisů HTML

HTML vám umožňuje popsat prvky bloku a řetězce. První obsadí určitou oblast v okně prohlížeče, může být umístěna absolutně, tj. Na správném místě v oblasti zobrazení stránky HTML a mít určitou velikost.

Řetězcové prvky se obecně zobrazují v jednom vláknu, tj. Jak je uvedeno v souboru stránky, a jsou zobrazeny. Při načítání stránky může být ovlivněno zobrazení celkového toku. Umístění, viditelnost a další vlastnosti blokových prvků mohou být kdykoli ovlivněny kódem jаvascript.

Kromě jednoduchých prvků nabízí HTML také popis tabulek a formulářů. Tyto prvky jsou velmi žádané v "budování každodenních staveb".

Popis tabulky: značky TABLE, TR, TD

Kdy lze TABLE tag slouží k vytvoření tabulky, zadat počet řádků a TR v řadě pro řadu TD buněk. Na rozdíl od obvyklé tabulky organizace, vzhledem k povaze HTML značkovacího tabulkové organizace omezen na toto prohlášení, protože v případě, že developer chce mít obdélníkový stůl, ve kterém je počet sloupců ve všech řadách stejné, pak musí následovat, že pro sebe.

Základní pozice HTML: dělat všechno, co je uvedeno, ale nic, co není pochopeno. V některých případech není počet sloupců v každém řádku tabulky tak důležitý, ale pokud potřebujete kombinovat buňky vertikálně nebo horizontálně, budete muset vše pečlivě počítat.

Příklad článku HTML, který popisuje jednoduchou tabulku, je jasně uveden v článku.

Zde je tabulka o velikosti tří řádků na tři sloupce, přičemž značka TH se používá v prvním řádku místo značky TD. Neexistují žádné zvláštní rozdíly mezi těmito dvěma značkami, ale první můžete použít k odlišení prvního řádku tabulky a v CSS k TH můžete připojit svůj vlastní styl, který ho odlišuje od ostatních TD.

Popis formuláře: Značky FORM, INPUT

Formuláře jsou nejvíce požadovaná část značek HTML. Pomocí formulářů můžete přenášet informace. Samotná stránka je výstupem informací, ale forma je její vstup.

Příklad HTML stránky s jednoduchým popisem formuláře:

Varianty použití formulářů jsou mnohem větší, ale hlavní možnosti jsou následující. Můžete zadat vstupní pole, přiřadit návrh a obslužné rutiny analyzovat vstup uživatele. Můžete zadat skryté pole a odeslat informace o pozadí ze stránky. Můžete označit tlačítka pro přenos informací, klepnutím na kterou iniciujete přenos informací.

Pomocí HTML

Chcete-li znát jazyk hypertextu, je nepostradatelnou podmínkou pro specializaci v oblasti internetového programování, ale pokud potřebujete psát programy v PHP nebo jаvascript, musíte dokonale vědět HTML + CSS.

Jazyk PHP byl označen v předchozím příkladu. PHP se spouští na serveru, protože stránka s tímto formulářem přelétla ze serveru do prohlížeče s vyplněnými poli. Zejména funkce Testonblur, uvedená v tagu INPUT (handler události onblur), obdržela všechny parametry ve formě textových polí.

Prohlížeč běží jаvascript, a aby pracoval správně údaje tlačítko odeslat zpět na server, to znamená, že konstrukce :. onclick = jQuery ( ‚# k‘) val ( ‚vozík‘), je nutné znát nejen o tom, co jQuery, ale co #to, val, vozík. Přesněji řečeno, je nutné znát základní HTML tagy a obecná pravidla vztahující se na ně styly CSS.

To je docela dost rychle, aby se zvýšila jejich kvalifikace pro specializaci v oblasti internetového programování.