Persiapan awal, Tag tag dasar HTML, Struktur Dasar HTML, Memberikan judul dengan (Title)

Cerita Dosen, Sepriano - Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 1, silahkan dibaca dan dipahami.

Tahapan Awal

Sebelum memulai melakukan pembuatan pengkodean bahasa program berbasis web, maka kita wajib mempersiapkan web server. Pada kesempatan ini kita menggunakan web server XAMPP atau WAMP.

XAMPP

XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah untuk download XAMPP terbaru, silahkan download di http://www.apachefriends.org/index.html dimana disediakan paket XAMPP for Windows, Linux dan Apple. Pada tutorial lengkap cara menggunakan XAMPP di windows ini, saya menggunakan XAMPP 1.7.2. Langkah yang harus dipersiapkan adalah:

Jalankan file xampp-win32-1.7.2.exe
Kemudian akan tampil window untuk menentukan lokasi instalasi. Lalu silahkan anda pilih drivr C:\ sebagai default, atau pindahkan ke drive selain C:\ agar lebih aman lalu pilih tombol “install”.

Proses instalasi akan berjalan. Tunggu beberapa saat.

Kemudian command prompt akan muncul beberapa kali. Pertama adalah penambahan shortcut pada desktop/startmenu. Jika ingin ditambahkan shortcut, silahkan anda tekan y kemudian enter.

Untuk melanjutkan tekan y lagi kemudian enter

Selanjutnya anda akan ditanyakan, apakah ingin menginstal XAMPP secara “portable”. Jika ingin instal portable, pilih y. Tapi bila anda menginstal di komputer, silahkan pilih n. Kemudian tekan enter.

XAMPP telah siap, tekan enter 2 kali untuk melanjutkan.

Instalasi selesai, pilih 1 kemudian enter untuk menjalankan XAMPP Control Panel. Selanjutnya pilih X untuk keluar dari proses instalasi.

Aktifkan Service “Apache” dan “MySQL” melalui XAMPP Control Panel. Klik tombol “Start”. XAMPP Control Panel bisa diakses dari desktop atau start menu. Jika tidak ada, langsung saja akses ke C:/xampp/xampp-control.exe

Sampai disini, Anda sudah berhasil menginstal XAMPP, artinya anda sudah berhasil instal PHP, APACHE dan MYSQL. Silahkan buka browser anda dan ketikkan http://localhost untuk memastikan XAMPP sudah selesai terinstal. Jika hasilnya seperti gambar di bawah ini, instalasi yang anda lakukan berjalan dengan sukses.

Setelah proses instalasi selesai, langkah selanjutnya kita buat folder untuk document root Xampp. Document root merupakan lokasi/folder untuk menyimpan file PHP/web agar bisa dipanggil/dijalankan oleh webserver. Pada contoh ini, lokasi document root berada di c:/xampp/htdocs/. Berarti jika anda ingin agar file bisa dijalankan melalui webserver, letakkan file anda folder tersebut.

Akan tetapi lokasi document root bisa Anda pindahkan ke tempat lain sesuai dengan keinginan. Misalnya Anda ingin memindahkan ke drive D:/ pada komputer/laptop yang anda miliki. Langkah yang harus dilakukan adalah sebagai berikut:

Buatlah satu folder terlebih dahulu dengan nama htdocs di drive D:

Kemudian buka file c:/xampp/apache/conf/httpd.conf menggunakan notepad ataupun notepad++

Setelah terbuka, Cari kata documentroot didalam file tersebut. Untuk memudahkan pencarian silahkan anda tekan Ctrl+F.

Anda akan menemukan satu baris sebagai berikut, lihat gambar di bawah ini:

Ganti c:/xampp/htdocs dengan folder lain sesuai keinginan, bila anda sudah membuatnya di folder D, maka gantilah menjadi D:/htdocs sebagai documentroot.

Kemudian ada beberapa settingan tersebut, terdapat tulisan <Directory “C:/xampp/htdocs”>, ganti c:xampp/htdocs dengan D:/htdocs

Terakhir, save file tersebut dan buka kembali XAMPP Control Panel. Restart Apache dengan mengklik “Stop” dan “Start” kembali. Sekarang semua file PHP harus disimpan di D:/htdocs/
Buatlah nama folder untuk projek yang akan kita buat di dalam folder htdocs/

Pengenalan HTML

HTML bukan bahasa pemograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.

Lalu bagaimana cara menjalankan file html atau php yang kita buat pada browser?. Langkah yang harus dilakukan adalah sebagai berikut:

Buka aplikasi Notepad++ , atau aplikasi text editor lainnya, lalu ketik text berikut ini

Lalu simpan file tersebut pada folder di dalam htdocs yang telah dibuat. Untuk diperhatikan bahwa nama file penyimpanan harus diketikan extensi filenya, seperti .html atau .php seperti pada gambar di bawah ini

Buka browser dan ketikan //localhost/[nama folder yang kita buat], maka akan muncul file yang telah kita buat seperti pada gambar di bawah ini

Pilih nama file latihan1.php, maka akan tampil seperti gambar di bawah ini

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:

Contoh struktur dasar HTML:

Tag <html>

Setelah DTD, tag berikutnya adalah tag <html>.

Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML akan berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

Tag <head>

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

Tag <title>

dalam contoh kita digunakan untuk menampilkan title dari sebuah halaman web, dan biasanya ditampilkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.

Tag <body>

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar

waktu kita dalam merancang web adalah di dalam tag <body> ini.

Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html>

yang merupakan tag paling awal dari sebuah halaman web.

Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Headingdirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul.

Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.

Cara Membuat Komentar di HTML

Untuk membuat komentar di HTML, kita menggunakan awalan . Agar lebih mudah dipahami, langsung saja kita simak dalam bentuk contoh. Silahkan tulis kode HTML berikut dan save sebagai komentar.html

Contoh penggunaan tag komentar HTML: