SlideShare a Scribd company logo
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BAB III - FORMAT TEXT DAN HALAMAN WEB
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu:
1. Memahami Struktur Dasar HTML
2. Menjelaskan Fungsi Berbagai Tag dalam HTML
3. Menggunakan Format Text dalam HTML
A. Struktur Dasar HTML
Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas
a. DTD atau DOCTYPE
Tag paling awal dari HTML adalah DTD atau DOCTYPE. DTD adalah singkatan
dari Document Type Declaration yang berfungsi untuk memberi tahu web browser
bahwa dokumen yang akan di proses adalah HTML.
b. Tag <HTML>
Tag <html> sebagai pembuka dari keseluruhan halaman web. Semua kode HTML
harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri
dengan </html>
c. Tag <head>
Elemen pada tag <head> umumnya berisi berbagai definisi halaman seperti kode
CSS, JavaScript, dan kode kode lainnya yang tidak tampil di browser,
d. Tag <title>
Tag <title> digunakan untuk menampilkan title dari sebuah halaman web. Title
biasanya ditampilkan pada bagian paling atas web browser
e. Tag <body
Tag <body> berisi semua elemen yang akan tampil dalam halaman web, seperti
paragraph, table, link, gambar, dan lain-lain. Tag body ini ditutup dengan </body>.
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2
B. Tag Syntax dan Option
Pada dasarnya HTML berisi kode kode tertentu berbasis teks yang disebut “tag”. Tag
bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan
kepada browser mengenai hal hal yang harus di tampilkan kepada pengguna. Antara
tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang
menunjukan itu adalah tag penutup. Misalnya tag <b> dan </b>, yang akan menjadi
teks yang ada di antaranya sebagai cetak mring dan contoh-contah tag lainnya.
Jenis–jenis syntax dan option HTML beserta fungsinya dapat dilihat dari tabel
berikut
Tag Keterangan
<!--…--> Digunakan untuk memberi sebuah komentar atau
keterangan. Kalimat yang terletak pada kontiner ini tidak
akan terlihat pada browser
<!DOCTYPE> Mendefiniskan informasi tipe dokumen
<a> Mendifinisikan sebuah anchor, tetapi lebih tepat jika
diartikan sebagai tautan dikarenakan tautan ini digunakan
untuk saling menautkan antara satu dokumen HTML ke
doukeman HTML yang lain
<br/> Memberi baris baru/pindah baris
<button> Mendefinisikan sebuah tombol diklik
<dir> Mendefiniskan Sebuah daftar direktori
<div> Mendefinisikan sebuah section dalam dokumen
<dt> Mendefinisikan isitilah (item) dalam daftar difinisi
<embed> Digunakan untuk memasukan file video atau file musik
<fieldset> Untuk mengelompokkan elemen yang terkait dalam
form/membuat seperti frame –box di dalam form
<font> Mendefiniskan jenis font, warna, dan ukuran teks
<frameset> Mendefiniskan satu set frame
<head> Digunakan untuk memberikan informasi tentang dokumen
tersebut
<hr/> Membuat garis horizontal
<link/> Mendefinisikan hubungan antara dokumen dan sumber
eksternalnya
<marquee> Membuat teks berjalan secara vertikan atau horizontal
<menu> Mendifinisikan sebuah daftar menu
<meta/> Mendefinisikan metadata tentang sebuah dokumen HTML
<nobr> Mencegah ganti baris pada teks atau gambar
<noframes> Jika browser user tidak mendukung frame
<s> Untuk memberi garis tengah pada teks/ mencoret
teks,fungsi tag ini sama dengan tag <del>, tetapi tag <s>
tidak dianjurkan: sebagai gantinya menggunakan tag <del>
<small> Memperkecil ukuran teks dari ukuran defaultnya
<Span> Mendifinisikan sebuah section dalam dokumen
<strike> Untuk memberi garis tengah pada/mencoret teks, fungsi tag
ini sama dengan <del>
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3
<strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<style> Mendefinisikan informasi style untuk dokumen HTML
<Tbody> Untuk mengelompokkan isi body di dalam sebuah tabel
<textarea> Mendefinisikan sebuah kontrol input multiline
<xmp> Mendefinisikan preformatted text, fungsi tag ini sama
dengan tag <pre>
C. Format Teks Dalam HTML
Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen
html menjadi kelihatan berbeda, menarik, memiliki arti, serta dapat memberikan
kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambing
tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang untuk membuat
struktur text (konten) dari halaman web. Web akan menampilkan beberapa tag
dengan menampilkan beberapa tag dengan tampilan visual sepeti huruf tebal, huruf
kecil, italic dan lain-lain. Namum, anda sebaikanya tidak membuat text menjadi
mirin, namun menandai bagian text mana yang perlu ‘ditekankan’. Tampilan visual
yang sama bisa didapat menggunakan CSS. Format teks dalam HTML terdiri atas
cetak tebal (bold), cetak miring (italic), memberi garis bawah (underline),
mengecilkan huruf (small), membersarkan huruf (big), menebalkan teks (strong),
penekanan teks (emphasis), Mencoret teks (Strike), Subsript dan superscript, serta
membuat singkatan (akronim). Untuk mendefinisikan sebuah singakatan dalam
dokumen html, Anda dapat menggunakan tag acronym. Penulisan adalah <acronym
[property]> .. teks singkatan. </acronym>. Property pada tag ini adalah title yang
berisi judul dari singkatan, perhatikan contoh berikut
BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4
RANGKUMAN
1. Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas DTD atau
DocType, Tag <HTML>, Tag <head>, Tag <title>, Tag <body>.
2. Pada dasarnya HTML berisi kode kode tertentu berbasis teks yang disebut “tag”
tag bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk
menunjukkan kepada browser mengenai hal hal yang harus di tampilkan kepada
pengguna. Antara tag pembuka dan penutup biasanya dibedakan oleh tanda
slash (garis miring) yang menunjukan itu adalah tag penutup.
3. Format teks dalam HTML digunakan untuk membuat teks yang ada dalam
dokumen html menjadi kelihatan berbeda, menarik, memiliki arti, serta dapat
memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau
lambing tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang
untuk membuat struktur text (konten) dari halaman web.

