BELAJAR HTML PHP MySQL CSS DAN JAVASCRIPT SECARA OTODIKDAK UNTUK PEMULA

Hay sahabat blogger, Untuk menjadi seorang web designer tidaklah mudah, kita membutuhkan pengetahuan tentang bahasa pemrograman seperti HTML, Javascript, CSS, PHP, MYSQL untuk mendesign sebuah website, tanpa mengetahui hal itu mustahil kita bisa mendesign sebuah website.

Jika melihat kode-kode pemrograman tersebut mungkin kita yang awam bisa dibuat bingung bahkan mungkin mual melihat kode- kode yang seakan terlihat tanpa arti dan makna tersebut.

Mungkin menurut anda hanya para profesional dibidangnya saja yang bisa melakukan hal ini sedangkan kita tidak bisa karena tidak punya pengetahuan dasarnya.

Inget gan para profesional di bidang web design pun pada awalnya seperti kita, tidak punya pengetahuan tentang semua itu tapi kemudian belajar secara formal so mereka bisa menjadi seorang profesional.

Lalu apakah kita bisa seperti mereka? mereka belajar secara formal sedang kita hanya otodikdak?

Mungkin begitulah unek-unek yang tersimpan di benak kita sebagai seorang blogger otodikdak pemula.

Jawabanya: bisa!

Selama kita punya niat dan kemauan yang keras, pantang menyerah sesulit apapun itu maka kita akan bisa melahapnya.

Disini kita akan belajar bersama, saya pun blogger otodikdak pemula, tapi saya punya niat, tekad, semangat dan pantang menyerah untuk menaklukan samudera itu. Saya berharap saya bisa menjadi blogger yang bisa sedikit editing dan mungkin juga menjadi seorang web design. Amin

Walaupun mungkin untuk menjadi seorang blogger dijaman sekarang pengetahuan tentang koding dan editing website tidak mutlak diperlukan karena sudah banyak plugin-plugin dan aplikasi instan yang bisa kita gunakan untuk menjalankan sebuah website dengan baik, atau sudah banyak tersedia koding-koding tertentu hingga kita tinggal copy paste saja.

Tapi sebagai seorang blogger tentunya kita sering sekali dihadapkan dengan koding- koding tersebut, mau tidak mau kita pun dituntut untuk bisa, paling tidak mengerti sedikit dasarnya agar kita bisa melakukan editing sederhana terhadap blog yang kita miliki.

Untuk Belajar Editing Blog kita harus memiliki pengetahuan Dasar tentang HTML, PHP, CSS, MySQL, Javascript dan lainnya.

Tapi Untuk editing sederhana, pengetahuan dasar HTML dan PHP pun sudah cukup membantu dalam editing template dan editing lainnya yang sederhana.

Mari kita mulai belajar secara perlahan-lahan mengingat saya sendiripun masih awam, baru sedikit belajar. Dan saya ingin belajar sembari praktek menulis tutorial sederhana ini 😀

HTML

HTML adalah singkatan dari Hyper text markup language. Belajar HTML merupakan proses pertama yang umummya harus dipelajari oleh seorang calon web programmer.

Sama halnya seperti saya, sebelum melangkah mempelajari bahasa pemrograman yang lain, saya harus belajar dulu tentang seluk beluk HTML, ini penting karena HTML merupakan bahasa pemrograman web yang berfungsi untuk membuat tampilan sebuah website. Jadi HTML merupakan dasar dari semua pemrograman website.

Semua website yang ditampilkan oleh sebuah browser semuanya di bangun dari kode-kode HTML, maka kiranya jika kita ingin belajar web design atau editing web sederhana kita harus belajar bahasa basic nya yaitu HTML.

HTML pun sangat berguna dalam sebuah penulisan artikel di blog. Kita bisa membuat form, tabel, variasi tulisan,link dan lainnya dengan HTML. Dengan HTML maka tulisan kita akan nampak rajin, rapi, terstruktur dan enak untuk dilihat.

Untuk belajar membuat web berbasis HTML kita membutuhkan tools seperti notepad dan dreamweaver. Notepad hanya akan menampilkan kode-kode HTML saja. Sedangkan dreamweaver akan menampilkan kode secara visual.

Notepad saya rasa lebih mudah kita gunakan, mengingat kita masih pemula, selain itu notepad merupakan salah satu program bawaan dari windows jadi otomatis sudah tersedia dan tinggal pakai saja. Praktis bukan?

