Základy HTML: základní pravidla jazyka HTML, popis struktury HTML stránky, poznámky ke struktuře HTML dokumentu mezi HTML prvky.
HTML dokument je základní textový dokument, který lze vytvořit jak v základním textovém editoru (Notepad), tak ve specializovaném kódu (Notepad++, Visual Studio Code atd.). HTML dokument je extension.html.
HTML dokument se skládá ze stromu HTML prvků a textu. Prvek vzhledu je ve výstupním dokumentu označen tagem head (otevře) a end (zavře) (za značkou vzácnosti).
Počáteční značka ukazuje, kde prvek začíná, a koncová značka ukazuje, kde končí. Značka, která se uzavírá, se vytvoří přidáním lomítka / před název značky: … . Mezi předním a uzavíracím štítkem je místo něj štítek obsahu.
Jednotlivé tagy nelze uložit doprostřed, zapisují se jako hodnoty atributů, např. tag vytvoří tlačítko s textem Button uprostřed.
Značky lze vnořovat jedna do druhé, např.
Text
. Při vkládání stop dodržujte pořadí, v jakém jsou uzavřeny (princip „Matrioshka“), například úvodní záznam bude nesprávný:Text
.Elementy HTML mohou mít atributy (globální, které platí pro všechny elementy HTML a jsou platné). Atributy se zapisují ke jménu a hodnotě prvku, která je uvedena ve formátu atributu name="value". Atributy umožňují změnit sílu a chování prvku, pro který je vůně určena.
Prvek vzhledu může mít hodnotu třídy a alespoň jednu hodnotu id. Více hodnot třídy se zapisuje pomocí pass, . Hodnoty class a id musí být tvořeny písmeny, číslicemi, pomlčkami a malými písmeny a musí začínat písmeny a číslicemi.
Prohlížeč prohlédne (interpretuje) HTML dokument, jeho strukturu (DOM) a zobrazí jej podle instrukcí obsažených v souboru (styky, skripty). Pokud je rozložení správné, v okně prohlížeče se zobrazí postranní panel HTML obsahující prvky HTML – záhlaví, tabulky, obrázky atd.
Začíná proces interpretace (parsování), do prohlížeče se importuje první spodní webová stránka. Prohlížeče analyzují dokumenty HTML postupně, analyzují CSS a porovnávají šablony stylů s bočními prvky.
HTML dokument a dvě sekce - záhlaví - mezi tagy ... a podčást - mezi tagy ... .
Struktura webu 1. Struktura HTML dokumentuJazyk HTML se řídí pravidly, která platí pro typ souboru a typ dokumentu (Definice typu dokumentu nebo DTD). DTD je dokument XML, který identifikuje značky, atributy a jejich význam pro konkrétní typ HTML. Pro skinovou verzi HTML existuje místní DTD.
DOCTYPE označuje, že webová stránka je prohlížečem zobrazena správně. DOCTYPE označuje nejen verzi HTML (například html), ale také soubor DTD na internetu.
...
Prvky nacházející se uprostřed tagu vytvářejí strom dokumentu, tzv. document object model, DOM (document object model). Tento prvek je kořenový prvek.
Malý 1. Nejjednodušší struktura webové stránky Chcete-li porozumět interakci mezi prvky webové stránky, musíte se podívat na vztahy mezi prvky. Záznamy mezi více vloženými prvky jsou rozděleny na otcovy, dceřiné a sesterské.
Předek je prvek, který obsahuje další prvky ze sebe. Pro malého je předkem všech prvků є. Element je zároveň předkem pro všechny tagy, které se nacházejí v novém: ,
, , atd.
Podložka je prvek vytvořený uprostřed jednoho nebo více typů prvků. Například je to valník a prvek
Є na zemi jednu hodinu po dobu і.
Batkovský prvek je prvek spojený s ostatními prvky nižší úrovně a nachází se pro ně na stromě. 1 na miminko. Štítek
A ještě víc kvůli otci.
Podřízený prvek je prvek, který je přímo podřízen jinému prvku vyšší úrovně. Pro malou 1 lishe elementi, ,
Mám 100% dceřiné společnosti.
Sesterský prvek je prvek, který je podobný prvku prastarého Otce z analyzovaných prvků, takzvaným prvkům stejné úrovně. Pro malou jsou 1 prvky stejné úrovně, stejně jako prvky, a
A mezi sebou jako sestry.
1.1. Prvek 1.2. živelSekce ... obsahuje technické informace o stránce: název, popis, klíčová slova pro zvukové stroje, kódování atd. Zadané informace se nezobrazují v okně prohlížeče, takže musíte zadat údaje, které prohlížeči sdělí, aby stránku zpracoval.
1.2.1. živelObov'yazkovy tag sekce je tag. Text umístěný uprostřed této značky se objeví v záhlaví webového prohlížeče. Délka názvu nesmí přesáhnout 60 znaků, aby se vešel do názvu. Text záhlaví musí obsahovat co největší popis namísto webové stránky.
1.2.2. živelNepotřebná značka pro sekci je jedna značka. Pomocí této nápovědy můžete místo stránky a klíčových slov nastavit popis pro vyhledávače, autora HTML dokumentu a další autority metadat. Prvek může obsahovat řadu prvků, což znamená, že v kombinaci s použitými atributy nesou různé informace.
Popis namísto stránky a klíčových slov může být uveden v mnoha jazycích, například v ruštině a angličtině:
Tuto další značku můžete zablokovat nebo povolit indexování webové stránky vyhledávači:
Chcete-li stránku po hodině automaticky znovu aktivovat, musíte rychle aktualizovat hodnoty obnovení:
Stránka bude znovu navštívena za 30 sekund. Chcete-li přenést zprávu na jinou stránku, musíte zadat adresu URL v parametru url:
. V praxi je možné určit místo vzniku těchto hlavních značek na základě jejich povahy. Vzhledem k tomu, že tagy, stejně jako související, blízké tagy, jsou vynechány, pak může program prohlížeče sám určit, kde je viník. Nedoporučujeme však tyto značky při tvorbě WWW stránek vynechávat.
Nejjednodušší správný HTML dokument.
< HEAD >
< TITLE >Název dokumentu TITLE >
HLAVA >
< BODY >
TĚLO >
TagyHTML
Jazyk HTML je tvořen speciálními indikátory – tagy. Mohou se také nazývat příkazy, instrukce nebo HTML kódy.
Značka je pokyn pro prohlížeč, který určuje, jak má být text vykreslen. Všechny značky začínají symbolem menší než (). Nazývá se několik různých symbolů patní oblouky. Po otevřeném plášti jděte klíčové slovo Co ta značka znamená?
Značka vzhledu v HTML má speciální účely. Rejstřík písmen v názvech tagů není podstatný - můžete upravovat malá i velká písmena, pokud chcete upravit velká písmena tak, aby tagy byly konzistentní s původním textem dokumentu.
Existují dva typy značek – spárované a nepárové.
Kluci značky– co se otevírá a zavírá, podobně jako u kulatých ramen algebraického výrazu. Zápach proudí do textu od místa, kde je napsán, až po místo, kde je naznačen koncový znak (uzavřené štítky začínají šikmým symbolem rýže (/).
Například,< HTML >HTML >,< P >P>, H3>
Nespárované tagy dávají jednorázový efekt v místě jejich výskytu, není potřeba ten, který se zavírá.
Například,
, ,
Značka nese informace o webu a nezobrazuje se na obrazovce prohlížeče: obsahuje informace o kódování webové stránky, o autorovi a také sadu klíčových slov pro vyhledávání, která zobrazují web.
zadek.
Zadek stolu
Ze zadku je vidět, že stránka vikory kódu W Windows-1251 je dosud nejrozšířenější, stačí do tohoto zobrazení na vaší stránce okamžitě vložit tuto značku; autor příběhu – Ivan Ivanov; Strana je věnována tvorům.
Když je dokument zobrazen v prohlížeči, samotné značky se nezobrazují, ale ovlivňují způsob zobrazení dokumentu. Pokud značka v abstraktu určuje klíčové slovo, které není přítomno v textu HTML, je značka zcela ignorována.
Atributy značekPřidané značky mohou často zakrýt atributy, které přispívají k efektu vytvořenému značkou.
Atributy jsou další klíčová slova, doplněná klíčovým slovem tag a jedním s mezerami.
Atributy mohou mít význam zapsaný za rovnítkem (=). Nejprve umístěte hodnoty atributů do záložek (jednoduché nebo dvojité). Řada tlapek se neprovinila umístěním stejných tlapek doprostřed. Můžete vynechat záložky pro hodnoty atributů, které se skládají z následujících symbolů:
mezi hodinami;
pomlčky (-).
symboly anglické abecedy;
Můžete také snížit záložky pro hodnoty atributů, které jsou tvořeny z dalších symbolů (návrat k technické koncepci ):
znaky anglické abecedy (A - Z, a - z)
číslice (0–9)
mezi hodinami
pomlčky (-)
Tedy WIDTH=80 a ALIGN=CENTER - zkratky jsou povoleny pro WIDTH="80" a ALIGN="CENTER" .
Značky, které jsou uzavřené, neovlivňují atributy.
aplikujte to. FONT >
.
| Vodorovné vyrovnání B >TD > Na střed | ||||||||
| Vertikální zarovnání B >TD > valign=top > Podél horního okraje TD > | Středová TD > | Podél spodního okraje TD > TR > TABULKA > Výsledkem je následující tabulka: Horizontální zarovnání Na střed Livoruch Pravoruký Virus podle Podél horního okraje Na střed Podél spodního okraje
Úspěch N p/n Přezdívka Školní třídaPraktický robot č. 9 Meta: Naučte se vytvářet a formátovat jednoduché tabulky pomocí textového editoru Poznámkový blok. Vytvořte novou webovou stránku, která může v prohlížeči vypadat takto: PřezdívkaTelefonní číslo Petrova A.I. 31-74-16 Smirnov V.P. 46-29-89 Barva pozadí stolu je šedá, šířka rámu stolu je 1. Do prvku zadejte název stránky „P/r č. 14“. Podívejte se na vytvořenou webovou stránku v okně prohlížeče. Přejděte zpět k souboru uloženému v programu Poznámkový blok. Telefonní registr PřezdívkaTelefonní číslo Petrova A.I. 31-74-16 Smirnov V.P. 46-29-89 Barva pozadí pro střed první řady je světle zelená, barva pozadí pro střed ostatních řad je stříbrná, šířka rámu stolu je 5. Podívejte se na webovou stránku v okně prohlížeče. Ušetřete své peníze. Kombinace řad nebo postavení uprostřed . Při skládání stolu je nutné spojit (sloučit) řadu řad nebo hromádek do jednoho středu. Pro které existují atributy: colspan - udává počet řádků sdružených v jednom středu (na řádek = 1), rowspan - udává počet řádků sdružených v jednom středu (na řádek = 1). Aplikovat: 11 Veškerá důležitost takové tabulky spočívá ve vzhledu parametru rowspan="2", jehož číslo udává počet "podřádků". doslova kolik řádků bylo uprostřed naštvaných. Jelikož v symetrické tabulce čteme levák-pravák, tak zde platí totéž, ale proč má kód před dvojkou číslici tři? Všechno je velmi jednoduché - doslova kód pro první řádek je dešifrován jako „složení, na místo 1“, „komplexní, na místo 3, který se skládá ze dvou řad“, kód pro druhý řádek je dešifrován jako „složený, na místo 2“. Yak bachimo, fyzický prostřední 3 položte do první řady! Protože máme místnosti, které jsou propojeny vodorovně, pak místo tagu rowspan je v tomto prostoru, který zabírá plochu mnoha lidí, přirozeně nahrazen tag colspan). Například:
Praktický robot č. 10 Meta: Naučte se vytvářet skládací tabulky pomocí textového editoru Poznámkový blok. Otevřete textový editor Poznámkový blok. Vytvořte novou webovou stránku, která bude v prohlížeči vypadat takto: Úspěch p/pPřezdívka Škola Třída Chemie skóre 1 p/r 2 p/r Ivanov Petrov Sidorov Barva první řady stolu je akvamarínová, šířka stolu je 500, šířka rámu stolu je 3. Do prvku zadejte název stránky „P/r č. 10“. Podívejte se na vytvořenou webovou stránku v okně prohlížeče. Přejděte zpět k souboru uloženému v programu Poznámkový blok. Rozložení webové stránky za doplňkovou tabulkou.
Rozvržení webové stránky lze ručně kombinovat s doplňkovou tabulkou. Jsou možné různé možnosti rozložení. Pojďme se podívat na jejich činy.
Malý 4.12. Příklad uspořádání webové stránky. První možnost Před takovým rozložením můžete zavést „vztlak“ místo strany, takže se změnou velikosti obrazovky se prostor musí vejít do užšího rámečku, takže text „steče“ dolů. Abyste tomu zabránili, musíte vybrat pevnou velikost tabulky, aby se tabulka zobrazila beze změny i na samostatné obrazovce. Jinou možnost. Rozvržení stránky je vytvořeno za doplňkovou tabulkou o šířce 760 pixelů, zarovnanou na střed obrazovky. V takovém případě je velikost obrazovky menší než 800 x 600 pixelů, šířka stránky je téměř celá obrazovka, a pokud je velikost obrazovky menší než 800 x 600 pixelů є 1024 x 768 a větší, vytvořte tabulku o šířce 760 pixelů v střed obrazovky a bílá pole po jejích stranách. V tomto případě můžete ručně vytvořit tabulku, která se skládá ze tří řádků a jednoho sloupce. Horní řádek bude pod názvem stránky, druhý řádek bude pod nabídkou Web a třetí řádek bude přímo pod webem (obr. 4.13).
Malý 4.13. Příklad uspořádání webové stránky. Jinou možnost Pokud je potřeba umístit stránky doprostřed textu, ať už jde o ilustrace, fotografie apod., pak se v tomto případě používají i tabulky. Dole na tupo do druhého středu další řady je vložena tabulka, která se skládá ze dvou řad a tří sloupců. První a třetí krabice první řady mají vložené kojenecké a druhá krabice první řady má název strany. Text se zadává před všechny středy druhého řádku (obr. 4.14). Malý 4.14. Příklad uspořádání webové stránky. Třetí možnost  Téma 5. Pidsumkovova práce „Vytvoření webové stránky na téma v poznámkovém bloku TR“ Studenti doma vypracují a vypracují projekt pro webovou stránku na papíře, který vypadá jako kreativní dílo, a poté jej implementují ve třídě pomocí jazyka HTML. _____________________________________________________________________________ Průběh vývoje založený na knize I. Smirnov "Na web design". Zajímá vás, jak vytvořit postranní stránku HTML? Na to budete muset strávit několik hodin a budete vědět, že svou první stránku můžete vytvořit za 5 dolarů. HTML je zkratka pro HyperText Markup Language. V překladu to znamená „jazyk hypertextových značek“. Je důležité pochopit, že HTML je programování samotného webu. Rozpoznají to všechny moderní prohlížeče. Poté informace zobrazí čtenáři manuálním způsobem, jak bylo dříve autorem zamýšleno. Toto video má speciální značky. Kožní štítek určuje jeho funkci. Je to tak bohaté. V ideálním případě je potřeba číst vše. Ale základní znalosti pro začátek zcela postačují. Základy HTMLNež vytvoříte stránku HTML, musíte vědět, z čeho se skládá. Tento film má dva koncepty: element a tag. Chcete-li označit, který prvek se otevírá a zavírá, použijte zobrazený štítek Co se otevírá a zavírá. Vypadá to takto. namísto Během čtení se zobrazí značka, která se otevírá a zavírá pouze „/“. Celý dokument HTML je sbírkou těchto prvků. Skladby můžete vytvářet na základě struktury dokumentu. Celý web je umístěn mezi dvěma tagy. Když napíšete kód, převezměte ikonu a okamžitě vložte štítek, který se otevírá a zavírá. Pamatujte také, že struktura HTML filmu má hierarchii. Jinak se tomu říká investice. Jsou nejdůležitější, protože všechny ostatní jsou uprostřed. HTML má dva podřízené prvky:
Blok HEAD zobrazuje různé servisní informace. Tyto informace se v prohlížeči nezobrazují. Například vložky pro obchodníky, pro libovolné programy, pro roboty a mnoho dalšího. Nejdůležitější je, že zde není žádný obsah. Část BODY určuje umístění dokumentu, který bude zobrazen. Okamžitě začnete otevírat a zavírat značky, které mohou obsahovat až 10 vnořených prvků. Kromě toho se pro snadné použití doporučuje vkládat značky pro práci s přístupem. Například ano.
Takže se přesvědčme, že tagy, které jsou si navzájem rovny pro význam tagů, jsou rovny jedné a dceřiné tagy jsou „uprostřed“. Díky tomu je mnohem snazší najít a vyhledat požadované položky v kódu. Jinak se můžete ztratit. Abyste ušetřili místo a tělo, můžete také pracovat bez přístupu. Tak stydlivý, aby rozhodnutí neměl vetřelec. Rashtu je potřeba nakrémovat. Jak vytvořit jednoduchou boční stránku v HTMLK psaní kódu potřebujete nějaký editor. Je to tak bohaté. Oblíbené jsou Notepad++ a Adobe Dreamweaver. Můžete také použít Vikoristův poznámkový blok. Takto vypadá editor Notepad++. Jedná se o velmi šikovný editor a přitom finančně nenáročný. Hlavní věc je, že Adobe Dreamweaver je placený. Význam editorů přiřazených k zápisu do poznámkového bloku spočívá v tom, že jsou zvýrazněny speciální značky. Pokud jste nebyli zvýrazněni, pak jste napsali špatně.
Aby podpora odpovídala vašemu jazyku, musí být uvedena v nastavení.
Pojďme se podívat na to, jak vytvořit HTML stranu v poznámkovém bloku. Dokončíme technickou část a přejdeme k přidávání značek. Jak vytvořit webovou stránku v HTML poznámkovém blokuChcete-li začít, otevřete poznámkový blok.
Poté od někoho vytočte to, co je uvedeno na dalším snímku obrazovky.
Volejte a pište rukama, ne jen kopírujte. Pokud budete psát rukama, lépe si zapamatujete celý základ tagů.
Po tomto souboru jej můžete otevřít ve svém prohlížeči a vychutnat si výsledky. Nyní můžete pochopit, jak vytvořit webovou stránku v poznámkovém bloku HTML. Světové konsorcium W3CExistuje organizace jako W3C, která vyvíjí a propaguje všechny standardy pro internet. Všechny prohlížeče splňují tyto standardy a sestavují označení stránek (kódy) v souladu s těmito pravidly. Na oficiálních stránkách HTML distributorů najdete tabulku se všemi tagy a pravidly jejich použití. V rámci tohoto článku zvažujeme ty nejdůležitější. Napadá vás, jaká by mohla být pravidla? Všechny tyto značky mají své vlastní doporučení. Ix obtisk:
Než vytvoříte stránku HTML, musíte se podívat, co obsahuje servisní část HEAD. V oblasti HEAD jsou povinné i volitelné značky. Před značku jazyka umístěte název. VIN je označen jako nadpis. To platí pro každý dokument. A ty, které vidíte ve výsledcích vyhledávače Google, jsou tag title. Přejděme do sekce BODY. Zjistěte, jaké prvky se v prohlížeči zobrazují a které ne. V komentářích se například nezobrazují komentáře. Mohou být použity pro poznámky nebo jako nápověda pro další specialisty, kteří pracují v týmu. Voní to jako Vše, co je mezi, vyhodnocuje program sám. Vezměte prosím na vědomí, že nemůžete vložit značku komentáře do jiné značky komentáře. Protože to otevřeš jen ty. Příklad tohoto příspěvku: pokračování prvního komentáře --> Výsledek bude pro prohlížeč lepší pokračování prvního komentáře --> A osa položek nebude vidět. Další značka, Co vyskakuje Jiný text | ||||||
