Zdravo! Nećete naći ništa korisno u ovoj lekciji ako ste VEĆ upoznati sa formiranjem strukture HTML dokumenta. Za one koji NISU upoznati, pokazaću ispravnu (važeću) HTML strukturu web dokumenta, uključujući i WordPress stranicu.
Opća ispravna struktura HTML dokumenta
Prije svega, bez mnogo preambule, opća struktura bilo kojeg HTML dokumenta trebala bi biti ovakva:
/*Označava tip trenutnog DTD*/ /*Pokazuje početak dokumenta*/ /*Pokazuje početak zaglavlja (zaglavlja)*/
test/*Prikaži naslov*//*Pokazuje početak zaglavlja*/ /*Pokazuje početak glavnog dijela dokumenta (tijelo)*/ /*Sadržajni dio dokumenta*//*Pokazuje kraj tijela dokumenta*//*Prikaži kraj dokumenta*/
Ako uklonite objašnjenja koja sam pokazao nakon svake oznake, tada jednostavna struktura HTML dokumenta izgleda ovako
test
Vrsta trenutnog DTD
Vrsta trenutnog dokumenta ( Definicija vrste dokumenta, DTD) je neophodan da pretraživač razume kako da tumači trenutnu veb stranicu, jer HTML dolazi u nekoliko verzija.
Osim toga, osim HTML-a, postoje i drugi jezici za označavanje, kao što je XHTML.
Bilješka: XHTML je skraćenica od EXtensible HyperText Markup Language, što se prevodi kao Extended HyperText Markup Language.
XHTML je sličan HTML-u, ali se razlikuje po sintaksi. Da se pretraživač ne bi zbunio jezicima i da ga morate prikazati u prvom redu koda, tip trenutnog dokumenta je DOCTYPE .
Koncept oznake u HTML-u
Primijetili ste da je cjelokupna struktura HTML dokumenta definirana određenim oznakama - određenim riječima u ugaonim zagradama.
Riječ zatvorena u ugaonim zagradama u HTML dokumentu naziva se oznaka. Svaka oznaka ima svoje značenje, definisano pravilima označavanja.
- Oznaka znači naslov html dokumenta. Head tags pohranjuju informacije za pretraživače i pretraživače. Uključujući u obliku meta oznaka;
- Oznaka označava glavni sadržaj html dokumenta. Naime, tekst, slike, Java Script skripte, itd.;
- Oznaka [p] je blok element i uvijek počinje u novom redu. To znači paragraf glavnog sadržaja html dokumenta.
Bitan! Sve html oznake za označavanje moraju biti u parovima. To jest, početna oznaka<тег>, mora biti zatvoreno završnom oznakom, sa kosom crtom .
Oznake naslova i podnaslova h1-h6
Za poboljšanje strukturiranja teksta dokumenta, kao i poboljšanje SEO web stranica, postoje dodatne oznake glavnog sadržaja. Zovu se oznake naslova i podnaslova od h1 do h6, ima ih ukupno 6 komada.
One, kao i oznake [p] -paragraph, koje vam omogućavaju da istaknete semantičke delove teksta, omogućavaju vam da podelite tekst na semantičke delove, dajući svakom odeljku sopstveni naslov.
oznake h1—h6 imaju podređenu zavisnost, donji nivo ove podređenosti je paragraf.
Važno je napomenuti da razbijanje ovisnosti o podtagovima h1—h6—str neće narušiti prikaz i valjanost dokumenta, već samo pogoršati njegovu optimizaciju za pretraživače.
Primjer napredne strukture HTML dokumenta
Evo akademskog primjera naprednije strukture HTML dokumenta:
test
glavno zaglavlje
glavno zaglavlje
Prvi titl
glavno zaglavlje
Drugi titl
Prvi manji titl
Struktura HTML 5
U HTML 5 struktura dokumenta bi trebala izgledati ovako:
Ovo je deklaracija koja pokazuje šta je ovaj dokument u HTML5;
je osnovni element HTML stranice;
Element sa meta oznakama o dokumentu;
Ovaj element definira naslov dokumenta;</p><p><body>Ovaj element sadrži vidljivi sadržaj stranice;</p><p><h1>Element definira veliki naslov</p><p><p>Element definira paragraf.</p><p>H2 - h6 oznake rade u html5</p><p><i>Sve oznake su dvostruke. Početna oznaka naziva se početna oznaka, a krajnja oznaka se naziva završna oznaka.</i></p><h2>HTML oznake na WordPress stranici</h2><p>Uprkos činjenici da je WordPress skripta napisana u php-u, svi fajlovi sajta, odnosno svi fajlovi radnog šablona sajta, imaju html oznake. Pogledajmo primjer, na header.php datoteci šablona <b>Dvadeset sedamnaest</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>To možete vidjeti ako su sve WordPress funkcije postavljene u klasičnu HTML oznaku. Postoji vrsta dokumenta:<!DOCTYPE html></p><p>Uparite oznake,</p><p>Otvaranje oznake.</p><p>Završnu oznaku možete pronaći u datoteci footer.php.</p><h2>Kako pogledati HTML kod stranice WordPress web stranice</h2><p>Ono što napišete u uređivaču stranice prilikom kreiranja članaka ili stranica samo je dio HTML stranice stranice. Nije čak ni cijelo tijelo stranice.</p><p>Da biste vidjeli HTML kod stranice WordPress stranice, a to je vrlo često potrebno, trebate:</p><p>Otvorite stranicu u pretraživaču;</p><p>Promjena na engleski font tastature;</p><p>Pritisnite sljedeća dugmad:</p><ul><li>Chrome: Ctrl+U</li><li>Opera: Ctrl+U</li><li>Mozilla: Ctrl+U</li>
</ul><p>Možda još ne znate zašto vam je potreban. Vjerujte mi, bit će potrebno više puta analizirati Vašu web stranicu i eventualno stranice konkurencije.</p><h2>Zaključak</h2><p>U zaključku, htio sam izvući zaključak, ali mi samo pada na pamet misao da je članak ispao, potpuno za početnike. Na prvi pogled postoji velika razlika između primjera koda artikla i primjera sa stvarnih stranica. Međutim, svi fajlovi imaju istu strukturu HTML dokumenta i izuzetno je važno da se ova struktura ne razbije kada radite sa sajtom.</p>
<i>
</i><p>Vrijeme je da razmotrimo najjednostavniji HTML dokument kao primjer. Napisaćemo kod koji će u prozoru pretraživača prikazati frazu „Hello, world!“. (doslovno prevedeno sa engleskog - "Zdravo, svet!"). Obično je ova praksa pisanja koda prvo iskustvo prilikom učenja novog jezika. Ovakva konstatacija problema skreće pažnju učenika na nekoliko ključnih tačaka programskog jezika (u našem slučaju, jezika za označavanje), od kojih je glavna osnovna struktura programa (u našem slučaju web stranica).</p>
<h2>doctype</h2>
<!DOCTYPE html>
<html>
</html>
<p>Ovaj element se još naziva i osnovni element, jer se u njemu nalaze svi ostali elementi dokumenta. Korijenski element može imati samo dva podređena elementa: <head>i <body>.</p>
<h2>element glave</h2>
<p>Element <head>je kontejner za druge elemente koji pružaju informacije o dokumentu, poznate kao metapodaci. Ovi metapodaci govore pretraživaču lokaciju eksternih skripti i stilova, uspostavljaju odnos između trenutnog dokumenta i drugih resursa i mogu pružiti dodatne podatke namenjene pretraživačima. Pored potrebnog elementa <title>, o čemu se govori kasnije u ovom poglavlju, pretraživači ne prikazuju nikakve metapodatke koji se nalaze unutar elementa <head>.</p>
<p>Element <head>mora biti prvi podređeni element <html>, nijedan sadržaj ili elementi ne bi trebali biti ispred njega:</p><p>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
</p><h2>naslovni element</h2>
<p>Element <title>daje naslov teksta za dokument. Svaki HTML dokument mora imati tačno jedan element. <title>, koji se mora postaviti unutar elementa <head>:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Naslov prozora
Preglednici prikazuju sadržaj elementa
kao naslov (ime) dokumenta, koji se obično prikazuje na vrhu prozora pretraživača ili u naslovu kartice:</p>
<h2>element tijela</h2>
<p>Element <body>je kontejner za sav sadržaj web stranice. Sve što je prikazano u prozoru pretraživača i što korisnik vidi je sadržano u njemu (svaki HTML dokument može imati samo jedan element <body>). Njegova glavna svrha je da odvoji sadržaj dokumenta od metapodataka:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Naslov prozora
