panduaji

Kategori: Uncategorized

Web Development ~ Tag Dasar HTML

Diperbarui:

Sebagai bagian dari komitmen kami terhadap transparansi, beberapa link di situs kami adalah link afiliasi. Artinya, tanpa biaya tambahan untuk Anda, kami mungkin mendapatkan komisi jika Anda memutuskan untuk melakukan pembelian melalui link tersebut. Komisi ini membantu kami membiayai keberlangsungan blog ini.

Ternyata benar, kuliah bagi seorang anak lulusan SMK sama saja mengulangi pelajaran SMK. Tergantung jurusan yang diambil saat masih bangku SMK. Mata kuliah web development pun sama saja. Mengulangi pelajaran dasar. Berikut urek-urekan saya tentang mata kuliah Web Development

HTML merupakan kepanjangan dari HyperTextMarkupLanguage, salah satu bahasa yang dimengerti oleh browser. Sebuah tag html selalu diawali dengan tag “<” dan diakhiri dengan tag “>”.
Sebuah halaman Web terdiri dari 2 bagian, yaitu HEAD dan BODY. Semua tag dibuka dan ditutup dengan <tag>. Seperti <html>. Berbeda dengan pemrograman java yang case sensitive, untuk html tidak mengenal case sensitive, sehingga huruf besar dan kecil akan dibaca sama.
Untuk memberikan judul halaman kita memberikan tag <title> yang biasanya diletakkan dalam tag <head>. berikut kodenya:

<html>
<head><title>Judul Halaman</title></head>
</html>

Untuk sekedar latihan, langsung saja coba code html dibawah ini agar tahu apa manfaatnya

Percobaan 1
<html>
<head>
<title>Percobaan 1</title>
</head>

<body>
<h1>My First Heading</h1>
<p>My First paragraph.</p>

</body>

</html>

Percobaan 2
<html>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>

</body>
</html>

Percobaan 3 
<html>
<body>
<p>Ini adalah Paragraph 1.</p>
<p>Ini adalah Paragraph 2.</p>
<p>Ini adalah Paragraph 3.</p>
</body>


</html>

Percobaan 4
<html>
<body>
<!--Bagian ini tidak akan ditampilkan pada browser-->
<p>Sedangkan ini merupakan paragraph biasa</p>
</body>

</html>

Percobaan 5 
<html>
<body>
<p>tag hr berfungsi untuk menampilkan garis horizontal: </p>
<hr />
<p>Ini adalah sebuah paragraph</p>
<hr />
<p>Ini adalah sebuah paragraph</p>
<hr />
<p>Ini adalah sebuah paragraph</p>
</body>

</html>

Percobaan 6 
<html>
<body>
<p>
Paragraph ini
teridiri dari beberapa baris
di dalam source code nya,
akan tetapi browser
menghiraukannya.
</p>

<p>
Paragraph ini
terdiri dari banyak spasi
di dalam source code nya,
akan tetapi browser
menghiraukannya.
</p>

<p>
Jumlah baris dalam sebuah paragraph tergantung ukuran window browser anda. Apabila anda merubah ukuran window anda, maka jumlah baris dalam paragraph ini akan berubah.
</p>
</body>
</html>

Percobaan 7 
<html>
<body>

<p>Ini adalah<br /> sebuah para <br />graph dengan tag br untuk ganti baris</p>
</body>
</html>

Percobaan 8 
<html>
<body>
<p><b>Text ini tertulis tebal</b></p>
<p><strong>Text ini tertulis secara menonjol(tebal)</strong></p>
<p><big>text ini tertulis besar</big></p>
<p><em>text ini mengandung penekanan</em></p>
<p><i>text ini miring</i></p>
<p><small>text ini tertulis kecil</small></p>
<p>This is<sub>subscript</sub> dan </sup></p>
</body>

<html>

Percobaan 9
<html>
<body>
<pre>
Ini merupakan sebuah
preformattedd text.
mengandung spasi
dan ganti baris.
</pre>
<p>tag pre cocok untuk menampilkan code computer:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<body>

</html>

Percobaan 10 
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b>tag-tag ini biasa digunakan untuk menampilkan code computer/programming.</p>
<body>

</html>

Percobaan 11 
<html>
<body>
<address>
Ditulis ulang oleh panduaji.com<br />
<a href="mailto:[email protected]">Kirim email ke kami</a><br />
Alamat: Jl. Raya ITS Sukolilo <br />
Telp: 031 12345678
</address>

<body>

</html>

Percobaan 12 
<html>
<body>
<p>Organisasi <abbr title="World Healt Organization">WHO</abbr> didirikan pada tahun 1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>attribut title berguna untuk menampilkan kepanjangan dari sebuah akronim ataupun singkatan</p>
<body>

</html>

Percobaan 13 
<html>
<body>
<p>
Apabila browser anda mendukung bi-directional override (bdo), maka baris dibawah ini akan tertulis dari kanan ke kiri (rt1);
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
<body>

</html>

Percobaan 14 
<html>
<body>
Kutipan panjang:
<blockquote>
Kutipan panjang Kutipan panjang Kutipan panjang Kutipan panjang
Kutipan panjang Kutipan panjang Kutipan panjang Kutipan panjang
</blockquote>

<p><b>Catatan:</b> Browser memasukkan spasi sebelum dan sesudah elemen blockquote. margin juga dimasukkan.</p>

Kutipan pendek:
<q>Ini merupakan sebuah kutipan</q>

<p><b>Note:</b> Browser memasukkan tanda koma atas double pada kutipan pendek.</p>


</body>

</html>

Percobaan 15 
<html>
<body>
<p>Warna favoritku adalah <del>biru</del> <ins>merah</ins>!
</p>
<p>Perhatikan bahwa browser akan mencoret kata yang ingin dihapus dan memberi garis bawah pada kata yang dimasukkan.</p>
</body>
</html>



Ketika sudah mencoba coba pelajari sendiri apa gunanya. Oh ya, jangan lupa untuk menyimpannya dalam format .html agar bisa dibaca oleh browser. Selamat mencoba.

Shopee Lovember

Leave a Comment