Friday, May 29, 2020

HTML

Tutorial HTML Dasar : Part 3 - Membuat Table di HTML

Poseidonwood May 29, 2020 Leave a Reply


Membuat Table di HTML - Lanjutan dari post kemarin sekarang kita membahas untuk membuat table di html. Pertama kita buka notepad ++ nya kemudian open file ke index.html yang kemarin kita buat. 

Pilih Open .. dan arah kan ke index.html yang telah kita buat kemarin.


Setelah itu kita edit text source code nya ubah menjadi ini seperti berikut : 
Tulis kode diatas kemudian simpan atau tekan CTRL + S pada keyboard untuk menyimpan cepat. Setelah itu coba jalan kan file index.html nya dengan klik 2 kali. Maka tampilannya akan seperti berikut : 


Penjelasan : 
  1. Untuk langkah pertama membuat table selalu di awali dengan tag <table> dan diakhiri dengan </table>
  2. Tag <style> pada code di atas adalah css , dimana untuk merubah / memodif tampilan pada html yang kita buat. Untuk penjelasan CSS nanti akan saya bahas di post berikutnya.
  3. Table di dalam HTML dibentuk dengan sebuah baris (row), tepatnya menggunakan element <tr> yang merupakan kepanjangan dari table row. Adapun element pendukung lain yang membentuk sebuah table adalah <th> (table header) dan <td> (table data). <td> menunjukkan sebuah cell, sedangkan <th> menunjukkan cell induk dan ditandai dengan tulisan cetak tebal.
  4. Element lain yang berkaitan dan digunakan dalam sebuah HTML table adalah <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>.

Sekian post untuk tentang cari membuat table di html . Silahkan modif atau ubah sendiri sesuai selera kalian. Untuk postingan berikutnya kita akan memasukkan dan menampilkan gambar ke HTML yang telah kita buat.


Referensi :

Tuesday, May 26, 2020

HTML

Tutorial HTML Dasar : Part 2 - Coding Awal "Hello World"

Poseidonwood May 26, 2020 3 Comments
Menampilkan "Text Hello World" pada HTML

"Hello World" - Kali ini kita akan menampilkan tulisan "HELLO WORLD" sebagai permulaan web sederhana yang akan kita buat. Berikut langkah - langkah yang akan kita lakukan :

 
Silahkan Buka Notepad ++ nya

Ketik kode berikut di notepad++ nya :


Atau bisa liat contoh dibawah ini : 

Tulis code berikut pada notepad ++ kalian


Jika sudah kalian simpan dengan cara klik save as maka akan keluar tampilan berikut :

  1. Perhatikan Filename : Pastikan namanya "index" dan di belakangnya ".html"
  2. Perhatikan Save as type : Pastikan menjadi Hyper Text Markup Language (.html)
  3. Jika sudah tekan "Save"
  4. Dan jangan lupa untuk menyimpan di Dekstop saja 
Setelah itu coba kita buka file yang sudah kita simpan tadi dengan nama "index.html" di dekstop kalian. 

Double Klik "index.html" untuk melihat hasilnya.

Maka hasil web yang kita buat tadi seperti ini : 

Tampilan Hello World Pada Google Chrome


Penjelasan :
 
  • Pada source code di atas , perhatikan bagian "<!DOCTYPE html>" yang merupakan deklarasi pada dokumen HTML5 yang berfungsi untuk memberikan informasi kepada web browser tentang versi dokumen HTML tersebut.
  • "<html>" diatas dan "</html" di bawah. Merupakan bagian dari isi code HTML tersebut yang mana code html harus berada di antara <html>dan </html>
  • "<head>" dan "</head>" sama seperti tag <html> </html> cuman head disini hanya di isi oleh bagian atas html atau metadata : seperti css,title, java script . untuk jelasnya tentang head bisa klik link ini : tag <head>
  • <body> merupakan element penting dari isi html tersebut yang isi nya meliputi heading , paragrap , gambar , hyperlinks , table , list dan lain lain. Semua element tersebut harus di tempat kan di antara <body> dan </body>.
  • <h1> adalah heading , yang biasa nya untuk membuat judul di dalam html , adapun h1,h2,h3... h6 yang mana h1 merupakan ukuran tulisan terbesar dan h6 merupakan yang terkecil.
  • <p> artinya paragraf untuk membuat baris baru sebagai paragraf.