More Related Content

What's hot

Pengenalan css
Pengenalan cssPengenalan css
Pengenalan css
Ida Nurjanah
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
Siigit Aziz
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
Fajar Baskoro
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Nurdin Al-Azies
 
Dasar html
Dasar htmlDasar html
Dasar html
Reno Bastian Syah
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
Fajar Baskoro
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
As Faizin
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
Dhan junkie
 
Html link list
Html link listHtml link list
Html link list
agung sy
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
Deka M Wildan
 
HTML+CSS
HTML+CSSHTML+CSS
HTML+CSS
Ryfan Aditya
 
Asp pertemuan02
Asp pertemuan02Asp pertemuan02
Asp pertemuan02
iskandarbl
 
Html dasar
Html dasarHtml dasar
Html dasar
fhnx
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
Dewa Dwi Antara
 
Pengenalan html (Bambang Sugianto)
Pengenalan html (Bambang Sugianto)Pengenalan html (Bambang Sugianto)
Pengenalan html (Bambang Sugianto)
Bambang Sugianto
 
DOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTMLDOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTML
Victor Dilingham
 

What's hot (18)

Pengenalan css
Pengenalan cssPengenalan css
Pengenalan css
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTML
 
Dasar html
Dasar htmlDasar html
Dasar html
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Modul HTML5
Modul HTML5Modul HTML5
Modul HTML5
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Html link list
Html link listHtml link list
Html link list
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
HTML+CSS
HTML+CSSHTML+CSS
HTML+CSS
 
01 html
01 html01 html
01 html
 
Asp pertemuan02
Asp pertemuan02Asp pertemuan02
Asp pertemuan02
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Pengenalan html (Bambang Sugianto)
Pengenalan html (Bambang Sugianto)Pengenalan html (Bambang Sugianto)
Pengenalan html (Bambang Sugianto)
 
Modul css
Modul cssModul css
Modul css
 
DOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTMLDOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTML
 

Similar to BAB III - FORMAT TEXT DAN HALAMAN WEB

Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 a
f fr
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
Vicky Nitinegoro
 
Web html
Web htmlWeb html
Web html
Fajar Baskoro
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
AchmadHamdan
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
 
Html
HtmlHtml
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
NansyeDeboraLitaay
 
pertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.pptpertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.ppt
Fatoni Pinocchio
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
dedd_simbolon
 
Praktek
PraktekPraktek
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
AndreianYusuf
 
Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015
Martinus Hasan
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
daffa12
 
