in

Belajar Dasar HTML untuk Pemula (Lengkap)

HTML adalah bahasa pemrograman yang digunakan untuk membuat web. HTML sangat tepat sekali untuk mengawali anda untuk menjadi seorang progammer web.

HTML itu sendiri adalah singkatan dari Hyper Markup Text Language yang diciptakan oleh bapak Tim Berners-lee. Dan kerennya lagi seorang progammer web mendesain tampilan web hanya dengan mengetikkan baris kode bahasa pemrograman. Magic.!.

Sesuai dengan judulnya, silahkan lanjut kebawah.

Apa yang dibutuhkan.? 

    Kemauan untuk belajar Sebuah program text editor untuk tempat penulisan kode (Coding).

Anda bisa menggunakan notepad yang tersedia di windows. tapi saya sarankan untuk menggunakan program yang didesain khusus untuk koding. saya biasa menggunakan Sublime Text, atau text editor lainnya.

Baca : 5 daftar text editor yang mudah digunakan

Materi:

    Menyiapkan ProjectStruktur Dasar HTMLTipografiList / DaftarTabelMenyisipkan Gambar


Menyiapkan Project

Biasanya para programmer web membuat folder tersendiri untuk 1 proyek web, 1 level didalam folder tersebut dinamakan dengan root

    Buat satu folder untuk project pertama anda.Setelah membuat folder projectnya, buka menggunakan notepad atau sublime textBuat satu file dengan nama terserah namun berekstensi .html.
    contoh : index.html.

Struktur Dasar HTML

Didalam bahasa pemrograman HTML, sistem penulisan kode memakai sistem buka tutup tag.
misal, tag <html> ditutup dengan </html> , tag <head> ditutup dengan </head> dan sebagainya.

Secara umum, struktur html sederhana seperti berikut, Tuliskan Kode dibawah pada text editor anda:

<html>
<head>
isinya head
</head>
<body>
isinya body
</body>
</html>
Maka kode diatas dapat diartikan seperti gambar dibawah

Didalam tag <head>, berisi kumpulan pendukung dokumen, seperti judul tab <title>, memanggil file css <link>, dan bahkan memuat file javascript <script>.

Sementara semua yang ada didalam tag <body>, akan tampil didalam halaman. Ada banyak sekali tag yang dapat anda gunakan.

Coba ketikkan kode seperti dibawah dan jalankan di browser:
<html>
<head>
<title>Ini Judulnya</title>
</head>
<body>
Ini yang tampil di web browser
</body>
</html>
Penjelasan

    Teks yang ada pada <body> muncul di browser, sementara pada tag <head> tidak muncul di halaman browser.Namun <title> tampil sebagai nama tab karena memang sudah menjadi fungsinya

Tipografi
Tipografi singkatnya adalah model penulisan. Pada HTML sendiri sudah disediakan tag yang menangani desain tipografi, seperti: Heading, Bold, Italic, Underline, dan masih banyak yang lainnya. Mari kita bahas

    Heading    <h1>, <h2>, …. <h6> 

Heading adalah tulisan besar yang memfokuskan kalimat didalamnya. Biasa digunakan untuk nama website, judul dan lain sebagainya. 

Contoh
<html>
<head>
<title>Belajar html</title>
</head>
<body>
<h1>Ini contoh Heading 1</h1>
<h2>Ini contoh Heading 2</h2>
<h3>Ini contoh Heading 3</h3>
<h4>Ini contoh Heading 4</h4>
<h5>Ini contoh Heading 5</h5>
<h6>Ini contoh Heading 6</h6>
</body>
</html>

Hasil Output

Ini contoh Heading 1

Ini contoh Heading 2

Ini contoh Heading 3

Ini contoh Heading 4

Ini contoh Heading 5
Ini contoh Heading 6

    Cetak huruf (tebal, miring, underline dan coretan)

Pada saat kita mengetikkan dokumen pada microsoft word (misalnya). Kita tak pernah luput dari model huruf ini. Yaitu cetak tebal, miring dan garis bawah, Sesekali menggunakan Strike / coretan.Kita juga dapat menggunakannya pada html.tag <b> untuk mencetak huruf tebaltag <u> untuk mencetak huruf dengan garis bawahtag <i> untuk mencetak huruf miringtag <ss> untuk mencetak huruf seperti dicoret
berikut demonya
<html>
<head>
<title></title>
</head>
<body>
<b>Ini huruf tebal</b><br>
<u>Ini huruf bergaris bawah</u><br>
<i>Ini huruf miring</i><br>
<ss>Ini huruf yang dicoret</ss><br>
</body>
</html>
Hasil Output
Ini huruf tebal
Ini huruf bergaris bawah
Ini huruf miring
Ini huruf yang dicoret

List / Daftar

    Daftar item tanpa nomor <ul>


<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Urutan daftar 1</li>
<li>Urutan daftar 2</li>
<li>Urutan daftar 3</li>
<li>Urutan daftar 4</li>
<li>Urutan daftar 5</li>
</ul>
</body>
</html>
Hasil Output

    Urutan daftar 1Urutan daftar 2Urutan daftar 3Urutan daftar 4Urutan daftar 5

    Daftar item dengan nomor <ol>


