HTML, CSS dan PHP: Lembar Curang Utama

Ditulis oleh

📥 Unduh file saya Lembar contekan HTML, CSS dan PHP, lengkap dengan semua yang perlu Anda ketahui dan ingat terkait ketiga bahasa coding ini.

Seni pengkodean membutuhkan waktu bertahun-tahun untuk dikuasai sepenuhnya dengan semua tag, sintaksis, dan elemen lain dari bahasa pemrograman yang sering terjalin.

Bahkan pengembang yang lebih berpengalaman dapat jatuh ke dalam perangkap melupakan sintaks yang benar untuk tugas-tugas tertentu. Karena itu, tidak realistis untuk mengharapkan lebih banyak warna hijau pengembang web untuk memiliki pemahaman yang sempurna tentang seni.

Inilah sebabnya mengapa lembar contekan untuk HTML, CSS, dan PHP sangat berguna, terlepas dari berapa lama Anda telah berlatih. Ini berfungsi sebagai panduan cepat untuk menemukan perintah dan sintaks yang tepat, memungkinkan Anda untuk fokus pada pengembangan web yang sebenarnya.

Di bawah ini, Anda akan menemukan lembar contekan yang cenderung visual yang didahului oleh penyegaran cepat untuk membantu Anda dalam upaya pengkodean Anda. Saya juga membuatnya mudah di-bookmark, disimpan, atau dicetak untuk kenyamanan Anda.

Apa itu HTML?

HTML adalah singkatan dari Hypertext Markup Language – kode yang digunakan untuk membuat struktur halaman web dan kontennya.

Bahasa markup ini terdiri dari serangkaian elemen yang digunakan untuk membuat konten muncul atau berfungsi dengan cara tertentu dan merupakan bagian utama dari kode front-end setiap situs web.

HTML adalah bahasa untuk mendeskripsikan struktur halaman web… Dengan HTML, penulis mendeskripsikan struktur halaman dengan menggunakan markup. Elemen-elemen dari potongan label bahasa konten seperti paragraf, daftar, tabel, dan sebagainya. - dari W3.org

Misalnya, Anda bisa mengapit atau membungkus bagian konten yang berbeda - di mana tag yang melingkupi bisa membuat kata atau gambar hyperlink ke halaman lain. Anda juga dapat menggunakan ini untuk memiringkan kata dan membuat font lebih besar atau lebih kecil, antara lain.

Seperti dicatat oleh W3, beberapa hal lain yang memungkinkan HTML untuk Anda lakukan termasuk:

  • Menerbitkan dokumen online dengan judul, teks, tabel, daftar, foto, Dll
  • Mengambil informasi online dengan mengklik tombol melalui tautan hypertext.
  • Merancang bentuk untuk melakukan transaksi dengan layanan jarak jauh ke mencari informasi, melakukan reservasi, atau memesan produk, di antara fungsi lainnya.
  • Termasuk spreadsheet, klip video, dan media lainnya dan aplikasi sudah ada di dokumen Anda.

Jadi jika Anda membuat garis “Anjingku sangat manis” berdiri sendiri, Anda dapat menentukan bahwa itu adalah paragraf dengan melampirkannya dalam tag paragraf (lebih lanjut tentang ini nanti), yang akan terlihat seperti: Anjing saya sangat manis

Apa perbedaan antara HTML dan HTML5?

Seperti namanya, HTML5 adalah versi kelima dari standar HTML. Ini mendukung integrasi video dan audio ke dalam bahasa, yang mengurangi kebutuhan akan plugin dan elemen pihak ketiga.

Di bawah ini adalah perbedaan utama antara HTML dan HTML5:

HTML

  • Tidak mendukung audio dan video tanpa dukungan pemutar flash.
  • Menggunakan cookie untuk menyimpan data sementara.
  • Tidak mengizinkan JavaScipt berjalan di browser.
  • Memungkinkan untuk grafik vektor dengan menggunakan teknologi yang berbeda seperti VML, Silver-light, dan Flash, antara lain.
  • Tidak mengizinkan efek seret dan lepas.
  • Bekerja dengan semua browser lama.
  • Kurang ramah seluler.
  • Deklarasi Doctype panjang dan rumit.
  • Tidak memiliki elemen seperti nav dan header, serta atribut seperti charset, async, dan ping.
  • Sangat sulit untuk mendapatkan GeoLocation pengguna yang sebenarnya dengan menggunakan browser.
  • Tidak dapat menangani sintaks yang tidak akurat.

