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)


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..


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


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)


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


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 :


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


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


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..


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


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.


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


Hasil dari kode diatas

Teks ini tebal

Teks ini besar

Teks ini kecil

Teks ini emphasize

Teks ini berisi superscript

Teks ini berisi subcript


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;

}



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.



Computer Output

Computer Code

Input Keyboard

Teks Teletype

Teks Sample

Variable Komputer


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.


Address

Unit Produksi

Jl.Bima 7

Denpasar

Indonesia


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


Contoh ini akan mendemontrasikan bagaimana untuk menangani suatu singkatan atau akronim.


Singkatan HTML WWW


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.


Arah Teks Baca dari kanan Belajar HTML


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


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.



Koreksi Siswa dinyatakan tidak lulus Lulus


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


Ini adalah tulisan berjenis font Arial, ukuran 5 bercetak tebal, italic, underline,


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.


Entitas Karakter Copyright 2014 Niswaka Publiser


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


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


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


Bagian tentang link

Entitas Karakter Home


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.


Link New Windows Microsoft Jika anda mengklik teks diatas, akan diarahkan ke windows baru


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.


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


Catatan :

Teks Isi Bab- adalah isi dari Bab -, jadi tidak perlu ditulis semuannya.


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


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.


Link New Windows Microsoft Jika anda mengklik teks diatas, akan diarahkan ke windows baru


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.


Link yang Tidak Digaris bawahi

Microsoft


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)


Mailto Kirim Email


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



List Ordered List HTML CSS Javasrcipt


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 (



CSS Lowercase letter List HTML CSS Letter List HTML CSS


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.


List Disc Bulleted List HTML CSS Circle Bulleted List HTML CSS Square Bulleted List HTML CSS


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.


List Nested List Coffe HOT COLD Tea


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.


Gambar MENYISIPKAN GAMBAR


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 :


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 :


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 :



Tabel Tabel Harga Rp.10.000 Total Rp.20.000


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.




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.


Tabel Total Penjualan Harga Rp.10.000 Total Rp.20.000


8.38.38.38.3 HeaderHeaderHeaderHeader Contoh ini mendemonstrasikan bagaimana menampilkan header tabel


Tabel Harga Rp.10.000 Total Rp.20.000


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



8.58.58.58.5 CellpaddingCellpaddingCellpaddingCellpadding Contoh ini mendemonstrasikan bagaimana menggunakan cellpading untuk membuat spasi lebih dari Antara sel

dan bordernya.



8.68.68.68.6 CellspacingCellspacingCellspacingCellspacing Contoh ini mendemonstrasikan bagaimana menggunakan cellspacing untuk menambah jarak antar sel.




8.78.78.78.7 Background TabelBackground TabelBackground TabelBackground Tabel Contoh ini mendemonstrasikan bagaimana memberi background suatu tabel




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.




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.




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



Tabel Tabel WEB HTML CSS


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 :


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.


9.4 Frame Baris9.4 Frame Baris9.4 Frame Baris9.4 Frame Baris Contoh ini mendemostrasikan bagaimana membuat frameset horizontal untuk 3 dokumen berbeda.



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.



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.



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)


Berikut adalah Contoh IFRAME


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.


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


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">



Checkbox

Contoh ini mendemonstrasikan bagaimana membuat checkbox pada suatu dokumen HTML, pemakai dapat

memilih atau membatalkan pilihan dari checkbox


Hobby : Sepak Bola Membaca


Tombol Radio

Contoh ini mendemostrasikan bagaimana membuat tombol radio pada suatu dokumen web, pemakai atau user

hanya dapat memilih satu tombol radio.


Jenis Kelamin : laki" checked>laki" checked>Laki-laki Perempuan


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.


Pendapatan : Kurang dari 1jtKurang dari 1jtKurang dari 1jtKurang dari 1jt Lebih dari 1jtLebih dari 1jtLebih dari 1jtLebih dari 1jt


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.


Pendapat :


Tombol (Button)

Contoh ini mendemostrasikan bagaimana membuat sebuah tombol, pada button anda dapat mendefinisikan

text yang anda inginkan dengan atribut value.



Fieldset sekitar data

Contoh ini mendemostrasikan bagaimana membuat suatu border dengan caption di sekeliling data Anda.


Subcribe Email


Contoh Form

Contoh ini mendemostrasikan bagaimana membuat form lengkap menggunakan semua jenis input.

Daftar - Penerimaan Siswa Baru



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


Definisi option dalam drop down menu

Definisi sebuah text box


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

Belajar Dasar HTML - 1-Libre

Documents

Transcript of Belajar Dasar HTML - 1-Libre