Belajar HTML : Cara Membuat Form di HTML

Yah, Kali ini saya akan mengajak kalian sekaligus pengingat untuk penulis sendiri tentang Code Membuat Form di HTML.
Di Internet, Form digunakan untuk memasukan data-data tertentu untuk disimpan, diolah ataupun diubah menjadi data dalam bentuk data yang lain, seperti Form Pendaftaran pada Facebook yang mana data yang dimasukan dalam Form tersebut akan diolah, disimpan lalu ditampilkan kembali. Sama seperti halnya Form yang akan kita pelajari sekarang, oke langsung saja ke T…..K…..P..!

Cara Membuat Form di HTML

Sebelum memulai, alangkah baiknya saya beritahukan dulu element/tag dasar dari Form ini, yaitu .

adalah tag dasar dari Form di HTML, yang kemudian akan ada tag  diantara , yang akan menjadi tempat dari element-element form nantinya adalah >input<

1.Oke, yang pertama adalah jenis type TEXT, type ini adalah type tempat kita memasukan data berupa text yang akan kita ketik sendiri, contohnya sebagai berikut :

   

dari kode diatas, terlihat beberapa element, seperti Type, Name dan Value, Type adalah element yang menentukan type apakah Form Input kali ini, Name digunakan untuk menentukan dimana isi dari input type ini akan digunakan dan Value adalah kata yang akan muncul saat Form di HTML ini dieksekusi atau dijalankan di browser.

Contoh Form Type Text di HTML

2.Yang kedua adalah jenis type Radio, Radio adalah type input yang digunakan untuk memilih 1 pilihan yang kita sediakan, seperti misalnya jenis kelamin, apakah akan diisi dengan Laki-laki atau Perempuan, berikut contohnya :

Jenis Kelamin

    Pria
    Wanita

terlihat sedikit perbedaan dari type Text, untuk type sama seperti yang pertama, yaitu untuk menentukan jenis Inputnya, Name untuk menentukan dimana akan digunakannya dan Value adalah isi dari input tersebut. Jika kita ingin menambahkan pilihannya, kita harus membuat nya lagi.

Contoh Form Type Radio di HTML

3.Selanjutnya adalah CheckBox, Type ini adalah type yang mengizinkan kita memilih lebih dari 1 pilihan, berbeda dengan type Radio yang hanya membolehkan 1 pilihan, type input ini digunakan seperti pada pilihan Hobi yang mana kita dapat memilih lebih dari 1 Hobi, ini dia contohnya :

Hobi :

    Lari
    Renang

sepertinya saya tidak perlu lagi menjelaskan Type, Name dan Valuenya, input type ini juga dapat di tambah dengan menambahkan nya. owh iya, saya hampir lupa, tanda “_” (Garis Bawah) yang ada didalam value hanyalah pemisah antara 1 kata dengan kata yang lain, karena jika digunakan spasi, maka hasilnya tidak akan berjalan, bisa juga menggunakan penghubung yang lain, seperti “-” dan “.” (Strip dan Titik), hal ini berlaku untuk semua Typenya tanpa terkecuali.

Contoh Form Type Checkbox di HTML

4.Yang keempat adalah Type Hidden, dari namanya saja sudah kita ketahui yaitu Tersembunyi, tetapi saya juga masih bingung untuk apa memasukan kata-kata dalam input type ini, jika tidak ingin terlihat bukankah cukup untuk tidak dituliskan saja ? tapi tidak apalah, namanya juga belajar, ini contohnya :

   

kata atau teks yang ada di Value tidak akan muncul di web browser saat di eksekusi.

5.Nah, yang ini adalah Type Submit, type submit digunakan untuk mengirim semua data yang telah kita isi di form lainnya, berikut contohnya :

   

Value akan muncul sebagai kata-kata pada tombolnya saat di eksekusi. Untuk type ini, element value tidak di isi juga tidak apa, karena akan otomatis bertuliskan “Submit”, tetapi akan berbeda jika element value diisi dengan kata yang berbeda.

Contoh Form Type Submit di HTML

6.Yang ini adalah Type Reset, type ini akan menghapus semua data yang kita isi pada input lainnya, ini contohnya :

   

sama seperti input Submit, Element Value tidak terlalu diperlukan karena akan otomatis berisi kata Reset.

Contoh Form Type Reset di HTML

7.Kemudian adalah type Button, type ini adalah sebuah tombol, seperti halnya reset dan submit, ini dia contohnya :

   

Value juga tidak terlalu dibutuhkan, karena akan bertuliskan Button jika tidak di isi dan bertuliskan Tombol jika menggunakan kode diatas.

Contoh Form Type Button di HTML

