140 likes | 338 Views
Zanial Mazalisa, S.Kom.,M.M http://blog.binadarma.ac.id/nayel. Pertemuan III. Format Teks HTML. Pemformatan Teks Teks Preformat Address Singkatan Arah Teks Quotation Teks yang disisipkan atau Dihapus. Format Teks HTML. Pemformatan Teks Menebalkan huruf <b>..</b>
E N D
Zanial Mazalisa, S.Kom.,M.M http://blog.binadarma.ac.id/nayel Pertemuan III
Format Teks HTML • Pemformatan Teks • Teks Preformat • Address • Singkatan • Arah Teks • Quotation • Teks yang disisipkan atau Dihapus
Format Teks HTML • PemformatanTeks • Menebalkanhuruf<b>..</b> • Memiringkanhuruf<i> .. </i> • Memberitekananpadateks<em>..</em> • Mengecilkanhuruf<small> ..</small> • Superscript <sup>..</sup> • Subscript <sub>..</sub>
Contoh <html> <body> <b>Bold</b><br> <i>Italic</i><br> <em>Empharized</em><br> <small>Small</small><br> <sup>Superscript</sup><br> <sub>Subscript</sub><br> </body> </html>
Format Teks HTML • Teks Preformat <pre>..</pre> • Menampilkan huruf sesuai dengan tampilannya • Contoh: <html> <body> Ini Contoh penulisan dasar Ini Contoh penulisan dasar Ini Contoh penulisan dasar <pre> Ini Contoh penulisan dasar Ini Contoh penulisan dasar Ini Contoh penulisan dasar </pre> </body> </html>
Format Teks HTML • Address untuk menampilkan tampilan seperti alamat Contoh <html> <body> <address> Kampus Bina Darma<br> Jl. Jendral Ahmad Yani No.12<br> Palembang<br> </address> </body> </html>
Format Teks HTML • Singkatan • <abbr title=“ “>.... </abbr> • Kepanjangan • <acronym title =“…….”> ….</acronym> <html> <body> <abbr title="dan lain-lain"> dll </abbr><br> <acronym title="World Wide Web"> WWW </acronym> </body> </html>
Format Teks HTML • Arah Teks • Mengubah arah tulisan <html> <body> <bdo dir="rtl"> Universitas Bina Darma Palembang </bdo> </body> </html>
Link HTML • Adalah kemampuan HTML untuk memberikan link dari suatu teks / atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen • Browser akan menyorot teks atau gambar yang diidentifikasi sebagai link dg warna/atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link (hyperlink/link) • Tag yang digunakan untuk link adalah anchor <a>
Link HTML Macam-macam link • Link Relatif • Link ke page lain pada komputer yang sama • <a href=“file_2.html”>Berikutnya</a> • Contoh: <html> <body> Belajar membuat link dan ini menuju <a href="prog2.html">ke halam lain</a> </body> </html>
Link HTML Macam-macam link • Link Absolut • Link ke ke web lain di internet • <a href=“http://www.google.com”>Google</a> <html> <body> Belajar membuat link ke web lain menuju <a href="http://www.google.com">ke Google</a> </body> </html>
Link HTML <html> <body> <a name ="Top"> <a href="#B3">Lihat Bab 3</a> <h2>Bab 1</h2> Ini isi Tulisan Bab 1<br> <h2>Bab 2</h2> Ini Tulisan Bab 2<br> <a name="B3"> <h2>Bab 3</h2> Ini tulisan Bab 3 </body> </html> Macam-macam link • Link ke Bagian Lain dalam Dokumen • Link ke bagian lain dalam page yang sama • <a href=“#namabagian”>bagian lain</a>
Membuka Link untuk Window Baru • <a href=“http://www.google.com” target =“_blank”>Google</a> • Keluar dari suatu Frame • <a href=“http://www.google.com” target =“_top”>Google</a> • mailto • <a href=“mailto:zanial@gmail.com” > Kirim Email</a>
Tugas • Buat dua program sederhana dengan gaya tulisan dan saling berhubungan dengan mengunakan LINK, kemudian hubungkan juga dengan web lain seperti : Yahoo, Google, Detik, Bina Darma dan lain-lain.