Sabtu, 31 Desember 2016

Belajar HTML : HTML Forms

assalamualaikum wr. wb.

Kali ini postingan saya tentang HTML Form, biasanya digunakan untuk mengisi data.

HTML Forms

contoh form HTML

Sebuah webform, webform atau HTML form di halaman web memungkinkan pengguna untuk memasukkan data yang dikirim ke server untuk diproses. Form dapat menyerupai kertas atau database form karena pengguna web mengisi formulir menggunakan checkbox, tombol radio, atau bidang teks. Misalnya, bentuk dapat digunakan untuk memasukkan pengiriman atau data kartu kredit untuk memesan produk, atau dapat digunakan untuk mengambil hasil pencarian dari mesin pencari.

      Elemen <form> mendefinisikan bentuk yang digunakan untuk mengumpulkan input pengguna :
<form>
.
elemen form
.
</form>
Dalam elemen form HTML terdapat berbagai jenis elemen input, seperti textfields, checkbox, radio button, submit button, dan banyak lagi.

      Elemen <input> adalah elemen bentuk yang paling penting. Elemen <Input> dapat ditampilkan dalam beberapa cara, tergantung pada type atribut. Berikut adalah beberapa contoh type dalam input :

  • <input type = "text"> Mendefinisikan satu baris kolom/field untuk input teks
<form>
Nama depan :<br>
<input type="text" name="namadepan"><br>
Nama belakang :<br>
<input type="text" name="namabelakang">
</form>
Hasil script diatas adalah akan muncul kolom untuk diisi seperti gambar dibawah ini :


input type "text"


  • <input type = "radio"> Mendefinisikan tombol radio (untuk memilih salah satu dari beberapa pilihan)
<form>
<input type="radio" name="gender" value="lakilaki" checked> Laki - laki<br>
<input type="radio" name="gender" value="perempuan"> Perempuan<br>
</form>
Hasil script diatas akan muncul radio button seperti berikut :





  • <input type="checkbox"> Mendefinisikan sebuah checkbox, yaitu beberapa pilihan.
<form>
<input type="checkbox" name="
checkbox1" value="checkbox1"> Checkbox1<br>
<input type="checkbox" name="
checkbox2" value="checkbox2"> Checkbox2</form>


  • <input type = "submit"> Mendefinisikan sebuah tombol submit untuk mengirimkan form


  • <input type="password"> mendefinisikan sebuah kolom untuk mengisikan password

  • <input type="reset"> Mendefinisikan sebuah reset button yang akan mereset semua value yang telah diisi menjadi default.

      Elemen <select> untuk mendefinisikan daftar drop-down. Scriptnya adalah :
<select >
<option value="option1">Option1</option>
<option value="
option2">Option2</option>
<option value="
option3">Option3</option>
<option value="
option3">Option4</option>
</select>

      Elemen <textarea> mendefinisikan field input multi-line (text area). Pada sript dibawah, Atribut rows menentukan jumlah baris dalam area teks. Atribut cols menentukan lebar area teks.
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

      Elemen <button> mendefinisikan tombol. Pada script dibawah ini atribut alert akan memunculkan pesan "Hello World!" saat button diklik.
<button type="button" onclick="alert('Hello World!')">Klik disini!</button>
Sekian postingan saya mengenai HTML Form, mohon maaf jika ada salah-salah kata. Semoga Bermanfaat, Terimakasih.

wassalalmualaikum wr. wb.


Referensi :
- http://www.w3schools.com/

Jumat, 30 Desember 2016

Belajar HTML : HTML Iframe

assalamualaikum wr. wb.

Apa kabar semuanya ? Semoga kita semua senantiasa diberi kesehatan, aamiin. Pada kesempatan kali ini saya akan posting tentang HTML Iframe. Apa itu HTML Iframe ? Langsung saja.

HTML Iframe
Iframe digunakan untuk menampilkan halaman web dalam halaman web.


  • Sintaks iframe
HTML Iframe didefinisikan dengan tag <iframe> :

<iframe src="URL"></iframe>

Atribut src menentukan URL (alamat web) dari halaman frame inline.

  • Mengatur Tinggi dan Lebar Iframe
Gunakan atribut height dan width untuk menentukan ukuran iframe. Nilai atribut secara default ditentukan dalam pixel, tetapi juga bisa dalam persen (seperti "80%").

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

  • Hapus Perbatasan / Border Iframe
Secara default, iframe memiliki perbatasan / border di sekitarnya. Untuk menghapus perbatasan, tambahkan gaya atribut dan menggunakan CSS border properti :

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

Dengan CSS, Anda juga dapat mengubah ukuran, gaya dan warna perbatasan / border iframe :

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

  • Iframe Sebagai Target sebuah Link
Iframe dapat digunakan sebagai target bingkai untuk link. Atribut target link harus mengacu pada nama atribut iframe :