<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Urutan daftar 1</li>
<li>Urutan daftar 2</li>
<li>Urutan daftar 3</li>
<li>Urutan daftar 4</li>
<li>Urutan daftar 5</li>
</ol>
</body>
</html>
Hasil OutputUrutan daftar 1Urutan daftar 2Urutan daftar 3Urutan daftar 4Urutan daftar 5

    Deskripsi Item


<html>
<head>
<title></title>
</head>
<body>
<dl>
<dt>Mouse</dt>
<dd>Inputan yang digunakan komputer sebagai penggerak kursor</dd>
</dl>
<dl>
<dt>LCD</dt>
<dd>Sejenis layar yang menggunakan air kristal dengan diterangi oleh backlight</dd>
</dl>
<dl>
<dt>Android</dt>
<dd>Sistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler</dd>
</dl>
</body>
</html>
Hasil OutputMouseInputan yang digunakan komputer sebagai penggerak kursor LCDSejenis layar yang menggunakan air kristal dengan diterangi oleh backlight AndroidSistem operasi yang dibuat oleh google dan dijalankan pada perangkat seluler

Tabel

    Tabel standar

Untuk membuat tabel pada html, kita perlu mengetahui struktur tabel yang diterapkan pada html. Tabel HTML menggunakan 3 tag utama yaitu <table>, <tr>, <td>
<table> adalah tag yang mewakili seluruh komponen tabel
<tr> adalah baris dari suatu tabel
<td> adalah cell dari suatu baris.
<th> adalah cell untuk header, perbedaannya dengan td adalah pada th tulisan lebih tebal.

pada kondisi bawaan, tabel tidak memiliki border / garis tepi. Sehingga kita harus menambahkan atribut pada tag <table> berupa border=”1″ (1 berarti memiliki ketebalan garis level 1)
Silahkan coba kode berikut:

<html>
<head>
<title></title>
</head>
<body>
<table border=”1″>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jl. Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Jl. Surabaya</td>
</tr>
<tr>
<td>3</td>
<td>Ahmad</td>
<td>Jl. Semarang</td>
</tr>
</table>
</body>
</html>

Hasil Output No Nama Alamat 1 Ahmad Jl. Jakarta 2 Budi Jl. Surabaya 3 Ahmad Jl. Semarang

    Tabel Gabungan

 untuk menggabung cell, anda dapat menggunakan
rowspan=”jumlah_baris”  : untuk menggabungkan baris
colspan=”jumlah_kolom  : untuk menggabungkan kolom

<html>
<head>
<title></title>
</head>
<body>
<table border=”1″>
<tr>
<th rowspan=”2″>No</th>
<th rowspan=”2″>Nama</th>
<th rowspan=”2″>Alamat</th>
<th colspan=”2″>Orang Tua</th>
</tr>
<tr>
<th>Ayah</th>
<th>Ibu</th>
</tr>
<tr>
<td>1</td>
<td>Ahmad</td>
<td>Jl. Jakarta</td>
<td>Adi</td>
<td>Rani</td>
</tr>
<tr>
<td>2</td>
<td>Budi</td>
<td>Jl. Surabaya</td>
<td>Saputra</td>
<td>Dinda Ayu</td>
</tr>
<tr>
<td>3</td>
<td>Ahmad</td>
<td>Jl. Semarang</td>
<td>Saefudin</td>
<td>Rohmah</td>
</tr>
</table>
</body>
</html>
Hasil Output No Nama Alamat Orang Tua Ayah Ibu 1 Ahmad Jl. Jakarta Adi Rani 2 Budi Jl. Surabaya Saputra Dinda Ayu 3 Ahmad Jl. Semarang Saefudin Rohmah
Menyisipkan Gambar

Untuk menyisipkan gambar, tag yang digunakan adalah

<img src=”alamat_gambar”>

Pada alamat gambar, anda dapat memberikan alamat di internet (komputer harus terkoneksi internet) ataupun gambar lokal yang ada dalam komputer anda.

Pada gambar lokal, gambar harus satu folder dengan file html, sehingga menjadi
<img src=”gambar.png”>. Atau anda dapat menyimpan gambar didalam folder lebih dalam misal
<img src=”images/gambar.png”.
Jangan lupa untuk memberikan ekstensi file seperti png, jpeg, bmp dan lain sebagainya pada alamat

<html>
<head>
<title></title>
</head>
<body>
<h2>Dibawah adalah gambar cover dari artikel ini</h2>
<img src=”https://3.bp.blogspot.com/-Pa9Ep3Ugors/VwsA3vxEtkI/AAAAAAAACDs/U2t1_d9NXjotNYra_pQTCI4lRDEOPZT6g/s400/Belajar.jpg”>
</body>
</html>
Hasil Output

Dibawah adalah gambar cover dari artikel ini

Written by admin