Tabel Tag HTML
Tabel Tag HTMLTabel Tag HTML
Tabel Tag HTML
Fajar Sany
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda
 
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMAMODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
Mirza Afrizal
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
Ntoerntarntoer Ntoer
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
Shofura Kamal
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)Toni Tegar Sahidi
 

Similar to BAB III - FORMAT TEXT DAN HALAMAN WEB (20)

Pertemuan 2 a
Pertemuan 2 aPertemuan 2 a
Pertemuan 2 a
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
Web html
Web htmlWeb html
Web html
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Html
HtmlHtml
Html
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
pertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.pptpertemuan-2-html-hypertext-markup-language.ppt
pertemuan-2-html-hypertext-markup-language.ppt
 
Dasar html taufan_riyadi
Dasar html taufan_riyadiDasar html taufan_riyadi
Dasar html taufan_riyadi
 
Praktek
PraktekPraktek
Praktek
 
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
 
Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015Catatan HTML SMP CC @2014-2015
Catatan HTML SMP CC @2014-2015
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
Tabel Tag HTML
Tabel Tag HTMLTabel Tag HTML
Tabel Tag HTML
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMAMODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Laporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat WebsiteLaporan Praktikum Basis Data Modul VI-Membuat Website
Laporan Praktikum Basis Data Modul VI-Membuat Website
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 

More from TeukuMahawira

Bab4
Bab4Bab4
Soal tts pai
Soal tts paiSoal tts pai
Soal tts pai
TeukuMahawira
 
Capacity building ict sekolah
Capacity building ict sekolahCapacity building ict sekolah
Capacity building ict sekolah
TeukuMahawira
 
Bab II - Pernyataan Kondisi Bercabang
Bab II  -  Pernyataan Kondisi BercabangBab II  -  Pernyataan Kondisi Bercabang
Bab II - Pernyataan Kondisi Bercabang
TeukuMahawira
 
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa SyukurBab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
TeukuMahawira
 
Bab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan DemokrasiBab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan Demokrasi
TeukuMahawira
 
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir KritisBab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
TeukuMahawira
 
KATA PENGANTAR
KATA PENGANTARKATA PENGANTAR
KATA PENGANTAR
TeukuMahawira
 
BAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGINBAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGIN
TeukuMahawira
 
BAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSSBAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSS
TeukuMahawira
 
BAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORBAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTOR
TeukuMahawira
 
BAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORBAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTOR
TeukuMahawira
 
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTORBAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
TeukuMahawira
 
BAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTORBAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTOR
TeukuMahawira
 
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEBBAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
TeukuMahawira
 
BAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEBBAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEB
TeukuMahawira
 
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTORBUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
TeukuMahawira
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
TeukuMahawira
 
Topologi
TopologiTopologi
Topologi
TeukuMahawira
 

More from TeukuMahawira (20)

Bab4
Bab4Bab4
Bab4
 
Soal tts pai
Soal tts paiSoal tts pai
Soal tts pai
 
Capacity building ict sekolah
Capacity building ict sekolahCapacity building ict sekolah
Capacity building ict sekolah
 
Bab II - Pernyataan Kondisi Bercabang
Bab II  -  Pernyataan Kondisi BercabangBab II  -  Pernyataan Kondisi Bercabang
Bab II - Pernyataan Kondisi Bercabang
 
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa SyukurBab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
Bab 5 Menyembah Allah Swt. sebagai Ungkapan Rasa Syukur
 
Bab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan DemokrasiBab 4 Bersatu dalam Keragaman dan Demokrasi
Bab 4 Bersatu dalam Keragaman dan Demokrasi
 
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir KritisBab 3 Menghidupkan Nurani dengan Berpikir Kritis
Bab 3 Menghidupkan Nurani dengan Berpikir Kritis
 
KATA PENGANTAR
KATA PENGANTARKATA PENGANTAR
KATA PENGANTAR
 
BAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGINBAB XI - MEMBUAT APLIKASI LOGIN
BAB XI - MEMBUAT APLIKASI LOGIN
 
BAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSSBAB X - MEMBUAT APLIKASI HELLO PUSS
BAB X - MEMBUAT APLIKASI HELLO PUSS
 
BAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTORBAB IX - MEMULAI APP INVENTOR
BAB IX - MEMULAI APP INVENTOR
 
BAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTORBAB VII - PENGENALAN IDE APP INVENTOR
BAB VII - PENGENALAN IDE APP INVENTOR
 
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTORBAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
BAB VII - INSTALASI DAN KONFIGURASI APP INVENTOR
 
BAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTORBAB VI - PENGENALAN APPINVENTOR
BAB VI - PENGENALAN APPINVENTOR
 
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEBBAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
BAB V - FORMAT KAITAN DAN FORMULIR PADA HALAMAN WEB
 
BAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEBBAB IV - FORMAT TABEL DAN HALAMAN WEB
BAB IV - FORMAT TABEL DAN HALAMAN WEB
 
Bab2
Bab2Bab2
Bab2
 
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTORBUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
BUKU AJAR PEMROGRAMAN WEB DAN PERANGKAT BERGERAK DENGAN APP INVENTOR
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
 
Topologi
TopologiTopologi
Topologi
 

Recently uploaded

Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs KonsekuensiAksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
sabir51
 
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdfKelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
JALANJALANKENYANG
 
Seminar Pendidikan PPG Filosofi Pendidikan.pdf
Seminar Pendidikan PPG Filosofi Pendidikan.pdfSeminar Pendidikan PPG Filosofi Pendidikan.pdf
Seminar Pendidikan PPG Filosofi Pendidikan.pdf
inganahsholihahpangs
 
Laporan Pembina Pramuka sd format doc.docx
Laporan Pembina Pramuka sd format doc.docxLaporan Pembina Pramuka sd format doc.docx
Laporan Pembina Pramuka sd format doc.docx
RUBEN Mbiliyora
 
Aksi Nyata Erliana Mudah bukan memahamii
Aksi Nyata Erliana Mudah bukan memahamiiAksi Nyata Erliana Mudah bukan memahamii
Aksi Nyata Erliana Mudah bukan memahamii
esmaducoklat
 
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
Kanaidi ken
 
Pemaparan budaya positif di sekolah.pptx
Pemaparan budaya positif di sekolah.pptxPemaparan budaya positif di sekolah.pptx
Pemaparan budaya positif di sekolah.pptx
maulatamah
 
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
nasrudienaulia
 
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptx
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptxMateri 2_Benahi Perencanaan dan Benahi Implementasi.pptx
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptx
ahyani72
 
Kebijakan PPDB Siswa SMA dan SMK DIY 2024
Kebijakan PPDB Siswa SMA dan SMK DIY 2024Kebijakan PPDB Siswa SMA dan SMK DIY 2024
Kebijakan PPDB Siswa SMA dan SMK DIY 2024
DrEngMahmudKoriEffen
 
Kisi-kisi PAT IPS Kelas 8 semester 2.pdf
Kisi-kisi PAT IPS Kelas 8 semester 2.pdfKisi-kisi PAT IPS Kelas 8 semester 2.pdf
Kisi-kisi PAT IPS Kelas 8 semester 2.pdf
indraayurestuw
 
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakatPPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
jodikurniawan341
 
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
asepridwan50
 
Pelatihan AI GKA abdi Sabda - Apa itu AI?
Pelatihan AI GKA abdi Sabda - Apa itu AI?Pelatihan AI GKA abdi Sabda - Apa itu AI?
Pelatihan AI GKA abdi Sabda - Apa itu AI?
SABDA
 
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptxFORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
NavaldiMalau
 
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOKPENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
GusniartiGusniarti5
 
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdfRANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
junarpudin36
 
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPALANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
Annisa Syahfitri
 
Juknis penggunaan aplikasi ecoklit pilkada 2024
Juknis penggunaan  aplikasi ecoklit pilkada 2024Juknis penggunaan  aplikasi ecoklit pilkada 2024
Juknis penggunaan aplikasi ecoklit pilkada 2024
abdinahyan
 
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdfPPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
SdyokoSusanto1
 

Recently uploaded (20)

Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs KonsekuensiAksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
Aksi Nyata Disiplin Positif: Hukuman vs Restitusi vs Konsekuensi
 
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdfKelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
Kelompok 2 Tugas Modul 2.1 Ruang Kolaborasi.pdf
 
Seminar Pendidikan PPG Filosofi Pendidikan.pdf
Seminar Pendidikan PPG Filosofi Pendidikan.pdfSeminar Pendidikan PPG Filosofi Pendidikan.pdf
Seminar Pendidikan PPG Filosofi Pendidikan.pdf
 