<iframe src="http://vika-skansa.blogspot.co.id/" name="iframe_a"></iframe>
<p> <a href="http://vika-skansa.blogspot.co.id/" target="http://vika-skansa.blogspot.co.id/"> vika-skansa.blogspot.co.id </a> </p>



Sekian yang dapat saya postingkan, semoga dapat memberikan manfaat bagi kita semua, see you next time...

wassalamualaikum wr. wb.


Referensi :
- http://www.w3schools.com/html/html_iframe.asp

Konsep Dasar Jaringan

assalamualaikum wr. wb.

Kali ini postingan saya mengenai Konsep Dasar Jaringan. Semoga bermanfaat.

Latar Belakang
Semua siswa jurusan IT diharapkan mengetahui tentang jaringan, entah itu TKJ, RPL, Multimedia dan lain-lain. Karena dasar dari sebuah IT adalah jaringan dalam komputer.

Tujuan
Agar lebih memahami tentang jaringan, karena dalam dunia IT jaringan sangat dipentingkan.


A. Jaringan Komputer



Jaringan komputer (jaringan) adalah jaringan telekomunikasi yang memungkinkan antar komputer untuk saling bertukar data. Tujuan dari jaringan komputer adalah agar dapat mencapai tujuannya, setiap bagian dari jaringan komputer dapat meminta dan memberikan layanan (service). Pihak yang meminta/menerima layanan disebut klien (client) dan yang memberikan/mengirim layanan disebut peladen (server). Desain ini disebut dengan sistem client-server, dan digunakan pada hampir seluruh aplikasi jaringan komputer.

Dua buah komputer yang masing-masing memiliki sebuah kartu jaringan, kemudian dihubungkan melalui kabel maupun nirkabel sebagai medium transmisi data, dan terdapat perangkat lunak sistem operasi jaringan akan membentuk sebuah jaringan komputer yang sederhana. Apabila ingin membuat jaringan komputer yang lebih luas lagi jangkauannya, maka diperlukan peralatan tambahan seperti Hub, Bridge, Switch, Router, Gateway sebagai peralatan interkoneksinya.


B. Pengertian Bandwidth
Bandwidth adalah luas atau lebar cakupan frekuensi yang digunakan oleh sinyal dalam medium transmisi. Dalam kerangka ini, Bandwidth dapat diartikan sebagai perbedaan antara komponen sinyal frekuensi tinggi dan sinyal frekuensi rendah. frekuensi sinyal diukur dalam satuan Hertz. sinyal suara tipikal mempunyai Bandwidth sekitar 3 kHz, analog TV broadcast (TV) mempunyai Bandwidth sekitar 6 MHz.

Bandwidth (lebarpita) dalam ilmu computer adalah suatu penghitungan konsumsi data yang tersedia pada suatu telekomunikasi. Dihitung dalam satuan bits per seconds (bit per detik). Perhatikan bahwa bandwidth yang tertera komunikasi nirkabel, modem transmisi data, komunikasi digital, elektronik, dll, adalah bandwidth yang mengacu pada sinyal analog yang diukur dalam satuan hertz (makna asli dari istilah tersebut) yang lebih tepat ditulis bitrate daripada bits per second.

Dalam dunia web hosting, bandwidth capacity (kapasitas lebarpita) diartikan sebagai nilai maksimum besaran transfer data (tulisan, gambar, video, suara, dan lainnya) yang terjadi antara server hosting dengan komputer klien dalam suatu periode tertentu. Contohnya 5 GB per bulan, yang artinya besaran maksimal transfer data yang bisa dilakukan oleh seluruh klien adalah 5 GB, jika bandwidth habis maka website tidak dapat dibuka sampai dengan bulan baru. Semakin banyak fitur di dalam website seperti gambar, video, suara, dan lainnya, maka semakin banyak bandwidth yang akan terpakai.

C. IP Address
Alamat IP (Internet Protocol Address atau sering disingkat IP) adalah deretan angka biner antara 32 bit sampai 128 bit yang dipakai sebagai alamat identifikasi untuk tiap komputer host dalam jaringan Internet. Panjang dari angka ini adalah 32 bit (untuk IPv4 atau IP versi 4), dan 128 bit (untuk IPv6 atau IP versi 6) yang menunjukkan alamat dari komputer tersebut pada jaringan Internet berbasis TCP/IP.
Sistem pengalamatan IP ini terbagi menjadi dua, yakni:
  1. IP versi 4 (IPv4)
  2. IP versi 6 (IPv6)


Ada dua macam IP Address, yaitu :
  • Public IP Address
IP Address yang dapat diakses di jaringan internet.
Kita bisa mendapatkan Public IP Address dari:
- Dipinjami dari ISP
- Alokasi dari APNIC/IDNIC (www.idnic.net)

  • Private IP Address
IP Address yang diperuntukkan untuk jaringan lokal (tidak dapat diakses di jaringan internet).
Kelas A 10.0.0.0 – 10.255.255.255 (10./8)
Kelas B 172.16.0.0 – 172.31.255.255 (172.16./12)
Kelas C 192.168.0.0 – 192.168.255.255 (192.168./16)

