HTML, CSS i PHP: Ultimate Cheat Sheet

Naš sadržaj podržavaju čitatelji. Ako kliknete na naše poveznice, možemo zaraditi proviziju. Kako pregledavamo.

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

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:

HTML

  • Ne podržava audio i video bez podrške za flash player.
  • Koristi kolačiće za pohranu privremenih podataka.
  • Ne dopušta pokretanje JavaScipta u pregledniku.
  • Omogućuje vektorsku grafiku korištenjem različitih tehnologija kao što su VML, Silver-light i Flash, između ostalih.
  • Ne dopušta efekte povlačenja i ispuštanja.
  • Radi sa svim starijim preglednicima.
  • Manje prilagođen mobilnim uređajima.
  • Deklaracija tipa dokumenta duga je i komplicirana.
  • Nema elemente kao što su nav i zaglavlje, kao ni atribute kao što su charset, async, i ping.
  • Izuzetno je teško dobiti pravu geolokaciju korisnika pomoću preglednika.
  • Ne mogu se nositi s netočnom sintaksom.

HTML5

  • Podržava audio i video kontrole uz korištenje i oznake.
  • Koristi SQL baze podataka i predmemoriju aplikacija za pohranu izvanmrežnih podataka.
  • Omogućuje rad JavaScripta u pozadini uz upotrebu JS Web worker API-ja.
  • Vektorska grafika temeljni je dio HTML5, poput SVG-a i platna.
  • Omogućuje efekte povlačenja i ispuštanja.
  • Omogućite crtanje oblika.
  • Podržava sve nove preglednike kao što su Firefox, Mozilla, Chrome i Safari.
  • Prilagođeniji mobilnim uređajima.
  • Deklaracija tipa dokumenta je jednostavna i lagana.
  • Ima nove elemente za web strukture kao što su navigacija, zaglavlje i podnožje, među ostalima, a ima i atribute skupa znakova,sync, i ping.
  • Čini kodiranje znakova jednostavnim i lakim.
  • Omogućuje praćenje geolokacije korisnika korištenjem JS GeoLocation API-ja.
  • Sposoban rukovati netočnom sintaksom.
 

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:

 

Zaglavlje

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

Nav

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

Odjeljak

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

Članak

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

Sa strane (bočna traka)

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

Podnožje

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

Primjeri osnovnog oblikovanja teksta

Naslovi do

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

stavak ( & )

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

Neuređeno i uređen popis

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

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

Blok citat i citirati

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

Veza

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

Dugme

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

Prijelom retka

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

Vodoravna crta

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

Adresa

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

Indeks i superskript

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

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

Skraćenica

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

Kodirati

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

Vrijeme

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

Izbrisano

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

Primjeri tablica

Primjer glave, tijela i noge stola

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

Primjer naslova, redaka i podataka tablice

<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

Slika

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

Slika

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

Lik

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

Video

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

html varalica

 

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.

CSS Cheat Sheet

 

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.

PHP Cheat Sheet

 

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

 

FAQ

Što je html css cheat sheet?

HTML i CSS varalica koristan je resurs za početnike, pa čak i iskusne web programere. Ovaj praktični referentni vodič pruža brzi pregled najčešćih HTML i CSS sintakse i svojstava. 

Gdje mogu dobiti php cheat sheet pdf?

Možete pronaći PHP varalice u PDF formatu iz raznih izvora na internetu. Evo nekoliko mjesta gdje možete pogledati:
Službeno PHP web mjesto: Provjerite službenu PHP web stranicu (php.net) za službenu dokumentaciju, koja uključuje opsežan PHP priručnik koji možete preuzeti u PDF formatu. Iako sam po sebi nije varalica, sadrži opsežne informacije o PHP funkcijama i upotrebi.
PHP web-mjesta s varalicama: Mnoga web mjesta nude varalice za PHP programiranje. Web-mjesta kao što je "Cheatography" često nude varalice koje su dodali korisnici u PDF formatu. Samo potražite "PHP cheat sheet PDF" na svojoj omiljenoj tražilici da biste pronašli te resurse.
GitHub: GitHub je platforma za programere koji dijele kod i resurse. Na GitHubu možete pronaći PHP varalice u PDF formatu traženjem "PHP varalica" u GitHub traci za pretraživanje. Mnogi programeri i organizacije tamo dijele svoje varalice i resurse.
Online PDF generatori: Postoje mrežni alati koji vam omogućuju izradu prilagođenih varalica za PHP odabirom određenih funkcija i tema koje želite uključiti. Ovi alati generiraju PDF datoteku koju možete preuzeti. Jedan takav alat je "PDFCcrowd".
Ne zaboravite osigurati da je izvor koji koristite za PHP cheat sheet ugledan i ažuran kako biste osigurali točnost i relevantnost za vaše potrebe.

Što je html5 cheat sheet?

