Belajar html adalah hal dasar yang harus dilakukan bagi seseorang yang baru belajar web. Agar menarik dalam belajar html, kita akan membuat sebuah artikel dengan html. Namun, tujuan utama kita belajar pada kesempatan ini bukan sekedar itu. Melainkan dasar membuat aplikasi berbasis web. HTML adalah singkatan dari hypertext markup language. Html bukan bahasa pemrograman. Tapi bahasa yang dibuat untuk membuat tampilan halaman web.
Aplikasi atau program komputer khususnya web. Terbagi menjadi tiga pekerjaan, yaitu tampilan, pemroses logika dan basis data. Html masuk ke dalam pekerjaan tampilan. Atau diistilahkan dengan pekerjaan front end depelover.
2. Tag Dasar HTML
Sebelum belajar jauh mengenai html. Mari kita mengenali sedikit demi sedikit tag dasar html. Tag adalah kode html yang ditandai dengan simbol lebih kecil dan lebih besar yang mengapit nama tag, contohnya : <html>. Umumnya tag html berpasangan dengan tag tutupnya </html>.
Secara sederhana tag html seperti sebuah efek yang akan kita berikan terhadap suatu teks atau yang lain. Dengan meletakkan diantara tag buka dan tutup. Berikut ini adalah tag dasar html.
< html>
<head>
<tittle>Belajar Web Medan </tittle>
</head>
<body>
</body>
</html>
Pada kode html dasar diatas. Halaman web harus dimulai dengan tag buka html <html> dan diakhiri dengan tag tutup html </html>. Kemudian, kode html dasar terbagi menjadi dua bagian utama yaitu head dan body.
Bagian head berfungsi menampilkan judul melalui tag tittle, icon halaman web, link css maupun java scrip eksternal, tag meta dan lain-lain. Singkat cerita bagian head ini adalah untuk informasi yang tidak tampil di bagian utama web browser.
Bagian body berfungsi menampilkan apapun yang dituliskan ke dalam bagian utama web browser.
3. Tag Dasar HTML
Selain tag-tag dasar yang disebutkan diatas. Ada beberapa tag lain yang penting kita pelajari sebagai pemula dalam belajar web. Diantaranya adalah tag-tag berikut:
Tag-tag diatas cukup untuk kita membuat artikel di halaman web. Namun bukan itu tujuan utama kita belajar tag diatas. Tujuan utamanya adalah belajar membuat aplikasi berbasis web.
4. Membuat Artikel di Halaman Web.
Beberapa materi mengenai tag dasar html sudah pernah kami bahas. Jadi kita dapat mengunjungi halaman materi tersebut melalui tautan diatas. Baiklah langsung saja kita buat artikel.Untuk mempermudah pembuatan kode program. Mari kita buka editor kesayangan kita masing-masing. Pada kesempatan ini saya menggunakan sublime text.
<p><i>"Berproses menjadi sesuatu yang kita inginkan adalah dengan belajar. Semua bisa belajar namun tidak semua mengetahui belajar pun punya adab dan cara. Hanya dua hal yang bisa kita kendalikan. Yaitu fikiran dan tindakan. Keberhasilan belajar adalah pengendalian sempurna akan hal tersebut. Apa yang kita fikirkan atau ucapkan menjadi sugesti apa yang kita lakukan. Kata-kata indah dalam fikiran itu adalah sebuah doa. Sedangkan yang kita lakukan adalah upaya mencapainya. Semoga kita semua berhasil belajar pemrograman web bersama"</i></p>
<h2>Belajar Web Medan</h2>
<p>Belajar web medan adalah media (website dan channel youtube) belajar web personal yang dibangun oleh M. Zen, Indah T. dan Hafiz M.</p>
<p>Belajar web medan dibangun atas ketertarikan kami terhadap pemrograman komputer. Dari sekian banyak bahasa pemrograman, kami memilih pemrograman web. Berlatar belakang bidang pendidikan komputer maupun bidang lain. Dan hobi yang terbentuk karena pengalaman. Baik tugas kuliah maupun proyek aplikasi yang kami buat. Menjadi motivasi kami untuk berbagi pengalaman. Ketertarikan kami pada seni algoritma menjadi sebuah kebanggaan untuk kami bagikan kepada semua yang ingin belajar pemrogrman web. Bagi seorang mahasiswa jurusan komputer. Kemampuan membuat program wajib dimiliki untuk menyelesaikan tugas akhir. <b>Akhir kata, mari semangat belajar web.</b>.
<br>
<h2>Kode Pemrograman Web</h2>
<p>Beberapa kode yang akan kita pelajari dalam pemrograman web diantaranya adalah :</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Query</li>
</ol>
<p>Butuh motivasi yang baik dalam belajar pemrograman web maupun belajar apa pun. Salah satu faktor adanya motivasi kita dalam belajar web adalah tujuan kita belajar pemrograman web. Berikut ini beberapa tujuan yang dapat kita jadikan motivasi: </p>
<ul>
<li>Pekerjaan (programmer)</li>
<li>Lulus Kuliah</li>
<li>Menambah Keahlian</li>
<li>Hobi</li>
</ul>
<h2>Spesifikasi Komputer dan Aplikasi</h2>
<p>Untuk belajar pemrograman web. Tidak perlu spesifikasi komputer atau laptop yang terlalu tinggi. Dengan spesifikasi standar, kita sudah bisa membuat aplikasi berbasis web. Hal tersebut menjadi salah satu latar belakang kami memilih pemrograman web.</p>
<p>Belajar pemrograman itu mudah, asik, dan menarik. Beberapa tahun yang tidak fokus. Seperti angin lalu. Beberapa hari penuh kesenangan, kesungguhan jauh lebih berproses. Walaupun satu langkah setiap minggu nya.<b> Ayo Belajar Pemrograman Web setiap akhir pekan.</b></p>
</div>
</body>
</html>
Kode html di atas sudah mengandung tag-tag dasar yang kami kemukakan sebelumnya. Memang jika kita adalah seorang admin pengelola konten web. Kita tidak perlu mengetahui kode html. Karena ada editor javascript yang mengaturnya. Namun sebagai pengembang kita perlu mengetahuinya.
Beberapa pengaturan tampilan menggunakan css kami gunakan untuk mengatur ukuran, warna dari layout halaman artikel.
5. Penutup
Keberhasilan kita membuat artikel adalah modal kita membuat tampilan halaman aplikasi atau sistem informasi berbasis web. Selanjtunya kita akan belajar mengenai layout.
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php . Buka file
Pada tutorial yang lalu saya sudah menulis Membuat CRUD dengan PHP Mysqli anda dapat mempelajari dulu jika belum pernah membuat aplikasi CRUD. Kita membuat aplikasi crud dengan template tujuannya agar tampil lebih baik dan responsif. Jika anda ingin membuat template sendiri juga bisa. Baca juga Membuat Template Sederhana Dengan HTML dan CSS Sebelum membuat aplikasi crud di template Admin LTE anda perlu menyiapkan templatenya dulu. Baca Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis . Sekarang saya anggap anda sudah memiliki template nya. Berikut ini list yang akan kita kerjakan. Template Buat Databse Read Data Create Data Delete Data Update Data Sampai disini kita anggap template sudah ada, selanjutnya kita buat database dengan nama db_siswa . Gambar membuat database Pertama start apache dan mysql di xampp (
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
