Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :
Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus menyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasil dimuat atau gambar hilang. 
Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan terload dengan ukuran sebenarnya, namun hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.
Gambar File Properties gambar
Anda tidak perlu memberi tanda kutip pada nilai lebar dan panjang. Nilai ini bisa anda dapatkan dengan mengklik kanan gambar tersebut dan pilih menu properties. Pada tab details akan anda temui ukuran gambar tersebut.
Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.
3.2. Cara penulisan lokasi file
Jika anda menyimpan gambar tersebut pada sebuah folder seperti berikut.
Gambar 18 Menyimpan gambar pada folder images
Maka yang perlu anda lakukan adalah menambahkan nama folder tersebut diikuti dengan tanda slash (/) dan nama file gambar yang akan dimuat: 
Jika dalam folder tersebut terdapat folder lagi, dan gambar yang ingin anda muat ada di dalamnya maka penulisannya menjadi seperti berikut : 
Selain penggunaan lokasi gambar seperti di atas, anda juga bisa menampilkan gambar yang sudah terdapat di internet, penulisan seperti ini disebut dengan hotlinking misalnya: 
Penggunaan hotlinking sangat tidak dianjurkan karena gambar yang dimuat bukanlah milik kita dan tentunya juga akan merugikan si pemilik gambar.
Bab 4 Membuat Link
Yang sering anda temui dalam sebuah website adalah link. Link ini akan membuat konten atau elemen HTML4 dapat di klik dan akan mengarahkan/membawa anda ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style).
4.1. Link Standar
Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag pada teks yang ingin kita buat menjadi link. Klik disini untuk mendownload
Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img). 1. Klik disini untuk mendownload
Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan sebelumnya.
1. Buatlah file baru dengan nama latihan3.html, simpanlah di folder yang sama dengan latihan-latihan sebelumnya.
4 Tag-tag HTML juga biasa sebut dengan elemen.
Gambar Penempatan file pada folder yang sama
2. Ketikkan kode berikut pada file latihan3.html 1. 2. 3. 4. Selamat datang di website saya
8. buka Latihan 19. buka Latihan 2 10. 11. 3. Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah link yang akan mengait ke file latihan3.html tepat sebelum penutup tag body ( ). … Kembali ke halaman utama 4. Save pekerjaan anda, dan bukalah file latihan3.html pada browser. Anda dapat mengklik linknya satu persatu. Gambar tampilan file Latihan3.html Ketika link “buka latihan 1” di klik, browser akan menampilkan file latihan1.html Gambar Link untuk kembali ke halaman utama Dan Klik link “Kembali ke halaman utama” untuk menampilkan latihan3.html kembali. Jika anda perhatikan pada kode yang terdapat dalam latihan3.html, ada beberapa tag yang belum saya jelaskan, yaitu tag
dan
.
Tag
digunakan untuk memindahkan teks kebaris baru, sehingga teks yang dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda menghapus tag
ini, maka teks akan ditampikan satu baris.
Gambar link ditampilkan satu baris tanpa tag
Untuk membuat link yang mengacu ke halaman web lain, pastikan anda menyertakan http:// pada atribut href link tersebut. Buka Google
Gambar Error ketika http:// tidak ditambahkan pada alamat web lain
Jika anda tidak menyertakan http:// maka link tersebut tidak akan bekerja sebagaimana mestinya.
Setiap link yang diklik akan ditampilkan di window/tab yang sama, bagaimana jika anda ingin membuka link tersebut di tab/window baru? Tambahkan atribut target=“_blank”. ariona.net
4.2. Link Email
Anda juga dapat membuat link email, link ini berisi alamat email yang ketika diklik, aplikasi untuk mengirim email akan otomatis terbuka dan tujuan email secara otomatis terisi dengan alamat yang telah ditentukan.
Untuk membuat link email, anda tinggal menambahkan mailto:alamat@email di dalam atribut href. Kirim Email Selain tipe link-link di atas, masih banyak lagi tipe link lainnya, seperti link No. Telp, Aplikasi dan lainnya.
Bab 5 Heading/Penjudulan
Heading, digunakan untuk memberikan penjudulan pada suatu dokumen HTML. Bayangkanlah sebuah skripsi atau buku yang memiliki bab dan subbab-subbab di dalamnya. Untuk memformat penjudulan dalam HTML, kita gunakan tag untuk judul utama dan untuk judul subbabnya anda dapat menggunakan tag sampai dengan.
Setiap level judul memiliki ukuran huruf yang berbeda-beda (namun anda masih bisa merubah ukurannya melalui CSS).
Sebagai latihan, buatlah file HTML baru dengan nama latihan4.html lalu ketikkan kode HTML berikut: 1. 2. 3. 4. Heading 5. 6. 7. Bab 1 : Pendahuluan
8. 1.1 Latar Belakang
9.
sampai dengan.
Setiap level judul memiliki ukuran huruf yang berbeda-beda (namun anda masih bisa merubah ukurannya melalui CSS).
Sebagai latihan, buatlah file HTML baru dengan nama latihan4.html lalu ketikkan kode HTML berikut: 1. 2. 3. 4. Heading 5. 6. 7. Bab 1 : Pendahuluan
8. 1.1 Latar Belakang
9.
Bab 1 : Pendahuluan
8.1.1 Latar Belakang
9.Paragraf pendahuluan, bla..bla..
10.1.2 Pokok Permasalahan
11.Paragraf pendahuluan, bla..bla..
12.Bab 2 : Pembahasan
13.2.1 Teori dan Konsep
14.Paragraf pendahuluan, bla..bla..
15.2.2 Algoritma Pemrograman
16.Paragraf pendahuluan, bla..bla..
17. 18. Gambar Penjudulan pada dokumen HTML Adanya penjudulan dimaksudkan agar suatu dokumen HTML lebih terstruktur layaknya sebuah dokumen resmi seperti skripsi /paper yang mengharuskan adanya perbedaanantara Bab utama dan sub-babnya. Perhatikan contoh penggunaan Heading dalam suatu website di di halaman selanjutnya. Dalam website tersebut, Logo/Judul dari website diberi Heading Level 1, untuk judul artikel diberi heading level 2 dan judul dari bagian-bagian di dalamnya diberi heading level 3 s.d 4 Bab 6 Membuat daftar/list Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list. 6.1. Ordered List Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag- (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag
- (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut : 1.
Yang harus dilakukan hari ini
2.- 3.
- Pergi ke pasar 4.
- Buat tutorial HTML 5.
- Mengerjakan tugas kuliah 6.
- dan seperti tag
- .
Jika kita modifikasi contoh sebelumnya dengan merubah
- menjadi
- Pergi ke pasar 4.
- Buat tutorial HTML 5.
- Mengerjakan tugas kuliah 6.
- Test
- Test
- Manga
- Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik Jepang.
- Mangaka Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggambar manga
- Pergi ke pasar 10.
- 11.
- Beli sayuran 12.
- Beli kertas 13.
- 14.
- A4 15.
- Legal 31 Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS 16.
18. - Beli tinta 19.
21. - Buat tutorial HTML 22.
- Mengerjakan tugas kuliah 23.
- maka yang akan kita dapat adalah seperti berikut : 1.
Yang harus dilakukan hari ini
2.- 3.
List/Daftar 5. 6. 7.Yang harus dilakukan hari ini
8.- 9.
- atau
- jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (
).
Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.
Bab 7 Memahami Tag div (Division)
Anda dapat membuat suatu group dari tag-tag HTML yang anda buat dengan menggunakan tag
- , item yang terdapat di dalamnya harus diapit dengan tag
, seperti pada contoh kasus berikut : Setiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat bagian/group. Keempat bagian/group ini antara lain : 1. Header Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lainnya. 2. Content Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya berisi postingan terbaru atau informasi lainnya. 3. Sidebar Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget atau hiasan situs lainnya. 4. Footer Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut, misalnya copyright © 2012 by someone. Lebih sederhananya, bayangkanlah Surat resmi yang memiliki Kop surat, badan surat dan penutup surat. Dalam HTML, kita dapat membagi bagian-bagian tersebut dengan menggunakan tag(division/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class5. Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang telah kita sebutkan sebelumnya: * Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan. 33 Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS 1.2.3. 4.5.6. 7. 9. 10. Jika anda menampilkannya pada browser, anda tidak akan melihat apa-apa karena tag div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk membuat dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian-bagian yang lebih spesifik. 7.1. Pakai ID atau Class? Bagi seorang pemula, termasuk saya ketika masih belajar HTML & CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya? ID Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut : 1. Penggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang sama, yaitu “menu” pada tagdan- .
Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.
Class
Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut : 1.
Pada Kode HTML di atas, saya menggunakan class Merah pada beberapa list item, karena nantinya list item yang memiliki class merah akan diberi warna background merah.
Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.
7.2. Memahami hubungan Child, Parent dan Siblings
Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut : 1.
2.Dalam contoh kode HTML tersebut : 3. 4. 5.6.disebut Parent, dan tag HTML yang ada di dalamnya disebut dengan Child(). Begitu juga dengandisebut parent untukdan, dan hubungan antaradandisebut dengan sibling, atau saudara. Bab 8 Form Gambar Formulir (FORM) pendaftaran Yahoo! Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form pencarian, registrasi dan lain sebagainya. Form ini biasa digunakan untuk mengumpulkan data dari pengunjung website.Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari text input, Combo box, Button dan lain sebagainya. Kita akan mempelajari sebagian kontrol yang disebutkan diatas karena kontrol di atas adalah yang paling sering digunakan dalam halaman web.Pertama-tama, pembuatan sebuah form diawali dengan tag Jika anda merasa asing dengan istilah FORM, bayangkan saja sebuah FORMULIR yang sering ditemui di sekitar kita seperti formulir pendaftaran siswa baru, formulir pembuatan KTP dan lain sebagainya. Control-control Form Setiap control pada form dapat dibuat dengan menggunakan tag . Dan yang membedakan tipe dari control tersebut berada pada atribut type (tipe kontrol). Berikut ini adalah sebagian tipe kontrol yang biasa ditemui : Label Label digunakan untuk memberikan keterangan pada setiap input yang ada. Jika anda perhatikan formulir pendaftaran situs yahoo, yang disebut dengan label adalah yang ditandai berikut ini : Gambar 29 Contoh Label pada form Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi label. Text Control input ini dapat diisi dengan teks yang memiliki kata yang tidak terlalu panjang/hanya satu baris, biasa digunakan dalam form pencarian, nama dan lain sebagainya. Gambar Text Input Jika text input yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai tersebut di dalam atribut value. Dengan begitu, ketika halaman dibuka, text input ini secara otomatis akan terisi dengan nilai dari atribut value. Text Area Sama halnya dengan Input Text, namun textarea dapat diisi lebih dari satu baris, cocok digunakan untuk isian yang panjang, seperti alamat, deskripsi, atau biodata. Berbeda dengan kontrol lainnya yang menggunakan tag , text area memiliki tag sendiri yaitu . Dan apa yang terdapat di dalam tag ini adalah value dari kontrol tersebut Gambar Text area Combo Box Combo Box adalah kontrol yang memiliki pilihan ketika diklik. Pembuatannya sama seperti pembuatan Daftar/List namun dengan tag yang berbeda. Gambar Combo Box Submit/Button Submit atau Button, berupa tombol yang dapat di klik. Penggunaan atribut value pada kontrol ini akan merubah text yang ada di dalamnya. Gambar Button Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari sebelumnya menjadi satu form utuh. Buatlah file baru, dengan nama file latihan6.html, lalu ketikkan kode HTML berikut pada file latihan6.html 1. 2. 3. 4.Form 5. 6. 7. 22. 23. Berikut ini adalah tampilan yang anda dapatkan jika file latihan6.html dibuka di dalam browser. Gambar 34 Form utuh Dalam buku ini, saya tidak akan membahas bagaimana cara memroses data yang dikumpulkan dari form tersebut, karena dalam HTML kita tidak bisa melakukan proses pengolahan data. Ingat bahwa HTML hanya digunakan untuk memformat dokumen, bukan untuk memroses data. Untuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti Javascript atau PHP atau bahasa pemrograman web lainnya. Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru. Bab 9 Tabel Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag.
Untuk membuat baris tabel, kita gunakan tag
– singkatan dari table row (ditulis di dalam tag table)
Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag(table data) yang digunakan di dalam tag . 1. 2.
Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk merge horizontally-secara horizontal) atau rowspan (untuk merge vertically). 1.3. 7.No 4.Nama 5.Alamat 6.2.
Jika anda tampilkan dalam browser, maka tabel tersebut tidak akan memiliki garis, untuk memberi garis pada tabel anda dapat menambahkan atribut border=1 pada tag3. 7.No 4.Jenis Kelamin 5.Nama 6.8. 11.L 9.P 10.12. 17.1 13.L 14.42 Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS 15. Rian 16.atau anda dapat menambahkan border lewat CSS nantinya. Gambar Tabel setelah pemberian atribut border Sebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu simpan dalam file latihan7.html. 9.1. Struktur tabel yang dianjurkan Agar format tabel sesuai dengan ketentuan, Anda dapat menggunakan tag untuk baris yang menjadi Judul tabel, untuk data/isi dari tabel dan
untuk kaki tabel (bisa diisi sama dengan thead atau lainnya). 1. 2. 3.
43 Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS 9.2. Kesalahan dalam penggunaan4. 8.No 5.Jenis Kelamin 6.Nama 7.9. 12. 13. 14. 15.L 10.P 11.16. 21. 22.1 17.L 18.19. Rian 20.Tag table digunakan untuk memformat data tabular/data yang membutuhkan format tabel dalam menampilkannya, seperti contoh penggunaan tabel untuk menampilkan data nilai berikut : Masih banyak yang menggunakan tabel untuk keperluan layouting sebuah website, misalnya menggunakan tag table untuk membuat layout 2 kolom, 3 kolom, atau 4 kolom seperti contoh berikut : Gambar Penggunaan table untuk layout adalah menyalahi aturan Penggunaan tag
untuk keperluan layout adalah menyalahi aturan/fungsi dari tag table tersebut. Layout table biasanya dibuat secara otomatis oleh aplikasi seperti Dreamweaver atau Photoshop (di-generate oleh slicing tool). sumber : wikipedia,ariona.net
Arsitektur Client Server
Arsitektur Client Server Kita tahu bahwa perkembangan teknologi kini telah banyak membuat perubahan pada cara berpikir kita (manusia). Dengan laju pertumbuhan teknologi yang makin cepat, kebutuhan akan informasi dari hari ke hari meningkat sehingga menuntu kelancaran, dan kecepatan proses distribusi informasi. Arsitektur jaringan Client Server merupakan model konektivitas pada jaringan yang membedakan fungsi computer sebagai Client dan Server. Arsitektur ini menempatkan sebuah komputer sebagai Server. Nah Server ini yang bertugas memberikan pelayanan kepada terminal-terminal lainnya tang terhubung dalam system jaringan atau yang kita sebut Clientnya. Server juga dapat bertugas untuk memberikan layanan berbagi pakai berkas (file server), printer (printer server), jalur komunikasi (server komunikasi). Pada model arsitektur ini, Client tidak dapat berfungsi sebagai Server, tetapi Server dapat berfungsi menjadi Client (server non-dedicated). Prinsip kerja pada arsitektur ini sangat sederhana, dimana Server akan menunggu permintaan dari Client, memproses dan memberikan hasil kepada Client, sedangkan Client akan mengirimkan permintaan ke Server, menunggu proses dan melihat visualisasi hasil prosesnya. Sistem Client Server ini tidak hanya diperuntukkan bagi pembangunan jaringan komputer skala luas. Sistem ini menggunakan protokol utama Transmision Control Protocol/Internet Protocol (TCP/IP), sedangkam sistem operasi yang digunakan antara lain Unix, Linux dan Windows NT. Lingkungan Database Client/Server di Internet Menggunakan LAN untuk mendukung jaringan PC Masing-masing PC memiliki penyimpan tersendiri Berbagi hardware atau software Komponen dasar Client Server Pada dasarnya Client Server terdiri dari 3 komponen pembentuk dasar, yaitu Client, Middleware, dan Server. Gubungan dari ketiganya dapat digambarkan sebagai berikut: Arsitektur File Server Model pertama Client/Server Semua pemrosesan dilakukan pada sisi workstation Satu atau beberapa server terhubungkan dalam jaringan Server bertindak sebagai file server File server bertindak sebagai pengelola file dan memungkinkan klien mengakses file tersebut Setiap klien dilengkapi DBMS tersendiri DBMS berinteraksi dengan data yang tersimpan dalam bentuk file pada server Aktivitas pada klien: Meminta data Meminta penguncian data Tanggapan dari klien Memberikan data Mengunci data dan memberikan statusnya Batasan File Server Beban jaringan tinggi karena tabel yang diminta akan diserahkan oleh file server ke klien melalui jaringan Setiap klien harus memasang DBMS sehingga mengurangi memori Klien harus mempunyai kemampuan proses tinggi untuk mendapatkan response time yang bagus Salinan DBMS pada setiap klien harus menjaga integritas databasse yang dipakai secara bersama-sama ð tanggung jawab diserahkan kepada programmer Arsitektur Database Server Klien bertanggung jawab dalam mengelola antar muka pemakai (mencakup logika penyajian data, logika pemrosesan data, logika aturan bisnis) Database server bertanggung jawab pada penyimpana, pengaksesan, dan pemrosesan database Database serverlah yang dituntut memiliki kemampuan pemrosesan yang tinggi Beban jaringan menjadi berkurang Otentikasi pemakai, pemeriksaan integrasi, pemeliharaan data dictionary dilakukan pada database server Database server merupakan implementasi dari two-tier architecture Contoh Two-Tier Architecture Contoh Three-tier Architecture Melibatkan lapisan server yang lain selain lapisan database server Beberapa Keuntungan Arsitektur Three-Tier Keluwesan teknologi Mudah untuk mengubah DBMS engine Memungkinkan pula middle tier ke platform yang berbeda Biaya jangka panjang yang rendah Perubahan-perubahan cukup dilakukan pada middle tier daripada pada aplikasi keseluruhan Keunggulan kompetitif Kekampuan untuk bereaksi thd perubahan bisnis dengan cepat, dengan cara mengubah modul kode daripada mengubah keseluruhan aplikasi.CSS ( Cascading Style Sheets )
Jadi Cassading Style Sheets / CSS yaitu merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Sejarah CSS Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. Versi Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua. CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model. Penulisan Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut: h1 { color: #0789de; } Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value. Selain itu ada tiga metode penulisan CSS atribut, yaitu : Inline Style Sheet CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut.Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Contoh penulisan CSS dengan metode Inline Style Sheet :Contoh Bentuk Inline Ini adalah contoh tag P tanpadiformat menggunakan CSS
Tag P ini diformat dengan besar font 20 point
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah
Embedded Style Sheet CSS didefinisikan terlebih dahulu dalam tag di atas tag .Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh penggunaan CSS dengan metode Embedded Style Sheet :Contoh Bentuk Embedded Judul ini berukuran 18 dengan warna merah!
Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch
Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru
Sifat CSS Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu. Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut. Fakta Menggunakan CSS Fakta Menggunakan CSS diantaranya : Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama. Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama. Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan. Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya. Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser. CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML. Contoh Berkas CSSCSS example!
This is a paragraph.
Langganan: Komentar (Atom)
