pemrograman web - pembuatan html
Post on 12-Jun-2015
205 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTMLPengembangan Web
Edwin Lunando
edwin@kuliahkita.com
Struktur HTML1. Diawali dengan DTD dan informasi mengenai halaman tersebut
yang dibungkus dengan tag meta dan style. Style diletakkan pertama supaya ketika halaman situs di-load, maka akan mengikuti cara pendefinisian yang telah ditetapkan
2. Header yang merupakan bagian yang mendeskripsikan <body> seperti judul halaman, logo, navigasi situs yang terstruktur, dll.
3. Body atau isi utama dari halaman situs4. Footer yang berisi deskripsi tambahan dari situs, bisa berupa
sitemap, copyright, kontak, dll5. Script yang berisi aksi-aksi terhadap elemen HTML. Script
diletakkan terakhir karena untuk mengurangi waktu load halaman utama situs.
Struktur HTMLUmumnya, struktur umum HTML adalah sebagai berikut
<html>
<head><meta> … </meta> (deskripsi)<meta> … </meta> (deskripsi)<link> … </link> (link menuju style)
</head><body><div> … </div> → header
… → konten
<div> … </div> → footer<script> … <script><script> … <script>
</body>
</html>
HTML ElementElemen ini diawali dan diakhiri tag yang akan diurai menjadi document object model (DOM) dan ditampilkan.
Dalam penulisan elemen dari HTML, pastikan menggunakan huruf kecil (lowercase).Contoh:
● <div></div>● <p></p>● <span></span>
Tag HTML UmumHeading : untuk menyatakan judul, terdiri dari heading 1-6
● <h1></h1>, <h2></h2>, … , <h6></h6>● h1 menyatakan judul utama, h2 sub-judul, dst
Text Section (paragraf) : membungkus konten berupa paragraf● <p>Saya ingin belajar di KuliahKita. Meskipun internet kurang
memadai, tetap tidak menciutkan semangat belajar Saya</p>
List : dibagi menjadi 2 yaitu ordered list (<ol></ol>) dan unordered list (<ul></ul>). Untuk setiap poin dari list, dinyatakan dengan <li> diikuti kontennya.
Contoh List: Hasil:
<ol>
<li>Mobil</li>
<ol>
<li>Lamborghini</li>
<li>Ferrari</li>
<li>Esemka</li>
</ol>
<li>Motor</li>
<ul>
<li>Honda</li>
<li>Yamaha</li>
<li>Beijing</li>
</ul>
<li>Kapal</li>
</ol>
Character Style● <b>bold</b>● <i>italic</i>● <u>underlined</u>● <sub>subscript</sub>● <sup>superscript</sup>● <small>smaller text</small>● <big>bigger text</big>● <strike>strike through<.strike>● <em>emphasized</em>● <strong>strongly emphasized</strong>● <code>code</code>● <cite>citation</cite>● <abbr title=”World Wrestling Federation”>WWF</abbr>
Hypertext links ini yang berfungsi sebagai navigasi antar halaman dalam sebuah website.
Hypertext links dibagi 2:● Link ke URL absolut
<a href=”http://kuliahkita.com/kelas/pengembangan-web/”>Kelas Pengembangan Web</a>
● Link ke URL relatif<a href=”pengembangan-web”>Kelas Pengembangan Web</a>
Hypertext Links
TabelTabel dapat terdiri dari 3 bagian:● Header (<thead>)● Body (<tbody>)● Footer (<tfoot>)
○ Header dan Footer (opsional)
Tabel juga bisa diberi judul dengan <caption>
Untuk tiap baris tabel harus dibungkus dengan row (<tr>).Untuk tiap kolom dapat menggunakan <td> atau <th> (untuk judul)
Contoh table
<table>
<caption>Player List</caption>
<thead>
<tr><th>Player</th><th>Job</th></tr>
</thead>
<tbody>
<tr><td>Arthas</td><td>Paladin</td></tr>
<tr><td>Levi Ackerman</td><td>Captain</td></tr>
<tr><td>Cloud Strife</td><td>Soldier</td></tr>
<tr><td>Arthuria Pendragon</td><td>Knight</td></tr>
</tbody>
</table>
Multimedia● gambar :
<img src=”url” alt=”text”>
● suara: (HTML5)<audio controls>
<source src=”url” type=”type/extension”>
Browser anda tidak mendukung
</audio>
● video: (HTML5)<video width="x" height="y" controls>
<source src="url" type="video/extension">
Browser anda tidak mendukung
</video>
IframeIframe (atau HTML inline frame element) adalah:sebuah container fleksibel yang dapat menempelkan (embed) halaman HTML lain ke halaman yang terdapat elemen tersebut
Contoh: ● <iframe width="400" height="215" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=es-419&
geocode=&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&
t=h&ie=UTF8&hq=&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,
-58.381593&output=embed">
</iframe>
● <iframe src="http://www.twitch.tv"></iframe>
top related