HTML, CSS ja PHP: The Ultimate Cheat Sheet

📥 Lataa omani HTML-, CSS- ja PHP-huijausarkit, jossa on kaikki mitä sinun tarvitsee tietää ja muistaa näistä kolmesta koodauskielestä.

• Mikä on HTML?
• HTML5-esimerkkejä (Code PlayGround)
• 📥 HTML-huijauslehti
• Mikä on CSS?
• 📥 CSS-huijauslehti
• Mikä on PHP?
• 📥 PHP-huijauslehti
• 📥 HTML CSS- ja PHP-huijauslehti

Koodaustaiteen hallinta voi kestää vuosia, kun kaikki ohjelmointikielten tunnisteet, syntaksit ja muut elementit ovat usein kietoutuneet toisiinsa.

Jopa kokeneemmat kehittäjät voivat joutua ansaan unohtaessaan oikean syntaksin tiettyjä tehtäviä varten. Sellaisenaan on epärealistista odottaa enemmän vihreää web-kehittäjät saada virheetön käsitys taiteesta.

Tämän vuoksi huijausarkit HTML:lle, CSS:lle ja PHP:lle ovat erittäin hyödyllisiä riippumatta siitä, kuinka kauan olet harjoitellut. Se toimii pikaoppaana oikeiden komentojen ja syntaksien löytämiseen, jolloin voit keskittyä varsinaiseen verkkokehitykseen.

Alta löydät visuaalisesti taipuvia huijauslehtiä, joita edeltää nopeat päivitykset, jotka auttavat sinua koodauspyrkimyksissäsi. Olen myös tehnyt sen helposti kirjanmerkkeihin, tallentamiseen tai tulostukseen avuksesi.

Mikä on HTML?

HTML tulee sanoista Hypertext Markup Language – koodi, jota käytetään luomaan rakenne verkkosivulle ja sen sisällölle.

Tämä merkintäkieli koostuu joukosta elementtejä, joilla sisältö näyttäytyy tai toimi tietyllä tavalla, ja se on tärkeä osa jokaisen verkkosivuston käyttöliittymäkoodia.

HTML on kieli Web-sivujen rakenteen kuvaamiseen… HTML:n avulla kirjoittajat kuvaavat sivujen rakennetta merkintöjen avulla. Kielen elementit merkitsevät sisältöä, kuten kappale, luettelo, taulukko ja niin edelleen. – osoitteesta W3.org

Voit esimerkiksi liittää tai kääriä eri osia sisällöstä – jolloin oheiset tagit voivat luoda sanan tai kuvan hyperlinkin toiselle sivulle. Voit käyttää tätä myös muun muassa kursivoimaan sanoja ja suurentamaan tai pienentämään fontteja.

Kuten by W3, joitain muita asioita, joita HTML sallii, ovat:

• Asiakirjojen julkaiseminen verkossa otsikot, teksti, taulukot, luettelot, valokuvat, Jne
• Tietojen hakeminen verkossa napin painalluksella kautta hypertekstilinkkejä.
• Suunnittelu lomakkeet liiketoimien suorittamiseen etäpalveluiden kanssa etsiä tietoa, tehdä varauksia tai tilata tuotteita, muiden toimintojen ohella.
• Mukaan lukien laskentataulukoita, videoleikkeitä ja muuta mediaa ja sovellukset jo asiakirjoissasi.

Jos siis tekisit linjan “Koirani on erittäin suloinen” seistä itsestään, voit määrittää, että se on kappale, liittämällä sen kappaletunnisteisiin (lisää tästä myöhemmin), joka näyttää tältä: Koirani on erittäin suloinen

Mitä eroa on HTML:llä ja HTML5:llä?

Kuten nimestä voi päätellä, HTML5 on HTML-standardin viides versio. Se tukee videon ja äänen integrointia kieleen, mikä vähentää kolmansien osapuolien laajennusten ja elementtien tarvetta.

Alla on tärkeimmät erot HTML:n ja HTML5:n välillä:

Lisäksi monia HTML-elementtejä on joko muokattu tai poistettu HTML5:stä. Nämä sisältävät:

• - Muutettiin
• - Muutettiin
• - Muutettiin
• – Poistettu
• – Poistettu
• – Poistettu
• – Ei uutta merkkiä. Käyttää CSS:ää.
• – Ei uutta merkkiä. Käyttää CSS:ää.
• – Ei uutta merkkiä. Käyttää CSS:ää.
• – Ei uutta merkkiä. Käyttää CSS:ää.
• – Ei uutta merkkiä. Käyttää CSS:ää.

Samaan aikaan HTML5 sisältää myös useita uusia lisättyjä elementtejä. Nämä sisältävät:

HTML5-esimerkkejä (Code PlayGround)

Esimerkkejä semanttisista rakenteista

In HTML5 on joitakin semanttisia elementtejä, joita voidaan käyttää web-sivun eri osien määrittelemiseen. Tässä ovat yleisimmät:

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

Perusesimerkkejä tekstin muotoilusta

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

Taulukkoesimerkkejä

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

Media esimerkkejä

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

Täydellinen HTML-huijauslehti

Olitpa kokenut kehittäjä tai joku, joka vain haluaa saada jalkansa märkiksi alalla, se auttaa aina HTML-muotoilu huijauslehti kätevä. Ja olen suunnitellut sellaisen, joka voi auttaa sinua joka vaiheessa.

Lataa HTML-huijauslehti

Mikä on CSS?

CSS-tyylisivut tai CSS kuvaa, kuinka HTML-elementit näytetään näytöllä. Koska se voi hallita useiden sivujen asetteluja samanaikaisesti, se voi säästää paljon aikaa ja vaivaa.

