Berikut adalah atribut dan masing-masing fungsi dari atribut HTML.Selamat membaca !
HEADING
Heading merupakan atribut yang berfungsi untuk mengatur judul,sub judul dan seterusnya dari sebuah dokumen.Dalam hal ini,heading HTML terdiri dari 6 heading.Jika kita menuliskan scrpit berikut
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<h1>Start Learning Computer Science !</h1>
<h2>Start Learning Computer Science !</h2>
<h3>Start Learning Computer Science !</h3>
<h4>Start Learning Computer Science !</h4>
<h5>Start Learning Computer Science !</h5>
<h6>Start Learning Computer Science !</h6>
</body>
</html>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<h1>Start Learning Computer Science !</h1>
<h2>Start Learning Computer Science !</h2>
<h3>Start Learning Computer Science !</h3>
<h4>Start Learning Computer Science !</h4>
<h5>Start Learning Computer Science !</h5>
<h6>Start Learning Computer Science !</h6>
</body>
</html>
maka hasilnya akan seperti ini :
ALIGN
Atribut align mengatur apakah heading disejajarkan ke kiri,tengah atau kanan halaman.Contohnya adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<h1 align ="left">Start Learning Computer Science !</h1>
<h2 align = "center">Start Learning Computer Science !</h2>
<h3 align ="right">Start Learning Computer Science !</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<h1 align ="left">Start Learning Computer Science !</h1>
<h2 align = "center">Start Learning Computer Science !</h2>
<h3 align ="right">Start Learning Computer Science !</h3>
</body>
</html>
ELEMEN <p>
Elemen <p> berfungsi untuk membuka suatu paragraf baru.Setiap paragraf teks harus diletakkan di antara tag pembuka <p> dan tag penutup </p>.Contohnya sebagai berikut :PEMECAH BARIS DENGAN <br>
Ketika kita ingin teks dalam satu pargraf untuk ditempatkan di baris berikutnya,maka kita menggunakan elemen <br> atau <br/>.Elemen ini tidak memerlukan tag pembuka dan penutup.Hanya dituliskan sekali saja.
Contohnya dari <p> dan <br> :
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<p>Paragraf ini adalah paragraf pertama</p>
<p>Paragraf ini adalah paragraf kedua</p>
<p>Paragraf ini adalah paragraf ketiga</p>
<p>Game yang paling bagus menurut saya adalah game dengan genre RPG (Role Playing Game) karena<br>game RPG memiliki alur cerita yang dapat menjadi pembelajaran dalam hidup dan juga seru untuk dimainkan<br>karena ada action gameplay yang disusun dengan sebaik mungkin</p>
</body>
</html>
Hasilnya adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<p>Paragraf ini adalah paragraf pertama</p>
<p>Paragraf ini adalah paragraf kedua</p>
<p>Paragraf ini adalah paragraf ketiga</p>
<p>Game yang paling bagus menurut saya adalah game dengan genre RPG (Role Playing Game) karena<br>game RPG memiliki alur cerita yang dapat menjadi pembelajaran dalam hidup dan juga seru untuk dimainkan<br>karena ada action gameplay yang disusun dengan sebaik mungkin</p>
</body>
</html>
Hasilnya adalah sebagai berikut :
Meskipun sekilas <p> dan <br> memiliki fungsi yang sama,tetapi sebenarnya berbeda.Kita bisa lihat dari jarak spasi dari masing-masing penggunaan tag.Untuk <p> paragraf baru,jarak spasinya lebih jauh dibandingkan dengan jarak spasi <br>.
ELEMEN-ELEMEN PRESENTASI
- Elemen <b> : segala sesuatu yang ada di antara elemen <b> akan ditampilkan dengan teks tebal.
- Elemen <i> : segala sesuatu yang ada di antara elemen <i> akan ditampilkan dengan teks miring.
- Elemen <u> : segala sesuatu yang ada di antara elemen <u> akan ditampilkan dengan teks yang digaris bawahi.
- Elemen <s> atau <strike > : segala sesuatu yang ada di antara elemen <s> atau <strike> akan ditampilkan dengan teks yang dicoret.
- Elemen <tt> : segala sesuatu yang ada di antara elemen <tt> akan ditampilkan dengan font monospace.(Font Monospace : jenis font yang sama setiap lebar hurufnya)
- Elemen <sup> : isi dari elemen <sup> ditulis dengan superskript.
- Elemen <sub> : ditulis dengan subskript.
- Elemen <big> : untuk membuat isi dari elemen satu ukuran lebih besar dari teks lain.
- Elemen <small> : untuk membuat isi dari elemen satu ukuran lebih kecil dari teks lain.
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
Kata berikut menggunakan teks <b>tebal</b>
<br>Kata berikut menggunakan teks <i>miring</i>
<br>Kata berikut menggunakan teks <u>yang digaris bawahi</u>
<br>Kata berikut akan <s>dicoret</s>
<br>Kata berikut akan tampil dengan font <tt>monospace</tt>
<br>Ulang tahun Lia adalah 21<sup>st</sup> Januari
<br>O<sub>2</sub> adalah simbol kimia untuk Oksigen
<br>Kata berikut <big>lebih besar</big> dari kata yang lainnya.
<br>Kata berikut <small>lebih kecil</small> dari kata yang lainnya.
</body>
</html>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
Kata berikut menggunakan teks <b>tebal</b>
<br>Kata berikut menggunakan teks <i>miring</i>
<br>Kata berikut menggunakan teks <u>yang digaris bawahi</u>
<br>Kata berikut akan <s>dicoret</s>
<br>Kata berikut akan tampil dengan font <tt>monospace</tt>
<br>Ulang tahun Lia adalah 21<sup>st</sup> Januari
<br>O<sub>2</sub> adalah simbol kimia untuk Oksigen
<br>Kata berikut <big>lebih besar</big> dari kata yang lainnya.
<br>Kata berikut <small>lebih kecil</small> dari kata yang lainnya.
</body>
</html>
Hasilnya :
ELEMEN-ELEMEN FRASE
Elemen frase merupakan elemen yang digunakan untuk menjelaskan suatu konten.sebagai contoh kata-kata yang ditulis dalam sebuah elemen <em> akan ditampilkan sama seperti kata-kata di dalam elemen <i>,tetapi elemen <em> ditujukan untuk mengindikasikan penambahan penekanan.
Berikut merupakan elemen-elemen Frase :
- <em> dan <strong> untuk penekanan
- <blockquote>,<cite>,<q> untuk pengutipan
- <abbr>,<acronym> dan <dfn> untuk singkatan,akronim dan istilah kunci.
- <code>,<kbd>,<var> dan <samp> untuk kode dan informasi komputer.
- <address> untuk menyatakan alamat
Contoh masing-masing pemakaian adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<p>Kita <em>harus</em> belajar Computer Science</p>
<p>Kita <strong>harus</strong> belajar Computer Science</p>
<p>Seperti kata Steve Jobs :</p>
<blockquote> Semua orang harus belajar cara untuk menulis kode,karena itu mengajarkan kita untuk berpikir</blockquote>
Sumber dari bab ini diambil dari <cite>HTML 5 dan CSS 3</cite>
<p>Seperti kata Steve Jobs <q> Semua orang harus belajar cara untuk menulis kode,karena itu mengajarkan kita untuk berpikir</q>
<p>Ia berasal dari sebuah kota yang dikenal dengan <abbr title="Makassar">Mks</abbr></p>
<acronym title ="Hypertext Markup Language">HTML</acronym>
Untuk membuat suatu website,kita harus mengetahui yang namanya <dfn>HTML</dfn>
<p><code><h1> Ini adalah heading utama </h1></code></p>
<p>Untuk memaksa keluar dari aplikasi Windows,tekan <kbd> CTRL</kbd>,<kbd>Alt</kbd> dan <kbd> Del </kbd> secara bersamaan.
<p><code>Document.write("<var>Administrator</var>")</code></p>
<p>Baris berikut menggunakan elemen <samp;> untuk menampilkan keluaran dari sebuah script atau program</p>
<p><samp>Ini adalah keluaran dari script</samp></p>
<p><address>Jalan Adonia 2 ,Perumahan Rafflesia ,Tanjung Bunga Makassar</address></p>
</body>
</html>
<html>
<head>
<title>BELAJAR HTML</title>
<body>
<p>Kita <em>harus</em> belajar Computer Science</p>
<p>Kita <strong>harus</strong> belajar Computer Science</p>
<p>Seperti kata Steve Jobs :</p>
<blockquote> Semua orang harus belajar cara untuk menulis kode,karena itu mengajarkan kita untuk berpikir</blockquote>
Sumber dari bab ini diambil dari <cite>HTML 5 dan CSS 3</cite>
<p>Seperti kata Steve Jobs <q> Semua orang harus belajar cara untuk menulis kode,karena itu mengajarkan kita untuk berpikir</q>
<p>Ia berasal dari sebuah kota yang dikenal dengan <abbr title="Makassar">Mks</abbr></p>
<acronym title ="Hypertext Markup Language">HTML</acronym>
Untuk membuat suatu website,kita harus mengetahui yang namanya <dfn>HTML</dfn>
<p><code><h1> Ini adalah heading utama </h1></code></p>
<p>Untuk memaksa keluar dari aplikasi Windows,tekan <kbd> CTRL</kbd>,<kbd>Alt</kbd> dan <kbd> Del </kbd> secara bersamaan.
<p><code>Document.write("<var>Administrator</var>")</code></p>
<p>Baris berikut menggunakan elemen <samp;> untuk menampilkan keluaran dari sebuah script atau program</p>
<p><samp>Ini adalah keluaran dari script</samp></p>
<p><address>Jalan Adonia 2 ,Perumahan Rafflesia ,Tanjung Bunga Makassar</address></p>
</body>
</html>
Hasilnya adalah sebagai berikut (urutan yang sama dari daftar elemen frase di atas) :
MEMBUAT LIST
Untuk membuat suatu daftar dalam sebuah website,kita bisa menciptakan 3 jenis list pada HTML :
- Unodered List,diawali dengan bullet hitam <ul>
- Ordered List,diawali dengan nomor atau huruf <ol>
- Definition List,untuk menetapkan istilah dan definisinya <dl>
Contoh dari pemakaian ul,ol dan dl adalah sebagai berikut :
<!DOCTYPE HTML>
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
<ul>
<li>Rogue Galaxy</li>
<li>Suikoden</li>
<li>Star Ocean</li>
</ul>
<ol>
<li>Rogue Galaxy</li>
<li>Suikoden</li>
<li>Star Ocean</li>
</ol>
<dl>
<dt>RPG</dt>
<dd>Merupakan Role Playing Game yang memiliki alur cerita menarik</dd>
<dt>FPS</dt>
<dd>Merupakan First Person Shooter yang memiliki alur gameplay seperti Counter Strike</dd>
<dt>MMORPG</dt>
<dd>Merupakan Massively Multi Role Playing Game yang memiliki alur cerita menarik,bedanya game ini online/mendunia</dd>
</dl>
</body>
</html>
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
<ul>
<li>Rogue Galaxy</li>
<li>Suikoden</li>
<li>Star Ocean</li>
</ul>
<ol>
<li>Rogue Galaxy</li>
<li>Suikoden</li>
<li>Star Ocean</li>
</ol>
<dl>
<dt>RPG</dt>
<dd>Merupakan Role Playing Game yang memiliki alur cerita menarik</dd>
<dt>FPS</dt>
<dd>Merupakan First Person Shooter yang memiliki alur gameplay seperti Counter Strike</dd>
<dt>MMORPG</dt>
<dd>Merupakan Massively Multi Role Playing Game yang memiliki alur cerita menarik,bedanya game ini online/mendunia</dd>
</dl>
</body>
</html>
Hasilnya adalah sebagai berikut :
Sekian penjelasan mengenai atribut-atribut dasar HTML,untuk atribut-atribut lainnya akan dijelaskan dipostingan berikutnya.Semoga ilmu yang dibagikan dapat bermanfaat ^ ^.Terima Kasih !
Sangat bermanfaat.Terima kasih.Lanjutkan gan
ReplyDelete