Jedan koristan izvor za programere je HTML5 Cheat Sheet, koji pruža brzi referentni vodič za različite elemente, atribute i sintaksu koja se koristi u HTML5. Ova varalica uključuje informacije o tome kako stvoriti naslove, odlomke, veze, slike, tablice, obrasce i još mnogo toga. Služi kao praktičan alat i za početnike i za iskusne programere, pomažući im uštedjeti vrijeme i izbjeći pogreške tijekom kodiranja u HTML5.

Koje su glavne razlike između php-a i HTML-a?

PHP i HTML često se uspoređuju i suprotstavljaju zbog svojih različitih funkcija i korisnosti u web razvoju. Dok je HTML odgovoran za definiranje strukture i sadržaja web stranica, PHP omogućuje stvaranje dinamičkih elemenata, kao što su interaktivni obrasci i integracija baze podataka. Posljedično, izbor između PHP-a i HTML-a uvelike ovisi o specifičnim zahtjevima i ciljevima projekta web razvoja.

Gdje mogu pronaći HTML tags cheat sheet?

Na internetu možete pronaći varalice za HTML oznake iz raznih izvora. Evo nekoliko mjesta gdje možete pogledati:
Službeno W3C web mjesto: World Wide Web Consortium (W3C) je organizacija koja razvija i održava web standarde, uključujući HTML. Imaju sveobuhvatnu dokumentaciju o HTML-u, koja služi kao mjerodavna referenca. Posjetite odjeljak HTML na web stranici W3C za detaljne informacije o HTML oznakama.
Mozilla Developer Network (MDN): MDN nudi opsežnu dokumentaciju o web tehnologijama, uključujući HTML. Njihov HTML referentni vodič jedan je od najpouzdanijih dostupnih izvora koji se često ažuriraju. Referenci HTML elementa možete pristupiti u MDN web dokumentima.
HTML Cheat Sheet web stranice: Mnoga web-mjesta nude šablone za HTML oznake u različitim formatima, uključujući PDF. Web-mjesta poput “Cheatography”, “HTML.com” i “W3Schools” često nude HTML varalice za ispis.
GitHub: GitHub je vrijedan resurs za programere. Možete pronaći HTML oznake varalice u raznim spremištima traženjem "HTML varalica" ili sličnih ključnih riječi na GitHubu.
Online PDF generatori: Baš kao i kod PHP varalica, postoje mrežni alati koji vam omogućuju stvaranje prilagođenih HTML tagova varalica odabirom specifičnih oznaka i elemenata koje želite uključiti. Ovi alati generiraju PDF datoteku koju možete preuzeti.

Tamo također možete pronaći html cheat sheet pdf format.

Mathias Ahlgren je izvršni direktor i osnivač Website Rating, upravljajući globalnim timom urednika i pisaca. Magistrirao je informacijske znanosti i menadžment. Njegova se karijera okrenula SEO-u nakon ranih iskustava u razvoju weba tijekom studija. S više od 15 godina u SEO-u, digitalnom marketingu i web razvoju. Njegov fokus također uključuje sigurnost web stranica, što dokazuje certifikat za Cyber ​​Security. Ova raznolika stručnost podupire njegovo vodstvo u Website Rating.

"WSR tim" je kolektivna grupa stručnih urednika i pisaca specijaliziranih za tehnologiju, internetsku sigurnost, digitalni marketing i web razvoj. Strastveni prema digitalnom području, oni proizvode dobro istražen, pronicljiv i pristupačan sadržaj. Njihova predanost točnosti i jasnoći čini Website Rating pouzdan izvor za informiranje u dinamičnom digitalnom svijetu.

Budite informirani! Pridružite se našem newsletteru
Pretplatite se sada i dobijte besplatan pristup vodičima, alatima i resursima samo za pretplatnike.
Možete se odjaviti u bilo kojem trenutku. Vaši podaci su sigurni.
Budite informirani! Pridružite se našem newsletteru
Pretplatite se sada i dobijte besplatan pristup vodičima, alatima i resursima samo za pretplatnike.
Možete se odjaviti u bilo kojem trenutku. Vaši podaci su sigurni.
Budite informirani! Pridružite se našem newsletteru!
Pretplatite se sada i dobijte besplatan pristup vodičima, alatima i resursima samo za pretplatnike.
Ostati u toku! Pridružite se našem biltenu
Možete se odjaviti u bilo kojem trenutku. Vaši podaci su sigurni.
Moja tvrtka
Ostati u toku! Pridružite se našem biltenu
???? (Skoro) ste pretplaćeni!
Idite u svoju pristiglu e-poštu i otvorite e-poštu koju sam vam poslao da potvrdite svoju adresu e-pošte.
Moja tvrtka
Pretplaćeni ste!
Hvala vam na vašoj pretplati. Svakog ponedjeljka šaljemo bilten s pronicljivim podacima.
Podijeli na...