CSS on kieli, jolla kuvataan Web-sivujen esitystapaa, mukaan lukien värit, asettelu ja fontit. Sen avulla voit mukauttaa esityksen erityyppisiin laitteisiin, kuten suuriin näyttöihin, pieniin näyttöihin tai tulostimiin. – osoitteesta W3.org

Mitä eroa on HTML:n ja CSS:n välillä?

Vaikka HTML ja CSS ovat molemmat kieliä, joita käytetään verkkosivujen ja sovellusten luomiseen, niillä on erilaisia ​​​​toimintoja.

HTML:llä sanelet verkkosivulla näytettävän rakenteen ja sisällön.

CSS:ää sitä vastoin käytetään muuntamiseen Web Design verkkosivun HTML-elementeistä (mukaan lukien asettelu, visuaaliset tehosteet ja taustaväri).

HTML luo rakenteen ja sisällön, CSS suunnittelee tai tyylit. Yhdessä HTML ja CSS muodostavat verkkosivun käyttöliittymän.

Mikä on CSS-syntaksi?

CSS-syntaksi koostuu valitsimesta ja ilmoituslohkosta.

Valitsin määrittää tyylitettävän HTML-elementin, kun taas ilmoituslohko sisältää yhden tai useamman ilmoituksen tai CSS-parin, ominaisuuden nimen ja arvon, jonka välissä on kaksoispiste.

Ilmoitukset erotetaan puolipisteillä ja ilmoituslohkot suljetaan aina aaltosulkeilla.

Jos esimerkiksi haluat muokata otsikon 1 ulkoasua, CSS-syntaksi näyttäisi tältä: h1 {väri:punainen; font-size:16pc;}

Täydellinen CSS-huijauslehti

CSS on riittävän helppokäyttöinen. Haasteena on se, että on olemassa paljon valitsimia ja julistuksia, joiden mukaan niiden muistaminen on vaikeaa ellei mahdotonta. Sinun ei kuitenkaan tarvitse opetella niitä ulkoa.

Tässä huijauslehti CSS:lle ja CSS3:lle jota voit käyttää milloin tahansa.

Lataa CSS-huijauslehti

Mikä on PHP?

PHP on lyhenne sanoista Hypertext Preprocessor, suosittu avoimen lähdekoodin, HTML- upotettu komentosarjakieli, jota käytetään dynaamisten verkkosivustojen, verkkosovellusten tai staattisten verkkosivustojen kehittämiseen.

Koska PHP on palvelinpuolen kieli, sen komentosarjat suoritetaan palvelimella (ei selaimessa), ja sen tulos on yksinkertainen HTML selaimessa.

PHP on laajalti käytetty avoimen lähdekoodin yleiskäyttöinen komentosarjakieli, joka sopii erityisesti web-kehitykseen ja voidaan upottaa HTML:ään. – PHP.netistä

Tämä palvelinpuolen komentosarjakieli toimii useissa käyttöjärjestelmissä, mukaan lukien Windows, Mac OS, Linux ja Unix. Se on myös yhteensopiva useimpien palvelimien kanssa, kuten Apache ja IIS.

Verrattuna muihin kieliin, kuten ASP ja JSP, PHP on helppo oppia aloittelijoille. PHP tarjoaa myös runsaasti ominaisuuksia, joita edistyneen tason kehittäjät tarvitsevat.

Mitä eroa on PHP:llä ja HTML:llä?

Vaikka molemmat kielet ovat tärkeitä Web-kehitys, PHP ja HTML ovat erilaisia ​​useilla tavoilla.

Keskeinen ero on siinä, mihin näitä kahta kieltä käytetään.

HTML:ää käytetään asiakaspuolella (tai etupään) kehitystä, kun taas PHP:tä käytetään palvelinpuolella kehittämiseen.

HTML on kieli, jota kehittäjät käyttävät sivuston sisällön järjestämiseen, kuten tekstin, kuvien, taulukoiden ja hyperlinkkien lisäämiseen, tekstin muotoiluun ja värien määrittämiseen.

Samaan aikaan PHP:tä käytetään tallentamaan ja hakemaan tietoja tietokannasta, suorittamaan loogisia toimintoja, lähettämään sähköposteja ja vastaamaan niihin, lähettämään ja lataamaan tiedostoja, kehittämään työpöytäsovelluksia ja paljon muuta.

Mitä tulee koodityyppiin, HTML on staattinen, kun taas PHP on dynaaminen. HTML-koodi on aina sama joka kerta, kun se avataan, kun taas PHP-tulokset vaihtelevat käyttäjän selaimen mukaan.

Uusille kehittäjille molemmat kielet ovat helppo oppia, vaikka oppimiskäyrä on lyhyempi HTML:llä kuin PHP:llä.

Täydellinen PHP-huijauslehti

Jos olet aloittelija ohjelmoija, joka haluaa olla taitavampi PHP:ssä tai laajentaa tietojasi siitä, tässä on PHP-huijauslehti voit nopeasti viitata.

Tämä huijauslehti koostuu PHP-funktioista – jotka ovat laajalti käytettyjen koodien pikakuvakkeita – jotka on sisäänrakennettu komentosarjakieleen.

Lataa PHP-huijauslehti

Ultimate HTML-, CSS- ja PHP-huijauslehti

Olitpa kokenut kehittäjä tai vasta koodaamista aloittava henkilö, on hienoa, että sinulla on jotain, jonka pariin voit aina palata tutustumaan tai vain virkistää muistiasi.

Ja lahjaksi kehittäjille, jotka jongleeraavat välillä HTML, CSS ja PHP, tässä on ULTIMATE-huijauslehti, jossa on kaikki mitä sinun tarvitsee tietää ja muistaa näistä kolmesta koodauskielestä:

Lataa yhdistetty HTML-, CSS- ja PHP-huijauslehti