HTML, CSS en PHP: de ultieme cheat sheet

Onze inhoud wordt door lezers ondersteund. Als u op onze links klikt, kunnen we een commissie verdienen. Hoe we beoordelen.

📥 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 door de juiste syntaxis voor bepaalde taken te vergeten. Het is dan ook 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 je al oefent. Het dient als een korte handleiding voor het vinden van de juiste commando's en syntaxis, zodat u zich kunt concentreren op daadwerkelijke webontwikkeling.

Hieronder vindt u visueel ingestelde spiekbriefjes voorafgegaan door snelle herhalingen om u te helpen bij uw codeerinspanningen. Ik heb het ook zo gemaakt 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 formulieren 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 niet toe dat JavaScipt in de browser wordt uitgevoerd.
  • Maakt vectorafbeeldingen mogelijk door verschillende technologieën te gebruiken, zoals onder meer VML, Silver-light en Flash.
  • Staat geen slepen-en-neerzetten-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, eensync, en pingen.
  • Uiterst moeilijk om echte GeoLocation van gebruikers te krijgen door een browser te gebruiken.
  • Kan niet omgaan met onnauwkeurige syntaxis.

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 er zijn 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 natte voeten wil krijgen in de branche, het helpt altijd om een Cheatsheet voor HTML-opmaak 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-out 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 uit je hoofd te leren.

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 elke keer dat deze wordt geopend altijd hetzelfde, 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 bekwaam wil worden 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 net begint met coderen, het is geweldig om iets te hebben waar je altijd naar terug kunt grijpen als referentie of om gewoon je geheugen op te frissen.

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

 

FAQ

Wat is html css-spiekbriefje?

HTML- en CSS-spiekbriefjes zijn een nuttige hulpbron voor beginners en zelfs ervaren webontwikkelaars. Deze handige naslaggids biedt een snel overzicht van de meest voorkomende HTML- en CSS-syntaxis en -eigenschappen. 

Waar kan ik een php-spiekbriefje pdf krijgen?

Je kunt PHP-spiekbriefjes in PDF-formaat uit verschillende bronnen online vinden. Hier zijn een paar plaatsen waar je kunt kijken:
Officiële PHP-website: Kijk op de officiële PHP-website (php.net) voor officiële documentatie, waaronder een uitgebreide PHP-handleiding die u in PDF-formaat kunt downloaden. Hoewel het niet per se een spiekbriefje is, bevat het uitgebreide informatie over PHP-functies en -gebruik.
PHP Cheat Sheet-websites: Veel websites bieden spiekbriefjes voor PHP-programmering. Websites zoals “Cheatography” bieden vaak door gebruikers bijgedragen spiekbriefjes in PDF-formaat. Zoek gewoon naar “PHP cheat sheet PDF” in uw favoriete zoekmachine om deze bronnen te vinden.
GitHub: GitHub is een platform waarop ontwikkelaars code en bronnen kunnen delen. Je kunt PHP-spiekbriefjes in PDF-formaat vinden op GitHub door te zoeken naar “PHP-spiekbriefje” in de GitHub-zoekbalk. Veel ontwikkelaars en organisaties delen daar hun spiekbriefjes en bronnen.
Online PDF-generatoren: Er zijn online tools waarmee u aangepaste spiekbriefjes voor PHP kunt maken door de specifieke functies en onderwerpen te selecteren die u wilt opnemen. Deze tools genereren een PDF-bestand dat u kunt downloaden. Eén zo’n tool is “PDFCcrowd.”
Vergeet niet ervoor te zorgen dat de bron die u gebruikt voor een PHP-spiekbriefje een goede reputatie heeft en up-to-date is om nauwkeurigheid en relevantie voor uw behoeften te garanderen.

Wat is een html5-spiekbriefje?

Een nuttige bron voor ontwikkelaars is de HTML5 Cheat Sheet, die een korte handleiding biedt voor de verschillende elementen, attributen en syntaxis die in HTML5 worden gebruikt. Dit spiekbriefje bevat informatie over het maken van kopjes, alinea's, koppelingen, afbeeldingen, tabellen, formulieren en meer. Het dient als een handig hulpmiddel voor zowel beginners als ervaren ontwikkelaars, waardoor ze tijd kunnen besparen en fouten kunnen voorkomen tijdens het coderen in HTML5.

Wat zijn de belangrijkste verschillen tussen php en HTML?

PHP en HTML worden vaak vergeleken en gecontrasteerd vanwege hun verschillende functies en bruikbaarheid bij webontwikkeling. Terwijl HTML verantwoordelijk is voor het definiëren van de structuur en inhoud van webpagina's, maakt PHP het creëren van dynamische elementen mogelijk, zoals interactieve formulieren en database-integratie. De keuze tussen PHP en HTML hangt dus grotendeels af van de specifieke eisen en doelstellingen van een webontwikkelingsproject.

