Štruktúra html dokumentu je hlavným tagom. Správna štruktúra dokumentu HTML a kód stránky

Dobrý deň, čitatelia a hostia blogu. Opäť som s vami, váš skromný pomocník pri učení základov hypertextového značkovacieho jazyka html. V tomto článku sa chcem dotknúť témy štruktúrovania webových stránok a bližšie vám predstaviť hlavné značky jazyka.

Téma html štruktúry webstránky je jednou z najdôležitejších a je základom tvorby webstránky, po ktorej zvládnutí si ľahko vytvoríte individuálny dizajn pre svoje stránky a weby. Pre podrobné štúdium témy poskytuje článok nielen teoretický materiál, ale aj konkrétny príklad tvorby blogu. Teraz je čas začať sa učiť!

Vyzerá strašidelne, ľahko sa programuje

Pre tých, ktorí sú obzvlášť nepokojní, začnem úvod príkladom. Nižšie je uvedený jednoduchý programový kód, ktorý som napísal špeciálne pre tento článok. Neboj sa. Každý krok bude podrobne vysvetlený.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

Základné značky hypertextového značkovacieho jazyka Nové značky dodávané s html 5 Príklad štruktúrovania stránky článok 1 Tu je text prvého článku. článok 2 Tu je text druhého článku.

Tento kód vytvorí stránku blogu, ktorá je rozdelená na hlavičku, ponuku, hlavný panel (rozloženie), ktorý obsahuje panel obsahu (obsah) a bočný panel (bočný panel), ako aj „pätu“ (pätu ).

Začnime zhrnutie od prvého riadku.

je jazykový prvok, ktorého hlavnou úlohou je označenie typu webového dokumentu. Týmto spôsobom prehliadač určí, akým štandardom sa má stránka zobraziť, keďže dnes existuje viacero verzií html.

Za pozornosť však stojí nová jednotka jazyka tzv štýl. Ako ste už z názvu uhádli, tento tag nastavuje štýl a upravuje usporiadanie objektov na stránke.

Logicky môžem predpokladať, že vám v hlave okamžite vyvstala otázka: „Aký nezrozumiteľný kód sa nachádza v tejto časti programu? Vôbec to nevyzerá ako html!" A odpoveď je takáto: do značky štýlu sa nezapisuje html, ale kód css. Ako už bolo spomenuté, ide o nástroj na formátovanie vzhľadu webových stránok.

Div označuje blokové značky značkovacieho jazyka. Používa sa na izoláciu určitých fragmentov za účelom ich ďalšej modifikácie.

Bloky sú spravované pomocou kaskádových štýlov, t.j. css jazyk Ukážková webová stránka má tri bloky, ktoré sú štylizované pomocou atribútov triedy.

Kód teda obsahuje:

• layout – blok zodpovedný za hlavnú časť stránky,
• bočný panel – bočný panel (zvyčajne vytvorený na navigáciu),
• obsah – blok, v ktorom sa nachádzajú blogové príspevky.

V elemente s definíciou triedy sidebar definujem neusporiadaný zoznam pomocou elementov

