FIRMAN'S BLOG

LINK DI CSS Pada artikel yang telah lalu tentang Membuat Link dalam HTML , untuk kesempatan kali ini kita Membuat Link di dalam CSS. Lantas, apa perbedaannya dan bagaimana cara membuat Link tersebut? Membuat Link di dalam CSS memudahkan kita untuk mendesain tampilan Link yang kita inginkan. Seperti warna saat mouse di atas link, link yang pernah dikunjungi, dan lainnya. Baiklah untuk itu, disini Firman telah memberikan sebuah contohnya berikut dibawah ini. <style>       class_link : link{       color : blue;       }       class_link : visited{       color : red;       }       class_link : hover{       color : yellow;       }       class_link : active{       color : green;       } </style> <a class="class_link" href=" https://17416255201077-azizfirmansaputra.blogspot.com...

Gaya Text dan Font Setelah sebelumnya yaitu  Pembahasan tentang Pengenalan CSS dalam HTML , maka selanjutnya kita akan membuat berbagai Contoh CSS nya. CSS menjelaskan gaya dokumen HTML, dan menjelaskan bagaimana elemen-elemen HTML tersebut ditampilkan di layar atau media lain. CSS membuat sebuah tampilan dokumen HTML menjadi lebih menarik dan berbeda dengan lainnya. Karena menentukan gaya untuk halaman Web kita, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan ukuran layar. Untuk artikel kali ini, kita akan membuat contoh  Gaya Font dan Text di CSS . Berikut contoh-contohnya di bawah ini. Text and Background Color Digunakan untuk mengatur warna teks dan warna latar belakang teks. <style>       .warna{        background-color : red;        color : yellow;        } </style> <div class="warna"> Contoh Teks dan Background </div> ...

MULTIMEDIA DI HTML Untuk artikel sebelumnya Cara Menyisipkan Video Youtube dengan HTML  yang pasti harus ter koneksi dengan Internet, karena jika tidak ter koneksi maka video Youtube yang disisipkan tersebut tidak akan tampil. Oleh karena itu, untuk mengatasinya, kita bisa menyisipkan Video bahkan Audio atau Media lainnya dalam HTML tanpa koneksi Internet dengan menggunakan Media yang telah kita download dan tersimpan di perangkat kita. Dengan syarat kita harus tahu direktori tempat penyimpanan Media yang akan disisipkan. Contohnya seperti C:\Users\Public\Videos\Sample Videos/File.mp4 .  Tag  yang digunakan pun juga berbeda-beda. Berikut Firman memberikan beberapa contoh penggunaannya dalam HTML. Namun untuk Hasil Output nya kalian bisa mencoba sendiri ya☺️... Tag Video Tag <video>  menentukan jenis video, seperti klip film atau jenis lainnya. URL video di sisipkan di dalam atribut src . Kode HTML : <video width="500" src=" direktori penyimpan...

Video Youtube di HTML Sebelumnya kita hanya belajar Cara Untuk Menyisipkan Gambar di HTML , maka untuk kali ini kita belajar bagaimana cara untuk menyisipkan file berupa Video di dalam HTML. Tidak jauh beda dengan cara menyisipkan gambar, menyisipkan Video juga kita harus tahu sumber( src ) dari video tersebut. Entah itu dari Youtube, atau pun situs lain, yang pastinya membutuhkan koneksi internet. Agar tidak terhubung ke internet, kita bisa menambahkan nya dari dalam file berkas di perangkat kita. Namun, karena disini Firman memberikan contoh di sebuah artikel blog yang berarti harus koneksi internet maka agar mudah sumber Video tersebut berasal dari sebuah situs Web, seperti Youtube. Baiklah, langsung saja kita simak caranya berikut dibawah ini. Integrasi Video Youtube Situs Web Youtube mengizinkan kita untuk mengintegrasi video mereka kedalam Website yang lain. Caranya dengan menggunakan Tag <iframe> untuk di Integrasikan dalam sebuah bingkai. Dan untuk mengambil...

