Selamat pagi/siang/sore/malam teman-teman. Kali ini saya coba ketik tutorial dasar HTML buat temen-temen yang baru mau belajar tentang web programming. Semoga bermanfaat.
Definisi HTML
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. -Dikutip dari WikipediaMengapa belajar HTML?
Setiap halaman web yang temen-temen lihat menggunakan sebuah bahasa pemrograman bernama HTML. HTML dapat dianalogikan sebagai sebuah kerangka yang membentuk setiap stuktur halaman web. Pada tutorial ini, kita akan gunakan HTML untuk menambahkan paragrap, heading, gambar dan link/tautan ke dalam sebuah halaman web. Lihat contoh berikut :<!DOCTYPE html>
<html>
<p>Hello World</p>
</html>
Perhatikan kode dengan tanda kurung <>, itulah HTML. Seperti bahasa pemrograman lain, HTML memiliki penulisan khusus.
Editor, Ekstensi, dan Cara Buka File HTML
HTML dapat dibuat hanya menggunakan Text Editor biasa seperti notepad, atau juga dapat digunakan software text editor lain seperti Notepad++ (free), sublime, atau text & graphical editor seperti Adobe Dreamweaver.Jika ingin mencoba menggunakan Notepad++, bisa download melalui link berikut :
Download Notepad++ 6.7.9.2
Secara default, sebuah file HTML memiliki ekstensi file .html (atau .htm). Akan tetapi, dalam integrasi dengan bahasa pemrograman yang lain (contoh : PHP), maka file ekstensi yang digunakan juga harus mengikuti bahasa pemrograman tersebut (contoh .php). Maka dari itu, code HTML yang sudah dibuat pada Editor, harus di-save dengan ekstensi yang sesuai.
File .html yang sudah di-save dapat langsung dibuka (double click) untuk melihat hasilnya melalui browser.
HTML dan CSS
HTML merupakan singkatan dari HyperText Markup Language. Hypertext yang berarti "text dengan tautan (link) di dalamnya." Setiap saat kita klik pada sebuah kata yang membawa kita ke dalam sebuah halaman web, berarti kita telah meng-klik sebuah hypertext.Markup language merupakan sebuah bahasa pemrograman yang digunakan untuk mengubah text menjadi text itu sendiri atau menjadi suatu hal yang lain pada halaman web. HTML dapat mengubah text menjadi gambar, link, tabel, daftar berurut, dan lain-lain.
Apa yang membuat sebuah halaman web menjadi terlihat bagus? Itu merupakan efek penggunaan CSS—Cascading Style Sheets. CSS dianalogikan sebagai kulit dan makeup yang membungkus kerangka yang dibuat HTML. Kali ini, kita akan belajar mengenai HTML terlebih dahulu, dan nanti Insyaallah saya akan jabarkan juga tutorial mengenai CSS.
Hal pertama yang harus dilakukan adalah membuat kerangka pada halaman.
a. Selalu tambahkan <!DOCTYPE html> pada baris pertama. Hal ini bertujuan untuk memberitahu browser bahasa apa yang digunakan (dalam hal ini HTML).
b. Selalu tambahkan <html> pada baris berikutnya. Ini adalah permulaan kode HTML.
c. Selalu tambahkan </html> pada baris terakhir. Ini adalah penutup kode HTML.
Terminologi Dasar
Semua yang berada di dalam tanda <> disebut dengan tags. Hampir setiap tags memiliki pembuka dan penutup.Contoh tag pembuka: <html>
Contoh tag penutup: </html>
Tags dapat dianalogikan sebagai tanda kurung. Ketika ada kurung buka, harus ada kurung tutup. Selain itu, tags juga harus ditutup dengan urutan yang benar. Tag pembuka yang terakhir yang harus ditutup terlebih dahulu, seperti contoh di bawah.
Sebagai latihan, coba ketik kode berikut, save dengan format .html, kemudian lihat hasilnya :
<!DOCTYPE html>
<html>
Hello World
</html>
Membuat Head
Ada 2 bagian pada file HTML: head dan body. Kita mulai dengan head.Head dapat menampung informasi mengenai file HTML yang dibuat, seperti judul halaman web (title). Title adalah tulisan yang kita lihat pada baris judul browser atau tab halaman. Sebagai contoh, judul halaman web ini yaitu "Dasar-dasar HTML Bagian 1 | RNetworks | Berbagi ilmu IT pada Blog".
Sebagai latihan, coba kode di bawah ini untuk membuat head pada HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
</html>
HTML Body
Body merupakan tempat menyimpan konten HTML seperti text, gambar, dan link. Konten pada body merupakan apa yang dapat dilihat langsung pada halaman web.Body di simpan di dalam tag <html>, setelah tag <head> . Sebagai contoh, perhatikan dan coba kode di bawah ini :
<html>
<head>
<title>Web Saya</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>
Jika kita save lalu buka file HTML dengan kode di atas, maka akan menghasilkan tulisan :
Paragraf 1
Paragraf 2
<!DOCTYPE html>
<html>
<head>
<title>
Headings & Paragraphs
</title>
</head>
<body>
<h1>Ini h1</h1>
<p>Ini paragraf di dalam h1</p>
<!DOCTYPE html>
<html>
<head>
<title>Contoh Link</title>
</head>
<body>
<a href="http://reznetworks.blogspot.com">RNetworks</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="D:\folder\gambar.jpg" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Link & Image</title>
</head>
<body>
<a href="http://www.wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/en/3/34/ISync_icon.png" /></a>
</body>
</html>
Bersambung ke Dasar-dasar HTML Bagian 2
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>
Jika kita save lalu buka file HTML dengan kode di atas, maka akan menghasilkan tulisan :
Paragraf 1
Paragraf 2
Headings & Paragraf pada HTML
Heading pada HTML merupakan sub judul dari konten sebuah halaman web. Heading memiliki berbagai jenis ukuran text dengan font weight (ketebalan huruf) yang berbeda dengan paragraf biasa, h1 dengan penulisan <h1>Teks Heading</h1> untuk ukuran paling besar, dan h6 dengan penulisan <h6>Teks Heading</h6> untuk ukuran paling kecil. Hal ini dapat memudahkan cara penulisan paragraf yang bercabang.
Paragraf pada HTML seperti layaknya menulis paragraf pada Ms Word atau text editor lainnya. Paragraf memiliki cara penulisan <p>Teks Paragraf</p>. Setiap tag penutup paragraf, berarti sebuah paragraf dibuat, dan akan membuat paragraf baru pada baris selanjutnya untuk teks berikutnya. Untuk penulisan lebih lanjut, dapat disesuaikan alignment, jenis font, warna pada paragraf.
Untuk melihat perbandingan antara Heading dan Paragraf, dapat dicoba code berikut :
<html>
<head>
<title>
Headings & Paragraphs
</title>
</head>
<body>
<h1>Ini h1</h1>
<p>Ini paragraf di dalam h1</p>
<p>Ini paragraf lain di dalam h1</p>
<h2>Ini h2</h2>
<p>Ini paragraf di dalam h2</p>
<h3>Ini h3</h3>
<p>Ini paragraf di dalam h3</p>
<h4>Ini h4</h4>
<p>Ini paragraf di dalam h4</p>
<h5>Ini h5</h5>
<p>Ini paragraf di dalam h5</p>
<h6>Ini h6</h6>
<p>Ini paragraf di dalam h6</p>
</body>
</html>
<h2>Ini h2</h2>
<p>Ini paragraf di dalam h2</p>
<h3>Ini h3</h3>
<p>Ini paragraf di dalam h3</p>
<h4>Ini h4</h4>
<p>Ini paragraf di dalam h4</p>
<h5>Ini h5</h5>
<p>Ini paragraf di dalam h5</p>
<h6>Ini h6</h6>
<p>Ini paragraf di dalam h6</p>
</body>
</html>
Link pada HTML
Bagaimana cara agar membuat seseorang dapat berpindah dari satu halaman web ke halaman lain? Kita dapat menggunakan Hyperlink, atau disingkat dengan link. Dengan Link, kita dapat membuat sebuah elemen pada konten HTML (Text, gambar, dll) dapat diklik dan memindahkan user ke halaman lain, baik halaman lain yang berada dalam satu situs web, maupun ke halaman situs web lain. Caranya :
Pertama, ada sebuah tag pembuka <a> dan buat sebuah attribute dengan nama href pada tag tersebut yang mengarah pada sebuah URL sebuah halaman web, contoh http://reznetworks.blogspot.com.
Setelah itu, tambahkan elemen (contoh teks) sebagai deskripsi/konten untuk di-klik.
Terakhir, tambahkan closing tag </a> setelah konten tersebut.Coba kode berikut untuk untuk memahami lebih lanjut :
<html>
<head>
<title>Contoh Link</title>
</head>
<body>
<a href="http://reznetworks.blogspot.com">RNetworks</a>
</body>
</html>
Menambahkan Images pada HTML
Image atau gambar pada HTML dapat dimasukkan/dipanggil menggunakan tag <img>. Tag ini sedikit berbeda dengan tag yang lain. Jika tag lain memasukkan konten diantara opening & closing tag, pada tag img kita memberitahukan letak gambar menggunakan atribut src. Tag ini berbeda juga karena tidak menggunakan closing tag, tetapi tag img memiliki tanda / di dalam tagnya sebagai penutup. Sehingga, formatnya akan seperti : <img src="url" />. URL pada img dapat berupa link gambar dari situs lain, atau gambar pada suatu direktori/folder di komputer kita.
Berikut contoh code penggunaan img pada HTML :
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="D:\folder\gambar.jpg" />
</body>
</html>
Menambahkan Link pada Image
Sebuah gambar/image juga seringkali dibuat menjadi sebuah link dengan tujuan untuk lebih menarik minat pengunjung halaman web mengklik pada link tersebut. Untuk menambahkan link pada image dalam HTML, masukkan tag <img> diantara tag <a></a>. Perhatikan contoh berikut :<!DOCTYPE html>
<html>
<head>
<title>Link & Image</title>
</head>
<body>
<a href="http://www.wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/en/3/34/ISync_icon.png" /></a>
</body>
</html>
Bersambung ke Dasar-dasar HTML Bagian 2
Dasar-dasar HTML Bagian 1
Reviewed by MCH
on
July 15, 2015
Rating:
Reviewed by MCH
on
July 15, 2015
Rating:
No comments: