HTML, CSS i PHP: Ultimate Cheat Sheet

📥 Preuzmite moj HTML, CSS i PHP varalice, zajedno sa svime što trebate znati i zapamtiti u vezi s ova tri jezika kodiranja.

• Što je HTML?
• HTML5 primjeri (Code PlayGround)
• 📥 HTML Cheat Sheet
• Što je CSS?
• 📥 CSS Cheat Sheet
• Što je PHP?
• 📥 PHP Cheat Sheet
• 📥 HTML CSS i PHP Cheat Sheet

Umjetnost kodiranja može potrajati godinama dok se potpuno ne svlada sa svim oznakama, sintaksama i drugim elementima programskih jezika koji su često isprepleteni.

Čak i iskusniji programeri mogu upasti u zamku zaboravljanja ispravne sintakse za određene zadatke. Kao takvo, nerealno je očekivati ​​više zelenila web developera imati besprijekorno razumijevanje umjetnosti.

To je razlog zašto varalice za HTML, CSS i PHP izuzetno su korisni, bez obzira na to koliko dugo vježbate. Služi kao brzi vodič za pronalaženje pravih naredbi i sintakse, omogućujući vam da se usredotočite na stvarni web razvoj.

U nastavku ćete pronaći vizualno nagnute varalice kojima prethode brza osvježenja koja će vam pomoći u vašim nastojanjima kodiranja. Također sam napravio da ga možete lako označiti, spremiti ili ispisati radi vaše udobnosti.

Što je HTML?

HTML je kratica za Hypertext Markup Language – kôd koji se koristi za stvaranje strukture web stranice i njezinog sadržaja.

Ovaj označni jezik sastoji se od niza elemenata koji se koriste da bi sadržaj izgledao ili funkcionirao na određeni način i glavni je dio prednjeg koda svake web stranice.

HTML je jezik za opisivanje strukture web-stranica... Pomoću HTML-a autori opisuju strukturu stranica pomoću oznaka. Elementi jezika označavaju dijelove sadržaja kao što su odlomak, popis, tablica i tako dalje. – s W3.org

Na primjer, možete priložiti ili zamotati različite dijelove sadržaja – gdje priključne oznake mogu napraviti hipervezu riječi ili slike na drugu stranicu. Ovo također možete koristiti za kurziv riječi i povećanje ili smanjenje fonta, među ostalim.

Kao što je navedeno od strane W3, neke od drugih stvari koje vam HTML omogućuje uključuju:

• Objavljivanje online dokumenata sa naslovi, tekst, tablice, popisi, fotografije, Itd
• Dohvaćanje online informacija klikom na gumb putem hipertekstualne veze.
• Projektiranje obrasci za obavljanje transakcija s uslugama na daljinu tražite informacije, rezervirajte ili naručite proizvode, između ostalih funkcija.
• Uključujući proračunske tablice, videoisječke i druge medije i aplikacije koje su već u vašim dokumentima.

Pa ako biste napravili liniju “Moj pas je jako sladak” samostalno, možete navesti da je to odlomak tako da ga uključite u oznake odlomaka (više o tome kasnije), što bi izgledalo ovako: Moj pas je jako sladak

Koja je razlika između HTML-a i HTML5?

Kao što ime sugerira, HTML5 je peta verzija HTML standarda. Podržava integraciju videa i zvuka u jezik, što smanjuje potrebu za dodacima i elementima trećih strana.

Ispod su glavne razlike između HTML-a i HTML5:

Osim toga, postoje mnogi elementi HTML-a koji su izmijenjeni ili uklonjeni iz HTML5. To uključuje:

• – Promijenjeno u
• – Promijenjeno u
• – Promijenjeno u
• – Uklonjeno
• – Uklonjeno
• – Uklonjeno
• – Nema nove oznake. Koristi CSS.
• – Nema nove oznake. Koristi CSS.
• – Nema nove oznake. Koristi CSS.
• – Nema nove oznake. Koristi CSS.
• – Nema nove oznake. Koristi CSS.

U međuvremenu, HTML5 također uključuje brojne novo dodane elemente. To uključuje:

HTML5 primjeri (Code PlayGround)

Primjeri semantičke strukture

In HTML5 postoje neki semantički elementi koji se mogu koristiti za definiranje različitih dijelova web stranice. Evo najčešćih:

<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>

Primjeri osnovnog oblikovanja teksta

<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>

Primjeri tablica

<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>

Primjeri medija

<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>

Kompletan HTML Cheat Sheet

Bez obzira jeste li iskusan programer ili netko tko samo želi dobiti svoje noge u industriji, uvijek pomaže imati Varalica za HTML formatiranje zgodan. Dizajnirao sam jedan koji bi vam mogao pomoći na svakom koraku.

Preuzmite HTML Cheat Sheet

Što je CSS?

Cascading Style Sheets ili CSS opisuje kako će HTML elementi biti prikazani na ekranu. Budući da može kontrolirati višestruke izglede stranica u isto vrijeme, može vam uštedjeti puno vremena i truda.

