Friday, November 15, 2019
*Apa itu Web?*
Web adalah adalah kumpulan halaman yang saling berhubungan dan umumnya disimpan di dalam sebuah server. Umumnya sebuah website berisikan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Salah satu contoh web adalah codepolitan.com di mana di situs ini kita bisa membaca artikel, belajar pemrograman melalui tutorial tertulis, mengikuti tutorial video di member premium, serta berdiskusi bersama member yang lain.
*Manfaat Web Programming*
• Bisa mengembangkan cara berfikir yang sistematis.
• Membuat solusi dari suatu masalah dengan menggunakan teknologi. Contoh, banyak orang kesulitan mencari informasi tentang koding, maka kita bisa mengembangkan web yang membahas tentang hal itu. Contoh lainnya, UMKM (Usaha Mikro Kecil dan Menengah) kesulitan menemukan konsumen, maka kita bisa membuat web yang mempertemukan pelaku usaha dengan konsumennya dari seluruh Indonesia yang mana telah dilakukan oleh Achmad Zaky dengan Bukalapak-nya. Bisakah Anda menemukan suatu masalah yang terjadi di sekitar Anda dan perlu diselesaikan dengan teknologi web?
*Mengapa Belajar Web Programming*
Ada banyak hal yang membuat kita harus belajar web programming. Yang pertama, teknologi web adalah teknologi yang masih terus berkembang hingga saat ini. Alasan kedua, meski banyak yang mengatakan mobile akan menggantikan web, namun nyatanya web masih dipakai oleh banyak orang. Bahkan aplikasi mobile sesungguhnya banyak bergantung pada sistem web sebagai pusat penyimpanan data. Alasan yang terakhir, web programming relatif lebih mudah untuk dipelajari untuk orang awam yang masih buta dengan pemrograman. Karena tingkat kesulitan yang lebih rendah, banyak orang yang sebelumnya tidak mengerti programming sama sekali bisa sukses menjadi seorang web programmer.
*Konsep Client dan Server*
Client dan server adalah bagian penting pada web development. Berdasarkan fungsinya, pemrograman web dibagi menjadi dua yaitu frontend dan backend. Frontend adalah bagian web yang bisa dilihat secara langsung oleh pengguna. Misalnya, saat kita membuka Facebook atau Twitter, maka halaman-halaman yang muncul merupakan bagian dari frontend. Saat kita mendaftar, melakukan login, mengirim pesan, mengunggah gambar, dan aksi di mana kita perlu mengambil atau menyimpan data, maka aksi-aksi tersebut akan terjadi di backend yang tidak bisa kita lihat bagaimana aksi-aksi tadi terjadi.
Frontend dan backend sangat erat kaitannya. Jika sebuah web hanya memiliki tampilan atau frontend saja, maka ia tidak bisa melakukan sesuatu yang dinamis. Kita tidak bisa mencari data atau menyimpan data di sebuah web yang tidak memiliki backend. Sebaliknya, jika kita hanya membuat backend-nya saja, pengguna tidak bisa berinteraksi dengan web yang kita buat, yang menyebabkan web kita tidak ada yang memakai.
*Perbedaan Client Side dan Server Side*
Untuk client side, semua proses terjadi di sisi pengguna, client meminta data ke server di mana data dikirim ke server. Pada client side yang ditampilkan adalah halaman website yang berbentuk halaman HTML, CSS, dan JS.
Sedangkan untuk server side semua proses terjadi di sisi server yaitu di komputer server atau di cloud. Server side bertanggung jawab merespon data yang diminta oleh client side. Server side yaitu tempat di mana database, API, atau server side rendering terjadi, sebagai contoh bahasa pemrograman PHP berjalan di server dan ditampilkan ke client sebagai file HTML.
*Web Server / Hosting*
Hosting adalah penyewaan tempat untuk menampung data-data yang dibutuhkan oleh sebuah website yang bisa berbentuk gambar, email, script, file, atau database. Hosting biasanya berbayar dengan pilihan paket-paket yang bisa dipilih dari rentang harga belasan ribu hingga jutaan rupiah tergantung spesifikasi yang dibutuhkan.
Hosting memiliki peran yang sangat penting bagi sebuah web karena hosting lah yang membuat web kita bisa diakses oleh orang lain melalui internet. Jika web yang dibuat hanya disimpan di komputer/laptop kita saja, maka tidak ada orang lain yang bisa menggunakan web tersebut.
*Domain*
Domain adalah nama unik yang diberikan untuk mengidentifikasi alamat. Contoh (IP address) server komputer seperti web server atau email server di internet.
Contoh :
• Codepolitan.com
• Facebook.com
Jika dianalogikan domain adalah alamat rumah sedangkan hosting merupakan tanahnya/rumahnya.
*Konsep Bahasa Pemrograman*
Bahasa pemrograman adalah susunan karakter dan kata kunci yang dapat dikonversi ke dalam bahasa mesin sehingga dapat dijalankan oleh komputer.
Bahasa pemrograman web adalah bahasa pemrograman yang digunakan untuk membangun aplikasi berbasis web.
*Tipe Bahasa Pemrograman*
Ada dua tipe bahasa pemrograman web yaitu :
Client Side Language
• HTML
• CSS
• JavaScript
Server Side Language
• PHP
• Java
• Python
• Perl
• Node.JS
• Ruby
*Web Browser*
Web browser adalah software yang digunakan untuk menjelajahi internet atau mencari informasi dari suatu halaman website. Web browser merepresentasikan dokumen HTML ke dalam bentuk visual.
Contoh :
• Google Chrome
• Mozilla Firefox
• Safari
• Opera
*Sebelum Membuat Website*
Sebelum membuat website kita perlu memetakan tiga hal di bawah ini :
• Apa tujuan dari website tersebut ?
• Siapa saja penggunanya ?
• Target bisnis yang akan dicapai ?
*Apa itu HTML ?*
Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research (CERN) mencetuskan ide untuk menciptakan suatu script bahasa pemrograman pada suatu dokumen yang kemudian dikenal sebagai HTML. Tim Berners Lee diketahui sebagai penemu HTML. Saat ini penggunaan dan pengembangan HTML diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari HTML yang sekarang digunakan adalah HTML5. Versi ini memiliki fitur yang lebih baik dari versi HTML sebelumnya. HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. HTML itu sendiri bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya. HTML mendeskripsikan struktur halaman web yang ditulis dengan elemen atau tag yang yang mengapit konten atau teks di dalamnya yang akan ditampilkan pada sebuah halaman web oleh browser. Jadi apapun website yang kita lihat pasti awalnya dibangun menggunakan HTML.
*Apa Kegunaan HTML ?*
HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. Konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.
*Struktur dasar HTML memiliki susunan file seperti berikut ini :*
<html>
<head>
<title>Judul halaman</title>
</head>
<body>
<!-- semua yang akan di tampilkan di web disimpan di dalam body -->
<h1>Selamat datang</h1>
</body>
</html>
*Struktur HTML*
Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.
*Tag HTML*
Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML. Fungsi tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek ditampilkan berdasarkan tag yang digunakan, objek di sini bisa berupa teks, video, audio dan gambar.
*Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Tag pembuka ditulis seperti ini:*
<nama_tag>
Dan tag penutup ditulis seperti ini:
</nama_tag>
*Catatan* : Perbedaan antara tag pembuka dan tag penutup adalah tag penutup memiliki karakter garis miring sebelum nama tag-nya.
*Attribute HTML*
Atribut memiliki tugas khusus untuk memberikan informasi tambahan pada sebuah tag.
<namatag nama-atribut="nilai-atribut"></namatag>
*Dari contoh kode di atas yang dimaksud dengan atribut adalah tambahan yang ditulis di dalam tag pembuka. Contohnya bila kita hendak membuat tautan atau link, Anda akan perlu menulis minimal seperti ini:*
<a href="login.html">Login</a>
Pada contoh kode di atas, kita membuat tautan menggunakan tag <a>. Namun menggunakan tag <a> saja tidak cukup, karena kita perlu memberi tahu kepada browser kemana halaman akan dialihkan bila pengguna mengklik tautan Login. Oleh karena itu, tag <a> dilengkapi dengan atribut href yang harus diisi dengan nama URL tujuan dari tautan tersebut. Pada contoh di atas, href adalah nama atribut, dan "login.html" adalah nilai atribut. Nama dan nilai atribut dipisahkan dengan tanda sama dengan (=).
Selain tag <a> ada banyak tag lain yang memerlukan atribut. Bila dikelompokkan, ada dua jenis atribut, yakni atribut global dan atribut spesifik. Atribut global adalah atribut yang dapat diterapkan pada tag apapun karena sifatnya yang umum. Contoh atribut global di antaranya adalah class, id, lang, title, style dan sebagainya. Sedangkan atribut spesifik adalah atribut yang hanya berfungsi pada tag-tag tertentu, seperti atribut href yang hanya berlaku pada tag <a> dan <link>, atribut src yang hanya berlaku pada tag <img> dan <script>, dan sebagainya.
*Elemen HTML*
Rangkaian dari tag pembuka, konten dan tag penutup disebut dengan elemen HTML. Contoh berikut ini adalah elemen heading 1 dan elemen paragraf:
<h1>Selamat Datang</h1>
<p>Selamat belajar pemrograman web.</p>
Pada contoh kode di atas, kita memiliki elemen heading 1 yang tersusun dari tag pembuka <h1>, konten elemen berupa teks bertuliskan Selamat Datang dan tag penutup </h1>. Kita juga memiliki elemen paragraf yang tersusun dari tag pembuka <p>, konten teks dan tag penutup </p>. Perbedaan dari kedua elemen ini adalah, elemen heading digunakan untuk menampilkan judul halaman, sedangkan elemen paragraf digunakan untuk menampilkan konten paragraf. Bila kita buka di browser, maka elemen heading akan dicetak lebih besar dan lebih tebal daripada elemen paragraf.
*Bila kita memiliki contoh kode seperti ini:*
<body>
<h1>Selamat datang</h1>
<p>Selamat belajar pemrograman web di <b>CodePolitan</b></p>
</body>
Maka:
<body> disebut tag body (atau tag pembuka body), <h1> adalah tag h1 dan <p> adalah tag p atau paragraf.
<h1>Selamat datang</h1> disebut elemen h1.
<p>Selamat belajar pemrograman web di <b>CodePolitan</b></p> disebut elemen p atau paragraf.
<b>CodePolitan</b> disebut elemen b atau bold, <b> itu sendiri disebut tag b atau bold
semua bagian mulai dari tag pembuka body, berikut sub-element diantara tag pembuka dan penutup body, hingga tag tutup body disebut dengan elemen body.
*Catatan* Penulisan elemen harus Penulisan elemen harus lengkap, mulai dari tag pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!
Ada banyak tag yang dapat kita gunakan di dalam HTML untuk menampilkan konten. Bila kita bagi ke dalam dua area, maka ada tag-tag yang digunakan di dalam elemen head dan ada tag yang digunakan di dalam elemen body.
*Tag di dalam Elemen Head*
Elemen yang ada di dalam head berfungsi sebagai informasi dari dokumen HTML dan tidak akan ditampilkan di layar browser. Beberapa tag yang dapat digunakan di dalam elemen head di antaranya adalah <meta>, <title>, <style>, <script> dan <link>.
<head>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
<script> Javascript </script>
</head>
*Tag di dalam Elemen Body*
Ada banyak tag yang dapat kita gunakan untuk menampilkan konten di dalam elemen body.
Ada tag yang berfungsi untuk menampilkan teks, seperti <h1>, <h2>, <h3>, <h3>, <h4>, <h5>, <p> dan sebagainya.
Ada juga tag untuk memformat teks, seperti <b>, <i>, <strong>, <em>, <mark>, <del> dan sebagainya.
Untuk menampilkan gambar, Anda dapat menggunakan tag <img>, dan untuk membuat tautan dapat menggunakan tag <a>.
Di dalam HTML, Anda dapat membuat elemen table dengan menggunakan kombinasi dari tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Anda juga dapat membuat list dengan menggunakan kombinasi dari tag <ul>, <ol>, <li>, <dl>, <dd>, dan <dt>. Terkait pembuatan table dan list akan dibahas secara khusus di bagian selanjutnya.
Anda juga dapat memasukkan video, audio atau format media lainnya menggunakan sejumlah tag seperti <object>, <video>, <audio>, <embed>, dan <iframe>.
Sampai pembahasan ini Anda cukup perlu paham terkait tag dan elemen. Adapun cara penggunaan tag-tag di atas akan dibahas di bagian khusus setelah ini. Bila Anda ingin tahu lebih lengkap tag HTML apa saja yang tersedia dapat dilihat di https://www.w3schools.com/tags/. Jangan kaget bila Anda menemukan banyak tag di HTML. Anda tidak harus menghafal semuanya, cukup pelajari tag-tag yang akan Anda gunakan saat membuat web nantinya.
Web adalah adalah kumpulan halaman yang saling berhubungan dan umumnya disimpan di dalam sebuah server. Umumnya sebuah website berisikan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Salah satu contoh web adalah codepolitan.com di mana di situs ini kita bisa membaca artikel, belajar pemrograman melalui tutorial tertulis, mengikuti tutorial video di member premium, serta berdiskusi bersama member yang lain.
*Manfaat Web Programming*
• Bisa mengembangkan cara berfikir yang sistematis.
• Membuat solusi dari suatu masalah dengan menggunakan teknologi. Contoh, banyak orang kesulitan mencari informasi tentang koding, maka kita bisa mengembangkan web yang membahas tentang hal itu. Contoh lainnya, UMKM (Usaha Mikro Kecil dan Menengah) kesulitan menemukan konsumen, maka kita bisa membuat web yang mempertemukan pelaku usaha dengan konsumennya dari seluruh Indonesia yang mana telah dilakukan oleh Achmad Zaky dengan Bukalapak-nya. Bisakah Anda menemukan suatu masalah yang terjadi di sekitar Anda dan perlu diselesaikan dengan teknologi web?
*Mengapa Belajar Web Programming*
Ada banyak hal yang membuat kita harus belajar web programming. Yang pertama, teknologi web adalah teknologi yang masih terus berkembang hingga saat ini. Alasan kedua, meski banyak yang mengatakan mobile akan menggantikan web, namun nyatanya web masih dipakai oleh banyak orang. Bahkan aplikasi mobile sesungguhnya banyak bergantung pada sistem web sebagai pusat penyimpanan data. Alasan yang terakhir, web programming relatif lebih mudah untuk dipelajari untuk orang awam yang masih buta dengan pemrograman. Karena tingkat kesulitan yang lebih rendah, banyak orang yang sebelumnya tidak mengerti programming sama sekali bisa sukses menjadi seorang web programmer.
*Konsep Client dan Server*
Client dan server adalah bagian penting pada web development. Berdasarkan fungsinya, pemrograman web dibagi menjadi dua yaitu frontend dan backend. Frontend adalah bagian web yang bisa dilihat secara langsung oleh pengguna. Misalnya, saat kita membuka Facebook atau Twitter, maka halaman-halaman yang muncul merupakan bagian dari frontend. Saat kita mendaftar, melakukan login, mengirim pesan, mengunggah gambar, dan aksi di mana kita perlu mengambil atau menyimpan data, maka aksi-aksi tersebut akan terjadi di backend yang tidak bisa kita lihat bagaimana aksi-aksi tadi terjadi.
Frontend dan backend sangat erat kaitannya. Jika sebuah web hanya memiliki tampilan atau frontend saja, maka ia tidak bisa melakukan sesuatu yang dinamis. Kita tidak bisa mencari data atau menyimpan data di sebuah web yang tidak memiliki backend. Sebaliknya, jika kita hanya membuat backend-nya saja, pengguna tidak bisa berinteraksi dengan web yang kita buat, yang menyebabkan web kita tidak ada yang memakai.
*Perbedaan Client Side dan Server Side*
Untuk client side, semua proses terjadi di sisi pengguna, client meminta data ke server di mana data dikirim ke server. Pada client side yang ditampilkan adalah halaman website yang berbentuk halaman HTML, CSS, dan JS.
Sedangkan untuk server side semua proses terjadi di sisi server yaitu di komputer server atau di cloud. Server side bertanggung jawab merespon data yang diminta oleh client side. Server side yaitu tempat di mana database, API, atau server side rendering terjadi, sebagai contoh bahasa pemrograman PHP berjalan di server dan ditampilkan ke client sebagai file HTML.
*Web Server / Hosting*
Hosting adalah penyewaan tempat untuk menampung data-data yang dibutuhkan oleh sebuah website yang bisa berbentuk gambar, email, script, file, atau database. Hosting biasanya berbayar dengan pilihan paket-paket yang bisa dipilih dari rentang harga belasan ribu hingga jutaan rupiah tergantung spesifikasi yang dibutuhkan.
Hosting memiliki peran yang sangat penting bagi sebuah web karena hosting lah yang membuat web kita bisa diakses oleh orang lain melalui internet. Jika web yang dibuat hanya disimpan di komputer/laptop kita saja, maka tidak ada orang lain yang bisa menggunakan web tersebut.
*Domain*
Domain adalah nama unik yang diberikan untuk mengidentifikasi alamat. Contoh (IP address) server komputer seperti web server atau email server di internet.
Contoh :
• Codepolitan.com
• Facebook.com
Jika dianalogikan domain adalah alamat rumah sedangkan hosting merupakan tanahnya/rumahnya.
*Konsep Bahasa Pemrograman*
Bahasa pemrograman adalah susunan karakter dan kata kunci yang dapat dikonversi ke dalam bahasa mesin sehingga dapat dijalankan oleh komputer.
Bahasa pemrograman web adalah bahasa pemrograman yang digunakan untuk membangun aplikasi berbasis web.
*Tipe Bahasa Pemrograman*
Ada dua tipe bahasa pemrograman web yaitu :
Client Side Language
• HTML
• CSS
• JavaScript
Server Side Language
• PHP
• Java
• Python
• Perl
• Node.JS
• Ruby
*Web Browser*
Web browser adalah software yang digunakan untuk menjelajahi internet atau mencari informasi dari suatu halaman website. Web browser merepresentasikan dokumen HTML ke dalam bentuk visual.
Contoh :
• Google Chrome
• Mozilla Firefox
• Safari
• Opera
*Sebelum Membuat Website*
Sebelum membuat website kita perlu memetakan tiga hal di bawah ini :
• Apa tujuan dari website tersebut ?
• Siapa saja penggunanya ?
• Target bisnis yang akan dicapai ?
*Apa itu HTML ?*
Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research (CERN) mencetuskan ide untuk menciptakan suatu script bahasa pemrograman pada suatu dokumen yang kemudian dikenal sebagai HTML. Tim Berners Lee diketahui sebagai penemu HTML. Saat ini penggunaan dan pengembangan HTML diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari HTML yang sekarang digunakan adalah HTML5. Versi ini memiliki fitur yang lebih baik dari versi HTML sebelumnya. HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. HTML itu sendiri bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya. HTML mendeskripsikan struktur halaman web yang ditulis dengan elemen atau tag yang yang mengapit konten atau teks di dalamnya yang akan ditampilkan pada sebuah halaman web oleh browser. Jadi apapun website yang kita lihat pasti awalnya dibangun menggunakan HTML.
*Apa Kegunaan HTML ?*
HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. Konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.
*Struktur dasar HTML memiliki susunan file seperti berikut ini :*
<html>
<head>
<title>Judul halaman</title>
</head>
<body>
<!-- semua yang akan di tampilkan di web disimpan di dalam body -->
<h1>Selamat datang</h1>
</body>
</html>
*Struktur HTML*
Struktur HTML terdiri dari 3 konsep dasar yaitu tag, elemen dan atribut.
*Tag HTML*
Tag HTML adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML. Fungsi tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek ditampilkan berdasarkan tag yang digunakan, objek di sini bisa berupa teks, video, audio dan gambar.
*Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Tag pembuka ditulis seperti ini:*
<nama_tag>
Dan tag penutup ditulis seperti ini:
</nama_tag>
*Catatan* : Perbedaan antara tag pembuka dan tag penutup adalah tag penutup memiliki karakter garis miring sebelum nama tag-nya.
*Attribute HTML*
Atribut memiliki tugas khusus untuk memberikan informasi tambahan pada sebuah tag.
<namatag nama-atribut="nilai-atribut"></namatag>
*Dari contoh kode di atas yang dimaksud dengan atribut adalah tambahan yang ditulis di dalam tag pembuka. Contohnya bila kita hendak membuat tautan atau link, Anda akan perlu menulis minimal seperti ini:*
<a href="login.html">Login</a>
Pada contoh kode di atas, kita membuat tautan menggunakan tag <a>. Namun menggunakan tag <a> saja tidak cukup, karena kita perlu memberi tahu kepada browser kemana halaman akan dialihkan bila pengguna mengklik tautan Login. Oleh karena itu, tag <a> dilengkapi dengan atribut href yang harus diisi dengan nama URL tujuan dari tautan tersebut. Pada contoh di atas, href adalah nama atribut, dan "login.html" adalah nilai atribut. Nama dan nilai atribut dipisahkan dengan tanda sama dengan (=).
Selain tag <a> ada banyak tag lain yang memerlukan atribut. Bila dikelompokkan, ada dua jenis atribut, yakni atribut global dan atribut spesifik. Atribut global adalah atribut yang dapat diterapkan pada tag apapun karena sifatnya yang umum. Contoh atribut global di antaranya adalah class, id, lang, title, style dan sebagainya. Sedangkan atribut spesifik adalah atribut yang hanya berfungsi pada tag-tag tertentu, seperti atribut href yang hanya berlaku pada tag <a> dan <link>, atribut src yang hanya berlaku pada tag <img> dan <script>, dan sebagainya.
*Elemen HTML*
Rangkaian dari tag pembuka, konten dan tag penutup disebut dengan elemen HTML. Contoh berikut ini adalah elemen heading 1 dan elemen paragraf:
<h1>Selamat Datang</h1>
<p>Selamat belajar pemrograman web.</p>
Pada contoh kode di atas, kita memiliki elemen heading 1 yang tersusun dari tag pembuka <h1>, konten elemen berupa teks bertuliskan Selamat Datang dan tag penutup </h1>. Kita juga memiliki elemen paragraf yang tersusun dari tag pembuka <p>, konten teks dan tag penutup </p>. Perbedaan dari kedua elemen ini adalah, elemen heading digunakan untuk menampilkan judul halaman, sedangkan elemen paragraf digunakan untuk menampilkan konten paragraf. Bila kita buka di browser, maka elemen heading akan dicetak lebih besar dan lebih tebal daripada elemen paragraf.
*Bila kita memiliki contoh kode seperti ini:*
<body>
<h1>Selamat datang</h1>
<p>Selamat belajar pemrograman web di <b>CodePolitan</b></p>
</body>
Maka:
<body> disebut tag body (atau tag pembuka body), <h1> adalah tag h1 dan <p> adalah tag p atau paragraf.
<h1>Selamat datang</h1> disebut elemen h1.
<p>Selamat belajar pemrograman web di <b>CodePolitan</b></p> disebut elemen p atau paragraf.
<b>CodePolitan</b> disebut elemen b atau bold, <b> itu sendiri disebut tag b atau bold
semua bagian mulai dari tag pembuka body, berikut sub-element diantara tag pembuka dan penutup body, hingga tag tutup body disebut dengan elemen body.
*Catatan* Penulisan elemen harus Penulisan elemen harus lengkap, mulai dari tag pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!
Ada banyak tag yang dapat kita gunakan di dalam HTML untuk menampilkan konten. Bila kita bagi ke dalam dua area, maka ada tag-tag yang digunakan di dalam elemen head dan ada tag yang digunakan di dalam elemen body.
*Tag di dalam Elemen Head*
Elemen yang ada di dalam head berfungsi sebagai informasi dari dokumen HTML dan tidak akan ditampilkan di layar browser. Beberapa tag yang dapat digunakan di dalam elemen head di antaranya adalah <meta>, <title>, <style>, <script> dan <link>.
<head>
<meta charset="utf-8">
<title>Judul halaman</title>
<style> Style </style>
<script> Javascript </script>
</head>
*Tag di dalam Elemen Body*
Ada banyak tag yang dapat kita gunakan untuk menampilkan konten di dalam elemen body.
Ada tag yang berfungsi untuk menampilkan teks, seperti <h1>, <h2>, <h3>, <h3>, <h4>, <h5>, <p> dan sebagainya.
Ada juga tag untuk memformat teks, seperti <b>, <i>, <strong>, <em>, <mark>, <del> dan sebagainya.
Untuk menampilkan gambar, Anda dapat menggunakan tag <img>, dan untuk membuat tautan dapat menggunakan tag <a>.
Di dalam HTML, Anda dapat membuat elemen table dengan menggunakan kombinasi dari tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Anda juga dapat membuat list dengan menggunakan kombinasi dari tag <ul>, <ol>, <li>, <dl>, <dd>, dan <dt>. Terkait pembuatan table dan list akan dibahas secara khusus di bagian selanjutnya.
Anda juga dapat memasukkan video, audio atau format media lainnya menggunakan sejumlah tag seperti <object>, <video>, <audio>, <embed>, dan <iframe>.
Sampai pembahasan ini Anda cukup perlu paham terkait tag dan elemen. Adapun cara penggunaan tag-tag di atas akan dibahas di bagian khusus setelah ini. Bila Anda ingin tahu lebih lengkap tag HTML apa saja yang tersedia dapat dilihat di https://www.w3schools.com/tags/. Jangan kaget bila Anda menemukan banyak tag di HTML. Anda tidak harus menghafal semuanya, cukup pelajari tag-tag yang akan Anda gunakan saat membuat web nantinya.
Posts