A
• . V bloku s obsahom triedy štýlu – značky nadpisov

  a odsek

  Teraz sa pozrime bližšie na blok

  .

  HTML alebo stále HTML 5? Ako rozpoznať?

  V div s triedou štýlu rozloženia sa okrem iných blokov nachádzajú značky ako hlavička, ponuka a päta. Na rozdiel od ostatných prvkov v príklade sú tieto špecifické pre platformu HTML 5.

  Hlavička je teda prvkom hypertextového značkovacieho jazyka, zvyčajne vytvára hlavičku stránok alebo sekcií, do ktorých je vložený nadpis. Stojí za zmienku, že prehliadač Internet Explorer nepodporuje hlavičku do verzie 8, ale zobrazuje jej obsah.

  Hlavným účelom značky ponuky je zobrazenie položiek ponuky. Podobne ako prvky na vytváranie číslovaných a nečíslovaných zoznamov, v kontajneri ponuky je každá položka obsahu zahrnutá v párovej značke

  .

  

  A nakoniec jazyková jednotka päty. V žargóne webových vývojárov sa to niekedy nazýva „päta“ stránky. Táto značka sa nachádza v spodnej časti stránky alebo sekcií. Päta zvyčajne obsahuje informácie o autorstve konkrétneho zdroja, dátume vytvorenia dokumentu, informácie o pozadí alebo iné materiály, ktoré si nevyžadujú osobitnú pozornosť čitateľov webového zdroja.

  Nástroje na vytváranie webových zdrojov

  Na vývoj internetových stránok bolo vytvorených mnoho softvérových produktov. Bežne ich možno rozdeliť na jednoduché editorské programy a profesionálne orientované softvérové ​​produkty.

  Pri tvorbe webstránky si treba najskôr predstaviť, ako sa webová stránka tvorí. Ide o akýsi „základ“ pri vytváraní webových stránok. Preto pred ponorením sa do zložitejších technológií tvorby webových stránok sa odporúča mať aspoň základné znalosti HTML. V tejto lekcii sa zoznámime s HTML, poďme to vyriešiť Štruktúra HTML dokumentu a využívať praktické príklady na upevnenie získaných vedomostí.

  Čo je HTML?

  HTML znamená HyperText Markup Language. Tento jazyk je zodpovedný za presné zobrazenie hypertextu na stránkach lokality. Teraz poďme zistiť, čo je hypertext? Nie je žiadnym tajomstvom, že jedna webová stránka môže obsahovať množstvo rôznych typov informácií, či už je to text, nejaké tabuľky, grafy, videá, audio atď. Všetky tieto informácie sa teda dajú nazvať jedným slovom – hypertext.

  Všimnite si, že HTML je značkovací jazyk, nie programovací jazyk. Tento jazyk nemá žiadne logické funkcie a nie je možné v ňom vykonávať žiadne matematické výpočty. HTML stránky majú príponu .html alebo .htm a sú spracovávané prehliadačmi - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera atď.

  Teraz poďme zistiť, ako prehliadač rozumie tomu, čo a ako má zobraziť na webovej stránke? Je to veľmi jednoduché. Hypertextový značkovací jazyk HTML má vstavané príkazy nazývané tagy. Práve podľa nich sa prehliadač orientuje.

  Štruktúra dokumentu HTML

  Každý HTML dokument (webová stránka) musí mať určitú štruktúru. Vyhnete sa tak možným problémom pri otváraní stránok v prehliadačoch. Ako príklad sa pozrime na stránku, ktorá obsahuje nasledujúci kód HTML:

  ...
  
  

  Pozrime sa, čo je súčasťou tejto štruktúry v tomto poradí:

  1. Prvá vec, ktorá je súčasťou dokumentu HTML, je označenie verzie (prvý riadok). Pre správnu funkciu by mal byť tento riadok uvedený pri rozvrhnutí webovej stránky.

  3. Potom prichádza oblasť pre hornú časť stránky (hlavička). Na to slúži značka . V hlavičke uvádzame názov našej stránky umiestnením názvu stránky medzi značky . Ďalej je uvedené kódovanie dokumentu HTML (piaty riadok). Toto sa robí pre správne zobrazenie cyriliky. Uzavretie oblasti hlavičky štítkom.

  4. Meta tag “description” – súhrn stránky, určený pre vyhľadávače. Tento tag je dôležitý pre optimalizáciu pre vyhľadávače a musí byť vyplnený.

  5. Meta tag “keywords” – kľúčové slová, ktoré sa môžu objaviť na stránke. Tento tag je určený aj pre vyhľadávače. Táto značka sa v súčasnosti používa zriedka.

  6. Telo stránky sa otvorí s tagom a podľa toho sa zatvorí značkou
  
  . Telo webovej stránky zvyčajne obsahuje hlavný obsah – text, video, zvuk a ďalšie informácie.

  Odpovedali sme teda na otázku, čo je HTML, a študovali sme štruktúru HTML dokumentu. Informácie získané v tejto lekcii sú základné pojmy, bez nich sa nezaobídete. O zložitejších veciach si povieme v ďalších lekciách.

  Dnes si povieme niečo o sémantike v HTML5. Už som napísal krátky recenzný príspevok o . Pred čítaním tohto článku vám odporúčam, aby ste sa s ním oboznámili. Teraz sa na tento problém pozrieme podrobnejšie, ako správne a kompetentne zostaviť sémantickú štruktúru dokumentu HTML5.

  V tomto článku si postupne vytvoríme HTML stránku a ozdobíme ju sémantickými HTML5 tagmi.

  

  Obrázok – Sémantická štruktúra stránky HTML5.

  DOCTYPE a metaznačky v názve stránky

  Začnime so štandardnou šablónou dokumentu HTML5 a pridajte metaznačky do hlavy:

  Pridal som značku ktorý je zodpovedný za kľúčové slová. A označiť ktorý je zodpovedný za popis stránky. Pre SEO optimalizáciu sú tieto značky potrebné. Je tiež potrebné správne vyplniť štítok , umiestnené vo vnútri štítkov . Keď je v okne zobrazený samotný dokument, názov dokumentu sa nezobrazí.

  Značky tela dokumentu. Značky tela dokumentu identifikujú súčasti dokumentu HTML zobrazeného v okne. Telo dokumentu môže obsahovať odkazy na iné dokumenty, text a iné formátované informácie.

  Telo dokumentu. Telo dokumentu musí byť medzi značkami A. Toto je časť dokumentu, ktorá sa zobrazuje ako textová a grafická (sémantická) informácia vášho dokumentu.

  Úrovne nadpisov<Нх>. Prvá úroveň nadpisov (najväčšia) je označená číslom 1, ďalšia číslom 2 a tak ďalej až po číslo 6. Väčšina prehliadačov podporuje interpretáciu šiestich úrovní nadpisov, pričom každej z nich definuje vlastný štýl. Vo väčšine prípadov sa text takejto hlavičky zmení na tučný a za textom zostane prázdny riadok. Je dôležité, aby tieto značky určovali logickú štruktúru dokumentu a podieľali sa na indexovaní internetovými vyhľadávačmi. Hlavičky nad úrovňou 6 nie sú štandardné a prehliadač ich nemusí podporovať.

  Značka odseku<Р>. IN Na rozdiel od väčšiny textových procesorov sú návraty vozíka v dokumente HTML ignorované. Prehliadač rozdeľuje odseky iba vtedy, ak existuje značka<Р>. Ak odseky neoddeľujete štítkom<Р>, potom bude dokument vyzerať ako jeden veľký odsek.

  Predformátovaná textová značka

  .
   Tag 
  Umožňuje zobrazenie textu na obrazovke so špecifickým formátovaním.  Vopred naformátovaný text končí koncovou značkou
  .  V rámci vopred naformátovaného textu môžete použiť: riadkovanie, znaky tabulátora (posun o osem znakov doprava), neprimerané písmo Courier nainštalované prehliadačom.
  
  Zoznam značiek. V dokumente HTML existujú tri hlavné typy zoznamov: číslovaný zoznam, zoznam s odrážkami a zoznam s popisom.
  Vnorené zoznamy môžete vytvárať pomocou rôznych značiek zoznamu alebo ich opakovaním v rámci iných značiek.  Ak to chcete urobiť, stačí umiestniť jeden pár štítkov (začiatok a koniec) do druhého.  To, či vnorené položky zoznamu budú mať rovnaké značky označujúce položku zoznamu, závisí od prehliadača.
  Číslované zoznamy.  IN Do očíslovaného zoznamu prehliadač automaticky vloží čísla položiek v poradí.  To znamená, že ak vymažete jednu alebo viac položiek z očíslovaného zoznamu, zostávajúce čísla sa automaticky prepočítajú.
   
  a končí značkou
   
  .
  
  Zoznamy s odrážkami.  Pre Pre zoznamy s odrážkami prehliadač zvyčajne používa odrážky pre položku zoznamu.  Typ značky zvyčajne konfiguruje používateľ prehliadača.
  Číslovaný zoznam začína štartovacou značkou 
  a končí značkou
  .  Každý prvok zoznamu začína značkou<ы>.
  
  Formátovanie písma. HTML umožňuje dva prístupy k výberu písma fragmentov textu.  Na jednej strane môžete priamo naznačiť, že písmo v určitej časti textu má byť tučné alebo kurzíva, t.j.  zmeniť fyzický štýl textu.  Na druhej strane je možné označiť časť textu, že má nejaký nenormálny logický štýl, pričom interpretáciu tohto štýlu ponechávame na prehliadači.
  Grafika vo vnútri dokumentu HTML. Jednou z najatraktívnejších funkcií WEB je možnosť zahrnúť do dokumentu HTML grafické a iné typy údajov.
  Existujú dva spôsoby použitia grafiky v dokumentoch HTML.  Prvým je vkladanie grafických obrázkov do dokumentu, čo umožňuje užívateľovi vidieť obrázky priamo v kontexte ostatných prvkov dokumentu.  To sa vykonáva pomocou značky .  Tento štítok je bodkovaný, t.j.  nezatvára sa.  Syntax značky:
  
  Požadovaný parameter má rovnakú syntax ako štandardná adresa URL.  Táto adresa URL informuje prehliadač, kde sa nachádza
  kreslenie.  Výkres musí byť uložený v grafickom formáte podporovanom prehliadačom.  Dnes sú to formáty GIF, JPG, PNG.  Podporuje ich väčšina prehliadačov.
  ALT="text"
  Tento voliteľný prvok určuje text, ktorý sa zobrazí v prehliadači, ktorý nepodporuje grafiku alebo má zakázanú grafiku obrázkov.  Zvyčajne ide o krátky popis obrázka, ktorý používateľ môže alebo bude môcť vidieť na obrazovke.  Ak tento parameter chýba, väčšina prehliadačov zobrazí namiesto obrázka prázdny rámec.  Tag odporúča sa, ak používatelia používajú negrafický prehliadač, ako je Lynx, a na indexovanie vyhľadávacími nástrojmi.  Text je tiež viditeľný, keď podržíte kurzor myši nejaký čas bez toho, aby ste sa presunuli cez obrázok ako systémový popis pod kurzorom.
  Väčšina prehliadačov vám umožňuje zahrnúť do dokumentu obrázok na pozadí, ktorý sa duplikuje ako obklady v kúpeľni a zobrazí sa ako pozadie celého dokumentu.  Toto je druhý spôsob.  Niektorí používatelia majú radi grafiku na pozadí, iní nie.  Nenápadný priesvitný vzor (tapeta) zvyčajne vyzerá dobre ako pozadie pre väčšinu dokumentov.
  Hypertextové odkazy sú kľúčovým komponentom, vďaka ktorému je WEB pre používateľov atraktívny.  Pridaním hypertextových odkazov (ďalej len odkazy) používateľ vytvára súbor dokumentov prepojený a štruktúrovaný, čo mu umožňuje čo najrýchlejšie a najpohodlnejšie získať potrebné informácie.
  Odkazy majú štandardný formát, ktorý prehliadaču umožňuje ich interpretáciu a vykonávanie potrebných funkcií (metódy volania) v závislosti od typu odkazu.  Odkazy môžu ukazovať na iný dokument, na konkrétne miesto v dokumente alebo vykonávať iné funkcie, ako napríklad vyžiadanie súboru.  Ako hypertextový odkaz môžete použiť text alebo obrázok alebo oboje.
  Štruktúra odkazu v dokumente HTML. Aby prehliadač zobrazil odkaz na adresu URL, musíte do značky hypertextového odkazu umiestniť text alebo obrázok.  Syntax HTML je nasledovná:
  <А HREF="URL">text-alebo-obrázok-ktorý-bude-zvýraznený-ako-odkaz
  
  Tag<А HREF="URL">otvorí popis odkazu a značku– zatvára ho.  Akýkoľvek text nachádzajúci sa medzi týmito dvoma značkami je špeciálnym spôsobom zvýraznený webovým prehliadačom.  Tento text sa zvyčajne zobrazuje podčiarknutý a zvýraznený.  Obraz je orámovaný obdĺžnikovým rámom.  Text, ktorý predstavuje URL, prehliadač nezobrazuje, ale používa sa iba na vykonanie zamýšľaných akcií, keď je odkaz aktivovaný (zvyčajne kliknutím na zvýraznený alebo podčiarknutý text).
  Odkazy na značky v dokumente. Pomocou špeciálnych skrytých označení pre tieto časti môžete vytvoriť prepojenie na rôzne oblasti alebo sekcie toho istého dokumentu.  To vám umožní rýchlo sa presúvať zo sekcie do sekcie v rámci dokumentu bez posúvania obrazovky.  Hneď ako používateľ klikne na odkaz, prehliadač ho presunie do zadanej časti dokumentu a riadok obsahujúci označenie tejto časti sa umiestni na prvý riadok okna prehliadača (ak je „dĺžka“ stačí dokument v okne prehliadača).
  Každý HTML dokument musí začínať značkou <
  HTML>
   a končí sa značkou HTML>
  .  Tieto značky označujú, že čiary medzi nimi predstavujú jeden HTML dokument.  Okrem toho môžete vidieť, že súbor HTML ako celok je prvkom jazyka HTML.
  HTML dokument musí obsahovať aj prvky HEAD (informácie o dokumente) a BODY (telo dokumentu).
  Sekcia dokumentovHLAVA
  Časť HEAD dokumentu definuje jeho názov a obsahuje aj ďalšie informácie o dokumente pre prehliadač.  Táto sekcia je voliteľná, ale odporúča sa, aby ste ju vždy používali vo svojich HTML dokumentoch, pretože dobre napísaná hlavička môže byť celkom užitočná.
  Sekcia hlavičky začína značkou <
  HLAVA>
   a hneď nasleduje za značkou .  Medzi otváracími a zatváracími značkami prvku HEAD sú ďalšie prvky hlavičky.
  Názov dokumentu
  Ak chcete pomenovať dokument HTML, značka je <
  TITLE>
  .  Tento názov sa zobrazí v záhlaví okna prehliadača.  Názov je napísaný medzi značkami  a je to riadok textu.  Dĺžka tohto riadku môže byť ľubovoľná, ale odporúča sa, aby nemal viac ako 60 znakov.  Prvok TITLE by sa mal objaviť iba v sekcii HEAD.
  Sekcia dokumentovBODY
  Táto časť dokumentu obsahuje informácie, ktoré sa zobrazujú v okne prehliadača.  Časť BODY musí začínať značkou <
  BODY>
   a končí sa značkou BODY>
  , medzi ktorými sú umiestnené HTML prvky tvoriace obsah dokumentu.
  Špecifikácia položkyBODY
  Tag má množstvo atribútov, ktoré určujú vzhľad dokumentu.  Nižšie je uvedená špecifikácia značky .
  TEXT="farba textu"
  BGCOLOR="farba pozadia"
  BACKGROUND="adresa obrázka na pozadí"
  Atribút TEXT určuje farbu písma pre celý dokument v RGB alebo znakovej notácii.  Štandardne (ak tento atribút nie je zadaný) sa použijú nastavenia prehliadača.
  Atribút BGCOLOR určuje farbu pozadia okna prehliadača dokumentov v RGB alebo symbolickej notácii.  Predvolene sa používajú nastavenia prehliadača.
  Atribút BACKGROUND vám umožňuje špecifikovať adresu a názov obrázka použitého ako pozadie.  Tento výkres bude reprodukovaný a distribuovaný na pozadí dokumentu.
  Atribúty LINK, VLINK a ALINK určujú farby hypertextových odkazov v RGB alebo v symbolickom zápise.  Predvolene sa používajú nastavenia prehliadača.  Nenavštívený hypertextový odkaz je hypertextový odkaz, ktorý ešte nebol použitý na prechod na iný dokument.  Navštívený hypertextový odkaz je hypertextový odkaz, ktorý už bol použitý na navigáciu do iného dokumentu.  Aktívny hypertextový odkaz – hypertextový odkaz na dokument, na ktorý sa práve prechádza.
  Tipy na používanie atribútov značky BODY
   Ak v tagu BODY zadáte aspoň jednu farbu, zadajte aj ostatné.  Je to spôsobené tým, že používateľ si môže nastaviť nastavenia farieb svojho prehliadača tak, ako je to pre neho pohodlnejšie.  Zadanie iba jednej farby môže u niektorých používateľov spôsobiť zmiznutie textu s farbou pozadia.  V dôsledku toho bude prezeranie dokumentu ťažké.
   Vyberte farbu textu tak, aby „fungovala“ s farbou pozadia alebo s hlavnými farbami obrázka.  Napríklad červená na zelenej môže spôsobiť vážne problémy značnému počtu ľudí.
   BGCOLOR aj BACKGROUND môžu byť špecifikované v elemente BODY.  V tomto prípade prehliadač uprednostňuje BACKGROUND, ale ak nie je možné načítať obrázok na pozadí, použije sa BGCOLOR.  Preto sa snažte nastaviť farbu pozadia tak, aby bola podobná farbe obrázka na pozadí, aby nedošlo k narušeniu vyváženia farieb dokumentu.
  
  
  
  
  
  
  
      
   
      
  Môže byť užitočné prečítať si:
      
  
       
  Cloudové služby - čo to je?;
   
  Prehľad bezplatných alternatívnych textových editorov Názov programu textového editora;
   
  tarifná ponuka "na zavolanie";
   
  Štandardný parameter &Obdobie a problémy pri používaní;
   
  Federálna služba pre reguláciu trhu s alkoholom;
   
  Ako zobraziť poškodenie v CS:GO Nezobrazuje poškodenie v konzole cs go;
   
  Príprava špecifikácií pre výkres;
   
  Príprava výkresov a špecifikácií;