Pengertian HTML

HyperText Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk membangun...

Struktur Dasar HTML

Struktur HTML terdiri dari kepala (head) dan tubuh (body), dimana pada bagian...

Mengenal Sublime Text (Plus Link Download)

Sublime Text merupakan aplikasi coding yang biasa digunakan untuk membuat website dengan html, css, ataupun...

Cara Menulis Struktur Dasar HTML Dengan Sublime Text Tanpa Menghafal

kita langsung saja ke langkah-langkahnya 1.Pertama tentu kita buat folder baru, misal kita buat...

Cara Membuat Tabel Dengan HTML

Setelah sebelumnya kita membahas tentang cara menulis struktur dasar html di sublime text, kali ini kita akan mencoba membuat tabel dengan html yang juga akan kita lakukan menggunakan....

Kamis, 27 Oktober 2016

Cara Membuat Tabel Dengan HTML


Setelah sebelumnya kita membahas tentang cara menulis struktur dasar html di sublime text, kali ini kita akan mencoba membuat tabel dengan html yang juga akan kita lakukan menggunakan sublime. Untuk saat ini kita akan langsung menuju tutorial membuat tabel yang ditulis dalam bagian body yang ada pada struktur dasar html. Jadi, bagi anda yang belum paham mengenai cara menuliskan struktur html bisa langsung simak artikelnya disini.

Okey, langsung saja kita mulai langkah-langkah dalam membuat tabel.
1. Tuliskan kode berikut dibawah kode <body>

<table border="1" cellpadding="5" cellspacing="2">

<tr>
<th>No</th>
<th>Nim</th>
<th>Nama Lengkap</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Tanggal Lahir</th>
<th>Program Studi</th>
</tr>

<tr>
<td>1</td>
<td>13</td>
<td>Si a</td>
<td>Laki-laki</td>
<td>Brebes</td>
<td>02/02/1995</td>
<td>S1 Informatika</td>

</tr>

<tr>
<td>2</td>
<td>14</td>
<td>Si b</td>
<td>Perempuan</td>
<td>Jakarta</td>
<td>02/03/1995</td>
<td>S1 Teknik Telekomunikasi</td>
</tr>

<tr>
<td>3</td>
<td>15</td>
<td>Si c</td>
<td>Laki-laki</td>
<td>Purwokerto</td>
<td>02/04/1995</td>
<td>D3 Teknik Telekomunikasi</td>
</tr>


</table>

2. Simpan file dengan tekan ctrl+s

3. Buka file html nya maka akan terlihat tabel seperti gambar berikut.



Selasa, 25 Oktober 2016

Cara Menulis Struktur Dasar HTML Dengan Sublime Text Tanpa Menghafal


Setelah sebelumnya kita membahas mengenai pengenalan Sublime Text, Kali ini kita akan mencoba untuk menuliskan struktur dasar HTML di Sublime Text secara cepat tanpa harus menghafal. Nah, Ini juga merupakan salah satu kelebihan dari Sublime Text. Baik, kita langsung saja ke langkah-langkahnya

1.Pertama tentu kita buat folder baru, misal kita buat folder Belajar Web.

2. Buka Sublime Text, masukkan folder ke dalam area editor dengan cara drag & drop.

3.Klik kanan folder kemudian pilih New File, nanti akan muncul tab untitled.






















4.Simpan file dengan cara tekan ctrl+s kemudian beri nama file dengan akhiran .html, misal filenya kita beri nama Belajarweb.html. Setelah itu klik save

5.Setelah file tersimpan silahkan ketik “<html” hingga muncul tampilan seperti gambar di bawah.

6.Kemudian tekan Enter, maka struktur dasar HTML akan muncul secara otomatis.


















Catatan: hapus salah satu tanda "<" pada bagian DOCTYPE

Nah, mudah bukan, selamat mencoba, kalau ada yang belum jelas silahkan tanyakan lewat komentar. Oh iya, jangan lupa like fanpage KidsFrog ya biar kami makin semangat nulisnya. Sampai jumpa di artikel selanjutnya, bye

Minggu, 23 Oktober 2016

Mengenal Sublime Text (Plus Link Download)


Sublime Text merupakan aplikasi coding yang biasa digunakan untuk membuat website dengan html, css, ataupun javascript, sublime text juga mendukung Bahasa pemrograman lain seperti C++, C#, dan ASP. Sublime Text tersedia secara gratis, namun dengan catatan beberapa waktu sekali akan muncul pesan aktivasi saat akan menyimpan file, namun hal ini tidak menjadi masalah, tetapi jika anda ingin bebas dari pesan tersebut, anda bisa melakukan aktivasi secara online.

Yang membuat kami suka dengan Sublime Text adalah antarmuka yang segar dan sederhana serta warna teks yang menarik, membuat aktifitas ngoding menjadi lebih menyenangkan. Selain itu masih banyak kelebihan lain dari sublime text antara lain.


