» » » Tutorial HTML LENGKAP

Tutorial HTML LENGKAP

LAST UPDATE : April 30th 2016

          Halo kalian para blog viewers wkwkwk :v . Kali ini saya akan memposting tentang "HTML". HTML (Hypertext Markup Language) yaitu bahasa markah yang digunakan untuk membuat halaman web (selengkapnya bisa browsing :v ). Untuk belajar HTML, kalian bisa menggunakan software Adobe Dreamweaver atau menggunakan Notepad dengan format simpanan .html . Untuk pemula lebih baik menggunakan Notepad saja :D .
          Untuk awal dalam pembuatan web menggunakan tag utama :

<html>
<head><title>Judul halaman web</title></head>
<body>Isi/badan halaman web</body>
</html>

Keterangan:

<title></title>:untuk memberi judul halaman web
<body></body>:untuk mengisi halaman web (merupakan badan web)
          -Untuk membuat paragraf baru bisa menggunakan tag <p></p>
          -Untuk memberi baris baru bisa menambahkan kode <br>
          -Untuk memberi header bisa menambahkan tag <h> mulai dari <h1>, <h2>, <h3> dan seterusnya.

Contoh :
<html>
<head><title></title></head>
<body>
<p>Paragraf baru</p><br><h1>Header 1</h1>
<br><h2>Header 2</h2>
<br><h3>Header 3</h3>
</body>
</html>

Hasil :
Paragraf baru

Header 1


Header 2


Header 3

          Untuk memberi garis horzontal bisa menambahkan kode <hr> dan untuk memberi warna pada garis bisa menambahkan atribut color.
Contoh :
<hr color="yellow">

Hasil :

Teks
TagFungsiKodeHasil
<b></b>Menebalkan teks<b>Tebal</b>Tebal
<i></i>Memiringkan teks<i>Miring</i>Miring
<u></u>Memberi garis bawah<u>Garis bawah</u>Garis bawah
<sub></sub>Subscript<sub>Sup</sub>scriptSupscript
<sup></sup>Superscript<sup>Super</sup>scriptSuperscript
<center></center>Menengahkan teks<center>Tengah</center>
Tengah

Font
          Untuk mengubah gaya suatu huruf atau teks bisa menggunakan tag <font>. Didalam tag ini bisa ditambahkan berbagai atribut seperti color, size, dan face.

Contoh penggunaan tag font :

<font color="blue" size="20" face="Times New Roman">Teks ini bergaya Times New Roman</font>

Hasil : Teks ini bergaya Times New Roman

Keterangan : Untuk warna pada HTML, kalian juga bisa menggunakan kode warna seperti #0000 (warna hitam). Kode warna kalian juga bisa browsing diweb lain untuk lebih lengkapnya :D .

Link
          Untuk memberi link, kalian bisa menggunakan tag <a>. Atributnya cukup menggunakan href.

Contoh :
<a href="http://syarifahaini1.blogspot.com/2015/06/pertama-kali-main-lost-saga.html">Ini link menuju blog Syarifah tentang Pertama Kali Main Lost Saga</a>

Hasil : Ini link menuju blog Syarifah tentang Pertama Kali Main Lost Saga

Gambar
          Untuk menampilkan gambar, bisa menggunakan tag <img>. Berbagai atribut dalam tag ini yaitu src, alt, name, border, height, dan width.

Contoh untuk berlatih :

Apabila gambar terletak dalam satu folder dengan file-file .html kalian :
<img src="Gambar Rumah.jpg" alt="Gambar Rumah.jpg" border="1" height="400" width="500"></img>

Apabila gambar rumah terdapat dalam folder New Folder, didalam folder itu ada gambar rumah (gambar tidak dalam satu folder dengan file .html) :
<img src="New Folder/Gambar Rumah.jpg" alt="Gambar Rumah.jpg" border="1" height="400" width="500"></img>

Apabila gambar berada disitus lain (seperti saya ingin menampilkan gambar emotikon facebook yang berada diblog saya) :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0798udFaE1xQNxfIkBK2xJcbB14V8KvLg16UWVV-O81vDE9iLRrWcWBTdilDPtjBuWHRKIRSnzDMPnjJUS8hD1sx6jyxyzDvTuIYpTPwjG8DfjzuUM6pqTJjmgoNLIN0AFl7j8i5hMI/s1600/l.jpeg" alt="1.jpeg" border="1"></img>

Hasil :

