Pengenalan bahasa permograman HTML
Pengertian Html adalah merupakan salah satu bahasa pemograman web yang paling dasar dan unsur terpenting dalam pembuatan web. Sehingga untuk memulai belajar web yang menjadi awal pebelajaran adalah HTML, karena semua bahasa pemograman web saling berhubungan dengan HTML.
Dalam HTMl ini, aplikasi yang digunakan tidaklah aplikasi khusus melainkan hanya cukup menggunakan notepad, yang biasa nya sudah ada pada setiap komputer, karena notepad merupakan bawaan dari window itu sendiri.
jadi untuk mempelajari tutorial dasar Html ini kamu tidak perlu repot.
Loh bagaimana bisa hanya dengan notapad bisa membuat sebuah web ?
Memang sebenarnya bukan hanya notapad saja aplikasi untuk membuat web, masih ada aplikasi yang dinamakan dreamweaver, tetapi bila untuk hanya belajar dasar HTML, notepad saja sudah cukup. Sekarang saya akan menjelaskan bagaimana cara kerja sebuah notepad agar dapat membuat sebuah web.
Notepad merupakan sebuah aplikasi pengolahan kata, tetapi buka itu saja notepad dapat di ubah ke dalam berbagai jenis format program, menjadi bahasa pemograman yang akan di translate kan oleh komputer menjadi apa saja yang di perintahkan oleh sang programer yang di tulis di notepad tadi .
Contohnya dalam hal ini sang programer ingin membuat sebuah web sederhana, maka sang programer akan menuliskan bahasa khusus yang di sebut bahasa pemograman ke dalam notepad, setelah itu komputer akan membaca bahasa pemograman yang telah di tulis tadi dan akan menampilkan nya dalam bentuk yang di inginkan sang programer. Agar komputer dapat membaca bahasa pemograman tersebut maka sang programer harus mengganti format notepad menjadi format program yang ingin di buatnya.
Tentunya setiap bahasa pemograman memiliki bahasa-bahasa yang berbeda beda, dan juga memiliki kesulitan berfariasi. Untuk bahasa pemogaraman HTML sendiri tidak begitu sulit untuk dipelajari.
Selain HTML bahasa pemograman web lainnya adalah :
Css
PHP
Java Sript
Mysql
Html 5
XHtml
Dll
Tentunya setiap bahasa pemograman web mempunyai fungsi khusus nya masing-masing.
Bagi yang pertama kali belajar Html saya sarankan untuk membaca artikel Pengenalan Bahasa Permograman HTML agar lebih jelas dan mengerti apa itu Html. Baiklah untuk Pembelajaran tutorial Html dasar, sekarang saya akan membahasa tentang peraturan penggunaan bahasa Html, pengenalan beberapa sript dasar Html, dan juga cara melihat hasil nya di browser.
Web sendiri memilki 3 bagian utama sama seperti manusia, yaitu kepala badan dan kaki, begitu juga dengan web yang terdiri atas head, body dan juga footer.
Pada bagian head merupakan tempat di letakannya banner atau logo dan bisa juga judul dari web yang kita buat. Sedangkan body adalah tempat kita memasukan atau menambahkan fitur-fitur ke dalam website yang kita hentak buat, seperti memasukan artikel, foto, video atau apa saja yang kita ingin munculkan. Secara bahasa pemograman dapat di tulis sebagai berikut :
<html>
<head>
</head>
<body>
</body>
</html
Di atas merupakan sript wajib yang harus ada pada setiap website.
Perlu di ingat :
1. Ketika akan menuliskan sebuah sript Html selalu menggunakan <...>
2. Dan untuk menutupnya gunakan </>, contohnya pada sript </body> di atas.
Sebagai contoh kamu bisa menuliskan sript berikut di halaman notepad kamu :
<html>
<head>
</head>
<body>
Saya sedang belajar HTML
</body>
</html
Bisa dilihat sebagai berikut :
Kemudian Save as :
Lalu perhatikan file name nya ganti formatnya menjadi .Html
Dan bila berhasil hasilnya akan terlihat seperti ini
Pada tutorial hari ini saya akan membahasa tentang penggunaan sript Header
( h1....H6 ). Bagi yang baru pertamakali belajar mengenai html saya sarankan untuk membacar artikel Html dasar agar lebih mudah memahami pembelajaran sekarang.
Dari namanya saja sudah pasti kita bisa menebak bahwa kegunaan dari sript ini adalah untuk membuat suatu judul, jadi kita bisa memilih H1 sampai H6 di mana semakin besar maka tulisan yang akan diciptakan akan semakin kecil.
Untuk lebih jelasnya kamu bisa menulis script ini :
<html>
<head>
<title>belajar header</title>
</head>
<body>
<h1>saya sedang belajar Html</h1>
<h2>saya sedang belajar Html</h2>
<h3>saya sedang belajar Html</h3>
<h4>saya sedang belajar Html</h4>
<h5>saya sedang belajar Html</h5>
<h6>saya sedang belajar Html</h6>
</body>
</html>
Keterangan :
<title> : untuk memuculkan judul dari web yang kita buat, yang biasanya
muncul di tab browser
jangan lupa untuk menutup sript yang di buat dengan </>.
Dari sript di atas, dapat dilahat hasilnya sebagai berikut :
Dari sript di atas, dapat dilahat hasilnya sebagai berikut :
Cara membuat header
Paragraf sangat berguna ketika kita akan menuliskan artikel kedalam web site yang kita buat, terutama apabila artikel yang kita buat sangat panjang, dan untuk merapihkannya artikel tersebut dapat di bagi-bagi lagi tiap paragraf.
paragraf juga berguna untuk memudahkan para pengunjung web kamu, untuk membaca artikel yang kau telah buat.
Untuk mengetahui nya silahkan tuliskan sript berikut :
Paragraf sangat berguna ketika kita akan menuliskan artikel kedalam web site yang kita buat, terutama apabila artikel yang kita buat sangat panjang, dan untuk merapihkannya artikel tersebut dapat di bagi-bagi lagi tiap paragraf.
paragraf juga berguna untuk memudahkan para pengunjung web kamu, untuk membaca artikel yang kau telah buat.
Untuk mengetahui nya silahkan tuliskan sript berikut :
<html>
<head>
<title>saya sedang belajar Paragraf</title>
</head>
<body>
<p>saya sedang belajar Html,
<P> mengenai Paragraf<br>
jangan lupa berdoa ketika akan belajar <br>
Semoga berhasil
</body>
</html>
Keterangan :
<p> : di gunakan untuk mendeskripsikan fungsi paragraf
<br> : fungsinya sama dengan enter pada office yaitu untuk membuat garis
baru
Sript di atas bila dilihat hasilnya sebagi berikut :
Format teks digunakan untuk membedakan teks 1 dengan yang lain, baik untuk menandakan teks atau juga mempertegas teks. Contoh format teks yang akan saya berikan adalah cara untuk membuat Blod pada Html, italic dan lain-lain. Untuk lebih jelasnya silahkan tulis sripct berikut ini :
<html>
<head>
<title>Belajar Format Teks</title>
</head>
<body>
<p><B>Saya Sedang Belajar HTML</B></p>
<p><i>Saya Sedang Belajar HTML</i></P>
<p><strong>Saya sedang belajar html</strong></P>
<p><big>Saya sedang belajar html</big></P>
<p><em>Saya sedang belajar html</em></p>
<p><code>saya sedang belajar html</code></p>
</body>
</html>
Keterangan :
<B> : Untuk Membuat teks tebal atau Blod
<i> : Untuk membuat teks miring atau italic
<strong> : Untuk mempertegas teks fungsinya sama dengan Blod
<big> : Untuk memperbesar teks
<em> : Untuk emphasized teks
<code> : Ini adalah output komputer
Hasil dari sript di atas dapat dilihat hasilnya seperti berikut :
Hasil dari sript di atas dapat dilihat hasilnya seperti berikut :
Mengenal font
Font merupakan salah satu format teks yang berguna untuk mewarnai teks, memperbesar atau memperkecil teks atau juga merupabah font face tulisan. Agar lebih jelasnya silahkan tulis sript HTML berikut ini :
Tutorial 1
<html>
<head>
<title>Tutorial html : Font</title>
</head>
<body>
<Font face=”Calibri”>Saya sedang belajar HTML</font>
<font color=”Red”>Saya sedang belajar HTML</font>
<font size=”20”>Saya sedang belajar HTML</font>
</body>
</html>
Hasil dari sript di atas bisa anda lihat di bawah ini
Tutorial 2 : Atau kalian bisa menggambungkan semua Font
<html>
<head>
<title>Tutorial html : Font</title>
</head>
<body>
<font face="calibri" color="red" size="20">saya sedang belajar HTML</font>
</body>
</html>
Keterangan :
<font Face”..”> : Digunakan Untuk mengganti jenis tulisan
<font color=”..”> : Digunakan untuk mengubah warna tulisan
<font size=”..”> : Digunakan untuk mengubah ukuran tulisan
hasil sript di atas dapat di ihat seperti di bawah ini :
hasil sript di atas dapat di ihat seperti di bawah ini :
Cara merubah posisi teks
Merubah posisi teks ini berguna untuk menempatkan judul, atau pun untuk merubah posisi teks ke tempat yang kamu inginkan. Contohnya, kamu dapat memindahkan teks ke tengah, ke kanan atau pun ke kiri.
<html>
<head>
<title>Tutorial Html:Merubah posisi teks</title>
</head>
<body>
<p align="center">saya sedang belajar html</p>
<p align="right">saya sedang belajar html</p>
<p align="left">saya sedang belajar html</P>
</body>
</html>
Keterangan :
<p align="center"> : Untuk merubah posisi teks menjadi di tengah
<p align="right"> : Untuk merubah posisi teks menjadi di kanan
<p align="left"> : Untuk merubah posisi teks menjadi di kiri
Hasil dari sript di atas dapat dilhat menjadi seperti ini :
Cara membuat link
link merupakan penghubung antara 1 halam web dengan halaman lainnya. Contoh nya di facebook, bila kita meng klik profil, maka kita akan langsung terhubung dengan halaman profil ang kita telah klik tadi. Untuk lebih jelasnya silahkan ketik script, tutorial html cara membuat link di bawah ini :
<html>
<head>
<title>Tutorial HTML : link</title>
<head>
<body>
<a href="http://facebook.com">Klik untuk masuk ke facebook</a>
<a href="Alamat halaman yang akan di sambungkan">Nama halaman yang akan di sambungkan</a>
</body>
</html>
Keterangan :
<a href=".....">_____</a> : Isi titik titik yang berwarna hitam dengan alamat halaman web yang kamu buat ( biasanya merupakan nama file name dari notepad yang di save ).
untuk memudahkan menuliskan alamat halaman ikuti langkah ini :
1. masukan semua halaman yang akan di sambungkan ke dalam 1 folder
2. Tulis nama file name, di titik hitam di atas ( jangan lupa untuk menyertakan
format file yaitu .html )
3. Tulis nama penghubung di garis biru ( namanya bebas sesuai kehendak )
Hasil dari sript di atas dapat di lihat hasilnya seperti yang ada di bawah ini :
Hasil dari sript di atas dapat di lihat hasilnya seperti yang ada di bawah ini :
Cara membuat tabel
Pasti kalian semua sudah tau apa itu table, yang memang biasanya sudah terdapat di microsoft office work atau pun di microsoft excel, jadi pasti sudah tidak asing lagi. Tapi pertanyaan nya apakah kegunaan table dalam membuat website ?
Table dalam website mempunyai beragam fungsi seperti, membuat menu horizontal, sebagai batas lay out, atau pun juga untuk megurutkan. Untuk lebih jelasnya silahkan tulis sript di bawah ini :
<Html>
<head>
<title>Tutorial html : cara membuat table</title>
</head>
<body>
<table width="200" height="200" border="1">
<tr>
<td>nama barang </td>
<td>Harga Barang</td>
<tr>
<td>minya tanah </td>
<td>5000</td>
</body>
</html>
Hasil dari sript di atas dapat di lihat seperti berikut :
Ataupun kalin juga bisa menambahkan background pada table yang akan di buat :
<Html>
<head>
<title>Tutorial html : cara membuat table</title>
</head>
<body>
<table width="200" height="200" border="1">
<tr>
<td bgcolor="red">nama barang </td>
<td bgcolor="yellow">Harga Barang</td>
<tr>
<td>minya tanah </td>
<td>5000</td>
</body>
</html>
Keteragan :
Width : Untuk menentukan lebar table yang akan di buat (angka bebas di
atur seseuai keinginan)
Height : Untuk menentukan tinggi table yang aan di buat (angka bebas di
atur seseuai keinginan)
Border : Untuk menentukan tebal garis pinggir/tepi table (Semakin besar
angka semakin tebal garis table)
<tr> : Untuk membuat garis baru
<td> : Untuk membuat kolom baru
Hasil dari sript di atas dapat di lihat seperti berikut :
List Teks
Contohnya adalah untuk mendaftar beberapa menu yang ada di web yang kamu buat agar dapat lebih mudah di lihat oleh orang banyak. untuk lebih jelasnya lagi silahkan kamu liat sript HTML berikut ini :
<Html>
<head>
<title>Tutorial html : List Teks</title>
</head>
<body>
<ul>
<li>kopi</li>
<li>baso</li>
<li>gorengan</li>
</ul>
<Ol>
<li>kopi</li>
<li>baso</li>
<li>gorengan</li>
</ol>
<dl>
<dt>kopi</dt>
<dt>baso</dt>
<dt>gorengan</dt>
</dl>
</body>
</html>
Keterangan :
<ul> : berguna untuk menentukan jenis urutan, dalam hal ini <ul> berjenis
urutan titik tebal
<li> : beruna untuk melist data yang hanya di gunakan pada jenis list <ul>
dan <ol>
<ol> : berguna untuk menentukan jenis urutan, dalam hal ini <ol> berjenis
urutan angka, dari 1...dan seterusnya
<dl> : berguna untuk menentukan jenis urutan, dalam hal ini <dl> berjenis
urutan tanda setrip ( - )
<dt> : berguna untuk me list data yang hanya di gunakan pada jenis list
<dt> saja
Hasil dari sript di atas dapat dilihat sebagai berikut :
Forms atau formulir ini pasti sudah sangat familiar di kalangan para blogger khusunya yang selalu mendaftarkan blog nya ke web direktori, karena untuk mendaftarkan blog nya seorang blogger perlu mengisi persyaratan dan juga data dari blog. Hal ini sama seperti bila kita hendak membuat sebuah e-mail. Pasti kita akan di perintahkan untuk mengisi data-data yang di perlukan, seperti nama, password yang akan di gunakan dan lain-lain.
Untuk itu kita sekarang akan mencoba untuk membuat Forms ( Formulir ) Dengan Menggunakan Sript HTML sendiri. Untuk itu perhatikanlah sript-sript di bawah ini :
<html>
<head>
<title>Tutorial dasar html : Membuat Forms</title>
</head>
<body>
Untuk menuliskan teks<br>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<br>
Untuk menuliskan password<br>
<form>
Password: <input type="password" name="pwd" />
</form>
Password: <input type="password" name="pwd" />
</form>
<br>
tombol lingkaran<br>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<br>
tombol kotak<br>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
<br>
tombol input<br>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<br>
</body>
</html>
Keterangan :
</input> : Mendeskripsikan input teks
<textarea> : Mendeskripsikan area teks
<option> : Mendeskripsikan option di pilihan
<buttton> : Mendeskripsikan tombol
Hasil dari sript di atas dapat di lihat seperti di bawah ini
cara membuat backgrund gambar
Background yang dimaksud di sini adalah background yang hanya menampilkan warna, bukan gambar, Insya Allah pada tutorial selanjutnya saya juga akan menulis mengenai cara membuat backgrund gambar, tetapi untuk saat ini saya akan menerangkan Bagaimana cara Membuat Background Warna terlebih dahulu.
Background merupakan warna atau pun gambar dasar dari suatu layout (dalam hal ini layout web), dan tentu saja tujuan dari pemberian Background ini untuk mempercantik tampilan web yang kita buat. Untuk mengetahui lebih lanjut cara Memasang Background warna langsung saja kita perhatikan script HTML di bawah ini :
<html>
<head>
<head>
<title>Tutorial HTML : Membuat Background</title>
</head>
<body bgcolor="red">
</body>
</html>
Keterangan :
<body bgcolor="red"> : digunakan untuk menentukan warna background yang
hendak kita pakai. Kamu bisa merubah warna dengan
mengganti tulisan yang berwarna merah (red) dengan
warna lain