8.Sekarang adalah Textarea, TextArea biasa digunakan untuk menceritakan, mengatakan atau menuliskan kata dan kalimat yang panjang seperti Menjelaskan tentang diri kita dan Komentar, Kodenya Sebagai Berikut :

Tentang Anda :

test

Tyep ini tidak menggunakan input, entah kenapa begitu, rows dan cols digunakan untuk mengatur ukuran dari Textarea tersebut, biasa disebut Panjang dan Lebarnya.

Contoh Form Type TextArea di HTML

9.Terakhir adalah type Select, Type select digunakan untuk memilih sebuah pilihan, type ini mirip dengan Radio, bedanya type ini akan mengeluarkan Drop Down, yaitu pilihan yang hanya bisa memilih 1 pilihan saja tetapi pilihan akan muncul kebawah, berikut contohnya :

Agama
                 Islam
                 Khatolik
                 Kristen
                 Hindu
                 Budha

untuk menambahkan pilihan Drop Downya, kita hanya perlu menambahkan nya saja.

Contoh Form Type Select di HTML

Saya memiliki Contoh Form Pendaftaran Online dengan HTML, form ini saya buat karena tugas dari sekolah,

Contoh Formulis Pendaftaran Online

jika anda berminat dengan Contoh Form Pendaftaran Online dengan HTML, silahkan tinggalkan komentarnya ^_^

Belajar HTML: Cara Membuat Video dan Audio

Cara Membuat Video

Video saat ini sangatlah populer di Dunia maya, yang mana hampir di setiap Website di Internet pasti ada yang namanya Widget/Iklan Video.
Untuk membuat sebuah video agar dapat tampil dengan HTML, yaitu dengan menggunakan tag, .
Gampang kan ? tapi belum selesai, dalam tag masih ada subtag lainnya, yaitu .
Sourcer artinya sumber daya, yang mana alamat dari Video diletakkan, ok langsung ke contohnya.

<video controls>
  <source src="bingkai kehidupan.mp4” type=”video/mp4“>
Your browser does not support the video element.

dari coding diatas, terlihat 4 warna berbeda.

Untuk warna merah, dengan controls, yang artinya video dapat kita kendalikan, seperti play/pause dan sound, namun anda bisa menggantinya dengan Auto untuk Otomatis, yang mana jika anda membuka website/codingnya di browser, maka video akan otomatis play.

Untuk yang warna biru, itu adalah alamat dari video, anda bisa hanya dengan menulisnya seperti itu jika video yang akan di gunakan berada dalam 1 folder dengan codingnya, dan jika itu adalah video dari internet, maka letakan url nya disana.

Untuk yang warna hijau, itu adalah tipe dari video yang akan digunakan, diatas terlihat menggunakan tipe .mp4 maka tipenya adalah video/mp4, jika tipe video adalah .mkv maka gunakan video/mkv, sesuai dengan tipe video yang anda pakai.

dibawahnya juga terlihat tulisan  “Your browser does not support the video element.” yang artinya jika video tidak dapat dimuat karena browsernya tidak cocok/suport, maka pesan tersebut akan keluar.

anda juga bisa menambahkan width dan weight untuk mengatur ukuran video, width dan weight diletakan di dalam tag sebelum control/auto.
sehingga codingnya menjadi,

<video width="350" height="240" controls>
  <source src="bingkai kehidupan.mp4” type=”video/mp4“>
Your browser does not support the video element.

Jika anda menambahkan coding tersebut, maka video anda akan muncul dengan ukuran tersebut, meskipun video anda akan jadi buram karena ukurannya lebih besar dari ukuran aslinya.
Tapi jika anda tidak menambahkannya, maka video anda akan muncul dengan ukuran defaultnya.

Audio

Sama halnya dengan Video, Audio juga memiliki dan menggunakan tag seperti halnya tag video, tetapi tag utamanya bukanlah melainkan
contoh coding Audio:

<video controls>
  <source src="bingkai kehidupan.mp4” type=”video/mp4“>
Your browser does not support the video element.

dan

<video width="350" height="240" controls>
  <source src="bingkai kehidupan.mp4” type=”video/mp4“>
Your browser does not support the video element.

semua codingnya sama, sehingga saya tidak perlu menjelaskannya ulang, karena hanya akan memanjangkan keterangannya saja.
Namun, Audio tidak menampilkan gambarnya seperti Video, Audio hanya akan mengeluarkan suara.

Jika ada yang tidak jelas dari pembelajaran ini, silahkan tinggalkan komentar anda.

Belajar HTML : Cara Membuat Ordered List (Penomoran) dan Unordered List (Bullet)

yah istilah Ordered List (Penomoran) dan Unordered List (Bullet) sudah tidak asing lagi bagi para pengetik, itulah yang biasa digunakan ketika membuat sebuah susunan atau urutan dalam pengetikan.
nah, untuk membuatnya dalam HTML,

