BAB I Pengenalan HTML 1.1 Pengertian HTML HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang (notepad, word, dll). Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam Internet. Ada dua cara untuk membuat sebuah web page: dengan HTML editor atau dengan editor teks biasa (misalnya notepad).
1.2 Penamaan dokumen Pilih suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi ".htm" atau ".html" (tanda petik ganda tidak perlu dituliskan karena digunakan sebagai penjelas saja
Catatan : Ekstensi dokumen HTML yang menggunakan 3 karakter, awalnya adalah untuk mengakomodasi sistem penamaan yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitive. Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda,
misalnya
dokumen.html
akan
berbeda
dengan
DOKUMEN.html. Kasus case sensitive akan dijumpai pada dokumen web yang dihosting di dalam server yang berbasis *nix (keluarga sistem operasi Unix).
1.3 Definisi elemen Dokumen
HTML
disusun
oleh
elemen-elemen.
"Elemen"
merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah: head, body, table, paragraf, dan
1
list. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
1.4 Definisi Tag Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag html terdiri atas sebuah kurung sudut kiri (<, tanda lebih kecil), sebuah nama tag, dan sebuah kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan (misalnya
dengan
), tag yang menjadi pasangan selalu diawali dengan karakter garing (/, garis miring). Tag yang pertama menunjukkan tag awal yang berarti awal elemen, dan yang kedua menunjukkan tag akhir, berarti akhir elemen. Nama elemen ditunjukkan dengan nama tagnya. Suatu elemen di dalam dokumen HTML harus ditAndai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut di antaranya adalah: paragraf dengan tag
….
ganti baris - line break dengan tag
….. garis datar - horizontal rule dengan tag
…. list item dengan tag
…
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan:
.....
Catatan: Untuk tag-tag yang tidak mengharuskan pasangannya (tag akhirnya) dituliskan sebaiknya dituliskan juga oleh pemrogram web, untuk
mendisiplinkan.
Dampak
ke
depan
adalah
untuk
mengantisipasi standar rekomendasi HTML generasi mendatang. Sehingga pada saat kita misalnya menyusun paragraf dengan tag
selalu diakhiri dengan
.
2
Penulisan penamaan tag bebas, dapat menggunakan huruf besar, huruf kecil, ataupun campuran (tidak case sensitive). Tetapi untuk antisipasi pada standar penulisan tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf kecil semuanya. Tag mark up ini digunakan sebenarnya memberi tahu browser web bagaimana
memperlakukan
atau
menampilkan
(memformat)
halaman dokumen tersebut dalam browser.
1.5 Elemen HTML yang dibutuhkan Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag , , dan berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya yang tersusun dari link, grafik, paragraf, dan elemen lainnya. Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut: ... informasi tentang dokumen HTML ... informasi yang ditampilkan dalam browser web Setiap dokumen html harus diawali dengan menuliskan tag dan tag di akhir dokumen. Tag ini menandai elemen html, yang berarti dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html. Section atau elemen head ditandai dengan tag diawal, dan tag di akhir. Section ini berisi informasi tentang dokumen
3
htmlnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, ditandai dengan menggunakan tag
dan diakhiri dengan . Section atau elemen body ditandai dengan tag di awal, dan tag di akhir. Section body merupakan elemen terbesar di dalam dokumen html. Elemen ini berisi isi dokumen yang akan ditampilkan pada browser, meliputi paragraf, grafik, link, tabel, dan sebagainya.
1.6 Apa Saja yang Dibutuhkan untuk Membuat program HTML Sebuah komputer yang siap web. Komputer dengan Windows ( 98 / Xp / Vista / 7), Mac, atau Unix. Editor teks, notepad atau lainnya. Koneksi ke server web (kalau mungkin koneksi ke Internet). Browser web, direkomendasikan Internet Explorer (4. atau yang terbaru) atau Netscape Navigator (4.0 yang terbaru), Firefox, Safari. Langkah berikutnya adalah surfing Internet, melihat-lihat web site untuk mendapatkan dan membangun ide dari apa yang dilihat. Sebagai pengalaman pertama, bukalah program notepad dari Komputer Anda, dan tuliskan potongan program berikut, simpan dengan nama coba1.html di direktori yang dikehendaki (misal D:\desain web\). Jurusan Matematika FMIPA Universitas Negeri Malang (UM) Ini adalah homepage pertamaku. Ternyata Asyik juga berlajar HTML
4
Setelah itu buka sebuah web browser (misal Internet Explorer), dari Menu File pilih sub menu Open dan cari file coba1.html , maka akan keluar tampilan seperti di bawah ini :
1.7
Penjelasan Contoh Tag pertama pada dokumen html Anda adalah . Tag ini
memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen Anda adalah . Tag ini memberi tahu browser Anda bahwa ini adalah akhir dari dokumen HTML Teks antara dan adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada di antara tag dan yang akan ditampilkan pada browser Anda. Teks di antara tag dan adalah judul dokumen Anda. Judul ditampilkan pada window caption Anda.
Berikut ini petunjuk untuk menggunakan Tag Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) . Tag HTML secara normal selalu berpasangan seperti dan .
5
Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir. Tag html tidak 'case sensitive'. berarti sama dengan . Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut. Misalnya Huruf Tebal dan miring. Gunakan tag dengan huruf kecil (lowercase).
1.8 Latihan 1.
Tuliskan potongan program html berikut dan jalankan dengan mengggunakan sebuah web browser (latihan1.html) Selamat Datang di Mata Kuliah Desain Web Mata kuliah Desain Web ini ternyata sangat menyenangkan
2.
Tuliskan potongan program html berikut dan jalankan dengan mengggunakan sebuah web browser (latihan2.html)
Selamat Datang di Web Pribadiku Ini Adalah Web Pribadiku. Kamu akan mendapatkan informasi tentang diriku di website ini. Jangan lupa kalau kamu suka atau ingin berteman dengan aku maka bias kirim e-mail atau kasih komen di webku ini. Trim yaa….
6
BAB 2 Tag-tag dasar html
Tag dasar berarti elemen dasar. Dokumen HTML secara mendasar akan terdiri atas informasi Judul atau topik utama dokumen disimpan dalam section/ elemen head bagian title, dengan tag ... . Title ini akan ditampilkan pada bagian caption dari Window browser web. Hanya elemen title saja dari elemen head yang ditampilkan di browser, elemen lainnya dari head tidak ditampilkan. Teks informasi akan disimpan dalam section/elemen body - di dalam tag dan . Teks disusun dalam paragraf-paragraf tag . Teks juga mempunyai judul-judul yang menunjukkan topik-topik atau bagian-bagian dalam dokumen - judul disebut sebagai heading. Heading di dalam HTML mempunyai level 1 sampai dengan 6, dinyatakan dengan tag
s.d. , demikian juga dengan pasangannya
s.d. .
2.1
HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen HTML. Cara penulisannya adalah sebagai berikut : di awal dokumen dan di akhir dokumen.
2.2
Head
Merupakan
tag
berikutnya
setelah
untuk
menuliskan
keterangan tentang dokumen web yang akan ditampilkan. di awal setelah , dan di akhir section head.
7
2.3 Title Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser. Judul dokumen
2.4
Body Merupakan section utama dalam dokumen web. Pada section ini
semua isi dokumen yang akan ditampilkan di dalam browser harus dituliskan. ..............
Element ini untuk menampilkan isi dokumen HTML. Tag dan tag terletak di bawah tag dan tag ..Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser. Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. Jika
attribute
bgcolor
dan
background
keduanya
dispesifikasikan
maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
2.5
Paragraf
Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu
8
paragraf. Setiap paragraf harus dimulai dengan memberi tag . Di akhir Paragraf tidak diharuskan menuliskan
sebagai akhir paragraf,karena tag tidak didefinisikan mempunyai tag akhir. Setiap pergantian paragraf harus di mulai dengan
kembali. Sebagai contoh, tuliskan potongan program html berikut dan jalankan! Apa hasilnya?
Contoh Pemakaian Paragrap Ini adalah paragrap Pertama
Ini adalah paragrap Kedua
Ini adalah paragrap Ketiga
Ini adalah paragrap Keempat
Elemen Paraprap ditandai dengan tag p dan diakhiri dengan tag pasangannya
9
Bedakan dengan program html berikut
Contoh Pemakaian Paragrap Ini adalah paragrap Pertama Ini adalah paragrap Kedua Ini adalah paragrap Ketiga Ini adalah paragrap Keempat Elemen Paraprap ditandai dengan tag p dan diakhiri dengan tag pasangannya
Pada program kedua di atas, isi body program ditulis sama dengan program sebelumnya, tetapi tidak menggunakan tag paragrap , maka hasilnya, walaupun paragrap berikutnya ditulis pada baris berikutnya, hasilnya paragraph berikutnya dituliskan setelah paragraph sebelumnya selesai (tanpa ganti baris), seperti terlihat pada gambar berikut :
10
2.6 Line Break Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris di sini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Untuk menampilkan suatu teks ditampilkan pada baris yang baru dalam suatu paragraf, maka harus digunakan tag
sebelum teks yang dimaksud tersebut dituliskan. Tuliskan program html berikut :
Contoh Pemakaian Pemotongan baris Jurusan Matematika
Fakultas Matematika dan Ilmu Pengetahuan Alam (FMIPA)
Universitas Negeri Malang (UM)
Hasilnya walaupun dituliskan dalam satu baris yang tidak terpisah, karena adanya tag
maka setelah tag tersebut, teks akan dituliskan pada baris berikutnya, seperti nampak pada gambar berikut :
2.7
Heading Teks dalam dokumen umumnya mempunyai judul topik, pada
dokumen HTML. Judul ini disebut heading. Heading akan ditampilkan dengan
huruf
yang
lebih
besar
atau
ditebalkan.
Heading
juga
11
dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan nomor 6. Nomor 1 merupakan heading yang terbesar. Setiap heading dalam dokumen harus diberi tag, tergantung pada kebutuhan/ keberartian teks tersebut, jika dianggap sangat penting kita bisa menganggap sebagai heading 1 - digunakan tag . Tuliskan program html berikut : Contoh Pemakaian heading Teks Ini Ditulis dengan Heading 1
Teks Ini Ditulis dengan Heading 2
Teks Ini Ditulis dengan Heading 3
Teks Ini Ditulis dengan Heading 4
Teks Ini Ditulis dengan Heading 5
Teks Ini Ditulis dengan Heading 6
Hasilnya dapat dilihat pada gambar berikut ini :
12
2.8 Mengatur Letak Heading Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris - align. Alignment heading: kiri-left tengah - center kanan – right Tuliskan program html berikut :
Contoh Pemakaian tata letak heading Heading 1 dan diletakkan di tengah
Heading 2 dan diletakkan di kiri
Heading 3 dan diletakkan di kanan
Hasilnya seperti gambar berikut :
13
2.9 Penggaris Mendatar Sebuah
garis
dapat
disisipkan
dalam
dokumen
web,
umumnya digunakan sebagai pemisah antarbagian atau paragraf. Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).Tag < hr> disisipkan pada tempat garis akan disisipkan dalam dokumen. Perhatikan program berikut : Contoh Pemakaian Garis Mendatar
Fakultas Matematika FMIPA Universitas Negeri Malang Terdiri dari 4 Jurusan yaitu :
Jurusan Matematika
Jurusan Fisika
Jurusan Kimia
Jurusan Biologi
Hasilnya, setiap jurusan dibatasi oleh sebuah garis mendatas. Garis itu sebagai hasil dari tag
14
2.10 Komentar Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak ditampilkan dalam browser. Komentar disisipkan pada section body, diletakkan pada bagianbagian teks dokumen yang memang perlu dikomentari. Komentar ini umumnya sebagai catatan untuk menyajikan dokumen pada masa mendatang. Tag komentar dapat digunakan untuk menyembunyikan sebagian dokumen web. Bisa jadi karena belum adanya kepastian dari isi dokumen yang akan dipublikasi terutama dari aspek legal; perlu ada approval sebelum bisa dipublikasikan. Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag sebagai akhir tag. Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garing sebelumnya. Perhatikan program berikut :
Contoh Pemakaian Komentar Jurusan Matematika FMIPA Universitas Negeri Malang
Apabila dijalankan, maka bagian komentar tidak akan ditampilkan dalam web browser, seperti gambar berikut :
15
2.11 Catatan Tips yang Berguna Pada saat Anda menuliskan teks HTML, Anda tidak pernah mendapat kepastian bagaimana teks ditampilkan pada berbagai browser. Beberapa mempunyai display yang besar, beberapa lagi kecil. Teks akan diformat ulang setiap saat pemakai melakukan resize Window. Jangan mencoba memformat teks dalam editor dengan menambahkan baris dan spasi kosong ke dalam teks. Menggunakan tag untuk menyisipkan baris kosong merupakan kebiasaan buruk. Gunakan tag
sebagai gantinya (tapi jangan gunakan
untuk membuat list. Jangan lupa untuk memberikan
pada setiap paragraf. HTML otomatis menambahkan baris kosong sebelum atau sesudah beberapa elemen, seperti sebelum dan sesudah paragraf.
16
2.12 Latihan 1.
Tuliskan potongan program html berikut dan jalankan dengan mengggunakan
sebuah
web
browser
(simpan
dengan
namalatihan21.html) Latihan21 Belajar bahasa pemgrograman web. Dengan materi dasar HTML. Dan JSP.
Belajar bahasa pemrograman web.
Dengan materi dasar HTML.
Dan JSP.
2.
Tuliskan potongan program html berikut dan jalankan dengan mengggunakan sebuah web browser (latihan22.html) Latihan22 Tampilan teks sebelum paragraf. Pertama Tanya Nama
Kedua Tanya Alamat dan No. Hp
Ketiga Terserah Anda
Tampilan teks setelah paragraf.
3.
Tuliskan potongan program html berikut dan jalankan dengan mengggunakan sebuah web browser (latihan23.html) Latihan2-3 Paragraf ini pada posisi rata kiri (default)
Viva Forever Math UM
Viva Forever Math UM
Viva Forever Math UM
17
BAB 3 FORMAT TEKS PADA HTML Menebalkan Huruf / Elemen B (Bold) Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold). ..........................
Sebagai contoh perhatikan program berikut Contoh Pemakaian Huruf Tebal / Bold Jurusan Matematika FMIPA Universitas Negeri Malang
Adalah Jurusan Terfavorit di UM untuk Mencetak Lulusan Yang Handal
Maka hasilnya, teks yang diapit dengan tag dan akan ditulis dengan huruf tebal seperti terlihat pada gambar berikut :
18
Membuat Huruf Miring / Elemen I (Italic) Element I berfungsi untuk membuat tampilan teks tercetak miring (italic). ..........................
Sebagai contoh perhatikan program berikut Contoh Pemakaian Huruf Italic Jurusan Matematika FMIPA Universitas Negeri Malang
Adalah Jurusan Terfavorit di UM untuk Mencetak Lulusan Yang Handal
Maka hasilnya, teks yang diapit dengan tag dan akan ditulis dengan huruf miring / italic seperti terlihat pada gambar berikut :
19
Membuat Huruf Bergaris Bawah / Elemen U (Underline) Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline). ..........................
Sebagai contoh perhatikan program berikut Contoh Pemakaian Huruf Underline Jurusan Matematika FMIPA Universitas Negeri Malang
Adalah Jurusan Terfavorit di UM untuk Mencetak Lulusan Yang Handal
Maka hasilnya, teks yang diapit dengan tag dan akan ditulis dengan huruf bergaris bawahh / underline seperti terlihat pada gambar berikut :
20
Membuat Huruf Superscript Element Superscript berfungsi untuk membuat tampilan teks tercetak di atas (sup) dari teks sebelumnya. Elemen ini sangat berguna untuk menuliskan
rumus
matematika
atau
lainnya
yang
perlu
teks
superscript. <sup> ..........................
Sebagai contoh perhatikan program berikut Contoh Pemakaian Superscript Jurusan Matematika FMIPA <sup>Universitas Negeri Malang
Adalah Jurusan Terfavorit di UM untuk Mencetak Lulusan Yang Handal
Maka hasilnya, teks yang diapit dengan tag <sup> dan akan ditulis dengan posisi lebih tinggi (sup) seperti terlihat pada gambar berikut :
21
Membuat Huruf Subscript Element Subscript berfungsi untuk membuat tampilan teks tercetak di bawah (sub) dari teks sebelumnya. Elemen ini sangat berguna untuk menuliskan
rumus
matematika
atau
lainnya
yang
perlu
teks
superscript. <sub> ..........................
Sebagai contoh perhatikan program berikut Contoh Pemakaian Subscript Jurusan Matematika FMIPA <sub>Universitas Negeri Malang
Adalah Jurusan Terfavorit di UM untuk Mencetak Lulusan Yang Handal
Maka hasilnya, teks yang diapit dengan tag <sub> dan akan ditulis dengan posisi lebih rendah (sub) seperti terlihat pada gambar berikut :
22
ELEMENT PRE (Preformated text) Element PRE berfungsi untuk menampilkan teks seperti apa adanya. <pre> ..........................
Sebagai contoh perhatikan program berikut
Contoh Pemakaian Huruf Tebal / Bold <pre> Jurusan Matematika FMIPA UM Memang OK Jurusan Matematika FMIPA UM Memang OK Jurusan Matematika FMIPA UM Memang OK
Maka hasilnya teks ditulis apa adanya sesuai dengan tulisan di editor programnya.
23
3.7. Element Basefont Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup
.Sebagai contoh perhatikan program berikut Contoh Pemakaian Teks Teks Teks Teks Teks Teks Teks
BaseFont ini ini ini ini ini ini ini
mempunyai mempunyai mempunyai mempunyai mempunyai mempunyai mempunyai
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Maka hasilnya, teks dengan basefont lebih besar akan ditulis lebih besar juga seperti terlihat pada gambar berikut :
24
Element Font Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel)
..........................
.Sebagai contoh perhatikan program berikut
Contoh Pemakaian Format Font Jurusan Matematika FMIPA UM ditulis dengan font Arial Warna Merah besar 10 pixel
Jurusan Matematika FMIPA UM ditulis dengan font Verdana Warna Merah besar 8 pixel
Jurusan Matematika FMIPA UM ditulis dengan font Courier New Warna Merah besar 6 pixel
25
3.8 Latihan 1. Menampilkan teks dalam format tebal, miring dan garis bawah: Ini normal teks Ini teks tercetak tebal (bold) Ini teks tercetak miring (italic) Ini teks tercetak garis bawah (underline) 2. Menampilkan teks dalam bentuk apa adanya (element PRE): Ini bentuk penulisan preformated text apapun bentuknya tulisan ini akan ditampilkan pada web browser seperti apa adanya, alias yang ditulis 3. Menampilkan teks dengan menggunakan element FONT: Teks dengan format color=fuchia; size=+2; face=verdana Teks dengan format color=gray; size=6; face=algerian Teks dengan format color=red; size=-1; face=impact
26
BAB 4 BULLETING DAN NUMBERING
4.1 Elemen OL (Orderd List) Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.
........................
Sebagai contoh perhatikan program berikut <Title> Belajar Odered List Fakultas Matematika Dan Ilmu Pengetahuan Alam Terdiri Dari Jurusan
List Dengan Angka
- Jurusan Matematika
- Jurusan Fisika
- Jurusan Kimia
- Jurusan Biologi
Maka hasilnya seperti terlihat pada gambar berikut. Terlihat, jurusan ditulis dengan menggunakan ordered list dengan angka :
27
Sekarang ordered list dirubah dengan menggunakan tipe ―A‖, maka akan menjadi <Title> Belajar Odered List Fakultas Matematika Dan Ilmu Pengetahuan Alam Terdiri Dari Jurusan
List Dengan Angka
- Jurusan Matematika
- Jurusan Fisika
- Jurusan Kimia
- Jurusan Biologi
28
Sekarang ordered list dirubah dengan menggunakan tipe ―I‖, maka akan menjadi <Title> Belajar Odered List Fakultas Matematika Dan Ilmu Pengetahuan Alam Terdiri Dari Jurusan
List Dengan Romawi Besar
- Jurusan Matematika
- Jurusan Fisika
- Jurusan Kimia
- Jurusan Biologi
29
4.2 Element UL (Unordered List) Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.
type="circle"|"square"|"disc"> ..........................
Sebagai contoh perhatikan program berikut <Title> Belajar Unodered List Fakultas Matematika Dan Ilmu Pengetahuan Alam Terdiri Dari Jurusan
List Dengan Bulleting Circle
- Jurusan Matematika
- Jurusan Fisika
- Jurusan Kimia
- Jurusan Biologi
30
Maka hasilnya seperti terlihat pada gambar berikut. Terlihat, jurusan ditulis dengan menggunakan unordered list dengan circle :
Antara ordered list dengan unodered list dapat digabung. Perhatikan contoh berikut : <Title> Belajar Odered List Fakultas Matematika Dan Ilmu Pengetahuan Alam Ter
List Dengan Angka
- Jurusan Matematika
- Program Studi Pend Matematika
- Program Studi Matematika
- Jurusan Fisika
- Program Studi Pend Fisika
- Program Studi Fisika
- Jurusan Kimia
- Jurusan Biologi
31
Hasilnya sebagai berikut :
4.3 Latihan 1. Menampilkan teks dengan daftar urut (element OL): DAFTAR MATA KULIAH YANG DIKELUARKAN PADA SEMESTER INI : 1. DASAR PEMROGRAMAN KOMPUTER 2. PERSAMAAN DIFERENSIAL BIASA 3. ANALISIS RIIL 4. DESAIN WEB 5. KECERDASAN BUATAN 6. PENGOLAHAN CITRA DIGITAL 7. ALJABAR ABSTRAK
2. Menampilkan teks dengan daftar urut (element OL): DAFTAR MATA KULIAH YANG DIKELUARKAN PADA SEMESTER INI : A. DASAR PEMROGRAMAN KOMPUTER B. PERSAMAAN DIFERENSIAL BIASA C. ANALISIS RIIL D. DESAIN WEB E. KECERDASAN BUATAN F. PENGOLAHAN CITRA DIGITAL G. ALJABAR ABSTRAK
32
3. Menampilkan teks dengan daftar tidak urut (element UL): MANFAAT INTERNET BAGI PELAJAR DAN MAHASISWA REFERENSI BELAJAR PENGEMBANGAN DIRI LEBIH MENGENAL INFORMASI TEMPAT UNTUK CARI KERJA MEMBANGUN RELASI DARI SOSIAL NETWORK MENAMBAH WAWASAN
4. Menampilkan teks dengan daftar urut dan tidak urut (element OL dan UL): FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM TERDIRI DARI JURUSAN-JURUSAN SEBAGAI BERIKUT : 1. JURUSAN MATEMATIKA Program Studi Matematika Program Studi Pendidikan Matematika 2. JURUSAN FISIKA Progam Studi Pendidikan Fisika Program Studi Fisika 3. JURUSAN KIMIA Program Studi Pendidikan Kimia Program Studi Kimia 4. JURUSAN BIOLOGI Program Studi Pendidikan Biologi Program Studi Biologi
6
33
BAB 5 link dalam html Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan/atau gambar menuju ke dokumen nl MM bagian lain dalam suatu dokumen. Browser web akan menyorot i 'highlight') teks atau gambar yang diidentifikasi sebagai link dengan warna / atau garis untuk menunjukkan bahwa itu adalah livpctteks link (sering diperpendek dengan hyperlink atau link saja). Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan dengan dokumen lain dalam web
5.1
Tag Anchor
HTML menggunakan tag untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubungan dalam HTML adalah dengan menggunakan tag , atribut href digunakan untuk mendefinisikan lokasi link. Anchor berikut menunjuk Microsoft: Situsnya Microsoft . Ada tiga jenis link: link relatif link absolut link dalam dokumen yang sama
Perbedaan keduanya hanya pada letak dokumen yang menjadi linknya, berada pada komputer yang sama atau tidak. Perhatikan contoh program berikut : <Title> Belajar Membuat Link Absolute Apabila Anda ingin mengecek apakah Operating System Windows terregistrasi atau tidak, Anda dapat mengakses Situsnya Microsoft.
34
Dari program di atas, Anda akan mendapatkan tampilan sebagai berikut :
Perhatikan teks yang bergaris bawah, itulah yang dinamakan dengan link absolut. Apabila web anda terhubung dengan jaringan internet online maka apabila teks tersebut di klik maka akan mengakses situsnya Mcrosoft.
5.2
Link Relatif Dibuat apabila Anda membuat suatu link pada page Anda ke page lain
pada komputer yang sama, tidak memerlukan menggunakan alamat Internet yang lengkap. Jika dua page pada direktori yang sama, Anda dapat menuliskan nama file html seperti berikut:
href="file_2.html">Berikutnya
Perhatikan dua buah web berikut (latihan 52.html dan latihan 53.html). pada web latihan52,html terdapat teks yang akan dihubungkan (link) dengan web latihan53.html
35
<Title> Belajar Membuat Link Relatif Berikut ini Daftar Riwayat Hidup Pejabat Jurusan Matematika FMIPA UM
Ketua Jurusan
Sekretaris Jurusan
Kepala Laboratorium
Bagian
yang
dicetak
tebal
merupakan
link
menghubungkan dengan file latihan53.html. Apabila
relatif
untuk
program di atas
dijalankan akan didapatkan hasil sebagai berikut :
Berikut ini file latihan53.html :
<Title> Belajar Membuat Link Relatif Daftar Riwayat Hidup Ketua Jurusan Matematika FMIPA UM Tahun 2011
Nama : Prof. Dr. H. Toto Nusantara, M.Si
NIP : 131943812
Pendidikan :
S1 : IKIP Malang Tahun 1990
S2 : ITB Bandung Tahun 1994
S3 : ITB Bandung Tahun 2001
36
Dengan keluaran program sebagai berikut :
5.3 Link ke Bagian Lain dalam Dokumen Link sehingga
jenis ini dibuat apabila untuk dokumen yang panjang sekali apabila ditampilkan dalam browser web akan mengharuskan kita
melakukan scroll
layar
berulang-ulang.
Navigasi
untuk penulusuran
dokumen dapat dimudahkan dengan membuat link antarbagian dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat didalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakan link untuk menuju bagian – bagian tersebut.
Umumnya teknik ini digunakan pada dokumen-dokumen yang menampilkan daftar isi dokumen tersebut, kemudian pada daftar tersebut dimungkinkan untuk diklik secara langsung menuju isinya. Berikut ini sebuah contoh program yang menggunakan link pada halaman yang sama
37
<Title> Belajar Membuat Link Pada Bagian Dokumen Yang Sama Cara Menerapkan Pendidikan Karakter
Model Otonom
Model Integrasi
Model Otonom
Model otonomi yang memposisikan pendidikan karakter sebagai mata sebuah pelajaran tersendiri menghendakiadanya rumusan yang jelas seputar standar isi, kompetensi dasar, silabus, rencana pembelajaran, bahan ajar,metodologi dan evaluasi pembelajaran. Jadwal pelajaran dan alokasi waktu merupakan konsekuensi lain dari model ini.
Model Integrasi
Ada pun model ke dua yang mengintegrasikan pendidikan karakter dengan seluruh mata pelajaran ditempuh dengan paradigma bahwa semua guru adalah pengajar karakter (character educator).
Dengan output program sebagai berikut :
38
39
BAB 6 TABEL DAlam html
6.1 Element Table Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding(jarak antara tepi sel dengan isi sel), cellspacing(jarak antara sel), width(lebar tabel), height(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD
6.2 ELEMENT CAPTION Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top(judul terletak di atas tabel), dan bottom(judul terletak di bawah tabel) ..........................
6.3 ELEMENT TR (Table Row) Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign(posisi vertikal), dan bgcolor.
40
..........................
6.4 ELEMENT TH (Table Header) dan TD (Table Data) Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan
.......................... | .......................... |
Berikut ini contoh penggunaan element tabel
41
<TITLE> TABEL NILAI MATA KULIAH DESAIN WEB OFF B-B TABEL NILAI MATA KULIAH DESAIN WEB
PRODI PENDIDIKAN MATEMATIKA OFF B-B
NAMA MAHASISWA | NILAI |
NOVI | 95 |
RIZKY | 98 |
IMAM | 100 |
42
<TITLE>JURUSAN MATEMATIKA FMIPA UM MALANG JURUSAN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS NEGERI MALANG
TABEL PERKEMBANGAN PEMINAT DAN DAYA TAMPUNG JURUSAN MATEMATIKA FMIPA UM TAHUN 2003-2006 TAHUN | PEMINAT | DAYA TAMPUNG |
2003 | 500 | 30 |
20043 | 1500 | 40 |
43
6.5 Latihan 1. Buat tabel untuk teks di bawah ini: Nomor
Nama
1 2 3 4
Ali Nurdin Siti Maryam Inneke Koeherawati Ikke Nurjanah
2. Dari Latihan 1 gantilah warna background baris tabel menjadi baris1=green baris-2=yellow baris-3=red baris-4=blue
3. Buat tabel untuk teks di bawah ini: TABEL NILAI MATA KULIAH DESAIN WEB PRODI PENDIDIKAN MATEMATIKA OFF B-B
NIM
NAMA MAHASISWA
NILAI
N. HURUF
123
NOVI
95
A
234
RIZKY
98
A
345
IMAM
100
A
456
GOGON
70
B
44
MODUL PRAKTIKUM DESAIN WEB
Oleh MOHAMAD YASIN, S.Kom, M.Kom,
JURUSAN MATEMATIKA FMIPA
UNIVERSITAS NEGERI MALANG 2011
45