Ak vytvárate šablónu od začiatku, musíte začať od niečoho. Vzhľadom na to, že štandard HTML5 je „rozšírený po celej krajine“, v tomto článku uvediem príklad prázdnej šablóny HTML5.
V novom štandarde sa veľa zjednodušilo a teraz základná časť vyzerá takto:
...
Nové značky HTML5
HTML5 predstavuje niekoľko nových značiek pre štruktúru kódu: , , , , , ktoré v niektorých prípadoch nahrádzajú obvyklé . Toto bolo urobené pre vyhľadávacie roboty, aby lepšie rozpoznali kód stránky a oddelili hlavný obsah od pomocných prvkov.
Pomocou nových značiek môže prázdna šablóna HTML5 vyzerať takto:
Navigačné menu
Obsah – hlavný obsah stránky.
Zjednodušenie písania DOCTYPE
Pripomeňme si, ako to bolo predtým, v HTML4 značka DOCTYPE vyzerala takto:
Teraz je zadanie minimálne, jednoduchšie, pravdepodobne nikde:
Podobné zjednodušenia sa udiali aj so zvyškom značiek, takže prechod na štandard HTML5 výrazne zjednodušuje písanie.
Voliteľné značky v HTML5
Nový štandard priniesol dizajnérom rozloženia veľa zhovievavosti. Najmä používanie prvkov HTML, HEAD a BODY už nie je potrebné pre značenie HTML5. Ak nie sú prítomné, prehliadač ich stále považuje za ich existenciu. V skutočnosti iba z povinného v HTML5
.
Interpretácia ruského jazyka ako hlavného jazyka HTML dokumentu
Tag definuje jazyk dokumentu. V sieti sa pravidelne objavujú diskusie o správnom pravopise, najmä o správnom pravopise „ru-RU“. Prikláňam sa k možnosti, že „-RU“ je nadbytočné, keďže ruština nemá dialekty a hláskovanie angličtiny (britskej a americkej). Prípona RU určuje, kde sa hovorí po rusky. To znamená, že ak en-US znamená „angličtina v USA“, potom ru-RU znamená „ruština v Rusku“, čo je nadbytočné.
V ostatných záležitostiach sa nič zlé nestane, ak budete naďalej používať možnosť „ru-RU“.
HTML stránka a jej štruktúra definovaná hlavnými značkami
Pozrime sa, ako vyzerá najobyčajnejšia webová stránka zvnútra.
HTML štruktúra vo veľkej miere je základom každej webovej stránky.Dnes existuje niekoľko typov HTML Dokumenty. Každý typ dokumentu má svoj vlastný HTML štruktúra (podrobnosti v spodnej časti stránky).
Správna počiatočná štruktúra HTML je zástava stránky pre rôzne prehliadače .
V systémovej ponuke Štart alebo Štart prejdite do časti Programy (Všetky programy), otvorte priečinok Štandard (Príslušenstvo), vyberte položku Poznámkový blok. Samozrejme, toto nie je jediný nástroj na písanie kódu, ale v tejto fáze ho potrebujete.
Príklad štruktúry dokumentu:
Zvážte značky HTML, ktoré definujú štruktúru stránky
- povinný, určiť HTML dokument.
- definovať sekciu s informáciami o službe, obsahovať pokyny pre vyhľadávače, pre prehliadače, skripty.
- definujte hlavný názov webovej stránky.
- definovať nadpis 3. úrovne.- definovať odsek. Pozrite si odseky HTML lekcie
Štruktúra dokumentu HTML | Písanie kódu stránky
Postupnosť akcií je nasledovná:
1. Napíšte kód do programu Poznámkový blok HTML stránky:
4. Otvorte IE (Internet Explorer) alebo iný predvolený prehliadač. V jeho ponuke sa pokúsime nájsť a otvoriť súbor index.html uložený v počítači. Môžete tiež nájsť a otvoriť súbor v ľubovoľnom prehliadači v okne, ktoré sa zobrazí po zadaní kombinácie dvoch klávesov na klávesnici: Ctrl a O - podržte Ctrl a potom stlačte latinské písmeno O.
Pre ďalšie štúdium materiálu je potrebné:
Otvorte index.html pomocou Firefoxu. V starších verziách tohto prehliadača by ste nemohli prečítať text, ktorý ste napísali, pretože by sa zobrazovali zvláštne znaky. Táto nesprávnosť je eliminovaná jednoduchým zaradením HTML kód dvoch značiek so súborom atribútov, ktoré sú tiež povinné.
Správna štruktúra HTML 4.01
Toto by mala byť počiatočná štruktúra stránky HTML :
Pridajte odseky, nadpis sami a uvidíte, čo sa stane. Nezabudnite obnoviť obsah okna prehliadača pri každom uložení dokumentu stlačením tlačidla v prehliadači Mozilla Firefox alebo tlačidla v prehliadači Internet Explorer alebo F5, aby sa zmeny prejavili.
Všetko vám vyšlo? - Takže ste boli opatrní a urobili ste všetko správne.
Základy HTML obsahujú základné pravidlá jazyka HTML, popis štruktúry HTML stránky, vzťahy v štruktúre HTML dokumentu medzi HTML prvkami.
HTML dokument je obyčajný textový dokument, možno ho vytvoriť rovnakým spôsobom ako v bežnom textovom editore. (Notebook) a v špecializovanom so zvýraznením kódu (Poznámkový blok ++, kód Visual Studio atď.) . HTML dokument má príponu .html.
HTML dokument pozostáva zo stromu HTML prvkov a textu. Každý prvok je v zdrojovom dokumente identifikovaný začiatočným (otváracím) a koncovým (zatváracím) tagom (až na zriedkavé výnimky).
Štartovacia značka ukazuje, kde prvok začína, končí - kde končí. Záverečná značka vytvorené pridaním lomky / pred názov značky:<имя тега> … . Medzi počiatočným a koncovým tagom je obsah tagu – content.
Jednotlivé značky nemôžu ukladať obsah priamo, zapisuje sa ako hodnota atribútu, napríklad značka Tlačidlo vnútri.
Značky môžu byť vnorené do seba, napr.
Text
. Pri investovaní musíte dodržiavať poradie ich uzatvárania
(princíp "matriošky") , napríklad nasledujúci záznam by bol nesprávny:
Text
.
Prvky HTML môžu mať atribúty (globálne, aplikované na všetky prvky HTML a ich vlastné). Atribúty sa zapisujú do úvodnej značky prvku a obsahujú názov a hodnotu špecifikovanú vo formáte atribútu name="value" . Atribúty umožňujú meniť vlastnosti a správanie prvku, pre ktorý sú nastavené.
Každý prvok môže mať viacero hodnôt triedy a iba jednu hodnotu id. Viaceré hodnoty triedy sú zapísané s medzerou,
. Hodnoty class a id musia obsahovať iba písmená, čísla, spojovníky a podčiarkovníky a musia začínať iba písmenami alebo číslami.
Prehliadač zobrazuje (interpretuje) HTML dokument, vytvára jeho štruktúru (DOM) a zobrazuje ho podľa pokynov v tomto súbore (štýlov, skriptov). Ak je označenie správne, v okne prehliadača sa zobrazí stránka HTML obsahujúca prvky HTML – nadpisy, tabuľky, obrázky atď.
Interpretačný proces (analyzovať) spustí sa pred úplným načítaním webovej stránky do prehliadača. Prehliadače spracúvajú dokumenty HTML postupne od úplného začiatku, pričom spracúvajú CSS a súvisia so štýlmi prvkov stránky.
HTML dokument sa skladá z dvoch častí - nadpisu - medzi značkami
… a obsah - medzi značkami …
.
Štruktúra webovej stránky
1. Štruktúra dokumentu HTML
Jazyk HTML sa riadi pravidlami obsiahnutými v súbore deklarácie typu dokumentu. (Definícia typu dokumentu alebo DTD) . DTD je dokument XML, ktorý definuje, ktoré značky, atribúty a ich hodnoty sú platné pre konkrétny typ HTML. Každá verzia HTML má svoje vlastné DTD.
DOCTYPE zodpovedný za správne zobrazenie webovej stránky prehliadačom. DOCTYPE definuje nielen verziu HTML (napr. html), ale aj príslušný súbor DTD na webe.
...
Prvky v rámci značky , tvoria strom dokumentov, tzv objektový model dokumentu, DOM (model objektu dokumentu) . Zároveň živel je koreňový prvok.
Ryža. 1. Najjednoduchšia štruktúra webovej stránky
Pre pochopenie interakcie prvkov webovej stránky je potrebné zvážiť tzv "rodinný vzťah" medzi prvkami. Vzťahy medzi viacerými vnorenými prvkami sa klasifikujú na vzťahy rodičov, potomkov a súrodencov.
Predok Prvok, ktorý obsahuje ďalšie prvky. Na obrázku 1 je predok pre všetky prvky . Zároveň živel
je predchodcom všetkých značiek, ktoré obsahuje:
, , , atď.
Potomok - prvok nachádzajúci sa vo vnútri jedného alebo viacerých druhov prvkov. Napríklad,
je potomkom a prvok
Je dieťaťom oboch
A .
nadradený prvok - prvok spojený s inými prvkami nižšej úrovne a umiestnený na strome nad nimi. postava 1
A . Tag
Je rodič iba pre .
detský prvok - prvok priamo podriadený inému prvku vyššej úrovne. Na obrázku 1 iba prvky
, , A sú deti z .
sesterský prvok - prvok, ktorý má s posudzovaným prvkom spoločný nadradený prvok, takzvané prvky rovnakej úrovne. postava 1
A - prvky rovnakej úrovne, ako aj prvky
, A Sú k sebe sesterské.
1.1. Prvok
1.2. Prvok
kapitola
... obsahuje technické informácie o stránke: názov, popis, kľúčové slová pre vyhľadávače, kódovanie atď. Informácie v ňom zadané sa nezobrazujú v okne prehliadača, ale obsahujú údaje, ktoré prehliadaču povedia, ako má stránku spracovať.
1.2.1. Prvok </h4>
<p>Povinná značka sekcie <head>je značka <title>. Text umiestnený vo vnútri tejto značky sa zobrazuje v záhlaví webového prehliadača. Dĺžka názvu by nemala byť väčšia ako 60 znakov, aby sa úplne zmestil do názvu. Text nadpisu by mal obsahovať čo najkompletnejší popis obsahu webovej stránky.</p>
<h4>1.2.2. Prvok <meta></h4>
<p>Voliteľná značka sekcie <head>je jedna značka <meta>. Pomocou neho môžete nastaviť popis obsahu stránky a kľúčové slová pre vyhľadávače, autora HTML dokumentu a ďalšie vlastnosti metadát. Prvok <head>môže obsahovať viacero prvkov <meta>, pretože v závislosti od použitých atribútov nesú rôzne informácie.</p><p>
<meta name="description" content="Popis obsahu stránky">
<meta name="keywords" content="Kľúčové slová oddelené čiarkami">
</p><p>Popis obsahu stránky a kľúčové slová je možné zadať súčasne vo viacerých jazykoch, napríklad v ruštine a angličtine:</p><p>
<meta name="description" lang="ru" content="Popis obsahu stránky">
<meta name="description" lang="en" content="Popis">
<meta name="keywords" lang="ru" content="Kľúčové slová oddelené čiarkami">
<meta name="keywords" lang="en" content="Kľúčové slová">
</p><p>S visačkou <meta>môžete zakázať alebo povoliť indexovanie webovej stránky vyhľadávacími nástrojmi:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Ak chcete stránku po určitom čase automaticky znova načítať, musíte použiť hodnotu obnovenia:</p><p>
<meta content="30">
</p><p>Stránka sa znova načíta o 30 sekúnd. Ak chcete presmerovať návštevníka na inú stránku, musíte zadať adresu URL v parametri url:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3">Tabuľka 2. Atribúty značiek <meta>
<tbody><tr><th style="width: 20%;">Atribút</th>
<th></th>
</tr><tr><td>znakovú sadu</td>
<td>Určuje kódovanie znakov pre aktuálny dokument HTML: <meta charset="UTF-8">
</td>
</tr><tr><td>obsahu</td>
<td>Obsahuje ľubovoľný text, ktorý určuje hodnotu spojenú s atribútom http-equiv alebo name v závislosti od ich hodnoty.</td>
</tr><tr><td>http-ekviv</td>
<td>Riadi akcie prehliadača na tejto webovej stránke (ekvivalent hlavičiek HTTP). Pri zobrazení stránky bude prehliadač postupovať podľa pokynov uvedených v atribúte: <br>default-style určuje preferovaný štýl, ktorý sa má použiť na stránke. Atribút content musí obsahovať id prvku <link>, ktorý odkazuje na šablónu so štýlmi CSS alebo ID prvku<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
pomocou prvku
Tabuľka 4. Atribúty značiek Atribút
Popis, akceptovaná hodnota
crossorigin
Určuje, či sa má pri načítavaní obrázka z lokality použiť CORS (technológia prehliadača, ktorá umožňuje webovej stránke prístup k zdrojom z inej domény).
href
Hlavným atribútom značky, hodnotou je cesta k súboru so štýlmi.
hreflang
Určuje jazyk textu v prepojenom dokumente.
médiá
Určuje typ zariadenia, na ktoré sa má použiť zdroj odkazu.
noce
Serverom náhodne vygenerovaná reťazcová premenná, ktorá nastavuje pravidlá používania vložených štýlov na ochranu obsahu. Hodnota atribútu je reťazec textu.
rel
Atribút definuje vzťah medzi aktuálnym dokumentom a odkazovaným dokumentom.
veľkosti
Určuje veľkosť ikon pre vizuálne zobrazenie. Atribút size sa používa iba v spojení s rel="icon" a môže nadobúdať nasledujúce hodnoty:
titul
Určuje názov odkazu alebo názov skupiny alternatívnych štýlov. Hodnota atribútu je text.
typu
Určuje typ MIME dokumentu, na ktorý sa odkazuje. V tomto prípade má hodnotu "text/css" .
1.2.5. Prvok
