HTML, CSS og PHP: The Ultimate Cheat Sheet

Written by

📥 Last ned min HTML, CSS og PHP jukseark, komplett med alt du trenger å vite og huske angående disse tre kodingsspråkene.

Koden til koding kan ta år å mestre med alle kodene, syntaksen og andre elementer av programmeringsspråk som ofte flettes sammen.

Selv de mer erfarne utviklerne kan falle i fellen med å glemme riktig syntaks for bestemte oppgaver. Som sådan er det urealistisk å forvente mer grønt webutviklere å ha et feilfritt grep om kunsten.

Dette er grunnen jukseark for HTML, CSS og PHP er ekstremt nyttige, uansett hvor lenge du har trent. Det fungerer som en hurtigguide for å finne de riktige kommandoene og syntakser, slik at du kan fokusere på faktisk webutvikling.

Nedenfor finner du visuelt tilbøyelige jukseark foran med raske forfriskninger for å hjelpe deg med dine kodingsarbeider. Jeg har også gjort det enkelt å bokmerke, lagre eller skrive ut for din bekvemmelighet.

Hva er HTML?

HTML står for Hypertext Markup Language - en kode som brukes til å lage strukturen for en webside og innholdet.

Dette merkespråket består av en rekke elementer som pleide å få innhold til å vises eller fungere på en bestemt måte, og er en stor del av front-end-koden på hvert nettsted.

HTML er språket for å beskrive strukturen til websider ... Med HTML beskriver forfatterne sidestrukturen ved hjelp av markering. Elementene i språket merker deler av innholdet som avsnitt, liste, tabell og så videre. - fra W3.org

For eksempel kan du legge inn eller pakke inn forskjellige deler av innholdet - der de vedlagte kodene kan lage et ord eller et bilde hyperkobling til en annen side. Du kan også bruke dette til å kursivere ord og gjøre skriftene større eller mindre, blant andre.

Som bemerket av W3, noen av de andre tingene HTML lar deg gjøre inkluderer:

  • Publisering av elektroniske dokumenter med overskrifter, tekst, tabeller, lister, bilderOsv
  • Henter online informasjon ved å klikke på en knapp via hypertekstlenker.
  • Prosjektering skjemaer for å gjennomføre transaksjoner med eksterne tjenester til søk etter informasjon, bestill eller bestill produkter, blant andre funksjoner.
  • Inkludert regneark, videoklipp og andre medier og applikasjoner som allerede er i dokumentene dine.

Så hvis du skulle lage linjen “Hunden min er veldig søt” stå alene, kan du spesifisere at det er et avsnitt ved å legge det inn i avsnittskoder (mer om dette senere), som vil se ut som: Hunden min er veldig søt

Hva er forskjellen mellom HTML og HTML5?

Som navnet antyder, HTML5 er den femte versjonen av HTML-standarden. Den støtter integrering av video og lyd i språket, noe som reduserer behovet for tredjeparts plugins og elementer.

Nedenfor er hovedforskjellene mellom HTML og HTML5:

HTML

  • Støtter ikke lyd og video uten støtte for flash -spiller.
  • Bruker informasjonskapsler for å lagre midlertidige data.
  • Tillater ikke at JavaScipt kjøres i nettleseren.
  • Tillater vektorgrafikk ved hjelp av forskjellige teknologier som VML, Silver-light og Flash, blant andre.
  • Tillater ikke dra og slipp -effekter.
  • Fungerer med alle eldre nettlesere.
  • Mindre mobilvennlig.
  • Doktypedeklarasjon er lang og komplisert.
  • Har ikke elementer som nav og header, samt attributter som charset, async, og ping.
  • Ekstremt vanskelig å få ekte GeoLocation av brukere ved å bruke en nettleser.
  • Klarer ikke unøyaktig syntaks.

