Belajar Dasar HTML Terlengkap Untuk Pemula dasar html 2015
Tutorial Pemula - HTML atau Adalah dalam kamus sederhana sering
disebut sebagai Bahasa Pemograman web atau dengan kepanjangan
lengkapnya HyperText Markup Language.
Dan seperti kita ketahui sebuah dimana bahasa pemograman selalu memiliki
struktur dan penyusunan yang jelas, jadi tentu saja HTML ini sangat
berbeda dengan bahasa kita sehari-hari. Bahkan mungkin kita akan sangat
perlu belajar serius untuk benar-benar bisa mengerti bagaimana cara
menulis dengan HTML yang valid dan bisa dimengerti oleh komputer.
Saya membuat postingan ini, karna kemarin ada yang bertanya kepada saya : Bagaimana Cara membuat
template dengan HTML yang benar? maka saya menjawab : Anda setidaknya Harus
belajar tentang HTML terlebih dahulu.
Nah, muncul lagi pertanyaan Dimanakah saya bisa
belajar HTML yang terbaik, terlengkap dan bisa dimengerti oleh pemula.
Terus terang saya bukan pelku desaigner yang mengerti bentuk dan pintar
dalam bahasa HTML. Ilmu saya tidak akan bisa membuat anda mampu pintar
dan cakap dalm mempelajarinya karna pengetahuan saya masih sangat dasar
dalam
bahasa HTML.
Mengenal Struktur HTML Dasar
Jika anda benar-benar sangat pemula, maka setidaknya anda harus mengerti
dan mengetahui contoh dan strukturnya si HTML ini. Secara dasar, anda
bisa melihat bagaimana struktur HTML tersebut seperti dibawah ini.
Contoh Halaman Web dengan Bahasa HTML dasar:
<html>
<head>
<title>Judul Belajar TML Pemula</title>
</head>
<body>
Selamat pagi pemirsa, nama saya pemula. Saya mau belajar agar pintar
HTML. dimanakah tempat belajar HTML yang terlengkap, terbaik dan pas
buat saya?
</body>
</html>
Dari struktur tersebut terlihat jelas bahwa sebuah HTML Menampilkan tulisan pada halaman
website
dengan menggunakan kode-kode atau source. Dimana Kode source HTML
tersebut tidak akan ditampilkan pada browser (tidak terlihat pleh si
pembaca), namun kode2 HTML inilah yang akan memerintahkan browser untuk
menampilkan seperti apa halaman yang kita buat. Seperti kode source
diatas jika ditampilkan maka akan terlihat:
Title = Judul Belajar TML Pemula
Isi = Selamat pagi pemirsa, nama saya pemula. Saya mau belajar agar
pintar HTML. dimanakah tempat belajar HTML yang terlengkap, terbaik dan
pas buat saya?
KODE WARNA HTML Contoh:Putih =>#ffffff;
biru kode:0000ff
hitam kode:000000
brown kode:a52a2a
crap blue kode:5f9ea0
coklat kode:d2691e
corn flow kode:6495ed
crimson kode:dc143c
cyan kode:00ffff
violet kode:00008b
something kode:b8860b
dark gray kode:a9a9a9
khaki kode:bdb76b
orange order kode:ff8c00
scorned kode:8b0000
fish paste kode:e9967a
sea weed kode:8fbc8f
slate blue kode:483d8b
violet kode:9400d3
pink kode:ff1493
skyblue kode:00bfff
bricks kode:b22222
trees n shit kode:228b22
grany house kode:dcdcdc
going for gold kode:ffd700
orange peel kode:daa520
green kode:008000
flamingos kode:ff69b4
indigo kode:4b0008
grass kode:7cfc00
marooned kode:800000
blue two kode:0000cd
purple kode:9370d8
minty kode:00fa94
midnight kode:191970
merah kode:ff4500
sand kode:ff4a460
silver kode:c0c0c0
kuning kode:ffff00
putih kode:ffffff
Oke sobat, sebagai contoh coba ketikan listing Html di bawah ini di notepad :
<html>
<head>
<title> new page 1</title>
</head>
<body>
<p>
<marquee
bgcolor=”#C0C0” loop=”4” direction=”right” scrolldelay=”2”
scrollmount=”8” align=”middle” width=”291” height=”19”> Mari
Berjalan</marquee>
</p>
</body>
</html>
Jika sudah selesai simpan dengan nama Coba.html dan pastikan type document nya All File,
Jika sudah di save coba sobat buka dengan Mozila Firefox.
Apakah view nya sama seperti gambar di atas, jika sama, berarti html sobat berhasi.
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !<html><head><title> Latihan Pertamaku </title></head><body color="#000000"><p align="left">Paragraf ini akan rata kiri<br />Paragraf ini akan rata kiri<br />Paragraf ini akan rata kiri<br /><p>br digunakan untuk ganti baris <br /><br /><b>Kalimat ini akan dicetak Bold </b> <br /><i>Kalimat ini akan dicetak Italic </i> <br /><b><i>Kalimat ini akan dicetak Bold dan Italic</i></b><hr width="1000"><br />Perintah hr digunakan untuk membuat garis</body></html>Simpan perkerjaan Anda dengan nama latihan_2.html. Jika benar, seharusnya ditampilkanseperti berikut ini:3Gambar 1.2 Hasil dari latihan_2.htmlPerhatikan perintah berikut ini:<p align="left">tag atributP pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atributmerupakan perintah yang menyertai tag.Berikut beberapa perintah HTML dan fungsinya:Tag Atribut/Contoh penulisan Fungsi<body> <body bgcolor="”red”"><body bgcolor="”#FF0000”">text=” ... “link=” ...”vlink=”...”alink=”...”<bodybackground=”D:\Gambar.jpg”>Backgorund halaman berwarnamerahMemberi warna pada teksWarna linkWarna link yang sudah dikunjungiWarna link yang aktifMemberi background gambarpada halaman<a> ...</a><ahref=”D:\home.html”>Home</a><ahref="http://www.yahoo.com/">Yahoo!</a><ahref="mailto:name@domain.com">here</a> to email me!Membuat hyperlink/link<img> <img src="person.jpg" width="50"height="50"border="0"alt="Person" align="left" />Memasukkan gambar dengannama file gambar person.jpg,lebar 50px, tinggi 50px, border 0,rata kiri, dan jika gambar tidakmuncul akan keluar teks Person4<img src=”C:\Documents andSettings\All Users\Documents\MyPictures\SamplePictures\Sunset.jpg /><span>... /font><span style="font-family:arial;font-size:85%;color:#FFFF00;">...</span>Mengatur font dengan ukuran 2,warna kuning, jenis huruf Arial<big>...</big> <big>Contoh </big> Membuat teks Contoh menjadilebih besar<small>...</small> <small> Contoh</small> Membuat teks Contoh menjadilebih kecil<b>...</b> Teks bold/dicetak lebih tebal<i>…</i> Teks italic/miring<strike>...</strike> Teks tercoret<u>...</u> Teks underlined<h1>...</h1> Teks heading 1. Tingkat headingbisa sampai tingkat 6. Semakinbesar tingkar heading, maka teksaka dicetak semakin kecil<hr /> <hr width="”600”"><hr align=”center” size=”5”width=”80%”Garis dengan lebar 600. Tag <hr />tidak perlu ditutupGaris dengan tinggi 5, lebar 80%dari lebar layar browser dan ratatengah<p align="”center’"> ...</p>Paragraf rata tengah. Perintah inijuga dapat ditulis dengan tag<center>...</center><br /> Tag untuk ganti baris Tag <br /> tidak perlu ditutup<sup>...</sup> Teks superscript<sub>...</sub> Teks subscript<marquee> ....</marquee>Teks berjalan. Memiliki atributdirection, behavior dan lain-lain.Contoh:<marquee direction="”right”">....</marquee><marquee behavior="”alternate”">... </marquee>TABLEBeberapa perintah penting untuk membuat tabel:1. <table border="”1”"> .... </table> merupakan perintah utama dalam pembuatan tabel,tabel dengan ketebalan 1px2. <tr> ... </tr> tag untuk membuat baris3. <td> ... </td> tag untuk membuat kolom/cell4. colspan merge/melebarkan kolom/cell5. rowspan merge/melebarkan barisAtribut tabel dan fungsinyaTag Atribut/Contoh penulisan Fungsi<table>...</table>border=”...” Ketebalan tabel.Contoh:<table border="”1”">5align=”...” Pengaturan tabel (rata tengah,kanan atau kiri)width=”...” Lebar tabel. Bisa diisi dengansatuan pixel atau persen.Contoh:<table width="”80%”"> atau<table width="”600”">valign=”...” Perataan secara vertikal darisuatu cell.(top, middle, bottom)bordercolor=”...” Warna borderbgcolor=”...” Warna background tabel,baris atau cellAgar cell dalam tabell kosong, maka dapat digunakan perintah Contoh 1:Tulislah perintah HTML untuk membuat tabel seperti berikut ini:Satu DuaTiga EmpatJawab:<html><head><title> Latihan Table</title></head><body><table border="”1”"><tr><td align="”center”">Satu</td><td align="”center”">Dua</td></tr><td align="”center”">Tiga</td><td align="”center”">Empat</td></table></body></html>Contoh 2:Tulislah perintah HTML untuk membuat tabel seperti berikut ini:SatuDua TigaJawab:<html><head><title> Latihan Table Dua </title></head><body><table border="”1”"><tr><td colspan="”" align="”center”">Satu</td></tr><tr><td align="”center”">Dua</td><td align="”center”">Tiga</td></tr>6</table></body></html>PERTEMUAN 1Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yangmaksimal ! Pahami setiap perintah/tag HTML-nya !<html><head><title> Latihan Pertemuan 2 </title></head><body bg text="#FFFFFF" style="color:#000000;"><table border="1" align="center" width="80%"><tr><td colspan="2" align="center" height="100" bg style="color:#3A2BD1;"><span style="font-family:Arial;font-size:16;">SITUSKU.COM </span><br /><hr width="500"> <br /><marquee direction="right">Terdepan Dalam Berita danGosip</marquee></td></tr><tr valign="top"><td width="200"height="450" bgcolor="green">Home</td><td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b><br />Situsku.Com akan selalu konsisten dengan berita-berita terbaru darisegala penjuru Indonesia.<br /><br />Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosipartis dan kuliner di Indonesia.</td></tr></table></body></html>PERTEMUAN 2Buatlah halaman situs dengan layout seperti berikut ini:JUDUL.COM“Slogan Here”HomeProfileGalleryKonten/Isi Situs/GambarCopyright © JUDUL.COMAll right reserved 20088Ketentuan:1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll)2. Jumlah halaman = 3, denga ketentuan:a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dllb. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dllc. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda3. Setiap halaman harus memuat hyperlink/link4. Halaman Gallery wajib memuat gambar-gambar5. Usahakan untuk menambahkan link-image pada halaman Gallery- Selamat Mengerjakan -Modul dapat di download di:More tutorial:http://www.htmlcodetutorial.com
Contoh ini mungkin sangat mendasar dan tentu saja anda tidak puas dengan
ini. Masih banyak kode-kode source lainnya untuk bisa menampilkan
sebuah halaman web supaya lebih cantik dan seperti yang kita inginkan.
Saatnya anda mulai untuk menyiapkan diri baik fisik maupun mental yang
siap untuk untuk memepelajari html ini.
Bagaimana, apakah anda sudah siap Belajar HTML?
Pertanyaan ini sederhana tapi cukup semangat. Ini tentu saja adalah
keinginan seorang pemula untuk bisa belajar HTML. lalu dimanakah kita
bisa mempelajarinya?
Tempat
belajar HTML terlengkap dan benar-benar bisa membuat anda lebih dalam untuk pintar bahasa pemograman web adalah di
www.w3schools.com/html/ atau bisa juga di
www.w3.org/html/.
Sebagai motivasi, saya sarankan anda belajar dengan serius tentang HTML
disana, karna saya yakin : ketika anda belajar dengan sepenuh hati, maka
anda pasti bisa sekalipun pemula bakan gaptek internet. so, semua bisa
dipelajari...