Multimedia

Belajar HTML Dasar Part 1: Pengenalan HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZ1OasGQ5rFKYFP9HxVMfDLVPHa2pDGbnSYyhDMh-JjlSH5XZVB4S2R-LnYqzQ9pvpPBDCKOltbVSynGrBujmeMM17lbIk-SZkfbVTdk-BeN2OlQyacpEfaGXL2oIxffGKZhyphenhyphenMzw7Brho/s1600/html.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZ1OasGQ5rFKYFP9HxVMfDLVPHa2pDGbnSYyhDMh-JjlSH5XZVB4S2R-LnYqzQ9pvpPBDCKOltbVSynGrBujmeMM17lbIk-SZkfbVTdk-BeN2OlQyacpEfaGXL2oIxffGKZhyphenhyphenMzw7Brho/s1600/html.jpg" width="320" /></a></div>
<h4 style="text-align: center;">
 </h4>
<h4>
Apa itu HTML?</h4>
HTML atau HyperText Markup Language adalah bahasa 
markup yang digunakan untuk membuat halaman-halaman website. HTML 
merupakan bahasa markup yang menggambarkan kepada browser tentang 
bagaimana caranya menampilkan format teks, data, dan grafik ke layar 
komputer, ketika sedang berkunjung ke sebuah website.<br />
<br />
<blockquote class="tr_bq">
<div style="text-align: center;">
<i>Ingat!
 HTML bukanlah bahasa pemrograman. HTML adalah bahasa Markup yang 
digunakan untuk membuat halaman-halaman website, dan menampilkan 
halaman-halaman tersebut ke browser.</i></div>
</blockquote>
<br />
Tag
 HTML menginstruksikan kepada browser untuk menampilkan halaman website.
 Sebuah file yang merupakan file HTML dan berextensi .html atau .htm 
dapat dibuka menggunakan web browser seperti Mozilla Firefox atau 
Internet Explorer. <br />
<br />
<h4>
Sejarah HTML</h4>
HTML dibuat oleh kolaborasi Caillau TIM dengan 
Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN 
adalah lembaga penelitian fisika energi tinggi di Jenewa). Tahun 1980, 
IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen
 dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan 
suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah 
pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa
 yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya 
ini sebagai <i><b>Generalized Markup Language</b></i> atau <i><b>GML</b></i>.<br />
<br />
Tahun
 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen 
yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) 
yang menyatakan markup language sebagai standar untuk pembuatan 
dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi 
memberinya nama lain, yaitu SGML<b> (Standard Generalized Markup Language).</b><br />
<br />
ISO
 dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk 
pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar 
perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga 
berguna untuk menjelajahi internet. Khususnya bagi mereka yang 
menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, 
meskipun saat ini telah berkembang XHTML yang merupakan pengembangan 
dari HTML.<br />
<br />
Nah.. itulah Pengenalan HTML dimulai dari apa itu HTML dan sejarahnya. Semoga Bermanfaat :) <br />
<br />

Apa itu HTML? HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat halaman-halaman website. HTML ...

Belajar CSS Dasar Part 3: Implementasi CSS