HTML5

  • Støtter lyd- og videokontroller med bruk av og koder.
  • Bruker SQL-databaser og applikasjonsbuffer for å lagre offline data.
  • Tillater JavaScript å fungere i bakgrunnen ved bruk av JS Web worker API.
  • Vektorgrafikk er en grunnleggende del av HTML5, omtrent som SVG og lerret.
  • Tillater dra og slipp-effekter.
  • Gjør det mulig å tegne former.
  • Støtter alle nye nettlesere som Firefox, Mozilla, Chrome og Safari.
  • Mer mobilvennlig.
  • Doktypedeklarasjon er enkel og enkel.
  • Har nye elementer for nettstrukturer som blant annet nav, topptekst og bunntekst, og har også attributter for tegnsett, etsync, og ping.
  • Gjør karakterkoding enkel og enkel.
  • Tillater sporing av brukerens GeoLocation ved å bruke JS GeoLocation API.
  • Kan håndtere unøyaktige syntakser.
 

I tillegg er det mange elementer av HTML som enten er endret eller fjernet fra HTML5. Disse inkluderer:

  • - Endret til
  • - Endret til
  • - Endret til
  • - Fjernet
  • - Fjernet
  • - Fjernet
  • - Ingen ny tag. Bruker CSS.
  • - Ingen ny tag. Bruker CSS.
  • - Ingen ny tag. Bruker CSS.
  • - Ingen ny tag. Bruker CSS.
  • - Ingen ny tag. Bruker CSS.

I mellomtiden inneholder HTML5 også en rekke nylig tilføyde elementer. Disse inkluderer:

 

HTML5-eksempler (Code PlayGround)

Semantiske struktureksempler

I HTML5 er det noen semantiske elementer som kan brukes til å definere forskjellige deler av en webside. Her er de vanligste:

 

Overskrift

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

Seksjon

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

Artikkel

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

Bortsett fra (sidefelt)

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

Bunntekst

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

Grunnleggende eksempler på tekstformatering

Overskrifter til

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

Avsnitt ( & )

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

Ubestilt og bestilt liste

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

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

Blockquote og sitere

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

Link

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

Knapp

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

Linjeskift

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

Horisontal linje

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

Adresse

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

Abonnement og overskrift

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

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

Forkortelse

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

Kode

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

Tid

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

Slettet

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

Tabelleksempler

Bordhode, kropp og foteksempel

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

Tabelloverskrifter, rader og dataeksempel

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

Medieeksempler

Bilde

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

Bilde

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

Figur

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

Komplett HTML Cheat Sheet

Enten du er en erfaren utvikler eller noen som bare ønsker å få føttene våte i bransjen, hjelper det alltid å ha en HTML jukseark praktisk. Og jeg har designet en som kan hjelpe deg på alle trinn.

html jukseark

 

Last ned HTML Cheat Sheet

 

Hva er CSS?

Cascading Style Sheets eller CSS beskriver hvordan HTML -elementer vises på skjermen. Fordi den kan kontrollere flere siders oppsett samtidig, kan det spare deg for mye tid og krefter.

CSS er språket for beskrivelse av presentasjonen av websider, inkludert farger, layout og skrifttyper. Det gjør det mulig å tilpasse presentasjonen til forskjellige typer enheter, for eksempel store skjermer, små skjermer eller skrivere. - fra W3.org

Hva er forskjellen mellom HTML og CSS?

Mens HTML og CSS begge er språk som brukes til å lage websider og applikasjoner, har de forskjellige funksjoner.

HTML er det du bruker for å diktere strukturen og innholdet som skal vises på websiden.

CSS, derimot, brukes til modifisering av webdesign av HTML-elementene på websiden (inkludert layout, visuelle effekter og bakgrunnsfarge).

HTML skaper strukturen og innholdet, CSS gjør designet eller stilen. Til sammen utgjør HTML og CSS et nettsidegrensesnitt.

Hva er CSS-syntaks?

CSS-syntaks består av en velger og en deklarasjonsblokk.

