HTML, CSS en PHP: de ultieme cheat sheet

Geschreven door

📥 Download mijn Cheat sheets voor HTML, CSS en PHP, compleet met alles wat u moet weten en onthouden over deze drie codeertalen.

Het kan jaren duren voordat de kunst van het coderen volledig onder de knie is, met alle tags, syntaxis en andere elementen van programmeertalen die vaak met elkaar verweven zijn.

Zelfs de meer ervaren ontwikkelaars kunnen in de val lopen om de juiste syntaxis voor bepaalde taken te vergeten. Als zodanig is het onrealistisch om meer groen te verwachten webontwikkelaars een feilloze beheersing van de kunst hebben.

Dit is waarom spiekbriefjes voor HTML, CSS en PHP zijn uiterst nuttig, ongeacht hoe lang u al oefent. Het dient als een snelle handleiding voor het vinden van de juiste commando's en syntaxis, zodat u zich kunt concentreren op de daadwerkelijke webontwikkeling.

Hieronder vindt u visueel geneigde spiekbriefjes, voorafgegaan door snelle opfrissingen om u te helpen bij uw codeerinspanningen. Ik heb er ook voor gezorgd dat het gemakkelijk kan worden gemarkeerd, opgeslagen of afgedrukt voor uw gemak.

Wat is html?

HTML staat voor Hypertext Markup Language – een code die wordt gebruikt om de structuur voor een webpagina en de inhoud ervan te maken.

Deze opmaaktaal bestaat uit een reeks elementen die ervoor zorgden dat inhoud op een bepaalde manier werd weergegeven of functioneerde en vormt een belangrijk onderdeel van de front-endcode van elke website.

HTML is de taal voor het beschrijven van de structuur van webpagina's ... Met HTML beschrijven auteurs de structuur van pagina's met behulp van markup. De elementen van de taal labelen stukjes inhoud, zoals alinea, lijst, tabel, enzovoort. - van W3.org

U kunt bijvoorbeeld verschillende delen van de inhoud insluiten of omwikkelen, waarbij de omsluitende tags een hyperlink naar een woord of afbeelding naar een andere pagina kunnen maken. U kunt dit ook gebruiken om onder andere woorden cursief te maken en de lettertypen groter of kleiner te maken.

Zoals opgemerkt door W3, enkele van de andere dingen die u met HTML kunt doen, zijn onder meer:

  • Online documenten publiceren met koppen, tekst, tabellen, lijsten, foto's, Etc.
  • Online informatie opvragen met een klik op de knop via hyperlinks.
  • Het ontwerpen van vormen voor het uitvoeren van transacties met externe diensten aan informatie zoeken, reserveren of producten bestellen, naast andere functies.
  • Inclusief spreadsheets, videoclips en andere media en toepassingen die al in uw documenten staan.

Dus als je de grens zou halen "Mijn hond is erg lief" op zichzelf staan, kunt u specificeren dat het een alinea is door deze in alinea-tags te plaatsen (hierover later meer), die er als volgt uit zou zien: Mijn hond is erg lief

Wat is het verschil tussen HTML en HTML5?

Zoals de naam al doet vermoeden, HTML5 is de vijfde versie van de HTML-standaard. Het ondersteunt de integratie van video en audio in de taal, waardoor er minder plug-ins en elementen van derden nodig zijn.

Hieronder staan ​​de belangrijkste verschillen tussen HTML en HTML5:

HTML

  • Ondersteunt geen audio en video zonder ondersteuning voor Flash Player.
  • Gebruikt cookies om tijdelijke gegevens op te slaan.
  • Staat JavaScipt niet toe om in de browser te draaien.
  • Maakt vectorafbeeldingen mogelijk door verschillende technologieën te gebruiken, zoals onder meer VML, Silver-light en Flash.
  • Staat geen drag-and-drop-effecten toe.
  • Werkt met alle oudere browsers.
  • Minder mobielvriendelijk.
  • Doctype-verklaring is lang en ingewikkeld.
  • Heeft geen elementen zoals nav en header, evenals attributen zoals charset, async, en pingen.
  • Uiterst moeilijk om echte GeoLocation van gebruikers te krijgen door een browser te gebruiken.
  • Kan onnauwkeurige syntaxis niet aan.