D. TCP/IP
Suit protokol internet merupakan model jaringan komputer dan rangkaian protokol komunikasi yang digunakan di internet dan jaringan komputer yang mirip. Ia dikenal dengan TCP/IP (singkatan dari Transmission Control Protocol/Internet Protocol) yang diterjemahkan menjadi Protokol Kendali Transmisi/Protokol Internet, yang merupakan gabungan dari protokol TCP (Transmission Control Protocol) dan IP (Internet Protocol) sebagai sekelompok protokol yang mengatur komunikasi data dalam proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan internet yang akan memastikan pengiriman data sampai ke alamat yang dituju. Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa kumpulan protokol (protocol suite). Protokol ini juga merupakan protokol yang paling banyak digunakan saat ini, karena protokol ini mampu bekerja dan diterapkan pada lintas perangkat lunak dalam berbagai sistem operasi Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack.


E. Layer OSI


Model referensi jaringan terbuka OSI atau OSI Reference Model for open networking adalah sebuah model arsitektural jaringan yang dikembangkan oleh badan International Organization for Standardization (ISO) di Eropa pada tahun 1977. OSI sendiri merupakan singkatan dari Open System Interconnection. Model ini disebut juga dengan model "Model tujuh lapis OSI" (OSI seven layer model).

Sebelum munculnya model referensi OSI, sistem jaringan komputer sangat tergantung kepada pemasok (vendor). OSI berupaya membentuk standar umum jaringan komputer untuk menunjang interoperatibilitas antar pemasok yang berbeda. Dalam suatu jaringan yang besar biasanya terdapat banyak protokol jaringan yang berbeda. Tidak adanya suatu protokol yang sama, membuat banyak perangkat tidak bisa saling berkomunikasi.

Fungsi masing masing layer pada OSI :
7 - Application layer
Berfungsi sebagai antarmuka dengan aplikasi dengan fungsionalitas jaringan, mengatur bagaimana aplikasi dapat mengakses jaringan, dan kemudian membuat pesan-pesan kesalahan. Protokol yang berada dalam lapisan ini adalah HTTP, FTP, SMTP, dan NFS.
6 - Presentation layer
Berfungsi untuk mentranslasikan data yang hendak ditransmisikan oleh aplikasi ke dalam format yang dapat ditransmisikan melalui jaringan. Protokol yang berada dalam level ini adalah perangkat lunak redirektor (redirector software), seperti layanan Workstation (dalam Windows NT) dan juga Network shell (semacam Virtual Network Computing (VNC) atau Remote Desktop Protocol (RDP)).
5 - Session layer
Berfungsi untuk mendefinisikan bagaimana koneksi dapat dibuat, dipelihara, atau dihancurkan. Selain itu, di level ini juga dilakukan resolusi nama.
4 - Transport layer
Berfungsi untuk memecah data ke dalam paket-paket data serta memberikan nomor urut ke paket-paket tersebut sehingga dapat disusun kembali pada sisi tujuan setelah diterima. Selain itu, pada level ini juga membuat sebuah tanda bahwa paket diterima dengan sukses (acknowledgement), dan mentransmisikan ulang terhadp paket-paket yang hilang di tengah jalan.
3 - Network layer
Berfungsi untuk mendefinisikan alamat-alamat IP, membuat header untuk paket-paket, dan kemudian melakukan routing melalui internetworking dengan menggunakan router dan switch layer-3.
2 - Data-link layer
Befungsi untuk menentukan bagaimana bit-bit data dikelompokkan menjadi format yang disebut sebagai frame. Selain itu, pada level ini terjadi koreksi kesalahan, flow control, pengalamatan perangkat keras (seperti halnya Media Access Control Address (MAC Address)), dan menetukan bagaimana perangkat-perangkat jaringan seperti hub, bridge, repeater, dan switch layer 2 beroperasi. Spesifikasi IEEE 802, membagi level ini menjadi dua level anak, yaitu lapisan Logical Link Control (LLC) dan lapisan Media Access Control (MAC).
1 - Physical layer
Berfungsi untuk mendefinisikan media transmisi jaringan, metode pensinyalan, sinkronisasi bit, arsitektur jaringan (seperti halnya Ethernet atau Token Ring), topologi jaringan dan pengabelan. Selain itu, level ini juga mendefinisikan bagaimana Network Interface Card (NIC) dapat berinteraksi dengan media kabel atau radio.

Sekian, semoga bermanfaat. Terimakasih

wassalamualaikum wr. wb.

Referensi :
- https://id.wikipedia.org/wiki/Jaringan_komputer
- https://id.wikipedia.org/wiki/Lebar_pita
- https://id.wikipedia.org/wiki/Alamat_IP
- https://id.wikipedia.org/wiki/Model_OSI
- https://id.wikipedia.org/wiki/Transmission_Control_Protocol
- https://id.wikipedia.org/wiki/Suit_protokol_internet