Contoh Output di HTML Untuk Postingan sebelum-sebelumnya yaitu Cara Mudah Membuat Form dan Tipe-Tipenya di HTML yang berarti merupakan sebuah area untuk memasukkan data atau Input. Maka, pada kesempatan kali ini Firman' s Blog akan menjelaskan tentang Cara  mengeluarkan hasil Input/masukan data tersebut berupa Output. Disini saya akan memberikan beberapa Contoh Output Sederhana setelah kita memasukkan data didalam sebuah form. Oke, mari kita mulai membuat Contoh Output Sederhana di HTML berikut dibawah ini. Tag Output Tag <output> digunakan untuk merepresentasikan/menampilkan kembali hasil masukkan atau input.  Output juga dapat ditampilkan langsung setelah kita memasukkan/Input data, seperti contoh berikut ini : Kode HTML : <input type="range" value="3" oninput="OP1.value=this.value;"> = <output id="OP1">3</output> Hasil Output : = 3 Tag Output dengan TextBox Pada contoh ini, kita menjumlahkan...

TAG MAP Yang sebelumnya kita belajar bersama tentang gambar yaitu  Cara Membuat Caption Gambar di HTML  untuk kali ini Firman ingin membahas tentang Map gambar. Map gambar atau Peta gambar adalah gambar dengan area tertentu yang dapat di klik. Tag yang digunakan yaitu <map>   dengan menggunakan atribut name pada Tag map dan dikaitkan dengan menggunakan atribut usemap pada Tag img sehingga membuat hubungan antara gambar dan peta, yang berisi sejumlah Tag <area> yang menentukan area yang dapat di klik pada peta gambar. Langsung saja kita simak dibawah ini contoh dari penggunaan Tag <map> . Kode HTML : <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDW7FIRxY5BB7bF2GpP0VEMPhOkFZi_FGFsinJiJmSwjXtoIYQZ_cnmDqtD078_GaUgG_ECc12IJ9eVTmRHgR5yuk0PSIcxHfSbYJmfvl2p4SWGJ9YfCDLlTBsPADBDLR09ysNycbdE4/w172-h178-rw/ " alt="Sekedar_Contoh" usemap ="# Contoh "> <map name =" Contoh "> <area shape=...

TAG PROGRESS DAN TAG METER Saat kita memuat sebuah data, kita ingin melihat sebuah kemajuan penyelesaian tugas yang kita buat tersebut, maka pasti ingin menggunakan pengukuran Progress yang terjadi. Untuk mengetahui seberapa kemajuan penyelesaian yang telah terjadi, dalam HTML kita dapat membuat Progress tersebut dengan menggunakan sebuah Tag yaitu <progress> . Nah sedangkan ketika kita ingin mendefinisikan pengukuran skalar dalam rentang yang diketahui kita dapat menggunakan Tag Meter yang sering kita kenal sebagai pengukur. Oke, langsung saja ke contoh penggunaannya di dalam HTML berikut dibawah ini. Tag Progress Tag Progress  berfungsi untuk melihat kemajuan penyelesaian tugas. Sedangkan, untuk gaya penampilannya di browser, ditampilkan sebagai bilah Progress. Contoh 1 : <progress></progress> Hasil Output : Contoh 2 : Untuk Contoh yang ini, kita telah mengatur nilai(value), maksimum, dan minimum dari bilah Progress yang dibuat. <pro...

MARQUEE DI HTML Untuk artikel ini, Firman akan menjelaskan cara membuat beberapa Teks Berjalan atau bergulir baik secara Horizontal, Vertikal, ke kanan atau ke kiri tergantung pada pengaturan nya. Dari beberapa jenis tersebut, intinya kita harus menggunakan sebuah Tag HTML untuk penggunaannya. Tag yang harus digunakan yaitu marquee . Langsung saja kita bahas satu persatu jenis-jenis marquee atau Teks berjalan di HTML berikut ini. Simple Marquee / Marquee Sederhana Untuk Marquee jenis ini, adalah marquee default atau marquee yang tanpa penggunaan atribut lain. Marquee Sederhana, Teks yang dibuat akan berjalan dari arah kanan ke kiri tanpa berhenti. Contoh : <marquee> Marquee Sederhana </marquee> Hasil Output : Marquee Sederhana Marquee Right / Marquee ke Kanan Marquee Right kebalikan dari   Marquee Sederhana ,   seperti artinya  Marquee Right berarti Teks yang dibuat akan berjalan dari arah kiri ke kanan tanpa berhenti. Contoh :...