CSS je jezik za opisivanje prezentacije web stranica, uključujući boje, izgled i fontove. Omogućuje prilagodbu prezentacije različitim vrstama uređaja, poput velikih zaslona, ​​malih zaslona ili pisača. – s W3.org

Koja je razlika između HTML-a i CSS-a?

Iako su HTML i CSS jezici koji se koriste za izradu web stranica i aplikacija, oni imaju različite funkcije.

HTML je ono što koristite za diktiranje strukture i sadržaja koji će biti prikazani na web stranici.

CSS se, s druge strane, koristi za modificiranje web dizajn HTML elemenata na web stranici (uključujući izgled, vizualne efekte i boju pozadine).

HTML stvara strukturu i sadržaj, CSS dizajn ili stil. Zajedno, HTML i CSS čine sučelje web stranice.

Što je CSS sintaksa?

CSS sintaksa sastoji se od selektora i bloka deklaracije.

Selektor određuje HTML element koji treba stilizirati dok blok deklaracije sadrži jednu ili više deklaracija ili parova CSS-a, naziva svojstva i vrijednosti s dvotočkom između njih.

Deklaracije su odvojene točkom i zarezom, a blokovi deklaracija uvijek su u vitičastim zagradama.

Na primjer, ako želite promijeniti način na koji izgleda vaš naslov 1, vaša CSS sintaksa bi izgledala otprilike ovako: h1 {color:red; font-size:16pc;}

Kompletan CSS Cheat Sheet

CSS je dovoljno jednostavan za korištenje. Izazov je to što ima puno izbornika i izjava da ih je sve teško zapamtiti, ako ne i nemoguće. No, ne morate ih pamtiti.

Evo varalica za CSS i CSS3 koje možete koristiti bilo kada.

Preuzmite CSS Cheat Sheet

Što je PHP?

PHP je akronim za Hypertext Preprocessor, popularni skriptni jezik otvorenog koda s ugrađenim HTML-om koji se koristi za razvoj dinamičkih web stranica, web aplikacija ili statičnih web stranica.

Od PHP je jezik poslužitelja, njegove skripte se izvršavaju na poslužitelju (ne u pregledniku), a njegov izlaz je običan HTML u pregledniku.

PHP je naširoko korišten open source skriptni jezik opće namjene koji je posebno prikladan za web razvoj i može se ugraditi u HTML. – s PHP.net

Ovaj skriptni jezik na strani poslužitelja radi na raznim operativnim sustavima, uključujući Windows, Mac OS, Linux i Unix. Također je kompatibilan s većinom poslužitelja kao što su Apache i IIS.

U usporedbi s drugim jezicima kao što su ASP i JSP, PHP je jednostavan za naučiti početnike. PHP također nudi mnoštvo značajki koje su potrebne programerima napredne razine.

Koja je razlika između PHP-a i HTML-a?

Iako su oba jezika ključna za web development, PHP i HTML razlikuju se na nekoliko načina.

Ključna razlika leži u tome za što se ta dva jezika koriste.

HTML se koristi za klijentsku stranu (ili front-end) razvoj, dok PHP se koristi za poslužiteljsku stranu razvoj.

HTML je jezik koji programeri koriste za organiziranje sadržaja na web stranici, kao što je umetanje teksta, slika, tablica i hiperveza, oblikovanje teksta i određivanje boja.

U međuvremenu, PHP se koristi za pohranu i dohvaćanje podataka iz baze podataka, izvođenje logičkih operacija, slanje i odgovaranje na e-poštu, učitavanje i preuzimanje datoteka, razvoj aplikacija za stolna računala i više.

Što se tiče vrste koda, HTML je statičan dok je PHP dinamičan. HTML kod je uvijek isti svaki put kada se otvori, dok PHP rezultati variraju ovisno o pregledniku korisnika.

Za nove programere oba su jezika laka za naučiti, iako je krivulja učenja kraća s HTML-om nego s PHP-om.

Kompletan PHP Cheat Sheet

Ako ste programer početnik koji želi biti vještiji u PHP-u ili proširiti svoje znanje o njemu, evo PHP varalica možete brzo pogledati.

Ova varalica sastoji se od PHP funkcija – koje su prečaci za široko korištene kodove – koje su ugrađene u skriptni jezik.

Preuzmite PHP Cheat Sheet

Ultimate HTML, CSS i PHP Cheat Sheet

Bez obzira jeste li iskusni programer ili samo netko tko počinje s kodiranjem, sjajno je imati nešto čemu se uvijek možete vratiti za referencu ili jednostavno osvježiti pamćenje.

I kao dar programerima koji žongliraju između HTML, CSS i PHP, ovo je ULTIMATNA varalica, zajedno sa svime što trebate znati i zapamtiti u vezi s ova tri kodna jezika:

Preuzmite kombinirani HTML, CSS i PHP Cheat Sheet