1.jpeg
Keterangan : Gambar sengaja tidak menggunakan atribut height dan width. Jadi ukuran gambar asli, apabila ingin diatur juga bisa. Untuk mengetahui alamat gambar pada web, bisa membuka gambar dan melihat kodenya pada alamat url.

List/daftar
          Untuk menampilkan daftar dengan angka, bisa menggunakan tag <ol> disertai tag <li>.
Contoh :
<html>
<head><title></title></head>
<body>
<ol>JurusanTI :
<li>Rekayasa Perangkat Lunak</li>
<li>Teknik Komputer dan Jaringan</li>
<li>Multimedia</li></ol>
</body>
</html>

Hasil :
    JurusanTI :
  1. Rekayasa Perangkat Lunak
  2. Teknik Komputer dan Jaringan
  3. Multimedia
          Untuk menampilkan daftar dengan romawi, atau dengan huruf bisa menambahkan type.
Contoh :
<html>
<head><title></title></head>
<body><ol type="I">JurusanTI :
<li>Rekayasa Perangkat Lunak</li>
<li>Teknik Komputer dan Jaringan</li>
<li>Multimedia</li></ol>
</body>
</head>

Hasil :
    JurusanTI :
  1. Rekayasa Perangkat Lunak
  2. Teknik Komputer dan Jaringan
  3. Multimedia
Contoh :
<html>
<head><title></title></head>
<body><ol type="A">JurusanTI :
<li>Rekayasa Perangkat Lunak</li>
<li>Teknik Komputer dan Jaringan</li>
<li>Multimedia</li></ol>
</body>
</html>

Hasil :
    JurusanTI :
  1. Rekayasa Perangkat Lunak
  2. Teknik Komputer dan Jaringan
  3. Multimedia
          Untuk menampilkan daftar dengan simbol, bisa menggunakan tag <ul> disertai tag <li>.
Contoh :
<html>
<head><title></title></head>
<body><ul>Berbagai jejaring sosial :
<li>Facebook</li>
<li>Twitter</li>
<li>Ask.fm</li></ul>
</body>
</html>

Hasil :
    Berbagai jejaring sosial :
  • Facebook
  • Twitter
  • Ask.fm
Animasi
          Untuk memberi efek gerak pada tulisan/gambar.
Contoh :
<html>
<head><title></title></head>
<body>
<marquee>Syarifah Aini cantik pake bingitz :v</marquee>
</body>
</html>

Hasil :
Syarifah Aini cantik pake bingitz :v

Contoh :
<html>
<head><title></title></head>
<body>
<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-KmCzt2x3IQMSmjnAHY2v31PzmXSRo2pZgN4mnXgzxuBVlp6a29D1W7tQiAcZcLLyX8ZYfZ4IgzuwDjh9lKErsmXdkIRbwMyRqHkP86xziXBvrwW_HYltq3D1vgMdz6rXLw71H5ENR0/s1600/LostSagaShot_160118_034337.jpg"></img></marquee>
</body>
</html>

Hasil :

Tabel
          Untuk membuat tabel, kalian bisa menggunakan tag <table></table>.
Contoh :
<html>
<head><title></title></head>
<body><table border="1">
<tr>
<td><center>No.</center></td><td><center>Kelas</center></td><td><center>Jurusan</center></td>
</tr>
<tr>
<td><center>1</center></td><td><center>X</center></td><td><center>RPL</center></td>
</tr>
<tr>
<td><center>2</center></td><td><center>XI</center></td><td><center>TKJ</center></td>
</tr>
<tr>
<td><center>3</center></td><td><center>XII</center></td><td><center>MM</center></td>
</tr>
</table>
</body>
</html>

Hasil :
No.
Kelas
Jurusan
1
X
RPL
2
XI
TKJ
3
XII
MM

Keterangan : Tag <tr> digunakan untuk membuat baris baru. Tag <td> digunakan untuk membuat kolom baru.

          Untuk menggabungkan 2 kolom bisa menambahkan atribut colspan pada tag <td>.
Contoh :

<html>
<head><title></title></head>
<body><table border="1">
<tr>
<td colspan="2"><center>A</center></td><td>B</td>
</tr>
<tr>
<td>C</td><td>D</td><td>F</td>
</tr>
</table>
</body>
</html>

Hasil :
A
B
CDF

          Untuk menggabungkan 2 baris bisa menambahkan atribut rowspan pada tag <td>.
Contoh :
<html>
<head><title></title></head>
<body><table border="1">
<tr>
<td rowspan="2"><center>Satu</center></td><td>Dua</td><td>Tiga</td>
</tr>
<tr>
<td>Empat</td><td>Lima</td>
</tr>
</table>
</body>
</html>