Baik , kita sudah berhasil membuat web sederhana untuk menampilkan tulisan "hello world" pada postingan berikutnya kita akan membuat table pada html.

Terimakasih.




HTML

Tutorial HTML Dasar : Part 1 - Persiapan / Instalasi Notepad ++

Poseidonwood May 26, 2020 Leave a Reply



Pada postingan sebelumnya sudah kami jelaskan tentang "APA ITU HTML?" dan pada kesempatan kali ini kami lanjutkan untuk materi instalasi notepad ++ . Sedikit penjelasan dari notepad ++ . 

Apa itu notepad ++ ?
Notepad ++ adalah text editor yang mirip fungsinya dengan notepad yang biasa terdapat di windows, akan tetapi notepad++ ini ada sedikit perbedaan dengan notepad biasa. 

Mengapa memilih notepad ++?

Sebenarnya untuk membuat program HTML ini mempunyai banyak opsi untuk code editor nya , Kalau kami sendiri lebih merekomendasikan Visual Studio Code. Tapi untuk pemula kami merekomendasikan Notepad ++ 

Untuk alasannya adalah karena notepad++ ini sangat ringan di windows dan cocok untuk pemula dalam mengetik code dasar agar mudah di pahami dan diingat.


Fungsi dari notepad dan notepad++

  • Notepad untuk catatan, kalian dapat memakai aplikasi ini buat mencatat kehidupan harian, di karenakan notepad ini dapat membuat tanggal dan waktu secara otomatis.
  • Notepad HTML, Notepad ini dapat di pakai untuk membuat HTML, apa itu HTML, HTML merupakan suatu code untuk membuat website seperti gambar,warna dengan kode tertentu.
  • Membuat Dan Mengedit File Reg, untuk membuat suatu file extesion reg atau dengan sebutan registry.

Kelebihan Dari Notepad :

  • Gratis.
  • Aplikasinya Sangat Ringan.
  • Dapat Membuat Website.
  • Dapat Membuat Antivirus.

Kelebihan Dari Notepad++ :

  • Gratis.
  • Aplikasinya Sangat Ringan.
  • Fungsinya Sangat Lengkap.
  • Dapat Membuat Antivirus.
  • Dapat Membuat Website.
  • Text Auto Komplication.
  • Terdapat Angka Angkanya.

Cara Menginstal Notepad ++
  1. Download Notepad ++ di sini : Klik disini
  2. Jika sudah selesai mendownload. Klik pada installer yang sudah di download yaitu notepad++ nya dan akan keluar tampilan installernya.
  3. Klik next  - next sampai proses download selesai.
  4. Buka Notepad ++ nya.
Tampilan Notepad ++

Sangat berbeda sekali dengan notepad yang biasanya


HTML

Tutorial HTML Dasar : Apa itu HTML ?

Poseidonwood May 26, 2020 1 Comment
 




APA ITU HTML ?

Pernah tahu google,facebook,youtube atau bahkan kamu yang lagi baca ini. Ini termasuk bagian dari HTML. Apa sih html itu ? HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi (" Dikutip dari : wikipedia "). Kali ini poseidonwood akan berbagi cara untuk membuat sebuah web dasar atau web sederhana melalui HTML. 

Langkah pertama yang harus di persiapkan untuk membuat HTML Dasar  cukup mudah, yaitu : 
  1. Laptop / PC (Bisa pake smartphone khususnya android)
  2. Code Editor (Bisa Pakai Notepad , Visual Studio Code , Sublime atau notepad++)
  3. Browser (Bisa pakai chrome,mozila firefox , safari)
Link Download : 
  1. Notepad++ : Klik disini !
  2. Chrome : Klik disini !
Okay jika sudah siap untuk perlengkapan diatas mari kita praktek untuk membuat web sederhana dengan HTML dasar di part berikutnya.


Baca : Postingan Berikutnya