Staffsite STMIK PPKIA Pradnya Paramita 1ce60 html sesi 2 3
Pengenalan
HTML
STMIK PPKIA Pradnya Paramita
Pemrograman berbasis Web
Objectivitas
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
• Mengerti tag-tag dasar HTML
• Membuat halaman web dengan HTML sederhana.
PENELASAN UMUM
• HTML standard bahasa yang digunakan untuk
menampilkan document web.
– Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan document secara online sehingga bisa di
akses.
– Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi secara online.
– Menambahkan object-object seperti image, audio, video
dan juga java applet dalam document HTML.
Penamaan Dokumen HTML
• Tidak ada aturan baku untuk penamaan dokumen HTML. File
dokumen yang mempunyai ekstensi .htm atau .html maka
akan dianggap file dokumen HTML
• Contoh : latih.htm = latih.html
Kerangka Dokumen HTML
Head
Judul halaman
Informasi yang akan ditampilkan pada web browser harus ditulis
dalam bagian ini
body
Membuat Dokumen HTML
1.
2.
3.
4.
Jalankan Aplikasi text Editor
Tuliskan Kode html yang akan di keluarkan di browser
Simpan dokumen dengan ekstensi .htm atau .html
Buka file tersebut melalui browser atau running langsung
lewat text editornya
Tag HTML
•
•
•
•
Aturan pemakaian Tag :
Tag HTML diapit dengan dua karakter sudut (< dan>)
Tag HTML tidak case sensitive
Tag html umumnya selalu berpasangan. Namun ada
tag yang tidak berpasangan
• Tag bersarang
Atribut Tag
• Atribut tag harus ditulis di dalam tag bersangkutan
atribut
element
value
• Contoh : < body bgColor= “#fffeee”
•
alink=“#cccccc”>
atribut
value
• Kerangka :
Elemen bersarang
parent
child
I love taking my dog for a walk.
Tag Umum HTML
1. HTML
Tag yang mendefnisikan
bahwa dokumen ini adalah
dokumen HTML.
Contoh Penulisannya
….
…
2.HEAD
- Tag yang ditulis setelah tag
HTML
-Untuk menuliskan
keterangan tentang web
yang akan
ditampilkan
Contoh Penulisannya :
…..
Tag Dasar HTML
3. TITLE
4. BODY
• Merupakan tag dalam head
- Merupakan sesi utama dalam
yang harus dituliskan untuk
dokumen web
memberikan
-Semua isi dokumen akan
judul/informasi pada caption
ditampilkan di dalam browser
browser web
harus dituliskan
• Tentang topik/judul dari
dokumen web yg ditampilkan
Contoh Penulisannya :
dalam
browser
informasi yang akan
ditampilkan
Contoh penulisannya :
Judul…..
Tag Body
•Body : Mempunyai atribut
Tag Body
•Contoh Penulisannya
•Hasilnya
Tag Heading
•
•
•
•
•
•
•
•
•
•
•
•
Heading : Tulisan ditampilkan dalam bentuk lebih besar dan ditebalkan
Mempunyai 6 tingkat heading dalam HTML dari 1 s.d. 6
Contoh penulisannya :
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Untuk pengaturan letak heading diberikan fasilitas attribut , heading
mempunyai attribut sama dengan paragraph kecuali justify
Tag Paragraf
Paragraf
Setiap paragraf harus dimulai dengan tag
Akhir paragraf tidak diharuskan menulis
Setiap pergantian paragraf harus dimulai dg
Contoh Penulisannya :
isi tulisan paragraf pertama
Paragraf mempunyai atribut Align dan mempunyai value : lef untuk kiri, right
untuk kanan, dan center untuk tengah, justify : rata kanan dan kiri
Tag Break
•
•
•
•
•
Line Break : Untuk memaksa berpindah baris, tidak berganti paragraf
Contoh penulisannya :
Selamat DatangpadaPerkuliahan
Pemrograman Internet 1
Tag Horizontal
•
•
•
•
•
•
•
•
•
•
•
•
•
Tag Horizontal ruler untuk membuat garis mendatar (penggaris) , sebuah
garis yang bisa disisipkan dalam dokumen web, pemisah antar bagian atau
paragraf,
Contoh penulisannya :
Selamat Datang
pada perkuliahan PI 1
Tag ini juga mempunyai atttribut yaitu align perataan (lef, center, right), size untuk
mengatur ketebalan garis (dalam pixel), attribute width untuk mengatur lebarnya
garis (dalam persen atau pixel), tag ini tidak mempunyai penutup
Contoh penulisannya :
Selamat Datang
pada perkuliahan PI 1
Tag Performat
• Tag Performat membuat tampilan
dokumen HTML pada browser sama dengan tampilan
pada teks editor
• Contoh penulisannya
Tag
• Tag Bold …: untuk menampilkan huruf tebal
•
•
Italic… : untuk menampilkan huruf miring
•
•
Underline … : menampilkan garis bawah
pada teks
•
… : untuk menampilkan huruf seperti mesin
ketik
•
: menampilkan garis horizontal pada tengah
huruf
• Subscript : menampilkan subscript (lebih bawah)
• Superscript : menampilkan super script (lebih atas)
•
• Contoh Penulisannya :
Tag Komentar
• untuk mempermudah pembacaan kembali kode – kode HTML,
kadang – kadang ditambahkan komentar ke dalam sebuah
dokumen, agar komentar tidak dapat dibaca oleh browser,
maka harus digunakan tanda khusus , yaitu
• Cara Penulisannya
Karakter khusus pada HTML
SPECIAL CHARACTER
DESCRIPTION
ENTITY NAME
CODE
©
Copyright
©
©
$
Dollar Sign
$
$
%
Percent Sign
%
%
&
Ampersand
&
&
HTML
STMIK PPKIA Pradnya Paramita
Pemrograman berbasis Web
Objectivitas
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
• Mengerti tag-tag dasar HTML
• Membuat halaman web dengan HTML sederhana.
PENELASAN UMUM
• HTML standard bahasa yang digunakan untuk
menampilkan document web.
– Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan document secara online sehingga bisa di
akses.
– Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi secara online.
– Menambahkan object-object seperti image, audio, video
dan juga java applet dalam document HTML.
Penamaan Dokumen HTML
• Tidak ada aturan baku untuk penamaan dokumen HTML. File
dokumen yang mempunyai ekstensi .htm atau .html maka
akan dianggap file dokumen HTML
• Contoh : latih.htm = latih.html
Kerangka Dokumen HTML
Head
Judul halaman
Informasi yang akan ditampilkan pada web browser harus ditulis
dalam bagian ini
body
Membuat Dokumen HTML
1.
2.
3.
4.
Jalankan Aplikasi text Editor
Tuliskan Kode html yang akan di keluarkan di browser
Simpan dokumen dengan ekstensi .htm atau .html
Buka file tersebut melalui browser atau running langsung
lewat text editornya
Tag HTML
•
•
•
•
Aturan pemakaian Tag :
Tag HTML diapit dengan dua karakter sudut (< dan>)
Tag HTML tidak case sensitive
Tag html umumnya selalu berpasangan. Namun ada
tag yang tidak berpasangan
• Tag bersarang
Atribut Tag
• Atribut tag harus ditulis di dalam tag bersangkutan
atribut
element
value
• Contoh : < body bgColor= “#fffeee”
•
alink=“#cccccc”>
atribut
value
• Kerangka :
Elemen bersarang
parent
child
I love taking my dog for a walk.
Tag Umum HTML
1. HTML
Tag yang mendefnisikan
bahwa dokumen ini adalah
dokumen HTML.
Contoh Penulisannya
….
…
2.HEAD
- Tag yang ditulis setelah tag
HTML
-Untuk menuliskan
keterangan tentang web
yang akan
ditampilkan
Contoh Penulisannya :
…..
Tag Dasar HTML
3. TITLE
4. BODY
• Merupakan tag dalam head
- Merupakan sesi utama dalam
yang harus dituliskan untuk
dokumen web
memberikan
-Semua isi dokumen akan
judul/informasi pada caption
ditampilkan di dalam browser
browser web
harus dituliskan
• Tentang topik/judul dari
dokumen web yg ditampilkan
Contoh Penulisannya :
dalam
browser
informasi yang akan
ditampilkan
Contoh penulisannya :
Judul…..
Tag Body
•Body : Mempunyai atribut
Tag Body
•Contoh Penulisannya
•Hasilnya
Tag Heading
•
•
•
•
•
•
•
•
•
•
•
•
Heading : Tulisan ditampilkan dalam bentuk lebih besar dan ditebalkan
Mempunyai 6 tingkat heading dalam HTML dari 1 s.d. 6
Contoh penulisannya :
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Untuk pengaturan letak heading diberikan fasilitas attribut , heading
mempunyai attribut sama dengan paragraph kecuali justify
Tag Paragraf
Paragraf
Setiap paragraf harus dimulai dengan tag
Akhir paragraf tidak diharuskan menulis
Setiap pergantian paragraf harus dimulai dg
Contoh Penulisannya :
isi tulisan paragraf pertama
Paragraf mempunyai atribut Align dan mempunyai value : lef untuk kiri, right
untuk kanan, dan center untuk tengah, justify : rata kanan dan kiri
Tag Break
•
•
•
•
•
Line Break : Untuk memaksa berpindah baris, tidak berganti paragraf
Contoh penulisannya :
Selamat DatangpadaPerkuliahan
Pemrograman Internet 1
Tag Horizontal
•
•
•
•
•
•
•
•
•
•
•
•
•
Tag Horizontal ruler untuk membuat garis mendatar (penggaris) , sebuah
garis yang bisa disisipkan dalam dokumen web, pemisah antar bagian atau
paragraf,
Contoh penulisannya :
Selamat Datang
pada perkuliahan PI 1
Tag ini juga mempunyai atttribut yaitu align perataan (lef, center, right), size untuk
mengatur ketebalan garis (dalam pixel), attribute width untuk mengatur lebarnya
garis (dalam persen atau pixel), tag ini tidak mempunyai penutup
Contoh penulisannya :
Selamat Datang
pada perkuliahan PI 1
Tag Performat
• Tag Performat membuat tampilan
dokumen HTML pada browser sama dengan tampilan
pada teks editor
• Contoh penulisannya
Tag
• Tag Bold …: untuk menampilkan huruf tebal
•
•
Italic… : untuk menampilkan huruf miring
•
•
Underline … : menampilkan garis bawah
pada teks
•
… : untuk menampilkan huruf seperti mesin
ketik
•
: menampilkan garis horizontal pada tengah
huruf
• Subscript : menampilkan subscript (lebih bawah)
• Superscript : menampilkan super script (lebih atas)
•
• Contoh Penulisannya :
Tag Komentar
• untuk mempermudah pembacaan kembali kode – kode HTML,
kadang – kadang ditambahkan komentar ke dalam sebuah
dokumen, agar komentar tidak dapat dibaca oleh browser,
maka harus digunakan tanda khusus , yaitu
• Cara Penulisannya
Karakter khusus pada HTML
SPECIAL CHARACTER
DESCRIPTION
ENTITY NAME
CODE
©
Copyright
©
©
$
Dollar Sign
$
$
%
Percent Sign
%
%
&
Ampersand
&
&