Waar kan ik het spiekbriefje voor HTML-tags vinden?

U kunt spiekbriefjes voor HTML-tags online vinden in verschillende bronnen. Hier zijn enkele plaatsen waar u kunt kijken:
Officiële W3C-website: Het World Wide Web Consortium (W3C) is de organisatie die webstandaarden, waaronder HTML, ontwikkelt en onderhoudt. Ze beschikken over uitgebreide documentatie over HTML, die als gezaghebbend naslagwerk dient. Bezoek de HTML-sectie van de W3C-website voor gedetailleerde informatie over HTML-tags.
Mozilla-ontwikkelaarsnetwerk (MDN): MDN biedt uitgebreide documentatie over webtechnologieën, waaronder HTML. Hun HTML-referentiegids is een van de meest betrouwbare en regelmatig bijgewerkte bronnen die beschikbaar zijn. U kunt toegang krijgen tot de HTML-elementreferentie via MDN-webdocumenten.
HTML Cheat Sheet-websites: Veel websites bieden spiekbriefjes voor HTML-tags in verschillende formaten, waaronder PDF. Websites zoals ‘Cheatography’, ‘HTML.com’ en ‘W3Schools’ bieden vaak afdrukbare HTML-spiekbriefjes.
GitHub: GitHub is een waardevolle bron voor ontwikkelaars. Je kunt spiekbriefjes voor HTML-tags in verschillende opslagplaatsen vinden door op GitHub te zoeken naar “HTML spiekbriefje” of vergelijkbare trefwoorden.
Online PDF-generatoren: Net als bij PHP-spiekbriefjes zijn er online tools waarmee u aangepaste spiekbriefjes voor HTML-tags kunt maken door de specifieke tags en elementen te selecteren die u wilt opnemen. Deze tools genereren een PDF-bestand dat u kunt downloaden.

Daar vindt u ook het html-spiekbriefje in pdf-formaat.

Mathias Ahlgren is de CEO en oprichter van Website Rating, die een wereldwijd team van redacteuren en schrijvers aanstuurt. Hij heeft een masterdiploma in informatiewetenschappen en management. Zijn carrière draaide om SEO na vroege ervaringen met webontwikkeling tijdens de universiteit. Met meer dan 15 jaar ervaring in SEO, digitale marketing en webontwikkeling. Zijn focus ligt ook op websitebeveiliging, wat blijkt uit een certificaat Cyber ​​Security. Deze uiteenlopende expertise ligt ten grondslag aan zijn leiderschap bij Website Rating.

Het "WSR-team" is de collectieve groep van deskundige redacteuren en schrijvers die gespecialiseerd zijn in technologie, internetbeveiliging, digitale marketing en webontwikkeling. Ze zijn gepassioneerd door de digitale wereld en produceren goed onderbouwde, inzichtelijke en toegankelijke inhoud. Hun toewijding aan nauwkeurigheid en duidelijkheid maakt Website Rating een vertrouwde bron om op de hoogte te blijven in de dynamische digitale wereld.

Blijf geïnformeerd! Schrijf je in op onze nieuwsbrief
Abonneer u nu en krijg gratis toegang tot handleidingen, tools en bronnen die alleen voor abonnees zijn bedoeld.
U kunt zich op elk moment afmelden. Uw gegevens zijn veilig.
Blijf geïnformeerd! Schrijf je in op onze nieuwsbrief
Abonneer u nu en krijg gratis toegang tot handleidingen, tools en bronnen die alleen voor abonnees zijn bedoeld.
U kunt zich op elk moment afmelden. Uw gegevens zijn veilig.
Blijf geïnformeerd! Schrijf je in op onze nieuwsbrief!
Abonneer u nu en krijg gratis toegang tot handleidingen, tools en bronnen die alleen voor abonnees zijn bedoeld.
Blijf op de hoogte! Schrijf je in op onze nieuwsbrief
U kunt zich op elk moment afmelden. Uw gegevens zijn veilig.
Mijn bedrijf
Blijf op de hoogte! Schrijf je in op onze nieuwsbrief
???? Je bent (bijna) ingeschreven!
Ga naar je e-mailinbox en open de e-mail die ik je heb gestuurd om je e-mailadres te bevestigen.
Mijn bedrijf
U bent geabonneerd!
Bedankt voor uw abonnement. We versturen elke maandag een nieuwsbrief met inzichtelijke data.
Delen naar...