Kamis, 29 Desember 2016

Internet

assalamualaikum wr. wb.

Di postingan kali ini kita akan mempelajari tentang Internet, karena banyak dari kita yang sering bahkan setiap hari menggunakan internet namun mengetahui banyak hal tentang internet itu sendiri. Oke langsung saja..

INTERNET


Latar Belakang
Saat ini semua orang mempergunakan internet untuk saling berkomunikasi dari satu tempat ke tempat lain. Tidak sedikit pula dari para pebisnis saling berlomba mendapatkan konsumen dengan internet. Semakin hari semakin banyak orang yang menggunakan internet.

Tujuan
Tujuan dari mempelajari internet adalah agar kita tahu mendalam tentang internet serta supaya kita lebih bijak dalam mempergunakan internet, karena tidak hanya hal positif yang ada dalam internet, melainkan juga hal-hal negatif.

Pengertian Internet
Internet (kependekan dari interconnection-networking) adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global Transmission Control Protocol/Internet Protocol Suite (TCP/IP) sebagai protokol pertukaran paket (packet switching communication protocol) untuk melayani miliaran pengguna di seluruh dunia. Rangkaian internet yang terbesar dinamakan Internet. Cara menghubungkan rangkaian dengan kaidah ini dinamakan internetworking ("antarjaringan").

Sejarah Internet
Internet merupakan jaringan komputer yang dibentuk oleh Departemen Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut ARPANET (Advanced Research Project Agency Network), di mana mereka mendemonstrasikan bagaimana dengan hardware dan software komputer yang berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak terhingga melalui saluran telepon.

Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol/Internet Protocol).

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada saat itu Departemen Pertahanan Amerika Serikat (US Department of Defense) membuat sistem jaringan komputer yang tersebar dengan menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat, yang apabila terjadi perang dapat mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford Research Institute, University of California, Santa Barbara, University of Utah, di mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara tersebut ingin bergabung, sehingga membuat ARPANET kesulitan untuk mengaturnya.

Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan non-militer seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi Internet.

Budaya Internet
Jumlah pengguna Internet yang besar dan semakin berkembang, telah mewujudkan budaya Internet. Internet juga mempunyai pengaruh yang besar atas ilmu, dan pandangan dunia. Dengan hanya berpandukan mesin pencari seperti Google, pengguna di seluruh dunia mempunyai akses Internet yang mudah atas bermacam-macam informasi. Dibanding dengan buku dan perpustakaan, Internet melambangkan penyebaran (decentralization) / pengetahuan (knowledge) informasi dan data secara ekstrem.

Perkembangan Internet juga telah memengaruhi perkembangan ekonomi. Berbagai transaksi jual beli yang sebelumnya hanya bisa dilakukan dengan cara tatap muka (dan sebagian sangat kecil melalui pos atau telepon), kini sangat mudah dan sering dilakukan melalui Internet. Transaksi melalui Internet ini dikenal dengan nama e-commerce.

Terkait dengan pemerintahan, Internet juga memicu tumbuhnya transparansi pelaksanaan pemerintahan melalui e-government seperti di kabupaten Sragen yang mana ternyata berhasil memberikan peningkatan pemasukan daerah dengan memanfaatkan Internet untuk transparansi pengelolaan dana masyarakat dan pemangkasan jalur birokrasi, sehingga warga di daerah terebut sangat di untungkan demikian para pegawai negeri sipil dapat pula di tingkatkan kesejahterannya karena pemasukan daerah meningkat tajam.

Manfaat Internet
1. Menambah Wawasan
Dengan tersedianya milyaran informasi yang ada di internet, Anda hanya perlu mencari nya saja. Hanya dengan mengetik beberapa kata pun, informasi yang Anda inginkan sudah bisa didapatkan.

2. Lebih Efisien
Tak perlu membeli koran, tak perlu berlama-lama menunggu informasi yang Anda mau di TV. Dengan internet, informasi apapun bisa langsung Anda dapatkan. Jadi, dapat dibuktikan bahwa internet bukan hanya media yang murah, tetapi juga sangat efisien.

3. Memudahkan Komunikasi
Di era yang semakin canggih ini, berkomunikasi tak perlu lagi menggunakan surat, melainkan menggunakan fasilitas digital yang tersedia saat ini, seperti halnya di internet. Internet mampu berperan sebagai media komunikasi kita dengan orang lain, contohnya Anda bisa mengirimkan tulisan rasa rindu kepada kawan Anda melalui social media yang bagus, seperti Google+.

4. Meningkatkan Penguasaan Bahasa Asing
Bisa menggunakan bahasa asing adalah sesuatu yang sangat membanggakan, terlebih lagi berbicara mengenai bahasa Inggris. Bahasa yang satu ini merupakan bahasa internasional yang sebetulnya wajib kita kuasai sebagai bekal untuk bekerja nantinya, terlebih lagi jika Anda ingin bekerja di luar negeri. Di internet sendiri memang sangat banyak informasi yang disajikan dalam bentuk bahasa Inggris. Selain itu Anda juga bisa belajar bahasa Inggris maupun bahasa asing lainnya dengan menerjemahkan kata atau kalimat di Google Translate.

