Pemrograman Web - Pembuatan HTML

HTMLPengembangan Web

Edwin Lunando

[email protected]

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>

Pemrograman Web - Pembuatan HTML

Engineering

Transcript of Pemrograman Web - Pembuatan HTML