Postingan

Struktur Dasar HTML

Gambar
Struktur dasar HTML Website serupa berkas dokumen yang ada seperti koran, majalah atau buku. Serupa dalam hal memiliki struktur konten layaknya dokumen sehari-hari yang kita baca. Pada sebuah majalah terdapat judul, gambar yang ditampilkan dan teks dalam bentuk paragraf. Terkadang, jika konten tersebut panjang terdapat sub-judul untuk memisahkannya menjadi beberapa bagian. Judul dan subjudul pada sebuah dokumen menggambarkan suatu hierarki dari informasi. Misalnya, judul dengan ukuran besar merupakan judul utama dalam sebuah konten. Kemudian diikuti dengan judul kecil di bawahnya yang menjelaskan informasi dengan lebih mendetail lagi. Berkas HTML dasarnya memiliki struktur yang nampak seperti ini: <!DOCTYPE html> <html>      <head>      <title> Judul Halaman </title>      </head>      <body>          <h1> Heading Utama </h1>       ...

Pengenalan HTML

Gambar
Seperti yang sudah kita ketahui, HTML berperan sebagai struktur untuk membangun sebuah halaman website. Dan pada modul ini kita akan mencoba menuliskan struktur HTML, siap? Pada akhir modul, kita akan membuat halaman website seperti gambar berikut: z .

Apa Itu Anatomi Website?

Gambar
Kita terbiasa dengan tampilan website yang nampak pada browser, tetapi apakah kalian tahu bagaimana website dapat tampil demikian? Terdapat 3 (tiga) fondasi penting dalam membuat website.  Yang pertama adalah HTML, yakni salah satu  markup language , yang digunakan untuk membuat struktur dan menampilkan konten pada World Wide Web (Website). CSS dan JavaScript merupakan fondasi lainnya yang digunakan untuk mempercantik dan menjadikan website lebih dinamis dan interaktif.  Main idea:  https://www.freecodecamp.org/news/learn-html-in-5-minutes-ccd378d2ab72/ Sama seperti halnya tubuh manusia yang disusun dari kerangka tulang, HTML pada website berperan sebagai kerangka dasar yang digunakan dalam menampilkan visual pada website. Tapi jika hanya sebatas kerangka, seorang manusia akan terlihat menyeramkan dan aneh bukan? Maka dari itu untuk mempercantik tampilannya kita membutuhkan sebuah kulit. Di sinilah peran CSS. Setelah memiliki kulit dan nampak cantik, selanjutnya kita...

Belajar Widget Fluter : Button

Gambar
Button Kali ini kita akan belajar menggunakan widget button. Widget button ini adalah widget yang dapat menerima trigger sentuhan atau dapat melakukan suatu fungsi ketika disentuh, widget-widget button tersebut antara lain: RaisedButton RaisedButton merupakan bagian dari Material Design widget dari Flutter. Untuk menggunakan RaisedButton seperti berikut: RaisedButton (   onPressed : (){     // Aksi ketika button diklik   },   child : Text ( 'Tombol' ), ); Pada kode di atas RaisedButton memiliki 2 parameter yaitu  onPressed  dan  child . Parameter onPressed merupakan sebuah function event ketika tombol ditekan dan sebenarnya ada event-event lain seperti  onLongPress  dan  onHighlightChanged . Parameter child diisi oleh widget pada umumnya. FlatButton FlatButton merupakan widget button yang tampilan  default -nya polos sehingga FlatButton ini harus diberi parameter-parameter warna. Contoh kodenya seperti berikut: FlatButton ( ...

Contoh Menggunakan API Dan Fetch di dalam Web Sederhana

Gambar
Apakah Anda sudah berhasil menerapkan Fetch dalam menampilkan data dari API TheSportDB? Jika belum, yuk kita lakukan bersama-sama! Pada dokumentasi API menyebutkan bahwa, untuk mendapatkan daftar klub olahraga kita dapat menggunakan target url:  https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=Arsenal Sebelum menuliskan langsung pada proyek dengan fetch, biasakan ketika hendak mengkonsumsi API biasakan untuk mencobanya menggunakan aplikasi Postman terlebih dahulu. Jika target url tersebut diakses melalui Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang tampak pada  tab Body . Pada response JSON yang dihasilkan menampung satu  key  dengan nama  teams  yang memiliki  value  berupa sebuah array. Di dalam array tersebut menampilkan banyak data terkait klub olahraga yang memiliki nama Arsenal. Kita dapat memanfaatkan key  strTeam  untuk mendapatkan nama klub,  strTeamBadge  untuk menda...