FIGCAPTION Pada postingan yang telah lalu, kita belajar Cara Untuk Meyisipkan Gambar di HTML  saja tanpa membuat Caption atau tulisan yang berada tepat dibawah gambar, biasanya berisi  judul gambar yang disisipkan atau informasi yang berkaitan dengan gambar. Untuk itu kita bisa membuat Caption tersebut dengan menggunakan Tag HTML. Tag tersebut yaitu " figcaption".   Baiklah langsung saja kita simak dibawah ini contoh penggunaannya. Contoh Gambar tanpa Caption Kode HTML : <figure> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDW7FIRxY5BB7bF2GpP0VEMPhOkFZi_FGFsinJiJmSwjXtoIYQZ_cnmDqtD078_GaUgG_ECc12IJ9eVTmRHgR5yuk0PSIcxHfSbYJmfvl2p4SWGJ9YfCDLlTBsPADBDLR09ysNycbdE4/w172-h178-rw/ " alt=" Sekedar_Contoh "> </figure> Hasil Output : Contoh Gambar dengan Caption Kode HTML : <figure> <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDW7FIRxY5BB7bF2GpP0VEMPh...

TAG RUBY DAN TAG RP Pada Kesempatan kali ini, Firman akan memaparkan cara membuat Teks di atas Tulisan. Maksud disini adalah, sebuah teks yang berukuran ekstra kecil yang melekat pada teks utama untuk menunjukan cara pengucapan atau arti dari karakter  yang bersangkutan. Tag yang digunakan yaitu Tag ruby dan Tag rp . Elemen ruby terdiri satu atau lebih karakter yang membutuhkan penjelasan/pengucapan dan elemen rt memberikan informasi itu, sedangkan elemen rp yang mendefinisikan apa yang ditampilkan di browser yang tidak mendukung ruby. Baiklah dari pada bingung-bingung langsung saja ke Contoh penggunaan Tag ruby dan Tag rp berikut di bawah  ini : Kode HTML : Contoh 1 <ruby> A <rp> <rt> az </rt> </rp> </ruby> Contoh 2 <ruby> 漢 <rp> <rt> Kan </rt> </rp> </ruby> <ruby> 字 <rp> <rt> ji </rt> </rp>< /ruby> Contoh 3 <ruby> Continuous <rp> ...

Karakter dan Simbol dalam HTML Biasanya, kita menggunakan Karakter atau Simbol Khusus untuk beberapa keperluan seperti membuat tanda khusus pada simbol matematika, sebagai penanda atau pun untuk keperluan lainnya didalam dokumen HTML. Beberapa Karakter HTML dapat berupa  Nama  Entitas dan dapat juga berupa   Nomor  Entitas. Untuk Simbol biasanya kita menggunakannya pada rumus Matematika, atau pun pada perhitungan operasi lainnya. Berikut cara membuat Karakter dan Simbol khusus dalam HTML. Non Breaking Space Biasanya HTML tidak akan mengizinkan lebih dari satu spasi dan ruang baris kosong. Sehingga, walaupun sebanyak apapun kita menekan spasi itu tidak akan berpengaruh. Oleh karena itu, kita dapat menggunakan kode  &nbsp; untuk membuat beberapa ruang kosong atau spasi yang panjang. Contoh : Satu Spasi Saja Lebih&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dari&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Satu&n...

