HTML, CSS a PHP: The Ultimate Cheat Sheet

📥 Stáhněte si můj HTML, CSS a PHP cheat sheets, kompletní se vším, co potřebujete vědět a pamatovat si ohledně těchto tří kódovacích jazyků.

• Co je HTML?
• Příklady HTML5 (Code PlayGround)
• 📥 HTML Cheat Sheet
• Co je to CSS?
• 📥 CSS Cheat Sheet
• Co je to PHP?
• 📥 PHP Cheat Sheet
• 📥 HTML CSS a PHP Cheat Sheet

Umění kódování může trvat roky, než si plně osvojíte všechny tagy, syntaxe a další prvky programovacích jazyků, které se často prolínají.

I zkušenější vývojáři se mohou dostat do pasti, kdy zapomenou správnou syntaxi pro konkrétní úkoly. Jako takové je nereálné očekávat více zeleně webové vývojáře mít dokonalý přehled o umění.

To je důvod, proč cheat sheets pro HTML, CSS a PHP jsou velmi užitečné, bez ohledu na to, jak dlouho cvičíte. Slouží jako rychlý průvodce k nalezení správných příkazů a syntaxí, což vám umožní soustředit se na skutečný vývoj webu.

Níže najdete vizuálně nakloněné cheaty, kterým předcházejí rychlé osvěžení, které vám pomohou ve vašem kódovacím úsilí. Udělal jsem jej také tak, aby jej bylo možné snadno přidat do záložek, uložit nebo vytisknout pro vaše pohodlí.

Co je HTML?

HTML je zkratka pro Hypertext Markup Language – kód, který se používá k vytvoření struktury webové stránky a jejího obsahu.

Tento značkovací jazyk se skládá z řady prvků, které se používaly k tomu, aby obsah vypadal nebo fungoval určitým způsobem, a je hlavní součástí front-endového kódu každé webové stránky.

HTML je jazyk pro popis struktury webových stránek… Pomocí HTML autoři popisují strukturu stránek pomocí značek. Prvky jazyka označují části obsahu, jako je odstavec, seznam, tabulka a tak dále. – z W3.org

Můžete například uzavřít nebo zalomit různé části obsahu – kde uzavírací značky mohou vytvořit hypertextový odkaz slova nebo obrázku na jinou stránku. Můžete to také použít k psaní kurzívou a ke zvětšení nebo zmenšení písma, mimo jiné.

Jak poznamenal W3, některé z dalších věcí, které vám HTML umožňuje, zahrnují:

• Publikování online dokumentů s nadpisy, text, tabulky, seznamy, fotografie, Etc.
• Získávání online informací kliknutím na tlačítko přes hypertextové odkazy.
• Projektování formy pro provádění transakcí se vzdálenými službami vyhledávat informace, provádět rezervace nebo objednávat produkty, mimo jiné funkce.
• Včetně tabulky, videoklipy a další média a aplikace již ve vašich dokumentech.

Takže pokud byste měli udělat čáru "Můj pes je velmi sladký" stát sám o sobě, můžete určit, že se jedná o odstavec tak, že jej uzavřete do značek odstavců (více o tom později), které budou vypadat takto: Můj pes je velmi sladký

Jaký je rozdíl mezi HTML a HTML5?

Jak již název napovídá, HTML5 je pátou verzí standardu HTML. Podporuje integraci videa a zvuku do jazyka, což snižuje potřebu pluginů a prvků třetích stran.

Níže jsou uvedeny hlavní rozdíly mezi HTML a HTML5:

Kromě toho existuje mnoho prvků HTML, které byly buď upraveny, nebo odstraněny z HTML5. Tyto zahrnují:

• - Změnil na
• - Změnil na
• - Změnil na
• – Odebráno
• – Odebráno
• – Odebráno
• – Žádná nová značka. Používá CSS.
• – Žádná nová značka. Používá CSS.
• – Žádná nová značka. Používá CSS.
• – Žádná nová značka. Používá CSS.
• – Žádná nová značka. Používá CSS.

Mezitím HTML5 také obsahuje řadu nově přidaných prvků. Tyto zahrnují:

Příklady HTML5 (Code PlayGround)

Příklady sémantické struktury

In HTML5 existují některé sémantické prvky, které lze použít k definování různých částí webové stránky. Zde jsou ty nejběžnější:

<header>
  <h1>Guide to Search Engines</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>

Příklady základního formátování textu

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

<button name="button">I am a Button. Click me!</button>

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

<p>This is normal text. <code>This is code.</code> This is normal text.</p>

<p>The movie starts at <time>20:00</time>.</p>

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>

Příklady tabulky

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>

Příklady médií

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>

Kompletní HTML Cheat Sheet

Ať už jste ostřílený vývojář nebo někdo, kdo si v oboru jen chce namočit nohy, vždy vám pomůže mít cheat pro formátování HTML Šikovný. A navrhl jsem jeden, který by vám mohl pomoci na každém kroku.

Stáhněte si HTML Cheat Sheet

Co je to CSS?

