Posts

Showing posts from June, 2020

Cara Membuat Absen Dengan HTML Dan CSS

Image
Membuat Absen Dengan HTML & CSS Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS. waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya : <!DOCTYPE html> <html> <head> <style> div.a {text-align: center;} body {background-color:gray;} td { font-weight: bold;        text-shadow: 1px 1px 3px;        color: red;        background-color: deepskyblue;} table {border: 7px solid red;} </style> </head> <body> <div class="a"> <table border="10"cellpadding="5"> <tr> <th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th> <th rowspan="2" bgcolor="orange"> Check </th> </tr> <tr> <th style="color:red; background-color:lime;"> Nama </...

Materi Tentang CSS Part 2

Image
Styling Font Pada CSS Font Style terdiri dari 3 jenis yaitu : normal, italic, oblique. Contoh : <html> <head> <style> p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font style: oblique; } </style> </head> <body> <p class="normal"> Teks dengan style normal </p> <p class="italic"> Teks dengan style italic </p> <p class="oblique"> Teks dengan Style oblique </p> </body> </html> Hasil : Font Size Untuk mengatur / menentukan ukuran pada huruf. Contoh : <html> <head> <style> p { font-size: 20px; } </style> </head> <body> <p> Tulisan dengan ukuran 20px </p> </body> </html> Hasil : Font Weight Menentukan ketebalan pada huruf. Terdapat 2 jenis yaitu : normal dan bold. Contoh : <html> <head> <style> p { font-weight: bold;} </style> </head> <body> <p> Tul...

Materi Tentang CSS Part 1

Image
Pengenalan CSS Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan prameter lainnya. Berikut cara penggunaan CSS : Inline style Dimana kode CSS ditulis langsung di elemen yang di inginkan Contoh: <h1 style="color:blue;"> Judul Halaman </h1> Internal CSS Internal CSS hanya bisa digunakan pada satu halaman saja (CSS tidak bisa digunakan untuk halaman lain). Penulis CSS ini di letakan di dalam elemen head dengan di awali <style> dan diakhiri </style> Contoh : <html> <head> <style> h1{color: blue;} </style> </head> <body> <h1> This a heading </h1> </body> </html> External CSS Dengan External ...

Materi Tentang HTML Part 6 (Materi Terakhir)

Image
Marquee Di HTML Fungsi dari marquee ini adalah untuk membuat tulisan berjalan / bergerak. Contoh : <marquee> Belajar HTML </marquee> Hasil : Direction Mengatur arah pada marquee Contoh : <marquee direction="right"> Belajar HTML </marquee> Hasil : Peringatan : untuk Marquee Direction Kalian Bisa Menggantinya Dengan : Down, up, left, scroll. Youtube Di dalam sebuah website terkadang membutuhkan sebuah konten berupa video. Misalnya membuat website yang berisi tutorial koding, memasak, dan hijab, dan tutorial lainnya untuk memudahkan pengunjung memahami konten yang kalian buat. Selain itu juga, dengan adanya video, website anda akan terlihat lebih menarik. Pada tutorial kali ini, kita akan belajar bagaimana cara menampilkan konten video di dalam halaman website anda. HTML Youtube Video Cara mudah menampilkan video dalam website adalah dengan menggunakan Youtube. Mengapa harus di Youtube ? salah satu alasan adalah untuk menghemat space server hosting kita. ...

Materi Tentang HTML Part 5

Image
Form Pada HTML Form HTML adalah sebuah area yang mengandung elemen - elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukan informasi seperti text, textarea, menu drop-down, radio button, checkbox, dan lain-lain. Sebuah form didefinisikan dengan tag <form> Field Text Contoh : <form> Nama Depan : <input type="tex" name="NamaDepan" id="NamaDepan"> <br> Nama Belakang : <input type="text" name="NamaBelakang" id="NamaBelakang"> </form> Hasil : Field Text - Password Contoh : Username : <input type="Username" name="Username" id="Username"> <br> Password : <input type="password" name="password" id="password"> </form> Hasil : Checkbox Contoh : Apakah Olahraga Kesukaan Mu ? <br> <form> <input type="checkbox" name="Berenang" id="Berenang"> Ber...

Materi Tentang HTML Part 4

Image
Tabel Pada HTML Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi beberapa baris (dengan tag <tr>), dan setiap baris di bagi menjadi beberapa kolom (dengan tag <td>). Td kependekan dari "Table data" yang berarti tempat menyimpan data (data cell). Sebuah cell data dapat beruapa teks, image, list, paragraf, form, table, dan lain lain. Contoh : <table border="1"> <tr> <th> Nama </th> <th> Alamat </th> </tr> <tr> <td> Pilip </td> <td> Cikarang </td > </tr> <tr> <td> Oktan </td> <td> Bekasi </td> </tr> <tr> <td > Noel </td> <td> Jakarta </td> </tr> </table> Hasil : Colspan Digunakan untuk menggabungkan kolom. Contoh : <table border="1"> <tr> <th> Hari </th> <th colspan="3...