HTML5

  • Ondersteunt audio- en videobediening met behulp van en tags.
  • Gebruikt SQL-databases en applicatiecache om offline gegevens op te slaan.
  • Staat JavaScript toe om op de achtergrond te werken met behulp van de JS Web Worker API.
  • Vectorafbeeldingen zijn een fundamenteel onderdeel van HTML5, net als SVG en canvas.
  • Maakt slepen en neerzetten van effecten mogelijk.
  • Maak het mogelijk om vormen te tekenen.
  • Ondersteunt alle nieuwe browsers zoals Firefox, Mozilla, Chrome en Safari.
  • Meer mobielvriendelijk.
  • Doctype-aangifte is eenvoudig en gemakkelijk.
  • Heeft nieuwe elementen voor webstructuren zoals onder andere nav, header en footer, en heeft ook attributen van charset, eensync, en pingen.
  • Maakt tekencodering eenvoudig en gemakkelijk.
  • Maakt het mogelijk om de GeoLocation van gebruikers te volgen met behulp van JS GeoLocation API.
  • Kan onnauwkeurige syntaxis verwerken.
 

Bovendien zijn er veel HTML-elementen die zijn gewijzigd of verwijderd uit HTML5. Deze omvatten:

  • - Veranderd naar
  • - Veranderd naar
  • - Veranderd naar
  • - Verwijderd
  • - Verwijderd
  • - Verwijderd
  • - Geen nieuwe tag. Maakt gebruik van CSS.
  • - Geen nieuwe tag. Maakt gebruik van CSS.
  • - Geen nieuwe tag. Maakt gebruik van CSS.
  • - Geen nieuwe tag. Maakt gebruik van CSS.
  • - Geen nieuwe tag. Maakt gebruik van CSS.

Ondertussen bevat HTML5 ook een aantal nieuw toegevoegde elementen. Deze omvatten:

 

HTML5-voorbeelden (Code PlayGround)

Semantische structuurvoorbeelden

In HTML5 zijn er enkele semantische elementen die kunnen worden gebruikt om verschillende delen van een webpagina te definiëren. Dit zijn de meest voorkomende:

 

Header

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

Sectie

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

Artikel

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

Terzijde (zijbalk)

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

Voettekst

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

Voorbeelden van basistekstopmaak

Koppen naar

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

Paragraaf ( & )

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

Ongeordend en geordende lijst

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

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

Blockquote en citeer

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

Koppeling

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

Knop

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

Regeleinde

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

Horizontale lijn

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

Adres

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

Subscript en superscript

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

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

Afkorting

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

Code

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

Tijd

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

Verwijderd

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

Tabelvoorbeelden

Voorbeeld tafelhoofd, lijf en voet

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

Tabelkoppen, rijen en gegevensvoorbeeld

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

Media Voorbeelden

Beeld

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

Afbeelding

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

Figuur

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

Compleet HTML Cheat Sheet

Of je nu een doorgewinterde ontwikkelaar bent of iemand die gewoon nat wil worden in de industrie, het helpt altijd om een HTML-spiekbriefje handig. En ik heb er een ontworpen die je bij elke stap kan helpen.

html spiekbriefje

 

HTML-spiekbriefje downloaden

 

Wat is CSS?

Cascading Style Sheets of CSS beschrijft hoe HTML-elementen op het scherm worden weergegeven. Omdat het de lay-outs van meerdere pagina's tegelijkertijd kan beheren, kan het u veel tijd en moeite besparen.

CSS is de taal voor het beschrijven van de presentatie van webpagina's, inclusief kleuren, lay-out en lettertypen. Hiermee kan de presentatie worden aangepast aan verschillende soorten apparaten, zoals grote schermen, kleine schermen of printers. - van W3.org

Wat is het verschil tussen HTML en CSS?

Hoewel HTML en CSS beide talen zijn die worden gebruikt om webpagina's en applicaties te bouwen, hebben ze verschillende functies.

HTML is wat u gebruikt om de structuur en de inhoud te dicteren die op de webpagina wordt weergegeven.

CSS wordt daarentegen gebruikt voor het wijzigen van het web design van de HTML-elementen op de webpagina (inclusief lay-out, visuele effecten en achtergrondkleur).

HTML zorgt voor de structuur en inhoud, CSS doet het ontwerp of de stijl. Samen vormen HTML en CSS een webpagina-interface.

Wat is CSS-syntaxis?

CSS-syntaxis bestaat uit een selector en een declaratieblok.

De selector bepaalt het HTML-element dat moet worden opgemaakt, terwijl het declaratieblok een of meer declaraties of paren CSS bevat, een eigenschapsnaam en een waarde met een dubbele punt ertussen.