Pada tutorial ini penulis akan mengajak kalian semua untuk mengimplementasikan CSS pada suatu dokumen HTML. Oke langsung saja!<br />
<br />
<h3>
Bagaimana Caranya Menggunakan CSS?</h3>
Kita dapat menggunakan CSS dan memasangnya kedalam skrip HTML melalui 3 Cara. Yaitu:<br />
<ol>
<li>Inline Style Sheet</li>
<li>Embedded Style Sheet</li>
<li>External Style Sheet</li>
</ol>
<h4>
Inline Style Sheet</h4>
Apa itu Inline Style Sheet? Inline Style Sheet adalah cara menuliskan CSS secara langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup mudah, yaitu dengan menambahkan attribute <b>style="..." </b>pada tag HTML tersebut. Ingat! Style hanya berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag yang lain. <br />
<br />
Contoh :<br />
<br />
<pre class="html" name="code"><html>
<head>
<title> Belajar Inline Style Sheet </title>
</head>
<body>
<h4 style="color: red; font-family: verdana">
Teks H4 ini akan berwarna merah, dan akan berjenis huruf Verdana
</h4>
</body>
</html></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOL0OW516vCT89fRP0FFWEZeATJQavs8sc9rBtshhtdgCYVQxgQAgGWsub5DZ7rt20oTiernz5FgbDOusgUHkXaPQNcXoJ35k5wQ_bzAC5paC4s0MIR3zHmiuWO31_rQo-W90cVntNm7Vi/s1600/Screenshot+from+2014-12-29+04:42:00.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOL0OW516vCT89fRP0FFWEZeATJQavs8sc9rBtshhtdgCYVQxgQAgGWsub5DZ7rt20oTiernz5FgbDOusgUHkXaPQNcXoJ35k5wQ_bzAC5paC4s0MIR3zHmiuWO31_rQo-W90cVntNm7Vi/s1600/Screenshot+from+2014-12-29+04:42:00.png" width="400" /></a></div>
<br />
<br />
Contoh Lagi :<br />
<br />
<pre class="html" name="code"><html>
<head>
<title> Belajar Inline Style Sheet 2</title>
</head>
<body>
<p style="color: blue">
Teks didalam paragraf ini akan berwarna biru :D
</p>
</body>
</html></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1BOtvfM9se3Xm8vdQo6ZRc8AWmwjsOw_ktCKDCeFbL3CzVdCS9pA5InToHp8euqbsBxmIpn3Dx1yrgbXDFzsmxC5Ot86ll1TWTWG11fJOwh2DPCokXOHFMF0XORyUB_bTCKtr_7IhN-z/s1600/Screenshot+from+2014-12-29+04:51:11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH1BOtvfM9se3Xm8vdQo6ZRc8AWmwjsOw_ktCKDCeFbL3CzVdCS9pA5InToHp8euqbsBxmIpn3Dx1yrgbXDFzsmxC5Ot86ll1TWTWG11fJOwh2DPCokXOHFMF0XORyUB_bTCKtr_7IhN-z/s1600/Screenshot+from+2014-12-29+04:51:11.png" width="400" /></a></div>
<br />
Oke, penulis harap kalian sudah dapat menguasai teknik Inline Style Sheet ini. Sekarang kita akan lanjut membahas Embedded Style Sheet :D<br />
<h4>
Embedded Style Sheet</h4>
Apa itu Embedded Style Sheet? Embedded Style Sheet adalah Cara menggunakan CSS yang didefinisikan dulu menggunakan tag <style> dan </style>, dan tag <style> ini harus berada didalam tag <head> dan </head>. Oke dari pada mumet, langsung saja kita praktekan!<br />
<br />
Oh iya! Penulisan tag <style> harus memenuhi standar seperti ini:<br />
<br />
<br />
<pre class="css" name="code"><style type=”text/css”>
..... isi css ....
</style></pre>
<br />
Ingat! Jangan lupa dikasih attribute dan value type=”text/css” pada tag <style> yak :D<br />
<br />
<pre class="html" name="code"><html>
<head>
<title> Belajar Embedded Style Sheet</title>
<style type=”text/css”>
h3 {
color: green;
font-family: Tahoma;
font-size: 12px
}
</style>
</head>
<body>
<h3>
Teks h3 ini akan berwarna hijau, berukuran 12 pixel dan berjenis huruf tahoma :D
</h3>
</body>
</html></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVguJVdMKFTF3tKbI7MYtM-lnomIft7XPizYxeSOJi0sd-b3mS1WDW_XvydHU3Ezk9aYFZR_c6adAOwqnyFF95H0dcKBnliSFaE-_dYwj_W75CnzSwy0_TrCF3AhMZzem8pOQ7gJJnCBJ/s1600/Screenshot+from+2014-12-29+04:58:02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVguJVdMKFTF3tKbI7MYtM-lnomIft7XPizYxeSOJi0sd-b3mS1WDW_XvydHU3Ezk9aYFZR_c6adAOwqnyFF95H0dcKBnliSFaE-_dYwj_W75CnzSwy0_TrCF3AhMZzem8pOQ7gJJnCBJ/s1600/Screenshot+from+2014-12-29+04:58:02.png" width="400" /></a></div>
<h3>
</h3>
<h4>
External Style Sheet</h4>
Apa itu External Style Sheet? External Style Sheet adalah Cara menggunakan CSS yang dibuat pada file terpisah dan berekstensi .css, Untuk menggunakan External Style Sheet kita cukup memanggil file .css yang terpisah tersebut dengan menggunakan tag <link />, dan tag ini harus berada didalam tag <head> dan </head>.<br />
<br />
Spesifikasi penggunaan tag link adalah sebagai berikut:<br />
<br />
<br />
<pre class="html" name="code"><link rel=”stylesheet” type=”text/css” href=”nama_file_external.css” /></pre>
<br />
Penjelasan :<br />
<br />
<ul>
<li><link = adalah tag HTML</li>
<li>rel=”...” = adalah attribute HTML dari tag <link /></li>
<li>stylesheet = adalah Value dari attribute rel=”..”</li>
<li>type=”...” = adalah attribute HTML dari tag <link /></li>
<li>text/css = adalah Value dari attribute type=”...” yang mendefinisikan bahwa file yang akan di panggil adalah file bertipe css</li>
<li>href=”...” = adalah attribute HTML yang mendefinisikan lokasi file external tujuan nama_file_external.css = adalah nama file external style sheet yang akan dipanggil</li>
<li>/> = Adalah tag penutup</li>
</ul>
Contoh penggunaan External Style Sheet :<br />
<br />
Buatlah file dengan nama external.css dan tulis skrip css berikut: <br />
<br />
<pre class="css" name="code">p{
color: red;
background-color: yellow
}
h4 {
Color: blue;
Font-size: 12px
}</pre>
<br />
Setelah itu buat file dengan nama belajarexternal.html dan isi skrip HTML berikut:<br />
<br />
<br />
<pre class="html" name="code"><html>
<head>
<title> Belajar External Style Sheet </title>
<link rel=”stylesheet” type=”text/css” href=”external.css” />
</head>
<body>
<p> Text didalam paragraf ini akan berwarna merah, dan backgroundnya berwarna kuning </p>
<h4> Text h4 ini akan berwarna biru, dan berukuran 12 pixel </h4>
</body>
</html></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUryHwExwjTZh8ehNAE_mJpKcip4iRf_VlPehmr9jTz6XHgRHCqPSxWNmJ6xTMjBQKEsgtpR8p6dP9NH6vLguv7SZKmbFmKY7WHMsjqH9lbxIE3xPEPnc8fL2ZxYwF1vslpWgLvHQkxWB/s1600/Screenshot+from+2014-12-29+05:08:24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDUryHwExwjTZh8ehNAE_mJpKcip4iRf_VlPehmr9jTz6XHgRHCqPSxWNmJ6xTMjBQKEsgtpR8p6dP9NH6vLguv7SZKmbFmKY7WHMsjqH9lbxIE3xPEPnc8fL2ZxYwF1vslpWgLvHQkxWB/s1600/Screenshot+from+2014-12-29+05:08:24.png" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Oke sampai di sini  <b>Belajar CSS Dasar Part 3: Implementasi CSS</b> sampai bertemu lagi :D</div>
<br />