Velgeren bestemmer HTML-elementet som skal utformes mens erklæringsblokken inneholder en eller flere erklæringer eller par CSS, et eiendomsnavn og en verdi med et kolon mellom dem.

Erklæringer er atskilt med semikolon, og erklæringsblokker er alltid omsluttet av krøllete bukseseler.

Hvis du for eksempel vil endre hvordan overskrift 1 ser ut, vil CSS-syntaksen din se ut slik: h1 {farge: rød; skriftstørrelse: 16 stk;}

Komplett CSS Cheat Sheet

CSS er lett nok å bruke. Utfordringen er at det er mange velgere og erklæringer som husker dem alle er vanskelig om ikke umulig. Du trenger ikke å huske dem, men.

Her er en jukseark for CSS og CSS3 som du kan bruke når som helst.

CSS-jukseark

 

Last ned CSS Cheat Sheet

 

Hva er PHP?

PHP er et akronym for Hypertext Preprocessor, et populært HTML-innebygd skriptspråk med åpen kildekode som brukes til å utvikle dynamiske nettsteder, webapplikasjoner eller statiske nettsteder.

Siden PHP er et serverspråk, skriptene kjøres på serveren (ikke i nettleseren), og utdataene er en vanlig HTML i nettleseren.

PHP er et mye brukt åpen kildekode skriptspråk for generell bruk som er spesielt egnet for webutvikling og kan legges inn i HTML. - fra PHP.net

Dette skriptspråket på serversiden kjører på en rekke operativsystemer, inkludert Windows, Mac OS, Linux og Unix. Den er også kompatibel med de fleste servere som Apache og IIS.

Sammenlignet med andre språk som ASP og JSP, er PHP lett å lære for nybegynnere. PHP tilbyr også mange funksjoner som utviklere på avansert nivå trenger.

Hva er forskjellen mellom PHP og HTML?

Selv om begge språk er avgjørende for webutvikling, PHP og HTML er forskjellige på flere måter.

Hovedforskjellen ligger i hva de to språkene brukes til.

HTML brukes til klientsiden (eller front-end) utvikling, mens PHP brukes til server-side utvikling.

HTML er språket utviklere bruker for å organisere innhold på et nettsted, for eksempel å sette inn tekst, bilder, tabeller og hyperkoblinger, formatere tekst og spesifisere farger.

I mellomtiden brukes PHP til å lagre og hente data fra en database, utføre logiske operasjoner, sende og svare på e-post, laste opp og laste ned filer, utvikle skrivebordsprogrammer og mer.

Når det gjelder kodetype, HTML er statisk mens PHP er dynamisk. En HTML -kode er alltid den samme hver gang den åpnes, mens PHP -resultatene varierer avhengig av brukerens nettleser.

For nye utviklere er begge språk enkle å lære, selv om læringskurven er kortere med HTML enn PHP.

Komplett PHP Cheat Sheet

Hvis du er en nybegynner programmerer som ønsker å være mer dyktig i PHP eller utvide din kunnskap om det, her er en PHP jukseark kan du raskt henvise til.

Dette juksearket består av PHP-funksjoner - som er snarveier for de mye brukte kodene - som er innebygd i skriptspråket.

PHP jukseark

 

Last ned PHP Cheat Sheet

 

Ultimate HTML, CSS og PHP Cheat Sheet

Enten du er en erfaren utvikler eller bare noen som begynner med koding, er det flott å ha noe du alltid kan komme tilbake til som referanse eller bare oppdatere hukommelsen.

Og som en gave til utviklere som sjonglerer mellom HTML, CSS og PHP, her er et ULTIMATE jukseark, komplett med alt du trenger å vite og huske angående disse tre kodingspråkene:

 

Last ned kombinert HTML, CSS og PHP Cheat Sheet

 

Bli med på vårt nyhetsbrev

Abonner på vårt ukentlige nyhetsbrev og få de siste bransjenyhetene og trendene

Ved å klikke "abonner" godtar du vår vilkår for bruk og personvernerklæring.