HTML5

  • Mendukung kontrol audio dan video dengan penggunaan dan tag.
  • Menggunakan database SQL dan cache aplikasi untuk menyimpan data offline.
  • Mengizinkan JavaScript bekerja di latar belakang dengan penggunaan API pekerja Web JS.
  • Grafik vektor adalah bagian fundamental dari HTML5, seperti SVG dan kanvas.
  • Mengizinkan efek seret dan lepas.
  • Buatlah mungkin untuk menggambar bentuk.
  • Mendukung semua browser baru seperti Firefox, Mozilla, Chrome, dan Safari.
  • Lebih ramah seluler.
  • Deklarasi Doctype sederhana dan mudah.
  • Memiliki elemen baru untuk struktur web seperti nav, header, dan footer, antara lain, dan juga memiliki atribut charset, async, dan ping.
  • Membuat pengkodean karakter sederhana dan mudah.
  • Memungkinkan untuk melacak GeoLocation pengguna dengan menggunakan JS GeoLocation API.
  • Mampu menangani sintaks yang tidak akurat.
 

Selain itu, ada banyak elemen HTML yang telah dimodifikasi atau dihapus dari HTML5. Ini termasuk:

  • - Berubah menjadi
  • - Berubah menjadi
  • - Berubah menjadi
  • - Dihapus
  • - Dihapus
  • - Dihapus
  • - Tidak ada label baru. Menggunakan CSS.
  • - Tidak ada label baru. Menggunakan CSS.
  • - Tidak ada label baru. Menggunakan CSS.
  • - Tidak ada label baru. Menggunakan CSS.
  • - Tidak ada label baru. Menggunakan CSS.

Sementara itu, HTML5 juga menyertakan sejumlah elemen yang baru ditambahkan. Ini termasuk:

 

Contoh HTML5 (PlayGround Kode)

Contoh Struktur Semantik

Di HTML5 ada beberapa elemen semantik yang dapat digunakan untuk menentukan bagian berbeda dari sebuah halaman web. Berikut ini yang paling umum:

 

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>
 

Bagian

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

Selain (sidebar)

<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

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

Contoh Pemformatan Teks Dasar

Judul untuk

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

Gugus kalimat ( & )

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

Tidak dipesan dan daftar pesanan

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

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

Blockquote dan mengutip

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

Tautan

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

Tombol

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

Jeda baris

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

Garis horisontal

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

Alamat

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

Subskrip & superskrip

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

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

Singkatan

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

Waktu

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

Dihapus

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

Contoh Tabel

Contoh kepala meja, badan dan kaki

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

Judul tabel, baris dan contoh data

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

Contoh Media

Gambar

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

Gambar

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

Angka

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

Lembar Cheat HTML Lengkap

Apakah Anda seorang pengembang berpengalaman atau seseorang yang hanya ingin membuat kaki mereka basah di industri, selalu membantu untuk memiliki Lembar contekan HTML berguna. Dan saya telah merancang satu yang dapat membantu Anda di setiap langkah.

html contekan

 

Unduh HTML Cheat Sheet

 

Apa itu CSS?

CSS atau Cascading Style Sheets menjelaskan bagaimana elemen HTML akan ditampilkan di layar. Karena dapat mengontrol tata letak beberapa halaman secara bersamaan, ini dapat menghemat banyak waktu dan tenaga.

CSS adalah bahasa untuk mendeskripsikan presentasi halaman web, termasuk warna, tata letak, dan font. Ini memungkinkan seseorang untuk menyesuaikan presentasi ke berbagai jenis perangkat, seperti layar besar, layar kecil, atau printer. - dari W3.org

Apa Perbedaan Antara HTML dan CSS?

Meskipun HTML dan CSS adalah bahasa yang digunakan untuk membangun halaman web dan aplikasi, keduanya memiliki fungsi yang berbeda.

HTML adalah apa yang Anda gunakan untuk menentukan struktur dan konten yang akan ditampilkan di halaman web.

CSS, di sisi lain, digunakan untuk modifikasi file desain web elemen HTML di halaman web (termasuk tata letak, efek visual, dan warna latar belakang).

HTML menciptakan struktur dan konten, CSS melakukan desain atau gaya. Bersama-sama, HTML dan CSS membentuk antarmuka halaman web.

Apa itu Sintaks CSS?

Sintaks CSS terdiri dari pemilih dan blok deklarasi.

Selektor menentukan elemen HTML yang akan diberi gaya sementara blok deklarasi berisi satu atau beberapa deklarasi atau pasangan CSS, nama properti dan nilai dengan titik dua di antara keduanya.