Pada tutorial ini penulis akan mengajak kalian semua untuk mengimplementasikan CSS pada suatu dokumen HTML. Oke langsung saja! Bagaimana ...

Belajar CSS Dasar Part 2: Dasar-dasar CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxszHbvoXNwitqDZ0iELk7Al79xySTfJl6CI2DUaqS6RXkrCXJgeuwG95C2HN3kUk83kW7C9N9bdhxk-o4p_RbVK7Wwd74XTWspluJModG6VkxT5OJD2DS1DthM9y87UqBxJFCFYtEpbw/s1600/css-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxszHbvoXNwitqDZ0iELk7Al79xySTfJl6CI2DUaqS6RXkrCXJgeuwG95C2HN3kUk83kW7C9N9bdhxk-o4p_RbVK7Wwd74XTWspluJModG6VkxT5OJD2DS1DthM9y87UqBxJFCFYtEpbw/s1600/css-style.png" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
OKE, Sekarang kita akan masuk pada pembahasan tentang dasar-dasar CSS. Jangan tegang, silahkan putar lagu-lagu kesayangan anda dan mari belajar dengan santai :D<br />
<br />
<h3>
Syntax CSS</h3>
Apa itu Syntax CSS? Syntax CSS adalah perintah-perintah yang digunakan untuk mengatur tampilan dokumen HTML. Syntax CSS terdiri dari: <b>Selector</b>, <b>Property</b>, dan <b>Value</b>.<br />
<br />
Contoh penulisan syntax CSS adalah sebagai berikut:<br />
<br />
<pre class="css" name="code">selector { property: value }</pre>
<br />
<br />
Apa itu Selector?<br />
<br />
Selector adalah perintah yang menunjukan bagian mana yang ingin diformat.<br />
<br />
Apa itu Property dan Value?<br />
Property adalah attribute dari selector. Sedangkan Value adalah “Nilai” dari Property.<br />
<br />
Contoh Syntax :<br />
<br />
<h4>
</h4>
<pre class="css" name="code">h1 { color: red }</pre>
<br />
Penjelasan :<br />
<br />
<pre class="css" name="code">h1 = Selector
color = Property
red = Value</pre>
<br />
Artinya, kita akan mengatur element HTML <h1> menjadi berwarna merah (red).<br />
<h4>
</h4>
<h4>
Cara Penulisan Syntax Yang Baik</h4>
Dalam penulisan Syntax CSS, Sangat disarankan untuk menggunakan beberapa baris baru dalam mengatur property dan value.<br />
Contoh :<br />
<br />
<pre class="css" name="code">h1 {
color: red;
font-family: arial;
font-size: 12px
}</pre>
<br />
Lebih enak melihat yang mana? Tentu yang menggunakan beberapa baris baru bukan? :D<br />
<h4>
Komentar Pada CSS</h4>
Seperti halnya komentar pada HTML, CSS juga memiliki syntax yang mendefinisikan dirinya sebagai komentar (pengingat). Komentar pada CSS didefinisikan menggunakan syntax /* dan */ (Dibuka dengan slash bintang, dan ditutup dengan bintang slash).<br />
<br />
<blockquote class="tr_bq">
<div style="text-align: center;">
Ingat! Yang namanya komentar tidak akan dibaca sebagai “code” oleh browser, tapi hanya dibaca sebagai text pengingat. Dan tentunya komentar tersebut tidak akan ditampilkan oleh browser.</div>
</blockquote>
<br />
Contoh Penggunaan Komentar CSS :<br />
<pre class="css" name="code"> </pre>
<pre class="css" name="code">/* ini adalah syntax css untuk element h1 */
h1{
font-family: arial;
color: red;
}</pre>
<br />
Oke, karena kita sudah mempelajari dasar-dasar CSS, maka pada pembahasan selanjutnya kita akan belajar mengimplementasikan CSS pada suatu dokumen HTML. Are you ready?

OKE, Sekarang kita akan masuk pada pembahasan tentang dasar-dasar CSS. Jangan tegang, silahkan putar lagu-lagu kesayangan anda dan mari ...

Belajar CSS Dasar Part 1: Pengenalan CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxszHbvoXNwitqDZ0iELk7Al79xySTfJl6CI2DUaqS6RXkrCXJgeuwG95C2HN3kUk83kW7C9N9bdhxk-o4p_RbVK7Wwd74XTWspluJModG6VkxT5OJD2DS1DthM9y87UqBxJFCFYtEpbw/s1600/css-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxszHbvoXNwitqDZ0iELk7Al79xySTfJl6CI2DUaqS6RXkrCXJgeuwG95C2HN3kUk83kW7C9N9bdhxk-o4p_RbVK7Wwd74XTWspluJModG6VkxT5OJD2DS1DthM9y87UqBxJFCFYtEpbw/s1600/css-style.png" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
Apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan bahasa “stylesheet” yang digunakan untuk mengatur tampilan dokumen HTML. Dengan perintah CSS, kita bebas mengubah jenis huruf, ukuran huruf, warna huruf, warna background, ukuran gambar, margin, padding, paragraf, border tabel, dan masih banyak lagi.<br />
<br />
Namun, CSS juga memiliki kelemahan. Kelemahannya adalah tidak mesti semua browser support dengan CSS. Artinya setiap browser memiliki caranya tersendiri untuk mengartikan code-code CSS yang kita tulis. Makanya, terkadang tampilan website yang kita buat terlihat bagus di browser yang satu (misalnya firefox), tapi malah terlihat amburadul dibrowser yang lain (misalnya internet explorer). Tenang dulu jangan panik, sekarang ini hampir semua browser sudah support kok dengan bahasa CSS :D<br />
<br />
<h4>
Sejarah CSS</h4>
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan. Yang kemudian membentuk hubungan antara ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan salah satu teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.<br />
<br />
<h3>
Versi CSS </h3>
Untuk saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML. CSS2 dikembangkan untuk memenuhi kebutuhan peformatan dokumen HTML agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.<br />
<br />
CSS2 mendukung pemformatan posisi konten, huruf (font), tampilan tabel (table layout) dan media tipe untuk printer. Kehadiran CSS versi dua diharapkan lebih baik dari versi pertama.<br />
<br />
CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3, desainer website lebih dimudahkan dalam hal kompatibilitas websitenya. Misalnya pada smartphone dengan dukungan fitur baru yakni @media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.<br />
<br />
Oke sampai di sini Belajar CSS Dasar Part 1, semoga bermanfaat :D

Apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan bahasa “stylesheet” yang digunakan untuk mengatur tampilan ...

Sekilas Tentang Bahasa Pemrograman

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjql7jpCE1URWHdWvyMLY-dKQLECzbQ1WdvtQIuzNoAuGc9_NmqLgF9vvudCbmobt_r0YoUfAbc4GKQ6c7al3TuG3DAtLL6ExG7gGQd16ojnOPignKwE55DGv1xQxXrDG-rNA0mS7cTsLaQ/s1600/proglanguages.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjql7jpCE1URWHdWvyMLY-dKQLECzbQ1WdvtQIuzNoAuGc9_NmqLgF9vvudCbmobt_r0YoUfAbc4GKQ6c7al3TuG3DAtLL6ExG7gGQd16ojnOPignKwE55DGv1xQxXrDG-rNA0mS7cTsLaQ/s1600/proglanguages.jpg" width="400" /></a></div>
<h3 style="text-align: center;">
<br /></h3>
<h3>
Apa yang di sebut bahasa Pemrograman?</h3>
Bahasa pemrograman adalah teknik komunikasi standar untuk mengekspresikan instruksi kepada komputer. Layaknya bahasa manusia, setiap bahasa memiliki tata tulis dan aturan tertentu.<br />
<br />
Bahasa pemrograman memfasilitasi seorang programmer secara tepat menetapkan data apa yang sedang dilakukan oleh komputer selanjutnya, bagaimana data tersebut disimpan dan dikirim, dan apa yang akan dilakukan apabila terjadi kondisi yang variatif.<br />
<br />
Bahasa pemrograman dapat diklasifikasikan menjadi tingkat rendah, menengah, dan tingkat tinggi. Pergeseran tingkat dari rendah menuju tinggi menunjukkan kedekatan terhadap ”bahasa manusia”.<br />
<br />
<h3>
Kategori Bahasa Pemrograman</h3>
<h4>
Bahasa Pemrograman Tingkat Tinggi</h4>
Merupakan bahasa tingkat tinggi yang mempunyai ciri-ciri mudah dimengerti karena kedekatannya terhadap bahasa sehari – hari. Sebuah pernyataan program diterjemahkan kepada sebuah atau beberapa mesin dengan menggunakan <b>compiler.</b> Sebagai contoh adalah : <b>JAVA, C++, .NET</b>.<br />
<br />
<h4>
<b>Bahasa Pemrograman Tingkat Rendah</b></h4>
Bahasa pemrograman generasi pertama. Bahasa jenis ini sangat sulit dimengerti karena instruksinya menggunakan bahasa mesin. Disebut juga dengan <b>bahasa assembly</b> merupakan bahasa dengan pemetaan satu – persatu \ terhadap instruksi komputer. Setiap intruksi assembly diterjemahkan dengan menggunakan <b>assembler. </b><br />
<b><br /></b>
<br />
<h4>
<b>Bahasa Pemrograman Tingkat Menengah</b></h4>
Dimana penggunaan instruksi telah mendekati bahasa sehari – hari, walaupun masih cukup sulit untuk dimengerti karena menggunakan singkatan – singkatan seperti STO yang berarti simpan (STORE) dan MOV yang artinya pindah (MOVE). Yang tergolong dalam bahasa ini adalah <b>Fortran</b>.

Apa yang di sebut bahasa Pemrograman? Bahasa pemrograman adalah teknik komunikasi standar untuk mengekspresikan instruksi kepada kompu...

Belajar HTML Dasar Part 3: HTML Fundamental

