HTML, CSS i PHP: Ultimate Cheat Sheet

📥 Preuzmite moj HTML, CSS i PHP cheat sheets, zajedno sa svime što trebate znati i zapamtiti o ova tri kodna jezika.

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

Umijeću kodiranja mogu biti potrebne godine da se potpuno savlada sa svim često isprepletenim oznakama, sintaksama i drugim elementima programskih jezika.

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

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

Ispod ćete pronaći vizualno nagnute varalice kojima prethode brza osvježavanja koja će vam pomoći u vašim nastojanjima kodiranja. Također sam napravio da se lako označi, sačuva ili odštampa radi vaše udobnosti.

Šta je HTML?

HTML je skraćenica od Hypertext Markup Language – kod koji se koristi za kreiranje strukture web stranice i njenog sadržaja.

Ovaj jezik za označavanje sastoji se od niza elemenata koji se koriste da bi se sadržaj pojavio ili funkcionisao na određeni način i glavni je dio front-end koda svake web stranice.

HTML je jezik za opisivanje strukture web stranica... Sa HTML-om, autori opisuju strukturu stranica koristeći markup. Elementi jezika označavaju dijelove sadržaja kao što su pasus, lista, tabela itd. – sa W3.org

Na primjer, možete priložiti ili umotati različite dijelove sadržaja – gdje oznake koje zatvaraju 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 fontova, između ostalog.

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

• Objavljivanje onlajn dokumenata sa naslovi, tekst, tabele, liste, fotografije, Itd
• Preuzimanje informacija na mreži jednim klikom na dugme putem hipertekstualne veze.
• projektiranje forme za obavljanje transakcija sa udaljenim uslugama do potražite informacije, napravite rezervacije ili naručite proizvode, između ostalih funkcija.
• uključujući proračunske tabele, video klipovi i drugi mediji i aplikacije koje su već u vašim dokumentima.

Dakle, ako ste vi napravili liniju “Moj pas je veoma sladak” samostalno, možete odrediti da je to paragraf tako što ćete ga zatvoriti u oznake paragrafa (više o tome kasnije), koji bi izgledali ovako: Moj pas je veoma 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 ili 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đe uključuje niz novododatih elemenata. 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>

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

Tablični primjeri

<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

Bilo da ste iskusan programer ili neko ko samo želi da pokvasi noge u industriji, uvijek pomaže imati HTML formatiranje cheat sheet zgodno. I osmislio sam jedan koji bi vam mogao pomoći na svakom koraku.

Preuzmite HTML Cheat Sheet

Šta je CSS?

Kaskadni listovi stilova ili CSS opisuje kako će HTML elementi biti prikazani na ekranu. Budući da može kontrolirati izgled više stranica u isto vrijeme, može vam uštedjeti mnogo vremena i truda.

CSS je jezik za opisivanje prezentacije web stranica, uključujući boje, izgled i fontove. Omogućava prilagođavanje prezentacije različitim vrstama uređaja, kao što su veliki ekrani, mali ekrani ili štampači. – sa 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 da diktirate strukturu i sadržaj koji će biti prikazan na web stranici.

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

HTML kreira strukturu i sadržaj, CSS radi dizajn ili stil. Zajedno, HTML i CSS čine interfejs web stranice.

Šta 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, ime svojstva i vrijednost sa dvotočkom između njih.

Deklaracije su odvojene tačkama i zarezima, a blokovi deklaracija su uvek zatvoreni u vitičaste zagrade.

Na primjer, ako želite izmijeniti način na koji vaš naslov 1 izgleda, 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 u tome što postoji mnogo selektora i izjava da je zapamtiti sve njih teško ako ne i nemoguće. Ipak, ne morate ih pamtiti.

Evo a cheat sheet za CSS i CSS3 koje možete koristiti bilo kada.

Preuzmite CSS Cheat Sheet

Šta je PHP?

PHP je akronim za Hypertext Preprocessor, popularni open-source, HTML-ugrađeni skriptni jezik koji se koristi za razvoj dinamičkih web stranica, web aplikacija ili statičkih web stranica.

S obzirom na to da je PHP je jezik na strani servera, njegove skripte se izvršavaju na serveru (ne u pretraživaču), a njegov izlaz je običan HTML u pretraživaču.

PHP je široko rasprostranjen open source jezik za skriptovanje opšte namene koji je posebno pogodan za web razvoj i može se ugraditi u HTML. – sa PHP.net

Ovaj skriptni jezik na strani servera radi na različitim operativnim sistemima, uključujući Windows, Mac OS, Linux i Unix. Takođe je kompatibilan sa većinom servera kao što su Apache i IIS.

U poređenju sa drugim jezicima kao što su ASP i JSP, PHP je lak za učenje za početnike. PHP takođe nudi obilje funkcija koje su potrebne naprednim programerima.

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

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

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

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

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

U međuvremenu, PHP se koristi za pohranjivanje i preuzimanje podataka iz baze podataka, izvođenje logičkih operacija, slanje i odgovaranje na e-poštu, otpremanje i preuzimanje datoteka, razvoj desktop aplikacija i još mnogo toga.

Š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 u zavisnosti od pretraživača korisnika.

Za nove programere, oba jezika su laka za učenje, iako je kriva učenja kraća kod HTML-a nego kod PHP-a.

Kompletan PHP Cheat Sheet

Ako ste programer početnik koji želi da bude iskusniji u PHP-u ili da proširi svoje znanje o njemu, evo PHP cheat sheet možete brzo pogledati.

Ovaj cheat sheet se sastoji od PHP funkcija – koje su prečice za široko korišćene kodove – koje su ugrađene u skript jezik.

Preuzmite PHP Cheat Sheet

Ultimate HTML, CSS i PHP Cheat Sheet

Bilo da ste iskusni programer ili samo neko ko počinje kodiranje, sjajno je imati nešto čemu se uvijek možete vratiti za referencu ili jednostavno osvježiti pamćenje.

I kao poklon programerima koji žongliraju između HTML, CSS i PHP, ovdje je ULTIMATE cheat sheet, zajedno sa svime što trebate znati i zapamtiti o ova tri kodna jezika:

Preuzmite kombinirani HTML, CSS & PHP Cheat Sheet