Kode HTML membuat Ordered List atau Penomoran

menggunakan kode

dalam kode tersebut, terdapat kode lain, yaitu

isi dari lisntya

dalam tag

terdapat beberapa type, yaitu type = 1, A, a, i, I
contohnya :

     
Urutan 1
    
Urutan 2
    
Urutan 3
 



 

     
Urutan 1
    
Urutan 2
    
Urutan 3
    
 
    
Urutan 1
     
Urutan 2
     
Urutan 3
 

dan pada penggunaan Unordered List memiliki 3 type, yaitu type = disc, square dan circle contohnya :

     
Urutan 1
    
Urutan 2
    
Urutan 3
 



 

     
Urutan 1
    
Urutan 2
    
Urutan 3
    
 
    
Urutan 1
     
Urutan 2
     
Urutan 3
 

penggunaan type juga bisa pada tag

jika list yang di gunakan berbeda dalam 1 lsiting Untuk mencoba HTML anda, silahkan gunakan HTML Editor yang kami sediakan

Belajar HTML : Cara Membuat Link

Belajar HTML : Membuat Link
Pada kesempatan hari ini, kita akan belajar membuat tombol yang mengarahkan ke sebuah file, website & E-mail.
Kode dari Html Membuat Link adalah .
dengan tambahan atribut di dalam tag nya, yaitu atribut href . atribut href adalah atribut dimana link berada.
contoh :
ArKa:::Teknik Komputer dan Jaringan
Maka tulisan dari link itu adalah ArKa:::Teknik Komputer dan Jaringan dan link yang di tuju adalah http://www.arka-tkj.blogspot.com

Membuat Link dengan tujuan ke Nama tertentu dalam halaman yang sama

pada Pembelajaran kali ini ,kita akan mempelajari link ke nama tertentu, maka link yang di tuju adalah tulisan dari nama tersebut, dan target tersebut harus memiliki nama tersendiri.

sebagai contoh :

anda ingin ketika orang mengklik link itu, maka halaman akan terseret ke paling atas, atau paling bawah, maka anda harus memberi nama pada tulisan paling bawah atau paling atas, contoh kodenya :
Kembali Ke Atas maka halaman akan kembali ke atas, dimana nama #test berada, dan untuk memberi nama pada test itu menggunakan :
Bab 1> jadi, tulisan Bab 1 memiliki nama test , yang mana jika link dengan tujuan #test di klik,maka akan mengarah pada tulisan Bab 1 .

Membuat Link dengan atrbut Target

digunakan untuk menetapkan di jendela atau di frame yang mana suatu dokumen yang dilink akan ditampilkan atau akan dimuat oleh browser.
Selanjutnya adalah penggunakan atribut Target.
ya, target adalah atribut yang digunakan untuk membuka dokumen dan tempat tertentu.
Sebagai Contoh :
ArKa:::Teknik Komputer dan Jaringan , dengan penambahan atribut target=”_blank” , maka link tersebut akan terbuka di tab baru.
ada beberapa kode dalam atribut target :
– _self, browser akan menampilkan dokumen yang dilink ke jendela atau ke frame yang sama di mana dokumen yang ada ditampilkan.
– _blank, browser akan menampilkan dokumen yang dilink ke dalam jendela baru.
– _top, browser akan menampilkan dokumen yang dilink ke dalam jendela yang baru dan fullscreen.
-_parent, browser akan menampilkan suatu dokumen yang dilink ke parent frame, yaitu bila link berada pada child frame maka dokumen yang dilink akan ditampilkan ke parent frame.
-framename, browser akan menampilkan atau akan memuat dokumen yang dilink keframe tujuan.

Untuk mencoba HTML anda, silahkan gunakan HTML Editor yang kami sediakan 

Belajar HTML: Kode Membuat Tabel di HTML

Tabel :

….

Tabel memiliki bebarapa atribut diantaranya :
Border = Ketebalan Border/garis yang membentuk tabel
align = perataan tabel
width = lebar tabel
height = tinggi tabel
bgcolor = warna latar belakang tabel

Untuk membuat sebuah tabel, juga dibutuhkan tag lain, yaitu tag

dan tag

yang terletak di antara tag

dan masing-masing dari tag tersebut memiliki atribut yang sama dengan tag

, yaitu :

Border = Ketebalan Border/garis yang membentuk tabel:

align = perataan tabel
width = lebar tabel
height = tinggi tabel
bgcolor = warna latar belakang tabel

tag

berada di antara tag

, yang mana di antara tag <td<

adalah isi dari tabel tersebut

contoh pembuatan table data :

 kode HTML tabel

hasil dari kode Tabel pada gambar pertama