<h3>
HTML Heading</h3>
HTML Heading berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dari yang terbesar hingga yang terkecil. Nilai untuk ukuran huruf yang paling besar adalah <h1>, sedangkan yang paling kecil adalah <h6>. Agar lebih jelas, mari kita praktekan! Ketikan skrip berikut pada notepad, lalu simpan dengan nama <b>heading.html</b>.<br />
<br />
<br />
<pre class="html" name="code"><html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1> Belajar Heading </h1>
<h2> Belajar Heading </h2>
<h3> Belajar Heading </h3>
<h4> Belajar Heading </h4>
<h5> Belajar Heading </h5>
<h6> Belajar Heading </h6>
</body>
</html></pre>
<br />
<div style="text-align: center;">
Maka hasilnya akan seperti gambar dibawah :</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOCevYoOzOlQ5jBEoY12SHw0FSc6tbtPcxn2nqXD2GVs0vtTUjQ1dL_VILs0SqVwJA7k8XTsBW6HCYvEYQJFLGolEmTU6chtwKL96-eRKl19O4NTCSrmB6KALSWS_eqz5wPk8qV8yBqDu/s1600/Screenshot+from+2014-12-28+05:16:31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOCevYoOzOlQ5jBEoY12SHw0FSc6tbtPcxn2nqXD2GVs0vtTUjQ1dL_VILs0SqVwJA7k8XTsBW6HCYvEYQJFLGolEmTU6chtwKL96-eRKl19O4NTCSrmB6KALSWS_eqz5wPk8qV8yBqDu/s1600/Screenshot+from+2014-12-28+05:16:31.png" width="400" /></a></div>
<br />
<div style="text-align: center;">
</div>
<br />
<br />
<div style="text-align: center;">
<br /></div>
<h3 style="text-align: left;">
HTML Paragraf</h3>
<div style="text-align: left;">
Untuk membuat paragraf HTML kita dapat menggunakan tag <p> dan </p>. Oke, Langsung saja kita praktekan sodara-sodara. Ketikan skrip berikut, simpan dengan nama paragraf.html, lalu jalankan dibrowser kesayangan anda.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<pre class="html" name="code"><html>
<head>
<title>Latihan Paragraf HTML</title>
</head>
<body>
<p> Belajar buat paragraf </p>
<p> Belajar buat paragraf yak :D </p>
<p> Tes buat paragraf yak :D </p>
</body>
</html></pre>
<br />
<div style="text-align: center;">
Hasil penggunaan tag <p></p></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0hVXaNv5J1GLsahKPjEAmGQ4ahwRtkc5qQYgo9WXf-AERlzJ_3suyx87ANmMA_6XQcmBquOoCrFXB-oFWHjnGgbZfn44VKfOIDFqtZ6Tgepr5xniQTRLwKNy1AkiYuINmFkxyzCzchLH/s1600/Screenshot+from+2014-12-28+05:40:29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0hVXaNv5J1GLsahKPjEAmGQ4ahwRtkc5qQYgo9WXf-AERlzJ_3suyx87ANmMA_6XQcmBquOoCrFXB-oFWHjnGgbZfn44VKfOIDFqtZ6Tgepr5xniQTRLwKNy1AkiYuINmFkxyzCzchLH/s1600/Screenshot+from+2014-12-28+05:40:29.png" width="400" /></a></div>
<br />
<div style="text-align: center;">
</div>
<br />
<br />
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Ngomong2, kita bisa juga lho menggabungkan beberapa tag html pada 1 file .html. Misalnya seperti contoh berikut ini. Ketikan skrip berikut, lalu save dengan nama coba.html, kemudian jalankan dibrowser kesayangan anda dan lihatlah hasilnya.</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br /></div>
<pre class="html" name="code"><html>
<head>
<title>Contoh: Inilah HTML Sebenarnya</title>
</head>
<body>
<b> Ini Judul cetak tebal </b>
<p> <b> ini judul cetak tebal didalam paragraf </b> </p>
<br /> <br />
<h1> ini judul heading 1 </h1>
<p> <h1> ini judul heading 1 dalam paragraf </h1> </p>
<hr />
<h4> hallo, aku heading 4, dan aku berada didalam tag body :D </h4>
</body>
</html></pre>
<br />
<div style="text-align: center;">
Maka hasilnya akan seperti berikut :</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOuKOL6ybm-pYQkxA8aIMX-UmLyUUMV_hrLOMIfZrZJWiE6gyc6XK1_LRk57vsCXv6iCKBLKpEzvgfmw5ajHDOz_CAEyF8jVGW74glFKX1wZWmUIKdl18e7nm0itu4HZvZoMwpwFVEIxd/s1600/Screenshot+from+2014-12-28+05:44:09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMOuKOL6ybm-pYQkxA8aIMX-UmLyUUMV_hrLOMIfZrZJWiE6gyc6XK1_LRk57vsCXv6iCKBLKpEzvgfmw5ajHDOz_CAEyF8jVGW74glFKX1wZWmUIKdl18e7nm0itu4HZvZoMwpwFVEIxd/s1600/Screenshot+from+2014-12-28+05:44:09.png" width="400" /></a></div>
<br />
<div style="text-align: center;">
</div>
<br />
<br />
<h3 style="text-align: center;">
</h3>
<br />
<h3>
HTML Format Teks</h3>
<br />
<div style="text-align: left;">
Untuk melakukan pemformatan terhadap suatu teks, kita dapat menggunakan beberapa tag html.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Lebih jelasnya, mari kita coba ketikan satu persatu tag html diatas pada notepad. Lalu save dengan nama format-text.html, kemudian jalankan dibrowser. jangan lupa berikan tag <br /> untuk membuat baris baru (line break/enter), agar text tidak terlihat kacau di browser. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<pre class="html" name="code"><html>
<head>
<title>format teks</title>
</head>
<body>
<b>Ini adalah huruf tebal</b> <br />
<u>Ini adalah huruf garis bawah</u> <br />
<i>Ini adalah huruf miring</i> <br /><br />
<strike> ini adalah huruf garis tengah </strike> <br />
<small> Ini adalah huruf yang sangat kecil </small> <br />
<big> Ini adalah huruf yang lebih besar dari normal </big> <br />
<sup> Ini adalah huruf superscript </sup> <br />
<sub> Ini adalah huruf subscript </sub> <br /> <br />
<em> Ini adalah huruf miring dengan tag em </em> <br />
<del> Ini adalah huruf garis tengah dengan tag del </del> <br />
<strong> Ini adalah huruf tebal dengan tag strong </strong> <br />
<ins> Ini adalah huruf garis bawah dengan tag ins </ins>
</body>
</html></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XQZCHTeI3hpXIdr8LU3GgR065MNKyFlVlsIDBynQsp13W1vN9q4zKINAtcdiSV-b2WSjP7yH6lfJSUk5hAMdA8g96JSXr1WK-W5UNE_r-nh_yRJqjrMk5Dtj2XUtWncLcEpI6Vw-iiD_/s1600/Screenshot+from+2014-12-28+05:47:51.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XQZCHTeI3hpXIdr8LU3GgR065MNKyFlVlsIDBynQsp13W1vN9q4zKINAtcdiSV-b2WSjP7yH6lfJSUk5hAMdA8g96JSXr1WK-W5UNE_r-nh_yRJqjrMk5Dtj2XUtWncLcEpI6Vw-iiD_/s1600/Screenshot+from+2014-12-28+05:47:51.png" width="400" /></a></div>
<br />
<br />
<h3>
HTML Font</h3>
Untuk mendefinisikan suatu font, kita dapat menggunakan tag <font> dan </font>. Selain itu, untuk mengubah jenis huruf, ukuran, dan warna, kita dapat menggunakan beberapa attribute seperti yang tertera pada tabel dibawah ini.<br />
<br />
<br />
<style type="text/css">
	table.tableizer-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
} 
.tableizer-table td {
	padding: 4px;
	margin: 3px;
	border: 1px solid #ccc;
}
.tableizer-table th {
	background-color: #104E8B; 
	color: #FFF;
	font-weight: bold;
}
</style><br />
<table class="tableizer-table">
<tbody>
<tr class="tableizer-firstrow"><th>Attribute</th><th>Deskripsi</th></tr>
<tr><td>size="nilai"</td><td>Digunakan untuk menentukan ukuran huruf.  Contoh: <font> size=”3”> ini font ukuran 3pt </font></td></tr>
<tr><td>face=”nilai” </td><td>Digunakan untuk menentukan jenis huruf. Contoh: <font face=”verdana”> ini font <span style="font-family: Verdana,sans-serif;">verdana</span> </font></td></tr>
<tr><td>Color=”nilai” </td><td>Digunakan untuk menentukan warna huruf. Contoh: <font color=”green”> <span style="color: lime;">ini font hijau </span></font></td></tr>
</tbody></table>
<br />
Contoh :<br />
<br />
<br />
<pre class="html" name="code"><html>
<head>
<title>HTML Font</title>
</head>
<body>
<font size=”4”> Ini adalah font ukuran 4pt </font> <br />
<font color=”blue”> ini adalah font warna biru </font> <br />
<font face=”verdana”> ini adalah font jenis verdana </font> <br /> <br />
<font face=”arial” size=”4” color=”green”>
ini adalah font warna hijau, dengan jenis huruf arial, dan berukuran 4pt :)
</font>
</body>
</html></pre>
<br />
<h3>
HTML Preformatted Text</h3>
HTML Preformatted text di definisikan menggunakan tag <pre> dan </pre>. Tag ini berfungsi untuk menampilkan tulisan seperti yang kita tulis apa adanya di code editor.<br />
<br />
Contohnya :<br />
<br />
<br />
<pre class="html" name="code"><html>
<head>
<title>HTML Preformatted Text</title>
</head>
<body>
<pre>
Saya lagi belajar html preformatted text
Menggunakan
Tag pre, kamu mau ikutan nggak?
Kalo mau ayo :D
</pre>
</body>
</html></pre>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Hasilnya :</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshMGHdJb36kcE7_1ojoO5XBWbyUvpDrl-e4FRKSGgu6BsBTNsZzGMB7_ai5RTn6Df2Pd0r6apk89Wmvw4O5m4Pq23mJS346vt_7pP38bG3eLwYbSZo6ZB8kX2F54gZ0y-Bh7y5wNKEvLK/s1600/Screenshot+from+2014-12-28+15:26:49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshMGHdJb36kcE7_1ojoO5XBWbyUvpDrl-e4FRKSGgu6BsBTNsZzGMB7_ai5RTn6Df2Pd0r6apk89Wmvw4O5m4Pq23mJS346vt_7pP38bG3eLwYbSZo6ZB8kX2F54gZ0y-Bh7y5wNKEvLK/s1600/Screenshot+from+2014-12-28+15:26:49.png" width="400" /></a></div>
<h3 style="text-align: center;">
</h3>
<h3>
HTML List</h3>
<div style="text-align: left;">
HTML List digunakan untuk membuat daftar (list), yang fungsinya untuk mengelompokan data baik secara (Ordered List) ataupun (Unordered List). Ordered list artinya data diurutkan secara berurutan contohnya seperti 1, 2, 3 dan seterusnya. Sedangkan Unordered list artinya data diurutkan secara tidak berurutan, dan biasanya ditandai dengan lambang bulatan hitam. Tag yang digunakan untuk ordered list adalah <ol> ... </ol> yang didalamnya terdapat elemen list yaitu tag <li> dan </li>, sedangkan tag yang digunakan untuk unordered list adalah <ul> ... </ul> yang didalamnya juga terdapat element list yaitu tag <li> dan </li>. Contohnya sebagai berikut:</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br /></div>
<pre class="html" name="code"><html>
<head>
<title>HTML List</title>
</head>
<body>
Daftar belanjaan hari ini:
<ol>
<li> Gula </li>
<li> Semen </li>
<li> Marmer </li>
<li> Magic Jar </li>
</ol>
Daftar Makan Sahur:
<ul>
<li> Telur dadar </li>
<li> Nasi Goreng </li>
<li> Rendang Ayam </li>
<li> Soto dan Asbes </li>
</ul>
</body>
</html></pre>
<br />
taraaaa ... hasilnya :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8xXgc44jLLCI0AhdcIrtucJ91NTEyvlM22blJQ2InBQZ2zCWk7U9iMIjMELQAAAZPlLn0JjL7RXln2Kq8YmUsxq1N6VfSWhBCHIAMEp1B_YH2fjdYhrFMfkX8v2nnZVgGu7cAIF3Ki9Eb/s1600/Screenshot+from+2014-12-28+15:30:55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8xXgc44jLLCI0AhdcIrtucJ91NTEyvlM22blJQ2InBQZ2zCWk7U9iMIjMELQAAAZPlLn0JjL7RXln2Kq8YmUsxq1N6VfSWhBCHIAMEp1B_YH2fjdYhrFMfkX8v2nnZVgGu7cAIF3Ki9Eb/s1600/Screenshot+from+2014-12-28+15:30:55.png" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Okee sampai di sini <b>Belajar HTML Dasar Part 2: HTML Fundamental, </b>jika ada yang ingin ditanyakan silahkan tanyakan di kolom komentar, bantu share ya!</div>
<div style="text-align: center;">
<br /></div>

