TUTORIAL HTML5 - BAB 1 BASIC

Bahasa pemrograman HTML5
Tutorial dari w3schools.com

BAB 1 – BASIC

Skrip HTML

Seperti yang dielaskan sebelumnya, Semua skrip HTML harus dimulai dengan pendeklarasian <!DOCTYPE html>, dan setelahnya diikuti dengan tag <html> dan skrip diakhiri dengan tag </html>, serta isi konten skrip berada di antara tag <body> dan </body>.

Contoh:


<!DOCTYPE html>

<html>

<body>


<h1>ini heading pertama</h1>

<p>ini isi paragraf</p>


</body>

</html>

Heading HTML

Heading html di definisikan dengan tag <h1> sampai <h6>, dengan

<h1> berupa heading ukuran paling besar

<h6> berupa heading ukuran paling kecil

Contoh:


<h1>ini heading h1</h1>

<h2> ini heading h2</h2>

<h3> ini heading h3</h3>

<h4> ini heading h4</h4>

<h5> ini heading h5</h5>

<h6> ini heading h6</h6>

Paragraf HTML

Paragraf html didefinisikan dengan tag <p>

Contoh:


<p>ini paragraf pertama</p>

<p>dan ini paragraf yang kedua</p>

Link HTML

Link html didefinisikan dengan tag <a>

Contoh:


<a href=http://www.hariancooding.blogspot.com>ini link menuju halaman yang lain</a>

Untuk destinasi link di tambahkan dengan atribut href. Atribut digunakan untuk memberikan informasi tambahan dari sebuah elemen.

HTML images

Untuk menyisipkan gambar menggunakan tag <img>, dengan atribut ‘src’ menerangkan tempat asal file, ‘alt’ membrikan teks alternatif, ‘width’ lebar gambar, ‘height’ panjang gambar.

Contoh:


<img src=”google.com” alt=”gambar kucing” width=”104” height=”142”>

Tombol HTML

Untuk menambahkan sebuah tombol atau button pada skrip html bisa menggunakan tag <button>

Contoh:


<button>klik di sini</button>

List HTML

Untuk membuat daftar dalam html digunakan tag <ul> untuk bullet/unordered list atau tag <ol> untuk number/ordered list, diikuti dengan tag <li> sebagai list item-nya.

Contoh:


<ul>

                <li>kopi</li>

                <li>teh</li>

                <li>susu</li>

</ul>

Tambahan

Sebisa mungkin selalu gunakan tag dengan huruf kecil dalam HTML karena lebih direkomendasikan oleh W3C, dan hal yang sama juga berlaku untuk tipe skrip XHTML.

berikut contoh skrip yang simple dan mengandung semua tag yang telah dibahas sebelumnya


<!DOCTYPE html>
<html>
<head>
<title>TUTORIAL HTML5 - BAB 1 BASIC</title>
</head>

<body>
<h1>selamat datang di harian cafe</h1>
<img src="google cafe.jpg" alt="gambar cafe google" width="200" height="100">
<p>tempat semua orang menikmati santainya</p>
<p>silahkan di pilih menu apa yang di inginkan</p>
<h2>menu makanan</h2>
<ul>
 <li>nasi goreng</li>
 <li>nasi uduk</li>
 <li>nasi jagung</li>
 <li>nasi rendang</li>
</ul>
<h2>menu minuman</h2>
<ol>
 <li>teh</li>
 <li>kopi</li>
 <li>degan ijo</li>
</ol>
<p>jika masih ingin mencari menu lainnya bisa
<a href="http://www.hariancooding.blogspot.com">di sini</a></p>

<p>namun jika tidak tekan tombol di bawah ini untuk meneruskan pemesanan</p>
<button>lanjut pemesanan</button>

</body>
</html>

dan berikut hasil output di browser

HarianCooding