Untuk mencoba HTML anda, silahkan gunakan HTML Editor yang kami sediakan 

Belajar HTML : Dasar-dasar HTML

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.

Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut :

o Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.

o Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.

o Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh informasi di bagian bawah halaman web.

 o Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.

o Audio. Memungkinkan penyajian player untuk memutar suara.

o Video. Memungkinkan player untuk memainkan film.

Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :

o Struktur halaman ;

o Presentasi visual ;

o Peranti penyaji gambar ;

o Pendukung media ; dan

Peningkatan koneksi dengan JavaScript.

Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag adalah. Dalam hal ini kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen bila ditulis dengan atributnya adalah sebagai berikut:
.

Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.

Struktur Dasar Dokumen HTML

 Setiap dokumen HTML memiliki struktur dasar atau susunan file berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.
   

Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag . Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag ….… dan tag …. ….
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti yang berfungsi untuk mengeluarkan judul pada tittle bar window web browser.

Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.

10 kode HTML dasar
Berikut ini adalah 10 kode dasar HTML:

1.kode dasar HTML

judul web anda

isi web

seperti pada penjelasan di atas, kode html harus di awali dengan dan ditutup dengan tag pada bagian paling bawah. tag dan

2.Enter

dalam HTML, kamu tidak bisa membuat baris baru atau sering disebut ENTER, untuk itu,jika ingin membuat baris baru atau ENTER, maka harus di tambahkan tag br maka otomatis akan langsung membuat baris baru.

3.Paragraph

kode ini di gunakan untuk membuat paragrap baru

4.Garis Horizontal

kode ini di gunakan untuk membuat garis horizontal, yaitu gari lurus kiri kanan. terdapat 1 atribut pada tag ini :
width: yaitu untuk menentukan panjangan garis tersebut. contoh :

5. Tulisan

tag ini digunakan untuk menentukan jenis, warna dan ukuran suatu tulisan, memiliki 3 atribut :
size:ukuran
face:jenis
color:warna
contoh:
 

6.Heading

..

sampai

…

tag ini digunakan membuat Heading yang memberikan baris baru, terdapat 6 heading yaitu heading 1 sampai 6.

7. Bold (huruf tebal)

yah… kata” itu tidak asing lagi, yaitu tag untuk membuat huruf tebal

8.Italic (huruf miring)

 

tag untuk membuat huruf miring

9. Underline (garis bawah)

dan tag untuk menambah garis bawah pada tulisan

10.Image (gambar)

tag untuk menambah gambar
pada tag ini terdapat 5 atribut yang digunakan :
src : letak file gambar
align : perataan gambar
width : lebar gambar
heigh : tinggi gambar
alt : ketarangan . contoh :

letak file dapat di ambil dari internet menggunakan link gambar tersebut & bisa juga pada komputer, namun jika ingin menggunakan gambar di komputer, file gambar dan file html di letakan dalam 1 folder agar mempermudah pembuatan file HTMLnya

Untuk mencoba HTML anda, silahkan gunakan HTML Editor yang kami sediakan 

Profesi dalam bidang Teknologi Informasi

Profesi dalam bidang Teknologi Informasi

Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau TI. Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan segala aktifitas. Munculnya bidang TI yang baru juga memunculkan profesi di bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing.

Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat dikelompokan sesuai bidangnya, misalnya:

a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak (software), baik mereka yang merancang sistem operasi, database maupun sistem aplikasi.

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

• Sistem analis, merupakan orang yang bertugas menganalisa system yang akan diimplementasikan, mulai dari menganalisa system yang ada, kelebihan dan kekurangannya, sampai studi kelayakan dan desain system yang akan dikembangkan

• Programer, merupakan orang yang bertugas mengimplementasikan rancangan system analis, yaitu membuat program ( baik aplikasi maupun system operasi ) sesuai system yang dianalisa sebelumnya.

•  Web designer, merupakan orang yang melakukan kegiatan perencanaan, termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan aplikasi berbasis web.

• *Web programmer, merupakan orang yang bertugas mengimplementasikan rancangan web designer, yaitu membuat program berbasis web sesuai desain yang telah dirancang sebelumnya.

b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras (hardware).
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

• Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat system computer.

• Networking engineer, adalah orang yang berkecimpung dalam bidang teknis jaringan computer dari maintenance sampai pada troubleshooting-nya.

c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional system informasi.
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

• EDP Operator, adalah orang yang bertugas mengoperasikan program-program yang berhubungan dengan electronic data processing dalam lingkungan sebuah perusahaan atau organisasi lainnya.

• System Administrator, merupakan orang yang bertugas melakukan administrasi terhadap system, memiliki kewenangan menggunakan hak akses terhadap system, serta hal-hal lain yang berhubungan dengan pengaturan operasional sebuah system.