HTML Heading HTML Heading berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dari yang terbesar hingga yang terkecil. Nilai...

Belajar HTML Dasar Part 2: Dasar-dasar HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGI5kye6ClXVeBaymlIUlE_fwFvFTI6Ew4m31dV0xEMAPkSZGuWe-WK4XNpe4JJ9OwtxAVs48-A9OBP9R2oN5TfUyW_RY1orMkFr9Mya0aXUV-iHo0n90NgEiim5nHXjOwJ4HeWJ1hyphenhyphenJem/s1600/tags.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGI5kye6ClXVeBaymlIUlE_fwFvFTI6Ew4m31dV0xEMAPkSZGuWe-WK4XNpe4JJ9OwtxAVs48-A9OBP9R2oN5TfUyW_RY1orMkFr9Mya0aXUV-iHo0n90NgEiim5nHXjOwJ4HeWJ1hyphenhyphenJem/s1600/tags.png" width="320" /></a></div>
<div style="text-align: center;">
  </div>
Langsung saja, sebelum mempelajari dan menuliskan tag html di code editor, ada baiknya kalian membuka dulu software editor yang kalian miliki. Disini penulis menyarankan menggunakan <b>Sublime Text </b>atau <b>Notepad ++. </b>Kemudian jalankan Text Editor Anda.<br />
<br />
<h3>
<b>Tag HTML</b></h3>
Apa itu TAG? Tag adalah perintah-perintah khusus (markup) yang digunakan untuk menentukan tampilan dokumen HTML. TAG HTML harus diawali dengan tag pembuka dan diakhiri dengan tag penutup. Yang musti di ingat adalah Tag penutup HTML harus selalu diberi tanda backslash “/” sebelum karakter “<”.<br />
<br />
Contohnya sebagai berikut :<br />
<br />
<pre class="html" name="code"><tag pembuka>..</tag penutup> </pre>
<br />
Contoh Jelasnya :<br />
<br />
<pre class="html" name="code"><html>..</html></pre>
<br />
Tag HTML bersifat no case sensitive, atau tidak sensitif. Artinya Kita bebas menuliskan tag dengan huruf besar semua atau dengan huruf kecil semua.<br />
<br />
Contoh: <HTML> <html>. Namun pada XHTML, semua tag harus ditulis dengan huruf kecil semua. Agar dokumen XHTML yang dibuat sesuai dengan standar yang telah ditentukan oleh W3c.<br />
<br />
<h3>
Struktur Tag HTML</h3>
Struktur dokumen HTML terdiri dari 5 bagian, dengan berpedoman pada 3 bagian utama. 5 bagian tersebut adalah:<br />
<br />
<h4>
<!DOCTYPE> </h4>
Document Type Definition (DTD/Doctype) adalah tag yang digunakan untuk menjelaskan versi HTML, dan harus ditulis pada baris paling awal sebelum tag <html>.<br />
<br />
Contohnya sebagai berikut :<br />
<br />
<br />
<pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre>
<br />
Tag Doctype diatas menjelaskan bahwa kita menggunakan HTML versi 4.0 atau yang biasa disebut XHTML versi 1.0.<br />
<br />
<blockquote class="tr_bq">
<div style="text-align: center;">
Ingat! tanpa harus menuliskan Doctype, dokumen HTML yang kita buat masih dapat berjalan dengan baik. Namun, W3C menganjurkan agar kita selalu menggunakan <!DOCTYPE> pada baris paling awal dokumen HTML, supaya sesuai dengan standar yang telah ditetapkan oleh W3C.</div>
</blockquote>
<br />
<br />
<h4>
<html></h4>
Tag ini digunakan untuk memberitahukan kepada browser bahwa dokumen yang kita buat adalah dokumen HTML. Tag <html> merupakan salah satu dari tiga bagian utama struktur HTML. Dan setiap tag lainnya harus ditulis dan berada didalam tag <html> dan </html>, istilahnya diapit. Tag <html> .... </html> juga menandakan bahwa kita akan memulai dan mengakhiri dokumen HTML.<br />
<br />
<h4>
<head></h4>
Tag ini mendefinisikan bahwa <head> adalah bagian header dari suatu file HTML. Biasanya didalam tag ini berisi tag <title>, tag <meta>, dan tag lain yang masih merupakan bagian dari tag <head>. Contohnya seperti tag <script>. Selain itu tag <head> juga merupakan salah satu dari 3 bagian utama struktur HTML.<br />
<br />
<h4>
<title></h4>
Tag ini berfungsi untuk menampilkan judul dokumen HTML.<br />
<br />
<h4>
<body></h4>
Tag ini berfungsi untuk menampilkan isi dari dokumen HTML. contohnya seperti: Link, image, text, video, dan semua yang akan ditampilkan ke browser. Tag body merupakan salah satu dari 3 bagian utama struktur HTML.<br />
<br />
Maka, jika semuanya digabungkan struktur lengkapnya adalah sebagai berikut:<br />
<br />
<br />
<pre class="html" name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Untuk Judul Dokumen HTML</html>
</head>
<body>
Untuk Isi Dokumen HTML
</body>
</html></pre>
<br />
Sekarang coba anda ketikan skrip diatas pada aplikasi Text Editor anda, dan save dengan nama coba.html, kemudian jalankan dibrowser. Maka akan tampil sebagai berikut:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYrC7I2guw7n2OXbBG3bnlqgH1SpMC2dUZF_nGjhm-NL1qkTc9Cq5Qfi0R7CLrf0ALtf40FLstHWja7Fssldl4IX04PA7lDiBV3EtAzBrsselR6eHWa_zv9J-UNRIGHtrbihSSyRgU57y/s1600/Screenshot+from+2014-12-27+13:23:06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRYrC7I2guw7n2OXbBG3bnlqgH1SpMC2dUZF_nGjhm-NL1qkTc9Cq5Qfi0R7CLrf0ALtf40FLstHWja7Fssldl4IX04PA7lDiBV3EtAzBrsselR6eHWa_zv9J-UNRIGHtrbihSSyRgU57y/s1600/Screenshot+from+2014-12-27+13:23:06.png" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<br />
<h3>
Element HTML  </h3>
Apa itu Element HTML? Element HTML adalah nama tag yang terdiri dari 3 bagian, yaitu: tag pembuka, isi, dan tag penutup. <br />
<br />
<h4>
Contoh :</h4>
<pre class="html" name="code"><tag pembuka> isi </tag penutup></pre>
<br />
<h4>
Lebih jelasnya :</h4>
<pre class="html" name="code"><body> isi </body>
<p> isi </p>
<b> isi </b>
<title> isi judul html </title></pre>
<br />
<p> = adalah element yang digunakan untuk membuat paragraph.<br />
<b> = adalah element yang digunakan untuk membuat huruf menjadi tebal (bold).<br />
<title> = adalah element yang digunakan untuk mendefinisikan judul dokumen html.<br />
<br />
<h4>
Elemen HTML mempunyai ciri-ciri sebagai berikut:</h4>
<ul>
<li>Elemen HTML dimulai dengan tag pembuka.</li>
<li>Elemen HTML diakhiri dengan tag penutup.</li>
<li>Isi Elemen HTML adalah semua yang terdapat diantara tag pembuka dan tag penutup.</li>
<li>Beberapa elemen HTML ada yang tidak memiliki isi dan tag penutup.</li>
<li>Elemen yang tidak memiliki isi ditutup pada awal tag />.</li>
<li>Sebagian besar elemen HTML dapat diberi atribut tertentu.</li>
</ul>
<h4>
Element yang tidak memiliki isi dan tag penutup contohnya:</h4>
<br />
<pre class="html" name="code"><hr /></pre>
<pre class="html" name="code"><br /></pre>
<hr /> adalah element yang akan membuat garis lurus.<br />
<br /> adalah element yang akan membuat baris baru (line break).<br />
<br />
Tag-tag yang ditulis secara berpasangan artinya “yang memiliki” tag pembuka dan tag penutup, dan yang musti di ingat adalah penulisan tag yang memiliki pasangan tidak boleh saling tumpah tindih dengan pasangan tag lain.<br />
<br />
<h4>
Contoh penulisan tag yang salah (tumpah tindih dengan pasangan tag lain):</h4>
<br />
<pre class="html" name="code"><p>
<b> ... </p>
</b></pre>
<br />
<h4>
Contoh penulisan tag yang benar:</h4>
<pre class="html" name="code"><p> <b>..</b> </p></pre>
<br />
Tag <p> Harus berpasangan dengan tag </p><br />
Tag <b> Harus berpasangan dengan tag </b><br />
<br />
<h3>
Attribute HTML</h3>
Apa itu Attribute HTML? Attribute HTML adalah property dari suatu element HTML. Attribut HTML terdiri atas nama dan nilai.<br />
<br />
Contoh :<br />
<br />
<pre class="html" name="code"><tag nama-attribute=”nilai-attribute”></pre>
<br />
<br />
Lebih Jelasnya :<br />
<br />
<pre class="html" name="code"><body bgcolor=”black”></pre>
<br />
<body = adalah element html (nama tag)<br />
bgcolor = adalah nama attribute<br />
“black” = adalah nilai attribute<br />
<br />
Contoh Lainnya :<br />
<br />
<pre class="html" name="code"><font color=”red”> Isi </font></pre>
<br />
<font = element html<br />
color = adalah nama attribute<br />
“red” = adalah nilai attribute<br />
Isi = adalah isi element html<br />
</font> = adalah tag penutup<br />
<br />
Contoh Lagi :<br />
<br />
<pre class="html" name="code"><div align=”center”></pre>
<br />
<div = adalah element html<br />
align = adalah nama attribute<br />
“center” = adalah nilai attribute<br />
<br />
Ingat! Nilai attribute harus berada didalam tanda petik dua “ “, contohnya jika kita ingin mengubah warna background html menjadi kuning, maka penulisan yang benar adalah seperti ini:<br />
<br />
<pre class="html" name="code"><body bgcolor=”yellow”></pre>
<br />
Sebenarnya nilai attribute yang tidak diberi tanda petik dua “ “ masih bisa dijalankan di browser, namun agar memenuhi standar yang telah ditetapkan oleh W3C, maka ada baiknya kita menggunakan tanda petik dua untuk mendefinisikan nilai attribute. Dan ingat! Harus ditulis menggunakan huruf kecil semua yak :D<br />
<br />
Bagaimana? mudah kan? oke sekian tutorial Belajar Dasar-Dasar HTML. Semoga Bermanfaat :)<br />
<br />
Sumber : <a href="http://w3schools.com/">http://w3schools.com</a>

Langsung saja, sebelum mempelajari dan menuliskan tag html di code editor, ada baiknya kalian membuka dulu software editor yang kalian...

Multimedia

Blogroll

Kategori

Footer 1

Footer Widget 2

Footer Text

About

Follow us on FaceBook

Mengenai Saya

Arsip Blog

Popular Posts

POPULAR POSTS