Selasa, 23 Februari 2021

HTML #13 : Video

By Rado Simarmata   20.24 // No comments


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

By Rado Simarmata   22.48 // No comments

 

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

By Rado Simarmata   22.34 // No comments

 

FORM HTML
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

By Rado Simarmata   22.13 // No comments
 
Tutorial HTML
Dalam HTML, tag list terdiri dari 3 jenis :
  1. Ordered List adalah list yang terurut.
  2. Unordered List adalah list yang tak terurut.
  3. dan Description List adalah list yang berisi definisi.

HTML #8 : Menampilkan Gambar

By Rado Simarmata   04.15 // No comments

 

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 :
Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

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 FormatNama PanjangEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb Picture.webp

HTML #7 : Text Formating HTML

By Rado Simarmata   03.05 // No comments

 

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

By Rado Simarmata   02.29 // No comments

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

By Rado Simarmata   02.01 // No comments

 

Paragraf HTML

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

By Rado Simarmata   23.58 // No comments

 


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

By Rado Simarmata   19.00 // No comments

 

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

By Rado Simarmata   18.25 // No comments

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

By Rado Simarmata   18.22 // No comments

 

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

By Rado Simarmata   17.16 // No comments

 

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:
  1. Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
  2. Inline (kode Javascript ditulis pada atribut HTML)
  3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

Javascript #2 : Membuat program javascript pertama

By Rado Simarmata   16.48 // No comments

 

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:
Simpan file tersebut, lalu buka di folder tempat kita menyimpan index.html
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

By Rado Simarmata   16.26 // No comments

 

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

By Rado Simarmata   01.28 // No comments

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

By Rado Simarmata   00.04 // No comments

 

Pada kesempatan ini kita akan mempelajari tentang variabel dan tipe data pada 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

By Rado Simarmata   23.18 // No comments

 

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 #1 : Pengenalan Python

By Rado Simarmata   20.54 // No comments

 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

By Rado Simarmata   15.56 // No comments

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

By Rado Simarmata   12.23 // No comments



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)