5. Mendorong Kemandirian
Tahukah Anda, orang yang sudah fasih menggunakan internet biasanya cenderung bisa lebih mandiri dalam mencari sebuah informasi yang dibutuhkan olehnya. Karena dirinya mempunyai rasa keingintahuan yang tinggi, sehingga jika ia penasaran bisa mencarinya di internet. Sehingga terciptalah karakter kemandirian, karena terbiasa insiatif sendiri mencari informasi.

6. Sarana Pendidikan Jarak Jauh
Internet sebagai perpustakaan online dan kemampuannya dalam membangun komunikasi yang interaktif memungkinkan setiap orang melakukan pendidikan jarak jauh. Artinya, seorang guru atau dosen dengan siswa atau mahasiswa tidak harus berada di satu tempat, melainkan bisa di tempat yang berbeda walaupun jauh. Mengapa bisa? Karena siswa bisa mengakses website yang telah sekolah buat, lalu siswa mengikuti proses pendidikan di depan komputernya, bisa kapan saja, bahkan hingga 24 jam.

7. Sebagai Sarana Hiburan
Berbicara mengenai hiburan, sebenarnya sebuah hiburan bisa didapatkan bukan hanya di dunia nyata saja, di dunia maya pun bisa. Di internet, Anda bisa mendapatkan hiburan sesuai yang Anda mau, misalnya menonton sebuah video lucu, gambar yang menghibur, bermain game secara online, menyegarkan pikiran dengan mencari informasi menghibur, dan lain-lain.

8. Memudahkan Pekerjaan
Pekerjaan yang sebelumnya terasa berat bisa menjadi ringan karena hadirnya internet. Contoh, jika Anda diperintahkan oleh direktur untuk memberikan sebuah data ke kantor lain, dan hal ini bisa dilakukan dengan memanfaatkan surat elektronik di dunia maya atau biasa disebut dengan Email.

9. Untuk Menjalankan Bisnis
Bisnis yang dijalankan di internet disebut oleh kebanyak orang dengan bisnis online. Ya, bisnis online kini tengah populer dan sudah sangat banyak yang menjalaninya dari seluruh penjuru dunia. Bagusnya bisnis online adalah kita hanya duduk di depan laptop atau komputer saja sambil menjalankan bisnis, jadi tentunya sangat hemat tenaga dan bahkan hasilnya bisa lebih besar dibanding bekerja di dunia nyata.

10. Bisa Untuk Berbelanja
Jika Anda suatu hari sedang malas untuk keluar rumah, ataupun sekedar ingin mencari pengalaman baru berbelanja. Belanja online adalah pilihan yang tepat, meski begitu Anda harus berhati-hati, perhatikan apakah penjualnya terpercaya dan barangnya terbukti berkualitas. Jadi begitu mudahnya belanja online, caranya Anda hanya perlu memesan sesuai dengan format yang telah ditentukan penjual, harga cocok, kirim uang, barang terkirim sampai di rumah Anda. Namun memang untuk berbelanja secara online Anda harus cerdas dalam memilah-milah mana toko online yang terpercaya.

Internet di Indonesia
Internet di Indonesia adalah media komunikasi yang relatif baru di Indonesia, negara kepulauan yang membentang hingga lebih dari 17.001 pulau. Beberapa layanan Internet yang tersedia di Indonesia, mulai dari ADSL ke mobile Internet. Saluran telepon layanan berbasis Internet merupakan salah satu layanan Internet pertama di Indonesia dengan PT Telkom sebagai pemain utama yang mengendalikan jaringan saluran telepon tetap.

Sekian postingan kali ini, terimakasih.

wassalamualaikum wr. wb.

Referensi :
- https://id.wikipedia.org/wiki/Internet
- https://id.wikipedia.org/wiki/Internet_di_Indonesia
- http://www.skipnesia.com/2014/06/10-manfaat-internet-secara-umum.html

Rabu, 28 Desember 2016

Belajar HTML : HTML Blok dan HTML Class

 
assalamualaikum wr.wb.

Apa kabar semua ? Semoga kita selalu dalam keadaan sehat, aamiin. Kali ini saya mau berbagi mengenai HTML Blok dan Class.

HTML Blok
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemenya. Tampilan nilai default untuk kebanyakan unsur adalah blok atau inline.
  • Elemen blok-tingkat
Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).
Contoh elemen blok-tingkat :
- <Div>
- <h1> - <h6>
- <P>
- <Form

  • Inline Elements
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.
Contoh elemen inline :
- <Span>
- <a>
- <Img>


Elemen <div>
Contoh script dan hasilnya :

script yang ditulis

hasilnya