Hasil :
Satu
DuaTiga
EmpatLima

          Untuk menggabungkan baris dan kolom juga bisa.
Contoh :
<html>
<head><title></title></head>
<body>
<table border="1" bordercolor="blue">
<tr>
<td colspan="2"><center>Satu</center></td><td>Dua</td></tr>
<tr><td rowspan="2"><center>Tiga</center></td><td>Empat</td><td>Lima</td></tr>
<tr><td colspan="2"><center>Enam</center></td>
</tr>
</table>
</body>
</html>

Hasil :
Satu
Dua
Tiga
EmpatLima
Enam

          Untuk memberi warna pada garis tabel bisa menambahkan atribut bordercolor pada tag <table>.
Contoh :
<html>
<head><title></title></head>
<body>
<table border="1" bordercolor="blue">
<tr>
<td><center>A</center></td><td>B</td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td>
</tr>
</table>
</body>
</html>

Hasil :
A
BC
DEF


          Untuk memberi warna pada tabel bisa menambahkan atribut bgcolor pada tag <table>.
Contoh :
<html>
<head><title></title></head>
<body><table border="1" bgcolor="blue">
<tr>
<td><center>A</center></td><td>B</td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td>
</tr>
</table>
</body>
</html>

Hasil :
A
BC
DEF

          Untuk memberi warna pada kotak tertentu dalam tabel bisa menambahkan atribut bgcolor pada tag <td>.
Contoh :
<html>
<head><title></title></head>
<body><table border="1">
<tr>
<td bgcolor="blue"><center>A</center></td><td>B</td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td>
</tr>
</table>
</body>
</html>

Hasil :
A
BC
DEF
Form

          Form biasanya digunakan untuk mengisi data seperti form log in/sign up.
Contoh :
<html>
<head><title></title></head>
<body>
Formulir Pendaftaran
<br>
<form>
Nama : <input type="text"></input>
<br>
Password : <input type="password"></input>
<br>
Alamat : <textarea></textarea>
<br>
 Tanggal lahir : <select name="tanggal">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="bulan">
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
</select>
 <select name="tahun">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<br>
Hobi : <input type="checkbox" name="hobi">Menggambar
<input type="checkbox" name="hobi">Mendesain Web
<input type="checkbox" name="hobi">Bermain Game
 <br>
<input type="submit" values="kirim"></input><input type="reset" values="reset"></input>
</form>
</body>
</html>

Hasil :

Formulir Pendaftaran
Nama :
Password :
Alamat :
Tanggal lahir :
Hobi : Menggambar Mendesain Web Bermain Game

Form dalam table (supaya tampilan form rapi).

Contoh :
<html>
<head><title></title></head>
<body>
Formulir Pendaftaran
<br>
<table>
<form>
<tr>
<td>Nama</td><td>:</td><td colspan="3"><input type="text"></input></td>
</tr>
<tr>
<td>Password</td><td>:</td><td colspan="3"><input type="password"></input></td>
</tr>
<tr>
<td>Alamat</td><td>:</td><td colspan="3"><textarea></textarea></td>
</tr>
<tr>
<td>Tanggal lahir</td><td>:</td><td><select name="tanggal">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td><select name="bulan">
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
</select></td>
<td><select name="tahun">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select></td>
</tr>
<tr>
<td>Hobi</td><td>:</td><td><input type="checkbox" name="hobi">Menggambar</td>
<td><input type="checkbox" name="hobi">Mendesain Web</td>
<td><input type="checkbox" name="hobi">Bermain Game</td>
</tr>
<tr>
<td><input type="submit" values="kirim"></input></td><td colspan="4"><input type="reset" values="reset"></input></td>
</tr>
</form>
</table>
</body>
</html>

Hasil :

Formulir Pendaftaran


Nama:
Password:
Alamat:
Tanggal lahir:
Hobi:Menggambar Mendesain Web Bermain Game

          Sekian postingan saya kali ini, semoga bermanfa'at bagi para pembaca termasuk anda :D . Apabila ada yang kurang jelas bisa bertanya kepada saya. SEMANGAT! dan terimakasih ^_^ .