Contenteditable Pada kesempatan kali ini, saya akan mempelajari tentang Contenteditable atau Atribut yang dapat di Edit.  Maksudnya yaitu dalam sebuah paragraf atau pun sebuah kalimat pasti kita ingin mengedit saat kita ingin mengubah isi didalam kalimat tersebut. Baiklah, langsung saja tanpa panjang lebar lebih baik kita ke pembahasan nya dibawah ini. Biasanya kita dapat memasukkan teks dalam kotak teks atau pun textarea. Tetapi dengan menggunakan Tag ini, kita dapat membuat Tag HTML apapun yang dapat diedit. Atribut ini menentukan apakah konten suatu elemen dapat diedit atau tidak. Ketika Atribut Contenteditable  tidak diatur pada elemen, elemen akan mewarisi  dari induknya. Berikut Contoh penggunaan Contenteditable pada beberapa Tag HTML. Untuk Tag P Contoh : <p contenteditable="true">Ini adalah sebuah Paragraf (P) [klik disini]</p> Hasil : Ini adalah sebuah Paragraf (P) [klik disini] Untuk Tag Div Contoh : <div contentedit...

Tag Q, Addres, Cite, BDO, KDB, Samp, Code, Var, dan Blockquote Untuk postingan kali ini, saya akan memberikan beberapa cara untuk membuat Tulisan Khusus pada HTML. Biasanya, tulisan khusus ditunjukkan untuk memberitahukan atau menekankan pada suatu kalimat atau pun kata, sehingga orang yang membaca akan tertuju kebagian yang dimaksudkan. Bisa juga digunakan untuk membuat perbedaan dengan tulisan lainnya karena berbeda fungsi dan tujuannya. Baiklah beberapa cara membuat tulisan Khusus di dalam HTML berikut. Tag Q Tag Q  digunakan untuk menunjukan bahwa teks tersebut adalah kutipan garis pendek. Tag Q tidak memerlukan pemutusan Paragraf dan ditandai dengan adanya tanda petik dua diantara sebuah kalimat. Tag yang digunakan yaitu <q> dan ditutup dengan </q> . Contoh : Dia berkata <q>Ini adalah contoh Tag Q</q> Hasil : Dia berkata Ini adalah contoh Tag Q Tag Addres Tag Address  digunakan untuk menulis alamat, seperti ke pengarangan sebuah d...

Paragraph, Span, dan Div Pada kesempatan kali ini, saya akan membahas tentang Perbedaan antara Paragraph,   Span dan  Div pada Tag HTML. Ketiga Tag tersebut pasti kita jumpai didalam dokumen HTML. Karena ketiga Tag tersebut berfungsi sebagai pengatur paragraf, kalimat, atau pun per kata. Yang dapat berarti bahwa ketiga Tag tersebut adalah Tag yang penting dan paling dasar didalam dokumen HTML. Baiklah langsung saja kita bahas perbedaannya dibawah ini. Paragraph (<p>) Sesuai dengan namanya  Paragraph atau Paragraf digunakan untuk menentukan elemen atau beberapa kalimat yang akan dijadikan sebuah paragraf HTML.Didalam sebuah paragraf HTML tidak boleh berisi tabel dan pemblokiran lainnya. Penggunaannya dengan menggunakan Tag <p> dan diakhiri atau ditutup dengan Tag </p> . Contoh : <p> Ini adalah Paragraf yang Pertama </p> <p> Ini adalah Paragraf yang Kedua </p> <p> Ini adalah Paragraf yang Ketiga </p> ...

PENGENALAN CSS Untuk kali ini, kita akan mempelajari tentang CSS .  Cascading Style Sheets (CSS) atau dalam bahasa Indonesia adalah Bahasa Lembar Gaya adalah bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup . CCS digunakan untuk memformat halaman Web yang ditulis dengan HTML dan XHTML. Baiklah langsung saja kita pelajari CSS dibawah ini. Pengertian CSS CSS  adalah singkatan dari Cascading Style Sheets yang memberikan tampilan teks yang diinginkan pada halaman Web. Tampilan teks dengan Style dapat dilakukan dengan mendefinisikan font, color, margin, background, font size, dan lainnya. CSS bisa diartikan dengan meletakkan style yang berbeda pada layer/lapisan yang berbeda. Keuntungan Memakai CSS CSS   memberikan keseragaman pada halaman Web. Menghemat banyak waktu pada pekerjaan berulang, karena kita hanya perlu membuat perubahan dalam style sheet . Memungkinkan membuat halaman Web dengan mudah. Layers/lapisan...