Elemen <span>
Contoh script dan hasilnya :

script yang ditulis

hasilnya

HTML Kelas
Atribut HTML class memungkinkan untuk menentukan gaya yang sama untuk elemen dengan nama kelas yang sama.
Kita akan mencoba dua unsur <div> yang menunjuk ke nama kelas yang sama, tuliskan script berikut :



Dari script diatas akan muncul tampilan di web browser seperti gambar di bawah ini.


Atribut class HTML juga dapat digunakan untuk elemen inline.
Script yang dituliskan:


 Hasilnya seperti gambar di bawah ini.


Sekian yang dapat saya postingkan hari ini. Terimakasih, semoga bermanfaat.

wassalamualaikum wr. wb.

Referensi : 
- http://www.w3schools.com/html/html_classes.asp


Selasa, 27 Desember 2016

Belajar HTML : HTML CSS

assalamualaikum wr. wb.

Postingan hari ini tentang menggabungkan HTML dengan CSS, langsung saja...

Styling HTML dengan CSS
CSS singkatan dari Cascading Style Sheets.
CSS menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar atau media lainnya.
CSS menghemat banyak pekerjaan. Hal ini dapat mengontrol tata letak halaman web beberapa sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
  • Inline - dengan menggunakan atribut style dalam elemen HTML
  • Internal - dengan menggunakan elemen <style> dalam <head>
  • Eksternal - dengan menggunakan file CSS eksternal

Inline CSS
Inline CSS digunakan untuk menerapkan gaya unik untuk elemen HTML.
Sebuah CSS inline menggunakan atribut gaya elemen HTML.
Contoh ini menetapkan warna teks elemen <h1> adalah biru :

<h1 style="color:blue;">This is a Blue Heading</h1>
 
CSS internal
Sebuah CSS internal digunakan untuk menentukan gaya untuk halaman HTML.
Sebuah CSS internal didefinisikan dalam <head> halaman HTML, dalam elemen <style> :

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS eksternal
Style sheet eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.
Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file saja.
Untuk menggunakan style sheet eksternal, menambahkan link ke dalam <head> dari halaman HTML:
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Style sheet eksternal dapat ditulis dalam editor teks, file tidak harus berisi kode HTML, dan harus disimpan dengan ekstensi .css.
Berikut adalah bagaimana "styles.css" terlihat:
body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}
CSS Font
CSS color properti mendefinisikan warna teks yang akan digunakan.
CSS font-family properti mendefinisikan font yang akan digunakan.
CSS font-size properti mendefinisikan ukuran teks yang akan digunakan.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS Border
CSS border properti mendefinisikan perbatasan sekitar elemen HTML :

p {
    border: 1px solid powderblue;
}



CSS Padding
CSS Padding properti mendefinisikan padding (spasi) antara teks dan perbatasan :

p {
    border: 1px solid powderblue;
    padding: 30px;
}


CSS Margin
CSS margin properti mendefinisikan margin (ruang) di luar perbatasan:

p {
    border: 1px solid powderblue;
    margin: 50px;
}


Sekian postingan kali ini mengenai penggabungan HTML dengan CSS, silahkan dicoba semoga bermanfaat.


wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/html/html_css.asp

Senin, 26 Desember 2016

Belajar HTML : List HTML

assalamualaikum wr. wb.

Kali ini saya posting tentang cara membuat list pada html. List HTML dapat digunakan dalam membuat daftar pada halaman website.
HTML List terdiri dari 2 macam yaitu :
Unordered List,
  • barang
  • barang
  • barang
  • barang

Ordered List,
  1. Item pertama
  2. Item kedua
  3. Item ketiga
  4. Item keempat
Unordered List HTML
Unordered list dimulai dengan tag <ul>. Setiap item list dimulai dengan tag <li>. List item akan ditandai dengan peluru (lingkaran hitam kecil) secara default.

<ul>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>


Terdapat beberapa type list lainnya, yaitu
  • Disc
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 


  • Lingkaran
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


  • Persegi
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


  • Tidak ada
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>



Ordered List HTML
Ordered list dimulai dengan tag <ol>. Setiap item list dimulai dengan tag <li>.
List item akan ditandai dengan nomor secara default.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


Beberapa type untuk Ordered List HTML, yaitu
  • Type="1"
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


  • Type="A"
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


  • Type="a"
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


  • Type="I"
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


  • Type="i"
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>



List HTML Bersarang
List dapat bersarang, maksudnya ada list di dalam list. Contoh :

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
     <li>Black tea</li>
     <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>




Sekian postingan saya, terimakasih kepada yang sudah mau mampir.

wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/html/html_lists.asp

Sabtu, 24 Desember 2016

Belajar HTML : Membuat Tabel



assalamualaikum wr. wb.
Kali ini kita akan belajar tentang cara membuat tabel dalam HTML.

Tujuan
Mengetahui bagaimana membuat tabel dalam HTML serta formatnya.