Laporan Pembina Pramuka sd format doc.docx
Laporan Pembina Pramuka sd format doc.docxLaporan Pembina Pramuka sd format doc.docx
Laporan Pembina Pramuka sd format doc.docx
 
Aksi Nyata Erliana Mudah bukan memahamii
Aksi Nyata Erliana Mudah bukan memahamiiAksi Nyata Erliana Mudah bukan memahamii
Aksi Nyata Erliana Mudah bukan memahamii
 
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
PELAKSANAAN + Link2 Materi Pelatihan_ PENGAWASAN P3DN & TKDN_ pd PENGADAAN Ba...
 
Pemaparan budaya positif di sekolah.pptx
Pemaparan budaya positif di sekolah.pptxPemaparan budaya positif di sekolah.pptx
Pemaparan budaya positif di sekolah.pptx
 
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
Teori Fungsionalisme Kulturalisasi Talcott Parsons (Dosen Pengampu : Khoirin ...
 
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptx
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptxMateri 2_Benahi Perencanaan dan Benahi Implementasi.pptx
Materi 2_Benahi Perencanaan dan Benahi Implementasi.pptx
 
Kebijakan PPDB Siswa SMA dan SMK DIY 2024
Kebijakan PPDB Siswa SMA dan SMK DIY 2024Kebijakan PPDB Siswa SMA dan SMK DIY 2024
Kebijakan PPDB Siswa SMA dan SMK DIY 2024
 
Kisi-kisi PAT IPS Kelas 8 semester 2.pdf
Kisi-kisi PAT IPS Kelas 8 semester 2.pdfKisi-kisi PAT IPS Kelas 8 semester 2.pdf
Kisi-kisi PAT IPS Kelas 8 semester 2.pdf
 
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakatPPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
PPT LANDASAN PENDIDIKAN.pptx tentang hubungan sekolah dengan masyarakat
 
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
1 Kisi-kisi PAT Sosiologi Kelas X -www.kherysuryawan.id.docx
 
Pelatihan AI GKA abdi Sabda - Apa itu AI?
Pelatihan AI GKA abdi Sabda - Apa itu AI?Pelatihan AI GKA abdi Sabda - Apa itu AI?
Pelatihan AI GKA abdi Sabda - Apa itu AI?
 
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptxFORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
FORMAT PPT RANGKAIAN PROGRAM KERJA KM 7.pptx
 
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOKPENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
PENDAMPINGAN INDIVIDU 2 CGP ANGKATAN 10 KOTA DEPOK
 
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdfRANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
RANCANGAN TINDAKAN UNTUK AKSI NYATA MODUL 1.4 BUDAYA POSITIF.pdf
 
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPALANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
ANALISIS PENCEMARAN UDARA AKIBAT PABRIK ASPAL
 
Juknis penggunaan aplikasi ecoklit pilkada 2024
Juknis penggunaan  aplikasi ecoklit pilkada 2024Juknis penggunaan  aplikasi ecoklit pilkada 2024
Juknis penggunaan aplikasi ecoklit pilkada 2024
 
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdfPPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
PPT ELABORASI PEMAHAMAN MODUL 1.4. budaya positfpdf
 

BAB III - FORMAT TEXT DAN HALAMAN WEB

  • 1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1 BAB III - FORMAT TEXT DAN HALAMAN WEB Tujuan Pembelajaran: Setelah mempelajari bab ini siswa diharapkan dapat mampu: 1. Memahami Struktur Dasar HTML 2. Menjelaskan Fungsi Berbagai Tag dalam HTML 3. Menggunakan Format Text dalam HTML A. Struktur Dasar HTML Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas a. DTD atau DOCTYPE Tag paling awal dari HTML adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration yang berfungsi untuk memberi tahu web browser bahwa dokumen yang akan di proses adalah HTML. b. Tag <HTML> Tag <html> sebagai pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html> c. Tag <head> Elemen pada tag <head> umumnya berisi berbagai definisi halaman seperti kode CSS, JavaScript, dan kode kode lainnya yang tidak tampil di browser, d. Tag <title> Tag <title> digunakan untuk menampilkan title dari sebuah halaman web. Title biasanya ditampilkan pada bagian paling atas web browser e. Tag <body Tag <body> berisi semua elemen yang akan tampil dalam halaman web, seperti paragraph, table, link, gambar, dan lain-lain. Tag body ini ditutup dengan </body>.
  • 2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2 B. Tag Syntax dan Option Pada dasarnya HTML berisi kode kode tertentu berbasis teks yang disebut “tag”. Tag bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan kepada browser mengenai hal hal yang harus di tampilkan kepada pengguna. Antara tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang menunjukan itu adalah tag penutup. Misalnya tag <b> dan </b>, yang akan menjadi teks yang ada di antaranya sebagai cetak mring dan contoh-contah tag lainnya. Jenis–jenis syntax dan option HTML beserta fungsinya dapat dilihat dari tabel berikut Tag Keterangan <!--…--> Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser <!DOCTYPE> Mendefiniskan informasi tipe dokumen <a> Mendifinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke doukeman HTML yang lain <br/> Memberi baris baru/pindah baris <button> Mendefinisikan sebuah tombol diklik <dir> Mendefiniskan Sebuah daftar direktori <div> Mendefinisikan sebuah section dalam dokumen <dt> Mendefinisikan isitilah (item) dalam daftar difinisi <embed> Digunakan untuk memasukan file video atau file musik <fieldset> Untuk mengelompokkan elemen yang terkait dalam form/membuat seperti frame –box di dalam form <font> Mendefiniskan jenis font, warna, dan ukuran teks <frameset> Mendefiniskan satu set frame <head> Digunakan untuk memberikan informasi tentang dokumen tersebut <hr/> Membuat garis horizontal <link/> Mendefinisikan hubungan antara dokumen dan sumber eksternalnya <marquee> Membuat teks berjalan secara vertikan atau horizontal <menu> Mendifinisikan sebuah daftar menu <meta/> Mendefinisikan metadata tentang sebuah dokumen HTML <nobr> Mencegah ganti baris pada teks atau gambar <noframes> Jika browser user tidak mendukung frame <s> Untuk memberi garis tengah pada teks/ mencoret teks,fungsi tag ini sama dengan tag <del>, tetapi tag <s> tidak dianjurkan: sebagai gantinya menggunakan tag <del> <small> Memperkecil ukuran teks dari ukuran defaultnya <Span> Mendifinisikan sebuah section dalam dokumen <strike> Untuk memberi garis tengah pada/mencoret teks, fungsi tag ini sama dengan <del>
  • 3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3 <strong> Membuat teks tebal, fungsi tag ini sama dengan tag <b> <style> Mendefinisikan informasi style untuk dokumen HTML <Tbody> Untuk mengelompokkan isi body di dalam sebuah tabel <textarea> Mendefinisikan sebuah kontrol input multiline <xmp> Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre> C. Format Teks Dalam HTML Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda, menarik, memiliki arti, serta dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambing tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang untuk membuat struktur text (konten) dari halaman web. Web akan menampilkan beberapa tag dengan menampilkan beberapa tag dengan tampilan visual sepeti huruf tebal, huruf kecil, italic dan lain-lain. Namum, anda sebaikanya tidak membuat text menjadi mirin, namun menandai bagian text mana yang perlu ‘ditekankan’. Tampilan visual yang sama bisa didapat menggunakan CSS. Format teks dalam HTML terdiri atas cetak tebal (bold), cetak miring (italic), memberi garis bawah (underline), mengecilkan huruf (small), membersarkan huruf (big), menebalkan teks (strong), penekanan teks (emphasis), Mencoret teks (Strike), Subsript dan superscript, serta membuat singkatan (akronim). Untuk mendefinisikan sebuah singakatan dalam dokumen html, Anda dapat menggunakan tag acronym. Penulisan adalah <acronym [property]> .. teks singkatan. </acronym>. Property pada tag ini adalah title yang berisi judul dari singkatan, perhatikan contoh berikut
  • 4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4 RANGKUMAN 1. Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas DTD atau DocType, Tag <HTML>, Tag <head>, Tag <title>, Tag <body>. 2. Pada dasarnya HTML berisi kode kode tertentu berbasis teks yang disebut “tag” tag bisa diartikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan kepada browser mengenai hal hal yang harus di tampilkan kepada pengguna. Antara tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang menunjukan itu adalah tag penutup. 3. Format teks dalam HTML digunakan untuk membuat teks yang ada dalam dokumen html menjadi kelihatan berbeda, menarik, memiliki arti, serta dapat memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambing tertentu. Sesuai dengan peruntukannya, tag-tag tersebut dirancang untuk membuat struktur text (konten) dari halaman web.