Dengan adanya HTML 5 anda dapat menambahkan video dengan mudah, tetapi terdapat pembatasan dari browser yang support, serta format file video yang didukung. Dengan menggunakan tag <video> kita sudah bisa menambahkan video .
HTML #13 : Video
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Selasa, 23 Februari 2021
Senin, 22 Februari 2021
HTML #12 : Audio
Untuk menambahkan audio di HTML, kita menggunakan tag <audio>. Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source>.
HTML #11 : Form
Form merupakan tempat penginputan data sebelum diproses oleh sistem.Salah satunya adalah form login, form comment, form data user, dan lain sebagainya. Tag yang digunakan untuk membuat form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<opstion> dan<select>.
HTML #10 : List
Dalam HTML, tag list terdiri dari 3 jenis :
- Ordered List adalah list yang terurut.
- Unordered List adalah list yang tak terurut.
- dan Description List adalah list yang berisi definisi.
HTML #9 : Membuat Tabel
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel. Tabel terdiri dari 4 unsur utama:
- Baris
- Kolom
- Sel
- Garis
HTML #8 : Menampilkan Gambar
Pada artikel kali ini, kita akan mempelajari bagaimana caranya memasukkan gambar di HTML. Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki atribut wajib, yakni src. Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="Sawah.jpg" />
</p>
</body>
</html>
Hasilnya :
Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML. Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/Sawah.jpg" />
</p>
</body>
</html>
Hasilnya :
Hasilnya akan sama seperti yang di awal kita buat.
Untuk menampilkan gambar dari internet atau yang sudah diupload, kita tinggal menambahkan link atau url lengkap dari gambar terserbut.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Danau Toba:</p>
<p>
<img src="https://i.ibb.co/pbNFYR2/danau-toba-169.jpg" />
</p>
</body>
</html>
Hasilnya :
Atribut Tag <img>
Ada beberapa atribut yang sering digunakan pada tag <img>:
Atribut alt
Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar Danau Toba:</p>
<p>
<img src="" alt="danautoba" />
</p>
</body>
</html>
Hasilnya :
Atribut width dan height
Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/Sawah.jpg" width="200" height="150" alt="Sawah"/>
<img src="images/Sawah.jpg" width="150" height="100" alt="Sawah"/>
<img src="images/Sawah.jpg" width="50" height="50" alt="Sawah"/>
</p>
</body>
</html>
Hasilnya :
Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya kita memberikan nilai 200px.
Atribut style
Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Style Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<img src="images/Sawah.jpg" style="width: 160px;border: 3px solid red;" />
<img src="images/Sawah.jpg" style="width: 160px;border-radius: 10px;" />
<img src="images/Sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
</p>
</body>
</html>
Hasilnya :
Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah. Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan pada pojok gambar. Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan lingkaran.
Membuat Gambar Background
Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut background-image lalu diisi dengan URL dari gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body style="background-image: url(images/Sawah.jpg);">
<h1>Background dengan Gambar</h1>
<p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>
Hasilnya :
Membuat Link dengan Gambar
Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML#8</title>
</head>
<body>
<h1>Gambar Sebagai Link</h1>
<p>Coba klik gambar ini:</p>
<p>
<a href="https://radohtsimarmata.blogspot.com/">
<img src="images/Sawah.jpg" width="160"/>
</a>
</p>
</body>
</html>
Hasilnya :
Tag <figure>
Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag <figcaption>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML#8</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<figure>
<img src="images/Sawah.jpg" width="300" alt="Sawah"/>
<figcaption>Landscape sawah dan langit</figcaption>
</figure>
</p>
</body>
</html>
Hasilnya :
Tag <picture>
Tag <picture> ini berfungsi untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Gambar di HTML</title>
</head>
<body>
<h1>Menampilkan Gambar di HTML</h1>
<p>Berikut ini adalah gambar sawah:</p>
<p>
<picture>
<source media="(min-width: 650px)" srcset="images/Sawah.jpg">
<source media="(min-width: 450px)" srcset="images/Sawah-sm.jpg">
<img src="images/Sawah.jpg">
</picture>
</p>
</body>
</html>
Hasilnya :
Format File Gambar untuk HTML
| Nama Format | Nama Panjang | Ekstensi |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
| WebP | Web Picture | .webp |
HTML #7 : Text Formating HTML
Text formatting yaitu melakukan pengaturan / konfigurasi pada teks yang akan dijadikan isi dari sebuah halaman web. Pengaturan tersebut akan terlihat secara real, sehingga apa yang diinputkan pada dokumen HTML akan diperlihatkan oleh web browser.
HTML #6 : Heading HTML
Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel.
Cara membuat Heading di HTML
Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.
HTML #5 : Membuat Paragraf
Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.
Minggu, 21 Februari 2021
HTML #4 : Elemen HTML
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.
HTML #3 : Atribut HTML
Pada artikel kali ini kita akan membahas apa itu atribut di HTML. Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perliaku dari elemen.
HTML #2 : Tag pada HTML
Sekarang saya ingin memberikan daftar referensi tag-tag HTML. Dibawah akan disebutkan kegunaan masing-masing tag juga penggunaan tag yang harus di hindari karena sudah tidak lagi disupport HTML5.
HTML #1 : Dasar HTML
Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript dan VBScript.
Peramban internet menerima dokumen HTML dari server web atau dari penyimpanan lokal dan membuat dokumen menjadi halaman web multimedia. HTML menggambarkan struktur halaman web secara semantik dan isyarat awal yang disertakan untuk penampilan dokumen.
Elemen HTML digambarkan oleh tag, ditulis menggunakan tanda kurung sudut. Tag seperti <img /> dan <input /> langsung perkenalkan konten ke dalam halaman. Tag lain seperti <p> mengelilingi dan memberikan informasi tentang teks dokumen dan mungkin menyertakan tag lain sebagai sub-elemen. Peramban tidak menampilkan tag HTML, tetapi menggunakannya untuk menafsirkan konten halaman.
HTML dapat menyematkan program yang ditulis dalam bahasa scripting seperti JavaScript, yang memengaruhi perilaku dan konten halaman web. Dimasukkannya CSS mendefinisikan tampilan dan tata letak konten. World Wide Web Consortium (W3C), mantan pengelola HTML dan pemelihara standar CSS saat ini, telah mendorong penggunaan CSS pada HTML presentasi eksplisit sejak 1997.
Langganan:
Postingan (Atom)