Tabel HTML didefinisikan dengan tag <table>. Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header dari tabel didefinisikan dengan tag <th>. Sebuah data/sel tabel didefinisikan dengan tag <td>.
Contoh membuat tabel :

<table style="width:100%">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1234</td>
<td>Vika Tafrichana</td>
<td>XI RPL 1</td> 
</tr>
<tr>
<td>1235</td>
<td>Risa Nurhaeni</td>
<td>XI RPL 1</td> 
</tr>
<tr>
<td>1236</td>
<td>Prastiana rahayu</td>
<td>XI RPL 1</td> 
</tr>
<tr>
<td>1237</td>
<td>Dian Putriana</td>
<td>XI RPL 1</td> 
</tr>
</table>

Script diatas merupakan contoh tabel sederhana, silahkan mencoba. Untuk selanjutnya adalah menambahkan sebuah border pada tabel.

<html>
<head>
<style>
table, th,td {
border: 1px solid black;
}
</style>
 </head>
<body>
<table style="width:100%">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1234</td>
<td>Vika Tafrichana</td>
<td>XI RPL 1</td> 
</tr>
</table> 
</body>
</html>

Selanjutnya adalah script membuat collapse border pada tabel. Untuk membuat collapse border silahkan ditambahkan script berikut pada bagian style-nya.

<style>
table, th,td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Menambahkan Sel padding, yaitu untuk menentukan jarak antara isi sel dan perbatasannya. Untuk mengatur padding, gunakan properti CSS padding berikut di dalam style :

th,td {
padding: 10px;
}

Menambahkan text-align pada tabel, misalnya untuk membuat judul pada tabel menjadi rata kiri, ditambahkan script pada style :

th {
text-align: left;
}

Menambahkan border-spacing pada tabel, yaitu :

table {
border-spacing: 5px;
}

Membuat colspan pada tabel :

<table style="width:100%">
<tr>
<th>Nama</th>
 <th colspan="2">Telepon</th>
 </tr>
 <tr>
 <td>Vika</td>
 <td>89768856</td>
 <td>23674567</td>
 </tr>
</table>

Membuat rowspan pada tabel :

<table style="width:100%">
<tr>
<th>Nama :</th>
<td>Vika</td>
</tr>
<tr>
<th rowspan="2">Telepone:</th>
<td>
89768856</td>
</tr>
<tr>
<td>
23674567</td>
</tr>
</table>

Menambahkan caption di atas tabel :

<table style="width:100%">
<caption>Data Siswa</caption>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Vika</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>Risa</td>
<td>XI RPL 1</td>
</tr>
</table>


Anda juga bisa menambahkan format untuk tabel misalnya mengganti warna background tabel, kolom atau baris, dengan menulisnya di bagian dalam style.


Sekian postingan saya kali ini, terimakasih. Semoga bermanfaat..

wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/html/html_tables.asp

Jumat, 23 Desember 2016

Belajar HTML - Part 3 : Styles dan Format HTML

Postingan kali ini tentang Styles dan Format HTML, apa saja style dan format yang dapat kita lakukan dalam web HTML kita??? Langsung saja...

Saya posting blog ini agar kita dapat belajar bersama-sama tentang HTML dasar. Bagaimana cara membuat halaman HTML yang baik dan bagus.

Styles HTML

1. Background Color (Warna Latar Belakang)
Properti background-color mendefinisikan warna latar belakang untuk elemen HTML. Contoh dibawah ini menerapkan warna background lightgreen untuk halaman :

<body style="background-color:lightgreen;">
<h1>Ini adalah heading</h1>
<p>Ini adalah paragraf</p></body>



2. Text Color (Warna Teks)
Properti color mendefinisikanwarna teks untuk elemen HTML. Contoh :

<h1 style="color:blue;">Ini adalah heading</h1>
<p style="color:red;">Ini adalah paragraf</p>
3. Font (Jenis Huruf)
font-family mendefinisikan font yang akan digunakan untuk elemen HTML. Contoh :
<h1 style="font-family:verdana;">Ini adalah heading</h1>
<p style="font-family:courier;">
Ini adalah paragraf</p>
4. Text Size (Ukuran Teks)
font-size mendefinisikan ukuran teks untuk elemen HTML. Contoh :
<h1 style="font-size:300%;">Ini adalah heading</h1>
<p style="font-size:160%;">
Ini adalah paragraf</p>
5. Text Alignment
text-align mendefinisikan perataan teks horisontal untuk elemen HTML. Contoh

<h1 style="text-align:center;">Header rata tengah</h1>
<h1 style="text-align:left;">Header rata kiri</h1>
<h1 style="text-align:right;">Header rata kanan</h1>
<h1 style="text-align:justify;">Header rata kanan-kiri</h1>

 

HTML Text Formating

