Breaking

Dasar HTML

    Kali ini saya akan memberikan contoh HTML dasar. Untuk yang belum mengerti apa itu HTML anda bisa klik disini. Sebelum memulai pastikan anda sudah memiliki text editor. Ok langsung saja, saya anggap sudah memasang semua, jika belum memasang anda bisa klik disini.

    Untuk memulai membuat dokumen HTML harus di awali dengan mendeklarasikan type dokumen : <!DOCTYPE html>. Dokumen HTML itu sendiri di awali dengan <html> dan di akhiri dengan </html> . Bagian yang terlihat dari HTML adalah antara <body>...</body>. Di dalam body inilah yang nantinya digunakan untuk menampilkan semua tulisan-tulisan atau desain web kita.
  
    Anda tidak perlu cemas apabila ada tag yang belum di mengerti dalam tutorial HTML ini. Silahkan langsung coba saja beberapa contoh tag dasar HTML yang dijelaskan di bawah ini. Oke langsung mulai saja.
nb: untuk melihat hasilnya anda bisa langsung membuka filenya di browser. format filenya .html

1. Heading

Tag heading umumnya digunakan untuk membuat header / pada halaman website. Tag untuk heading terdiri dari tag <h1> sampai dengan tag <h6>. Sebagai contoh heading pada HTML silahkan coba kode HTML berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</body>
</html>


2. Paragraf

Untuk membuat teks dalam sebuah paragraf pada dokumen HTML digunakan tag <p> yang merupakan tag pembuka dan diakhiri dengan tag penutup </p> Sebagai contoh membuat paragraf pada HTML, silahkan coba contoh kode HTML berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <p>Ini adalah paragraf yang pertama</p>
    <p>Dan ini adalah paragraf yang kedua</p>
</body>
</html>


3. Link

Hyperlink atau link (tautan) adalah sebuah teks atau gambar yang jika di klik akan membuat browser membuka halaman HTML lain. Jika sebuah link ditunjuk dengan mouse, biasanya kursor akan berubah menjadi bentuk menyerupai tangan kecil. Untuk membuat link digunakan tag <a> dan di akhiri dengan </a>. Kalian harus mempunyai dokumen belajar.html.Sebagai contoh link silahkan coba kode HTML berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <a href="www.facebook.com">Facebook</a>
    <a href="belajar.html">Belajar</a>
</body>
</html>

4. Image

Seperti dijelaskan sebelum, dokumen HTML selain bisa menampilkan teks bisa juga untuk menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag <img>. Kalian harus punya gambar telebih dahulu, taruh gambar tersebut satu folder dengan dokumen HTML ini, dan beri nama gambar.jpg untuk formatnya kalian cari yang sama aja yaitu .jpg supaya bisa di jalankan.

Silahkan coba kode HTML berikut ini :

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <img src="gambar.jpg" alt="Gambar Saya" width="100" height="100">
</body>
</html>

5. Tombol

Untuk membuat tombol anda bisa menggunakan <button> dan di akhiri dengan </button>

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <button type="submit">Tombol 1</button>
    <button type="submit">Tombol 2</button>
</body>
</html>


Sekian itu saja penjelasan singkat dari saya mengenai dasar html. Jika ada pertanyaan silahkan komentar di bawah.

Terimakasih telah berkunjung :-) 

Tidak ada komentar:

Diberdayakan oleh Blogger.