oke kemaren sudah saya bahas mengenai html, pengenalan html web dan internet..
now i will show you how to make static web using html << woww english kaccau *_*
kali ini saya akan tunjukan cara mudah ngoding html untuk pemula
dan para newbie..
sebelumnya sudah saya berikan contoh html kan ? cek dimari, nah mari kita bahas 1 persatu setiap bagiannya
1. header
header ini biasanya berisi macam-macam keterangan tentang dokumen termasuk title alias judul, header di tandai dengan tag head <head>...</head> tikik titik berisi isi dari headernya,
dalam tag head biasanya ada tag title <head><title>{berisi title}</title></head>.
2. body
body ini ini adalah isi, <body>...isinya...</body>. maka apapun yang di tulis dalam tag body ini akan di tampilkan di halaman web, tidak hanya teks tapi bisa juga gambar, tabel, animasi de el el..
3. heading
kalo ini sekumpulan kata yg jadi judul atau sub judul dokumen, gag sama kayak title bro, pernah berkunjung ke blog blog ? nah diatas kan pasti ada judulnya tuh, yg tulisannya gede,nah itu tuh yang namanya heading. ada beberapa tingkatan kebesaran, tergantung seberapa nafsunya kamu membesarkan nya ^_^ ada 6 tingkat kebesaran, cara bikinnya gini, pakek tag <h1>paling besar</h1> s/d <h6>paling kecil</h6>
4. paragraf
udah tau dong yg namanya paragraf ? gag tau ? lulusin sd dulu kalo gag tau -_- nah kalo di html paragraf itu di tulis pakek tag <p> isi </p>, nah untuk bikin
rata kanan,tengah,kiri,kanan kiri kayak di ms.word itu kita tambahkan atribut ALIGN dan nilainya contohnya gini <p ALIGN="center"> isi nya </p> nah ALIGN itu di sebut atribut, sedangkan center itu di sebut nilai atribut, nilai atributnya bisa di ganti sesuai keinginan, bisa left,right,center.
5. Line Break
nah ini loh BR, di kode html itu gag ada enter, jika kita hanya menekan enter
untuk menurunkan baris, setelah hasilnya ditampilkan itu hanya akan terbaca sebagai spasai[spasi] karna dalam bahasa ingris i di baca ai, maka saya tulis spasai :D .. sebanyak apapun kita meng-Enter akan tetap terbaca spasai, nah bagaimana untuk menurunkan baris
di html ? kita gunakan tag <br> ini.
6. Ordered list
biasa saya sebut O EL "OL" untuk membuat daftar berurutan kayak nomer 12345 de el el.untuk menampikan daftarnya kita masukan daftarnya kedam tag <li>daftar</li> yang ada di dalam tag <ol>kayk gini
__________________________
<ol>
<li>daftar1</li
<li>daftar2</li
<li>daftar3</li
</ol>
__________________________
tag ol ini pakek atribut type dan beberapa nilai nilai atribut.
<ol type=1></ol> ini untuk menamilkan angka 1,2,3,4,5...
<ol type=I></ol> ini untuk menampilkan I,II,III,IV,V,...
<ol type=i></ol> ini untuk menampilkan i,ii,iii,iv,v,...
<ol type=A></ol> ini untuk menampilkan A,B,C,D,E........
<ol type=a></ol> ini untuk menampilkan a,b,c,d,e........
selain tag <ol> juga ada tag <ul> penggunaannya sama dengan tag <ol> hanya saja pada <ul> (Unordered list) ini tidak menampilkan secara berurutan, tetapi hanya menampilkan kotak,cakram,bulat-bulat, ini macam macam nilai atribut pada tag ul.
<ul type=circle></ul>
<ul type=disk></ul>
<ul type=square></ul>
7. Definition list
nah yang ini sama juga untuk membuat dafta, tapi daftar yang ada penjelasannya misal, nya daftar nomer 1 adalah PISANG dan penjelasanya dalah makanan nya seekor monyet maka bisa kita buat kode seperti ini, diawali tag <dl>, untuk istilahnya pakek <dt>, dan penjelasanya pakek <dd>.
contoh :
___________________________________
<DL>
<DT>PISANG</DT>
<DD>pisang adalah makanannya seekor monyet</DD>
<DL>
___________________________________
8. FONT
gag tau font mati aja lu -_- , untuk tag <font> ada 3 atribut broh,ada face, size, color.
face = model font/tulisan
size = ukuran besar font/tulisan
color = warna font/tulisan
untuk nilai atribut dari masing masing atribut diatas bisa di isi dengan
face = {bisa cari model font di ms.word/ketik namafont nya,misalnya "Arial"}
size = di isi angka, 12,14,16, sesuai selera kebesaran.
9. Horizontal Line
ini hanya hiasan saja, yaitu garis miring panjang dengan tag <HR> untuk mengatur panjang garisnya bisa pakai atribut width="19" angka bisa di ganti sesuai keinginan. contoh nya <hr width="20">
10. Image
nah kita juga bisa menampilkan gambar loh pakek tag <img> untuk memilih gambarnya usahakan gambarnya berada satu folder dengan file html kita
lalu kita gunakan atribut SRC dan nilai attributnya adalah nama gambar, atau lokasi gambarnya, contoh :
___________________________________________
jika berada dalam 1 folder
<img src="namagambar.jpg" width="50" heigh="50">
jika berada beda folder bisa pakai ../ (dua titik dan garing untuk mundur 1 folder) dan ../../ (untuk mudur 2 folder )dst.
<img src="../nama gambar.jpg">
<img src="../folderdiluar/namagambar.jpg">
<img src="../../nama gambar.jpg">
dan macam macam tergantung letak gambarnya, selai itu juga kita bisa mengambil gambar yang ada di internet, misalnya gambar dari google, kita lihat url gambarnya misalnya https://www.google.com/link/gambar/dari/google/diaddresbar/images.jpg maka kita buat kodenya seperti ini
<img src="https://www.google.com/link/gambar/dari/google/diaddresbar/images.jpg">
untuk atribut width dan height seperti contoh pertama adalah untuk mengatur panjang dan lebar nya.
juga ada atribut align untuk mengatur posisi layaknya tag <p>
11. tabel (next post)
nah udah lumayan kan, tapi untuk tabel,dll masih progres... ini kepepet paketan midnight habis,makanya
saya harus buru-buru, nah buat kalian yang udah jago ngehek website tapi masih gag bisa bikin skrip defes alias skrip kidi ini bisa jadi panduan juga , buat yang ingin belajar web programing ya basicnya harus belajar html dollo lah..
okelah semoga bermanfaat..
sekian aurakasih.
.
.
.
.
tinggalkan jejak
now i will show you how to make static web using html << woww english kaccau *_*
kali ini saya akan tunjukan cara mudah ngoding html untuk pemula
dan para newbie..
sebelumnya sudah saya berikan contoh html kan ? cek dimari, nah mari kita bahas 1 persatu setiap bagiannya
1. header
header ini biasanya berisi macam-macam keterangan tentang dokumen termasuk title alias judul, header di tandai dengan tag head <head>...</head> tikik titik berisi isi dari headernya,
dalam tag head biasanya ada tag title <head><title>{berisi title}</title></head>.
2. body
body ini ini adalah isi, <body>...isinya...</body>. maka apapun yang di tulis dalam tag body ini akan di tampilkan di halaman web, tidak hanya teks tapi bisa juga gambar, tabel, animasi de el el..
kalo ini sekumpulan kata yg jadi judul atau sub judul dokumen, gag sama kayak title bro, pernah berkunjung ke blog blog ? nah diatas kan pasti ada judulnya tuh, yg tulisannya gede,nah itu tuh yang namanya heading. ada beberapa tingkatan kebesaran, tergantung seberapa nafsunya kamu membesarkan nya ^_^ ada 6 tingkat kebesaran, cara bikinnya gini, pakek tag <h1>paling besar</h1> s/d <h6>paling kecil</h6>
4. paragraf
udah tau dong yg namanya paragraf ? gag tau ? lulusin sd dulu kalo gag tau -_- nah kalo di html paragraf itu di tulis pakek tag <p> isi </p>, nah untuk bikin
rata kanan,tengah,kiri,kanan kiri kayak di ms.word itu kita tambahkan atribut ALIGN dan nilainya contohnya gini <p ALIGN="center"> isi nya </p> nah ALIGN itu di sebut atribut, sedangkan center itu di sebut nilai atribut, nilai atributnya bisa di ganti sesuai keinginan, bisa left,right,center.
5. Line Break
nah ini loh BR, di kode html itu gag ada enter, jika kita hanya menekan enter
untuk menurunkan baris, setelah hasilnya ditampilkan itu hanya akan terbaca sebagai spasai[spasi] karna dalam bahasa ingris i di baca ai, maka saya tulis spasai :D .. sebanyak apapun kita meng-Enter akan tetap terbaca spasai, nah bagaimana untuk menurunkan baris
di html ? kita gunakan tag <br> ini.
6. Ordered list
biasa saya sebut O EL "OL" untuk membuat daftar berurutan kayak nomer 12345 de el el.untuk menampikan daftarnya kita masukan daftarnya kedam tag <li>daftar</li> yang ada di dalam tag <ol>kayk gini
__________________________
<ol>
<li>daftar1</li
<li>daftar2</li
<li>daftar3</li
</ol>
__________________________
tag ol ini pakek atribut type dan beberapa nilai nilai atribut.
<ol type=1></ol> ini untuk menamilkan angka 1,2,3,4,5...
<ol type=I></ol> ini untuk menampilkan I,II,III,IV,V,...
<ol type=i></ol> ini untuk menampilkan i,ii,iii,iv,v,...
<ol type=A></ol> ini untuk menampilkan A,B,C,D,E........
<ol type=a></ol> ini untuk menampilkan a,b,c,d,e........
selain tag <ol> juga ada tag <ul> penggunaannya sama dengan tag <ol> hanya saja pada <ul> (Unordered list) ini tidak menampilkan secara berurutan, tetapi hanya menampilkan kotak,cakram,bulat-bulat, ini macam macam nilai atribut pada tag ul.
<ul type=circle></ul>
<ul type=disk></ul>
<ul type=square></ul>
7. Definition list
nah yang ini sama juga untuk membuat dafta, tapi daftar yang ada penjelasannya misal, nya daftar nomer 1 adalah PISANG dan penjelasanya dalah makanan nya seekor monyet maka bisa kita buat kode seperti ini, diawali tag <dl>, untuk istilahnya pakek <dt>, dan penjelasanya pakek <dd>.
contoh :
___________________________________
<DL>
<DT>PISANG</DT>
<DD>pisang adalah makanannya seekor monyet</DD>
<DL>
___________________________________
gag tau font mati aja lu -_- , untuk tag <font> ada 3 atribut broh,ada face, size, color.
face = model font/tulisan
size = ukuran besar font/tulisan
color = warna font/tulisan
untuk nilai atribut dari masing masing atribut diatas bisa di isi dengan
face = {bisa cari model font di ms.word/ketik namafont nya,misalnya "Arial"}
size = di isi angka, 12,14,16, sesuai selera kebesaran.
9. Horizontal Line
ini hanya hiasan saja, yaitu garis miring panjang dengan tag <HR> untuk mengatur panjang garisnya bisa pakai atribut width="19" angka bisa di ganti sesuai keinginan. contoh nya <hr width="20">
nah kita juga bisa menampilkan gambar loh pakek tag <img> untuk memilih gambarnya usahakan gambarnya berada satu folder dengan file html kita
___________________________________________
jika berada dalam 1 folder
<img src="namagambar.jpg" width="50" heigh="50">
jika berada beda folder bisa pakai ../ (dua titik dan garing untuk mundur 1 folder) dan ../../ (untuk mudur 2 folder )dst.
<img src="../nama gambar.jpg">
<img src="../folderdiluar/namagambar.jpg">
<img src="../../nama gambar.jpg">
dan macam macam tergantung letak gambarnya, selai itu juga kita bisa mengambil gambar yang ada di internet, misalnya gambar dari google, kita lihat url gambarnya misalnya https://www.google.com/link/gambar/dari/google/diaddresbar/images.jpg maka kita buat kodenya seperti ini
<img src="https://www.google.com/link/gambar/dari/google/diaddresbar/images.jpg">
untuk atribut width dan height seperti contoh pertama adalah untuk mengatur panjang dan lebar nya.
11. tabel (next post)
nah udah lumayan kan, tapi untuk tabel,dll masih progres... ini kepepet paketan midnight habis,makanya
saya harus buru-buru, nah buat kalian yang udah jago ngehek website tapi masih gag bisa bikin skrip defes alias skrip kidi ini bisa jadi panduan juga , buat yang ingin belajar web programing ya basicnya harus belajar html dollo lah..
okelah semoga bermanfaat..
sekian aurakasih.
.
.
.
.
tinggalkan jejak
0 komentar untuk HTML basic tutorial .
Perlihatkan Semua Komentar Tutup Semua Komentar