Format-format yang dirancang untuk menampilkan jenis huruf dari teks :
  • <b>...</b> - mendefinisikan text bold
  • <strong>...</strong> - mendefinisikan teks kuat
  • <i>...</i> - mendefinisikan teks miring
  • <em>...</em> - mendefinisikan teks ditekankan
  • <mark>...</mark> - mendefinisikan teks ditandai
  • <small>...</small> - mendefinisikan teks kecil
  • <del>...</del> - mendefinisikan teks dihapus
  • <ins>...<ins> - mendefinisikan teks dimasukkan
  • <sub>...</sub> - mendefinisikan teks subscript
  • <sup>...</sup> - mendefinisikan teks superscript
Terimakasih, semoga bermanfaat,
wassalamualaikum wr. wb.


Referensi : 

Kamis, 22 Desember 2016

Belajar HTML Dasar - Part2 : Tag dan Elemen HTML

Tag dan Elemen HTML




assalamualaikum wr. wb.

Kita bertemu kembali, waktu lalu saya posting tentang mengenal HTML klik disini. Sekarang kita akan belajar tentang tag-tag yang ada dalam HTML serta elemen HTML...

Tag HTML
Beberapa contoh tag yang terdapat dalam dokumen HTML adalah heading, paragraf, link dan image.

1. Tag heading
Tag heading umumnya digunakan untuk membuat header pada halaman website. Tag untuk heading terdiri dari tag <h1> sampai dengan tag <h6>. Untuk contoh heading dapat dituliskan dengan kode HTML berikut ini :

<html>
<head>
<title>Tag Heading</title>
</head>
<body>
<h1>Ini adalah Heading 1</h1>
<h2>Ini adalah Heading 2</h2>
<h3>Ini adalah Heading 3</h3>
<h4>Ini adalah Heading 4</h4>
<h5>Ini adalah Heading 5</h5>
<h6>Ini adalah Heading 6</h6>
</body>
</html>





2. Tag Paragraf
Digunakan untuk membuat teks dalam sebuah paragraf pada dokumen HTML dengan tag <p> yang merupakan tag pembuka dan diakhiri dengan tag penutup </p>. Untuk contoh membuat tag paragraf dapat dituliskan dengan kode HTML berikut ini :


<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>
<p>Ini merupakan contoh paragraf pertama HTML dari sebuah halaman web</p>
<p>Dan ini merupakan contoh paragraf lain HTML dalam sebuah halaman web. Dapat juga ditambahkan dengan beberapa kalimat lain. Satu paragraf terdiri satu atau lebih kalimat.</p>
</body>
</html>



3. Tag Link
Hyperlink atau link (tautan) adalah sebuah teks atau gambar yang jika di klik akan membuat browser membuka halaman HTML lain. Jika sebuah link ditunjuk dengan mouse, biasanya kursor akan berubah menjadi bentuk menyerupai tangan kecil. Untuk membuat link digunakan tag pembuka <a> dan tag penutupnya </a>. Untuk contoh heading dapat dituliskan dengan kode HTML berikut ini :


 <html>
<head>
<title>Tag Link</title>
</head>
<body>
Contoh link = <a href="http://vika-skansa.blogspot.co.id/">Ini adalah link</a>
</body>
</html>


Tujuan link ditentukan dalam atribut href.




4. Tag image
Selain bisa menampilkan teks, dokumen HTML bisa juga untuk menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag <img>. Untuk contoh image dapat dituliskan dengan kode HTML berikut ini :


<html>
<head>
<title>Tag Image</title>
</head>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"><br>
Sumber dari w3school
</body>
</html>


Sumber W3Schools






 

Elemen HTML
Sebuah elemen HTML terdiri dari tag pembuka dan tag penutup, dengan konten yang dimasukkan diantara kedua tag tersebut.

<Tagname> Isi konten </tagname>

Elemen HTML Bersarang
Semua dokumen HTML terdiri dari elemen bersarang. Contoh dibawah ini mempunyai empat elemen HTML :


<html>
<body>
<h1>Ini adalah konten Heading</h1>
<p>Ini adalah konten Paragraf</p>
</body>
</html>

Keterangan :

1. <html>
Elemen <html> mendefinisikan seluruh dokumen.
Memiliki tag pembuka <html> dan tag penutup </html>.
Unsur kontennya adalah elemen HTML <body>.

2. <body>
Elemen <body> mendefinisikan tubuh / bagian dokumen.
Memiliki tag pembuka <body> dan tag penutup </body>.
Unsur kontennya adalah dua HTML lain yaitu <h1> dan <p>.

3. <h1>
Elemen <h1> mendefinisikan heading.
Memiliki tag pembuka <h1> dan tag penutup </h1>.
Unsur kontennya adalah "Ini adalah konten Heading".

4. <p>
Elemen <p> mendefinisikan paragraf.
Memiliki tag pembuka <p> dan tag penutup </p>.
Unsur kontennya adalah "Ini adalah konten Paragraf".

Sumber W3School



Referensi :
- http://kuliah.imadewira.com/belajar-html-dasar-dasar-html/
- http://www.w3schools.com/