Belajar Dasar HTML - 1-Libre
description
Transcript of Belajar Dasar HTML - 1-Libre
-
i | P e m r o g r a m a n W e b H T M L
----------BELAJAR DASAR HTML----------
Penyusun :
Niswatul Marifah S.Kom
I Putu Gede Sadu Jayanatha
Penerbit :
Niswaka Publisher
Tata Letak dan Desain Sampul :
I Putu Gede Sadu Jayanatha
Cetakan Pertama
ISBN :
-----ISBN----
Copyright 2014
Hak Cipta dilindungi undang-undang
All right reserved
-
ii | P e m r o g r a m a n W e b H T M L
Kata Pengantar Puji syukur kepada Tuhan yang maha esa karena berkatnyalah buku Belajar Dasar HTML bisa terwujud dan
terselesaikan dengan baik.
Kemajuan teknologi internet/intranet dewasa ini semakin cepat, karena itu sebagai bagian dari masyarakat IT
di Indonesia.Hal ini telah melahirkan sebuah tuntutan terhadap penguasaan dalam bidang pembuatan situs
web (web site). Sebuah website yang menarik dan interaktif dapat digunakan sebagai salah satu cara
meningkatkan image personal atau perusahaan.
Perlu kiranya kami sebagai penulis untuk ikut membantu mempercepat perkembangan ini. Walaupun
demikian, kami tidak menutup mata bahwa buku ini tentu saja masih banyak kekurangan. Karena itu, sebagai
penulis kami membutuhkan masukan dari rekan-rekan., pelajar, ataupun mahasiswa yang tertarik untuk
mempelajari IT khususnya mengenai WEB.
Pada masa kini programmer sangatlah diperlukan dalam dunia IT karena sangat banyaknya permintaan pasar
akan aplikasi berbasi WEB atau sebuah web site karena sekarang adalah zaman IT yang memerlukan
programmer-programmer yang memiliki skill dan kemauan untuk belajar.
Mudah-mudahan dengan adanya buku ini, akan lebih banyak lagi perkembangan dalam implementasi aplikasi
berbasis WEB di Indonesia dan menghasilkan bibit-bibit programmer web yang memiliki skill yang mumpuni.
Tidak lupa kami ucapkan terima kasih kepada Niswaka Publisher yang sudah membantu dalam penerbitan
buku ini.
Denpasar, Juni 2014
Penyusun
-
iii | P e m r o g r a m a n W e b H T M L
DAFTAR ISI Kata pengantar .............................................................................................................................. ii
Daftar Isi ........................................................................................................................................ iii
BAB 1 Pengenalan HTML .................................................. 1
1.1 Teori Dasar HTML ............................................................................................................... 1
1.2 Apa Itu Dokumen HTML ..................................................................................................... 1
1.3 Penamaan Dokumen .......................................................................................................... 1
1.4 Definisi Elemen ................................................................................................................... 2
1.5 Definisi Tag ......................................................................................................................... 2
1.6 Elemen HTML yang Dibutuhkan ......................................................................................... 2
1.7 Pembuatan Web HTML yang sederhana ............................................................................ 3
1.8 Petunjuk menggunakan Tag ............................................................................................... 4
1.9 Atribut Tag .......................................................................................................................... 5
1.10 Tips : Belajar HTML lewat source HTML lain ...................................................................... 5
BAB 2 Tag-tag Dasar HTML .............................................. 6
2.1 HTML .................................................................................................................................. 6
2.2 HEAD ................................................................................................................................... 6
2.3 TITLE ................................................................................................................................... 7
2.4 BODY ................................................................................................................................... 7
2.5 HEADING............................................................................................................................. 8
2.6 PARAGRAF .......................................................................................................................... 8
2.7 LINE BREAK ......................................................................................................................... 9
2.8 HORIZONTAL RULER ........................................................................................................... 9
2.9 KOMENTAR ......................................................................................................................... 10
2.10 PENGGABUNGAN TAG DASAR HTML ................................................................................. 11
BAB 3 Format Teks HTML ................................................. 13
3.1 Pemformatan Teks .......................................................................................................... 13
3.2 Teks Preformat ................................................................................................................ 15
3.3 Computer Output ............................................................................................................ 16
3.4 Address ............................................................................................................................ 18
3.5 Singkatan ......................................................................................................................... 19
-
iv | P e m r o g r a m a n W e b H T M L
3.6 Arah teks .......................................................................................................................... 21
3.7 Quotation ........................................................................................................................ 22
3.8 Teks yang disisipkan atau dihapus ................................................................................... 23
3.9 Fontasi ............................................................................................................................. 25
BAB 4 Entitas Karakter HTML ........................................... 26
4.1 Pengertian ....................................................................................................................... 26
4.2 Entitas Karakter yang sering digunakan .......................................................................... 27
BAB 5 Link HTML .............................................................. 28
5.1 Tag Anchor ....................................................................................................................... 28
5.2 Link Relatif ....................................................................................................................... 28
5.3 Link Absolut ..................................................................................................................... 28
5.4 Link ke Bagian lain dalam Dokumen ................................................................................ 29
5.5 Link .................................................................................................................................. 29
5.6 Membuka Link untuk windows baru ............................................................................... 30
5.7 Link pada lokasi di halaman sama ................................................................................... 31
5.8 Keluar dari suatu frame ................................................................................................... 34
5.9 Link yang tidak digaris bawahi ......................................................................................... 35
5.10 Mailto .............................................................................................................................. 36
BAB 6 List HTML ............................................................... 38
6.1 Contoh List ....................................................................................................................... 38
6.2 Ordered List ..................................................................................................................... 40
6.3 Unordered List ................................................................................................................. 42
6.4 Nested List ....................................................................................................................... 43
BAB 7 Image HTML ........................................................... 45
7.1 Mengatur ukuran gambar ............................................................................................... 46
7.2 Alignment Image ............................................................................................................. 46
7.3 Teks Alternatif untuk Image ............................................................................................ 47
BAB 8 TABEL HTML ........................................................... 48
8.1 Border Tabel .................................................................................................................... 50
8.2 Tabel dengan Caption ...................................................................................................... 51
8.3 Header ............................................................................................................................. 52
-
v | P e m r o g r a m a n W e b H T M L
8.4 Colspan dan Rowspan ...................................................................................................... 53
8.5 Cellpadding ...................................................................................................................... 54
8.6 Cellspacing ....................................................................................................................... 55
8.7 Background tabel ............................................................................................................. 56
8.8 Background Sel tabel ....................................................................................................... 57
8.9 Mengatur alignment isi sel .............................................................................................. 58
8.10 Tabel dalam tabel ............................................................................................................ 59
BAB 9 FRAME HTML ......................................................... 61
9.1 Target Frame ................................................................................................................... 61
9.2 IFRAME ............................................................................................................................ 61
9.3 Frame Kolom ................................................................................................................... 62
9.4 Frame Baris ...................................................................................................................... 62
9.5 Frame Campuran ............................................................................................................. 63
9.6 Frame Navigasi ................................................................................................................ 64
9.7 Frame Inline ..................................................................................................................... 65
BAB 10 FORM DAN INPUT HTML ...................................... 67
10.1 Method ............................................................................................................................ 67
10.2 Jenis-jenis Input dalam Form ........................................................................................... 67
10.3 Contoh-contoh Input ....................................................................................................... 69
10.4 Tag-tag form .................................................................................................................... 77
DAFTAR PUSTAKA ............................................................ 79
-
1 | P e m r o g r a m a n W e b - H T M L
BAB 1
Pengenalan HTML
1.11.11.11.1 Teori Dasar HTMLTeori Dasar HTMLTeori Dasar HTMLTeori Dasar HTML Untuk membangun sebuah web page dibutuhkan sebuah Bahasa pemrograman yang lebih dikenal dengan
sebutan web scripting. Dikatakan script karena perintah kode program tersebut akan di interpreter dan tidak ada
kompilasi untuk menjadikannya executable . Berdasarkan letak proses interpreter maka web scripting dibagi
menjadi dua kategori, yaitu bersifat client side dan server side. Cliend side dilakukan oleh web browser seperti
Internet Explorer, Netscape, Opera, dan Firefox. Untuk contoh Bahasa Client side adalah HTML, CSS, Javascript,
VBscript, dan XML. Sedangkan server side dilakukan oleh web server seperti PWS (Personal Web Server), IIS,
Apache, Tomcat, Xitami, dan ZOPE. Untuk contoh Bahasa server sode adalah ASP (.Net), PHP, JSP, CFM, dan
CGI/PL.
Web Scripting yang bersifat client side akan menghasilkan web page yang bersifat statis artinya lebih
menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat diupdate seketika,
karena tidak dapat dilakukan request interaktif dari pengguna dan proses tidak terjadi di server sehingga tidak
akan menghasilkan output apa pun. Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang
bersifat dinamis dengan web scripting bersifat clien side ini, tetapi harus di kombinasikan juga dengan web
scripting yang bersifat server side.
1.21.21.21.2 Apa itu DokumenApa itu DokumenApa itu DokumenApa itu Dokumen HTMLHTMLHTMLHTML???? HTML atau Hypertext Markup Language adalah Bahasa dasar untuk web scripting bersifat client side yang
memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga
menghubungkan antar tampilan web (Hyperlink).. HTML merupakan salah satu format yang digunakan dalam
pembuatan dokumen dan aplikasi berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen
HTML merupakan dokumen yang disajikan pada web browser.
Ada dua cara untuk membuat sebuah web page,yaitu dengan HTML editor yang berbasis GUI (Graphical User
Interface) (misalnya Microsoft Frontpage, Macromedia Dreamweaver, Adobe Dreamweaver, dll) atau dengan
editor teks biasa (misalnya Notepad, Edit Plus, dll).Pada HTML editor berbasis GUI program-program ini anda
tidak perlu mengetik kode HTMLnya, semua perintahnya di wujudkan secara icon base.Tetapi bagi seorang
pengembang aplikasi web maka diperlukan kemampuan penguasaan terhadap kode-kode HTML sangatlah
penting, sehingga sangatlah disarankan untuk menguasai kode peintah HTML pergunakanlah terlebih dahulu
editor text (misalnya Notepad)
1.31.31.31.3 Penamaan DokumenPenamaan DokumenPenamaan DokumenPenamaan Dokumen Dalam penamaan sebuah dokumen yang akan ditampilkan pada web browser maka nama yang digunakan harus
diakhiri dengan ektensi (.html) atau (.htm), misalnya latihan.html.
Ekstensi dokumen HTML awalnya 3 karakter , adalah untuk mengakomodasikan sistem penamaan dalam
DOS.Nama dokumen pada beberappa system operasi bersifat case sensitive , artinya nama yang sama tetapi
dituliskan dengan case berbeda akan dianggap sebagai dokumen berbeda,misalnya document.html akan
dianggap berbeda dengan DOKUMEN.html. Kasus case sensitive sering dijumpai di server yang berbasis *nix
(sistem operasi Unix)
-
2 | P e m r o g r a m a n W e b - H T M L
1.41.41.41.4 Definisi ElemenDefinisi ElemenDefinisi ElemenDefinisi Elemen
Sebuah dokumen HTML disusun oleh beberapa Elemen. Elemen merupakan istilah bagi komponen-
komponen dasar pembentuk dokumen HTML. Elemen dapat berupa teks murni, atau bukan teks, atau
keduanya. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list.
1.51.51.51.5 Definisi TagDefinisi TagDefinisi TagDefinisi Tag Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML terdiri dari [()] contohnya , tag pada umumnya berpasangan dalam tag HTML ada tag pembuka yaitu
dan ada tag penutup yaitu ,tag penutup ditandai dengan tanda slash atau garis miring ( / ) di awal
tulisannya.Tag tersebut di atas memberikan kaidah bahwa yang akan ditulis di antara kedua tag tersebut adalah
isi dari dokumen HTML.
Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut
diantaranya :
- Paragraf dengan tag
- Ganti baris/Line Break dengan tag
- Garis datar/Horizontal Rule dengan tag
- List item dengan tag
Secara umum penulisan sebuah tag adalah selain itu dalam penamaan tag tidak
menganut case sensitive,artinya huruf yang digunakan tidak sensitive antara huruf kapital dan tidaknya.Contoh
tag dengan .
1.61.61.61.6 Elemen HTML yang DibutuhkanElemen HTML yang DibutuhkanElemen HTML yang DibutuhkanElemen HTML yang Dibutuhkan Elemen dasar yang harus dimiliki sebuah dokumen HTML untuk membuat dokumen tersebut dapat dibaca yaitu
tag , , dan berikut tag pasangannya.
Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga
setiap dokumen harus mempunyai pola dasar sebagai berikut :
..informasi dokumen..
..informasi yang di tampilkan pada halaman browser..
-
3 | P e m r o g r a m a n W e b - H T M L
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. Elemen ini berisi
informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari
dokumen, judul ni akan ditampilkan pada caption bar dari Browser, ditandai dengan menggunakan tag
dan di akhiri dengan .
Section atau Elemen body ditandai dengan tag diawal, dan tag di akhr. Section ini merupakan
elemen terbesar di dalam dokumen html. Elemen body berisi isi dokumen yang akan ditampilkan di Web
Browser, meliputi paragraf, grafik, link, tabel, dll.
1.71.71.71.7 Pembuatan Web HTML sederhanaPembuatan Web HTML sederhanaPembuatan Web HTML sederhanaPembuatan Web HTML sederhana Hal yang dibutuhkan dalam pembuatan web HTML adalah sebagai berikut :
Sebuah computer yang bisa membuka web. Minimal dengan OS Windows 95/98/NT, Mac, atau Unix.
Editor Text, Notepad atau yang lainnya
Browser web, direkomendasikan Mozila Firefox atau Google Chrome
Imajinasi untuk membangun website sendiri
Mencoba adalah kunci dari cara belajar HTML ini untuk mengetahui langsung apa yang dihasilkan dari setiap
tag yang digunakan untuk membuat dan mudah diingat.
Pertama yang harus anda lakukan adalah membuka Editor Text, misalnya Notepad.
Tuliskan kode berikut ke dalam Notepad :
Hasil dari kode di atas
Judul Halaman
Cara membuat web sederhana. Teks Lain
-
4 | P e m r o g r a m a n W e b - H T M L
Catatan :
Biasakan pada saat menulis tag,tulis tag pembuka dan penutup secara berurutan karena pada sebuah kasus
ada orang yang lupa memberi tag penutup.Biasakan juga pada saat menulis kode html tag pembuka dan
penutup sejajar karena akan sangat memudahkan pada saat memeriksa kesalahan.
1.8 Petunjuk1.8 Petunjuk1.8 Petunjuk1.8 Petunjuk menggunakan Tagmenggunakan Tagmenggunakan Tagmenggunakan Tag Dalam pembuatan dokumen HTML, penulisan elemen diawali dan diakhri dengan tanda tag HTML memiliki
syarat yaitu :
Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) []
Tag HTML secara normal selalu berpasangan seperti dan
Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir
Tag html tidak case sensitive. Seperti sama dengan
Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut. Misalnya
Huruf tebal dab miring
Gunakan tag dengan huruf kecil (lowercase) karena untuk menyiapkan diri menggunakan HTML berikutnya
(Rekomendasi W3C)
-
5 | P e m r o g r a m a n W e b - H T M L
1.9 Atribut Tag1.9 Atribut Tag1.9 Atribut Tag1.9 Atribut Tag Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk
mengubah default pemformatan dokumen dengan tag yang bersangkutan.Atribut yang dipakai tidak memiliki
urutan pendefinisian tertentu.
Tag berikut tidak mempunyai Atribut: . Tag ini tidak menggunakan atribut, sehingga dokumen
HTML ditampilkan secara default dari tampilan HTML.
Tag
-
6 | P e m r o g r a m a n W e b - H T M L
BAB 2
Tag-tag Dasar HTML Tag dasar berarti elemen dasar.Dokumen HTML secara mendasar akan terdiri atas teks informasi.
Judul atau topic utama dokumen disimpan dalam section/elemen head, disimpan dalam elemen title, dengan
tag .. . Title ini akan ditampilkan pada caption bar dari Web Browser. Hanya elemen title saja
dari elemen head yang ditampilkan di browser, elemen lainnya dari head tidak ditampilkan, sebagai elemen yang
menjelaskan tentang dokumen HTML yang bersangkutan.
Teks informasi ini akan disimpan dalam section/eklemen body, di dalam tag dan . Teks disusun
dalam paragraparagraf dengan tag . Teks juga mempunyai judul-judul yang menunjukan topic-topik atau
bagian-bagian dalam dokumen judul disebut sebagai heading. Heading di dalam HTML mempunya level (1
sampai 6), dinyatakan dengan tag sampai dengan , demikian juga pasangannya sampai dengan
. Untuk lebih jelasnya mari kita bahas di Materi ini
2.1 2.1 2.1 2.1 HTMLHTMLHTMLHTML Merupakan tag dasar yang mendefinisikan bahwa dokumen adalah dokumen HTML. Tag ini sebagai tag pertama
dalam dokumen HTML. Penulisan tag HTML seperti berikut :
2.2 HEAD2.2 HEAD2.2 HEAD2.2 HEAD Merupakan tag berikutnya setelah tag html, digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan. Penulisan tag head seperti berikut :
-
7 | P e m r o g r a m a n W e b - H T M L
2.3 TITLE2.3 TITLE2.3 TITLE2.3 TITLE Merupakan tag di dalam head yang digunakan untuk menuliskan judul dari dokumen HTML, yang akan muncul pada caption halaman browser jika halaman tersebut diakses. Penulisan tag seperti berikut :
2.4 Body2.4 Body2.4 Body2.4 Body Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang akan ditampilkan dalam browser harus dituliskan. Penulisan tag seperti berikut :
Judul Dokumen
Judul Dokumen
Isi Dokumen
-
8 | P e m r o g r a m a n W e b - H T M L
2.5 HEADING2.5 HEADING2.5 HEADING2.5 HEADING Tag heading (hx) digunakan untuk memformat heading (judul dan subjudul) dari suatu halaman web. Ada enam
buah heading yang di kenal HTML, yaitu dari Heading 1 (h1) sampai dengan Heading 6 (h6). Penulisan tag sebagai berikut :
2.6 Paragraf2.6 Paragraf2.6 Paragraf2.6 Paragraf Tag paragraph berfungsi layaknya untuk pengaturan antar paragraph dalam halaman web anda. Dalam
elemen paragraph terdapat atribut :
Align= [left, center, right] yang berfungsi untuk pengaturan perataan paragraph, jadi anda cukup memilih salah
satu dari ketiga pilihan tanpa harus memberi kurung buka atau tutup, dan defaulnya adalah left.
Judul Dokumen
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
-
9 | P e m r o g r a m a n W e b - H T M L
Contoh
2.72.72.72.7 LINE BREAKLINE BREAKLINE BREAKLINE BREAK Line Break berfungsi untuk menambahkan Baris pada dokumen tetapi tidak berganti paragraf. Untuk
menampilkan suatu teks ditampilkan pada baris baru dalam suatu paragraph, maka harus digunakan tag
sebelum teks tersebut dituliskan pada kode. Penulisan tag sebagai berikut :
2.72.72.72.7 HORIZONTAL RULERHORIZONTAL RULERHORIZONTAL RULERHORIZONTAL RULER
Tag Horizontal Ruler berfungsi untuk menampilkan garis horizontal tiga dimensi di dalam Halaman web
anda. Tag horizontal ruler juga tidak memerlukan elemen penutup
Atribut elemen horizontal ruler :
Align : [left | center | right] default center
Judul Dokumen
----teks------, ----teks-----
Horizontal Ruler
Heading
..Isi Dokumen..
-
10 | P e m r o g r a m a n W e b - H T M L
Size : pixel (tebal garis, default 2)
Width : panjang (lebar garis, pixel atau persen, default 100%) noshade (garis solid)
Contoh :
2.8 Komentar2.8 Komentar2.8 Komentar2.8 Komentar Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan/komentar
terhadap dokumen itu sendiri. Catatan/komentar dalam dokumen ini tidak ditampilkan dalam browser.
Komentar disisipkan pada section body, dilektakkan pada bagian-bagian teks dokumen yang memang perlu di
komentari. Komentar ini umumnya catatan bagi develover web untuk mengingatkan jika diakses pada masa
mendatang.
Teks yang berfungsi sebagai komentar disimpan dalam dokumen ditandai dengan tag kemudian teks yang dikomentari, dan tag --> sebagai akhir tag. Khusus untuk tag komentar, tag penutup tidak
menggunakan tanda garis miring atau slash sebelumnya. Penulisan tag sebagai berikut :
Horizontal Ruler
Heading
Latihan
-
11 | P e m r o g r a m a n W e b - H T M L
2.9 Penggabungan Tag Dasar HTML2.9 Penggabungan Tag Dasar HTML2.9 Penggabungan Tag Dasar HTML2.9 Penggabungan Tag Dasar HTML Tag-tag diatas adalah tag dasar HTML,memiliki fungsi masing-masing pada HTML tersebut, jika semua tag
tersebut di gabung akan menjadikannya sebuah website sederhana. Untuk itu mari kita coba membuat Website
dengan kode berikut.
Pertama,buatlah kode dasar HTML pada Software text editor (Notepad)
Selanjutnya masukan tag-tag tersebut kedalam tag body seperti contoh dibawah ini
Hasil dari Kode diatas
Penggabungan Tag
Penggabungan Tag HTML
Pertama,buatlah kode dasar HTML pada Software text editor (Notepad)
Selanjutnya masukan tag-tag tersebut kedalam tag body seperti contoh dibawah ini.
-
12 | P e m r o g r a m a n W e b - H T M L
-
13 | P e m r o g r a m a n W e b - H T M L
BAB 3
Format Teks HTML Teks dalam dokumen web dapat diformat secara khusus untuk menunjukan perbedaan dan penekanan terhadap
isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk huruf tebal, miring (italic), garis
dibawahi, dan semacamnya.
3.1 Pem3.1 Pem3.1 Pem3.1 Pemformatan Teksformatan Teksformatan Teksformatan Teks Beberapa pemformatan teks :
Menebalkan huruf (bold)
Memiringkan huruf (italic)
Memberi tekanan pada teks (emphasize)
Membesarkan huruf
Mengecilkan huruf
Superscript
Subscript
Contoh ini mendemonstrasikan bagaimana anda dapat memformat teks dalam suatu dokumen HTML.
Pemformatan Text
Teks ini ditebalkan
Teks ini dimiringkan
-
14 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Teks ini tebal
Teks ini besar
Teks ini kecil
Teks ini emphasize
Teks ini berisi superscript
Teks ini berisi subcript
-
15 | P e m r o g r a m a n W e b - H T M L
3.2 Teks Preformat3.2 Teks Preformat3.2 Teks Preformat3.2 Teks Preformat Jarak Antarakata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu spasi. Jarak antarkata atau
kalimat di dalam browser web adalah satu spasi, berapa pun jumlah spasi ataupun jumlah baris dalam dokumen
web yang sesungguhnya.
Agar browser web menampilkan sesuai dengan komponen dokumen web tersebut di dalam editor teks, maka
teks yang bersangkutan harus diberi tanda tag di awalnya, dan di akhir teks yang bersangkutan.
Dengan tag , yang mempunyai kepanjangan preformatted, teks akan ditampilkan dalam browser dengan
ukuran font dengan lebar-fix. Tag ini menjaga spasi, baris baru, dan tab sesuai dengan aslinya pada saat
ditampilkan dalam browser. Salah satu penggunaan dari pre adalah untuk menampilkan suatu souce program
dalam web.
Contoh ini mendemostrasikan bagaimana anda dapan mengendalikan line break dan spasi dengan
menggunakan tag pre.
Preformat Text
void node::Remove()
{
If (prev)
Prev->next = next;
Else if (parent)
Parent ->Set Content (null);
If (next)
Next->prev = prev;
Parent = null;
}
-
16 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Dalam teks yang disisipkan dengan menggunakan tag kita masih bisa menyisipkan tag lain untuk
melakukan pemformatan, akan tetapi hal ini tidak direkomendasikan sama sekali.
3.33.33.33.3 Komputer OutputKomputer OutputKomputer OutputKomputer Output Komputer Output jenis dari format teks HTML yang berfungsi untuk mengatur bentuk/style tulisan agar
mengikuti Output dari Komputer.
Contoh ini akan mendemontrasikan bagaimana tag computer-output berbeda akan ditampilkan.
-
17 | P e m r o g r a m a n W e b - H T M L
Hasil dari Kode diatas
Computer Output
Computer Code
Input Keyboard
Teks Teletype
Teks Sample
Variable Komputer
-
18 | P e m r o g r a m a n W e b - H T M L
3.4 Address3.4 Address3.4 Address3.4 Address Alamat (Address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Dalam HTML disediakan
secara khusus tag address. Dengan adanya tag ini maka penulisan alamat dapat di Starndarkan.
Diawali dengan tag , dan diakhiri oleh tag . Setiap baris dalam penulisan alamat dipisahkan
dengan menggunakan Line Break dengan tag .
Contoh ini akan mendemontrasikan bagaimana menuliskan sebuah alamat di HTML.
Hasil dari kode diatas
Address
Unit Produksi
Jl.Bima 7
Denpasar
Indonesia
-
19 | P e m r o g r a m a n W e b - H T M L
3.5 Singkatan3.5 Singkatan3.5 Singkatan3.5 Singkatan Terkadang kita menuliskan suatu dokumen dan ada beberapa istilah yang kita gunakan dan dinyatakan dengan
menggunakan singkatan (akronim) saja. Tag dan tag dapat digunakan untuk menyimpan data
kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut, dengan menggunakan atribut
title.
Sintaks :
Dengan menggunakan tag tersebut di atas, maka pada saat mouse pointer (cursor) diarahkan ke atas singkatan
tersebut, pada saat dokumen HTML tersebut ditampilkan di web browser, maka kepanjangan dari singkatan
tersebut akan ditampilkan mengambang di atasnya.
singkatan singkatan
-
20 | P e m r o g r a m a n W e b - H T M L
Contoh ini akan mendemontrasikan bagaimana untuk menangani suatu singkatan atau akronim.
Hasil dari kode diatas
Singkatan HTML WWW
-
21 | P e m r o g r a m a n W e b - H T M L
3.6 Arah Teks3.6 Arah Teks3.6 Arah Teks3.6 Arah Teks Cara menuliskan teks dapat diubah dari default kiri ke kanan (left to right=ltr) menjadi dari kanan ke kiri (right
to left=rtl). Untuk mengatur hal tersebut kita gunakan tag - bidirectional override, yang merupakan tag
yang digunakan untuk mendefinisikan arah penulisan teks.
Contoh ini mendemonstrasikan bagaimana untuk mengubah arah teks.
Hasil dari kode diatas
Arah Teks Baca dari kanan Belajar HTML
-
22 | P e m r o g r a m a n W e b - H T M L
3.7 Quotation3.7 Quotation3.7 Quotation3.7 Quotation Suatau kutipan teks lazim ada dalam suatu dokumen, ada dua macam kutipan :
Kutipan pendek tag
Kutipan panjang tag
Tag digunakan untuk membuat sebagian teks yang dikutip sebagai blok sendiri. Kebanyakan
browser umumnya mengubah margin untuk kutipan teks tadi untuk memisahkan dari teks yang
mengelilinginnya.
Tag tidak melakukan sesuatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai kutipan,
kemudian kita menggunakan style sheet maka kutipan ini bisa diatur pemformatannya dengan menggunakan
style sheet.
Contoh ini mendemonstrasikan bagaimana untuk menangani Kutipan pada dokumen HTML
Hasil dari kode di atas
Kutipan Berikut adalah teks dengan quotation yang panjang: Quotequotequotequotequotequotequotequotequotequote quotequotequotequotequotequotequotequotequotequote quotequotequotequotequotequotequotequotequotequote quotequotequotequotequotequotequotequotequotequote quotequotequotequotequotequotequotequotequotequote Berikut adalah teks dengan quotation pendek: Quotequotequote
-
23 | P e m r o g r a m a n W e b - H T M L
3.8 Teks yang Disisipkan atau Dihapus3.8 Teks yang Disisipkan atau Dihapus3.8 Teks yang Disisipkan atau Dihapus3.8 Teks yang Disisipkan atau Dihapus Dalam suatu workflow lazim adanya suatu koreksi atas pekerjaan, koreksi terhadap suatu teks dapat
disimulasikan/ diperlihatkan dengan menggunakan tag dan tag untuk menunjukan hasil koreksi yang
disisipkan dan yang dihapus.
Contoh ini mendemonstrasikan bagaimana untuk menandai suatu teks yang dihapus dan disisipkan pada suatu
dokumen.
-
24 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Koreksi Siswa dinyatakan tidak lulus Lulus
-
25 | P e m r o g r a m a n W e b - H T M L
3.9 Fontasi3.9 Fontasi3.9 Fontasi3.9 Fontasi Untuk memodifikasi font digunakan tag sebagai pembuka dan tag sebagai penutup. Tag ini
mempunyai beberapa atribut, diantaranya adalah atribut size untuk menentukan besar ukuran huruf, atribut
color untuk menentukan warna serta atribut face untuk menentukan jenis hurufnya. Di dalam tag ont ini
dapat diberikan juga tag untuk mengatur efek cetak huruf seperti tag , dan sebagainya.
Contoh ini mendemonstrasikan bagaimana untuk membuat font yang sudah dimodifikasi
Hasil dari kode diatas
Ini adalah tulisan berjenis font Arial, ukuran 5 bercetak tebal, italic, underline,
-
26 | P e m r o g r a m a n W e b - H T M L
BAB 4
Entisitas Karakter HTML
4.1 Pengertian4.1 Pengertian4.1 Pengertian4.1 Pengertian Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil () yang berarti akhir tag HTML. Jika kita menginginkan browser untuk menampilkan karakter-
karakter tersebut, kita harus menyisipkan entitas karakter ke dalam source HTML.
Entitas karakter mempunyai 3 bagian, yaitu sebuah ampersand (&), sebuah nama entitas atau sebuah # dan
nomor entitas, dan terakhir adalah sebuah tanda titik koma (; / semicolon).
Untuk menampilkan tanda kali daklam sebuah dokumen HTML maka kita harus menuliskannya : atau
Kelebihan dengan menggunakan nama disbanding dengan nomor adalah mudah diingat.
Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru; sedangkan dukungan untuk
nomor etintas hamper pada setiap browser.
Catatan : Entitias HTML mempunyai sifat case sensitive.
Contoh ini mendemonstrasikan bagaimana untuk menggunakan entitas pada dokumen HTML.
Hasil dari kode diatas
Entitas Karakter Copyright 2014 Niswaka Publiser
-
27 | P e m r o g r a m a n W e b - H T M L
4.24.24.24.2 Entitas Karakter yang Sering DigunakanEntitas Karakter yang Sering DigunakanEntitas Karakter yang Sering DigunakanEntitas Karakter yang Sering Digunakan Hasil Keterangan Nama Entitas Nomor Entitas
Copyright
not-breaking space
Trade Mark
Registered trademark
& Ampersand & &
Angle quotation mark (left)
Angle quotation mark (right)
Tanda Kutip " "
< Lebih kecil < <
> Lebih besar &rt; =
X Tanda kali
Tanda bagi
-
28 | P e m r o g r a m a n W e b - H T M L
BAB 5
Link HTML Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan/atau
gambar menuju dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot (highlight) teks
atau gambar yang diidentifikasi sebagai link dengan warna dan/atau garis bawah untuk menunjukkan bahwa itu
adalah hyperteks link.
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.
5.5.5.5.1 Tag Anchor1 Tag Anchor1 Tag Anchor1 Tag Anchor HTML menggunakan tag untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari
penghubungan dalam HTML adalah menggunakan tag , atribut href digunakan untuk mendefinisikan lokasi
link.
Anchor berikut menunjuk kepada link 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 computer yang sama atau
tidak.
5.2 Link Relatif5.2 Link Relatif5.2 Link Relatif5.2 Link Relatif Dibuat apabila anda membuat suatu link pada Halaman anda ke halaman lain pada komputer yang sama, tidak
memerlukan menggunakan alamat Internet lengkap. Jika dua halaman pada direktori yang sama, anda dapat
menuliskan nama file html seperti berikut :
5.3 Link Absolut5.3 Link Absolut5.3 Link Absolut5.3 Link Absolut Dibuat apabila anda membuat link ke halaman web lain yang berada pada web site lain di Internet. Dalam hal
ini anda harus menuliskan alamat Internet secara lengkap. Berikut adalah contohnya :
Microsoft
Link
Google
-
29 | P e m r o g r a m a n W e b - H T M L
5.4 Link ke Bagian lain dalam Dokumen5.4 Link ke Bagian lain dalam Dokumen5.4 Link ke Bagian lain dalam Dokumen5.4 Link ke Bagian lain dalam Dokumen Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser
web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen
dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan
memberinya nama. Sehingga pada beberapa tempat di dalam dokumen aka nada bagian yang bernama, dan di
bagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.
Umumnya teknik ini diimplementasi pada dokumen-dokumen yang menampilkan daftar isi dokumen tersebut,
kemudian pada daftar ini tersebut dimungkinkan untuk diklik langsung menuju isinya secara langsung.
Memberi nama suatu bagian dalam dokumen
Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut
Sisipkan nama bagian tersebut dengan : a name=namabagian>
Membuat link yang menuju pada bagian dokumen yang sama dengan cara yang sama seperti link absolut atau
relative, hanya saja nama dokumen dalam link diganti dengan nama bagian dokumen dalam link diganti dengan
nama bagian dokumen dengan sebelum nama tersebut ditambah dengan #.
Berikut adalah contoh memberi link tersebut:
Tanda # menunjukan bahwa link tersebut ditujukan kepada link dalam dokumen sama.
5.5 Link5.5 Link5.5 Link5.5 Link Contoh ini mendemonstrasikan bagaimana untuk menambahkan beberapa link ke dalam suatu dokumen
Hasil dari kode diatas
Bagian tentang link
Entitas Karakter Home
-
30 | P e m r o g r a m a n W e b - H T M L
5.6 Membuka Link untuk Windows Baru5.6 Membuka Link untuk Windows Baru5.6 Membuka Link untuk Windows Baru5.6 Membuka Link untuk Windows Baru Contoh ini mendemonstrasikan bagaimana untuk menyambungkan link kepada page lain dengan membukanya
pada windows baru, sehingga pengunjung tidak harus meninggalkan web site yang kita buka sebelumnnya.
Hasil dari kode diatas
Link New Windows Microsoft Jika anda mengklik teks diatas, akan diarahkan ke windows baru
-
31 | P e m r o g r a m a n W e b - H T M L
5.7 Link pada Lokasi di Halaman yang sama5.7 Link pada Lokasi di Halaman yang sama5.7 Link pada Lokasi di Halaman yang sama5.7 Link pada Lokasi di Halaman yang sama Contoh ini mendemonstrasikan bagaimana menggunakan suatu link untuk melompat pada bagian lain pada
halaman yang sama.
-
32 | P e m r o g r a m a n W e b - H T M L
Link pada Page sama BAB1 BAB2 BAB3 BAB1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Isi Bab1 Kembali ke atas BAB2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi
-
33 | P e m r o g r a m a n W e b - H T M L
Catatan :
Teks Isi Bab- adalah isi dari Bab -, jadi tidak perlu ditulis semuannya.
Hasil dari Kode diatas
Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Isi Bab2 Kembali ke atas BAB3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Isi Bab3 Kembali ke atas
-
34 | P e m r o g r a m a n W e b - H T M L
5.8 Keluar dari suatu Frame5.8 Keluar dari suatu Frame5.8 Keluar dari suatu Frame5.8 Keluar dari suatu Frame Contoh ini mendemostrasikan bagaimana keluar dari suatu frame jika site anda dikunci pada suatu frame.
Hasil dari Kode diatas
Link New Windows Microsoft Jika anda mengklik teks diatas, akan diarahkan ke windows baru
-
35 | P e m r o g r a m a n W e b - H T M L
5.9 Link yang Tidak Digaris bawahi5.9 Link yang Tidak Digaris bawahi5.9 Link yang Tidak Digaris bawahi5.9 Link yang Tidak Digaris bawahi Contoh ini mendemonstrasikan bagaimana membuat suatu link yang tidak digarisbawahi.
Hasil dari kode diatas
Link yang Tidak Digaris bawahi
Microsoft
-
36 | P e m r o g r a m a n W e b - H T M L
5.10 Mailto5.10 Mailto5.10 Mailto5.10 Mailto Contoh ini mendemonstrasikan bagaimana membuat link untuk mengirim suatu pesan mail (tidak akan bisa
bekerja jka mail client tidak dipasang pada computer-user)
Hasil dari kode diatas
Mailto Kirim Email
-
37 | P e m r o g r a m a n W e b - H T M L
-
38 | P e m r o g r a m a n W e b - H T M L
Bab 6
List HTML
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu,Dalam HTML List
bisa dibagi menjadi 3 jenis,yaitu :
List dengan nomor
List tanpa nomor
List Definisi
List dimulai dengan menuliskan tag untuk list yang tidak diurut dan tag untuk list yang diurut.
List dengan nomor adalah model daftar yang setiap itemnya diberi nomer. Pada contoh kalimat di atas
merupakan contoh list tanpa menggunakan nomor.
Selain list dengan nomor dan tanpa nomor, ada sebuah list lagi yang bisa digunakan untuk membuat list yang
diberi uraian terhadap suatu item dalam daftar.List ini disebut List Definisi.
Cara membuat list tanpa nomor, atau sering disebut bulleted list :
Mulai dengan tag pembuka list
Masukan setiap item list dengan menggunakan tag pembuka kemudian tuliskan itemnya (satu saja),
setelah itu tuliskan tag penutup list item
Ulangi lagi kedua untuk menuliskan item selanjutnya,dan ulangi lagi sampai semua item sudah
dimasukan.
Akhiri seluruh list dengan menggunakan tag penutup list
Untuk list dengan nomor, atau disebut juga Ordered List, Ganti tag pembuka list menjadi , demikian
juga tag penutup diganti menjadi
6.1 6.1 6.1 6.1 Contoh ListContoh ListContoh ListContoh List Contoh ini mendemonstrasikan list berurut (Ordered List) menggunakan nomor
-
39 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
List Ordered List HTML CSS Javasrcipt
-
40 | P e m r o g r a m a n W e b - H T M L
6.2 Ordered List6.2 Ordered List6.2 Ordered List6.2 Ordered List Ordered List adalah Jenis list yang mendaftar item anda secara berurutan menggunakan angka 1,2,3,dst (secara
default) sampai dengan sejumlah item yang dimasukan kedalam list item.
Untuk keperluan penyajian data tertentu kita dapat mengubah nomor dalam Ordered List dengan mode angka
lain, dengan mengisi atribut type pada tag (
-
41 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
CSS Lowercase letter List HTML CSS Letter List HTML CSS
-
42 | P e m r o g r a m a n W e b - H T M L
6.3 Unordered List6.3 Unordered List6.3 Unordered List6.3 Unordered List Lain dengan Ordered List yang mendaftar item anda secara berurutan menggunakan angka 1,2,3,dst (secara
default) sampai dengan sejumlah item yang dimasukan kedalam list item.Undordered List adalah list yang tidak
mendaftar item anda secara berurutan,list ini menggunakan sebuah simbol untuk mendaftar Item,secara default
menggunakan noktah.Unordered List sering disebut Bulleted List.
Jenis bullet Unordered list dapat diubah sesuai dengan selera pengguna,berikut adalah daftar jenis Bulleted List
:
Disc, bentuk noktah (default)
Circle, bentuk noktah, tetapi tidak diarsir ditengahnya
Square, bentuk kotak
Contoh ini mendemonstrasikan berbagai jenis unordered list.
Hasil dari kode diatas
List Disc Bulleted List HTML CSS Circle Bulleted List HTML CSS Square Bulleted List HTML CSS
-
43 | P e m r o g r a m a n W e b - H T M L
6.4 Nested List6.4 Nested List6.4 Nested List6.4 Nested List Bullet dapat digunakan secara bersarang, maksudnya di dalam list ada list lagi. Contoh ini mendemonstrasikan
bagaimana membuat list yang bersarang atau Nested List.
Hasil dari kode diatas
List Nested List Coffe HOT COLD Tea
-
44 | P e m r o g r a m a n W e b - H T M L
-
45 | P e m r o g r a m a n W e b - H T M L
BAB 7
IMAGE HTML Sebuah gambar berbicara seriba kata, pepatah yang sering digunakan orang untuk menunjukkan terkadang
gambar bisa berbicara lebih baik dari penjelasaan yang panjang lebar.
Gambar dalam suatu web page merupakan daya tarik bagi pengunjung suatu web site. Umumnya web site
dilengkapi dengan gambar-gambar untuk menarik orang untuk melihat-lihat lebih di website tersebut dan
membaca isinya.
Umumnya browser web dapat menampilkan inline image (gambar yang disajikan bersamaan dengan teks), yang
mempunyai format X Bitmap (XBM), GIF, atau JPEG. Setiap gambar akan membutuhkan waktu tambahan untuk
didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karenanya hati-hati memilih
gambar dan menyertakannya ke dalam suatu dokumen.
Berikut format penulisan tag untuk menyertakan sebuah inline image dalam dokumen web :
Format file Gambar dapat diketahui dari ekstensi nama file gambar tersebut. GIF menunjukan format gambar
GIF. XBM untuk format gambar X Bitmap, JPG untuk format gambar JPEG, dan png untuk format gambar Portable
Network Graphics.
Contoh ini mendemonstrasikan bagaimana menyisipkan gambar ke dalam dokumen HTML.
Hasil dari kode diatas
Gambar MENYISIPKAN GAMBAR
-
46 | P e m r o g r a m a n W e b - H T M L
Catatan : Dalam menyertakan URL file gambar jangan lupa sertakan Ekstensi file gambar (contohnya JPG, PNG,
GIF, dll)
7.1 Mengatur ukuran Gambar7.1 Mengatur ukuran Gambar7.1 Mengatur ukuran Gambar7.1 Mengatur ukuran Gambar Ukuran gambar yang dimasukan ke dalam dokumen HTML akan sama dengan ukuran gambar sebenarnya dalam
file.Untuk mengatur agar gambar yang kita masukan sama seperti yang kita gunakan kita harus menggunakan 2
atribut tambahan ke tag . Atribut tersebut adalah height dan width,height menyatakan ukuran tinggi dari
gambar sedangkan width menyatakan ukuran lebar dari gambar, ukuran dinyatakan dengan pixel.
Berikut format penulisan atribut untuk mengatur ukuran gambar di HTML :
7.2 Alignment Image7.2 Alignment Image7.2 Alignment Image7.2 Alignment Image Alignment Image pada HTML dibagi menjadi 3 jenis, yaitu
Bottom , untuk mengatur alignment teks pada gambar di bawah
Middle , untuk mengatur alignment teks pada gambar di tengah
Top, untuk mengatur alignment teks pada gambar di atas
Left, untuk mengatur alignment gambar pada teks di kiri
Right, untuk mengatur alignment gambar pada teks di kanan
Berikut format penulisan atribut untuk mengatur alignment teks pada gambar di HTML :
-
47 | P e m r o g r a m a n W e b - H T M L
7.37.37.37.3 Teks Alternatif untuk ImageTeks Alternatif untuk ImageTeks Alternatif untuk ImageTeks Alternatif untuk Image Teks alternative pada Image berfungsi untuk menampilkan teks pada gambar untuk mengetahui gambar apa
yang ditampilkan. Adalakanya browser yang digunakan user adalah browser mode teks yang hanya
menampilkan teks pada tampilan web page,saat ini lah Teks Alternatif sangat berperan penting bagi user untuk
mengetahui gambar apa yang tidak bisa dimuat browser tersebut.
Atribut alt pada tag menyediakan tempat untuk menampilkan teks sebagai pengganti gambar.Atribut alt
akan ditampilkan secara mengambang jika cursor diarahkan ke atas gambar agak lama untuk memberi tahu
maksud dari gambar.
Berikut format penulisan atribut untuk menambahkan teks alternatif untuk gambar :
-
48 | P e m r o g r a m a n W e b - H T M L
BAB 8
Tabel HTML Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan
data yang sejenis, dan setiap baris terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan.
Elemen-elemen Tabel
Elemen Penjeleasan
.. Mendefinisikan sebuah table dalam HTML. Jika atribut border dituliskan
maka browser akan menampilkan table dengan border
. Mendefinisikan tulisan untuk judul tabel.
.. Mendefinisikan sebuah baris tabel dalam tabel. Dapat ditambahkan
atribut align atau valign
.. Mendefinisikan sel header table
.. Mendefinisikan sebuah sel data tabel. Dapat ditambahkan atribut align
atau valign
Atribut table
Atribut Penjelasan
Align=[left | center | right] Alignment horizontal untuk sel
Valign=[top | middle | bottom] Alignment vertical untuk sel
Colspan=n Jumlah kolom yang digabungkan = n
Rowspan=n Jumlah baris yang digabungkan = n
Nowrap Matikan wrapping dalam sel
Contoh ini mendemonstrasikan cara membuat tabel dalam HTML :
-
49 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Tabel Tabel Harga Rp.10.000 Total Rp.20.000
-
50 | P e m r o g r a m a n W e b - H T M L
Catatan : Pada contoh tabel tidak terlihat karena border tidak diatur dalam HTML
8.1 Border tabel8.1 Border tabel8.1 Border tabel8.1 Border tabel Border adalah garis pada tabel.Dalam HTML border dapat diatur menggunakan atribut border, secara default
tabel kita mempunyai border.
Contoh ini mendemonstrasikan cara membuat border pada Tabel di HTML.
Hasil dari kode diatas
Tabel Tabel Harga Rp.10.000 Total Rp.20.000
-
51 | P e m r o g r a m a n W e b - H T M L
8.2 Tabel dengan Caption8.2 Tabel dengan Caption8.2 Tabel dengan Caption8.2 Tabel dengan Caption Caption adalah Judul dari Tabel.Judul sangatlah penting untuk sesuatu,karena akan mencirikan content yang
ada.
Contoh ini mendemonstrasikan suatu tabel dengan sebuah caption.
Hasil dari kode diatas
Tabel Total Penjualan Harga Rp.10.000 Total Rp.20.000
-
52 | P e m r o g r a m a n W e b - H T M L
8.38.38.38.3 HeaderHeaderHeaderHeader Contoh ini mendemonstrasikan bagaimana menampilkan header tabel
Hasil dari kode diatas
Tabel Harga Rp.10.000 Total Rp.20.000
-
53 | P e m r o g r a m a n W e b - H T M L
8.48.48.48.4 Colspan dan RowspanColspan dan RowspanColspan dan RowspanColspan dan Rowspan Contoh ini mendemostrasikan bagaimana untuk mendefinisikan cell tabel yang dilebarkan lebih dari satu baris
atau satu kolom.
Tabel 1 Nama Telephone Bill Gates +1 555 777 777
-
54 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.58.58.58.5 CellpaddingCellpaddingCellpaddingCellpadding Contoh ini mendemonstrasikan bagaimana menggunakan cellpading untuk membuat spasi lebih dari Antara sel
dan bordernya.
-
55 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.68.68.68.6 CellspacingCellspacingCellspacingCellspacing Contoh ini mendemonstrasikan bagaimana menggunakan cellspacing untuk menambah jarak antar sel.
Tabel Tabel Harga Rp.10.000 Total Rp.20.000
-
56 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.78.78.78.7 Background TabelBackground TabelBackground TabelBackground Tabel Contoh ini mendemonstrasikan bagaimana memberi background suatu tabel
Tabel Harga Rp.10.000 Total Rp.20.000
-
57 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.88.88.88.8 Background Sel TabelBackground Sel TabelBackground Sel TabelBackground Sel Tabel Contoh ini mendemostrasikan bagaimana memberi background untuk satu atau lebih sel.
Tabel Harga Rp.10.000 Total Rp.20.000
-
58 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.98.98.98.9 Mengatur Alignment isi SelMengatur Alignment isi SelMengatur Alignment isi SelMengatur Alignment isi Sel Contoh ini mendemonstrasikan bagaimana menggunakan atribut align untuk mengatur isi sel, membuat tabel
yang enak dilihat.
Tabel Tabel Harga Rp.10.000 Total Rp.20.000
-
59 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
8.18.18.18.10000 Tabel dalam tabelTabel dalam tabelTabel dalam tabelTabel dalam tabel Contoh ini mendemonstrasikan cara membuat tabel dalam tabel.
Tabel Tabel A B C D
-
60 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Tabel Tabel WEB HTML CSS
-
61 | P e m r o g r a m a n W e b - H T M L
BAB 9
Frame HTML Elemen dalam HTML digunakan untuk membangun web page yang memungkinkan penampilan beberapa web
page ditampilkan dalam satu windows browser. Windows dalam browser dibagi menjadi beberapa bagian yang
disebut frame.
Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu
ditampilkan.
Berikut format penulisan tag frame pada HTML :
9.1 Target FRAME9.1 Target FRAME9.1 Target FRAME9.1 Target FRAME Nama Frame predefined: _self, _top, _parent, _blank, sering digunakan untuk menunjukkan target penampilan
dari suatu link.
Nama Frame Kegunaan
_self Digunakan apabila target frame adalah frame tempat link berada
_top Digunakan apabila target frame adalah wndows tempat frame berada. Dengan
menggunakan _top sebagai target maka definisi frame yang ada pada windows
browser akan hilang, diganti dengan definisi frame yang baru jika ada
_parent Target frame adalah setingkat di atas frame link berada. Akibat dari target
frame _parent akan sama jika tempat frame link berada hanya satu level di
bawah definisi frame windows
_blank Target _blank digunakan untuk membuka windows baru
Atribut NAME merupakan atribut wajib, jika frame yang bersangkutan akan dijadikan sebagai tempat untuk
menampilkan url suatu link.
9.2 IFRAME9.2 IFRAME9.2 IFRAME9.2 IFRAME IFRAME memungkinkan pemrogram web untuk membuat frame windows yang mengambang, frame ini berlak
mirip seperti suatu teks box, jika browser melakukan scroll maka frame ini juga turut terscroll.
Berikut format penulisan tag IFRAME pada HTML :
-
62 | P e m r o g r a m a n W e b - H T M L
Atribut name dalam IFRAME wajib diisikan jika dalam web page yang akan menampilkan lebih dari satu frame
mengambang; jika tidak maka akan hanya ada satu frame yang ditampilkan dalam browser.
Catatan :
Untuk dapat mencoba setiap contoh maka harus disiapkan terlebih dahulu dokumen-dokumen HTML yang akan
ditampilkan dalam suatu frame.
9.3 Frame Kolom9.3 Frame Kolom9.3 Frame Kolom9.3 Frame Kolom Contoh ini mendemonstrasikan bagaimana membuat frameset vertical untuk tiga dokumen yang berbeda.
Hasil dari kode diatas
9.4 Frame Baris9.4 Frame Baris9.4 Frame Baris9.4 Frame Baris Contoh ini mendemostrasikan bagaimana membuat frameset horizontal untuk 3 dokumen berbeda.
-
63 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
9.5 Frame Campuran9.5 Frame Campuran9.5 Frame Campuran9.5 Frame Campuran Contoh ini mendemonstrasikan bagaimana untuk membuat frame set untuk tiga dokumen, dan bagaimana
untuk menampilkannya dalam baris dan kolom.
-
64 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
9.6 Frame Navigasi9.6 Frame Navigasi9.6 Frame Navigasi9.6 Frame Navigasi Contoh ini mendemonstrasikan bagaimana membuat suatu frame navigasi. Navigasi frame berisi sebuah daftar
link dengan frame yang kedua sebagai target. Frame yang kedua menampilkan dokumen yang di-link. Modifikasi
salah satu file HTML source dengan link yang mendefinisikan showframe sebagai target. Dimana showframe
ini merupakan nama target dari frame kanan.
-
65 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
9.7 9.7 9.7 9.7 Frame InlineFrame InlineFrame InlineFrame Inline Contoh ini mendemonstrasikan bagaimana untuk membuat suatu frame inline (suatu frame di dalam suatu page
HTML)
Hasil dari kode diatas
Berikut adalah Contoh IFRAME
-
66 | P e m r o g r a m a n W e b - H T M L
-
67 | P e m r o g r a m a n W e b - H T M L
BAB 10
FORM DAN INPUT HTML Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat
memasukkan input melalui halaman-halaman HTML.
Elemen/TAG ini digunakan untuk membatasi input.
Dalam satu form dapat terdiri atas beberapa form, akan tetapi hanya satu form yang dapat dikirimkan ke server
dalam satu saat.
Form tidak dapat berbentuk nested.
Berikut format penulisan tag Form untuk membuat Form pada HTML :
Atribut Action tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form
URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form
10.1 Method10.1 Method10.1 Method10.1 Method Atribut yang digunakan untuk menyatakan bagaimana masukan-masukan berasal dari form dikirimkan kepada
program CGI.
10.2 Jenis10.2 Jenis10.2 Jenis10.2 Jenis----jenis Input dalam Formjenis Input dalam Formjenis Input dalam Formjenis Input dalam Form Jenis input atau masukan dalam satu formulir dibedakan menjadi :
Text, digunakan untuk memasukkan suatu nnilai untuk dikirimka ke server. Nilai yang dimasukkan dapat
berupa angka ataupun teks.
Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih.
Checkbox, menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih.
List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih dapat lebih dari satu.List
menggunakan tag select.
Button, digunakan untuk mendefinisikan tombo untuk melakukan pemrosesan form. Ada beberapa
macam Button
Submit, digunakan untuk memanggil url, setelah input selesai dimasukkan.
Reset, digunakan untuk me-reset atau menginisialisasi setiap elemen form.
Image, digunakan sebagai pengganti button, berupa gambar yang bisa diklik seperti button.
Text arean, digunakan untuk memasukkan data dalam bentuk teks berupa memo.
-
68 | P e m r o g r a m a n W e b - H T M L
Setiap jenis masukan dalam formulir mempunyai tag-tag sendiri dengan masing-masing atributnya.
Tag Text
Berikut format penulisan tag Text pada Form pada HTML :
Value pada atribut size menunjukkan besar text box.
Value pada atribut maxlenght menunjukkan jumlah karakter maksimum yang dapat ditampung pada Input ini.
Tag Radio
Berikut format penulisan tag Radio pada Form pada HTML :
Tag Checkbox
Berikut format penulisan tag Checkbox pada Form pada HTML :
Tag Select
Berikut format penulisan tag Select pada Form pada HTML :
Value pada atribut size digunakan untuk menampilkan pilihan pada list lebih dari satu. Default adalah satu
pilihan, secara otomatis maka list berupa list box, yang dapat berlaku seperti drop down list box.
Tag Button
Berikut format penulisan tag Button pada Form pada HTML :
pilihan 1 pilihan 2 pilihan 3
pilihan 1 pilihan 2 pilihan 3
Pilihan 1 Pilihan 2 Pilihan 3
-
69 | P e m r o g r a m a n W e b - H T M L
Tag Image
Berikut format penulisan tag Image pada Form pada HTML :
Tag Text Area
Berikut format penulisan tag Text Area pada Form pada HTML :
Catatan : Pada setiap tag Input pada Form dapat diberikan nama, dengan memberikan atribut name, dengan
value berupa string yang men-definisikan nama elemen.Memberikan nama pada tag Input berfungsi untuk
mempermudah penerimaan data di server.
10.3 Contoh10.3 Contoh10.3 Contoh10.3 Contoh----contoh Inputcontoh Inputcontoh Inputcontoh Input Field Text
Contoh ini mendemostrasikan bagaimana membuat field text pada suatu dokumen HTML, tempat pemakai atau
user dapat menuliskan teks ke dalam field tersebut.
Nama Depan : Nama Belakang : belakang">belakang">
-
70 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
Checkbox
Contoh ini mendemonstrasikan bagaimana membuat checkbox pada suatu dokumen HTML, pemakai dapat
memilih atau membatalkan pilihan dari checkbox
Hasil dari kode diatas
Hobby : Sepak Bola Membaca
-
71 | P e m r o g r a m a n W e b - H T M L
Tombol Radio
Contoh ini mendemostrasikan bagaimana membuat tombol radio pada suatu dokumen web, pemakai atau user
hanya dapat memilih satu tombol radio.
Hasil dari kode diatas
Jenis Kelamin : laki" checked>laki" checked>Laki-laki Perempuan
-
72 | P e m r o g r a m a n W e b - H T M L
Catatan : Atribut checked digunakan untuk menyetel tag yang berisi checked sebagai yang dipilih secara default
di web page.
Dropdown Box
Contoh ini mendemostrasikan bagaimana membuat Dropdown Box sederhana, dropdown box adalah daftar
yang dapat dipilih.
Hasil dari kode diatas
Pendapatan : Kurang dari 1jtKurang dari 1jtKurang dari 1jtKurang dari 1jt Lebih dari 1jtLebih dari 1jtLebih dari 1jtLebih dari 1jt
-
73 | P e m r o g r a m a n W e b - H T M L
Text Area
Contoh ini mendemostrasikan bagaimana membuat suatu text area (sebuah control input dengan multi-line).
Dalam suatu text area anda dapat menuliskan karakter yang tidak dibatas.
Hasil dari kode diatas
Pendapat :
-
74 | P e m r o g r a m a n W e b - H T M L
Tombol (Button)
Contoh ini mendemostrasikan bagaimana membuat sebuah tombol, pada button anda dapat mendefinisikan
text yang anda inginkan dengan atribut value.
Hasil dari kode diatas
-
75 | P e m r o g r a m a n W e b - H T M L
Fieldset sekitar data
Contoh ini mendemostrasikan bagaimana membuat suatu border dengan caption di sekeliling data Anda.
Hasil dari kode diatas
Subcribe Email
-
76 | P e m r o g r a m a n W e b - H T M L
Contoh Form
Contoh ini mendemostrasikan bagaimana membuat form lengkap menggunakan semua jenis input.
Daftar - Penerimaan Siswa Baru
-
77 | P e m r o g r a m a n W e b - H T M L
Hasil dari kode diatas
10.4 Tag10.4 Tag10.4 Tag10.4 Tag----tag Form tag Form tag Form tag Form Tag Awal Kegunaan
Definisi form untuk input dari pemakai
Definisi sebuah field input
Definisi suatu text-area
Definisi sebuah label untuk suatu control
Definisi suatu fieldset
Definisi suatu caption untuk suatu fieldset
Definisi suatu list yang dapat dipilih
Definisi suatu grup option
Sepak Bola Menulis Lain-lain
-
78 | P e m r o g r a m a n W e b - H T M L
Definisi option dalam drop down menu
Definisi sebuah text box
-
79 | P e m r o g r a m a n W e b - H T M L
Daftar Pustaka Betha Sidik Ir, Husni I. Pohan Ir, 2009. Pemrograman WEB dengan HTML, Bandung :
Informatika
Bernad, Agus Prijono, Rusdy Agustaf, 2007. Mudah dan Cepat Menguasai Pemrograman
WEB, Bandung:Informatika