View
29
Download
6
Category
Preview:
Citation preview
PEMROGRAMAN BERBASIS WEB ** -
HTML LANJUTAN
MINGGU KE 3
2
OUTLINE
• TAG DASAR HTML
BASIC TEXT FORMATTING
IDENTIFYING RESOURCES
USING GRAPHIC IMAGES - BASICS
BACKGROUND IMAGES
• HTML INTERMEDIATE
FORMATTING WITH TABLES, FRAMES
COLLECTING INFORMATION FROM
THE USER USING FORMS
PEMROGRAMAN BERBASIS WEB ** (4KA)
3
TAG DASAR HTML
PEMROGRAMAN BERBASIS WEB ** (4KA)
•HTML merupakan bahasa bertanda, menggunakan
rangkaian teks tertentu (tag) untuk menandai teks
yang mempunyai interpretasi khusus
•Tag HTML adalah kata kunci yang diapit oleh
kurung sudut/kurung lancip
<tag>informasi</tag>
•Tag boleh ditulis dalam huruf kecil maupun kapital
•Tag HTML umumnya berpasangan, dimulai dengan
start tag dan diakhiri dengan end tag
•End tag ditulis seperti start tag, tapi dengan garis
miring sebelum nama tag
4
TAG DASAR HTML (Lanjutan)
PEMROGRAMAN BERBASIS WEB ** (4KA)
•Penulisan tag tidak boleh tumpang tindih
<tag1><tag2> teks </tag1></tag2> → penulisan yang salah
<tag1><tag2> teks </tag2></tag1> → penulisan yang benar
•Dibuat dengan menggunakan Notepad atau Notepad++
•File format HTML akan berekstensi .htm atau .html
•Web browser tidak menampilkan tag HTML tapi
menggunakannya untuk menentukan bagaimana
menampilkan dokumen
5PEMROGRAMAN BERBASIS WEB ** (4KA)
TAG
HTMLKETERANGAN
TAG
HTMLKETERANGAN
<html> Mendefinisikan sebuah dokumen
HTML<h1> Mendefinisikan judul paragraf
<head>Mendefinisikan elemen kepala
dokumen<p> Mendefinisikan sebuah paragraf
<title> Mendefinisikan judul dokumen
HTML<br> Ganti baris berikutnya.
<body>
Mendefinisikan tubuh dokumen,
berisi informasi yang hendak
ditampilkan
<font>
Memformat suatu bagian kalimat dengan
ukuran, jenis
huruf, atau warna tertentu.
Tag Atribut 1 <li> Menandai suatu item dari daftar (enumerasi)
<b> Kalimat yang dicetak tebal <hr> Membentuk garis pemisah mendatar.
<i> Kalimat yang dicetak miring <img> Menampilkan sebuah file gambar.
<u> Kalimat yang digarisbawahi <a> Alamat URL atau nama file dan/atau acuan
yang dituju
Tag Atribut 2 <table> Menampilkan data dalam bentuk tabel
<sup> Bagian yang dicetak tinggi <frameset>
Membagi layar dalam beberapa jendela,
dimana masing-masing layar menampilkan
web page yang berbeda.
<sub> Bagian yang dicetak rendah FORMMemperoleh data-data user baik nama,
alamat dan data lainnya
6
SKEMA DASAR HTML
PEMROGRAMAN BERBASIS WEB ** (4KA)
<HTML>
<HEAD>
<TITLE>Judul Dokumen</TITLE>
</HEAD>
<BODY>
Isi Dokumen
</BODY>
</HTML>
Keterangan :
• <HTML> …. </HTML> menandai awal dan akhir dokumen HTML
• <HEAD> …. </HEAD> menandai awal dan akhir header dokumen
• <TITLE>Judul dokumen</TITLE> memberi judul pada dokumen
• <BODY> Isi dokumen</BODY> menandai awal dan akhir isi dokumen
7
SKEMA DASAR HTML (Lanjutan)
PEMROGRAMAN BERBASIS WEB ** (4KA)
1. Ketik tulisan di samping dengan
menggunakan Notepad
2. Simpan file tersebut dengan nama :
belajar.html
3. Ganti pilihan Save As Type menjadi All files
4. Jika sudah di Save
5. Buka program tadi menggunakan web
browser
6. Akan muncul tampilan seperti di bawah ini
JUDUL NAMA
BERKAS
TEKS DALAM
BADAN DOKUMEN
8
TAG JUDUL (HEADING) - <hn>
PEMROGRAMAN BERBASIS WEB ** (4KA)
<hn>Judul Paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul)
Untuk menuliskan judul suatu paragraf
9
TAG JUDUL (HEADING) - <hn> - (Lanjutan)
PEMROGRAMAN BERBASIS WEB ** (4KA)
Mengatur Letak Heading : Tag heading mempunyai atribut
yang digunakan untuk mengatur letak heading dalam baris –
align. Alignment heading : Kiri (Left), Tengah (Center),
Kanan (Right)
Jika atribut align tidak diisi maka heading secara default
akan ditampilkan sebelah rata kiri
10
TAG PARAGRAF (PARAGRAPH) - <p>
PEMROGRAMAN BERBASIS WEB ** (4KA)
<p>Paragraf</p>
Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi
oleh satu baris kosong sebelum dan sesudahnya.
11
TAG GANTI BARIS (BREAK LINE) - <br>
PEMROGRAMAN BERBASIS WEB ** (4KA)
<br>Ganti Baris Berikutnya</br>
Ganti baris dimaksudkan hanya menyajikan informasi pada baris
sendiri tetapi tidak berganti paragraf. Untuk berganti baris yang
baru tanpa berganti paragraf baru maka harus digunakan TAG <br>
sebelum teks yang dimaksudkan dituliskan. Penulisan TAG <br>
dapat dilakukan tanpa harus menuliskan tag pasangannya.
12
TAG FONT (SIZE, FACE, COLOR) - <font >
PEMROGRAMAN BERBASIS WEB ** (4KA)
• <font size=“n”>kalimat</font>
<font size=“m”>kalimat</font>
n = 1, 2, 3, dll (ukuran huruf)
m = -2, -1, +0, +1, +2, dll (ukuran huruf)
Memformat suatu bagian kalimat dengan ukuran
• <font face=“nama font”>kalimat</font>
Nama font = Times New Roman, Arial, Cambria, dll
Memformat suatu bagian kalimat dengan jenis huruf
• <font color=“warna”>kalimat</font>
Warna = Red, Green, Blue, dll
Memformat suatu bagian kalimat dengan jenis warna
• <marquee direction=left>kalimat</marquee>
Direction Marquee : Down (atas ke bawah), Left (kanan ke kiri), Right (kiri
ke kanan) , Up (dari bawah ke atas)
Untuk membuat efek teks berjalan
13
TAG FONT (SIZE, FACE, COLOR) - <font > - (Lanjutan)
PEMROGRAMAN BERBASIS WEB ** (4KA)
14
TAG ATRIBUT 1 (BOLD, ITALIC, UNDERLINE) - <b> , <i> , <u>
PEMROGRAMAN BERBASIS WEB ** (4KA)
• <b>Kalimat yang dicetak tebal</b>
• <i>Kalimat yang dicetak miring</i>
• <u>Kalimat yang digarisbawahi</u>
Untuk menandai bagian kalimat agar dicetak tebal, miring, atau digarisbawahi.
15
TAG ATRIBUT 2 (SUPERSCRIPT, SUBSCRIPT) - <sup> . <sub>
PEMROGRAMAN BERBASIS WEB ** (4KA)
• <sup>Bagian yang dicetak tinggi</sup>
• <sub>Bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk
rumus matematika atau kimia.
16
TAG ATRIBUT 2 (SUPERSCRIPT, SUBSCRIPT) - <sup> . <sub>
PEMROGRAMAN BERBASIS WEB ** (4KA)
• <sup>Bagian yang dicetak tinggi</sup>
• <sub>Bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk
rumus matematika atau kimia.
17
TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) -
<li>, <ol>, <ul>
PEMROGRAMAN BERBASIS WEB ** (4KA)
<li>item</li>
Untuk menandai suatu item dari daftar (enumerasi), diawali dengan
simbol • (bullet)
18PEMROGRAMAN BERBASIS WEB ** (4KA)
<ol>item</ol>
Untuk membuat daftar dimana tiap bagiannya memiliki nomor secara
berurut. Untuk menyatakan tiap bagiannya digunakan Tag <LI> dan tidak
diperlukan tag penutup.
TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) -
<li>, <ol>, <ul> - (Lanjutan)
19PEMROGRAMAN BERBASIS WEB ** (4KA)
<ul>item</ul>
Membuat daftar item dengan tanda bullet. Kelompok item harus diapit oleh
tag <ul> </ul> dalam daftar bertingkat.
TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) –
<li>, <ol>, <ul> - (Lanjutan)
20PEMROGRAMAN BERBASIS WEB ** (4KA)
<hr> atau bentuk penulisan lain yang dianjurkan (XML style) <hr/>
Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah
antar bagian atau paragraf.
TAG GARIS MENDATAR (HORIZONTAL LINE) - <hr> ATAU <hr/>
21PEMROGRAMAN BERBASIS WEB ** (4KA)
<img src="NamaFileGambar"> atau bentuk penulisan lain yang dianjurkan
(XML style) <img src="NamaFileGambar" />
Untuk menampilkan sebuah file gambar. NamaFileGambar = file gambar yang
mempunyai ekstensi .GIF, JPG, atau PNG.Disertai dengan atribut :• SRC menentukan sumber gambar• ALT alternatif bila browser berbasis teks / alternatif teks apabila gambar
tidak dapat ditampilkan• ALIGN perataan teks (LEFT/CENTER/RIGHT)
TAG GAMBAR (IMAGE) - <img>
22PEMROGRAMAN BERBASIS WEB ** (4KA)
• <a href =“nama link page.html”>kalimat </a>
Link Relatif : Digunakan jika membuat suatu link
pada page anda ke page lain pada komputer yang
sama. Bila dua page berada pada direktori sama, anda
dapat menuliskan nama file html.
• <a href =“nama link page web”>kalimat</a>
Link Absolut : Digunakan apabila anda membuat link
ke page web lain yang berada pada web site lain di
internet.
TAG LINK - <a>
23PEMROGRAMAN BERBASIS WEB ** (4KA)
TAG LINK - <a> - (Lanjutan)• Link Relatif
Jika klik di sini di klik, maka akan
muncul tampilan di bawah ini
24PEMROGRAMAN BERBASIS WEB ** (4KA)
TAG LINK - <a> - (Lanjutan)• Link Absolut
Jika BAAK di klik, maka akan
muncul tampilan di bawah ini
25PEMROGRAMAN BERBASIS WEB ** (4KA)
TAG TABEL (TABLE) - <table>
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel. Tabel didefinisikan dengan cara
menyatakan baris-baris dan kolom-kolom.
• Tag untuk penanda baris adalah <tr> definisi baris </tr>
• Tag untuk penanda kolom adalah <td>data</td>
26PEMROGRAMAN BERBASIS WEB ** (4KA)
FRAME - <frameset>
Tag Dasar :
• <frameset> ...</frameset>
• <frame />
• <noframes> .. </noframes>
Basic Attributes
• cols = “values” ….(value biasanya besar pembagian area)
• rows = “values”
• name = “frame_name”
• src = “frame_source(url)”
• target = “frame_name”
Frame membagi layar dalam beberapa jendela, dimana masing-
masing layar menampilkan web page yang berbeda.
27PEMROGRAMAN BERBASIS WEB ** (4KA)
FRAME - <frameset> - (Lanjutan)
28PEMROGRAMAN BERBASIS WEB ** (4KA)
FORM - <form>Kegunaan Form dalam web :
• Memperoleh data-data user baik nama, alamat dan data lainnya
• Untuk mendaftar pada service yang disediakan
• Memperoleh informasi pembelian secara online
• Memperoleh feedback dari user mengenai website anda
29PEMROGRAMAN BERBASIS WEB ** (4KA)
FORM - <form> - (Lanjutan)
Terima Kasih
Recommended