Pemrograman Web - Pembuatan HTML

HTML
Pengembangan Web
Edwin Lunando
edwin@kuliahkita.com

Struktur HTML
1. 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 situs
4. Footer yang berisi deskripsi tambahan dari situs, bisa berupa
sitemap, copyright, kontak, dll
5. Script yang berisi aksi-aksi terhadap elemen HTML. Script
diletakkan terakhir karena untuk mengurangi waktu load halaman
utama situs.

Struktur HTML
Umumnya, 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 Element
Elemen 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 Umum
Heading : 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
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>

Tabel
Tabel 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>

Iframe
Iframe (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>

Pemrograman Web - Pembuatan HTML

More Related Content

Viewers also liked

Similar to Pemrograman Web - Pembuatan HTML

More from KuliahKita

Pemrograman Web - Pembuatan HTML