Tag HTML.

HTML adalah dokumen yang berupa file teks yang terdiri dari elemen-elemen HTML. Elemen HTML itu sendiri di definisikan dengan tag HTML.

Tampilan sebuah website sudah pasti selalu di bangun dengan tag tag HTML.

Sebuah tampilan website pasti selalu mempunyai bagian utama yaitu kepala/header blog dan body/isi blog. Header blog biasanya berisi judul blog dan lain-lain, sedang body blog berisi semua data blog. Nah tampilan tersebut bisa dibuat dengan menggunakan tag-tag HTML

Tag HTML selalu ditulis dengan kode <tag> jadi untuk membuat sebuah tag HTML selalu diawali dengan kode tersebut. Nah tag sendiri memiliki berbagai jenis. Bingung? Berikut contohnya:

<head> = nama tag dari tag head.
<title> = nama tag dari tag title.
<body> = nama tag dari tag body.

Jadi tag itu selalu ditulis dengan kode <namatag>.

Sudah paham? Ok kita lanjut!.

Nah tag-tag tersebut diatas belum berfungsi karena tag-tag tersebut baru tag pembuka, agar berfungsi maka tag tag tersebut harus memiliki pasangan yaitu tag penutup. Tag penutup ditulis dengan kode </tag>.

Jadi <tag> mempunyai pasangan </tag>. Jadi tag-tag pada contoh diatas pun mempunyai pasangan sebagai berikut:

Tag Pembuka Tag Penutup
<html> </html>
<head> </head>
<title> </title>
<body> </body>
<namatag> dst </namatag> dst

Nah jika sudah paham, yuk coba kita lihat tag-tag HTML utama penyusun sebuah tampilan website?berikut contoh tag-tag penyusun sebuah website yang paling sederhana.

Contoh:
<html>
<head>
<head> Judul Blog </title>
</head>
<body>
<b>Ini contoh website saya</b>
<br>Di dlm tag body ini nanti semua isi blog ditampilkan</br>.
</body>
</html>

Anda sudah mengerti kan fungsi tag-tag tersebut?. Ingat kan semua tag punya pasangan masing-masing?. Khusus tag pembuka <html> itu wajib di taruh diatas sendiri ini berfungsi bahwa ini awal dari tag HTML dan tag penutup </html> wajib kita letakan di akhir sendiri sebagai tanda akhir sebuah dokumen HTML.

Nah sekarang coba anda buka notepad anda dan ketik ulang contoh tersebut diatas kemudian anda simpan dengan nama:”latihan.html“. Tanda kutipnya jangan ditulis yahh!

Nah jika anda menulis dengan benar maka akan muncul tampilan sperti berikut:

latihan_1457372459428_o.jpg

Inget saya menulis tutorial ini semuanya menggunakan HP jadi harap maklum ya! Hehehe

Berikut ini saya rangkum beberapa nama tag dan fungsinya. Chekidot:

Tag pembuka/penutup Fungsi/Deskripsi
<html>
</html>
Tag untuk membuat dokumen HTML
<head>
</head>
Untuk membuat header/kepala sebuah blog
<title>
</title>
Untuk membuat Judul Blog
<<body>
</body>
Untuk membuat body/isi Blog
<p>Teks Anda</p> Untuk membuat paragraf baru
<br>
Tidak punya tag penutup
Untuk ganti baris
<b>Teks Anda</b> Untuk Menebalkan tulisan
<i>Teks Anda</i> Untuk membuat tulisan miring
<sub>Teks Anda</sub> Untuk membuat tulisan kecil dibawah,misalnya untuk menulis rumus, ex: F1 x F2
<sup>Teks Anda</sup> Untuk membuat tulisan kecil diatas, ex: 32
<u>Teks Anda<u> Menulis huruf bergaris bawah
Ingat semua tag tersebut memunyai tag penutup kecuali tag <br>

Untuk sementara sampai disini dulu ya, Untuk materi HTML selanjutnya atau materi PHP dan seterusnya nanti akan saya update disini. Saya mohon maaf jika artikel ini banyak kekurangan atau kesalahan penulisan, maklum saya menulis semua artikel ini hanya melalui handphone. Tapi semoga bermanfaat. Makasih..

UPDATE

Tutorial terbaru lainnya:

2 Comments

Tinggalkan Balasan