Aangiften worden gescheiden door puntkomma's en aangifteblokken staan ​​altijd tussen accolades.

Als u bijvoorbeeld het uiterlijk van kop 1 wilt wijzigen, ziet uw CSS-syntaxis er ongeveer zo uit: h1 {color: red; lettergrootte: 16pc;}

Compleet CSS Cheat Sheet

CSS is eenvoudig genoeg om te gebruiken. De uitdaging is dat er veel selectors en verklaringen zijn dat het moeilijk, zo niet onmogelijk is om ze allemaal te onthouden. Je hoeft ze echter niet te onthouden.

Hier is een spiekbriefje voor CSS en CSS3 die u altijd kunt gebruiken.

CSS-spiekbriefje

 

CSS-spiekbriefje downloaden

 

Wat is PHP?

PHP is een afkorting voor Hypertext Preprocessor, een populaire open-source, in HTML ingesloten scripttaal die wordt gebruikt voor het ontwikkelen van dynamische websites, webapplicaties of statische websites.

Sinds PHP is een server-side taal, zijn scripts worden uitgevoerd op de server (niet in de browser), en de output is een gewone HTML in de browser.

PHP is een veelgebruikte open source scripttaal voor algemene doeleinden die vooral geschikt is voor webontwikkeling en kan worden ingesloten in HTML. - van PHP.net

Deze server-side scripttaal draait op verschillende besturingssystemen, waaronder Windows, Mac OS, Linux en Unix. Het is ook compatibel met de meeste servers zoals Apache en IIS.

In vergelijking met andere talen, zoals ASP en JSP, is PHP gemakkelijk te leren voor beginners. PHP biedt ook tal van functies die ontwikkelaars op gevorderd niveau nodig hebben.

Wat is het verschil tussen PHP en HTML?

Hoewel beide talen cruciaal zijn voor web development, PHP en HTML verschillen op verschillende manieren.

Het belangrijkste verschil zit hem in waar de twee talen voor worden gebruikt.

HTML wordt gebruikt voor client-side (of front-end) ontwikkeling, terwijl PHP wordt gebruikt voor server-side ontwikkeling.

HTML is de taal die ontwikkelaars gebruiken om inhoud op een website te organiseren, zoals het invoegen van tekst, afbeeldingen, tabellen en hyperlinks, het opmaken van tekst en het specificeren van kleuren.

Ondertussen wordt PHP gebruikt om gegevens uit een database op te slaan en op te halen, logische bewerkingen uit te voeren, e-mails te verzenden en te beantwoorden, bestanden te uploaden en downloaden, desktopapplicaties te ontwikkelen en meer.

In termen van codetype, HTML is statisch terwijl PHP dynamisch is. Een HTML-code is altijd hetzelfde elke keer dat deze wordt geopend, terwijl de PHP-resultaten variëren afhankelijk van de browser van de gebruiker.

Voor nieuwe ontwikkelaars zijn beide talen gemakkelijk te leren, hoewel de leercurve korter is met HTML dan met PHP.

Voltooi PHP Cheat Sheet

Als je een beginnende programmeur bent die meer bedreven wil zijn in PHP of je kennis ervan wil uitbreiden, dan is hier een PHP-spiekbriefje waarnaar u snel kunt verwijzen.

Dit spiekbriefje bestaat uit PHP-functies - dit zijn snelkoppelingen voor de veelgebruikte codes - die in de scripttaal zijn ingebouwd.

PHP Cheatsheet

 

PHP-spiekbriefje downloaden

 

De ultieme HTML, CSS en PHP Cheat Sheet

Of je nu een doorgewinterde ontwikkelaar bent of gewoon iemand die begint met coderen, het is geweldig om iets te hebben waar je altijd op terug kunt komen ter referentie of gewoon je geheugen kunt opfrissen.

En als cadeau voor ontwikkelaars die ertussen goochelen HTML, CSS en PHP, hier is een ULTIEME spiekbriefje, compleet met alles wat u moet weten en onthouden over deze drie coderingstalen:

 

Download Gecombineerde HTML, CSS en PHP Cheat Sheet

 

Schrijf je in op onze nieuwsbrief

Abonneer u op onze wekelijkse roundup-nieuwsbrief en ontvang het laatste nieuws en trends in de branche

Door op 'abonneren' te klikken ga je akkoord met onze gebruiksvoorwaarden en privacybeleid.