Kaskádové styly nebo CSS popisuje, jak budou prvky HTML zobrazeny na obrazovce. Protože dokáže ovládat rozvržení více stránek současně, může vám ušetřit spoustu času a úsilí.

CSS je jazyk pro popis prezentace webových stránek, včetně barev, rozložení a písem. Umožňuje přizpůsobit prezentaci různým typům zařízení, jako jsou velké obrazovky, malé obrazovky nebo tiskárny. – z W3.org

Jaký je rozdíl mezi HTML a CSS?

Zatímco HTML a CSS jsou oba jazyky používané k vytváření webových stránek a aplikací, mají různé funkce.

HTML je to, co používáte k diktování struktury a obsahu, který se bude na webové stránce zobrazovat.

CSS se na druhé straně používá k úpravě web design prvků HTML na webové stránce (včetně rozvržení, vizuálních efektů a barvy pozadí).

HTML vytváří strukturu a obsah, CSS dělá design nebo styl. HTML a CSS dohromady tvoří rozhraní webové stránky.

Co je syntaxe CSS?

Syntaxe CSS se skládá z selektoru a deklaračního bloku.

Selektor určuje prvek HTML, který má být stylizován, zatímco blok deklarací obsahuje jednu nebo více deklarací nebo párů CSS, název vlastnosti a hodnotu s dvojtečkou mezi nimi.

Deklarace jsou odděleny středníky a deklarační bloky jsou vždy uzavřeny do složených závorek.

Chcete-li například upravit vzhled nadpisu 1, syntaxe CSS by vypadala asi takto: h1 {color:red; font-size:16pc;}

Kompletní CSS Cheat Sheet

CSS je dostatečně snadné používat. Problém je v tom, že existuje mnoho selektorů a prohlášení, že zapamatovat si je všechny je obtížné, ne-li nemožné. Nemusíte se je však učit nazpaměť.

Tady je cheat sheet pro CSS a CSS3 které můžete kdykoli použít.

Stáhněte si CSS Cheat Sheet

Co je to PHP?

PHP je zkratka pro Hypertext Preprocessor, populární skriptovací jazyk s otevřeným zdrojovým kódem a vložený do HTML používaný pro vývoj dynamických webových stránek, webových aplikací nebo statických webových stránek.

Od PHP je jazyk na straně serveru, jeho skripty se spouštějí na serveru (nikoli v prohlížeči) a jeho výstupem je prostý HTML v prohlížeči.

PHP je široce používaný open source univerzální skriptovací jazyk, který je vhodný zejména pro vývoj webových aplikací a lze jej vložit do HTML. – z PHP.net

Tento skriptovací jazyk na straně serveru běží na různých operačních systémech, včetně Windows, Mac OS, Linuxu a Unixu. Je také kompatibilní s většinou serverů, jako je Apache a IIS.

Ve srovnání s jinými jazyky, jako je ASP a JSP, je PHP snadné se naučit i pro začátečníky. PHP také nabízí spoustu funkcí, které potřebují pokročilí vývojáři.

Jaký je rozdíl mezi PHP a HTML?

I když oba jazyky jsou pro vývoj webových aplikací, PHP a HTML se liší v několika ohledech.

Klíčový rozdíl spočívá v tom, k čemu se tyto dva jazyky používají.

HTML se používá na straně klienta (nebo front-end) vývoj, zatímco PHP se používá na straně serveru rozvoj.

HTML je jazyk, který vývojáři používají pro organizaci obsahu na webu, jako je vkládání textu, obrázků, tabulek a hypertextových odkazů, formátování textu a určování barev.

Mezitím se PHP používá k ukládání a získávání dat z databáze, provádění logických operací, odesílání a odpovídání na e-maily, nahrávání a stahování souborů, vývoj desktopových aplikací a další.

Pokud jde o typ kódu, HTML je statické, zatímco PHP je dynamické. HTML kód je vždy stejný při každém otevření, zatímco výsledky PHP se liší v závislosti na prohlížeči uživatele.

Pro nové vývojáře se oba jazyky snadno učí, i když u HTML je doba učení kratší než u PHP.

Kompletní PHP Cheat Sheet

Pokud jste začínající programátor a chcete být zběhlejší v PHP nebo rozšířit své znalosti o něm, zde je PHP cheat sheet můžete rychle odkazovat.

Tento cheat se skládá z funkcí PHP – což jsou zkratky pro široce používané kódy – které jsou zabudovány do skriptovacího jazyka.

Stáhněte si PHP Cheat Sheet

Ultimate HTML, CSS a PHP Cheat Sheet

Ať už jste ostřílený vývojář nebo jen někdo, kdo s kódováním začíná, je skvělé mít něco, k čemu se můžete kdykoli vrátit pro referenci nebo si jednoduše osvěžit paměť.

A jako dárek vývojářům, kteří mezi tím žonglují HTML, CSS a PHP, zde je ULTIMÁTNÍ cheat, kompletní se vším, co potřebujete vědět a pamatovat si ohledně těchto tří kódovacích jazyků:

Stáhněte si Cheat Sheet pro kombinované HTML, CSS a PHP

FAQ