HTML, CSS og PHP: The Ultimate Cheat Sheet

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

• Hva er HTML?
• HTML5-eksempler (Code PlayGround)
• Ch HTML Cheat Sheet
• Hva er CSS?
• 📥 CSS-jukseark
• Hva er PHP?
• 📥 PHP jukseark
• 📥 HTML CSS og PHP Cheat Sheet

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 gå 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, uavhengig av hvor lenge du har trent. Den fungerer som en rask guide for å finne de riktige kommandoene og syntaksene, slik at du kan fokusere på faktisk nettutvikling.

Nedenfor finner du visuelt tilbøyelige jukseark innledet av raske oppfriskninger for å hjelpe deg med koding. Jeg har også laget den slik at den enkelt kan bokmerkes, lagres eller skrives ut for din bekvemmelighet.

Hva er HTML?

HTML står for Hypertext Markup Language – en kode som brukes til å lage strukturen for en nettside og dens innhold.

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:

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

In HTML5 det er noen semantiske elementer som kan brukes til å definere ulike deler av en nettside. Her er de vanligste:

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

Grunnleggende eksempler på tekstformatering

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

Tabelleksempler

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

Medieeksempler

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

Komplett HTML Cheat Sheet

Enten du er en erfaren utvikler eller noen som bare ønsker å ta beina fatt i bransjen, hjelper det alltid å ha en Jukseark for HTML-formatering praktisk. Og jeg har designet en som kan hjelpe deg hele veien.

Last ned HTML Cheat Sheet

Hva er CSS?

Cascading Style Sheets eller CSS beskriver hvordan HTML-elementer vises på skjermen. Fordi det 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 om at det er vanskelig om ikke umulig å huske dem alle. Du trenger imidlertid ikke å lære dem utenat.

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

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-resultater 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 å bli mer dyktig i PHP eller utvide kunnskapen din 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.

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 for referanse eller bare friske opp 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