Multiple Selection
Dengan Multiple Selection, memungkinkan kita untuk mengubah kode pada baris yang berbeda secara bersamaan. Caranya adalah dengan meletakkan kursor pada kode yang akan diubah kemudian tekan Ctrl + Click, atau bisa juga dengan cara memblok kode yang akan diubah lalu tekan Ctrl + D.

Command Pallete
Command Pallet berfungsi untuk mengakses perintah yang sering digunakan dengan cepat. Caranya adalah dengan menekan Ctrl+Shift+P lalu cari perintah yang diinginkan.


Distraction Free Mode
Distraction Free Mode berfungsi untuk merubah layar menjadi penuh atau fullscreen. Caranya adalah dengan menekan  Shift + F11.


Find in Project
Fitur ini berfungsi membuka file dalam sebuah project dengan cepat dengan menekan tombol Ctrl+P.


Drag & Drop
Dengan ini pengguna dapat memasukkan file teks ke dalam editor hanya dengan menyeretnya sehingga secara otomatis akan muncul tab baru.


Split Editing
Split editing memungkinkan kita untuk mengedit file secara bersamaan dengan cara klik File kemudian pilih New View into File.


Multi Platform
Sublime Text bersifat multi plat form yang artinya bisa diinstal pada berbagai macam sistem operasi seperti Windows, Linux dan MacOS.


Kedepan, Kami akan terus meggunakan sublime text dalam tutorial pembuatan web, untuk itu, silahkan download sublime text melalui link di bawah ini. Namun jika anda lebih nyaman menggunakan aplikasi lain seperti notepad++ juga tidak masalah, karna pada dasarnya fungsinya sama saja, hanya sedikit berbeda dari sisi fitur.


Sabtu, 22 Oktober 2016

Struktur Dasar HTML


Setelah sebelumnya kita telah mambahas Pengertian HTML, Kali ini kita akan membahas tentang struktur HTML. Struktur HTML terdiri dari kepala (head) dan tubuh (body), dimana pada bagian head kita dapat menuliskan judul dan pada bagian body kita bisa mengisinya dengan konten konten web seperti teks, gambar, form dan lain lain. berikut adalah kode dari struktur dasar HTML.

<html>
<head>
<title>Judul</title>
</head>
<body>
Ini merupakan bagian body yang bisa diisi dengan konten konten web
</body>
</html>

Seperti Bahasa pemrogramman lainnya, HTML juga mempunyai tag pembuka dan tag penutup dimana tag penutup ditandai dengan symbol “/” seperti terlihat pada kode di atas.

Lalu bagaimana cara menuliskan kode diatas agar dapat tampil di browser seperti Google Chrome atau Mozilla?

Untuk melihat tampilan kode diatas pada browser kita bisa menggunakan aplikasi koding seperti Notepad, Notepad ++, atau Sublime Text. Untuk sekedar mencoba, kita bisa menggunakan Notepad. Baik, langsung saja kita menuju langkah langkahnya.


1. Buka aplikasi Notepad yang ada pada komputer anda.
2. Tuliskan Kode HTML di atas pada notepad seperti terlihat pada gambar dibawah.
3. Setelah itu simpan dengan cara klik file dan pilih save, tentukan lokasi file yang anda inginkan, misal kali ini kita akan menyimpannya di desktop. kemudian pada bagian file name beri nama file tersebut yang diakhiri dengan .html, lalu klik save. untuk lebih jelas lihat gambar dibawah.

4. buka file tersebut, maka akan terlihat tampilan seperti dibawah ini.






















Sekian artikel kali ini, apabila ada yang kurang jelas, silahkan bertanya di komentar, sampai jumpa di artikel selanjutnya.

Kamis, 20 Oktober 2016

Pengertian HTML


HyperText Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk membangun sebuah website dengan memasukkan kode dan symbol untuk kemudian ditampilkan menjadi sebuah tampilan website.

HyperText Markup Language terdiri dari tiga kata yang masing masing berarti

Hypertext : Yaitu metode dimana kita menjelajah dari satu halaman web ke halaman web lain dengan meng-klik teks yang bernama hyperlink. Hyperlink sendiri merupakan teks yang jika di klik akan membawa kita ke sebuah halaman web yang telah ditentukan dalam sebuah kode HTML. Berikut contoh kode hyperlink

<a href="http://kidsfrog.blogspot.co.id">Ini Link Kidsfrog</a>

Markup : Yaitu kemampuan html dalam menandai teks menggunakan tag.  Berikut contoh kodenya

<i>Ini Huruf Miring</i>
<b>Ini huruf tebal</b>
<u>Ini huruf garis bawah</u>

Yang berwarna merah itu adalah tag, dimana <i> berarti italic, <b> berarti bold, dan , <u> berarti underline.

Language : Arti dari language adalah bahasa. Ini menunjukkan bahwa HTML adalah sebuah Bahasa pemrogramman yang terdiri dari kata-kata berupa kode dan syntax.