39 Responses to "Tutorial HTML LENGKAP"

  1. Riyan SatriaMonday, June 22, 2015 at 7:49:00 PM PDT

    This comment has been removed by the author.

    ReplyDelete
  2. Riyan SatriaMonday, June 22, 2015 at 7:52:00 PM PDT

    This comment has been removed by the author.

    ReplyDelete
  3. UnknownMonday, June 22, 2015 at 8:13:00 PM PDT

    ini dia yg ane cari, langsung praktek! thx info nya

    ReplyDelete
  4. UnknownMonday, June 22, 2015 at 8:21:00 PM PDT

    ijin bookmark dulu mas tentang belajar html, tertarik nih kayaknya..

    ReplyDelete
  5. Akatsuki KamikazaMonday, June 22, 2015 at 8:24:00 PM PDT

    ane paling suka marquee gan

    ReplyDelete
  6. UnknownMonday, June 22, 2015 at 8:34:00 PM PDT

    Thanks yah mas ane tadinya ga bsa sekarang jadi lumayan bsa thanks yah

    ReplyDelete
  7. Ujung JalanMonday, June 22, 2015 at 8:45:00 PM PDT

    nah artikel ini yang ane cari
    ane masi gk terlalu paham html thanks gan info nya

    ReplyDelete
  8. ARYPRASTIYAMonday, June 22, 2015 at 9:05:00 PM PDT

    html emang bikin pusing gan

    ReplyDelete
    Replies
    1. Syarifah AiniMonday, June 22, 2015 at 9:48:00 PM PDT

      Kalau serius pasti bisa kok menguasainya :v .

      Delete
    2. Riyan SatriaThursday, June 25, 2015 at 2:04:00 AM PDT

      Html aja pusing, belom php. Kalo udah php, pusing 777 keliling

      Delete
    3. Syarifah AiniThursday, June 25, 2015 at 8:21:00 PM PDT

      Dicoba dulu :v . Berusaha dan berdo'a dulu :v .

      Delete
  9. UnknownMonday, June 22, 2015 at 9:39:00 PM PDT

    wah belajar html sambil ngeblog dan menghasilkan uang enak nih :D thanks ya bang

    ReplyDelete
  10. Syarifah AiniMonday, June 22, 2015 at 9:48:00 PM PDT

    Iya sama-sama :D .

    ReplyDelete
  11. aulia dian pMonday, June 22, 2015 at 11:39:00 PM PDT

    wah bermanfaat banget sharing ilmunya, dan jelas banget lagi :))
    jadi suka bacanya hehe..

    Domain .COM & Web Hosting Murah ; http://jaringanhosting.com

    ReplyDelete
  12. Darto Iwan Monday, June 22, 2015 at 11:40:00 PM PDT

    Tutorial sangat lengkap. Info juga lengkap. Makasih infonya mas.
    Jangan lupa BW + komen balik ke
    www.dunia-digital.com/bca/ ya :D

    ReplyDelete
  13. SalimanTuesday, June 23, 2015 at 12:03:00 AM PDT

    Belajar html memang sangat sulit,puyeng gan tapi pengen bisa hahaha

    ReplyDelete
    Replies
    1. Syarifah AiniTuesday, June 23, 2015 at 1:03:00 AM PDT

      Iya kalau serius pasti bisa. Kalau pusing dijeda dulu :v .

      Delete
  14. Husein Indra KusumaTuesday, June 23, 2015 at 12:20:00 AM PDT

    Nah ini yang ane cari .Cara buat tabel di htmlnya :3

    ReplyDelete
  15. Faizal KemalTuesday, June 23, 2015 at 12:21:00 AM PDT

    Baru nih keren lengkap dan bagus nih

    ReplyDelete
  16. UnknownTuesday, June 23, 2015 at 12:26:00 AM PDT

    Thaank buaat tutorrnyaa
    Tpi klo belajar otodidak kaya.a susah minimal ad tutor lengkap atau ad gru.a thu

    ReplyDelete
    Replies
    1. Syarifah AiniTuesday, June 23, 2015 at 1:07:00 AM PDT

      Iya, sama-sama :D . Iya kalau ada pertanya'an, tanya saja :D .

      Delete
  17. Hanafi Ady LaksonoThursday, June 25, 2015 at 9:22:00 PM PDT

    Wah, makasih infonya ifah ... :v

    ReplyDelete
  18. Riyan SatriaTuesday, July 21, 2015 at 8:59:00 AM PDT

    Kok nggak ditambahin sekalian link dofollow/nofollownya? Tanggung

    ReplyDelete
  19. topikmahendraThursday, March 24, 2016 at 9:07:00 AM PDT

    Hai.. :'V

    ReplyDelete
  20. EkaWednesday, April 27, 2016 at 5:21:00 AM PDT

    Jujur, mata ane pusing liatnya -,,-

    ReplyDelete

Beri Komentar ya... terimakasih :)

Subscribe to: Post Comments (Atom)