Buna! În această lecție, NU vei găsi nimic util pentru tine dacă ești DEJA familiarizat cu formarea structurii unui document HTML. Pentru cei care NU sunt familiarizați, voi arăta structura HTML corectă (validă) a unui document web, inclusiv pentru un site WordPress.
Structura generală corectă a unui document HTML
În primul rând, fără prefețe lungi - structura generală a oricărui document HTML ar trebui să fie după cum urmează:
/ * Indică tipul DTD curent * / / * Afișează începutul documentului * / / * Afișează începutul titlului (antetul) * /
Test/ * Afișează titlul * // * Afișează începutul titlului * / / * Afișează începutul corpului principal al documentului (corpului) * / / * Conținutul documentului * // * Afișează sfârșitul corpului principal al documentului * // * Afișează sfârșitul documentului * /
Dacă eliminăm explicațiile pe care le-am arătat după fiecare etichetă, atunci structura simplă a unui document HTML arată astfel
Test
Tipul de document curent DTD
Tipul de document curent ( Definiție tip document, DTD) este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni.
În plus, există și alte limbaje de marcare, altele decât HTML, cum ar fi XHTML.
Notă: XHTML este EXtensible HyperText Markup Language, pe care îl traducem ca limbaj extins de marcare hypertext.
XHTML este similar cu HTML, dar diferit în sintaxă. Pentru a împiedica browserul să confunde limbile și trebuie să îl afișați în prima linie de cod, tipul documentului curent DOCTYPE.
Conceptul de etichetă în HTML
Ați observat că întreaga structură a unui document HTML este definită de anumite etichete - anumite cuvinte cuprinse între paranteze unghiulare.
Un cuvânt cuprins între paranteze unghiulare într-un document HTML se numește etichetă. Fiecare etichetă are propriul său sens, definit de regulile de marcare.
- Eticheta înseamnă capul documentului html. Etichetele head stochează informații pentru browsere și motoarele de căutare. Inclusiv sub formă de meta-etichete;
- Eticheta înseamnă conținutul principal al documentului html. Și anume text, imagini, scripturi Java etc.;
- Eticheta [p] este un element de bloc, începe întotdeauna pe o linie nouă. Înseamnă un paragraf din conținutul principal al unui document html.
Important! Toate etichetele HTML trebuie să fie asociate. Adică eticheta de deschidere<тег>, trebuie să fie închis cu o etichetă de închidere, cu o oblică înainte .
Etichete de titlu și subtitlu H1-h6
Pentru a îmbunătăți structura textului documentului, precum și pentru a îmbunătăți SEO paginilor web, există etichete suplimentare de conținut principal. Se numesc etichete de titlu și subtitlu de la h1 la h6, 6 în total.
Ele, precum etichetele [p] -paragraph, care vă permit să evidențiați secțiunile semantice ale textului, vă permit să împărțiți textul în destine semantice, dând fiecărei secțiuni propriul titlu.
Etichete h1—h6 au o dependență de subordonat, nivelul inferior al acestei subordonări este alin.
Este important să rețineți că ruperea dependenței de etichete subordonate h1—h6—p nu va perturba afișarea și valabilitatea documentului, ci doar va înrăutăți optimizarea acestuia pentru motoarele de căutare.
Un exemplu de structură de document HTML dezvoltată
Iată un exemplu academic al unei structuri de document HTML mai avansate:
Test
Titlul principal
Titlul principal
Prima subtitlu
Titlul principal
A doua subtitlu
Prima subtitlu minor
Structura HTML 5
HTML 5 ar trebui să aibă următoarea structură a documentului:
Aceasta este o declarație care arată ce este acest document în HTML5;
acesta este elementul rădăcină al paginii HTML;
Element cu meta-etichete despre document;
Acest element definește titlul documentului;</p><p><body>Acest element conține conținutul vizibil al paginii;</p><p><h1>Elementul definește un titlu mare</p><p><p>Elementul definește un paragraf.</p><p>Lucrați în etichete html5 h2 - h6</p><p><i>Toate etichetele sunt duble. Eticheta de început se numește eticheta de început, iar eticheta de final se numește eticheta de final.</i></p><h2>Marcaj HTML pe un site WordPress</h2><p>În ciuda faptului că scriptul WordPress este scris în php, toate fișierele site-ului, sau mai degrabă toate fișierele șablonului site-ului de lucru, au marcaj html. Să ne uităm la un exemplu pe fișierul șablon header.php <b>Douăzeci și șaptesprezece</b>:</p><p> <?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?>class = "no-js no-svg"> <head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<?php _e("Skip to content", "twentyseventeen"); ?>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part("template-parts/header/header", "image"); ?>
<?php if (has_nav_menu("top")) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part("template-parts/navigation/navigation", "top"); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage()))
&& has_post_thumbnail(get_queried_object_id())) :
echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail (get_queried_object_id ()," twentyseventeen-featured-image "); echo"</div><!-- .single-featured-image-header -->"; endif;?> <div class="site-content-contain">
<div id="content" class="site-content">
</p><p>Puteți vedea asta dacă toate funcționalitățile WordPress sunt găzduite în markup HTML clasic. Există un tip de document:<!DOCTYPE html></p><p>Etichete pereche,</p><p>Etichetă de deschidere.</p><p>Eticheta de închidere poate fi găsită în fișierul footer.php.</p><h2>Cum să vizualizați codul HTML al unei pagini pe un site WordPress</h2><p>Ceea ce scrii în editorul site-ului, creând articole sau pagini, este doar o parte a paginii HTML a site-ului. Nu este nici măcar întregul corp al paginii.</p><p>Pentru a vizualiza codul HTML al unei pagini de pe un site WordPress, care este adesea necesar, aveți nevoie de:</p><p>Deschideți pagina într-un browser;</p><p>Comutați la fontul tastaturii engleze;</p><p>Apăsați următoarele butoane:</p><ul><li>Chrome: Ctrl + U</li><li>Opera: Ctrl + U</li><li>Mozilla: Ctrl + U</li>
</ul><p>Poate că încă nu știi de ce ai nevoie. Crede-mă, asta va fi nevoie de mai multe ori pentru a-ți analiza site-ul și, eventual, site-urile concurenților.</p><h2>Ieșire</h2><p>În concluzie, aș vrea să trag o concluzie, dar îmi vine în minte doar gândul că articolul s-a dovedit, complet pentru începători. La prima vedere, există o mare diferență între exemplul de cod al articolului și exemplele de pe site-uri reale. Cu toate acestea, toate fișierele au aceeași structură a documentului HTML și este extrem de important să nu încălcați această structură atunci când lucrați cu site-ul.</p>
<i>
</i><p>Acum este momentul să privim un document HTML simplu ca exemplu. Vom scrie un cod, al cărui rezultat este rezultatul în fereastra browserului a expresiei „Bună, lume!” (tradus literal din engleză - „Bună, lume!”). De obicei, această practică de codificare este prima experiență când învățați o nouă limbă. Această formulare a problemei atrage atenția elevului asupra mai multor puncte cheie ale limbajului de programare (în cazul nostru, limbajul de marcare), principala dintre acestea fiind structura de bază a programului (în cazul nostru, pagina web).</p>
<h2>doctype</h2>
<!DOCTYPE html>
<html>
</html>
<p>Acest element mai este numit și element rădăcină deoarece toate celelalte elemente ale documentului se află în el. Elementul rădăcină poate avea doar doi copii: <head>și <body>.</p>
<h2>Element cap</h2>
<p>Element <head>este un container pentru alte elemente care oferă informații despre un document, cunoscut sub numele de metadate. Aceste metadate informează browserul despre locația scripturilor externe și a foilor de stil, stabilind o relație între documentul curent și alte resurse și pot furniza date suplimentare destinate browserelor. Pe lângă elementul necesar <title>discutat mai târziu în acest capitol, browserele nu afișează niciuna dintre metadatele conținute într-un element <head>.</p>
<p>Element <head>trebuie să fie primul copil <html>, niciun conținut sau elemente nu ar trebui să fie înaintea acestuia:</p><p>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
</p><h2>Element de titlu</h2>
<p>Element <title>oferă un titlu text pentru document. Fiecare document HTML trebuie să aibă exact un element <title>care ar trebui pozitionat in interiorul elementului <head>:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Titlul ferestrei
Browserele afișează conținutul unui element
ca titlul (numele) documentului, care este de obicei afișat în partea de sus a ferestrei browserului sau în titlul unei file:</p>
<h2>Element de corp</h2>
<p>Element <body>este un container pentru tot conținutul unei pagini web. Tot ceea ce este afișat în fereastra browserului și pe care utilizatorul le vede este conținut în ea (fiecare document HTML poate avea un singur element <body>). Scopul său principal este de a separa conținutul documentului de metadate:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Titlul ferestrei
