Artikel PHP Dan HTML
![](data:image/svg+xml;charset=utf-8,<svg height="480px" width="640px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Assalamualaikum wr. wb. Perkenalkan nama saya Windi Antika, saya adalah mahasiswi Politeknik Purbaya, kelas TI 1C. Dalam tutorial belajar PHP pertama ini, kita akan membahas tentang pengertian PHP dan HTML dan apa saja fungsi PHP dan HTML dalam pemrograman web.
Pengertian PHP
PHP adalah script untuk pemrograman script web server-side, script yang membuat dokumen HTML secara on the fly, dokumen HTML yang dihasilkan dari suatu aplikasi bukan dokumen HTML yang dibuat dengan menggunakan editor teks atau editor HTML. HTML adalah bahasa pemrograman dasar yang harus dikuasai jika ingin membuat suatu website. Untuk mengetahui lebih lanjut tentang HTML, simak artikel Belajar HTML Lengkap untuk Pemula.
Dengan menggunakan PHP maka maintenance suatu situs web menjadi lebih mudah. Proses update data dapat dilakukan dengan menggunakan aplikasi yang dibuat dengan menggunakan script PHP.
PHP/FI merupakan nama awal dari PHP. PHP merupakan singkatan dari Personal Home Page dan FI adalah singkatan dari Form Interface. Dibuat pertama kali oleh Rasmus Lerdoff. PHP, awalnya merupakan program CGI yang dikhususkan untuk menerima input melalui form yang ditampilkan dalam browser web.
Software ini disebarkan dan dilisensikan sebagai perangkat lunak Open Source. PHP secara resmi merupakan kependekan dari PHP: HyperText Preprocessor, merupakan bahasa script server-side yang disisipkan pada HTML.
Berikut ini adalah contoh yang umum digunakan untuk menjelaskan tentang PHP sebagai script yang disisipkan (embedded script) dalam dokumen HTML.
<html>
<head>
<title>Contoh</title>
</head>
<body>
<?php
echo “Hai, saya dari script PHP!”;
?>
</body>
</html>
Contoh script PHP di atas berbeda dengan script yang dituliskan dengan bahasa lain seperti C atau Perl. Pemrograman tidak harus menuliskan semua dokumen HTML sebagai bagian dari keluaran dari script PHP, cukup menuliskan bagian mana saja yang berupa tag HTML dan bagian mana yang harus ditulis atau dihasilkan dari program script PHP. Kode/script PHP diapit dengan menggunakan tag awal dan tag akhir yang khusus, yang memungkinkan pemrograman untuk masuk dan keluar dari mode script PHP.
Kemampuan PHP
PHP secara mendasar dapat mengerjakan semua yang dapat dikerjakan oleh program CGI, seperti mendapatkan data dari form, menghasilkan isi halaman web yang dinamik, dan menerima cookies.
Kemampuan (fitur) PHP yang paling diandalkan dan signifikan adalah dukungan kepada banyak database. Membuat halaman web yang menggunakan data dari database dengan sangat mudah dapat dilakukan. Berikut adalah daftar database yang didukung oleh PHP:
Adabas D
dBase
Empress
FilePro (read only)
FrontBase
Hyperwave
IBM DB2
Informix
Ingres
Interbase
MSQL
Direct MS SQL
MySQL
ODBC
Oracle (OC17 dan OC18)
Ovrimos
PostgreSQL
Solid
SQLite
Sybase
Velocis
Unix DBM
PHP juga mendukung untuk berkomunikasi dengan layanan lain menggunakan protokol IMAP, SNMP, NNTP, POP3, HTTP, dan lainnya yang tidak terhitung. Pemrogram juga dapat membuka socket jaringan secara mentah dan berinteraksi dengan menggunakan protokol lainnya.
HTML
Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.
Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan syntax <tag></tag>.
Berikut contoh kode dari susunan atau struktur HTML:
<div> <h1>The Main Heading</h1> <h2>A catchy subheading</h2> <p>Paragraph one</p> <img src="/" alt="Image"> <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p> </div>
- Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
- Susunan HTML di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf (<p></p>), dan satu gambar (<img>).
- Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri atas URL tujuan.
- Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.
Pengertian Tag HTML dan Fungsinya
Tag HTML memiliki dua tipe utama: block-level dan inline tags.
- Elemen block-level memakai semua space yang tersedia dan selalu membuat line baru di dalam dokumen. Contoh dari tag blockadalah heading dan paragraf.
- Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten dari elemen block-level. Contoh dari tag inline adalah link dan emphasized strings.
Tag Block-Level
Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>.
- Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
- Tag <head></head> menyimpan informasi meta, seperti judul dan charset halaman.
- Tag <body></body> melampirkan semua konten yang muncul pada suatu halaman.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>- Heading memiliki 6 level di HTML. Level tersebut bervariasi, mulai dari <h1></h1> sampai ke <h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag <blockquote></blockquote>.
- Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di dalam elemen div juga terdapat tag div lainnya.
- Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan dasar dari list tidak berurutan dalam HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>Tag Inline
Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag <strong></strong> akan render elemen ke format bold, sedangkan tag <em></em> akan ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindikasi tujuan link:
<a href="https://example.com/">Click me!</a>
Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu gambar dengan menggunakan <img>tanpa harus membubuhkan tag penutup. Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path gambar, misalnya:
<img src="/images/example.jpg" alt="Example image">
Jika ingin mempelajari lebih dalam tentang pengertian tag HTML serta tag HTML dan funsginya, silakan baca artikel kami tentang HTML cheat sheet (kami juga menyediakan link untuk diunduh).
Perkembangan HTML. Bagaimana Perbedaan HTML dan HTML5?
Sejak hari pertama diperkenalkan, HTML telah melewati perkembangan yang cukup signifikan. W3C terus merilis versi dan update terbaru sembari mencetak sejarah dan mengukuhkan keberadaannya.
HTML4 (belakangan ini sering disebut sebagai “HTML”) dirilis pada tahun 1999 dan versi terbarunya diperkenalkan pada publik pada tahun 2014. Dikenal sebagai HTML5, versi terbaru ini menambahkan lebih banyak fitur baru ke bahasa mark up ini.
Salah satu fitur canggih di HTML5 adalah support untuk embed audio dan video. Jadi, alih-alih menggunakan Flash player, kita bisa melakukan file video dan audio yang di-embed ke halaman website dengan eanfaatkan tag <audio></audio> dan <video></video>. Fitur tersebut juga memiliki support bawaan untuk grafis vektor (SVG) yang dapat diskalakan dan MathML untuk formula matematika dan ilmiah.
HTML5 juga memperkenalkan beberapa perbaikan pada semantic. Tag semantic baru mengirimkan informasi pada browser tentang arti konten, yang bermanfaat tak hanya bagi pembaca, tapi juga mesin pencari.
Tag semantic yang paling banyak digunakan adalah <article></article>, <section></section>, <aside></aside>, <header></header>, dan <footer></footer>. Agar bisa lebih paham tentang perbedaan HTML dan HTML5, silakan baca artikel kami.
Kelebihan dan Kekurangan HTML
Sama seperti hal teknis lainnya dalam dunia web, HTML juga punya kelebihan dan kekurangannya.
Kelebihan:
- Bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
- Dijalankan secara alami di setiap web browser.
- Memiliki learning curve yang mudah.
- Open-source dan sepenuhnya gratis.
- Bahasa markup yang rapi dan konsisten.
- Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
- Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.
Kekurangan:
- Paling sering digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
- HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
- Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
- Terkadang perilaku browser susah untuk diprediksi (misalnya, browser lama tidak selalu bisa render tag yang lebih baru).
Jadi… Apa Itu HTML?
HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium.
Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web (dengan memakai coding HTML sederhana). HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript.
Komentar
Posting Komentar