Základy HTML a CSS

Na stránce o fungování Internetu a webu je napsáno, že:

Aby se web zobrazil v prohlížeči uživatele správně, musí jeho autor obalit text do značek jazyka HTML. Tyto značky jsou určeny právě prohlížečům, které kód zpracují a zobrazí.

Tak máme značku pro každý odstavec, pro vkládání obrázku, značky pro formát písma a další. V kombinaci s kaskádovými styly (CSS) tak vzniká graficky příjemná a pěkně formátovaná webová stránka, na jakou jsme zvyklí.

I ve WordPressu platí stejná pravidla, tedy v šablonách je HTML kód a soubor se styly. WordPress pak šablonu používá, vkládá do ní obsah a zajišťuje administraci pro uživatele.

Abychom mohli šablonu upravit, něco změnit a vylepšit, potřebujeme znát alespoň základy HTML a CSS.

HTML

Hyper Text Markup Language je značkovací jazyk, jímž obalujeme obsah webové stránky. V konkrétním souboru šablony WordPressu tak najdeme například:

<p>
Nějaký obsah.
</p>

<p> je v HTML značka pro odstavec.

Nebo:

<ul>
<li>Položka 1</li>
<li>Položka 2</li>
</ul>

<ul> je v HTML značka pro odrážkový seznam a <li> potom značka pro každou položku.

Párové a nepárové značky

Některé značky jazyka HTML se musejí uzavírat, tedy například <p> a </p>, jiné jsou nepárové, například <hr>, což je vodorovná čára.

Většina značek má nějaké své chování a výchozí vzhled, který záleží na tom, jak vlastně značku vykreslí ten či onen prohlížeč. Díky specifikaci by však měly všechny prohlížeče vykreslovat všechny značky stejně.

Jiné značky žádné výchozí chování nemají, například <div>

V šabloně WordPressu tak můžeme najít například tento zápis:

<div class=”obsah”>
<?php the_content(‘Číst dál…’); ?>
</div>

<div> je značka HTML, v tomto případě blok, který nemá sám o sobě žádné vlastnosti. Ty se přidávají pomocí třídy kaskádových stylů (CSS) a určují tak chování a vzhled bloku <div>.

<?php the_content(‘Číst dál…’); ?> je značka samotného WordPressu, který na toto místo vloží obsah z databáze, tedy například článek. Ve výsledku tak bude obsah článku vložen do bloku se třídou obsah.

CSS – kaskádové styly

V šabloně WordPressu najdeme také soubor s názvem style.css, kde jsou uloženy značky kaskádových stylů.

Takže například:

.obsah {background: red}

Tento zápis by znamenal, že výše zmíněný blok <div> bude mít červené pozadí.

A stejným způsobem lze nastylovat i ostatní HTML značky, například všechny odstavce <p>

p {margin-top:10px}

Všechny odstavce budou vzdáleny od obsahu nad nimi 10 pixelů.

Nebo jenom odstavce, který přidělíme nějakou třídu, například do kódu šablony napíšeme:

<p class=”tojejedno”>
Obsah
</p>

A do souboru se styly:

.tojejedno {background:blue}

A všechny odstavce se třídou (class) tojejedno budou mít modré pozadí.

Tímto způsobem je možné vytvořit celou webovou stránku a určit její vzhled.

Pokud se chcete naučit HTML a CSS, doporučuji následně ke studiu Jakpsatweb.cz

Komentáře nejsou povoleny.