1 DASAR PEMROGRAMAN WEB DENGAN HTML DAN CSS Oleh : Endar Nirmala, S.Kom, MT PUSAT PENGEMBANGAN PEMBERDAYAAN PENDIDIK DAN TENAGA KEPENDIDIKAN BISNIS DA...
DAFTAR ISI BAB I PENDAHULUAN ...................................................................................... 1 1.1 World Wide Web .......................................................................................... 1 1.2. Pengenalan HTML ...................................................................................... 2 1.3. Elemen HTML ............................................................................................. 2 1.4. Browser dan Editor ..................................................................................... 3 1.5. Sekilas Cara Kerja Web .............................................................................. 3 BAB II BASIC TAG HTML .................................................................................. 5 2.1. Struktur Dokumen HTML .......................................................................... 5 2.2. Elemen-Elemen Teks .................................................................................. 7 2.2.1. Paragraf ................................................................................................ 7 2.2.2. Heading ................................................................................................ 7 2.2.3. Horizontal Rules ....................................................................... 8 2.2.4. Break ......................................................................................... 8 2.3. Format Teks ................................................................................................ 8 2.4. Karakter Khusus ........................................................................................ 11 2.5. LINK .......................................................................................................... 12 2.6 List Item (Li) .............................................................................................. 13 2.7. Image (IMG) ............................................................................................. 14 BAB III TABEL, FORM DAN FRAME ................................................. 17 3.1. Tabel.......................................................................................................... 17 3.2. Form .......................................................................................................... 20 3.3. Frame ......................................................................................................... 23 BAB IV STYLE SHEET ..................................................................................... 26 4.1. CSS............................................................................................................ 26 4.2. Menggunakan Style sheet ......................................................................... 28 4.3 Menggunakan Atribut CLASS ................................................................... 29 Referensi ............................................................................................................... 32
BAB I PENDAHULUAN 1.1 World Wide Web Internet merupakan jaringan global yang merupakan sumber daya informasi dengan menghubungkan suatu network dengan network lainnya di seluruh dunia. World Wide Web telah berkembang sangat pesat sejak kemunculannya diawal tahun 1990 an.
Semua perhatian public, baik dari media massa, bisnis,
pemerintah, ataupun perseorangan, tertuju kepada World Wide Web. Melihat daya jangkauannya yang luar biasa, mereka pun mulai berlomba-lomba memanfaatkan World Wide Web untuk memperlancar usahanya. World Wide Web dibangun dari halaman web atau dikenal dengan home page.
Home page sendiri dibuat dengan menggunakan Hypertext Markup
Language (HTML). Tanpa HTML, tidak akan ada home page, dan tanpa home page tidak akan ada World Wide Web. HTML merupakan pondasi dari World Wide Web. HTML merupakan format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer lainnya tanpa perlu melakukan suatu perubahan apapun. Dokumen HTML sebenarnya merupakan suatu dokumen teks biasa sehingga di platform apapun dokumen tersebut dapat dibaca. Dokumen HTML disebut sebagai markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Dengan sistem hypertext pada dokumen HTML, pengguna tidak harus membaca suatu dokumen secara berurutan dari atas ke bawah, tetapi dapat menuju ke topik tertentu secara langsung dalam dokumen dengan menggunakan teks penghubung yang akan membawa kita ke suatu topik atau dokumen lain secara langsung.
World Wide Web bekerja berdasarkan dengan tiga mekanisme, yaitu:
Protocol merupakan standard aturan yang digunakan untuk berkomunikasi dengan komputer networking, protokol untuk World Wide Web adalah Hypertex Transfer Protocol (HTTP).
Address, World Wide Web memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) sebagai standard alamat internet.
HTML digunakan untuk membuat dokumen yang dapat diakses melalui web.
1.2. Pengenalan HTML Hypertext Markup Language merupakan bahasa standard yang digunakan untuk menampilkan dokumen web.
Hal-hal yang dapat dilakukan dengan
menggunakan HTML, yaitu: 1. Mengontrol tampilan web page dan content-nya 2. Mempublikasikan dokumen secara on-line sehingga dapat di akses dari seluruh dunia 3. Membuat on-line form yang dapat digunakan untuk menangani pendaftaran, transaksi secara on-line 4. Menambahkan objek-objek seperti image, audio, video dan java applet. Perbedaan utama dokumen HTML dengan dokumen pada umumnya adalah dokumen HTML memiliki elemen-elemen HTML beserta tag-tagnya.
1.3. Elemen HTML Elemen HTML merupakan komponen penyusun suatu dokumen HTML. Elemen ini dibagi atas 2 bagian utama, yaitu:
Elemen-elemen yang memberikan informasi tentang dokumen tersebut
Elemen-elemen yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser.
1.4. Browser dan Editor a. Browser Browser merupakan software yang di install pada mesin client yang berfungsi untuk meneterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan biasanya Internet Explorer, Netscape Navigator, Mozilla dan Opera.
Editor Editor adalah program yang digunakan untuk membuat dokumen HTML, diantaranya MS FrontPage, Notepad, Macromedia DreamWeaver, EditPlus, CuteHTML dan lain sebagainya.
1.5. Sekilas Cara Kerja Web Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan dilewatkan oleh suatu protocol HTTP melewati port 80 pada server. Alamat ini adalah URL dari suatu situs yang mempunyai alamat yang unik di Internet. Web Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnyua, aturan ini biasa disebut sebagai protocol, standar protocol menggunakan TCP/IP, proses ini dimulai dengan melakukan 3 way handshakes antara sumber dan tujuan. Web browser, suatu aplikasi pada client yang akan menampilkan halaman web sites dari internet. Web browser di install di sisi user (OS) menampilkan informasi ke komputer dengan interpreting bahasa pengkodean HTML, dimana homepage berisi gambar, suara, multimedia, dan resources lainnya yang dapat diakases. Files Coding pada HTML memberikan datanya ke browser apa yang akan ditampilkan ke sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi dari web servernya dan browser akan menginterpretasikan tag HTML untuk link ke halaman berikutnya
BAB II BASIC TAG HTML Command HTML biasanya disebut Tag, yang digunakan untuk menentukan tampilan dari dokumen HTML. Tag dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>). Tag biasanya merupakan suatu pasangan, yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk dan tag akhir dinyatakan dalam bentuk . Ada beberapa macam bentuk tag yang dikenal dalam HTML, yaitu :
Tag berpasangan Format : teks
Tag tanggal Format :
Tag yang disertai attribut Format : teks Atribut adalah properti dari suatu elemen HTML.
2.1. Struktur Dokumen HTML Dokumen HTML memiliki tiga buah tag utama yang membentuk struktur
dari
dokumen tersebut, yaitu tag , , dan . Tag HTML : berfungsi untuk memberi tahu browser bahwa yang di dalam kedua tag tersebut menyatakan suatu dokumen HTML. Tag HEAD : Berfungsi untuk memberikan informasi tentang dokumen HTML.
Bagian header
biasanya memuat tag TITLE yang menampilkan judul dari halaman pada title browser.
Browser akan menyimpan title sebagai bookmark yang digunakan untuk pencarian (searching), biasanya title digunakan sebagai keyword. ……….
Tag BODY Bgcolor latar belakang: warna Background latar belakang: gambar Berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam web page. Berikut adalah struktur dokumen HTML : --- bagian head -- --- bagian body --
Catatan : HTML tidak membedakan pemakaian huruf besar dengan huruf kecil. Contoh: <TITLE>Penggunaan HTML Hallooo …..selamat datang di Laboratorium Komputer Pusat Pengembangan Penataran Guru Kejuruan Jakarta
2.2. Elemen-Elemen Teks Untuk informasi teks, HTML telah menyediakan bermacam-macam elemen, antara lain :
2.2.1. Paragraf
….
Berfungsi untuk menandai sekumpulan teks sebagai suatu paragraf.
Tag
menandai awal paragraf dan
menandai akhir paragraf. Tag akhir paragraf tidak harus digunakan. Berikut contoh kode HTML yang menampilkan tiga buah paragraf. <TITLE>Paragraf
Ini adalah awal dari suatu paragraph.
Kalau yang ini paragraph ke-dua.
Nah ini paragraph ke-tiga alias terakhir.
2.2.2. Heading Heading merupakan sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML. Untuk menyatakan suatu heading digunakan tag : …. n : nomor level heading dari 1 sampai 6
2.2.3. Horizontal Rules width : panjang garis dinyatakan dengan %, default 100% size : ketebalan garis dinyatakan dengan n=1,2,… dst dalam pixel color : warna garis noshade : tanpa warna, efek bayangan
2.2.4. Break
Berfungsi untuk memulai baris baru pada dokumen HTML, tag ini berfungsi sama dengan carriage return.
Digunakan untuk membuat sebagian teks sebagai suatu blok tersendiri atau identasi paragraph 11. PRE <pre> …. Berfungsi untuk menampilkan teks sesuai dengan format aslinya 12. Perataan dalam paragraf Untuk melakukan pengaturan posisi teks dalam suatu paragraf, menggunakan attribut ALIGN. Atribut ini mempunyai 3 buah nilai, yaitu : left (untuk rata kiri), right (untuk rata kanan) dan center (untuk rata tengah) 13. Font HTML menyediakan elemen yang dapat dipakai untuk mengubah ukuran, jenis, dan warna suatu teks. ……
Face : jenis huruf Size : ukuran huruf yang memiliki nilai dari 1 hingga 7. Nilai 1 digunakan untuk membuat ukuran terkecil, sedangkan nilai 7 adalah ukuran terbesar.
Nilai default dari ukuran standar teks adalah 3.
Default
standar ukuran teks dapat diubah dengan menggunakan tag Color : warna Align : rata tulisan
2.5. LINK Kelebihan utama dari HTML adalah kemampuannya untuk memberikan link dari satu teks/gambar menuju dokumen lain atau bagian lain dalam suatu dokumen.
Ada empat jenis link : 1. Link relative Membuat link dari satu page ke page yang lain pada komputer yang sama. ….. Contoh : perpustakaan 2. Link absolute Membuat link ke page web lain yang berada pada web site lain di Internet. …. Contoh ; Google 3. Link dalam dokumen yang sama : Link jenis ini dibuat apabila dokumen panjang, sehingga apabila ditampilkan dalam bowser web mengharuskan untuk melakukan scroll layer berulang-ulang. Navigasi untuk memudahkan penelusuran dokumen dengan membuat link antar bagian dengan memberinya nama. ……. Contoh : Pengenalan ………… …………
3. Menu List (Daftar Menu) Merupakan daftar item yang pendek dan tidak disertai dengan nomor ataupun penanda item. Menu list menggunakan tag awal <MENU> dan tag akhir , dengan setiap item di dalamnya menggunakan
<menu>
……..
……..
4. Definition List
...
.....................
...
......................
2.7. Image (IMG) Jenis format image yang sering digunakan adalah :
GIF (Graphical Interchange Format) .GIF
JPEG (Joint Photographic Expert Image) .JPG
PNG (Portable Network Graphics) .PNG
height =” ...”
src : nama file gambar Height : tinggi gambar Width : lebar gambar Align : mengatur letak image terhadap teks (top| bottom| middle| left| right|center) Alt : menampilkan teks pada saat image ditunjuk dengan pointer
2.8. Image Map Image map merupakan suatu area pada image yang bisa diberi hyperlink area dan biasanya disebut ”hot spots”. Koordinat dari hot spot ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya. Shape
Diskripsi
Default
Semua area image
Rect
Area kotak tertentu
Circle
Area lingkaran tertentu
Poly
Area polygon
Koordinat dari objek relatif terhadap sudut atas image Koordinat
3.2. Form Berikut ini beberapa contoh kegunaan Form dalam web :
Memperoleh feedback dari pengguna web
Memperoleh informasi pembelian secara online
Memperoleh data-data user baik nama, alamat, dan data lainya untuk mendaftar pada service yang disediakan
url : lokasi file yang akan melakukan proses terhadap input dari form method : menyatakan bagaimana masukan-masukan berasal dari form di kirimkan kepada program CGI. Jenis masukan dalam Form :
Text : nilai yang dimasukkan dapat berupa angka atau teks Value pada size menunjukkan besar text box Value pada maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.
Radio : menyediakan beberapa pilihan, hanya satu pilihan yang dapat dipilih. pilihan 1 pilihan 2 pilihan 3
Default alignment at the bottom
<map name=”Map”> <area shape=”rect” coords=”0,0,200,100 href=”file1.htm Alt=”kotak link”> <area shape=”circle” coords=”350,45,40” href=”file2.htm Alt=”lingkaran link”> <area shape=”poly” coords=”55,100,95,90,105,130, 120,120,175,190,70,195,50,165,60,140” href=”#”>