Senin, 19 Juni 2017

Cara Belajar HTML Dan Pembuatannya

Cara Belajar HTML Dan Pembuatannya
Dalam mempelajari html ini, anda juga
harus mengenali beberapa macam aplikasi yang dapat membaca kode kode html yang telah anda buat. Aplikasi yang dapat membaca kode html anda disebut web browser. Web browser ini memiliki fungsi untuk menampilkan kode-kode yang telah anda buat dan menerjemahkan kedalam bentuk visual ataupun audio.

Contoh dari web browser ini adalah Internet Explorer, Mozila Firfox, Opera, Chrome dan lain lain yang sering anda pakai untuk membuka web. Langkah selanjutnya dalam mempelajari html adalah dengan membuat kode yang dibuat pada notepad. Kode tersebut bisa saja berupa background ataupun semua file yang akan anda tampilkan pada halaman web anda.

Semua jenis kode ini adalah perintah yang akan membuat web browser anda menampilkan kode-kode tersebut. Anda bisa memakai setelan template dari internet, namun mungkin saja setelan template tersebut tidak sesuai dengan selera anda sehingga anda ingin merubah sesuai keinginan.

Setelah anda membuat kode pada notepad, simpanlah kode tersebut di data komputer anda dengan format html. Mempelajari html mungkin bagi sebagian orang membuat ribet, namun memang beegitulah adanya. Anda harus teliti dalam memasukan kode-kode tersebut, salah memasukan satu huruf saja dalam kode maka akan berakibat fatal.

Disini dibutuhkan kejelian dan ketelitian dalam membuat program html secara bertahap.

tag <>

digunakan untuk menuliskan sintak we b, ada dua jenis, yaitu sintax web tag container dan sintax web tag biasa.

Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.

Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1
  • MEMBUKA NOTEPAD.
LANGKAH 2
  • MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.

pertama, ketikkan :

<html> 

tekan enter, kemudian ketik :

<head> 

Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.

Sekarang ketikkan sintak title tadi, jadi seperti ini :

<head> <title> judul halaman 

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.

Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang :

< html>
< head>
< title> Judul Halaman Web </title>
</ head>
< body>
</ body> 

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :

<body> 

Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei

</body> 

terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :

<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan
</body>
</html> 

kalo udah, sekarang save dengan nama dasarHTML.

kalo udah disave, buka data yang tadi di save.

Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa??

Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html

Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.

Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.

Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.
Bikin Link HTML
Sintaks Link:

<a href="/caramembuatwebsite/url">Teks Link</a> 

Perhatikan, tag HTML pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.

Atribut href:
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web:

<a href="http://www.mr-update.net/">Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a> 

Kode tersebut akan ditampilkan seperti ini. Sok atuh dicoba klik biar kerasa.

Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.
Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web site mr-update.net di jendela yang sama, kode ini akan membuka web site mr-update.net pada sebuah jendela baru:

<a href="http://www.mr-update.net/" target="_blank"> Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a> 

Sok di klik link di bawah ini biar tahu bedanya:

Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.
Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:

<a name="label">Apapun</a> 

Nah, link yang menuju ke halaman itu bikinnya gini:

<a href="#label">Apapun</a> 

Perhatikan tanda # yang mendefinisikan nama anchor
Contoh:
Sebuah anchor dalam dokumen HTML:

<a name="top">Ini bagian paling atas</a> 

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:

<a href="#top">Kembali ke atas</a> 

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

<a href="http://www.mr-update.net/mambo/contoh.htm#top"> Kembali ke halaman utama paling atas</a> 

Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik Kembali ke atas ini untuk menuju ke bagian paling atas dari halaman ini.

Catatan penting dan tips yang pastinya akan berguna buat kamu Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.
Jika link kita bentuknya seperti ini:

href=”http://www.mr-update.net/mambo”,

maka kamu akan membuat 2 buah permintaan http ke server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini :

href=”http://www.mr-update.net/mambo/”

Nah, dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat resource di server.
Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.

Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis akan menuju ke bagian paling atas dari dokumen. Tanpa error.
Nah, itu adalah materi belajar HTML mengenai link.

Table identik dengan kolom dan baris, Di dalam HTML kita juga bisa membuat Table didalamnya. HTML menggunakan tag <table>, <tr>, <td>.

Berikut penjelasannya :
1. <table> digunakan untuk memulai pembuatan table
2. <tr> Atau Table Row digunakan untuk membuat baris pada table
3. <td> Atau Table Data digunakan untuk membuat kolom pada table

Contoh Pembuatan Table pada HTML:
<!DOCTYPE html>
<html>
<head>
<title> Belajara Membuat Table </title>
</head>
<body>
<h1> Contoh Pembuatan Table </h1>
<table border="1">
<tr>
<td> Saya </td>
<td> kamu </td>
<td>Anda</td>
</tr>
<tr>
<td> I </td>
<td> You </td>
<td> You</td>
</tr>
</table>
</body>
</html> 

Perhatikan pada tag <table> disana saya meletakkan border="1" ini berarti garis tepi pada border bernilai 1 dan jika anda ingin mengubahnya silahkan. Misalnya border="5" itu akan membuat garis tepi pada table akan tebal dan pada juga boleh memperbanyak tablenya dengan menambah tag <tr> dan tag <td>

HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar. Yuk ikuti langkah – langkah membuat HTML :

Cara pembuatan Dokumen HTML:
Klik START → Pilih All Program → Accesories → Pilih notepad

Setelah notepad terbuka ketikkan struktur dasar dokumen HTML seperti contoh di bawah ini :

Cara Belajar HTML Dan Pembuatannya

Setelah itu simpan file tersebut dengan extension HTML.

Klik save → Pilih save → Simpan dengan nama (nama folder).html

Cara Belajar HTML Dan Pembuatannya

Kamu bisa melihat hasil coding yang telah diketikkan di notepad tadi dengan mencari file yang tadi disimpan, dan double klik pada file tersebut dan akan muncul hasilnya:

Cara Belajar HTML Dan Pembuatannya

Dari Struktur dasar HTML di bawah dapat dijelaskan sebagai berikut :

Cara Belajar HTML Dan Pembuatannya

  • <html> : Untuk mendefinisikan sebuah dokumen HTML
  • <head> : Merupakan kepala dari dokumen HTML
  • <title> : Tag pembuka judul dokumen
  • <body background=”sunset.jpg”>
<hr color=”GREEN” size=”3″>
<font face=”castellar” size=”6″ color=”RED”>
<marquee scrolldelay=”100″
OnMouseOut=”this.start();”
OnMouseMove=”this.stop();”>
<blink>MARI BELAJAR HTML BERSAMA YUKZ ^_^</blink>
</marquee>
</font>
<hr color=”#000000″ size=”3″> 

</hr> : Yaitu coding diatas untuk tulisan yang dapat bergerak dari kanan kiri, bentuk, font, dan kalimat tulisan bisa sesuai keinginan sendiri.
  • <body bgcolor=”pink”> </body> : Untuk mendefinisikan isi/badan suatu dokumen, pink adalah untuk menentukan warna background sesuai keinginan.
  • <h1 align=”center”>TUGAS PENGANTAR KOMPUTER 2</h1> : untuk mendefinisikan posisi heading berada di tengah halaman.
  • <br>

<center> <img style=”
width: 200px;
height: 220px;”src=” http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/15218_3960622580644_201867054_n.jpg”&gt ; </center> : Untuk menyisipkan sebuah gambar pada HTML dan <br> untuk menyisipkan line break 

  • <b> Nama </b> : <big>Mamat Setiono </big> : Untuk membuat kalimat di HTML dengan format <b> untuk menebalkan teks, <big> untuk membuat hurufnya besar
  • <b> NPM </b> : <b> <i> 431212164 </b> </i> : Untuk membuat angka di HTML dengan format <i> untuk membuat tulisan miring
  • <b> JURUSAN </b> : <big> <b> <i> <u> Akuntansi komputer </big> </b> </i> </u> : Untuk membuat teks di HTML dengan format menggunakan format tulisan besar, miring dan ditambah <u> yaitu tulisan di garis bawah.
  • <b> Motto </b> : <big> <b> Kalau berusaha dengan sungguh-sungguh pasti BISA. <u>”SEMANGAT” : Untuk membuat teks di HTML dengan format teks besar dan teks tebal menggunakan <big> dan <b>
  • <h1 align=”center”>UNIVERSITAS INDONESIA</h1> : Untuk mendefinisikan posisi heading berada di tengah halaman.
  • <body background=”sunset.jpg”>

<hr color=”yellow” size=”5″>
<font face=”GEORGIA” size=”6″ color=”purple”>
<marquee scrolldelay=”100″
OnMouseOut=”this.start();”
OnMouseMove=”this.stop();”>
<blink>MAN JADDA WA JADA</blink>
</marquee>
</font>
<hr color=”#000000″ size=”5″> 

</hr> : Yaitu coding diatas untuk tulisan yang dapat bergerak dari kanan kiri, bentuk, font, dan kalimat tulisan bisa sesuai keinginan sendiri.

Terima kasih atas kunjungan anda di blog saya jika ada seputar yang anda pertanyakan silakan berkomentar di bawah. Malu Bertanya Sesat Di Rumah Janda!

Artikel Terkait

Seseorang blogger pemula masih baru dalam menekuni dunia blogging, Yang tujuanya jelas dalam menulis blog.

28 komentar

Ane cuman tahu html itu kode buat huruf besar, miring, underline, memasukan gambar dll.

hmm agak sulit juga belajarnya..

aduh, ternyata gini toh cara belajarnya. Thnks gan

mantap, ane juga kadang kadang belajar html, dan css

Ane juga masih belajar html, tapi ane pake notepad++

ane masih belum terlalu paham soal html gan , mga2 dsiin ane bisa belajar banyak .. mohon panduannya

Pake notepad++ juga bagus lebih gampang enak dipakainya

sangat mudah di pahami, thank gan (y)

Silahkan berkomentar jika ada pertanyaan seputar topik pembahasan diatas.
Dilarang Keras!!!:
1. No Spam
2. Jangan sisipkan link aktif
3. Komentar berbau sara
Langsung saya hapus!!!
EmoticonEmoticon