tag:blogger.com,1999:blog-17045748764494925072023-11-16T05:40:12.237-08:00Welcome to My BlogAlexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.comBlogger49125tag:blogger.com,1999:blog-1704574876449492507.post-81040931043710243782019-01-19T12:16:00.001-08:002019-01-19T12:16:48.488-08:00TUGAS APLIKASI LOGIN DESAIN WEB<div dir="ltr" style="text-align: left;" trbidi="on">
Nama : Fendi Setyawan<br />
NIM : 5150411130<br />
Kelas : B<br />
<br />
Berikut ini adalah laporan hasil percobaan dari pembuatan aplikasi login dengan dilengkapi register dan blokir permanen jika 3 kali salah password.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdxKaaHkeM-7VLjYaSStl2VD_lsV4tp14niYVD7g3Tn30xyYoPAFiwb69_a8hf4202JJLfqosOdlC5YTaazwtBo9edEV07D1brgHBZxTm3IxBW-49-ajuGyT1UiROtCV8KISZ2smucXw/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdxKaaHkeM-7VLjYaSStl2VD_lsV4tp14niYVD7g3Tn30xyYoPAFiwb69_a8hf4202JJLfqosOdlC5YTaazwtBo9edEV07D1brgHBZxTm3IxBW-49-ajuGyT1UiROtCV8KISZ2smucXw/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Form register</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxYAKZf89Kz-VbPJpNrJHB4mBXwoMq4LqN5rJdeGoAvTnB9OkblDhi378FFkPDZ0lHAnvNBFNyDawgl-yM5GemY1Ni_UIXSuUqfDhFsiQN7MiMGGgPh-rOOjwu3s4BLzVUm0sAKqixhI/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxYAKZf89Kz-VbPJpNrJHB4mBXwoMq4LqN5rJdeGoAvTnB9OkblDhi378FFkPDZ0lHAnvNBFNyDawgl-yM5GemY1Ni_UIXSuUqfDhFsiQN7MiMGGgPh-rOOjwu3s4BLzVUm0sAKqixhI/s640/2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Form Login</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRUpr_IlPqAZ4JJNVOFK0Lwz2ZTFrnrCdYBQs7blcaYv2TuY9LBvxrDCwTDnSv30t6tZ5fX1o454NEXGQUZCp5PnCjB8_MOHbm7GW4rLmC4i_b569k7b2UUHeFH-Hjkvb4s5EkaO5f9I/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRUpr_IlPqAZ4JJNVOFK0Lwz2ZTFrnrCdYBQs7blcaYv2TuY9LBvxrDCwTDnSv30t6tZ5fX1o454NEXGQUZCp5PnCjB8_MOHbm7GW4rLmC4i_b569k7b2UUHeFH-Hjkvb4s5EkaO5f9I/s640/3.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Dashboard admin jika berhasil login</div>
<br />
Tampilan jika salah username/password<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyVi1do_2kS5PTm2hcYUKHmnhfzUDE5JAWJNu556KTGpaIfLP-9P8YF_VZiluDXGHmBzZFDpUDxeQWhNyiU9ZdV8ueB1r3af8ahqRX5L4h4UxvdkyMVQBdqdkTkPXwIELY9SWZEm5k7Q/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyVi1do_2kS5PTm2hcYUKHmnhfzUDE5JAWJNu556KTGpaIfLP-9P8YF_VZiluDXGHmBzZFDpUDxeQWhNyiU9ZdV8ueB1r3af8ahqRX5L4h4UxvdkyMVQBdqdkTkPXwIELY9SWZEm5k7Q/s640/4.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Salah 1 kali</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCP_883gYuhc4LOJikXoJ8R9aZay8cV0mvAIhX6OPCnlw_frPOKVjGfxjZg5RwwmcTZG-WLM4-txxBX9dDNIZlcQMpChHNYK31szBKWWerKY-USNpaBkdcjqSpr8YizusGclVpaXKPrU/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCP_883gYuhc4LOJikXoJ8R9aZay8cV0mvAIhX6OPCnlw_frPOKVjGfxjZg5RwwmcTZG-WLM4-txxBX9dDNIZlcQMpChHNYK31szBKWWerKY-USNpaBkdcjqSpr8YizusGclVpaXKPrU/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Salah 2 kali</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLCr-Vq5hNGEemg728lQg-WeyPKOwwc7gsDjGsHuEi3yAr-mC7T94ja4iQ1goB88yBoxU5ONbOFNURDoY4-AwrHdgI32VvRFRQEtfZBNTgRbBe9sNT6AVI9umrE6qUc7KJT8WGjuySMqk/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLCr-Vq5hNGEemg728lQg-WeyPKOwwc7gsDjGsHuEi3yAr-mC7T94ja4iQ1goB88yBoxU5ONbOFNURDoY4-AwrHdgI32VvRFRQEtfZBNTgRbBe9sNT6AVI9umrE6qUc7KJT8WGjuySMqk/s640/6.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Salah 3 kali</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcxfO1moK4wwF8mf6YYsJ5iQ4HRYrgsCjJZ5FqIu7jALpDUbM6CnRvoTH5RC3frd1hTWZ3CKPyjSqwlADNokUTnbGQDLRlY3gUlf5M6mrloox65I45lDzfHKLugD4v8OMDQBzKkp0WAw/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcxfO1moK4wwF8mf6YYsJ5iQ4HRYrgsCjJZ5FqIu7jALpDUbM6CnRvoTH5RC3frd1hTWZ3CKPyjSqwlADNokUTnbGQDLRlY3gUlf5M6mrloox65I45lDzfHKLugD4v8OMDQBzKkp0WAw/s640/7.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Blokir permanen</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Script lengkap dan database bisa didownload di <a href="https://drive.google.com/file/d/1nkxh074CipulwjANtSYUkQ1rL4dTHnRN/view?usp=sharing" target="_blank">SINI</a></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-68055738850515956392018-10-26T20:51:00.002-07:002018-10-26T20:51:53.051-07:00TUGAS 1 DESAIN WEB <div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;">Nama : Fendi Setyawan</span></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;">NIM : 5150411130</span></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;">Kelas : Informatika B</span></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;"><br /></span></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;">Berikut ini adalah catatan tentang HTML5, yang terdiri dari:</span></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="color: #3a3a3a; font-family: Open Sans, Helvetica Neue, Arial, sans-serif;"><span style="font-size: 14px;">1. </span></span><a href="https://fendisetyawan10.blogspot.com/2018/10/tugas-desain-web-struktur-html.html" style="background-color: transparent;" target="_blank">Struktur HTML</a></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="background-color: transparent;">2. Tag-tag HTML</span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<span style="background-color: transparent;"> <a href="https://fendisetyawan10.blogspot.com/2018/10/tugas-desain-web-macam-macam-tag-html5.html" target="_blank">a. Tag HTML Basic & Tag HTML Form</a></span></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<a href="https://fendisetyawan10.blogspot.com/2018/10/tugas-desain-web-macam-macam-tag-html5_26.html" target="_blank">b. Tag HTML Formatting</a></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<a href="https://fendisetyawan10.blogspot.com/2018/10/tugas-desain-web-macam-macam-tag-html5_72.html" target="_blank">c. Tag HTML Link, Tag HTML List, Tag HTML Table & Tag HTML Style </a></div>
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<a href="https://fendisetyawan10.blogspot.com/2018/10/tugas-desain-web-macam-macam-tag-html5_56.html" target="_blank">d. Tag HTML Audio/Video & Tag HTML Images</a></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<div style="background-color: white; box-sizing: inherit; margin-bottom: 0.5em; margin-top: 0.5em;">
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-26526308717560724482018-10-26T20:42:00.000-07:002018-10-26T20:42:01.694-07:00[TUGAS DESAIN WEB] Struktur HTML<div dir="ltr" style="text-align: left;" trbidi="on">
Struktur dasar HTML ini biasanya selalu ada dalam setiap file HTML. Penulisan struktur dasar HTML dasar juga harus berurutan atau mengikuti standar struktur HTML yang ada. Struktur dasar HTML terdiri beberapa tag-tag HTML, setiap tag HTML bisa memiliki tag pembuka dan penutup, tapi ada juga yang tidak memiliki tag penutup.<br />
<br />
Berikut ini adalah contoh struktur html sederhana<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Struktur HTML Sederhana</title>
</head>
<body>
<header>
<h1>Judul Website</h1>
<img src="logo.png" height="100" widht="100"/>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Judul Artikel 1</h1>
<h2>Sub Judul Artikel 1</h2>
</header>
<p>...Ini adalah isi dari artikel 1...</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
<h2>Sub Judul Artikel 2</h2>
</header>
<p>...Ini adalah isi dari artikel 2...</p>
</article>
</section>
<aside>
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>Footer - Fendi Setyawan</p>
</footer>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxuoofUGHv00onYmUWOV2pABEsV4zVds_8ZOUjHnUBOuaulBTkVFuiIJnFKT_ejQ_bdF9MHQggDMn5F1RIqfFzC0fYfiBXEJ60MrewIfUorCEw3m5lM_H2JWbJn5M6JjdQjuuAHK4Cmk/s1600/struktur.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="732" data-original-width="535" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxuoofUGHv00onYmUWOV2pABEsV4zVds_8ZOUjHnUBOuaulBTkVFuiIJnFKT_ejQ_bdF9MHQggDMn5F1RIqfFzC0fYfiBXEJ60MrewIfUorCEw3m5lM_H2JWbJn5M6JjdQjuuAHK4Cmk/s640/struktur.PNG" width="466" /></a></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-88450621173958286512018-10-26T20:31:00.003-07:002018-10-26T20:31:43.076-07:00[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART4<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Tag HTML Audio Video</b></h3>
<div>
<div>
<audio><span style="white-space: pre;"> </span>Tag untuk membuat isi suara (tag baru HTML5)</div>
<div>
<source><span style="white-space: pre;"> </span>Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)</div>
<div>
<track><span style="white-space: pre;"> </span>Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)</div>
<div>
<video><span style="white-space: pre;"> </span>Tag untuk membuat sebuah video atau film (tag baru HTML5)</div>
</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="vid.mp4" type="video/mp4">
</video>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrb8Wc8BdHc0pegK0TJmazCQEjwAMO0tGnAQa3AQLl5AfBU4m8Uf9xN_cfwL4Gqz7z0Nfb9xrCMHdnSjJ2Do9tI3o3TRrEbROKL2JDoupKQB65Ug9CufUGFOmxujWDen-u4Pi5UetR3xs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="355" data-original-width="674" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrb8Wc8BdHc0pegK0TJmazCQEjwAMO0tGnAQa3AQLl5AfBU4m8Uf9xN_cfwL4Gqz7z0Nfb9xrCMHdnSjJ2Do9tI3o3TRrEbROKL2JDoupKQB65Ug9CufUGFOmxujWDen-u4Pi5UetR3xs/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Tag HTML Images</h3>
<div>
<div>
<img><span style="white-space: pre;"> </span>Tag untuk membuat gambar</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<img src="logo.png" alt="Gambar" width="42" height="42">
</body>
</html></code></pre>
</div>
<div>
hasil</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3052ZDApYJRcv_FWQ4NmYKL94bU7Y1yIvqRLh9GqFVdS7gu5nn9uKFE1R5BiSfB6XNHZNDN6Z_HT1YNDspWwIta0N9YdtG9MxkGt2wdTVokKsrX0otjd7nUiTc3rEbPKCzfo9tjB6T84/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="156" data-original-width="469" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3052ZDApYJRcv_FWQ4NmYKL94bU7Y1yIvqRLh9GqFVdS7gu5nn9uKFE1R5BiSfB6XNHZNDN6Z_HT1YNDspWwIta0N9YdtG9MxkGt2wdTVokKsrX0otjd7nUiTc3rEbPKCzfo9tjB6T84/s640/5.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<map><span style="white-space: pre;"> </span>Tag untuk membuat gambar-peta</div>
<div>
<area><span style="white-space: pre;"> </span>Tag untuk membuat area dalam gambar-peta</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE HTML>
<html>
<head>
<title>Map</title>
</head>
<body>
<img src="mapku.jpg" alt="Planets"
usemap="#mapku">
<map name="mapku">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
</body>
</html></code></pre>
</div>
<div>
hasil</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb5hqDw9H3hQun7OHewvocTLtcxlsQqBhDihEzSGyvBfpz5pZCn6Oa-JrOu6_8-1gT5WXC4MWYgUte4lO-1wwoKqH_Npup4MFewmMjPICV11kBde7VOSflC30KOpSls-WYnIxUW-lOac/s1600/mapaea.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="577" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxb5hqDw9H3hQun7OHewvocTLtcxlsQqBhDihEzSGyvBfpz5pZCn6Oa-JrOu6_8-1gT5WXC4MWYgUte4lO-1wwoKqH_Npup4MFewmMjPICV11kBde7VOSflC30KOpSls-WYnIxUW-lOac/s640/mapaea.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<canvas><span style="white-space: pre;"> </span>Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLg_l1Mydc62p7P1ritpbT_-BT0urRmyJToQ3A2JH4sxeOcuFg8Tu7PlFwvgmQw8sTUjj4VJcFAKODaEmhXCkGShS4w4HxOjGGGqPL4qF1UmoXRZ_J6bJd0fC6zyGNfBcJ0osa66wlQf0/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="206" data-original-width="482" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLg_l1Mydc62p7P1ritpbT_-BT0urRmyJToQ3A2JH4sxeOcuFg8Tu7PlFwvgmQw8sTUjj4VJcFAKODaEmhXCkGShS4w4HxOjGGGqPL4qF1UmoXRZ_J6bJd0fC6zyGNfBcJ0osa66wlQf0/s640/2.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<figcaption><span style="white-space: pre;"> </span>Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)</div>
<div>
<figure><span style="white-space: pre;"> </span>Menentukan konten mandiri (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<figure>
<img src="logo.png" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Ini ficaption.</figcaption>
</figure>
</body>
</html><div class="separator" style="clear: both; text-align: center;">
</div>
</code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLkYXfWArSkSQIWxTUk-nU6RM7LftY8uqFs4rrhjjFnNp_0GPy4DzoboB1sfJw8wqJpCISBmU5to4yM0QAl4Aioch2JJSJIjXBO01XZiCQDeNb_QHMCgztTdqlVuz-LAbAu1TffJjxVY/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="349" data-original-width="490" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLkYXfWArSkSQIWxTUk-nU6RM7LftY8uqFs4rrhjjFnNp_0GPy4DzoboB1sfJw8wqJpCISBmU5to4yM0QAl4Aioch2JJSJIjXBO01XZiCQDeNb_QHMCgztTdqlVuz-LAbAu1TffJjxVY/s640/4.PNG" width="640" /></a></div>
<div>
<br /></div>
</div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-57392940144529795412018-10-26T19:42:00.001-07:002018-10-26T20:03:48.708-07:00[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART3<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Tag HTML Link</b></h3>
<div>
<div>
<a><span style="white-space: pre;"> </span> Tag untuk membuat hyperlink</div>
<div>
<link><span style="white-space: pre;"> </span>Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)</div>
<div>
<nav><span style="white-space: pre;"> </span>Tag untuk membuat navigasi link (tag baru HTML5)</div>
</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgodDoJ5oKrU6JBtLPCba6fiUyTZ0ndlU_pvH5Ynb7wid05XTZs_jmXtUTaEYGQBsQAhlNOMDqdyA9lHexsphBSFw2mUTOLdwFQ-t7R69INAH5RB7sof8j_A-AgXPOQdppF-GzD29ewVVw/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="183" data-original-width="436" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgodDoJ5oKrU6JBtLPCba6fiUyTZ0ndlU_pvH5Ynb7wid05XTZs_jmXtUTaEYGQBsQAhlNOMDqdyA9lHexsphBSFw2mUTOLdwFQ-t7R69INAH5RB7sof8j_A-AgXPOQdppF-GzD29ewVVw/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Tag HMTL List</b></div>
<div class="separator" style="clear: both;">
<ul><span style="white-space: pre;"> </span>Tag untuk membuat daftar dengan selain nomor</div>
<div class="separator" style="clear: both;">
<ol><span style="white-space: pre;"> </span>Tag untuk membuat daftar dengan nomor</div>
<div class="separator" style="clear: both;">
<li> Tag untuk membuat sebuah item daftar</div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html></code></pre>
<div class="separator" style="clear: both;">
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFI3GfDZ0avycP1YEGp2J6CesqrwmF8RibIdVsl-W0p_hkSDNVM0X9yu341iXfzJW6-2q_WYWsdbLFHA_ToBkgIMaHQ0bpoY7o842A9RToL77pIkEAsolQZzGAvYiQOZTwW6eVUDinUtY/s1600/13.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="191" data-original-width="437" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFI3GfDZ0avycP1YEGp2J6CesqrwmF8RibIdVsl-W0p_hkSDNVM0X9yu341iXfzJW6-2q_WYWsdbLFHA_ToBkgIMaHQ0bpoY7o842A9RToL77pIkEAsolQZzGAvYiQOZTwW6eVUDinUtY/s640/13.PNG" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<dl><span style="white-space: pre;"> </span>Tag untuk membuat sebuah daftar definisi</div>
<div class="separator" style="clear: both;">
<dt><span style="white-space: pre;"> </span>Tag untuk membuat istilah (item) dalam daftar definisi</div>
<div class="separator" style="clear: both;">
<dd><span style="white-space: pre;"> </span>Defines a description of an item in a definition list</div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>An ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html></code></pre>
<div class="separator" style="clear: both;">
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNt9SPWn-5lWp-hQBC714F_2OeWxd-NBQoalRrWDBm2J8caz9aWrp7U0fN78agbiMUCjS56_vV0DBIDf0ODPTI5KmhyhvSnqobc3fXGn7raF-Fm2gSfZYZ6-fD4LsJCIfh6yEAfNzVTs/s1600/46.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="283" data-original-width="422" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNt9SPWn-5lWp-hQBC714F_2OeWxd-NBQoalRrWDBm2J8caz9aWrp7U0fN78agbiMUCjS56_vV0DBIDf0ODPTI5KmhyhvSnqobc3fXGn7raF-Fm2gSfZYZ6-fD4LsJCIfh6yEAfNzVTs/s640/46.PNG" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Tag HTML Table</h3>
<div>
<div>
<table> Tag untuk membuat tabel</div>
<div>
<caption> Tag untuk membuat sebuah caption tabel</div>
<div>
<th><span style="white-space: pre;"> </span> Tag untuk membuat sebuah sel header tabel</div>
<div>
<tr><span style="white-space: pre;"> </span> Tag untuk membuat baris dalam sebuah tabel</div>
<div>
<td><span style="white-space: pre;"> </span> Tag untuk membuat sel dalam sebuah tabel</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Contoh Table</caption>
<tr>
<th>Bulan</th>
<th>Pasien</th>
</tr>
<tr>
<td>Januar1</td>
<td>100</td>
</tr>
<tr>
<td>Februari</td>
<td>80</td>
</tr>
</table>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvqSHi7jFheH2XDYY3CbJ441wFwxXU8fs9a3sxA7cx4lYHeRKAI7G136zIJH6k60pqH3Th-hMoxwtkWEd-qv-m5ZH2_mLQf981qbskbPZjvXtIcaMU13Qdeip9x05sfit9oLntWs_JVw/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="192" data-original-width="497" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvqSHi7jFheH2XDYY3CbJ441wFwxXU8fs9a3sxA7cx4lYHeRKAI7G136zIJH6k60pqH3Th-hMoxwtkWEd-qv-m5ZH2_mLQf981qbskbPZjvXtIcaMU13Qdeip9x05sfit9oLntWs_JVw/s640/1.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<thead><span style="white-space: pre;"> </span>Mengelompokan isi header dalam sebuah tabel</div>
<div>
<tbody><span style="white-space: pre;"> </span>Mengelompokanisi tubuh dalam sebuah tabel</div>
<div>
<tfoot><span style="white-space: pre;"> </span>Mengelompokan isi footer dalam sebuah tabel</div>
<div>
<col><span style="white-space: pre;"> </span>Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup></div>
<div>
<colgroup><span style="white-space: pre;"> </span>Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat</div>
</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:light-blue">
</colgroup>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOnj0TwqxpxJ2bDFh7a2OtsYVnzSkDCwCrzLyM9YbgYoPeMSf1dxZ-5jc42dSH04NyBiJID4TERTDo9Ce_vbtnODrFlH9tANIQI8VG6C0rRNyf9LYGD5KH6QlvLyIztVct7a6q4GEaEA/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="203" data-original-width="485" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOnj0TwqxpxJ2bDFh7a2OtsYVnzSkDCwCrzLyM9YbgYoPeMSf1dxZ-5jc42dSH04NyBiJID4TERTDo9Ce_vbtnODrFlH9tANIQI8VG6C0rRNyf9LYGD5KH6QlvLyIztVct7a6q4GEaEA/s640/2.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
<b>Tag HTML Style</b></h3>
<div>
<div>
<style><span style="white-space: pre;"> </span>Tag untuk membuat informasi style untuk dokumen</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Style heading</h1>
<p>Style paragraph</p>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzDcXt10UJq9oc0W_5rEUjAu6-MhTrrNdyi4jfQlDUgkf17c1rip8tsYIw_9zV77NXJVqwROOdIEMjndUv500q210JvRurFYdwH2twJ-3TclOS8dJ4sPfnzsCaGp_LqKSphWFflGvkuk/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="224" data-original-width="458" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzDcXt10UJq9oc0W_5rEUjAu6-MhTrrNdyi4jfQlDUgkf17c1rip8tsYIw_9zV77NXJVqwROOdIEMjndUv500q210JvRurFYdwH2twJ-3TclOS8dJ4sPfnzsCaGp_LqKSphWFflGvkuk/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<div><span style="white-space: pre;"> </span>Tag untuk membuat sebuah bagian dalam dokumen</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<div style="background-color:lightblue">
<h3>Contoh Div element</h3>
<p>contoh div element.</p>
</div>
<p>This is some text.</p>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzDcXt10UJq9oc0W_5rEUjAu6-MhTrrNdyi4jfQlDUgkf17c1rip8tsYIw_9zV77NXJVqwROOdIEMjndUv500q210JvRurFYdwH2twJ-3TclOS8dJ4sPfnzsCaGp_LqKSphWFflGvkuk/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="224" data-original-width="458" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfzDcXt10UJq9oc0W_5rEUjAu6-MhTrrNdyi4jfQlDUgkf17c1rip8tsYIw_9zV77NXJVqwROOdIEMjndUv500q210JvRurFYdwH2twJ-3TclOS8dJ4sPfnzsCaGp_LqKSphWFflGvkuk/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<span><span style="white-space: pre;"> </span>Tag untuk membuat sebuah bagian dalam dokumen</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<p>Contoh <span style="color:blue;font-weight:bold">span</span></p>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSNdiPKTWIw_8xzGr7HhC9ZDsShKlma3WmPDfSR4-ghVVsuraqaCfAKUHrFih7RCZaIryuibIRuZFzv3KfpvJu3JNWV5EZC8KSPaK0gMfwIzDt-gem6PrhiXS4n4aACFhxqwsg5_8uhc/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="469" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSNdiPKTWIw_8xzGr7HhC9ZDsShKlma3WmPDfSR4-ghVVsuraqaCfAKUHrFih7RCZaIryuibIRuZFzv3KfpvJu3JNWV5EZC8KSPaK0gMfwIzDt-gem6PrhiXS4n4aACFhxqwsg5_8uhc/s640/4.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<header><span style="white-space: pre;"> </span>Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<header>
<h1>Desain Web</h1>
<img src="logo.png" width="50px" height="50px">
</header>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQZV5qvLXzwcvPgp6N9O2Ijf4H_n4xtPu0awCJRbF6myZPa0Dh0vdHwKcjYotkf-9GO8jZHSgfACdg53rzXuPnTWLsyvwjLIykib3M9YRqoDGEaJl45uBBlWjAAO7FX5GU6q9xDw7CCQ/s1600/44.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="239" data-original-width="493" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQZV5qvLXzwcvPgp6N9O2Ijf4H_n4xtPu0awCJRbF6myZPa0Dh0vdHwKcjYotkf-9GO8jZHSgfACdg53rzXuPnTWLsyvwjLIykib3M9YRqoDGEaJl45uBBlWjAAO7FX5GU6q9xDw7CCQ/s640/44.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<footer><span style="white-space: pre;"> </span>Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<main>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</main>
<footer>
<p>...copyright fendi setyawan...</p>
</footer>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8ErlSKyiy9MmZqPTaTPN50MnWNFibAn9VBNF8VADbgh7hVR3GO5hDDH-cFKTLd6zn3NpE0FkhSZF0z0LXkRQ3pArQ-H2bc3NbHQ1KEAkTvDxoDgUsGOnnaWZmXPC_LxY4KVrP4sRWSI/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="286" data-original-width="492" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8ErlSKyiy9MmZqPTaTPN50MnWNFibAn9VBNF8VADbgh7hVR3GO5hDDH-cFKTLd6zn3NpE0FkhSZF0z0LXkRQ3pArQ-H2bc3NbHQ1KEAkTvDxoDgUsGOnnaWZmXPC_LxY4KVrP4sRWSI/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<section><span style="white-space: pre;"> </span>Tag untuk membuat bagian dalam dokumen (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<section>
<h1>Judul 1</h1>
<p>...Kumpulan dari konten...</p>
</section>
<section>
<h1>Judul 1</h1>
<p>...Kumpulan dari konten...</p>
</section>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfr71QskxX0Bin8LYSIQ2r2fWyIbeHZ-JEbhyphenhyphenVW18cy5EAQTHpREJnb1rKWyaXJxGCdMpvNHGIcru1F2rt4psbsX0NE69g0kQktlHpHU9fQAkOftt-4KvYJGgMOkv3eF1U6pV-3vIqeU/s1600/77.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="269" data-original-width="503" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfr71QskxX0Bin8LYSIQ2r2fWyIbeHZ-JEbhyphenhyphenVW18cy5EAQTHpREJnb1rKWyaXJxGCdMpvNHGIcru1F2rt4psbsX0NE69g0kQktlHpHU9fQAkOftt-4KvYJGgMOkv3eF1U6pV-3vIqeU/s640/77.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<article><span style="white-space: pre;"> </span>Tag untuk membuat sebuah artikel (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<article>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</article>
<aside>
<p>...penjelasan tambahan...</p>
</aside>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDa5920CLllWzPU_iEAahNmi8X4R6omOdIYXJ02Ar1dwrWELuiZPGE3Ph3sGN0icpRNont4cqXhlJDlDw7HIvLeK4a5GJCRqPDF_GdWZRlkiPNszZpQDHPpJuSrVJcnKyJwWC_Kq30yI/s1600/22.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="271" data-original-width="487" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDa5920CLllWzPU_iEAahNmi8X4R6omOdIYXJ02Ar1dwrWELuiZPGE3Ph3sGN0icpRNont4cqXhlJDlDw7HIvLeK4a5GJCRqPDF_GdWZRlkiPNszZpQDHPpJuSrVJcnKyJwWC_Kq30yI/s640/22.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<aside><span style="white-space: pre;"> </span>Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<article>
<h2>Judul Artikel 1</h2>
<p>...penjelasan artikel 1...</p>
<p>... </p>
<p>... </p>
</article>
<aside>
<p>...penjelasan tambahan...</p>
</aside>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDa5920CLllWzPU_iEAahNmi8X4R6omOdIYXJ02Ar1dwrWELuiZPGE3Ph3sGN0icpRNont4cqXhlJDlDw7HIvLeK4a5GJCRqPDF_GdWZRlkiPNszZpQDHPpJuSrVJcnKyJwWC_Kq30yI/s1600/22.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="271" data-original-width="487" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLDa5920CLllWzPU_iEAahNmi8X4R6omOdIYXJ02Ar1dwrWELuiZPGE3Ph3sGN0icpRNont4cqXhlJDlDw7HIvLeK4a5GJCRqPDF_GdWZRlkiPNszZpQDHPpJuSrVJcnKyJwWC_Kq30yI/s640/22.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<details><span style="white-space: pre;"> </span>Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)<br />
<summary><span style="white-space: pre;"> </span>Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<details>
<summary>Contoh Detail</summary>
<p>Nama : Fendi Setyawan</p>
<p>NIM : 5150411130</p>
</details>
</body>
</html</code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaUxcGNJjfXgWghXt2ZjlAHg3trQREULyoHo38f1Mkib_RACS8JGyEcWelAVlF5Z0Qri4WhItEa4_iQcbBli020HHaL7LOio4wFqVcld6UMaCi5Nce6B3nLtFxdmuPwH4nl3VoWr2AeI/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="207" data-original-width="471" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaUxcGNJjfXgWghXt2ZjlAHg3trQREULyoHo38f1Mkib_RACS8JGyEcWelAVlF5Z0Qri4WhItEa4_iQcbBli020HHaL7LOio4wFqVcld6UMaCi5Nce6B3nLtFxdmuPwH4nl3VoWr2AeI/s640/1.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<dialog><span style="white-space: pre;"> </span>Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<dialog> <p>This is an HTML dialog! Click the button to close it.</p>
<button id="close">Close Dialog</button> </dialog> <button id="show">Show Me the Dialog!</button>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
</script>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_OSEONIsXr0ejJx1uORr_JU9o-A9jeo9kyZ1_XqUHVTYs461E_KdIc-S0P7D1Ce3pe-b-VkLV2kjyCtNVU8uC3eDJ0SNdD_RwM7H2YPUMTJi2EtQ58M4PFiUaNBX5V8Ke0rmvlWp9dI/s1600/dialog.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="215" data-original-width="1356" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_OSEONIsXr0ejJx1uORr_JU9o-A9jeo9kyZ1_XqUHVTYs461E_KdIc-S0P7D1Ce3pe-b-VkLV2kjyCtNVU8uC3eDJ0SNdD_RwM7H2YPUMTJi2EtQ58M4PFiUaNBX5V8Ke0rmvlWp9dI/s640/dialog.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-77884958791326556242018-10-26T19:30:00.000-07:002018-10-26T19:30:04.157-07:00[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART2<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Tag HTML Formatting</b></h3>
<div>
<div>
<abbr><span style="white-space: pre;"> </span>Tag untuk membuat sebuah singkatan<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p><abbr title="Universitas Teknologi Yogyakarta">UTY</abbr> didirikan pada 2002.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVx02CWwxMfY_mkqJGDi_apBV4n8hNqlulcjEghnvIeoNm5bIQZLMmpz-NYzocm0r1Bss7HEqF4zLyk8uvW1MPxr-VkqPKxsL8UWmWLsisY02PMeC7wffZdFl_cA_oPED3kmg1QFF-bXs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="144" data-original-width="488" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVx02CWwxMfY_mkqJGDi_apBV4n8hNqlulcjEghnvIeoNm5bIQZLMmpz-NYzocm0r1Bss7HEqF4zLyk8uvW1MPxr-VkqPKxsL8UWmWLsisY02PMeC7wffZdFl_cA_oPED3kmg1QFF-bXs/s640/1.PNG" width="640" /></a></div>
<br /></div>
<div>
<address><span style="white-space: pre;"> </span>Tag untuk membuat kontak alamat<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<address>
Disusun Oleh <a href="mailto:webmaster@example.com">Fendi Setyawan</a>.<br>
Kunjungi kami:<br>
Jalan Wates km 10<br>
Sedayu, Bantul<br>
DIY
</address>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWsA57H9ZVNUTxFddkO8dIU6MddOLtKMF3uBoIgXAyJoOhhrIdtvc4stDG4m7ebBLgtkPN7PW93qiDKHrWRqPKn_0R3vd2f0g9_gAnFdcQkE1eTE84CX-WYhK8llF5BYh0keeEtg8tKQg/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="181" data-original-width="501" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWsA57H9ZVNUTxFddkO8dIU6MddOLtKMF3uBoIgXAyJoOhhrIdtvc4stDG4m7ebBLgtkPN7PW93qiDKHrWRqPKn_0R3vd2f0g9_gAnFdcQkE1eTE84CX-WYhK8llF5BYh0keeEtg8tKQg/s640/2.PNG" width="640" /></a></div>
<br /></div>
<div>
<br />
<b><span style="white-space: pre;"> </span>Tag untuk membuat huruf bercetak tebal<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Tulisan Normal - <b>Tulisan Tebal</b>.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcC-XNiYD6JefHQtHAltJcTAfOkKIgKBaDXcoXfplUhNTJo_IpJKYPbT7aq7NHah75i0XiGK3ErM6tqOYdK5tbq2iAF3x4tXsymaa7eFId3tLQDJWeT5L595bo9DIPctmJGc08bisVl0A/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="138" data-original-width="477" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcC-XNiYD6JefHQtHAltJcTAfOkKIgKBaDXcoXfplUhNTJo_IpJKYPbT7aq7NHah75i0XiGK3ErM6tqOYdK5tbq2iAF3x4tXsymaa7eFId3tLQDJWeT5L595bo9DIPctmJGc08bisVl0A/s640/3.PNG" width="640" /></a></div>
<br /></div>
<div>
<bdi><span style="white-space: pre;"> </span>Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>
Contoh tag bdi
</p>
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnoMNxHNh1j2Yw2t5aIsqVH4H0fV3PVyv2s1Os4ci5gWWsi-vdf-4qmpggHRORR0UFtlvlWL320R5MTRxq3PBt3CXeW_iQjndzl4iYka7FvvdYCJ6aSYiesiRBwc1YV5k9PHSYS1eKw0/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="202" data-original-width="486" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitnoMNxHNh1j2Yw2t5aIsqVH4H0fV3PVyv2s1Os4ci5gWWsi-vdf-4qmpggHRORR0UFtlvlWL320R5MTRxq3PBt3CXeW_iQjndzl4iYka7FvvdYCJ6aSYiesiRBwc1YV5k9PHSYS1eKw0/s640/4.PNG" width="640" /></a></div>
<br /></div>
<div>
<bdo><span style="white-space: pre;"> </span>Mengganti arah teks<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Tulisan ini akan terbalik dari kanan ke kiri</p>
<p><bdo dir="rtl">Tulisan ini akan terbalik dari kanan ke kiri</bdo></p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsRREoKSfnhMdq3MemkNc2Vv3uIG7Y8GjZWJkcSHTj2anpOsAppH9DlZZLVdrP7Mk4T3zsewhdKHNzTHhnDTQrngvWkGGdllyFNh5qZvvSvJYH1r7_89PPur-Rwgg-foryjr9fkciJak/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="166" data-original-width="484" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsRREoKSfnhMdq3MemkNc2Vv3uIG7Y8GjZWJkcSHTj2anpOsAppH9DlZZLVdrP7Mk4T3zsewhdKHNzTHhnDTQrngvWkGGdllyFNh5qZvvSvJYH1r7_89PPur-Rwgg-foryjr9fkciJak/s640/5.PNG" width="640" /></a></div>
<br /></div>
<div>
<blockquote><span style="white-space: pre;"> </span>Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Contoh Quote:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
Sebaik-baiknya orang adalah orang yang berguna bagi orang lain
</blockquote>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWCIhUBn85X8bZJD4-EiI41i9Wkbmj7ray5AL84Skl9sFOzh16-iV2y8vHm9uDz57LtTzPzt6mkx8USTnoy_fl3NM-xkDJfs3v6XsDEIv6i9WQ5YFTBYtkmCS17gb4JVwiv8fkW7xa7M/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="533" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMWCIhUBn85X8bZJD4-EiI41i9Wkbmj7ray5AL84Skl9sFOzh16-iV2y8vHm9uDz57LtTzPzt6mkx8USTnoy_fl3NM-xkDJfs3v6XsDEIv6i9WQ5YFTBYtkmCS17gb4JVwiv8fkW7xa7M/s640/6.PNG" width="640" /></a></div>
<br /></div>
<div>
<cite><span style="white-space: pre;"> </span>Tag untuk membuat judul karya<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<img src="logo.png" width="220" height="277" alt="The Scream">
<p><cite>Dilan 1990</cite> by Milea. Difilmkan 2018.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdaXhlrwqsoAz3efC1LPQrEMdM6-4E4SLM9nCeBKIwB7qqjfBo5O7Hrl6-dCuHJ26q401S9gbgnbjM6wazp5BH4wjyvE_MOkXfiU37SvAikBwXc0jK2aSKwDQd3rUpgdWAyQ8epr1J_k/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="405" data-original-width="488" height="530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdaXhlrwqsoAz3efC1LPQrEMdM6-4E4SLM9nCeBKIwB7qqjfBo5O7Hrl6-dCuHJ26q401S9gbgnbjM6wazp5BH4wjyvE_MOkXfiU37SvAikBwXc0jK2aSKwDQd3rUpgdWAyQ8epr1J_k/s640/7.PNG" width="640" /></a></div>
<br /></div>
<div>
<code><span style="white-space: pre;"> </span>Tag untuk membuat potongan kode komputer di antara text<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<code>Ini Adalah code</code><br>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4qzIcyDSlF5SQA3ajQb9B5ytz4pkl4bHv-LfH9p44rKPdcsPJr7hs0Iq4DrASSjSS8fXWKkYnoS8-xNILlPd4I92mMrfbS4yDIz8J0YihmW7r2GimJwRJGiQ_aIefIAqP5ADbhX8Sss/s1600/code.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="125" data-original-width="528" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4qzIcyDSlF5SQA3ajQb9B5ytz4pkl4bHv-LfH9p44rKPdcsPJr7hs0Iq4DrASSjSS8fXWKkYnoS8-xNILlPd4I92mMrfbS4yDIz8J0YihmW7r2GimJwRJGiQ_aIefIAqP5ADbhX8Sss/s640/code.PNG" width="640" /></a></div>
<br /></div>
<div>
<del><span style="white-space: pre;"> </span>Tag untuk membuat teks yang telah dihapus dari dokumen<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Warna favorit saya <del>biru</del> <ins>merah</ins>!</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCWdnRS2gbDA7Vdhu8GaPKB9hj0Hsby0WgkeXFot0Zotgij5nh89oBFtu_DOaJgH45up6jL_1vJAqGXdTDwY4ZGCLjetkbAm_vjCZhZDpSoOETFzX5rzTlvt0-O1zbid9FhxmV1CzwF0/s1600/del.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="515" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfCWdnRS2gbDA7Vdhu8GaPKB9hj0Hsby0WgkeXFot0Zotgij5nh89oBFtu_DOaJgH45up6jL_1vJAqGXdTDwY4ZGCLjetkbAm_vjCZhZDpSoOETFzX5rzTlvt0-O1zbid9FhxmV1CzwF0/s640/del.PNG" width="640" /></a></div>
</div>
<div>
<dfn><span style="white-space: pre;"> </span>Tag untuk membuat sebuah istilah definisi<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p><dfn>HTML</dfn> adalah bahasa baku untuk membuat website.</p>
</body>
</html</code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptXmWBnY_ED8VBNh7Qzlx_8-3DYj1xRNAaDgsbuHjllbzP3YrEVaARsHtkrEsS81w-Zvcog5HK2UxVlHc3VyiyZQdk_pMy9RZLT2u65SE6K9R5lbHwKPzMJuFYiewzc8r38224WrpmY/s1600/dfn.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="147" data-original-width="525" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ptXmWBnY_ED8VBNh7Qzlx_8-3DYj1xRNAaDgsbuHjllbzP3YrEVaARsHtkrEsS81w-Zvcog5HK2UxVlHc3VyiyZQdk_pMy9RZLT2u65SE6K9R5lbHwKPzMJuFYiewzc8r38224WrpmY/s640/dfn.PNG" width="640" /></a></div>
<br /></div>
<div>
<i><span style="white-space: pre;"> </span>Tag untuk membuat sebuah bagian dari teks menjadi italic<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Chris <i>The Dragon</i> John.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJKhbVaEI5DsPkZsEO2WCJIHbCn1qWE1_Ppiy7Sgoj8NiygbGXSh9lZB6Uqo1Cwt3EUZs4D6AjgbNmgaSyCU0ztFexLoWkY6TD0KstgJiwEygyyXzsiOkiv5K5ckPmwkUm8XSkurH4rs/s1600/i.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="153" data-original-width="503" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJKhbVaEI5DsPkZsEO2WCJIHbCn1qWE1_Ppiy7Sgoj8NiygbGXSh9lZB6Uqo1Cwt3EUZs4D6AjgbNmgaSyCU0ztFexLoWkY6TD0KstgJiwEygyyXzsiOkiv5K5ckPmwkUm8XSkurH4rs/s640/i.PNG" width="640" /></a></div>
<br /></div>
<div>
<ins><span style="white-space: pre;"> </span>Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Aku suka <del>kamu</del></p><p> kamu suka <ins>dia</ins>!</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fe6pcMbLoBrAmjXtutdNNRr835-US73g118XKGVuR_yuTR20CYmDeNnhw9-CsdWB4GQAqudndFeHp44BvMSjRl-bqEK2zL5hudcK14pvbV1HcylLtODSzoLz8fj2yNMQuuSGV1ozbcs/s1600/ins.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="517" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_fe6pcMbLoBrAmjXtutdNNRr835-US73g118XKGVuR_yuTR20CYmDeNnhw9-CsdWB4GQAqudndFeHp44BvMSjRl-bqEK2zL5hudcK14pvbV1HcylLtODSzoLz8fj2yNMQuuSGV1ozbcs/s640/ins.PNG" width="640" /></a></div>
<br /></div>
<div>
<kbd><span style="white-space: pre;"> </span>Tag untuk membuat input keyboard<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<kbd>Keyboard input</kbd><br>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgMjg0_Hrl7_s1P5w0dcPD2q7p9QgPIznGXRgw1LRkIsdVsjTtxVSvHCg5-eKcGWNCmOxyblvxSa_CXH6bAUFzFuiAeZGSl0bS9DMuaiDhm1y-P1LUx6B-5aQCHEjqViLMgHGC-p3dcE/s1600/kbd.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="525" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgMjg0_Hrl7_s1P5w0dcPD2q7p9QgPIznGXRgw1LRkIsdVsjTtxVSvHCg5-eKcGWNCmOxyblvxSa_CXH6bAUFzFuiAeZGSl0bS9DMuaiDhm1y-P1LUx6B-5aQCHEjqViLMgHGC-p3dcE/s640/kbd.PNG" width="640" /></a></div>
<br /></div>
<div>
<mark><span style="white-space: pre;"> </span>Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Jangan Lupa <mark>Bahagia</mark> Hari Ini</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfMq9ADL8YZY5-vSgL8n_T4MruEFolrdl6ZA2mXbIUTQH8qM7DD-EXl48pEcjvFPkpledDN4bE13wyAqVBs_q2A8gkNwE-wJjmO1LG4NeL5Tsja1yxMKKF3BrjO2SawHaPSnygte1R5OE/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="492" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfMq9ADL8YZY5-vSgL8n_T4MruEFolrdl6ZA2mXbIUTQH8qM7DD-EXl48pEcjvFPkpledDN4bE13wyAqVBs_q2A8gkNwE-wJjmO1LG4NeL5Tsja1yxMKKF3BrjO2SawHaPSnygte1R5OE/s640/8.PNG" width="640" /></a></div>
<br /></div>
<div>
<meter><span style="white-space: pre;"> </span>Tag untuk membuat pengukuran skalar<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Contoh Tag Meter:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirCGM4WwoyRb7NHa0L_xhBJjBz832fsTePLlab02qznZtu915r6KkKZiDN3f38tEx_ECGKtC33gFeMaYKsykFLkH0jClo5ROU35XqfqsgbTUGNaHxHCFbQ3OdYntZZ23yy5NabpiBmP8U/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="173" data-original-width="496" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirCGM4WwoyRb7NHa0L_xhBJjBz832fsTePLlab02qznZtu915r6KkKZiDN3f38tEx_ECGKtC33gFeMaYKsykFLkH0jClo5ROU35XqfqsgbTUGNaHxHCFbQ3OdYntZZ23yy5NabpiBmP8U/s640/9.PNG" width="640" /></a></div>
<br /></div>
<div>
<pre><span style="white-space: pre;"> </span>Tag untuk membuat teks terformat<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<pre>
contoh a pre element
contoh a pre element
contoh a pre element
</pre>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcf0AOT77v1NvBSJjFJthLf3Mg2V0l_nu_RVFJTRJ1SVysYkcM-5Tg1ZbmLGp8OOyCplLiNa2yNTRnSVsBmCM3bqW81iCXhRwYVkKkiw-415jXMdqQ0ULVw4A8t1mc8R1_reaQImPVwYw/s1600/10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="479" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcf0AOT77v1NvBSJjFJthLf3Mg2V0l_nu_RVFJTRJ1SVysYkcM-5Tg1ZbmLGp8OOyCplLiNa2yNTRnSVsBmCM3bqW81iCXhRwYVkKkiw-415jXMdqQ0ULVw4A8t1mc8R1_reaQImPVwYw/s640/10.PNG" width="640" /></a></div>
<br /></div>
<div>
<progress><span style="white-space: pre;"> </span>Memperlihatkan kemajuan tugas (tag baru HTML5)<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
contoh progress:
<progress value="22" max="100">
</progress>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZBG1SCOMcwIYzDcoU03wCpePsZBkX6Vlyy9B61l8v7iE2GF9GfglEofpROSACX658tOde3TlmnR4wCPLjrgLH7FzpVcNcdytiTYP2C7tqRt5YQL19dHHTh6fCuTRGQrkUCTeoXBwzfg/s1600/11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="138" data-original-width="516" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ZBG1SCOMcwIYzDcoU03wCpePsZBkX6Vlyy9B61l8v7iE2GF9GfglEofpROSACX658tOde3TlmnR4wCPLjrgLH7FzpVcNcdytiTYP2C7tqRt5YQL19dHHTh6fCuTRGQrkUCTeoXBwzfg/s640/11.PNG" width="640" /></a></div>
<br />
<q><span style="white-space: pre;"> </span>Tag untuk membuat kutipan pendek<br />
<rp><span style="white-space: pre;"> </span>Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)<br />
<div>
<rt><span style="white-space: pre;"> </span>Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)</div>
<div>
<ruby><span style="white-space: pre;"> </span>Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)<br />
<br /></div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QjGL2tmPdFddmmTH1OJ9fZqZH27GWdWGSGNrtZ3nExEBacx4NiDoDf4yitzhxo5GDbNITEP-Rf8gHIz3_ZWQC1JIa0yABkEqgxWeJx2szUDaa86nfZ-NYX_AdcLKTYMRmXtoEK94ONY/s1600/12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="474" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-QjGL2tmPdFddmmTH1OJ9fZqZH27GWdWGSGNrtZ3nExEBacx4NiDoDf4yitzhxo5GDbNITEP-Rf8gHIz3_ZWQC1JIa0yABkEqgxWeJx2szUDaa86nfZ-NYX_AdcLKTYMRmXtoEK94ONY/s640/12.PNG" width="640" /></a></div>
</div>
<div>
<s><span style="white-space: pre;"> </span>Tag untuk membuat teks yang tidak lagi benar<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p><s>Mawar itu biru.</s></p>
<p>Mawar itu merah.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdSoGdxQfezsVs_fS4JbHAju8OdTtH2POZIFK9kQ30PzjAA2_0iAeQy21tZeFakIp2lCIzPR-ki697PnIuQQ_mujMSmk92I8qdptmwGh0SWQHxyk_67WPe7aUBJn7h3HLYjtojs5Qfxg/s1600/16.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="162" data-original-width="469" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdSoGdxQfezsVs_fS4JbHAju8OdTtH2POZIFK9kQ30PzjAA2_0iAeQy21tZeFakIp2lCIzPR-ki697PnIuQQ_mujMSmk92I8qdptmwGh0SWQHxyk_67WPe7aUBJn7h3HLYjtojs5Qfxg/s640/16.PNG" width="640" /></a></div>
<br /></div>
<div>
<samp><span style="white-space: pre;"> </span>Tag untuk membuat contoh keluaran dari program komputer<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<samp>contoh tag samp</samp><br>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxUw623zKlBB_h25aCoRVnVIINwyX6n3lbD17ooKrhgudQc-bxir6TB4_nHof6LsqVdVa9LbHt_NRA2PDUg3gAu56G1ZGWefdlwNdVUiWsNul1NAsI8ecf9r8wULu6LgG7DPSHCpkWw8/s1600/17.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="499" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxUw623zKlBB_h25aCoRVnVIINwyX6n3lbD17ooKrhgudQc-bxir6TB4_nHof6LsqVdVa9LbHt_NRA2PDUg3gAu56G1ZGWefdlwNdVUiWsNul1NAsI8ecf9r8wULu6LgG7DPSHCpkWw8/s640/17.PNG" width="640" /></a></div>
<br /></div>
<div>
<small><span style="white-space: pre;"> </span>Tag untuk membuat teks kecil<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p><small>Copyright 1999-2050 by Erlangga.</small></p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR55crv3fdv6BOnb45ueISzflfQosTO6SsrNInhevMSKPpcFEdmHlr6ictCbjAaKLmZC6QZNeSMOLs8UZJedycazdyeQRMuJSxUO0My015IbAuZ9Z43vsMUjavTlCzTGopNoNCMkZvC9w/s1600/18.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="147" data-original-width="496" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR55crv3fdv6BOnb45ueISzflfQosTO6SsrNInhevMSKPpcFEdmHlr6ictCbjAaKLmZC6QZNeSMOLs8UZJedycazdyeQRMuJSxUO0My015IbAuZ9Z43vsMUjavTlCzTGopNoNCMkZvC9w/s640/18.PNG" width="640" /></a></div>
<br /></div>
<div>
<strong><span style="white-space: pre;"> </span>Tag untuk membuat teks penting<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<strong>Strong text</strong><br>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6VfHul9t1YAmpNt24pj3lg3AczL2XTL0YXXO0QkcAN0i8nGPUD5KrD4CYKq9XmACAO69x8tI7H-EZjWDDUkZP2qIOEL9OVW2SGkWtrrAaPHDTH72NsD67S9k-fqzI1tgNfVWU5eCfeY/s1600/19.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="144" data-original-width="503" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6VfHul9t1YAmpNt24pj3lg3AczL2XTL0YXXO0QkcAN0i8nGPUD5KrD4CYKq9XmACAO69x8tI7H-EZjWDDUkZP2qIOEL9OVW2SGkWtrrAaPHDTH72NsD67S9k-fqzI1tgNfVWU5eCfeY/s640/19.PNG" width="640" /></a></div>
<br /></div>
<div>
<sub><span style="white-space: pre;"> </span>Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)</div>
<div>
<sup><span style="white-space: pre;"> </span>Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Ini adalah <sub>subscript</sub> text.</p>
<p>Ini adalah <sup>superscript</sup> text.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVc2TCQ55moxWZDPpH23YWkx0Lykd-aEi9fFGc-0g_1P5sgqa3COApWy9jkikSVYasIcWx5RfDUzJkD-YBusZgYnIM54rUFJfkehqA3XsKfRdArg6jzE7iSlPftdVnr4BiHch6WCctiYQ/s1600/20.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="191" data-original-width="503" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVc2TCQ55moxWZDPpH23YWkx0Lykd-aEi9fFGc-0g_1P5sgqa3COApWy9jkikSVYasIcWx5RfDUzJkD-YBusZgYnIM54rUFJfkehqA3XsKfRdArg6jzE7iSlPftdVnr4BiHch6WCctiYQ/s640/20.PNG" width="640" /></a></div>
<br /></div>
<div>
<time><span style="white-space: pre;"> </span>Tag untuk membuat tanggal / waktu (tag baru HTML5)<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaIVYtnb6FQ382YwpusgR1Bxe09TWp99hIK5lgXYUjYDp5vCVQzwVoyoX1w-uf3vCTfF1qHAXaEMX4vPUyL8QEMqu3vIzMMZV05OVDcCNC5MewRqCJOZh0tOyPkYzaiydZYX_AxGe6QE/s1600/timm.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="191" data-original-width="525" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaIVYtnb6FQ382YwpusgR1Bxe09TWp99hIK5lgXYUjYDp5vCVQzwVoyoX1w-uf3vCTfF1qHAXaEMX4vPUyL8QEMqu3vIzMMZV05OVDcCNC5MewRqCJOZh0tOyPkYzaiydZYX_AxGe6QE/s640/timm.PNG" width="640" /></a></div>
<br /></div>
<div>
<u><span style="white-space: pre;"> </span>Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>ini adalah <u>contoh tag u</u>.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02OqRaDsshJQYk0GsMoHG79FwEDdMWTj_8MjSsgNzZJZ3Id7XmsgZiRrlxDSoQBMZOQxYjiiGs8sYq20eLnb_YpAk4Qoj4VUIJry_HJTY9j6yae4lWsb9-fWyls22IDP-mUgXzGaHoc0/s1600/22.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="148" data-original-width="468" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh02OqRaDsshJQYk0GsMoHG79FwEDdMWTj_8MjSsgNzZJZ3Id7XmsgZiRrlxDSoQBMZOQxYjiiGs8sYq20eLnb_YpAk4Qoj4VUIJry_HJTY9j6yae4lWsb9-fWyls22IDP-mUgXzGaHoc0/s640/22.PNG" width="640" /></a></div>
<br /></div>
<div>
<var><span style="white-space: pre;"> </span>Tag untuk membuat sebuah variabel<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<var>Variable Elemen</var>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJKaXeWTpDwDNtRSk-L0Esapp3LjFvDlGGpSlrerhqe-Y-c6KYDEqLnPg8ChKL1CksVayBiRcgOndebPRjPvmVeWJDOmZkhYcvi1g3wmKrtQY5kqKtNNpypm0DOjQZnDf9V4bPPnP2Kg/s1600/23.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="133" data-original-width="480" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJKaXeWTpDwDNtRSk-L0Esapp3LjFvDlGGpSlrerhqe-Y-c6KYDEqLnPg8ChKL1CksVayBiRcgOndebPRjPvmVeWJDOmZkhYcvi1g3wmKrtQY5kqKtNNpypm0DOjQZnDf9V4bPPnP2Kg/s640/23.PNG" width="640" /></a></div>
<br /></div>
<div>
<wbr><span style="white-space: pre;"> </span>Tag untuk membuat kemungkinan garis-putus<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kzteQuSsaSLuFwouacDIYDwItkgVPs1MKtNvX3VVhiE81J87_7FYoV_4B36EtQAiCpyIAnQ_NLoZndiCXb35RhpJtdLMl0TI0Gvi6idEdaqr3SNhEgTgSx7fNORvoGXXDDtHlEWa15A/s1600/wbr.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="1063" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kzteQuSsaSLuFwouacDIYDwItkgVPs1MKtNvX3VVhiE81J87_7FYoV_4B36EtQAiCpyIAnQ_NLoZndiCXb35RhpJtdLMl0TI0Gvi6idEdaqr3SNhEgTgSx7fNORvoGXXDDtHlEWa15A/s640/wbr.PNG" width="640" /></a></div>
<br /></div>
</div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-43798349296924773622018-10-26T14:59:00.002-07:002018-10-26T18:55:54.424-07:00[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART1<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<b>Tag HTML Basic</b></h3>
<div style="text-align: left;">
<!DOCTYPE> Tag untuk menentukan tipe dokumen</div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><!DOCTYPE html> <span style="color: black; font-family: "times new roman"; font-size: small; text-align: left; white-space: normal;"><!--penerapan tag doctype--></span>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html></pre>
<div class="separator" style="clear: both; text-align: left;">
Hasilnya</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wcGUs7tvKkSmroiKnWpouZ_eC9y5_IK4B7Vn1PaZanfuhNT8fV70GTz_aVf0XzCMn9rq_ZK98oaTcn0FY1ofmqChYiiHD-WsylsTF-NjwGK7rxJynGSi9n81o8u96Y0AoJ4oVY7teDc/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="148" data-original-width="487" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wcGUs7tvKkSmroiKnWpouZ_eC9y5_IK4B7Vn1PaZanfuhNT8fV70GTz_aVf0XzCMn9rq_ZK98oaTcn0FY1ofmqChYiiHD-WsylsTF-NjwGK7rxJynGSi9n81o8u96Y0AoJ4oVY7teDc/s640/3.PNG" width="640" /></a></div>
<div style="text-align: left;">
<html> Tag untuk membuat sebuah dokumen HTML</div>
<div style="text-align: left;">
<br /></div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html> <span style="background-color: transparent; color: black; font-family: "times new roman"; font-size: small; text-align: left; white-space: normal;"><!--penerapan tag html--></span>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p> html </p>
</body>
</html></code></pre>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Hasilnya</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiefHv94XF8ruszAga_LxSmAvahjX-TsbTFbA_D_4X_yunUJJmESQk2dGR4iuV17HYho0K6jH6_JXPem2Opvp7msdt6dyOWCcDxcpBR-VjEz35s69gcgZKIR_tdQZAkQEKgeoqrcP3nodE/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="146" data-original-width="450" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiefHv94XF8ruszAga_LxSmAvahjX-TsbTFbA_D_4X_yunUJJmESQk2dGR4iuV17HYho0K6jH6_JXPem2Opvp7msdt6dyOWCcDxcpBR-VjEz35s69gcgZKIR_tdQZAkQEKgeoqrcP3nodE/s640/6.PNG" width="640" /></a></div>
<div style="text-align: left;">
<title> Tag untuk membuat judul dari sebuah halaman</div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<title>Ini Title</title>
</head>
<body>
</body>
</html></code></pre>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
hasilnya</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCxwXI7a6_y-fsKmcUoVp_uFEO5WMBfgZ5yNxc21it-WMTApKRsgC69h9Gnb4LuDeE2euvXARTk1Gukg4LDLPxdraz9kzwrY6cBVsjm7UhIGONASDfz-0RyBWxb58pyKqugBODlv3fKE/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="456" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCxwXI7a6_y-fsKmcUoVp_uFEO5WMBfgZ5yNxc21it-WMTApKRsgC69h9Gnb4LuDeE2euvXARTk1Gukg4LDLPxdraz9kzwrY6cBVsjm7UhIGONASDfz-0RyBWxb58pyKqugBODlv3fKE/s640/9.PNG" width="640" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<body><span style="white-space: pre;"> </span>Tag untuk membuat tubuh dari sebuah halaman</div>
<div style="text-align: left;">
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
Ini Body
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuVQ4Sg9ffwMlOemWJL0WGF4Nz7rVyWZR1XTs-a3yYiyZG8wBe4L8vKLI9vKUcbXaCqyg3n4njkT6C82sEC4K1n1eNBxLCfyio9fnZ4l-lxe-XicbXo2x_jYAZCgLeRm3HVgYipkGteY/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="140" data-original-width="462" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuVQ4Sg9ffwMlOemWJL0WGF4Nz7rVyWZR1XTs-a3yYiyZG8wBe4L8vKLI9vKUcbXaCqyg3n4njkT6C82sEC4K1n1eNBxLCfyio9fnZ4l-lxe-XicbXo2x_jYAZCgLeRm3HVgYipkGteY/s640/1.PNG" width="640" /></a></div>
<br />
<h1> to <h6><span style="white-space: pre;"> </span>Tag untuk membuat heading<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<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></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlDUKLorFS1W_jpFz5bmgr1JEw-evLLUuxqCTlWQHMNjeEe03rrMN8RMrw05DAmiAtmy4V_1E6zJKFGgyJkqF9rmWaR7Lfjvjdlkab_5cM0iTznxc1HMYgamTwE6oTAwcMPn-A2h93tM/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="344" data-original-width="458" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlDUKLorFS1W_jpFz5bmgr1JEw-evLLUuxqCTlWQHMNjeEe03rrMN8RMrw05DAmiAtmy4V_1E6zJKFGgyJkqF9rmWaR7Lfjvjdlkab_5cM0iTznxc1HMYgamTwE6oTAwcMPn-A2h93tM/s640/4.PNG" width="640" /></a></div>
<br />
<p><span style="white-space: pre;"> </span>Tag untuk membuat paragraf<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIUzkG1vEAvC8tNpdBKKosVHwNOGNAGvZwaPUsDvQhEFfG4okKl6vjyljqStGbASvNnq84h5BIiZrXH3i56b3HCwWuyQl_fa90mwhURuk-Sf12gbFs8r2QsxJmlskZQQI_y620_dXjJA/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="189" data-original-width="430" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIUzkG1vEAvC8tNpdBKKosVHwNOGNAGvZwaPUsDvQhEFfG4okKl6vjyljqStGbASvNnq84h5BIiZrXH3i56b3HCwWuyQl_fa90mwhURuk-Sf12gbFs8r2QsxJmlskZQQI_y620_dXjJA/s640/8.PNG" width="640" /></a></div>
<br />
<br> <span style="white-space: pre;"> </span>Memasukan satu baris putus<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>
Untuk memutus baris<br>dalam kalimat,<br>gunakan elemen br.
</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWhu1piGwgVTNiqgJ6cKDX_YAB_0TAi0A1wQlqnD3ZtorWzCT6fuu4mbGh2HQb2mfa8uEdAAv-QacAvLh0vBQh5XmzlV0Su-Sj6rmmgQjdONpnFodENPmKzt7R1MEy2itiWjCaoZHsrU/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="162" data-original-width="439" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWhu1piGwgVTNiqgJ6cKDX_YAB_0TAi0A1wQlqnD3ZtorWzCT6fuu4mbGh2HQb2mfa8uEdAAv-QacAvLh0vBQh5XmzlV0Su-Sj6rmmgQjdONpnFodENPmKzt7R1MEy2itiWjCaoZHsrU/s640/2.PNG" width="640" /></a></div>
<br />
<hr><span style="white-space: pre;"> </span>Tag untuk membuat perubahan dasar kata didalam isi<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<h1>HTML</h1>
<p>HTML adalah .......</p>
<hr>
<h1>CSS</h1>
<p>CSS adalah......</p>
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUoTH_hRO90CF899pmOfO1-5nv79aXEQCN5h8GiulRgghvRgJYKlHMEJmZySHgU66h61QwV-ulLPU-ThyphenhyphenOFNSeCXnWdkWbs4Ofjjl_Rk6Dtg-Td4GvZruxv27akKLTiXcDXsDPF0jjWM/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="301" data-original-width="452" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUoTH_hRO90CF899pmOfO1-5nv79aXEQCN5h8GiulRgghvRgJYKlHMEJmZySHgU66h61QwV-ulLPU-ThyphenhyphenOFNSeCXnWdkWbs4Ofjjl_Rk6Dtg-Td4GvZruxv27akKLTiXcDXsDPF0jjWM/s640/5.PNG" width="640" /></a></div>
<br />
<!--...--><span style="white-space: pre;"> </span>Tag untuk membuat komentar<br />
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<!-- ini adalah komentar -->
<p>Isi konten.</p>
<!-- komentar tidak akan ditampilkan di browser -->
</body>
</html></code></pre>
hasilnya<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaILeKTMc9iIQgQDo0jpDdUYAsgVdEHDOJP59bYsnvdcdD5NbG3Wf-vJH5y7aMgwSIGfP7hzZj5UsPRkFcV2NIrq68aztWesVGr4mrmjqJmqWFUM4UiRPmZQHdaUsXzZ1AYU5L4zpStg/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="130" data-original-width="475" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaILeKTMc9iIQgQDo0jpDdUYAsgVdEHDOJP59bYsnvdcdD5NbG3Wf-vJH5y7aMgwSIGfP7hzZj5UsPRkFcV2NIrq68aztWesVGr4mrmjqJmqWFUM4UiRPmZQHdaUsXzZ1AYU5L4zpStg/s640/7.PNG" width="640" /></a></div>
<br />
<h3 style="text-align: left;">
<b>Tag HTML Form</b></h3>
<div>
<div>
<form><span style="white-space: pre;"> </span>Tag untuk membuat sebuah form HTML untuk input pengguna</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
Nama: <input type="text" name="nama" value="Fendi Setyawan"><br>
NIM: <input type="text" name="nim" value="5150411130"><br>
<input type="submit" value="Submit">
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUs9cMt47mLIzswFFQ7WQP0ExOHuRAc-eZ_VrmbExfZnijog9Oj6FR4D_MMDtSm0RD81rYDGeeyAPJ6eWL9plckeBI6chJR6enlEZtawoJQyyvtfiOBcILLMOoaKjDOnG2yhW3SZ78B4/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="467" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUs9cMt47mLIzswFFQ7WQP0ExOHuRAc-eZ_VrmbExfZnijog9Oj6FR4D_MMDtSm0RD81rYDGeeyAPJ6eWL9plckeBI6chJR6enlEZtawoJQyyvtfiOBcILLMOoaKjDOnG2yhW3SZ78B4/s640/4.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<input><span style="white-space: pre;"> </span>Tag untuk membuat sebuah kontrol input</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
Nama: <input type="text" name="nama"><br>
NIM: <input type="text" name="nim"><br>
<input type="submit" value="Submit">
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0pNz9dODB42J3Ho-N_4NgT2LeDsrCCC4noX7Bs5FpbWx7qRGJgZl3NQs0K732p5N5BcOgXsxUpqk7dsAlTrLb_5fpoTd3YmTjG7UCzutDZjmWS24esRV-kO3PKOrFwU5wizAXg6x7Bk/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="159" data-original-width="480" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0pNz9dODB42J3Ho-N_4NgT2LeDsrCCC4noX7Bs5FpbWx7qRGJgZl3NQs0K732p5N5BcOgXsxUpqk7dsAlTrLb_5fpoTd3YmTjG7UCzutDZjmWS24esRV-kO3PKOrFwU5wizAXg6x7Bk/s640/5.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<textarea><span style="white-space: pre;"> </span>Tag untuk membuat sebuah kontrol input multibaris (text area)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<textarea rows="4" cols="50">
Isi konten.
</textarea>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdA3AtYG9VGCfstlPMa7uKyMOTVYPkYT8CkiOvbyLyKBqCrW4Cak7IPnTwi52xsqVpV8sBBzPHPuYijrO8lDbZN1wFmM0F6sL0Tp32PcAoHniP28dJaRQcaEplry1mGLBkYOO096fAp1Q/s1600/12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="170" data-original-width="482" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdA3AtYG9VGCfstlPMa7uKyMOTVYPkYT8CkiOvbyLyKBqCrW4Cak7IPnTwi52xsqVpV8sBBzPHPuYijrO8lDbZN1wFmM0F6sL0Tp32PcAoHniP28dJaRQcaEplry1mGLBkYOO096fAp1Q/s640/12.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<button><span style="white-space: pre;"> </span>Tag untuk membuat sebuah tombol yang dapat diklik</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<button type="button" onclick="alert('Hello world!')">Klik Disini!</button>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_qn4CAZ76Ys1Wc6Cr6cTzT5rWLN1oE1Gw10y0Wf5M9W_jZtFxE5YzZLPrNjCYcki__7Ay7bVmgFoLyZgtOK40xh5JMDgiEJsvHNAxE-Jy4peD0TojX1AcL__q99KUzKqtpSygXFK070/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="130" data-original-width="485" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_qn4CAZ76Ys1Wc6Cr6cTzT5rWLN1oE1Gw10y0Wf5M9W_jZtFxE5YzZLPrNjCYcki__7Ay7bVmgFoLyZgtOK40xh5JMDgiEJsvHNAxE-Jy4peD0TojX1AcL__q99KUzKqtpSygXFK070/s640/1.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<select><span style="white-space: pre;"> </span>Tag untuk membuat sebuah daftar drop-down</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
<option value="1">Suzuki</option>
<option value="2">Honda</option>
<option value="3">Yamaha</option>
<option value="4">Viar</option>
</select>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gUBJxYPu0yF4GdRq-pgjmSweaqXLk8SR-4zWXfBu1OCxfD68inABTzmIkBDWryXd7EYtkNrAjWuLFSA_54own3OKIG72UwyHov7dXMWD6JmMv8O1DqZKWp45X9TB9h0S4xfyBhTAm0U/s1600/select.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="125" data-original-width="500" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gUBJxYPu0yF4GdRq-pgjmSweaqXLk8SR-4zWXfBu1OCxfD68inABTzmIkBDWryXd7EYtkNrAjWuLFSA_54own3OKIG72UwyHov7dXMWD6JmMv8O1DqZKWp45X9TB9h0S4xfyBhTAm0U/s640/select.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<optgroup><span style="white-space: pre;"> </span>Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
<optgroup label="FTIE">
<option value="1">TI</option>
<option value="2">Akuntansi</option>
</optgroup>
<optgroup label="FST">
<option value="1">Arsitektur</option>
<option value="2">Geologi</option>
</optgroup>
</select>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgAi1t7m5HlTPxxfMQwJifqgJaOZWayyP6rKYi6QEB9wIM5T1uMGkOGiuevDyvpzt9OLwbKoiThaPX5RWETseEO77UgdW6TanL8NG8LUsza5-yhagoVwbDjNpEkOe-Qn_4ht6xtpZYAw/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="223" data-original-width="505" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgAi1t7m5HlTPxxfMQwJifqgJaOZWayyP6rKYi6QEB9wIM5T1uMGkOGiuevDyvpzt9OLwbKoiThaPX5RWETseEO77UgdW6TanL8NG8LUsza5-yhagoVwbDjNpEkOe-Qn_4ht6xtpZYAw/s640/8.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<option><span style="white-space: pre;"> </span>Tag untuk membuat pilihan dalam daftar drop-down</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
<option value="1">Suzuki</option>
<option value="2">Honda</option>
<option value="3">Yamaha</option>
<option value="4">Viar</option>
</select>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbnDWQ6YYFgiGdhIMhF9-8uFIYkeYs5nIyrTUd3tdwlobBYzW5mcLCcCbI1CYCadcRNILIFjODJai3Sv3pqHlLc9KoQrsBu6HK50Vzs2DxNb1bKEBgRwmG3yC_XiNsrxaQGGFGK7TS4Y/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="188" data-original-width="475" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbnDWQ6YYFgiGdhIMhF9-8uFIYkeYs5nIyrTUd3tdwlobBYzW5mcLCcCbI1CYCadcRNILIFjODJai3Sv3pqHlLc9KoQrsBu6HK50Vzs2DxNb1bKEBgRwmG3yC_XiNsrxaQGGFGK7TS4Y/s640/9.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<label><span style="white-space: pre;"> </span>Tag untuk membuat sebuah label untuk sebuah elemen <input></div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
<label for="male">Laki - Laki</label>
<input type="radio" name="L" id="Laki" value="Laki"><br>
<label for="female">Perempuan</label>
<input type="radio" name="P" id="Perempuan" value="Perempuan"><br>
<input type="submit" value="Submit">
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6aigNb0w1IQQYV5vaFolFOYqnyekAHoTeqYizqHAw5uRom0Ajp0KRK_ky0tcTmamXW8nGHD-JzKuY9KlEwsEOKUIzrfcVZmAwXbpJZD9x7_PABKA7aw04P8kB6pxoOBmprQ58lJZJ7Q/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="154" data-original-width="465" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6aigNb0w1IQQYV5vaFolFOYqnyekAHoTeqYizqHAw5uRom0Ajp0KRK_ky0tcTmamXW8nGHD-JzKuY9KlEwsEOKUIzrfcVZmAwXbpJZD9x7_PABKA7aw04P8kB6pxoOBmprQ58lJZJ7Q/s640/6.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<fieldset><span style="white-space: pre;"> </span>Grup unsur terkait dalam bentuk</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form>
<fieldset>
<legend>Biodata:</legend>
Nama: <input type="text"><br>
Alamat: <input type="text"><br>
TTL: <input type="text">
</fieldset>
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj489bMRYZWTdc9fgRIC00HigKl4ZYeI4Dogug6C5SogfzEdhFrUQSmsRZMrOH3deiMLmDGAIG_nCcyB4zUX6ke_X47pM4rzNItQ7rB8mHM7Dqlljg9KGgn3KNZajfcSNg1nIm98c-igxE/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="207" data-original-width="504" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj489bMRYZWTdc9fgRIC00HigKl4ZYeI4Dogug6C5SogfzEdhFrUQSmsRZMrOH3deiMLmDGAIG_nCcyB4zUX6ke_X47pM4rzNItQ7rB8mHM7Dqlljg9KGgn3KNZajfcSNg1nIm98c-igxE/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<legend><span style="white-space: pre;"> </span>Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details></div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form>
<fieldset>
<legend>Biodata:</legend>
Nama: <input type="text"><br>
Alamat: <input type="text"><br>
TTL: <input type="text">
</fieldset>
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULWs30fHVVlMCiWPbiGRjx6w2AdzMGxAmaxRg3hV90h8qR9TIlZoclYrzNyRMYNmih_TxQj_DQdqNBT6EqN5Afe2T1e0p4GE3HiOZ0bxLkL-XPHLDw49vk1fAn2nUTUVOoQhBMdgPvk8/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="191" data-original-width="506" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULWs30fHVVlMCiWPbiGRjx6w2AdzMGxAmaxRg3hV90h8qR9TIlZoclYrzNyRMYNmih_TxQj_DQdqNBT6EqN5Afe2T1e0p4GE3HiOZ0bxLkL-XPHLDw49vk1fAn2nUTUVOoQhBMdgPvk8/s640/7.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<datalist><span style="white-space: pre;"> </span>Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2D7xwrQCllLlu1jOUCxqjq-lp3ztQualJcUMD1aIl_g-pWu4J4OtFgICkLj-FbF6M31AijVUzHVMT4qRbB5HfOCf0oxzM6DVEy5rGahcqup2rPI68hGhL2HGSapjgboHaGMGVAI0erzU/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="130" data-original-width="479" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2D7xwrQCllLlu1jOUCxqjq-lp3ztQualJcUMD1aIl_g-pWu4J4OtFgICkLj-FbF6M31AijVUzHVMT4qRbB5HfOCf0oxzM6DVEy5rGahcqup2rPI68hGhL2HGSapjgboHaGMGVAI0erzU/s640/2.PNG" width="640" /></a></div>
<div>
<br /></div>
<div>
<output><span style="white-space: pre;"> </span>Tag untuk membuat hasil penghitungan (tag baru HTML5)</div>
</div>
<div>
<pre class="language-php" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow-wrap: break-word; overflow: auto; padding: 9.5px; text-align: justify; word-break: break-all;"><code style="background-color: transparent; border-radius: 0px; box-sizing: border-box; color: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: inherit; padding: 0px; white-space: pre-wrap;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html></code></pre>
</div>
<div>
hasilnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2H3XoSGjnXa6Ug9bXKKBnVe-HNj1vcBGMBbgjHcfBuwEEAGZ2RUzGB-CCvBbvB8ekH38D4QeQcjBNdowg0ZXYB2hjFWIRezEV2JqsNWC-BQEbQwdyzg7QlvbjIy2YyII_OpSxZZBGCU/s1600/10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="131" data-original-width="477" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP2H3XoSGjnXa6Ug9bXKKBnVe-HNj1vcBGMBbgjHcfBuwEEAGZ2RUzGB-CCvBbvB8ekH38D4QeQcjBNdowg0ZXYB2hjFWIRezEV2JqsNWC-BQEbQwdyzg7QlvbjIy2YyII_OpSxZZBGCU/s640/10.PNG" width="640" /></a></div>
<div>
<br /></div>
</div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-3355510647454930882018-05-30T19:26:00.001-07:002018-05-30T19:26:42.054-07:00Tugas Pemrograman Web UAS<div dir="ltr" style="text-align: left;" trbidi="on">
Ini adalah kumpulan tutorial apa yang saya dapatkan dari praktek dalam rentang waktu sehabis UTS hingga menjelang UAS. Mulai dari tutorial menampilkan data di database hingga tutorial mengenai CodeIgniter. Part-part ini saling berkaitan dengan part yang sebelumnya, Misalnya part 2 berkaitan dengan part 1 dan seterusnya.<br />
<br />
PART 1, <a href="https://fendisetyawan10.blogspot.com/2018/05/tutorial-6-membuat-tampilan-tabel-yang.html" target="_blank">Menampilkan Data di Database ke dalam Tabel dengan Bootstrap</a><br />
PART 2, <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-7-membuat-modal-dengan.html" target="_blank">Membuat Modal dengan Bootstrap</a><br />
PART 3, <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-8-membuat-perintah-simpan-pada.html" target="_blank">Membuat Perintah Simpan</a><br />
PART 4, <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-9-membuat-perintah-edit-pada.html" target="_blank">Membuat Perintah Update</a><br />
PART 5, <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-10-membuat-perintah-hapus-pada.html" target="_blank">Membuat Perintah Delete</a><br />
PART 6, <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-11-tutorial-instalasi.html" target="_blank">Tutorial Menginstall Framework CodeIgniter</a><br />
<br />
Bila ada yang kurang mohon dimaafkan dan apabila ada yang kurang jelas bisa bertanya di kolom komentar. Sekian dan terima kasih....</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-58170040271696023832018-05-30T19:20:00.002-07:002018-05-30T19:20:24.712-07:00[TUTORIAL 11] Tutorial Instalasi Framework CodeIgniter Dengan XAMPP<div dir="ltr" style="text-align: left;" trbidi="on">
Sebelum mulai pastikan bahan-bahannya sudah siap, bahan yang dibutuhkan yakni :<br />
<br />
<ul style="text-align: left;">
<li>CodeIgniter, <a href="https://github.com/bcit-ci/CodeIgniter/archive/3.1.8.zip" target="_blank">DOWNLOAD</a></li>
<li>XAMPP</li>
<li>Browser</li>
</ul>
<div>
Jika sudah siap semuanya langsung saja langkah pertama yang harus dilakukan yaitu</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOVU8DuU_yA0PFd2EiuVmzW5DluACY8LJK64d1454bfVzGHT6unPAoQ_zd_c1B5sYifNocWBCNKKkVRENPOSiEsuXxycJv0R3GpJk_l8msTDIaWX6x4MF6csge9qIaY_TUssP8KN4Ie0/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="364" data-original-width="507" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsOVU8DuU_yA0PFd2EiuVmzW5DluACY8LJK64d1454bfVzGHT6unPAoQ_zd_c1B5sYifNocWBCNKKkVRENPOSiEsuXxycJv0R3GpJk_l8msTDIaWX6x4MF6csge9qIaY_TUssP8KN4Ie0/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Ekstrak CodeIgniter yang sudah didownload tadi.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrsNdDLKdcg1onenu3iuOw-HUI1sN9CqZIgJE99_6mGzPvPsYwvlTdyye9UoAe9DN9Go4mb4ENVuxfGbi1GHwPeFuqv16Sklxxy_sQaJU-U5ybfssrp4_5COcIS2hXdRReLzpMkMNVMo/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="365" data-original-width="511" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrsNdDLKdcg1onenu3iuOw-HUI1sN9CqZIgJE99_6mGzPvPsYwvlTdyye9UoAe9DN9Go4mb4ENVuxfGbi1GHwPeFuqv16Sklxxy_sQaJU-U5ybfssrp4_5COcIS2hXdRReLzpMkMNVMo/s640/2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Buka foldernya kemudian rename, disini saya akan rename menjadi cobaci.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEAuzKmKPb0yIap2fIoGv8jxFXIAq1B_CjSB5zQavY-EwG4noMaQQJKGt0ffaY72eXHMU0lYELpEqQ7sU2Ohi7Ge73BfKzsdlTF6iVgFjMJhEhQbFXrJBDmmwm6MCnhuULMKRjwPSUpA/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="725" data-original-width="1016" height="456" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEAuzKmKPb0yIap2fIoGv8jxFXIAq1B_CjSB5zQavY-EwG4noMaQQJKGt0ffaY72eXHMU0lYELpEqQ7sU2Ohi7Ge73BfKzsdlTF6iVgFjMJhEhQbFXrJBDmmwm6MCnhuULMKRjwPSUpA/s640/3.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Lalu copas ke folder xampp/htdocs</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkRlMH0DfDYLun628bsfKLFZHppclZ0Von9Jtm4H3guyF4D_E84skokTu5ynYpsz67IpPIOq34ZqkueQ9BS_lDSpmPnDUbguMNamfTwLHI7ieYaH5uyBYWALDy3CiLq6_0m09-qU2Yrck/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkRlMH0DfDYLun628bsfKLFZHppclZ0Von9Jtm4H3guyF4D_E84skokTu5ynYpsz67IpPIOq34ZqkueQ9BS_lDSpmPnDUbguMNamfTwLHI7ieYaH5uyBYWALDy3CiLq6_0m09-qU2Yrck/s640/4.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Kemudian buka browser lalu ketik localhost/cobaci pada address bar. Jika muncul gambar seperti dibawah ini maka CI berhasil diinstall</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-85620098285335391122018-05-28T21:40:00.000-07:002018-05-28T21:40:05.409-07:00[TUTORIAL 10] Membuat Perintah Hapus Pada HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Setelah pada kesempatan yang lalu saya sudah berbagi cara bagaimana bisa menyimpan dan mengedit data. Pada kesempatan kali ini saya akan melanjutkan dengan menambahkan perintah hapus.<br />
<br />
Seperti biasa kita akan melanjutkan project yang telah kita buat pada <a href="http://fendisetyawan10.blogspot.co.id/2018/05/tutorial-9-membuat-perintah-edit-pada.html" target="_blank">TUTORIAL 9</a><br />
<br />
Langkah pertama kita buat file php baru.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIUrwZYlXcj3nGBUYoQpOm4d9xNinS_2EQ-ljdVKHDrGYngw6xPlD2GPlQkZDii5qPiAI4HNp0g8Z9yxGfu8KNE062sq1Msnws2HKZTiyshdWwwUU3YZSyPP7yAiXwnme484Wjrr_lKQ/s1600/33.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="151" data-original-width="557" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIUrwZYlXcj3nGBUYoQpOm4d9xNinS_2EQ-ljdVKHDrGYngw6xPlD2GPlQkZDii5qPiAI4HNp0g8Z9yxGfu8KNE062sq1Msnws2HKZTiyshdWwwUU3YZSyPP7yAiXwnme484Wjrr_lKQ/s640/33.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
beri nama hapus.php kemudian isi sintaknya seperti gambar diatas.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Buat file php baru lagi lalu beri nama hapus_modal.php</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzfXBh_qfORom1ZtIrBTGwr2Hk-ZscTflPNQ7PnpATkzoLDPNDr2qKBtcQuoHf0GTKdjW8JaT0ptGrUqFhYRHhkvIIk6Oyc6HTJ6LEGALaVHe-12C4YE8L7CtagnQJbP3X83odh8tiETY/s1600/4.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzfXBh_qfORom1ZtIrBTGwr2Hk-ZscTflPNQ7PnpATkzoLDPNDr2qKBtcQuoHf0GTKdjW8JaT0ptGrUqFhYRHhkvIIk6Oyc6HTJ6LEGALaVHe-12C4YE8L7CtagnQJbP3X83odh8tiETY/s640/4.PNG" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar<br /><br /></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgrWuviKR55XRI8HGNh83KsQQhT76h0-Jfp-ogcUK7em_WJ-xq4VgahalSU76v2mmf6hrIj1seCefHkhpG-4VlbNOGYhquaC8IZqrDGrXE8i9E5oYK65Dxc1MocHpaa9YQI59B3X_Etg/s1600/12.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1100" data-original-width="1366" height="514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsgrWuviKR55XRI8HGNh83KsQQhT76h0-Jfp-ogcUK7em_WJ-xq4VgahalSU76v2mmf6hrIj1seCefHkhpG-4VlbNOGYhquaC8IZqrDGrXE8i9E5oYK65Dxc1MocHpaa9YQI59B3X_Etg/s640/12.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada file index.php pada button hapus tambahkan coding seperti berikut.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Kemudian cek di browser</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeQtrbqJ9H-EfyP00p4d0oAM7JOfLlijoab7EfnGWpdhpwMaXcc9ynmU-UodfAoCkw0BfHL1A-Qp45i57XUapfQU4Yf1qMoiWSaUy5XObXUD7oIvu2OP9HKc7r0t9g3vYbPXEFHS1Sqs/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeQtrbqJ9H-EfyP00p4d0oAM7JOfLlijoab7EfnGWpdhpwMaXcc9ynmU-UodfAoCkw0BfHL1A-Qp45i57XUapfQU4Yf1qMoiWSaUy5XObXUD7oIvu2OP9HKc7r0t9g3vYbPXEFHS1Sqs/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Klik hapus pada data yg ingin dihapus. Misalnya saya akan menghapus data dengan NIM 5150411188. Lalu klik delete.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZyiC2VGqiJ7JQvXpsRxNcnTTz5zIPISjKdQspVfd-tAQxpS7j577K-Ps5bMhSs5_iCZ528nxY-ZdKfiz7bMSNazTVqF-ZqAqkKk67AaWtwV_D5bbQK20V3fkBKkw_KxgcYopol_tMmQ/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZyiC2VGqiJ7JQvXpsRxNcnTTz5zIPISjKdQspVfd-tAQxpS7j577K-Ps5bMhSs5_iCZ528nxY-ZdKfiz7bMSNazTVqF-ZqAqkKk67AaWtwV_D5bbQK20V3fkBKkw_KxgcYopol_tMmQ/s640/6.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Dan taraaa... data sudah berhasil kita hapus.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-18135822496866685332018-05-28T21:29:00.002-07:002018-05-28T21:29:46.090-07:00[TUTORIAL 9] Membuat Perintah Edit Pada HTML<div dir="ltr" style="text-align: left;" trbidi="on">
Setelah kemarin saya share tutorial bagaimana cara menyimpan ke database, sekarang saya akan kembali share untuk bagaimana cara agar data yang sudah tersimpan bisa kita edit kembali.<br />
<br />
Seperti biasa kita akan melanjutkan project yang sudah kita buat pada <a href="http://fendisetyawan10.blogspot.com/2018/05/tutorial-8-membuat-perintah-simpan-pada.html" target="_blank">TUTORIAL 8</a><br />
<br />
Langsung saja langkah pertama kita buat file php baru.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7qBdwLMBf4LpZv3iPWzpcJSkWIEB_I9GgSZ99sZ4yk2hBqdnK3cX1UZmmGgzkwJoXBR9wCh556uhW1aYpk__BGViep5FDTLDWk0ZF2lZU4pcCF2CdZvucW3VkdoXdWTeqvKvcCVwfqU/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7qBdwLMBf4LpZv3iPWzpcJSkWIEB_I9GgSZ99sZ4yk2hBqdnK3cX1UZmmGgzkwJoXBR9wCh556uhW1aYpk__BGViep5FDTLDWk0ZF2lZU4pcCF2CdZvucW3VkdoXdWTeqvKvcCVwfqU/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
beri nama edit.php lalu isikan sintak seperti gambar diatas.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Buat file php baru lagi lalu beri nama edit_modal.php</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWeA9Z6-egINSHnXdAzxmMG44VM3pJj4MH7P-0rTye5xHOD4U_RyfGHR1GzjutyTTLfnYHuzD7fLEiZLXnXAsxsemhLRiC3vzQve2V7qkVPbrvpGGrUpkSU0-ilSkSNYwghloH6cbkXNw/s1600/34.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1275" data-original-width="1366" height="596" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWeA9Z6-egINSHnXdAzxmMG44VM3pJj4MH7P-0rTye5xHOD4U_RyfGHR1GzjutyTTLfnYHuzD7fLEiZLXnXAsxsemhLRiC3vzQve2V7qkVPbrvpGGrUpkSU0-ilSkSNYwghloH6cbkXNw/s640/34.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Kemudian kita isikan sintaknya seperti berikut.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRYn5SOtVCFiCKd1dIQihQVqMwzl5KCfwFDL1BhgjO7Rd6zSwfe6A_pPjG9m9lvdUB9lEuBbtwBux5HikY0y5I7qyaAgKRBcXtHECBod_r4WlgZPFIhcC7mZwqVji7chNQDbzP_s2e9lk/s1600/12.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1112" data-original-width="1366" height="520" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRYn5SOtVCFiCKd1dIQihQVqMwzl5KCfwFDL1BhgjO7Rd6zSwfe6A_pPjG9m9lvdUB9lEuBbtwBux5HikY0y5I7qyaAgKRBcXtHECBod_r4WlgZPFIhcC7mZwqVji7chNQDbzP_s2e9lk/s640/12.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada file index.php masih sama seperti pada TUTORIAL 8, tetapi pada button edit tambahkan codingan seperti gambar diatas.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Jika sudah cek dibrowser.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNx7mLW0G7vf7dG8XYJWx9wQh8Y6aJc-BROm-B9J146QYaKQF4xbk3GeAuy6hrfwcOB88kQ_WOo9koniHWOoU6klX_-kjw-P__P4BfS6TFO600nWXIjT2TG0oK9p4rr0OCTtEUGeot5Tw/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNx7mLW0G7vf7dG8XYJWx9wQh8Y6aJc-BROm-B9J146QYaKQF4xbk3GeAuy6hrfwcOB88kQ_WOo9koniHWOoU6klX_-kjw-P__P4BfS6TFO600nWXIjT2TG0oK9p4rr0OCTtEUGeot5Tw/s640/6.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
klik button edit kemudian ubah sesuai keinginan. Misalnya pada kasus ini kita akan mengganti nama Fendi menjadi Fendi Setyawan.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8DUQbxre4-0AIdIEFh2jVIwZSYP2-1u7wCdYhlqypRaSdsXbKLVtMUUAT5oQdkwJmh2M8D78MpclLQIvc7ugdPYzlkLnyhxUGPoOpVFJhWJRmp58yaA5aqTNVA_fHL9aOSuq84uITpE/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8DUQbxre4-0AIdIEFh2jVIwZSYP2-1u7wCdYhlqypRaSdsXbKLVtMUUAT5oQdkwJmh2M8D78MpclLQIvc7ugdPYzlkLnyhxUGPoOpVFJhWJRmp58yaA5aqTNVA_fHL9aOSuq84uITpE/s640/7.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Dan Akhirnya nama pun berhasil kita ubah.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-38833030540781694362018-05-28T20:28:00.003-07:002018-05-28T20:28:57.684-07:00[TUTORIAL 8] Membuat Perintah Simpan pada HTML<div dir="ltr" style="text-align: left;" trbidi="on">
Okee pada kesempatan kali ini, saya akan memberikan tutorial tentang bagaimana menyimpan sebuah inputan di form modal agar bisa tersimpan pada database.<br />
<div>
<br /></div>
<div>
Kita meneruskan project yang kita buat pada sebelumnya yakni pada <a href="https://fendisetyawan10.blogspot.co.id/2018/05/tutorial-7-membuat-modal-dengan.html" target="_blank">TUTORIAL 7</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFg83A7RdviyqSkclCFgOLAGRuj9hiCEG_uZvjHhqlVGNLbYO5cMsD4EAmLH_dw1dFvN1jqOEmtW4OiLHcP4A4bSaUP9a8hkUs3pJavsD6xivT6B1zmUkq175fm9azjhY1KnDeBpv0J-8/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="266" data-original-width="1110" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFg83A7RdviyqSkclCFgOLAGRuj9hiCEG_uZvjHhqlVGNLbYO5cMsD4EAmLH_dw1dFvN1jqOEmtW4OiLHcP4A4bSaUP9a8hkUs3pJavsD6xivT6B1zmUkq175fm9azjhY1KnDeBpv0J-8/s640/11.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Buat file php baru kemudian beri simpan.php lalu isikan sintaks seperti diatas. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTT9dLDy7nPbHaRGKsdIxfNV-BWSMGavr5gjmNknmrWDbBJhCUoEw7LNCpIcRvOJ9k65SrSFd29zaC3EDhYP0EhhN5507BvmA8602mTbEBkaTdV04-_cJdE19NLvw7RtfVy9oGOSyNCac/s1600/23.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1272" data-original-width="1366" height="594" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTT9dLDy7nPbHaRGKsdIxfNV-BWSMGavr5gjmNknmrWDbBJhCUoEw7LNCpIcRvOJ9k65SrSFd29zaC3EDhYP0EhhN5507BvmA8602mTbEBkaTdV04-_cJdE19NLvw7RtfVy9oGOSyNCac/s640/23.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada file tambah.php pada action tambah action="simpan.php"</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Untuk file index.php masih sama seperti pada TUTORIAL 8 kemarin.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Jika sudah cek dibrowser</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKcICVd7qZgas6SJhHBtEiApBn472gkke8-iYBO1ZNXTPi__-vsdyPzcz-EUMK_AmHKOAnu_jk6_Dk_SrV9GQ0nDMeii4pR9m_NnMcLU-6iPPIVh7YbAsq70H4oy0Em2vWfjSDhj0xUk/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKcICVd7qZgas6SJhHBtEiApBn472gkke8-iYBO1ZNXTPi__-vsdyPzcz-EUMK_AmHKOAnu_jk6_Dk_SrV9GQ0nDMeii4pR9m_NnMcLU-6iPPIVh7YbAsq70H4oy0Em2vWfjSDhj0xUk/s640/4.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
klik button Tambah kemudian isi field-fieldnya lalu klik save</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGEwFNGkTd2PsagIqzceCzzuj_JSS3Zrut8roWrTmAXneaqBIcBUjyycP5hxQs2M2IE_WsC-9lwr45SBRx-sIZQEfhgdzGLyNcLkb3hUL51yjbAkTBYs_l5tjvK48XuHc_qhwzCAwx7WE/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGEwFNGkTd2PsagIqzceCzzuj_JSS3Zrut8roWrTmAXneaqBIcBUjyycP5hxQs2M2IE_WsC-9lwr45SBRx-sIZQEfhgdzGLyNcLkb3hUL51yjbAkTBYs_l5tjvK48XuHc_qhwzCAwx7WE/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Jika data bertambah maka kita telah berhasil menyimpan data ke database</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-67141840205743852722018-05-28T20:01:00.002-07:002018-05-28T20:01:53.606-07:00[TUTORIAL 7] Membuat Modal Dengan Bootstrap<div dir="ltr" style="text-align: left;" trbidi="on">
Kali ini saya akan memberi tutorial bagaimana cara membuat modal dengan bootstrap. Kita bisa meneruskan proyek yang telah dibuat pada <a href="https://fendisetyawan10.blogspot.co.id/2018/05/tutorial-6-membuat-tampilan-tabel-yang.html" target="_blank">Tutorial 6 tentang mebuat tampilan tabel dengan bootstrap</a><br />
<br />
<b>Langkah pertama kita buat file php baru dengan nama tambah.php</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZ9Srr6YNla8wRsTz3p6v1XzhII6sheTiCVdcI1Zvn1kpmSyM-wb2kYq41NHBxRxwyQH_5iwaiKMf9r4-FVLRbUlOHtpgiSrIxf6dsusO0eNyy1IHb0ltQu6jAxEwLEPvEN_pSFVRMOE/s1600/3344.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1275" data-original-width="1366" height="596" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZ9Srr6YNla8wRsTz3p6v1XzhII6sheTiCVdcI1Zvn1kpmSyM-wb2kYq41NHBxRxwyQH_5iwaiKMf9r4-FVLRbUlOHtpgiSrIxf6dsusO0eNyy1IHb0ltQu6jAxEwLEPvEN_pSFVRMOE/s640/3344.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div style="text-align: center;">
Pada tambah.php isikan sintak berikut untuk membuat modalnya.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbX_8gYef8gVvlbB4EKv2H2F_Lg4V-9B0SmGfSs6RFwBdmmqBCF2j1ohZ7n2-QmipvSZqtYnJIRFGNkz_Xkb4VwSrOqyq8g7KlI8YU-Er4poHTK8jfJRDSKI7NUxxoANl0zoHug6vDITQ/s1600/12.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1100" data-original-width="1366" height="514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbX_8gYef8gVvlbB4EKv2H2F_Lg4V-9B0SmGfSs6RFwBdmmqBCF2j1ohZ7n2-QmipvSZqtYnJIRFGNkz_Xkb4VwSrOqyq8g7KlI8YU-Er4poHTK8jfJRDSKI7NUxxoANl0zoHug6vDITQ/s640/12.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">klik untuk memperbesar gambar</td></tr>
</tbody></table>
<div style="text-align: center;">
Lalu pada file index.php tambahkan coding yang sudah saya beri keterangan agar ketika button Tambah di klik maka modalnya bisa muncul.</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Jika sudah cek di browser</div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0H0Rg1MeBqZE3A7EsVjRfk9gjmxQtL1GDbnhiHVEjaYU79RquLWWeHc0hcLBV2aHvSqPOjdz0uPV8rosMkJnCFO_OJIrlgvBhGOejhJ5nKymx0dzEUY_LkkQsDJLl-A19SY8aCWQ3t78/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0H0Rg1MeBqZE3A7EsVjRfk9gjmxQtL1GDbnhiHVEjaYU79RquLWWeHc0hcLBV2aHvSqPOjdz0uPV8rosMkJnCFO_OJIrlgvBhGOejhJ5nKymx0dzEUY_LkkQsDJLl-A19SY8aCWQ3t78/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Klik button tambah jika muncul seperti ini maka kita sudah berhasil membuat modal,</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-57661418999321921812018-05-28T19:31:00.002-07:002018-05-28T19:33:47.047-07:00[TUTORIAL 6] Membuat Tampilan Tabel Yang Menarik Dengan Bootstrap<div dir="ltr" style="text-align: left;" trbidi="on">
Pertama-tama siapkan bahan-bahannya terlebih dahulu. Bahan yang dibutuhkan yaitu :<br />
<br />
<ul style="text-align: left;">
<li>Text Editor (Netbeans/Notepad++ dll)</li>
<li>Bootstrap <a href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip" target="_blank">DOWNLOAD</a></li>
<li>JQuery <a href="https://code.jquery.com/jquery-3.3.1.min.js" target="_blank">DOWNLOAD</a></li>
<li>Font Awesome <a href="https://use.fontawesome.com/releases/v5.0.13/fontawesome-free-5.0.13.zip" target="_blank">DOWNLOAD</a></li>
<li>Database</li>
</ul>
<div>
<b>Oke Langkah pertama yaitu membuat project</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIICaEZh5ucaEcVt1RWrGp3cmLA0toD_WS0euxhSw6odvWhTvJ30HmdUMoLVOuC_7OfGuSBJk3yZLoOE893PJs3dF1qZ_fAsksyzo1_UDBHQh2IWnGeV86Y-MhunexdXmEQz9ckKTRmc/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1366" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIICaEZh5ucaEcVt1RWrGp3cmLA0toD_WS0euxhSw6odvWhTvJ30HmdUMoLVOuC_7OfGuSBJk3yZLoOE893PJs3dF1qZ_fAsksyzo1_UDBHQh2IWnGeV86Y-MhunexdXmEQz9ckKTRmc/s640/1.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Klik File lalu pilih New Project</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwfUWXN8_kTpcuOpDjCdSoZnBK4qw_Buv7nRH3LnLfErSu5tHz-NIhtFS5fd5qcevfBWT7IYjyXO_x0jNg3CHSKfLan0HVcQTyOkW44iOBFp0DV2mOmEAjLIUQw9KDVSWW2UmlnthwsHc/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwfUWXN8_kTpcuOpDjCdSoZnBK4qw_Buv7nRH3LnLfErSu5tHz-NIhtFS5fd5qcevfBWT7IYjyXO_x0jNg3CHSKfLan0HVcQTyOkW44iOBFp0DV2mOmEAjLIUQw9KDVSWW2UmlnthwsHc/s640/2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Pilih PHP lalu PHP Application</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYr34P4q12ZQFrfS6XuE8Ds2mGt373VrfCFA-B6WGBzLiIxomoOqvhG_SzJjcuLc-ltIX3jJ6Kv5MWXvJEFBThhwnHytpc1YRdopNyfZaGPFIh46-jSMv7q4YPIy8Ao7VxC2ii_xu41iU/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYr34P4q12ZQFrfS6XuE8Ds2mGt373VrfCFA-B6WGBzLiIxomoOqvhG_SzJjcuLc-ltIX3jJ6Kv5MWXvJEFBThhwnHytpc1YRdopNyfZaGPFIh46-jSMv7q4YPIy8Ao7VxC2ii_xu41iU/s640/3.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Beri nama project sesuai dengan keinginan, jika sudah klik finish saja.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Fj1pa4diQ6EQbqiozsu8yHZkKXKTJHEH0_Sg86kfI5nXhuukSfkYFcTYmzTEjO9hlD6eoSvpSOKXJkN3FiYoFVF6nNRkYWV2mXUTC_B7aeROR9NGxwtORbDQVJlGY_G41UCnyaQLqQo/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="448" data-original-width="366" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Fj1pa4diQ6EQbqiozsu8yHZkKXKTJHEH0_Sg86kfI5nXhuukSfkYFcTYmzTEjO9hlD6eoSvpSOKXJkN3FiYoFVF6nNRkYWV2mXUTC_B7aeROR9NGxwtORbDQVJlGY_G41UCnyaQLqQo/s400/0.PNG" width="326" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Lalu susun file yang sudah didownload tadi seperti gambar berikut.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Langkah selanjutnya yaitu membuat database,<span style="text-align: center;"> kali ini saya menggunakan SQLYog</span></b></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="text-align: center;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoAm_1aI8He3i8hslfpHc1kNzSYF_wQKddzGRIOKoRR0mcNbzkyZwMODemfspTsuwbYefWtdAq9XI5qvm0yjzkpK-XgbOeXU485dn7S6ZV74ZvLtv7VvP7DLuU7TC_R8S0qV7IjSJ2_w/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="226" data-original-width="404" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaoAm_1aI8He3i8hslfpHc1kNzSYF_wQKddzGRIOKoRR0mcNbzkyZwMODemfspTsuwbYefWtdAq9XI5qvm0yjzkpK-XgbOeXU485dn7S6ZV74ZvLtv7VvP7DLuU7TC_R8S0qV7IjSJ2_w/s400/4.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Buka SQLYog lalu create database dan beri nama sesuai keinginan.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiBA3nP-ADV6FXdWc4RI5HVY8lCUWv7MLjG4HBnqZKRLqeElfK1nNsFIH40JeCtCrltGEEv_vypXcMgL_pye-Ly3y7UWcU7f7bAGTjrkt-EUXcGCcVdf_J8m8MW_33fEAiPh_ji0mJvg/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="608" data-original-width="1200" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiBA3nP-ADV6FXdWc4RI5HVY8lCUWv7MLjG4HBnqZKRLqeElfK1nNsFIH40JeCtCrltGEEv_vypXcMgL_pye-Ly3y7UWcU7f7bAGTjrkt-EUXcGCcVdf_J8m8MW_33fEAiPh_ji0mJvg/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Buat tabel mhs yang berisikan field-field seperti gambar diatas.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Selanjutkan kembali ke Netbeans</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z5PsVthwYv0bA5ZnOVK6LIOuwP8Aj0ipVlZspRDEWylWKLoJej8eFJHqgxfm7zot2iETY80W4JW1Y3xmFoX9RiZtR5RCsINfRejBXJRJHpP7s1yz1_p78J4hZHCG4tFmjRe_8bDzogM/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="541" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z5PsVthwYv0bA5ZnOVK6LIOuwP8Aj0ipVlZspRDEWylWKLoJej8eFJHqgxfm7zot2iETY80W4JW1Y3xmFoX9RiZtR5RCsINfRejBXJRJHpP7s1yz1_p78J4hZHCG4tFmjRe_8bDzogM/s400/6.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Buat file PHP baru kemudian beri nama koneksi.php. Lalu isi seperti ini, defaultnya adalah localhost dan root. Mahasiswa adalah nama database yang kita buat tadi.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvg3CJrD_vYhcRokeGrItXsIS0wiBVxzERKhl1D256mv8Lfpho96gSBqoo8rloOFO-Rw3Rhzdghb-NepOR1DiWI5hReaDpwb1R4azwEt0N2uNo3LPppeEiXvM9rDjlUSbWbfxZCMsW5w/s1600/78.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1119" data-original-width="1366" height="524" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJvg3CJrD_vYhcRokeGrItXsIS0wiBVxzERKhl1D256mv8Lfpho96gSBqoo8rloOFO-Rw3Rhzdghb-NepOR1DiWI5hReaDpwb1R4azwEt0N2uNo3LPppeEiXvM9rDjlUSbWbfxZCMsW5w/s640/78.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik Untuk Memperbesar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada file index.php isi dengan sintaks berikut.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Langkah berikutnya cek di browser</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtQLFBOTDWrMjM5SI48JMhpShhWaADchZ37Ni-UorZRL2anP8RZURYw2BjPpNjtGRHh6JUVATgZN4Bu1xvs5FlRTFPbc6xDNP-11m3echkBg4UwqrRIyXePiQeJSGpuaWGFwk41WNwZ4/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtQLFBOTDWrMjM5SI48JMhpShhWaADchZ37Ni-UorZRL2anP8RZURYw2BjPpNjtGRHh6JUVATgZN4Bu1xvs5FlRTFPbc6xDNP-11m3echkBg4UwqrRIyXePiQeJSGpuaWGFwk41WNwZ4/s640/9.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Jika seperti ini maka kita sudah berhasil menampilkan data di database di tabel dengan bootstrap</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-53792027960045515812018-03-28T04:29:00.000-07:002018-03-28T04:30:27.403-07:00Kumpulan Tutorial Praktek Pertemuan 1 s/d 7<div dir="ltr" style="text-align: left;" trbidi="on">
Kali ini saya akan mengeshare beberapa ilmu yang saya dapatkan selama praktek. Langsung aja cek satu-satu :D<br />
<br />
<b><a href="https://fendisetyawan10.blogspot.co.id/2018/03/tutorial-1-tutorial-membuat-struktur.html" target="_blank">Membuat Struktur Text HTML Sederhana</a></b><br />
<br />
<b><a href="https://fendisetyawan10.blogspot.co.id/2018/03/tutorial-2-tutorial-membuat-form-login.html" target="_blank">Membuat Form Login Dengan Bootstrap</a></b><br />
<br />
<b><a href="https://fendisetyawan10.blogspot.co.id/2018/03/tutorial-3-membuat-aksi-pada-form-login.html" target="_blank">Membuat Aksi Pada Form Login</a></b><br />
<br />
<b><a href="https://fendisetyawan10.blogspot.co.id/2018/03/tutorial-4tutorial-membuat-alert-dengan.html" target="_blank">Membuat Alert Dengan Bootstrap</a></b><br />
<br />
<b><a href="https://fendisetyawan10.blogspot.co.id/2018/03/tutorial-5-tutorial-menampilkan-data-di.html" target="_blank">Membuat Menampilkan Data Di Database di HTML dengan Tabel</a></b><br />
<br />
Sekian dari saya bila ada yang kurang jelas bisa ditanyakan di kolom komentar</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-11976745189371907842018-03-28T04:21:00.002-07:002018-03-28T04:21:57.592-07:00[TUTORIAL 5] Tutorial Menampilkan Data di Database Pada HTML Dengan Tabel<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="MsoNormal">
Pertama kita buat dulu databasenya dengan nama field dan
tipe data sebagai berikut:<o:p></o:p></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UpIsheH_6Hd4v11LIbNzN7FY5EiSTQQTq95I5SFCfyed78nTlB2uxLjVc5l2UY9d8zYjWkWLkXoKBIdSqdT53Z-DN886FP5t__TtNXov_VjhXttB_L7k0DESRC0aTooMfdyg-C9XhGw/s1600/database.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="307" data-original-width="364" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UpIsheH_6Hd4v11LIbNzN7FY5EiSTQQTq95I5SFCfyed78nTlB2uxLjVc5l2UY9d8zYjWkWLkXoKBIdSqdT53Z-DN886FP5t__TtNXov_VjhXttB_L7k0DESRC0aTooMfdyg-C9XhGw/s400/database.PNG" width="400" /></a><br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<div class="MsoNormal">
Kemudian kita memberi hak akses terhadap tabel users,
eksekusi masing-masing barisnya satu per satu<o:p></o:p></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaD8yQw_Ybz4vzXp3c1OtMQCGOKvT1LjY_UcGrEYUtK79O6pgg_6hLofwnkdOAD6LNJyUWnhSyS0IXrEEvi-KAwAq4KX6zCodfsoNx9nrtjlJAhFXqScf9PXylqVnjR5FBkaL4smLcqQk/s1600/database1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="158" data-original-width="973" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaD8yQw_Ybz4vzXp3c1OtMQCGOKvT1LjY_UcGrEYUtK79O6pgg_6hLofwnkdOAD6LNJyUWnhSyS0IXrEEvi-KAwAq4KX6zCodfsoNx9nrtjlJAhFXqScf9PXylqVnjR5FBkaL4smLcqQk/s640/database1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<div class="MsoNormal">
Langkah selanjutnya membuat project baru di netbeans. Lalu
buat folder dan susun file seperti pada gambar dibawah ini<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKN2k8XCTuNNAu0fwKEF4dWoPeauKEKh6l7fMDZttm5lMmaMu9yEVbS4ZwDTRzaGcFb035-BHGR_H3shJZ8ShYMjOCTvtE0C_ku9cEERaNfBGYsL9EiWDRK6BPxsRcMGEokCcLaAXOY9M/s1600/struktur.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="144" data-original-width="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKN2k8XCTuNNAu0fwKEF4dWoPeauKEKh6l7fMDZttm5lMmaMu9yEVbS4ZwDTRzaGcFb035-BHGR_H3shJZ8ShYMjOCTvtE0C_ku9cEERaNfBGYsL9EiWDRK6BPxsRcMGEokCcLaAXOY9M/s1600/struktur.PNG" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
Oke.. Yang pertama kita buat file di index.php. Ketikkan
sintaks berikut<o:p></o:p></div>
<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_8x1owYhv0dvB5utc8LW6sAFZFNfos2lRY1DUFJOayTInVxO-gU8yBfGRi7ygbp7Npy7sRwF628JJqvIhP_cPqwB4YDBcErXdFqEAjJx3f0REBMczy_Y-TrHWv1uV7H-MlXHAlMmJw1c/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="582" data-original-width="1002" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_8x1owYhv0dvB5utc8LW6sAFZFNfos2lRY1DUFJOayTInVxO-gU8yBfGRi7ygbp7Npy7sRwF628JJqvIhP_cPqwB4YDBcErXdFqEAjJx3f0REBMczy_Y-TrHWv1uV7H-MlXHAlMmJw1c/s640/1.PNG" width="640" /></a></div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Pada baris ke 11 terdapat sintaks yang memanggil
file dao.php.</li>
<li>Baris ke 15 s/d 29 berfungsi untuk menampilkan
data dengan tabel.</li>
</ul>
<br />
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%; mso-ansi-language: IN; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;">Selanjutnya kita membuat file dbconfig.php</span></div>
<div class="MsoNormal">
<span style="font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%; mso-ansi-language: IN; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbIx1Z2f5q6hdqPAnpg7tm_vujr9ZnY47Bzwx7-r-EVxhUyrXvVLN49KXPg-4SHb-shglqjntmeU3cTE-HFXE7hVexUpsVQIZDDsHdV409Jujj8hBY8PQ5M8sO8mr-PN2Ana3X0tveD0/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="295" data-original-width="1019" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbIx1Z2f5q6hdqPAnpg7tm_vujr9ZnY47Bzwx7-r-EVxhUyrXvVLN49KXPg-4SHb-shglqjntmeU3cTE-HFXE7hVexUpsVQIZDDsHdV409Jujj8hBY8PQ5M8sO8mr-PN2Ana3X0tveD0/s640/2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
</div>
<ul style="text-align: left;">
<li> Pada DB_HOST,DB_USER dst kita tulis persis
seperti hak akses yang kita tulis pada database mysql tadi</li>
<li> Pada dbconfig ini berfungsi untuk membuat
koneksi ke database.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAGy0gnOYr3nw2B26dCFBN4SgBPnKn3hgQTeS0DGp_bkfpTRpp40Ikb4XOVGlI4rfMKZq0OVWNrdNnaNVI-GcaHc8Ij0Saj1v5H3gw3mbVLgR1DVi038yYz8Zn5yX767VZti7dzndqT4Q/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="269" data-original-width="1020" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAGy0gnOYr3nw2B26dCFBN4SgBPnKn3hgQTeS0DGp_bkfpTRpp40Ikb4XOVGlI4rfMKZq0OVWNrdNnaNVI-GcaHc8Ij0Saj1v5H3gw3mbVLgR1DVi038yYz8Zn5yX767VZti7dzndqT4Q/s640/3.PNG" width="640" /></a></div>
<div>
<ul style="text-align: left;">
<li> File dao ini terdapat bahasa query untuk
menampilkan data pada database di browser</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVcw0lvbIGCi52dBXAAh8WtB2roySW1hFO-XvC_nRMIXWYKqCTEmWXh3jG3Wktc4HMXUAet1gzmKZDFJgAI01Hz25DoSQdAyTIlA1pfXXeFUws0wJ4SJsZxG3hjz3g3whydM5K4IcKnA/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVcw0lvbIGCi52dBXAAh8WtB2roySW1hFO-XvC_nRMIXWYKqCTEmWXh3jG3Wktc4HMXUAet1gzmKZDFJgAI01Hz25DoSQdAyTIlA1pfXXeFUws0wJ4SJsZxG3hjz3g3whydM5K4IcKnA/s640/5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
</div>
<ul style="text-align: left;">
<li>Untuk mengakses phpmyadmin cukup mudah. Pastikan
kita sudah mengaktifkan apache dan mysql pada XAMPP.</li>
<li>Ketik localhost di browser.</li>
<li>Pilih PHPMyAdmin</li>
<li>Pilih file database.</li>
<li>Klik user.</li>
<li>Terakhir klik tambahkan untuk menginput data.</li>
</ul>
<div>
<br /></div>
</div>
<div>
<div class="MsoNormal" style="margin-left: 18.0pt;">
Jika semuanya sudah kita run
project netbeans kita, maka akan tampil seperti ini<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPshRxvI74Yn8LtBuvp3RGJaCnhOU79MkZnpUtuHXtabgnWe-kBFhYyjImgc9Gk-bUwvtrsCoORRmElVVtGKMaOKvQToWE4yV4kIG9TacVlIAxCZOAWJR3UGkm-hWSY1Dy6AU5fEDXpc/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="444" data-original-width="1366" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPshRxvI74Yn8LtBuvp3RGJaCnhOU79MkZnpUtuHXtabgnWe-kBFhYyjImgc9Gk-bUwvtrsCoORRmElVVtGKMaOKvQToWE4yV4kIG9TacVlIAxCZOAWJR3UGkm-hWSY1Dy6AU5fEDXpc/s640/4.PNG" width="640" /></a></div>
<div class="MsoNormal" style="margin-left: 18.0pt;">
<br /></div>
</div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div>
<div>
<br /></div>
</div>
<div class="MsoNormal">
<span style="font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%; mso-ansi-language: IN; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: "Times New Roman"; mso-bidi-language: AR-SA; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin;"></span></div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-3316852698061692342018-03-28T04:11:00.001-07:002018-03-28T04:11:40.563-07:00[TUTORIAL 4] Tutorial Membuat Alert dengan Bootstrap<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
Sebelum membuat alert kita buat dulu form loginnya, kalian
bisa menggunakan tutorial sebelumnya. Sebenarnya sama seperti tutorial sebelumnya
tetapi hanya ada perbedaan sedikit.<o:p></o:p></div>
<br />
<br />
Langsung kita tambahkan sintaks seperti dibawah ini<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXH_Oe6l7cq6EZ5y6iAYFT8iqzdn7ouhmZjLKbLe9g4Cx_lKsAcd-CZrLd8jd9vc72j_W-YwV2shUobR42RYJQfjuCAq30JhAfKCgsVDxmbKn87OLyMrWdzO5Q2sdj-nnAcj4ANLa4wXQ/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="1000" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXH_Oe6l7cq6EZ5y6iAYFT8iqzdn7ouhmZjLKbLe9g4Cx_lKsAcd-CZrLd8jd9vc72j_W-YwV2shUobR42RYJQfjuCAq30JhAfKCgsVDxmbKn87OLyMrWdzO5Q2sdj-nnAcj4ANLa4wXQ/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Pada Tutor sebelumnya pada bagian session start hanya memuat
echo ‘<h1> Anda di blokir </h1>’. Pada kesempatan kali ini kita
tambah seperti sintaks diatas agar tampilannya lebih menarik.<o:p></o:p></div>
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Pada bagian echo kita tulis ‘<!DOCTYPE
html>. Kenapa kita perlu tulis itu? Karena echo merupakan bahasa php
tentunya jika kita langsung menuliskan bahasa html maka tidak akan dikenali.
Oleh sebab itu kita harus mendefinisikan agar dapat berjalan dengan baik.</li>
<li>Seperti biasa pada bagian head kita panggil atau
definisikan bootstrapnya.</li>
<li>Pada baris ke 17 s/d 21 adalah bagian alertnya.</li>
<li>Kali ini kita memakai alert jenis alert danger.</li>
<li>Baris ke 19 merupakan sintaks agar alert kita
terdapat tombol closenya.</li>
<li>Kemudian pada baris ke 20 kita tuliskan isi
alert atau peringatannya.</li>
</ul>
<div>
<div class="MsoNormal">
Jika sudah kita run maka hasilnya seperti ini<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnb7yYpdmKcxq41ZvRU5W6tkXjJny2O0MXbN8lFBPWYwpocc4pQxzZzh-fmg9f3eYoCBDfF-xq4MgOZcgP7NbxwiOQ6vwGMrRWLUcpPV25fFleXDLyQHpSSs8-j_Ohy_I7gjVHMi-0GY/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnb7yYpdmKcxq41ZvRU5W6tkXjJny2O0MXbN8lFBPWYwpocc4pQxzZzh-fmg9f3eYoCBDfF-xq4MgOZcgP7NbxwiOQ6vwGMrRWLUcpPV25fFleXDLyQHpSSs8-j_Ohy_I7gjVHMi-0GY/s640/2.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
</div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-90826157389370689162018-03-28T03:44:00.001-07:002018-03-28T03:44:22.209-07:00[TUTORIAL 3] Membuat Aksi Pada Form Login<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
Pertama kita buat dulu form loginnya, kalian bisa pakai form
login pada tutorial sebelumnya. <a href="http://fendisetyawan10.blogspot.co.id/2018/03/tutorial-2-tutorial-membuat-form-login.html" target="_blank">Klik Disini</a>.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiVid3ML9YzKXmTRp_taQxeF2InPTNJFRrUCUN8VFL1JqNeuCMwnNtkVFSNgAcyauRCC8b0eTi-fr_adpzCGNecNCK92kAEKrOZZPu_qjaLMGjTx3xfd6VviRheBTZ_vlmXfcaQ1v9Fs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="165" data-original-width="1000" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiVid3ML9YzKXmTRp_taQxeF2InPTNJFRrUCUN8VFL1JqNeuCMwnNtkVFSNgAcyauRCC8b0eTi-fr_adpzCGNecNCK92kAEKrOZZPu_qjaLMGjTx3xfd6VviRheBTZ_vlmXfcaQ1v9Fs/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Diatas <!DOCTYPE html kita tulis sintak php
yang berfungsi jika user gagal login 3 kali makan akan muncul display error.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJoO4QjOief3rMMbemFneAwitd5J7LGwdf8o1IXM-jCSHTyoD_TUmqNi0tbjAGRSMFVr8EXdY4YFzmKwe8RIT8i1FDb8AkPTsGIQ-zOyc2fcZDReC_oCYOZKQEdi6abXX79dl_aJonAs/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="383" data-original-width="999" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJoO4QjOief3rMMbemFneAwitd5J7LGwdf8o1IXM-jCSHTyoD_TUmqNi0tbjAGRSMFVr8EXdY4YFzmKwe8RIT8i1FDb8AkPTsGIQ-zOyc2fcZDReC_oCYOZKQEdi6abXX79dl_aJonAs/s640/2.PNG" width="640" /></a></div>
<div class="MsoNormal">
Keterangan :</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Kita buat file baru dan kita berina nama
login.php kemudian isi sintaks seperti diatas.</li>
<li>Kita buat variabel $user dan $pass lalu pada
bagian kurung kotak kita cocokkan dengan nama field yang kita buat kemarin.</li>
<li><span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;"> </span><span style="text-indent: -18pt;">Lalu ada sebuah percabangan. Jika user dan
password sesuai maka akan tampil dashboard.</span></li>
<li>Jika tidak sesuai akan memanggil session yang
kita buat tadi dan jika telah 3 kali salah makan otomatis akan diblokir</li>
</ul>
<br />
<br />
<br />
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSJ7DJsnaZMwn5mJ03K8WkUlT8w9p-NqzAoQR_uF8JKqafqwqbpoAbBeE1-9AFzJhyjJWHoTXB52rToQE0m-wdtX2lz9z0s_TOU1mQPFPPLlngkwxAiT8tHUWfTY-iAW8vDB-aW5PdK8/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="578" data-original-width="998" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSJ7DJsnaZMwn5mJ03K8WkUlT8w9p-NqzAoQR_uF8JKqafqwqbpoAbBeE1-9AFzJhyjJWHoTXB52rToQE0m-wdtX2lz9z0s_TOU1mQPFPPLlngkwxAiT8tHUWfTY-iAW8vDB-aW5PdK8/s640/2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Terakhir pada bawah nama form kita tambahkan
aksi dengan merujuk file login.php yang telah dibuat agar fungsi login dapat
berjalan.</li>
</ul>
<br />
<div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
</div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Kemudian kita running, jika username dan password sesuai
maka akan tampil dashboard [Catatan: Untuk membuat file dashboard dapat
menggunakan tutorial yang saya buat sebelumnya, tinggal buat file php lagi lalu
ganti nama jadi dashboard.php]<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDEhGGlOwyCww8qmxRWdowYnH59GtfKoXTUWkTD-u5lFMZ4lQuqcEMYUiwN9r_fuOrbI3QNGu_bTV7fFoSTpbeqr1RMQ2VM88nI4MtTAzoksO6efhQwIkUQg_C0Y8M6QxMyYeBlxbJfw/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVDEhGGlOwyCww8qmxRWdowYnH59GtfKoXTUWkTD-u5lFMZ4lQuqcEMYUiwN9r_fuOrbI3QNGu_bTV7fFoSTpbeqr1RMQ2VM88nI4MtTAzoksO6efhQwIkUQg_C0Y8M6QxMyYeBlxbJfw/s640/3.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Jika salah 3 kali maka tampilannya<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZ2bfUlKKzeUK2FlbFZ0PTtkS9dvwfe5Dv0wBfzTetyDerO9aQDV5iqIYtaz9j8rWI_BsR9xNESwPJ-GokJhM0JuOJgqG8IdrJqpXMeryA-gF23QIFXE8aPRTzZKAgfrbSNhvHzRPnnQ/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZ2bfUlKKzeUK2FlbFZ0PTtkS9dvwfe5Dv0wBfzTetyDerO9aQDV5iqIYtaz9j8rWI_BsR9xNESwPJ-GokJhM0JuOJgqG8IdrJqpXMeryA-gF23QIFXE8aPRTzZKAgfrbSNhvHzRPnnQ/s640/4.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-43549135709974821292018-03-28T03:00:00.001-07:002018-03-28T03:00:12.958-07:00[TUTORIAL 2] Tutorial Membuat Form Login<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
Oke pada kesempatan kali ini saya akan sedikit memberi tutorial membuat struktur HTML sederhana.</div>
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
Langkah pertama seperti biasa buka netbeans -> new project -> php application.</div>
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHvcSIALhy3lsxgP0uLgidt_TiK1n6b8BKW8ZdZQ0l02FdBCwAf0VzpG3O3O5O9Lnonl-PprQgpusz5Dy77Vu70-fJFmgpFVALXAkf5UuOFd6afsU5bk2JAtHRTD3N3wlO-DgQw2ZAhbw/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="201" data-original-width="998" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHvcSIALhy3lsxgP0uLgidt_TiK1n6b8BKW8ZdZQ0l02FdBCwAf0VzpG3O3O5O9Lnonl-PprQgpusz5Dy77Vu70-fJFmgpFVALXAkf5UuOFd6afsU5bk2JAtHRTD3N3wlO-DgQw2ZAhbw/s640/1.PNG" width="640" /></a></div>
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<br /></div>
<div class="separator" style="background-color: white; border: 0px; box-sizing: border-box; clear: both; font-family: Verdana, Geneva, sans-serif; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<div class="MsoNormal" style="font-size: 14px;">
Keterangan:</div>
<div class="MsoNormal" style="font-size: 14px;">
</div>
<ul style="font-size: 14px; text-align: left;">
<li>Seperti biasa pada bagian head memuat title dan
link-link untuk mendefiniskan file-file atau resource apa yang kita butuhkan.
Contohnya seperti bootstrap atau file style.css</li>
</ul>
<div class="separator" style="clear: both; font-size: 14px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHXlrxNhw2e6L0PjViboYVfcyAZkeQVSOmFoH34vBgbopSngJm84mty7FUm-C-RNYaeT0I4lvQBYapm_bbxj-q2EJNNYwopksJk6H5Algk8Lqw5RaAjONtNuWR0SMKvNmhyphenhyphenliQLoZ25U/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="578" data-original-width="998" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHXlrxNhw2e6L0PjViboYVfcyAZkeQVSOmFoH34vBgbopSngJm84mty7FUm-C-RNYaeT0I4lvQBYapm_bbxj-q2EJNNYwopksJk6H5Algk8Lqw5RaAjONtNuWR0SMKvNmhyphenhyphenliQLoZ25U/s640/2.PNG" width="640" /></a></div>
<div style="font-size: 14px;">
<br /></div>
<div style="font-size: 14px;">
</div>
<div class="MsoListParagraph" style="font-size: 14px; text-indent: -18pt;">
<o:p></o:p></div>
<div class="MsoNormal" style="font-size: 14px;">
Keterangan:</div>
<div class="MsoNormal" style="font-size: 14px;">
</div>
<ul style="font-size: 14px; text-align: left;">
<li>Pada bagian body kita membuat form untuk login</li>
<li>Form ini berisikan field username dengan type
email dan password dengan type password juga.</li>
<li>Lalu kita beri fitur remeber me.</li>
<li>Pada baris 64 merupakan sintaks untuk membuat
button dengan style bootstrap.</li>
<li>Dibawah button kita beri fitur forgot password.</li>
</ul>
<div style="font-size: 14px;">
<br /></div>
<div>
<span style="font-family: Calibri, sans-serif;">Nah... Jika kode diatas sudah dituliskan semua makan ketika dirun tampilannya akan seperti gambar di bawah ini</span></div>
<div>
<span style="font-family: Calibri, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7rWwbnEN55Sp0AOW9h3k0hQMgldyRVpDwPbuoot1RnDlwqhr3wSmjDEAMEmgZqltdR41mWXgklq_t91KhgIM0s7gb2dXHWL6DiueNFksDCEcmZ5wRvCYrFHxMEJ4YLV1BOh74_yQDCM/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7rWwbnEN55Sp0AOW9h3k0hQMgldyRVpDwPbuoot1RnDlwqhr3wSmjDEAMEmgZqltdR41mWXgklq_t91KhgIM0s7gb2dXHWL6DiueNFksDCEcmZ5wRvCYrFHxMEJ4YLV1BOh74_yQDCM/s640/3.PNG" width="640" /></a></div>
<div>
<span style="font-family: Calibri, sans-serif;"><br /></span></div>
<div style="font-size: 14px;">
</div>
<div class="MsoListParagraphCxSpLast" style="font-size: 14px; text-indent: -18pt;">
<o:p></o:p></div>
<div style="font-size: 14px; text-align: left;">
<br /></div>
</div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-54497748119230204002018-03-28T02:54:00.002-07:002018-03-28T02:54:28.457-07:00[TUTORIAL 1] Tutorial Membuat Struktur HTML Sederhana<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
Oke pada kesempatan kali ini saya akan sedikit memberi tutorial membuat struktur HTML sederhana.</div>
<div class="separator" style="clear: both; text-align: left;">
Langkah pertama seperti biasa buka netbeans -> new project -> php application.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Lalu ketikkan sintak dibawah ini.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00vqmeZelaGUfuFKxCmcmBpu02Q5pXQyCrs7UDFsajnsy1cVdHkv6ZNYJUulboot19HXdZhTPoszTFf2GRaDqH5QJviNEPqDAxipff5-g4si8hdzUW4WM3f5aYSFGFDCc7b8K0mQe_bU/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="380" data-original-width="1010" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00vqmeZelaGUfuFKxCmcmBpu02Q5pXQyCrs7UDFsajnsy1cVdHkv6ZNYJUulboot19HXdZhTPoszTFf2GRaDqH5QJviNEPqDAxipff5-g4si8hdzUW4WM3f5aYSFGFDCc7b8K0mQe_bU/s640/1.PNG" width="640" /></a></div>
<br />
<div class="MsoNormal">
Keterangan :</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Pada bagian head terdapat title yang berfungsi
menampilkan teks pada tab browser.</li>
<li>Selanjutnya pada baris ke 5 adalah untuk
menampilkan gambar kecil pada tab browser.</li>
<li>Pada baris ke 6, kita mendefinisikan atau
memanggil bootstrap.</li>
<li>Lalu pada bagian Header di baris ke 12 fungsinya
untuk menampilkan navigasi di bagian atas halaman HTML.</li>
<li>Baris ke 16 s/d 18 merupakan bagian teks dari
navigasi.</li>
</ul>
<div>
Kemudian dibawahnya ketikkan sintak berikut.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflGkdV88FfVDhSd1bNlNeblJ31Bin_BK-9q2KVpwSYzeu1lauVphZmoGKLXLyGWtvRDCiiHeBUPHdi3eZw7ymg__MeCTcVdtUWE_ZE-h1rrCtfDN3yxGpf1FEcJCVWNRxvmW6DVhu_jc/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="89" data-original-width="1009" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflGkdV88FfVDhSd1bNlNeblJ31Bin_BK-9q2KVpwSYzeu1lauVphZmoGKLXLyGWtvRDCiiHeBUPHdi3eZw7ymg__MeCTcVdtUWE_ZE-h1rrCtfDN3yxGpf1FEcJCVWNRxvmW6DVhu_jc/s640/2.PNG" width="640" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Pada bagian ini adalah konten atau isi yang akan
dibuat di website kita. Meliputi bagian artikel kemudian judul, sub judul dan
isi artikel.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5awCO9ye11gdOQq8VPpsJOSIiGN4GRHPQu64ZeB3zWzI8wkHAOU37lZet_VPTwmKsyCq_6yxI8DSePEmHKQ-uIHEL4DNKREaiR6R5rK9DNPp97OQCHzTcPI8KeddOJlIY_tWA4QCFw4/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="144" data-original-width="1011" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5awCO9ye11gdOQq8VPpsJOSIiGN4GRHPQu64ZeB3zWzI8wkHAOU37lZet_VPTwmKsyCq_6yxI8DSePEmHKQ-uIHEL4DNKREaiR6R5rK9DNPp97OQCHzTcPI8KeddOJlIY_tWA4QCFw4/s640/4.PNG" width="640" /></a></div>
<br />
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Bagian ini merupakan side bar yang terletak pada
samping kanan/kiri website.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQMv5NQrBAf1XEVY7yGbuXne-xdZ9BhFqwH8dt5JSmSGl-QAr-EGPvn93JU_HnzN9DYTMU2u6TP1oRlScgrplvdTSpYA7AzMemb068arVUJS6VEZ3Q2e-zbGj2G5N9ZC4Th6gC5M0NMc/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="112" data-original-width="1008" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQMv5NQrBAf1XEVY7yGbuXne-xdZ9BhFqwH8dt5JSmSGl-QAr-EGPvn93JU_HnzN9DYTMU2u6TP1oRlScgrplvdTSpYA7AzMemb068arVUJS6VEZ3Q2e-zbGj2G5N9ZC4Th6gC5M0NMc/s640/5.PNG" width="640" /></a></div>
<div class="MsoNormal">
Keterangan:</div>
<div class="MsoNormal">
</div>
<ul style="text-align: left;">
<li>Bagian terakhir yaitu footer yang terletak di
paling bawah sendiri. Biasanya memuat pembuat web.</li>
</ul>
<br />
<br />
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div class="MsoNormal">
</div>
<div>
</div>
<br />
<div class="MsoNormal">
Nah... Jika kode diatas sudah dituliskan semua makan ketika
dirun tampilannya akan seperti gambar di bawah ini<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gU448g3BXxn7cm4IdfIY8oDfWHgqrn57Myfncf1WFD1MyV88ceArisaywrCgjmC03XWPOv2oECoLjbCzyFIrq86vDjybmaVNC-PY7pcq0i7O4y5hjDhgBvpNFc6sZ1LmZALTddy45-o/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gU448g3BXxn7cm4IdfIY8oDfWHgqrn57Myfncf1WFD1MyV88ceArisaywrCgjmC03XWPOv2oECoLjbCzyFIrq86vDjybmaVNC-PY7pcq0i7O4y5hjDhgBvpNFc6sZ1LmZALTddy45-o/s640/6.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
</div>
<div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
</div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-56149714545074767772018-03-27T14:14:00.001-07:002018-03-27T14:14:40.894-07:00[TUGAS] Membuat Rancangan Sistem Login<div dir="ltr" style="text-align: left;" trbidi="on">
Pada kesempatan kali ini saya akan membagikan rancangan sistem login dengan kondisi jika beberapa kali salah login maka pengguna akan diblokir.<br />
Yang pertama yaitu algoritmanya adalah sebagai berikut:<br />
<br />
<div class="MsoNormal">
Algoritma <o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
</div>
<ol style="text-align: left;">
<li><span style="text-indent: -18pt;">Input username</span></li>
<li>Input password</li>
<li>Klik login</li>
<li>Jika sesuai maka akan tampil halaman dashboard.</li>
<li>Jika tidak sesuai kembali ke langkah pertama,
jika sampai 3 kali salah maka akan terblokir</li>
</ol>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<o:p></o:p></div>
<div class="MsoNormal">
Nah.. Kemudian Pseudocode adalah sebagai berikut:<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
</div>
<ol style="text-align: left;">
<li>·<span style="font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">
</span><span style="text-indent: -18pt;">Input $user.</span></li>
<li> Input $pass.</li>
<li> If $dbuser == <a href="mailto:admin@gmail.com" style="text-indent: -18pt;">admin@gmail.com</a><span style="text-indent: -18pt;">
&& $dbpass == admin123</span></li>
<li> Alert Anda Berhasil Login</li>
<li> Else echo password atau username tidak sesuai.</li>
<li> session = session + 1</li>
<li> Kembali ke langkah pertama.</li>
<li> Cek jika session > 3</li>
<li> Echo Anda dalam kondisi terblokir</li>
</ol>
<br />
<div class="MsoListParagraphCxSpLast" style="mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<o:p></o:p></div>
Lalu flowchartnya akan seperti gambar dibawah ini<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlY2JeZNNhyAqdE1vw_TmZOLla7gxDLrE4szaa-y-cbW3vPbrGHhBvfGwRVPOIaacdiW97VVarhj71Aaavm1Ic-pPpXm7hdcEWjW9mAafM4u3Mj8CP-xi3fUZh3yjN4YYy1NOjnd-Yhw/s1600/flow.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="750" data-original-width="795" height="602" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlY2JeZNNhyAqdE1vw_TmZOLla7gxDLrE4szaa-y-cbW3vPbrGHhBvfGwRVPOIaacdiW97VVarhj71Aaavm1Ic-pPpXm7hdcEWjW9mAafM4u3Mj8CP-xi3fUZh3yjN4YYy1NOjnd-Yhw/s640/flow.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Kemudian setelah algoritma, pseudocode dan flowchart berhasil dibuat langkah selanjutnya yaitu mengimplementasikan hasil tersebut ke dalam sintaks pada form login. Beberapa minggu lalu sudah saya share tutorialnya. Untuk itu kalian bisa cek <a href="https://fendisetyawan10.blogspot.com/2018/03/tugas-tutorial-membuat-tampilan-login.html" target="_blank">LINK DISINI</a>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Sekian Tutorial singkat dari Saya bila ada salah-salah kata maupun penulisan mohon dimaafkan :D</div>
<div>
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-54687839894713581822018-03-13T03:44:00.001-07:002018-03-13T03:44:30.260-07:00[TUGAS] Tutorial Membuat Alert Javascript Sederhana Pada Form Login<div dir="ltr" style="text-align: left;" trbidi="on">
<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;">
</div>
<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;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Tutorial Membuat Form Login dengan JavaScript Sederhana<br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
Alat & Bahan:<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">1.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->PC/Laptop.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">2.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->Netbeans.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">3.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->Bootstrap.<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">4.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->File image (bila perlu).<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">5.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->Gorengan.<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">6.<span style="font: 7.0pt "Times New Roman";">
</span></span></span><!--[endif]-->Kopi.<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<br /></div>
<div class="MsoNormal">
Oke... langsung aja langkah pertama hidupkan PC/Laptop
kalian lalu aktifkan apache di XAMPP. Setelah itu buka Netbeans -> File
-> New Project.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKgc9-UhqScisLYLCkQ5-CQcCyq_0ujJTkFPuiNi6ALj0M7zYD8tGLHxsSoFWynsMH_LDEO9Riqhqf7CFmpFR54ykWf-s5jtJdrhsdY-KMvogcJKMcWN-bFaGvm1XvBVaJyOYgE3Nfv0/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="532" data-original-width="515" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKgc9-UhqScisLYLCkQ5-CQcCyq_0ujJTkFPuiNi6ALj0M7zYD8tGLHxsSoFWynsMH_LDEO9Riqhqf7CFmpFR54ykWf-s5jtJdrhsdY-KMvogcJKMcWN-bFaGvm1XvBVaJyOYgE3Nfv0/s400/1.PNG" width="386" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Selanjutnya pilih PHP -> PHP Application.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaikmXkwXAX7X8N-jr2IdUm-3penUTSBQ5b7OHSTdWnNcD8-zbcUciscYBnwtxec1GE-qXObN1K7Gukq0JGOUDbnAHhG-r1XRrlAmOyUzcpKaLQDW3ll8dvfTYzRZNAsEz4SAQdCpaIyk/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaikmXkwXAX7X8N-jr2IdUm-3penUTSBQ5b7OHSTdWnNcD8-zbcUciscYBnwtxec1GE-qXObN1K7Gukq0JGOUDbnAHhG-r1XRrlAmOyUzcpKaLQDW3ll8dvfTYzRZNAsEz4SAQdCpaIyk/s640/2.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Lalu beri nama project sesuai dengan keinginan kalian
kemudian klik finish.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCyUxB4Pw_7AefxHcxtKqvmV73gVzKU_X0lDj1YqR_Oudumiq2O5ll_AN-gEwBm3oeP0A7cZ94V3_x5V4wtOkBYVB3g0DzCSfikHIfcfp7ScJtzupRgUMdG-Fw9ul75EtXxCFRO39rhw/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUCyUxB4Pw_7AefxHcxtKqvmV73gVzKU_X0lDj1YqR_Oudumiq2O5ll_AN-gEwBm3oeP0A7cZ94V3_x5V4wtOkBYVB3g0DzCSfikHIfcfp7ScJtzupRgUMdG-Fw9ul75EtXxCFRO39rhw/s640/3.PNG" width="640" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Setelah itu akan muncul tampilan seperti gambar di bawah ini</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNLbR5pCrFKBD6ITijGSby-aYS5nsO0rpcxyV3UqsQGTZoA9y7MisEu7XMcjr1aqi8Bt3J5np78lcfc_J3zM_zgQ2g7IEVlfZ70dkmvOnF9Bnk74w4GgMNcAAZDimqK2TjVZztpR7QlE/s1600/awal.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="363" data-original-width="648" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNLbR5pCrFKBD6ITijGSby-aYS5nsO0rpcxyV3UqsQGTZoA9y7MisEu7XMcjr1aqi8Bt3J5np78lcfc_J3zM_zgQ2g7IEVlfZ70dkmvOnF9Bnk74w4GgMNcAAZDimqK2TjVZztpR7QlE/s640/awal.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Jangan lupa masukkan bootstrap dan susun seperti gambar
dibawah ini.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OcOHh8QrfIOpiNtw0nHTxXj9IDezSJHFtl3-oNGNyiYjPtNxd4UYjpvfV-DhWDNrw3x4W1Wx7avz3BVQ7TuPpjnpV1mkX0D6YocgmoViE3ESCN9C364hoDIwKwEcSIMutFeYKGRkPXg/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="180" data-original-width="281" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OcOHh8QrfIOpiNtw0nHTxXj9IDezSJHFtl3-oNGNyiYjPtNxd4UYjpvfV-DhWDNrw3x4W1Wx7avz3BVQ7TuPpjnpV1mkX0D6YocgmoViE3ESCN9C364hoDIwKwEcSIMutFeYKGRkPXg/s400/7.PNG" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
Kemudian langkah selanjutnya membuat fungsi login yang
dilengkapi dengan alert javascript sederhana.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtiGrZIevo8ZOls6vlnncJc0BQX9_wF0wOKGocyb0ONJ2jpKqChd0KByS_-rUCe5O_Scmh3u01ZH7AKq-jmNzh5KO85z-5wD5unMZo8PhxeMwK9cXV2WnxsPB6q2C9BkXowikcTfk8Z5s/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="273" data-original-width="644" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtiGrZIevo8ZOls6vlnncJc0BQX9_wF0wOKGocyb0ONJ2jpKqChd0KByS_-rUCe5O_Scmh3u01ZH7AKq-jmNzh5KO85z-5wD5unMZo8PhxeMwK9cXV2WnxsPB6q2C9BkXowikcTfk8Z5s/s640/4.PNG" width="640" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Selanjutnya kita buat headnya.<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiypr5ZIxdoWqMKmwRIqrr8SXFA73hLOFg79kPr-oYdWo3_ug-AD3OVe3jkwDhPgKH5KoeD4l9nek5G7fZ0v-SpT5Pp_2FjAsPTfmVCHchg-QFPzD1aTmYzi0CA1aA9RrUPW9D_M-gzm-0/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="149" data-original-width="643" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiypr5ZIxdoWqMKmwRIqrr8SXFA73hLOFg79kPr-oYdWo3_ug-AD3OVe3jkwDhPgKH5KoeD4l9nek5G7fZ0v-SpT5Pp_2FjAsPTfmVCHchg-QFPzD1aTmYzi0CA1aA9RrUPW9D_M-gzm-0/s640/5.PNG" width="640" /></a></div>
<div>
<br /></div>
<br />
<div class="MsoNormal">
Lalu membuat body.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghI4F3vHpKNepInnpjPlgEGYxxo2oSEskss7HUKKmmjmeqi7p1Ij5mzK4sgZgquq9-g4xjm-oLupIYkdsx9LF4xWcP_nf71OgJUTll0k_-0AjVSOG_bvzBpQeF4tQsVjVFqoVh1EIWo1g/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="545" data-original-width="642" height="542" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghI4F3vHpKNepInnpjPlgEGYxxo2oSEskss7HUKKmmjmeqi7p1Ij5mzK4sgZgquq9-g4xjm-oLupIYkdsx9LF4xWcP_nf71OgJUTll0k_-0AjVSOG_bvzBpQeF4tQsVjVFqoVh1EIWo1g/s640/6.PNG" width="640" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Jika semuanya sudah langkah terakhir yaitu jalankan projectnya.
Lalu coba ketikkan username dan password dengan benar maka tampilannya akan
seperti ini.<o:p></o:p></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUCGRXzUaivlHmjYW8urYGclhZwF7WLW3SETXhxhCZMp4TtOsg8bw4lwzR2Ze433xxbHCXx90Ufnjtpb1hU-nWd5D7pvH43Yr-5ep_EFVjg1are9f-Rj5TqIBdJ6iGJVZzKFe8smFwtI/s1600/jika+benar.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUCGRXzUaivlHmjYW8urYGclhZwF7WLW3SETXhxhCZMp4TtOsg8bw4lwzR2Ze433xxbHCXx90Ufnjtpb1hU-nWd5D7pvH43Yr-5ep_EFVjg1are9f-Rj5TqIBdJ6iGJVZzKFe8smFwtI/s640/jika+benar.PNG" width="640" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Jika username/password salah<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfBhyphenhyphen0E09lxQKEdMouQO5TaUEhZV7n5YwRtR6nJMfZElgEJqkfSxulL7IY7H7nt3cD5qBDRsxAgRCEROog2Z5gOCiFcs0_8VqZDfw0gKlqars7hWtJMO395748NHsPlsu2aOT8sDCHpQ/s1600/jika+salah.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfBhyphenhyphen0E09lxQKEdMouQO5TaUEhZV7n5YwRtR6nJMfZElgEJqkfSxulL7IY7H7nt3cD5qBDRsxAgRCEROog2Z5gOCiFcs0_8VqZDfw0gKlqars7hWtJMO395748NHsPlsu2aOT8sDCHpQ/s640/jika+salah.PNG" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<br /><br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-43366124309326920232018-03-05T13:48:00.001-08:002018-03-05T13:48:39.405-08:00[TUGAS] Tutorial Membuat Tampilan Login Menggunakan CSS dan Bootstrap<div dir="ltr" style="text-align: left;" trbidi="on">
1. Langkah pertama membuat project baru di Netbeans<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXRd62KM3er1xNAXKO9iFZ5v-EemGYXOwX22dgGJzRESymC8RmRmPSuqimJ6cPPh_WU9WnJVvSBedy3ljm1D0A7ZInTHk9cO0gtcKOYMdcZirfqX91inM-7Dm-JkACJW4N7JIA6w_R98/s1600/tutor1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXRd62KM3er1xNAXKO9iFZ5v-EemGYXOwX22dgGJzRESymC8RmRmPSuqimJ6cPPh_WU9WnJVvSBedy3ljm1D0A7ZInTHk9cO0gtcKOYMdcZirfqX91inM-7Dm-JkACJW4N7JIA6w_R98/s640/tutor1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Beri nama projectnya lalu klik finish</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_05Mhx6hqenJfIVedQ020J8jG-509vqrCva_QKCtMR2b7nGy6dvttjQn_Nmug1oQXyoTxZaZpZg2ECBuQOGB9Jzq9h94UE0QVOmWDbOLHntk17fDc5CBGBoYGBASX1hQueZQ_63ehlnU/s1600/tutor2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_05Mhx6hqenJfIVedQ020J8jG-509vqrCva_QKCtMR2b7nGy6dvttjQn_Nmug1oQXyoTxZaZpZg2ECBuQOGB9Jzq9h94UE0QVOmWDbOLHntk17fDc5CBGBoYGBASX1hQueZQ_63ehlnU/s640/tutor2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. Download bootstrap dan siapkan bahan-bahannya seperti gambar berikut</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEIvyF7qc3nb9_r2GyOy1RZXOLBlwGI-vy4NK1ABporeC9MuswTqHg9yPxGlUn95wjkvTBGhJmb2El_sewEyqJK8Xd5vfrk5DCyTMp0r2jrcYEULxUnksKFt5_Dd428UvcP1-o3B9qpE/s1600/tutor3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="341" data-original-width="272" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEIvyF7qc3nb9_r2GyOy1RZXOLBlwGI-vy4NK1ABporeC9MuswTqHg9yPxGlUn95wjkvTBGhJmb2El_sewEyqJK8Xd5vfrk5DCyTMp0r2jrcYEULxUnksKFt5_Dd428UvcP1-o3B9qpE/s400/tutor3.PNG" width="318" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Dalam file index php isikan listing coding seperti berikut ini</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS-ppOY_vg6ISm0J7UQw4RFfZ3y1TSjj0z3CnEvq-gzMJrJCP9CbqqRNezUXO6qfJi1yVU9-O_0Fm8T9MAzLH8Vs0sdBlvOZQm0_-5423ZaYMlBkIWbXKhXTVO0YWObFz95KoLzVYbgM/s1600/index1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="502" data-original-width="788" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS-ppOY_vg6ISm0J7UQw4RFfZ3y1TSjj0z3CnEvq-gzMJrJCP9CbqqRNezUXO6qfJi1yVU9-O_0Fm8T9MAzLH8Vs0sdBlvOZQm0_-5423ZaYMlBkIWbXKhXTVO0YWObFz95KoLzVYbgM/s640/index1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ckq-1cLx0zzmIHhazocTalgFn8SDBINHsEb5WPJeB-y3_Ao6nUVwEdym7DuRqWevPo3RfAcJUCAfaMqH9EBAWHnDHIVeu-W0qDZHsLuE-b8S3yuRNBUNJXgMqZFEHTxMPuGldJfIujk/s1600/index2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="196" data-original-width="873" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ckq-1cLx0zzmIHhazocTalgFn8SDBINHsEb5WPJeB-y3_Ao6nUVwEdym7DuRqWevPo3RfAcJUCAfaMqH9EBAWHnDHIVeu-W0qDZHsLuE-b8S3yuRNBUNJXgMqZFEHTxMPuGldJfIujk/s640/index2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
5. Membuat fungsi login gagal 3 kali, Tambahkan sintaks berikut dalam file index.php. Tambahkan diatas sintaks yang sudah diketikkan tadi. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvKbHbcHSSnY1cvBInMmTea2TvGT1Wom_EQtP-MkMAPTRG2JzLri9wlCJpULSTyfbzKvbT2nL8O2z1u6zyNgh8MjLgS82OqcSM5kRtPBfLTsjev2EpH-wq3lkDuWr_0yOcGc_uwjec1w/s1600/fungsi.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="147" data-original-width="641" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvKbHbcHSSnY1cvBInMmTea2TvGT1Wom_EQtP-MkMAPTRG2JzLri9wlCJpULSTyfbzKvbT2nL8O2z1u6zyNgh8MjLgS82OqcSM5kRtPBfLTsjev2EpH-wq3lkDuWr_0yOcGc_uwjec1w/s640/fungsi.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
6. Tambahkan file login.php dengan cara klik kanan project tersebut lalu pilih new file -> php. Kemudian isikan sintak berikut</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiSu_TUy_ozm-4nRtBzICNvMcmiXamj0nHhHMByoF-sung6O4MkNK2yeBq7npHI-GAjynAq1sREukGNHSi3LzHKoR1yK5uEgtPuuCqbsfs9HZcd6OAtjNTOooOs-SVssrjsOqMtmDrjz8/s1600/login.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="366" data-original-width="641" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiSu_TUy_ozm-4nRtBzICNvMcmiXamj0nHhHMByoF-sung6O4MkNK2yeBq7npHI-GAjynAq1sREukGNHSi3LzHKoR1yK5uEgtPuuCqbsfs9HZcd6OAtjNTOooOs-SVssrjsOqMtmDrjz8/s640/login.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
7. Kemudian simpan lalu jalankan. Jangan lupa untuk terlebih dahulu mengaktifkan Apache di XAMPP. Maka hasilnya akan seperti dibawah ini.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispsJz524YwW72JGlfxt_MsCVjaPlO-jEnRFtd-n_Xti7BhEHYf3lrcyxDdn8AEodw9QExMdxW6VUEQdi8jB-9VSUiL_CWXPY5z9Nq0X3mK5sD7oBql2psMBCqXICek5H-kuQ_FLKJKRc/s1600/hasil.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="746" data-original-width="1366" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispsJz524YwW72JGlfxt_MsCVjaPlO-jEnRFtd-n_Xti7BhEHYf3lrcyxDdn8AEodw9QExMdxW6VUEQdi8jB-9VSUiL_CWXPY5z9Nq0X3mK5sD7oBql2psMBCqXICek5H-kuQ_FLKJKRc/s640/hasil.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Untuk Full Projectnya bisa di <a href="https://drive.google.com/file/d/1xlBy2E483tZsR6SFNixewqvJipDE9u6X/view?usp=sharing" target="_blank">DOWNLOAD DISINI</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-79102178420012907372018-03-05T13:28:00.000-08:002018-03-05T13:34:47.298-08:00[TUGAS] Tutorial Tag HTML5<div dir="ltr" style="text-align: left;" trbidi="on">
Pada kesempatan ini, Saya akan sedikit memberikan tutorial tentang berbagai macam tag dasar HTML5.<br />
<br />
1. Langkah pertama yaitu membuka netbeans -> new project -> PHP Application<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4J_R4tkD7hxhqjf4mD_1yfs-bKJ9whyphenhyphenVyVU3dVGqNrUFgf-AvkZtFYxOSddW9-Dtx4iN25A7IyYD40mSI3_Cuz8g2_DnDsTOs15gPMc5Xn7kqc_0vY_Djt33YRQSeOEW24VM3yiCXTEA/s1600/tutor1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4J_R4tkD7hxhqjf4mD_1yfs-bKJ9whyphenhyphenVyVU3dVGqNrUFgf-AvkZtFYxOSddW9-Dtx4iN25A7IyYD40mSI3_Cuz8g2_DnDsTOs15gPMc5Xn7kqc_0vY_Djt33YRQSeOEW24VM3yiCXTEA/s640/tutor1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Kemudian beri nama projectnya lalu klik finish.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_05Mhx6hqenJfIVedQ020J8jG-509vqrCva_QKCtMR2b7nGy6dvttjQn_Nmug1oQXyoTxZaZpZg2ECBuQOGB9Jzq9h94UE0QVOmWDbOLHntk17fDc5CBGBoYGBASX1hQueZQ_63ehlnU/s1600/tutor2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="737" height="440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_05Mhx6hqenJfIVedQ020J8jG-509vqrCva_QKCtMR2b7nGy6dvttjQn_Nmug1oQXyoTxZaZpZg2ECBuQOGB9Jzq9h94UE0QVOmWDbOLHntk17fDc5CBGBoYGBASX1hQueZQ_63ehlnU/s640/tutor2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
3. Sintak untuk membuat title sederhana</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPCmhRB6NfqDVc6tpf3C5TrpfvVq5E-NGc89MAGfOaTmMYIsoGuZTLqFdSdvVTjpWT2xE_o-csDBPIhgGsl6aTFuJyNHIIDKHV97TzDcq04w2rq5JYFXiDyVpjfYRHdOmSWlvaxP-_V0/s1600/title.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="159" data-original-width="643" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJPCmhRB6NfqDVc6tpf3C5TrpfvVq5E-NGc89MAGfOaTmMYIsoGuZTLqFdSdvVTjpWT2xE_o-csDBPIhgGsl6aTFuJyNHIIDKHV97TzDcq04w2rq5JYFXiDyVpjfYRHdOmSWlvaxP-_V0/s640/title.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
4. Sintak untuk membuat tag paragraf</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAghvtkX-4isTsEgFUBbKylUouzJ4nqjK0xEx41CYci6AtisyNIiY-4aqf2qWh9_1rZI6ltiwGpUM5AuLiZ8QYFtFyPuKxZcMtrXrRDmYFJ57-hVtWvbVRNJf4eWddrAJSHJIAKDi4Qek/s1600/paragraf.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="215" data-original-width="642" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAghvtkX-4isTsEgFUBbKylUouzJ4nqjK0xEx41CYci6AtisyNIiY-4aqf2qWh9_1rZI6ltiwGpUM5AuLiZ8QYFtFyPuKxZcMtrXrRDmYFJ57-hVtWvbVRNJf4eWddrAJSHJIAKDi4Qek/s640/paragraf.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
5. Sintak untuk membuat heading</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmSZn3-9K3xcpFaJsaVKMgnBPyosTiQmzteIpwEouSz4y-quedSMaC1I_0diMoQxHVdMMS2F9327VGEMpM2C3uCbUUr-mLhfZk9Ey0LPrePIT0WjB6Inj5WaaoVzgQWycTXWe-K_0V-w/s1600/heading.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="268" data-original-width="643" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmSZn3-9K3xcpFaJsaVKMgnBPyosTiQmzteIpwEouSz4y-quedSMaC1I_0diMoQxHVdMMS2F9327VGEMpM2C3uCbUUr-mLhfZk9Ey0LPrePIT0WjB6Inj5WaaoVzgQWycTXWe-K_0V-w/s640/heading.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
6. Sintak untuk membuat garis horizontal</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXES9wPaL4HH42scipw1vJatPOzDjU0LcdPRhUe87vzY6WkpfpisicrW8u1qYHOY8VSbJ8Z27OW1_-Kut5J4MdCj5yjfwrFbTASEkM8kQgYhBCcZwp1vyrgWOmoDWZ9XqPisvAfNT4nww/s1600/garis.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="520" data-original-width="643" height="516" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXES9wPaL4HH42scipw1vJatPOzDjU0LcdPRhUe87vzY6WkpfpisicrW8u1qYHOY8VSbJ8Z27OW1_-Kut5J4MdCj5yjfwrFbTASEkM8kQgYhBCcZwp1vyrgWOmoDWZ9XqPisvAfNT4nww/s640/garis.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
7. Sintak untuk membuat Text Formatting</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEHBkzDh8U5nL-V6ntb9vO5kAXe7ladHHnuKw24o7VhKTmIzgGBswOsXouCXAGHsdL6lVdji0E7Xeq7nLqx53d77H-i0H30u9QGORORZAB00k4SKi76YDMMeRYriqo1W0HyvH70TArZ4/s1600/forteks1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="555" data-original-width="643" height="552" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEHBkzDh8U5nL-V6ntb9vO5kAXe7ladHHnuKw24o7VhKTmIzgGBswOsXouCXAGHsdL6lVdji0E7Xeq7nLqx53d77H-i0H30u9QGORORZAB00k4SKi76YDMMeRYriqo1W0HyvH70TArZ4/s640/forteks1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqS1ZrBAeKaAg4Sql13DkifTuZX7vVVJnSKjUmGl7rlBperCU6rHSTni4WyP0NeMLQ134LnG_za0O7KZiSV_Nk7xWgyb_XN8zlkiFQTxKRwI1AqNXvx_ZPjZ5_vMUZOrkrjTfo9di3j8/s1600/forteks2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="372" data-original-width="646" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqS1ZrBAeKaAg4Sql13DkifTuZX7vVVJnSKjUmGl7rlBperCU6rHSTni4WyP0NeMLQ134LnG_za0O7KZiSV_Nk7xWgyb_XN8zlkiFQTxKRwI1AqNXvx_ZPjZ5_vMUZOrkrjTfo9di3j8/s640/forteks2.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
8. Sintak untuk membuat Div Tag</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ30cp8v_AUbkSc3eZeL2ZYWPE0YT6dW4CxQ2dS3wXFTSv_dW0-UEFkmdV9aRsAkDb4btzLoI0f1yqtBCEhcOeWfPbmZNlMEUU_e9XkULox5334PSSll2hqjuM2pHBLqFDLt3CS-xaMAc/s1600/divtag.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="325" data-original-width="645" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ30cp8v_AUbkSc3eZeL2ZYWPE0YT6dW4CxQ2dS3wXFTSv_dW0-UEFkmdV9aRsAkDb4btzLoI0f1yqtBCEhcOeWfPbmZNlMEUU_e9XkULox5334PSSll2hqjuM2pHBLqFDLt3CS-xaMAc/s640/divtag.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
9. Sintak untuk membuat Center Tag</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-WyJhlVYhwIj39eGaKbBfD8n3fqakSx65dJtEqUgwm1uME0TqKocIHw8zXe97Iy0kK6LuC64zJfFusKxWBxm2r38Z9Nhb2ibgcRH9HcWpuZwqFz_CnOdPP0vORhF-KL9A2r7NmNs_20/s1600/center.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="645" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-WyJhlVYhwIj39eGaKbBfD8n3fqakSx65dJtEqUgwm1uME0TqKocIHw8zXe97Iy0kK6LuC64zJfFusKxWBxm2r38Z9Nhb2ibgcRH9HcWpuZwqFz_CnOdPP0vORhF-KL9A2r7NmNs_20/s640/center.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
10. Sintak untuk membuat Text Box</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9C8atoAwpqIbQ-mUzQchrCEpeo5Cn4fwZxMj9e4erq2lyRPXxLvwX1CT3kqASlPYMuhIXxJwUKh0cDXpiCsWgG4KkOWsiNcoCIJ1aq2l4fg3MAzURIxW8CUU2PH4r8u2k47Cu5SpB_Y/s1600/textbox.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="182" data-original-width="642" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju9C8atoAwpqIbQ-mUzQchrCEpeo5Cn4fwZxMj9e4erq2lyRPXxLvwX1CT3kqASlPYMuhIXxJwUKh0cDXpiCsWgG4KkOWsiNcoCIJ1aq2l4fg3MAzURIxW8CUU2PH4r8u2k47Cu5SpB_Y/s640/textbox.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
11. Sintak untuk membuat Text Password</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-bWjiGoyhJYW0SPPGcxIYELeDOkEq20bQleAz93kv34EhOyC02w0I3VNrSeXMlBhSYCY1tg7ml7xGPjEJKfW3N5DKPtvfratl6dOeu5yNih-41Ju-6dp08qrgTKdxyGX7Z7kd_LE5R0/s1600/pass.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="642" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6-bWjiGoyhJYW0SPPGcxIYELeDOkEq20bQleAz93kv34EhOyC02w0I3VNrSeXMlBhSYCY1tg7ml7xGPjEJKfW3N5DKPtvfratl6dOeu5yNih-41Ju-6dp08qrgTKdxyGX7Z7kd_LE5R0/s640/pass.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
12. Sintak untuk membuat Input Button</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zZPhMmV_ZdZUFPXGKXgcDGGEgIWdtWvQAc6KoDUYBshdmJkVtc0nppFZ3VtAZAOgJOfI-ze-3S83p-tFsiFmgCcV68Argvs00eQedon6kKKnbB9K3VZHCFBvMfgKA8IK01kMgFuZEzQ/s1600/input+button.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="643" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zZPhMmV_ZdZUFPXGKXgcDGGEgIWdtWvQAc6KoDUYBshdmJkVtc0nppFZ3VtAZAOgJOfI-ze-3S83p-tFsiFmgCcV68Argvs00eQedon6kKKnbB9K3VZHCFBvMfgKA8IK01kMgFuZEzQ/s640/input+button.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
13. Sintak untuk membuat Radio Button</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5EogZp4VbJEAPkFBO_T69c6LgGBWWlDtO6lB_VBVoDd7XKxFipN40VQYZS_8PatMvBAOtyG9aDuCaJynu7OBMF3iSCNlco38k8pKzSofactOyaHCsfJeepz3amzZ3kathBsadHgiQFU/s1600/radiobutton.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="339" data-original-width="642" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5EogZp4VbJEAPkFBO_T69c6LgGBWWlDtO6lB_VBVoDd7XKxFipN40VQYZS_8PatMvBAOtyG9aDuCaJynu7OBMF3iSCNlco38k8pKzSofactOyaHCsfJeepz3amzZ3kathBsadHgiQFU/s640/radiobutton.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
14. Sintak untuk membuat Check Box</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cKOYSORaELnUzAtr_eooNPO2rdtTGPk7kOvWqVLxCrlzdk_fprUjR_9vjBqeERIfJ-tM2fU5CkbuqQwlSZUO2FD-x37xLoIee6six0BDimg5gGr5Ia3MatbWFffpE-9o6LllsTgA1jg/s1600/checkbox.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="337" data-original-width="642" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cKOYSORaELnUzAtr_eooNPO2rdtTGPk7kOvWqVLxCrlzdk_fprUjR_9vjBqeERIfJ-tM2fU5CkbuqQwlSZUO2FD-x37xLoIee6six0BDimg5gGr5Ia3MatbWFffpE-9o6LllsTgA1jg/s640/checkbox.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
15. Sintak untuk membuat Dropdown</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0u_WbPImIfuihs4YrwmjhTzWzVTPSZ0Mngf9lhV0bZwRW_4Plx2pgPpW8TkXGJk4NcsEv2RcqtpctJhoJ-oHkX05VWJau2pLnJs7wevyYSOA_FSN_xN5SRgS15AAnmgHbAXFzWAq-diI/s1600/dropdown.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="642" height="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0u_WbPImIfuihs4YrwmjhTzWzVTPSZ0Mngf9lhV0bZwRW_4Plx2pgPpW8TkXGJk4NcsEv2RcqtpctJhoJ-oHkX05VWJau2pLnJs7wevyYSOA_FSN_xN5SRgS15AAnmgHbAXFzWAq-diI/s640/dropdown.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
16. Sintak untuk membuat progress</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXaoEmMEf09KnDAzi753xljeHUJYz8u09hm7YPDxxvJyVu3UbioxlMRZC9JCtyf8zb3HXD-wqOWUqVAEPRtdrMaWR4YtLsizGTjL32m1yTKYzR0otd8z3VwGK5U3LCvqP1GkeA7nr8y4/s1600/progress.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="184" data-original-width="644" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXaoEmMEf09KnDAzi753xljeHUJYz8u09hm7YPDxxvJyVu3UbioxlMRZC9JCtyf8zb3HXD-wqOWUqVAEPRtdrMaWR4YtLsizGTjL32m1yTKYzR0otd8z3VwGK5U3LCvqP1GkeA7nr8y4/s640/progress.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Untuk mengetahui project lebih lengkapnya silakan <a href="https://drive.google.com/file/d/19itqDR96wRRquY7_A46zjTCD8YpF_s7C/view?usp=sharing" target="_blank">DOWNLOAD DISINI</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0tag:blogger.com,1999:blog-1704574876449492507.post-17490482585522754742017-11-15T14:37:00.001-08:002017-11-15T14:45:54.335-08:00[REVIEW] ASUS ZenBook UX410, Ultrabook Premium dengan Desain yang Menawan <div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_m4zRA4y7T9W7ZmbqDWMC5KVJUzd33DT_wM8JcEpib0CsMphWyfPtT6Xydz8ZHgAqn1I3uVQj_5b_LMmO9aSj9FStGfEYFGsfxdSNfokE28Eclyo0lg3srgZyQdaEILIEJYXTjqxLN4/s1600/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000218000.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_m4zRA4y7T9W7ZmbqDWMC5KVJUzd33DT_wM8JcEpib0CsMphWyfPtT6Xydz8ZHgAqn1I3uVQj_5b_LMmO9aSj9FStGfEYFGsfxdSNfokE28Eclyo0lg3srgZyQdaEILIEJYXTjqxLN4/s400/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000218000.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=rFUxnpoKUc4</span></td></tr>
</tbody></table>
<div class="MsoNormal" style="text-align: justify;">
<span style="background: white; color: #1d2129; font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="background: white; color: #1d2129; font-family: inherit; font-size: 12.0pt; line-height: 107%;">Belum lama ini yakni pada pertengahan tahun 2017, untuk kesekian kali
ASUS kembali memperkenalkan seri Ultrabook Premium terbaru mereka yang bertajuk
<b>ASUS ZenBook UX410</b>. Seri Ultrabook
ini secara khusus ditujukan kepada ZenCreator atau pengguna kreatif yang
membutuhkan spesifikasi hardware yang mumpuni untuk menunjang karya-karya
kreatif mereka. Dengan hadirnya ZenBook UX410 ini, ASUS semakin tajam
menancapkan kuku di pasar Ultrabook Premium dengan harga yang dapat bersaing
dengan vendor lain. Kombinasi spesifikasi yang gahar dan desain body yang tipis
nan elegan tentunya akan membuat semua orang sulit untuk menolak jika diberi
kesempatan untuk memiliki notebook terbaru dari ASUS ini. <o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Oke... Langsung aja kita bahas satu per satu keunggulan dari <span style="background: white; color: #1d2129;">ASUS
ZenBook UX410.</span></span></div>
<div class="MsoNormal" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18.0pt;">
<!--[endif]--><b><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"> Desain Cantik Menawan nan Elegan<o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18.0pt;">
<b><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoListParagraphCxSpFirst" style="text-align: center; text-indent: -18pt;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijPpi_JI3qXDdVlTqsZrDVpcd_OGK97BrFKhX3A_MUlN8LbIdDWzJ7JFIRmi0tzMwjPc9_KgG_Rc7RDOjZU3bZSs4Ke5cZxykCzaKVrR6AOSqUnFUMSj6q8PPcrEgnQa7-xmGNt_nmtF8/s1600/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000016383.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto; text-indent: 0px;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijPpi_JI3qXDdVlTqsZrDVpcd_OGK97BrFKhX3A_MUlN8LbIdDWzJ7JFIRmi0tzMwjPc9_KgG_Rc7RDOjZU3bZSs4Ke5cZxykCzaKVrR6AOSqUnFUMSj6q8PPcrEgnQa7-xmGNt_nmtF8/s400/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000016383.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=sWR3nn-c6SU&t=</span></td></tr>
</tbody></table>
</div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18.0pt;">
<b><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="font-family: inherit;"><span style="font-size: 12pt; text-align: justify; text-indent: 36pt;">Dari
segi desain, </span><span style="background: white; color: #1d2129; font-size: 12pt; text-align: justify; text-indent: 36pt;">ASUS ZenBook UX410
dikemas nampak cantik nan elegan. Tak dapat dipungkiri bahwa daya tarik yang
paling mencolok dari seri ASUS ZenBook UX410 ini terletak pada desain
cantiknya. Desain yang amat tipis dan ringan (ketebalan hanya <b>1,895cm</b> dan bobot
kurang dari <b>1,5Kg</b>) dipadukan dengan bahan alumunium solid serta finishing
spun-metal dijamin dapat mencuri perhatian semua orang yang melihat notebook
ini. Dengan desain sangat stylish, tipis dan ringan, sudah bisa dipastikan
bahwa ASUS ZenBook UX410 nyaman jika dibawa bepergian kemana saja. Selain itu notebook
ini dibekali dengan ukuran display 14-inci dan bezel yang tipis yang dapat memberikan
ultra kenyamanan bagi penggunanya karena menjanjikan sudut pandang yang lebih
lebar.</span></span></div>
<div class="separator" style="clear: both; text-align: justify;">
<span style="background: white; color: #1d2129; font-family: inherit; font-size: 12pt; text-align: justify; text-indent: 36pt;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKDx5uFkmHht8wspEzGAS8XUv0X4r9DcAQ543KXdbwjuHo5ZVzDodB1-NFGKxi_rma3JSsFI3iWD-189T6FusnPdv3kdBfHBh_nJX8UYLF3bFxpLzMWqUuSvv0lNQD8TG0_q-_REHFFk/s1600/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000123480.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKDx5uFkmHht8wspEzGAS8XUv0X4r9DcAQ543KXdbwjuHo5ZVzDodB1-NFGKxi_rma3JSsFI3iWD-189T6FusnPdv3kdBfHBh_nJX8UYLF3bFxpLzMWqUuSvv0lNQD8TG0_q-_REHFFk/s400/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000123480.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=NFzo3A35IDo</span></td></tr>
</tbody></table>
<span style="font-family: inherit; font-size: 12pt;">Desain ultra ramping dan ultra tipis
dipadukan dengan balutan finishing spun - metal yang unik, serta motif lingkaran
yang terinsipirasi dari zen, memberikan kesan tangguh dan durabilitas yang
tinggi untuk ZenBook UX410 ini. Ditambah dengan pilihan warna <b>Quartz Grey</b> dan
<b>Rose Gold</b> tentunya membuat notebook ini semakin nampak cantik dan mewah.</span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><b style="text-indent: -18pt;"><span style="font-size: 12.0pt; line-height: 107%;">Performa yang Powerfull Tanpa
Khawatir Panas</span></b><span style="text-align: left;"> </span></span><br />
<span style="font-family: inherit; text-align: left;"><br /></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6BX5jxTMpBrPe2dgTFuQMrR4XYPjMOyzP-YJSSbUWiGdYqDjIryrz-KOdzfnXCsavFC9GpC2MQwTF0l6e2aJz41GtRJHrG9FllSeQ5JN3ZhAhftUIK8YlaFiehkUmvT5QTklAY8biE4/s1600/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000014360.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6BX5jxTMpBrPe2dgTFuQMrR4XYPjMOyzP-YJSSbUWiGdYqDjIryrz-KOdzfnXCsavFC9GpC2MQwTF0l6e2aJz41GtRJHrG9FllSeQ5JN3ZhAhftUIK8YlaFiehkUmvT5QTklAY8biE4/s400/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000014360.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=rFUxnpoKUc4</span></td></tr>
</tbody></table>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify; text-indent: 36.0pt;">
<span style="font-family: inherit;"><span style="background: white; color: #1d2129; font-size: 12.0pt; line-height: 107%;"><br />ASUS ZenBook UX410 dibekali dengan prosesor <b>Intel Core i7-7500U</b> generasi ke tujuh
Kaby Lake yang saat ini merupakan teknologi paling canggih dari Intel. Selain
itu pula pada </span><span style="background-color: white; color: #1d2129; font-size: 12pt; text-indent: 36pt;">notebook ini disematkan kartu grafis </span><b style="color: #1d2129; font-size: 12pt; text-indent: 36pt;">NVIDIA GeForce 940MX 2GB</b><span style="background-color: white; color: #1d2129; font-size: 12pt; text-indent: 36pt;"> VRAM bertipe GDDR3 untuk menyuguhkan grafik
yang halus dan tajam. Kombinasi kedua chip ini ditambah dengan <b>RAM berkapasitas
8GB</b> ber-slot DDR4 dapat menghasilkan kinerja yang tangguh dan handal terutama
jika digunakan untuk kebutuhan yang menuntut kinerja prosesor dan GPU misalnya
untuk kegiatan editing dan rendering video. </span></span><span style="background-color: white; color: #1d2129; font-family: inherit; font-size: 12pt; text-indent: 36pt;">RAM 8 GB masih kurang? Tenang aja
di ZenBook UX410 terdapat 2 slot RAM, sehingga dengan mudah untuk diupgrade.</span><br />
<span style="background-color: white; color: #1d2129; font-size: 12pt; text-indent: 36pt;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Lalu dengan spesifikasi tersebut
apakah akan membuat <span style="background: white; color: #1d2129;">ZenBook UX410
ini menjadi mudah panas? Jawabannya adalah tidak. Kenapa tidak? Karena ZenBook UX410
dilengkapi dengan teknologi <b>IceCool</b>
yang berguna untuk mengatur suhu notebook supaya tetap berada disekitar suhu
ruangan yakni antara 28 derajat sampai 35 derajat celsius. Adanya teknologi
IceCool ini akan memastikan pengguna merasa tetap nyaman karena tidak akan
terganggu dengan panas yang ditimbulkan. <o:p></o:p></span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-indent: -18pt;"><span style="background: white; color: #1d2129; font-family: inherit; font-size: 12.0pt; line-height: 107%;">Menggunakan Prosessor Intel Core i7-7500U
Generasi Terbaru</span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-indent: -18pt;"><span style="background: white; color: #1d2129; font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGdjYJ3T4StlvauX44ieSte9jDAiOIUdQStEoHHmUkJ38xdPEwv0hmxVC_8WQqipdpSxF3r0Y8d1dd290s0FWnVQeX-QiB7-oPY2uN5XmnsDco3qRDajGPTPUkBjzlJ35Zm3HgtKt5e0/s1600/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000180360.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto; text-align: center;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGdjYJ3T4StlvauX44ieSte9jDAiOIUdQStEoHHmUkJ38xdPEwv0hmxVC_8WQqipdpSxF3r0Y8d1dd290s0FWnVQeX-QiB7-oPY2uN5XmnsDco3qRDajGPTPUkBjzlJ35Zm3HgtKt5e0/s400/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000180360.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=NFzo3A35IDo</span></td></tr>
</tbody></table>
</div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><span style="color: #1d2129;"><span style="background-color: white;">ASUS ZenBook UX410 dibekali dengan prosesor <b>Intel Core i7-7500U Kaby Lake </b>yang saat ini merupakan prosesor yang sangat mumpuni untuk sektor prosesor Intel kelas U-Series. Huruf “U” menandakan tipe prosesor ini memiliki nilai TDP<b> 15 Watt</b> yang diperuntukkan khusus bagi perangkat komputasi hemat daya. Intel Core i7-7500U merupakan prosesor dual core tetapi berkat implementasi teknologi <b>Hyper-Threading</b> membuatnya siap menangani empat proses komputasi sekaligus secara bersamaan. Intel Core i7-7500U terdapat fitur <b>Intel Turbo Boost Technology 2.0</b> yang dapat meningkatkan kecepatan prosesor yang awalnya 2.7 GHz menjadi 3.5 GHz dalam kondisi tertentu. Salain itu Intel Core i7-7500U dibekali dengan IGP (</span>Integrated Graphics Processors)</span><span style="background-color: white; color: #1d2129;"> kelas atas yakni </span><b style="color: #1d2129;">Iris Plus Graphics 620</b><span style="background-color: white; color: #1d2129;">. Iris Plus Graphics merupakan teknologi terbaru Intel di sektor grafis. Teknologi grafis ini menghadirkan resolusi gambar yang tajam hingga resolusi <b>4K Ultra HD. </b>Perpaduan Intel Core i7-7500U + Iris Plus Graphics 620 tentunya akan menghasilkan kinerja yang lebih handal dan tangguh.</span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><span style="font-family: inherit;"><br /></span>
</span><br />
<div class="MsoListParagraphCxSpFirst">
<span style="font-family: inherit;"><b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;">Kapasitas
Penyimpanan Besar</span></b><b><span style="font-size: 12pt; line-height: 107%;"><o:p></o:p></span></b></span></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IRwvU_mPezQ0ofreeY3T8KTdi7hetEF7GoNN41UyzslXhO7atoRUCtwnoe_2GquMwJIqSfujkH99NWYH0D_GJnekR5J91qAFFKktLddiV5717p-uInmS4L-k0xsWthkH5Qxq4vCQoNs/s1600/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000213700.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IRwvU_mPezQ0ofreeY3T8KTdi7hetEF7GoNN41UyzslXhO7atoRUCtwnoe_2GquMwJIqSfujkH99NWYH0D_GJnekR5J91qAFFKktLddiV5717p-uInmS4L-k0xsWthkH5Qxq4vCQoNs/s400/ASUS+ZenBook+UX410+Review+Indonesia-+Rp15+Jutaan+Bisa+Apa-+-+YouTube.MP4_000213700.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=NFzo3A35IDo</span></td></tr>
</tbody></table>
<div class="MsoListParagraphCxSpMiddle">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">ZenBook UX410 dilengkapi dengan kapasitas
penyimpanan sebesar <b>1TB HDD</b> dikombinasikan
dengan <b>128GB SSD</b>. Perpaduan kedua
penyimpanan ini sangat cocok untuk menjamin performa ZenBook UX410. Sebagai
penyimpanan utama, ASUS menyediakan storage berbasis <b>SATA3 M.2 SSD 128 GB</b>.
Penggunaan SSD bertipe SATA3 M.2 ini menghadirkan performa yang jauh lebih
tinggi hingga 15 kali lebih cepat dibanding SSD biasa, khususnya saat pengguna
sedang menjalankan sistem operasi, aplikasi, membuka ataupun menyimpan data. Jadi
dengan adanya SATA3 M.2 SSD 128 GB sangat cocok dijadikan direktori sistem
operasi sehingga kinerja ZenBook UX410 dapat berjalan dengan optimal. Untuk
penyimpanan sekunder disediakan 1 TB Hardisk dengan kecepatan cakram 5400RPM
berjenis SATA. Dengan kapasitas sebesar ini pengguna dapat menyimpan berbagai
file yang berukuran besar seperti film dan game dengan leluasa.</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Kapasitas penyimpanan masih kurang? Jangan
khawatir karena HDD dan SSD di ZenBook UX410 dapat diupgrade dengan mudah
sesuai kebutuhan penggunanya.</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Layar
Full HD yang Memanjakan Mata Dengan View Angle yang Luas<o:p></o:p></span></span></b></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZGi8iQpZWbQcOfETXsCki7PeOc7dmZ2cbnDWVmhM_bbq5s3yv245myIDLYqm3yWf89FnudZfsBGKH2ki8Dm5vH72cE6Zaxr1mujWXMNEs9T8E0AR1Fkh8yuTDjV-Gc5yyN8GotmnjHM/s1600/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000394920.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZGi8iQpZWbQcOfETXsCki7PeOc7dmZ2cbnDWVmhM_bbq5s3yv245myIDLYqm3yWf89FnudZfsBGKH2ki8Dm5vH72cE6Zaxr1mujWXMNEs9T8E0AR1Fkh8yuTDjV-Gc5yyN8GotmnjHM/s400/Review+Asus+Zenbook+UX410UQ+Indonesia+-+YouTube.MP4_000394920.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=rFUxnpoKUc4</span></td></tr>
</tbody></table>
<div class="MsoListParagraphCxSpMiddle">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Dengan ZenBook UX410, ASUS berhasil melakukan
terobosan menakjubkan yakni memasukkan layar 14-inci dengan tampilan Full HD kedalam
notebook yang besarnya tidak lebih dari 13-inci. Kuncinya adalah di <b>bezel yang ultra tipis</b> berukuran hanya
<b>6mm</b>. Dengan bezel yang tipis tidak hanya mampu memasangkan layar yang lebih
besar, tetapi juga memberikan pengalaman pengguna akan tampilan layar yang tanpa
gangguan saat sedang browsing, melihat foto, maupun menonton film. <o:p></o:p></span></span></div>
<div class="MsoListParagraphCxSpMiddle">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">
</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Jika notebook dengan resolusi layar HD 1366 x
768 pixel saja sudah bagus maka dengan ZenBook UX410 yang mempunyai resolusi
layar <b>Full HD 1920 x 1080</b> dijamin
dapat membuat siapa pun yang melihatnya akan terpukau. Layar 14-inci yang berupa panel <b>NTSC non-glare</b> dapat menghasilkan
warna yang sangat bagus dengan tingkat akurasi yang tinggi dan lebih hidup
daripada tampilan standar. Teknologi layar non-glare membuat layar akan sangat
sedikit memantulkan cahaya sehingga pengguna tetap bisa melihat dengan jelas
meskipun digunakan untuk beraktifitas diluar ruangan.</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">ASUS
Eye Care yang Mampu Melindungi Mata<o:p></o:p></span></span></b></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></b></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">
</span></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGASJdkkCk3DKT6ZOjBzPhODMY6GCvSj3N4bDoVS52YuvsKrhMkOxy2JXhrKlmdvnJ9ucN3KGteR3vouBaOyjEpA1yc8zKrb2gatvfQ4FBXMGZo1uycbfQlSXV4TFEoXPj-UlCVCLRms/s1600/asus-t300-splendid-display-software.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="435" data-original-width="675" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGASJdkkCk3DKT6ZOjBzPhODMY6GCvSj3N4bDoVS52YuvsKrhMkOxy2JXhrKlmdvnJ9ucN3KGteR3vouBaOyjEpA1yc8zKrb2gatvfQ4FBXMGZo1uycbfQlSXV4TFEoXPj-UlCVCLRms/s400/asus-t300-splendid-display-software.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : google image</span></td></tr>
</tbody></table>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Sekarang kita tak perlu lagi khawatir
berlama-lama di depan layar notebook. Dengan fitur <b>ASUS Eye Care</b> yang terdapat di ZenBook UX410 akan membuat mata
pengguna terlindungi karena dengan adanya mode ASUS Eye Care dapat mengurangi
emisi lampu biru hingga 30% sehingga mata akan selalu terlindungi saat mode ini
diaktifkan. Selain ASUS Eye Care terdapat 3 mode lainnya yaitu <b>Mode Normal</b> memberikan
pengaturan warna yang sudah dioptimalkan oleh pabrik, <b>Mode Vivid</b> dengan pintar
mengatur keadaan layar agar memberikan gambar yang benar-benar tampil hidup dan
nyata, tanpa membuat warnanya terlihat seperti dibuat-buat. <b>Mode Manual</b> yang
memberikan kebebasan penggunanya untuk mengatur control terhadap pengaturan temperature
warna, jadi pengguna bisa mengatur layar sesuai kebutuhannya. Ke empat mode ini
dikemas dalam teknologi ASUS Splendid dan hebatnya lagi mode-mode ini dapat
dioperasikan dengan hanya sekali klik saja,</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpFirst">
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Pengalaman
Suara yang Hebat dengan Speaker Harman/Kardon<o:p></o:p></span></span></b><br />
<b><span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span></b></div>
<div class="MsoListParagraphCxSpFirst">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3h5LAy6ev5QuWrkyZcm2AdWqnfuOYMkagsfRR7IMj5wZRJ6ReoxIQeOKW67T3BhQ3tsNDkueykLp7AQgcFFXXmt0I26fep7v-HsQ1uLLZhNX-iMPk91YJw0hM2xcmAL6lWaAZAzJcxSM/s1600/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000291157.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3h5LAy6ev5QuWrkyZcm2AdWqnfuOYMkagsfRR7IMj5wZRJ6ReoxIQeOKW67T3BhQ3tsNDkueykLp7AQgcFFXXmt0I26fep7v-HsQ1uLLZhNX-iMPk91YJw0hM2xcmAL6lWaAZAzJcxSM/s400/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000291157.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=sWR3nn-c6SU&t=</span></td></tr>
</tbody></table>
</div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">
</span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="background: white; color: #1d2129; font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Ada yang kurang rasanya bila Ultrabook Premium
hanya dibekali audio dengan kualitas yang standar cenderung biasa-biasa aja.
Namun hal itu tidak berlaku di ASUS ZenBook UX410. Notebook ini dibekali dengan
speaker besutan dari <b>Harman/Kardon</b>
untuk memberikan kualitas audio yang terdepan. Harman/Kardon memberikan jaminan
akan kualitas audio yang bagus dan diatas rata-rata. Dengan hadirnya speaker
ini, memastikan bahwa ZenBook UX410 akan memberikan pengalaman suara terhebat
bagi penggunanya.<o:p></o:p></span></span></div>
</div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-align: center; text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b>
<b style="text-align: center; text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-align: center; text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Layout Keyboard dan Touchpad yang
Nyaman</span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAnXbHnYrJ37y0t7qGCsv_vkHQdXYDibBJKqS-dFD4F1GaTH8e8t5cXgf4a350WPd7pTJgwjBdJF-mOwfUhyd1eTR72hfSQOT995wy7gYpIXI47CHXi6zyToTRqVsRAl3ah84pVjdHxE/s1600/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000140473.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAnXbHnYrJ37y0t7qGCsv_vkHQdXYDibBJKqS-dFD4F1GaTH8e8t5cXgf4a350WPd7pTJgwjBdJF-mOwfUhyd1eTR72hfSQOT995wy7gYpIXI47CHXi6zyToTRqVsRAl3ah84pVjdHxE/s400/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000140473.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=sWR3nn-c6SU&t=</span></td></tr>
</tbody></table>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Di
<span style="background: white; color: #1d2129;">ASUS ZenBook UX410 memiliki desain
keyboard yang ergonomis dan mempunyai jarak key travel yang sangat ideal
sehingga sangat nyaman ketika dipakai untuk kegiatan office. </span></span><br />
<span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129; font-family: inherit;"><br /></span></span>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6QcMFtNGqrRN3KNJ9N2pGNnB5hyphenhyphen2KvjSOwr0Z_0Ps3AHK3fAZ_ir_RT0jmH6gWBu70vvX5rv8w1LEk6kwoNYHWTN-etUAydamcFp8V2znNno6ZR7ol0WdKsKdKrMpYI2tTj60Kb3FnQ/s1600/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000191958.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf6QcMFtNGqrRN3KNJ9N2pGNnB5hyphenhyphen2KvjSOwr0Z_0Ps3AHK3fAZ_ir_RT0jmH6gWBu70vvX5rv8w1LEk6kwoNYHWTN-etUAydamcFp8V2znNno6ZR7ol0WdKsKdKrMpYI2tTj60Kb3FnQ/s400/Review+Asus+Zenbook+UX410U+-+LAPTOP+SERBA+BISA-+-+YouTube.MP4_000191958.jpg" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit; font-size: xx-small;">source : https://www.youtube.com/watch?v=sWR3nn-c6SU&t=</span></td></tr>
</tbody></table>
<span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129; font-family: inherit;">Menariknya lagi,
keyboard ini memiliki <b>backlit</b> dengan
3 tingkat keterangan yang bisa diatur penggunanya. Dengan fitur ini mau ngetik
di tempat yang gelap pun tidak akan menjadi masalah. ZenBook UX410 akan semakin
nyaman berkat adanya touchpad yang dilapisi kaca dengan penempatan yang
presisi. Touchpad notebook ini menggunakan teknologi yang biasa diterapkan pada
layar sentuh smartphone, sehingga dapat memberikan sensitifitas tinggi dan
akurasi yang sangat akurat. Touchpad ini sudah support <b>Windows Precision Touchpad</b>, tentunya dapat menangkap segala gesture
dengan cepat dan akurat.</span></span><br />
<span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129; font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<b style="text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Daya Tahan Baterai yang
Efisien</span></b><br />
<b style="text-indent: -18pt;"><span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;"><br /></span></b></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<span style="font-family: inherit; font-size: 12.0pt; line-height: 107%;">Dari
segi daya tahan baterai, <span style="background: white; color: #1d2129;">ASUS ZenBook
UX410 termasuk ke dalam salah satu notebook yang hemat dalam efisiensi
penggunaan daya. Untuk kegiatan standar misal hanya untuk kegiatas office atau
browsing notebook ini mampu bertahan 7 sampai 8 jam. Sedangkan ketika dipakai
untuk kegiatan yang menuntut ekstra kerja sistem dan hardware semisal untuk
bermain game 3D atau edit video, daya tahan baterai dapat bertahan hingga 5 jam
pemakaian. Sehingga ketika dipakai beraktivitas diluar semisal nongkrong di kafe, kita tidak perlu
repot mencari colokkan listrik.</span></span><br />
<span style="font-family: inherit;"><span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129;"><br /></span></span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: inherit; margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="90" data-original-width="728" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIWL9WLzE1fhCpQQmJwWop3Cepg0ka0hQISJa7_Meljeey9yRDajGmvdNgJTG0CGwBdUv2H9dlp-ER2pKi9CL8ZUW08fuez1bmaaaK3Yrg-85vSO6Ez9VRyu7iLQxl9mkV8vRLmT3jnLU/s640/A405-ASUSINTELNO1+%25281%2529.jpg" width="640" /></span></div>
<span style="font-family: inherit;"><span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129;"><br /></span></span>
<span style="background-color: white; color: #1d2129; font-size: 12pt;"><span style="font-family: inherit;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: white; color: #1d2129; font-size: 12pt;">Nah itulah keunggulan yang sekaligus menjadi daya tarik untuk membeli ASUS ZenBook UX410. Untuk build quality
sudah tidak dapat diragukan lagi karena ASUS selalu mendesain segala produknya
dengan bagus dan terpercaya. Selain itu ZenBook UX410 juga mendapat </span><b style="color: #1d2129; font-size: 12pt;">Garansi Resmi 2 Tahun dari ASUS.</b></span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; color: #1d2129; font-size: 12pt;"><span style="font-family: inherit;"><br /></span></span>
<span style="background-color: white; color: #1d2129; font-size: 12pt;"><span style="font-family: inherit;"><b>Berikut ini adalah spesifikasi lengkap ASUS ZenBook
UX410</b>.</span></span></span><br />
<span style="background-color: white; color: #1d2129; font-size: 12pt;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<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/AVvXsEh2lQQRE8M3_6kvDOCFCvubZWIul6I-skGt-3Oh1eb-tScSHQKAeqtPOV5Yi5PW-tOetytC-SBqBg_tqjQ99JqpSR6IygyG7-a8pF2iXI7yIGeW5auEdHoo7HYFkiW5UM4zhf1SBCJJouM/s1600/asus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="725" data-original-width="868" height="534" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lQQRE8M3_6kvDOCFCvubZWIul6I-skGt-3Oh1eb-tScSHQKAeqtPOV5Yi5PW-tOetytC-SBqBg_tqjQ99JqpSR6IygyG7-a8pF2iXI7yIGeW5auEdHoo7HYFkiW5UM4zhf1SBCJJouM/s640/asus.png" width="640" /></span></a></div>
</div>
<div class="MsoListParagraphCxSpMiddle" style="text-align: justify;">
<div class="MsoListParagraphCxSpFirst">
<span style="font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><b>Well...
Kenapa Aku sangat ingin memiliki ASUS </b><span style="background: white; color: #1d2129;"><b>ZenBook UX410?</b> Alasannya cukup simpel karena selama ini Aku belum pernah
memiliki notebook dengan spesifikasi yang high end. Dibekali dengan spesifikasi hardware yang mumpuni serta desain yang sangat stylish plus elegan tentunya akan membuat semua orang
mudah untuk berkata iya jika diberi kesempatan memiliki Ultrabook Premium
buatan ASUS ini. Dengan spesifikasi highend tentunya dapat menunjang
aktivitasku sebagai mahasiswa Teknik Informatika, misalnya untuk ngoding/membuat
program dengan aplikasi yang menuntut spesifikasi hardware yang tinggi. Kebetulan
laptop jadul yang Aku miliki sudah sangat kewalahan untuk menunjang aktivitas berat seperti itu.
Untuk sekedar multitasking ringan seperti ngetik tugas sambil dengerin musik
plus browsing saja kadang sering not responding apalagi untuk kegiatan berat
macam rendering video ataupun saat membuat aplikasi.<o:p></o:p></span></span></span></div>
<div class="MsoListParagraphCxSpMiddle">
<span style="font-family: inherit;"><span style="font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;"><br /></span></span>
<span style="font-size: 12pt; line-height: 107%;"><span style="font-family: inherit;">Kebetulan
sekitar 2 semester lagi Aku akan mulai menyusun tugas akhir. Dengan laptop yang
saya miliki saat ini tentu kinerja dan performanya sudah tidak bisa diharapkan lagi. Jika
Aku bisa memiliki ASUS <span style="background: white; color: #1d2129;">ZenBook UX410
otomatis bisa membuat pikiranku jadi lega karena dengan performa si ZenBook UX410
ini mau dipakai untuk kegiatan berat sekalipun dapat dilibas tanpa ngelag dan
panas. Dan yang paling penting, Aku paling suka bepergian sambil membawa laptop
kemana saja. Dengan ZenBook UX410 yang mempunyai tingkat mobilitas tinggi, baterai
yang awet dan bobot yang ringan tentunya sangat mudah untuk Aku bawa kemana
saja tanpa khawatir punggung jadi pegal-pegal. So... Aku sangat berharap bisa
mewujudkan impian saya untuk memiliki Notebook kece dengan spesifikasi highend
dalam wujud si </span>ASUS <span style="background: white; color: #1d2129;">ZenBook
UX410 ini.</span></span></span></span></div>
<div class="MsoListParagraphCxSpLast">
<span style="font-family: inherit;"><br /></span></div>
</div>
<div class="MsoListParagraphCxSpLast" style="text-align: justify;">
<span style="font-family: inherit;"><span style="font-family: inherit;">
</span>
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIWL9WLzE1fhCpQQmJwWop3Cepg0ka0hQISJa7_Meljeey9yRDajGmvdNgJTG0CGwBdUv2H9dlp-ER2pKi9CL8ZUW08fuez1bmaaaK3Yrg-85vSO6Ez9VRyu7iLQxl9mkV8vRLmT3jnLU/s1600/A405-ASUSINTELNO1+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" data-original-height="90" data-original-width="728" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIWL9WLzE1fhCpQQmJwWop3Cepg0ka0hQISJa7_Meljeey9yRDajGmvdNgJTG0CGwBdUv2H9dlp-ER2pKi9CL8ZUW08fuez1bmaaaK3Yrg-85vSO6Ez9VRyu7iLQxl9mkV8vRLmT3jnLU/s640/A405-ASUSINTELNO1+%25281%2529.jpg" width="640" /></span></a></div>
<span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129; font-family: inherit;"><br /></span></span></div>
<div class="MsoListParagraphCxSpLast" style="text-align: justify;">
<span style="font-size: 12.0pt; line-height: 107%;"><span style="background: white; color: #1d2129; font-family: inherit;"><span style="font-size: 17px; text-align: left; white-space: pre-wrap;"> </span><a class="_58cn" data-ft="{"tn":"*N","type":104}" href="https://web.facebook.com/hashtag/asusxintel?source=note" style="color: #365899; cursor: pointer; font-size: 17px; text-align: left; white-space: pre-wrap;" target="_blank">#ASUSxIntel</a><span style="font-size: 17px; text-align: left; white-space: pre-wrap;"> </span><a class="_58cn" data-ft="{"tn":"*N","type":104}" href="https://web.facebook.com/hashtag/asuslaptopku?source=note" style="color: #365899; cursor: pointer; font-size: 17px; text-align: left; white-space: pre-wrap;" target="_blank">#ASUSLaptopKu</a><span style="font-size: 17px; text-align: left; white-space: pre-wrap;"> </span><a class="_58cn" data-ft="{"tn":"*N","type":104}" href="https://web.facebook.com/hashtag/asusaja?source=note" style="color: #365899; cursor: pointer; font-size: 17px; text-align: left; white-space: pre-wrap;" target="_blank">#ASUSAja</a><span style="font-size: 17px; text-align: left; white-space: pre-wrap;"> </span><a class="_58cn" data-ft="{"tn":"*N","type":104}" href="https://web.facebook.com/hashtag/intel?source=note" style="color: #365899; cursor: pointer; font-size: 17px; text-align: left; white-space: pre-wrap;" target="_blank">#Intel</a></span></span></div>
</div>
Alexhttp://www.blogger.com/profile/09857803449164470104noreply@blogger.com0