Deklarasi dipisahkan oleh titik koma dan blok deklarasi selalu diapit oleh kurung kurawal.

Misalnya, jika Anda ingin mengubah tampilan heading 1 Anda, sintaks CSS Anda akan terlihat seperti ini: h1 {color: red; ukuran font: 16pc;}

Lembar Cheat CSS Lengkap

CSS cukup mudah digunakan. Tantangannya adalah ada banyak penyeleksi dan deklarasi yang mengingat semuanya sulit jika bukan tidak mungkin. Namun, Anda tidak harus menghafalnya.

Berikut adalah lembar contekan untuk CSS dan CSS3 yang dapat Anda gunakan kapan saja.

Lembar Cheat CSS

 

Unduh Lembar Cheat CSS

 

Apa itu PHP?

PHP adalah singkatan dari Hypertext Preprocessor, bahasa skrip sumber terbuka tersemat HTML yang populer digunakan untuk mengembangkan situs web dinamis, aplikasi web, atau situs web statis.

Sejak PHP adalah bahasa sisi server, skripnya dijalankan di server (bukan di browser), dan outputnya adalah HTML biasa di browser.

PHP adalah bahasa skrip serba guna sumber terbuka yang banyak digunakan dan sangat cocok untuk pengembangan web dan dapat disematkan ke dalam HTML. - dari PHP.net

Bahasa skrip sisi server ini berjalan di berbagai sistem operasi, termasuk Windows, Mac OS, Linux, dan Unix. Ini juga kompatibel dengan sebagian besar server seperti Apache dan IIS.

Dibandingkan dengan bahasa lain seperti ASP dan JSP, PHP mudah dipelajari untuk pemula. PHP juga menawarkan banyak fitur yang dibutuhkan oleh pengembang tingkat lanjut.

Apa Perbedaan Antara PHP dan HTML?

Meskipun kedua bahasa itu penting untuk pengembangan web, PHP dan HTML berbeda dalam beberapa hal.

Perbedaan utamanya terletak pada kegunaan kedua bahasa tersebut.

HTML digunakan untuk sisi klien (atau front-end) pengembangan, sementara PHP digunakan untuk sisi server pembangunan.

HTML adalah bahasa yang digunakan pengembang untuk mengatur konten di situs web, seperti memasukkan teks, gambar, tabel, dan hyperlink, memformat teks, dan menentukan warna.

Sedangkan PHP digunakan untuk menyimpan dan mengambil data dari database, melakukan operasi logis, mengirim dan membalas email, mengupload dan mendownload file, mengembangkan aplikasi desktop, dan banyak lagi.

Dalam hal jenis kode, HTML statis sedangkan PHP dinamis. Kode HTML selalu sama setiap kali dibuka, sedangkan hasil PHP bervariasi tergantung pada browser pengguna.

Untuk developer baru, kedua bahasa tersebut mudah dipelajari, meskipun kurva pembelajarannya lebih pendek dengan HTML daripada PHP.

Selesaikan Lembar Cheat PHP

Jika Anda seorang programmer pemula yang ingin lebih mahir dalam PHP atau memperluas pengetahuan Anda tentang itu, berikut adalah Lembar contekan PHP Anda dapat dengan cepat merujuk ke.

Lembar sontekan ini terdiri dari fungsi PHP - yang merupakan pintasan untuk kode yang banyak digunakan - yang dibangun ke dalam bahasa skrip.

Lembar Cheat PHP

 

Unduh Lembar Cheat PHP

 

Lembar Cheat HTML, CSS, dan PHP Utama

Apakah Anda seorang pengembang berpengalaman atau hanya seseorang yang baru memulai pengkodean, itu bagus untuk memiliki sesuatu yang Anda selalu dapat kembali untuk referensi atau hanya menyegarkan ingatan Anda.

Dan sebagai hadiah untuk pengembang yang sering berpindah-pindah HTML, CSS, dan PHP, berikut adalah lembar contekan ULTIMATE, lengkap dengan semua yang perlu Anda ketahui dan ingat tentang ketiga bahasa pengkodean ini:

 

Unduh Lembar Cheat HTML, CSS & PHP Gabungan

 

Bergabunglah dengan newsletter kami

Berlangganan buletin pengumpulan mingguan kami dan dapatkan berita & tren industri terbaru

Dengan mengklik 'berlangganan" Anda setuju dengan kami Persyaratan penggunaan dan kebijakan privasi.