Pertemuan 6

Pemrograman Web Dan Perangkat

Bergerak
Materi : Format Teks & Format Multimedia

Guru : Nuryana, S.Kom

Jurusan Rekayasa Perangkat Lunak ( RPL ) Kelas XI
SMK AL-Jauhar
Format Teks Dalam HTML
Heading ( Judul )
Heading merupakan salah satu element penting dalam dokumen penting
dalam HTML, Heading di definisikan menggunakan tag <hn> dan di akhiri
dengan </h6> dimana n menyatakan tipe dengan nilai 1-6

Contoh :
<h1> Ini Judul </h1>
<h2> Ini Judul </h1>
<h3> Ini Judul </h3>
<h4> Ini Judul </h4>
<h5> Ini Judul </h5>
<h6> Ini Judul </h6>

Elemen Heading juga menyediakan atribut align yang dapat digunakan

untuk mengatur posisi teks

<h1 align=“right”> Ini Judul </h1>

Paragraf
Di dokumen HTML kita juga bisa menuliskan paragraf, paragraf di
representasikan melalui tag <p>

Contoh :
<p> Ini Paragraf Pertama </p>

Elemen Paragraf juga menyediakan atribut align yang dapat digunakan

untuk mengatur posisi teks

<p align=“center”> Ini Paragraf</p>

Untuk membuat baris baru dari paragraf kita bisa menggunakan <br>
Font Style

HTML juuga menyediakan sejumlah elemen yang dapat di manfaatkan untuk mengatir
font, seperti huruf tebal, huruf miring, garis bawah dll.

<b></b> Untuk membuat font menjadi Bold ( Tebal )

<i></i> Untuk membuat font menjadi Italic ( Miring )
<u></u> Untuk membuat garis bawah ( Underline )

Karakter Khusus
Garis Horizontal

Garis horizontal di representasikan melalui tag < hr/>

Menggunakan List
• Bentuk Terurut ( Ordered ) <ol>

• Tak Terurut ( Unordered ) <ul>

• Definisi ( Definition ) <dd>

• List ( list ) <li>

Format Multimedia Dalam HTML
Menggunakan Link

Hyperlink merupakan teks yang memungkinkan kita untuk melakukan navigasi dari satu
halaman ke halaman yang lainnya. Dengan menggunakan tag <a> ( atau disebut anchor )
untuk mendefinisikan ink, pembuatan link memerlukan atribut href yang menyatakan
tujuan.

<a href=“link2.html”>Klik Disini</a>

Cara kerja Hyperlink pada HTML

Memasukan Gambar

Dalam HTML juga dapat memasukan sebuah gambar, dengan menggunakan tag
<img> . Dan tag ini merupakan tag tunggal dan tidak memliki pasangan. Atribut
terpenting dari tag <img> adalah src ( source atau sumber ), yang berisi file
gambar yang akan ditampilkan ke dalam web.

<img src = “kucing.png” / >

Jika file yang akan di tampilkan berbeda direktori lain, atau bahkan berada di
situs web lain, maka anda perlu menyebutkan juga lokasi dari file tersebut

<img src=“…/image/gambar.jpg:/>

Format gambar yang bisa digunakan adalah :

• Gif
• Jpg
• Jpeg
• Png
Atribut yang dapat digunakan

1. Src digunakan untuk menentukan lokasi file music

2. Align digunakan untuk menentukan posisi
3. Border digunakan untuk menentukan batas-batas
4. Height digunakan untuk menentukan tinggi dari objek yang dimasukan
5. Width digunkaan untuk menentukan lebar dari objek yang dimasukan
6. Hspace digunakan untuk menentukan jarak horizontal antara objek dengan
text
7. Vspace digunakan untuk menentukan jarak vertikal antara object dengan
text
Memasukan Audio

Untuk memasukan audio ke dalam dokumen HTML kita bisa menggunakan tag
<embed> dan atribut yang digunakan adalah :

<embed src=”music.mp3” border=”2” align=”right” autostart=”false”

height=”45” width=”400” />

Jika kita ingin menjadikan sebuah lagu sebagai latar belakang ( background )
dalam halaman web kita, maka gunakan tag <bgsound>

<bgsound src=”music.mp3” loop=”-1” />

Selain menggunakan embed, juga bisa menggunakan tag <audio>

<audio>
<source src=”filemusic.wav” type=”audio/wav”>
</audio>
Property yang dapat dimasukan

1. Autoplay berfungsi agar audio otomatis di play seterlah siap dimainkan

2. Controls berfungsi untu menampilkan tombol play, pause, volume, dll
3. Loop berfungsi agar audio dimainkan berulang-ulang
4. Muted apakah audionya di mute atau tidak
5. Preload ( auto, metadata ) apakah audionya load pada saat halaman sedang
diload
6. Src menunjukan URL dari audio yang akan dimaikan
Memasukan Video

Untuk memasukan audio ke dalam dokumen HTML kita bisa menggunakan tag
<video> dan atribut yang digunakan adalah :

<video width=”320” height=”240” controls autoplay>

<source src=”file_video.mp4” type=”video/mp4”>
</video>

Selain menggunakan tag video, memasukan video juga bisa menggunakan tag
<embed> dan <iframe>

Property yang dapat dimasukan

1. Width digunakan untuk mendifinisikan lebar video
2. Height digunakan untuk mendefinisikan tinggi video
3. Poster digunakan untuk mendefinisikan URL gambar yang akan dimunulkan
saat videoya sedang buffer, atau sebelum di play oleh user
ANY QUESTION.?