Sabtu, 13 Maret 2021
Selasa, 23 Februari 2021
Javascript #4 : Variabel dan Tipe data
Membuat Variabel
Variable digunakan untuk menyimpan sebuah data. Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci var lalu diikuti dengan nama variabel dan nilainya.
HTML #13 : Video
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 .
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.
Sabtu, 20 Februari 2021
Javascript #3 : Javascript di HTML
Bagaimana Cara Menulis Kode Javascript di HTML?
Pada artikel sebelumnya kita sudah menulis javascript di dalam HTML. Cara tersebut merupakan cara penulisan embeded (ditempel).
Masih ada beberapa cara lagi yang perlu kita ketahui:
Pada artikel sebelumnya kita sudah menulis javascript di dalam HTML. Cara tersebut merupakan cara penulisan embeded (ditempel).
Masih ada beberapa cara lagi yang perlu kita ketahui:
- Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
- Inline (kode Javascript ditulis pada atribut HTML)
- Eksternal (Kode Javascript ditulis terpisah dengan file HTML)
Javascript #2 : Membuat program javascript pertama
Pada artikel kali ini kita akan membuat program pertama menggunakan javascript. Silahkan buka teks editor (saya menggunakan visual studio code), kemudian buat file beru bernama index.html dan isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Hello World!");
</script>
</body>
</html>
maka akan terlihat seperti ini:
Maka hasilnya :
Tadi kita menulis perintah:
console.log("Saya belajar Javascript");
Mengapa tidak ditampilkan?
Karena perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan kesana.
Sekarang coba saja buka console javascript.
Maka kita akan melihat pesan "Saya belajar Javascript"
Javascript #1 : Pengenalan Javascript
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World Wide Web selain HTML dan CSS. JavaScript membantu membuat halaman web interaktif dan merupakan bagian aplikasi web yang esensial.
Kamis, 18 Februari 2021
Cara Install Composer di Windows
Composer adalah dependency manager pada PHP. dependency sendiri jika diartikan ke dalam bahasa indonesia artinya adalah ketergantungan. ketergantungan yang dimaksudkan misalnya project PHP yang kita kerjakan memerlukan beberapa library dari luar.
Silahkan buka link https://getcomposer.org/doc/00-intro.md untuk mendownload composer. Klik pada menu "instalation - windows -> Using the installer".
Setelah download selesai, buka Composer-Setup.exe. File ini akan melakukan instalasi ke sistem windows.
Python #4: Mengenal Variabel dan Tipe Data dalam Python
Pengertian Variabel dan Tipe Data
Variabel merupakan tempat menyimpan data, sedangkan tipe data adalah jenis data yang terseimpan dalam variabel.
Variabel bersifat mutable, artinya nilainya bisa berubah-ubah.
Rabu, 17 Februari 2021
Python #3 : 5 Aturan Penulisan Sintaks Python
Pada artikel ini, saya akan membahas beberapa aturan dasar penulisan sintaks Python yang harus diketahui.
Apa saja aturan-aturannya?
1. Penulisan Statement Python
Statement adalah sebuah intruksi atau kalimat perintah yang akan dieksekusi oleh komputer.
Python #2: Cara Install Python di Windows
Instalasi Python di Windows sangatlah mudah. Kita hanya perlu menginstallnya seperti software umumnya di Windows, next-next-finish.
Python yang akan di instal dalam panduan ini adalah python versi 3. Download di situs resmi python ( python.org).
Python #1 : Pengenalan Python
Apa itu Python?
Python adalah bahasa pemrograman tujuan umum yang ditafsirkan, tingkat tinggi. Dibuat oleh Guido van Rossum dan pertama kali dirilis pada tahun 1991, filosofi desain Python menekankan keterbacaan kode dengan penggunaan spasi putih yang signifikan. Konstruksi bahasanya dan pendekatan berorientasi objek bertujuan untuk membantu pemrogram menulis kode yang jelas dan logis untuk proyek skala kecil dan besar. (Wikipedia)
Python banyak digunakan untuk membuat berbagai macam program, seperti: program CLI, Program GUI (desktop), Aplikasi Mobile, Web, IoT, Game, Program untuk Hacking, dsb.
About Me
Perkenalkan, nama saya Rado HT Simarmata. Kalian bisa panggil saya Rado. Saya lahir di Arga Makmur pada tanggal 27 Oktober .
Blog ini adalah tempat saya mencurahkan segala pemikiran saya dari berbagai peristiwa. Bagaimana saya menghadapinya dan apa saja hikmah yang saya peroleh.
Cara Install LAMP di Ubuntu 16.04
LAMP (Linux, Apache, MySQL, PHP) adalah istilah yang umum digunakan untuk instalasi Apache + MySQL + PHP di Server Linux. Seiring perkembangan software, MySQL kini sudah digantikan dengan MariaDB sehingga istilah LAMP menjadi Linux Apache MariaDB PHP.
Dalam tutorial ini, kami berasumsi bahwa Anda sudah memiliki server Linux Ubuntu 16.04 di PC anda atau di VPS anda.
Langganan:
Postingan (Atom)
