Wednesday, December 4, 2019

BELAJAR HTML DAN PHP DARI DASAR SAMPAI MAHIR

HTML (Hypertext Markup Language)

BELAJAR HTML DAN PHP DARI DASAR SAMPAI MAHIR

HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen.

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa. Namun  sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web).

Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web tool.

Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>

Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:

1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan kita.

2.Buka Browser, misalnya Internet Explorer atau Netscape Navigator.

Buka program aplikasi teks editor misalnya dalam latihan ini adalah Notepad.

4.Mulai baris paling atas, tuliskan:

<html>
<head>
<title>halaman pembuka</title>
</head>
<body>
  Proyek latihan pertama saya.
</body>
</html>

BELAJAR HTML DARI DASAR SAMPAI MAHIR


5. Simpan file anda dengan cara klik menu File - Save:

BELAJAR HTML DARI DASAR SAMPAI MAHIR

6.Selanjutnya pilih direktori latihan yang tadi kita buat.

7.Pada box File name, isikan nama filenya dengan index.html.

8.Pada drop down list di Save as type, pilih All Files. Sehingga tampilannya seperti berikut:

BELAJAR HTML DARI DASAR SAMPAI MAHIR

9.Simpan proyek anda dengan meng-klik pada tombol Save

Catatan:
Semua dokumen HTML mempunyai ekstensi .html (atau .htm)
Semua halaman web (homepage) mempunyai file index.html. File index.html secara otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan file tersebut di buka di browser. Terdapat pengecualian pada microsoft yang menggunakan web server IIS, file yang dipanggil adalah default.html

Kode Warna
Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:
Red Green Blue
FF.    FF.       00

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=yellow.

Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.

BELAJAR HTML DARI DASAR SAMPAI MAHIR

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda. Yang penting anda mengikuti aturan diatas.

2.  Pengaturan Halaman Web dan Teks
Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks :

<body>, digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

Background = digunakan untuk mengatur latar belakang dengan gambar/image.
Bgcolor = digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.
Teks = digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.
Link = Untuk mengatur warna link dokumen dengan warna biru sebagai warna default
Vlink = Untuk mengatur warna visited link dokumen dengan default.
Alink = digunakan untuk mengatur warna active link dokumen dengan default merah.

Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

<html>
<head>
<title>::: Heading Dokumen HTML :::</title>
</head>
<body bgcolor=#ffffcc text=#003399>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h3>Headng Tingkat 3 </h3>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>

Hasilnya akan terlihat seperti :

BELAJAR HTML DARI DASAR SAMPAI MAHIR


  • Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
  • Line Break: <BR> Digunakan untuk pindah ke baris baru. 
  • No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang. 
  • Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR. 
  • SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar. 
  • FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic. 
  • COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya). 


<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font :::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>

Hasilnya akan terlihat:

BELAJAR HTML DARI DASAR SAMPAI MAHIR

Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<basefont size=2 face="arial,helvetica" color="#ff0000">
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE> Digunakan untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
<HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

Internet sekarang ini memang bukan menjadi hal baru ditelinga kita, mulai dari anak – anak sampai orang tua pun mengenalnya. Puluhan website sudah
tersebar dengan berbagai nama. Sebuah perusahaan besar pun memiliki sebuah situs web lengkap dengan databasenya, pastinya database tersebut sangatlah kompleks, hal tersebut dimulai dari
sebuah awal yang sederhana. “sesuatu yang kecil jika kita kembangkan akan menjadi suatu hal yang besar”. Mempelajari dasar pembuatan database adalah solusinya.
Bisakah kita belajar HTML, PHP dan MySQL sekaligus? Kenapa tidak? Tentu saja perlu adanya langkah – langkah awal sebelum kita memulainya. Script PHP memang erat kaitannya dengan script HTML, untuk memulai dasarnya kita akan belajar secara sederhana mengenai script HTML dan PHP. Barulah kita dapat membentuk sebuah database sederhana menggunakan MySQL. 3 komponen ini memang sangat diperlukan dalam pembuatan sebuah database (HP
My) “HTML, PHP & MySQL”.

A. Belajar Script Sederhana HTML & PHP
Secara sederhana script HTML diawali dengan <html><head></head><body> kemudian diakhiri dengan </body></html>. Sedangkan script PHP diawali dengan <?php dan diakhiri dengan ?>.Kita akan mencoba membuat script sederhana untuk menginputkan data yang tampilannya masih terlihat dalam web browser. Script ini terdiri dari script “input” dan
juga script “proses”, diman script “input” ini berisi script HTML yang akan menjadi
tampilan input pada web browser, sedangkan script “proses” merupak script PHP yang menjadi tampilan outputnya. Cobalah script di bawah ini :

BELAJAR HTML DARI DASAR SAMPAI MAHIR
BELAJAR HTML DARI DASAR SAMPAI MAHIR

Jika sudah Maka seperti inilah outputnya atau hasilnya yang tadi sobat coding:
BELAJAR HTML DARI DASAR SAMPAI MAHIR
BELAJAR HTML DARI DASAR SAMPAI MAHIR

Secara sederhana pembuatan script dapat dilakukan dengan cara di atas. Cara di atas 
hanya menampilkan tampilan dengan input text saja, padahal untuk membuat semacam form data diri yang lengkap kita memerlukan bermacam tools yang nantinya akan digunakan sebagai
kombinasi pembuatan form data diri. Tools yang bisa kita gunakan diantaranya adalah dengan type combo box, radio dan check box.

a. Type Combo Box
Buatlah script HTML dan PHP secara terpisah, nama dari script PHP harus sesuai dengan form action pada script HTML, sebagai contoh namanya adalah output.php

BELAJAR HTML DARI DASAR SAMPAI MAHIR
BELAJAR HTML DARI DASAR SAMPAI MAHIR

b.Type Radio
Buatlah script HTML dan PHP secara terpisah, nama dari script PHP harus sesuai dengan form action pada script HTML, sebagai contoh namanya adalah kenyang.php

BELAJAR HTML DARI DASAR SAMPAI MAHIR

c. Type Check Box
Buatlah script HTML dan PHP secara terpisah, nama dari script PHP harus sesuai dengan form action pada script HTML, sebagai contoh namanya adalah hobi.php

BELAJAR HTML DARI DASAR SAMPAI MAHIR

B. Membuat Form Data Diri
Dalam sistem administrsi perkuliahan tentu saja membutuhkan semacam aplikasi yang bisa mempermudah proses pendataan mahasiswa yang ada. Salah satunya dengan menggunakan bahasa pemrograman PHP kita dapat membuat semacam daftar sederhana untuk pendataan mahasiswa. Bisa diisi dengan Nama, Kelas, NIM, Alamat dan lain sebagainya sesuai dengan kebutuhan. Di sini saya membuat 2 buah script yang saling berhubungan, pertama dengan bahasa HTML sebagai inputnya, sedangkan akan dikeluarkan dalam bahasa PHP sebagai outputnya. Jangan lupa pada form action diisi dengan nama file pada script yang kedua (output). Script inputnya sebagai berikut :

BELAJAR HTML DARI DASAR SAMPAI MAHIR

Dalam script tersebut menggunakan radio button untuk memilih jenis kelamin, kemudian menggunakan select box untuk menampilkan agama dan juga provinsi.


Silahkan Berkomentar Sesuai dengan Topik Artikelnya
EmoticonEmoticon