4-XHTML dan Dasar-dasar CSS -...
Transcript of 4-XHTML dan Dasar-dasar CSS -...
![Page 1: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/1.jpg)
XHTML dan Dasar-dasar CSS
Pemrograman WebRosa Ariani Sukamto
Email: [email protected]: http://udinrosa.wordpress.com
Website: http://www.gangsir.com
XHTML
• Extensible Hypertext Markup Language• XHTML = HTML yang menggunakan standar XML
agar sebuah website dapat distandarkan• Banyak penulisan kode halaman website yang acak-
acakan dan asal dapat ditampilkan oleh browser• World Wide Web Consortium (W3C) membuat
standar untuk menstandarkan struktur penulisan kode website
• XHTML merupakan HTML yang ditulis dengan menggunakan aturan XML dimana dalam XML jika terjadi kesalahan maka XML tidak dapat dibaca
• XHTML juga merupakan HTML sehingga web browser juga dapat membacanya
![Page 2: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/2.jpg)
XHTML Google
XHTML
• XHTML juga dapat menggunakan CSS danJavascript
• XHTML dapat disimpan dalam file dengan ekstensi .html
• XHTML versi 1.0
![Page 3: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/3.jpg)
XHTML
Aturan XHTML versi 1.0• Menambahkan kode penanda XHTML
– Untuk mengakomodasi HTML versi baru saja
– Untuk mengakomodasi HTML lama juga
– Untuk mengakomodasi frameset
![Page 4: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/4.jpg)
Aturan XHTML versi 1.0
• Kode XHTML harus ditulis dengan menggunakan huruf kecil
• Semua tag terstruktur dengan baik, misalnya sebagai berikut<p><b>........</b></p>
• Penulisan tag tanpa tutup yang benar misalnya sebagai berikut<br /> atau <hr />
• Penulisan atribut harus berada di dalam tanda petik (“) misalnya sebagai berikut
<p align=”center”>
• Tidak boleh menyingkat atribut misalnya sebagai berikutcontoh salah: <input type="radio" checked>
contoh benar: <input type="radio" checked="checked">
Mencoba Membuat Program Web dengan Framework (Kerangka Kerja) Sederhana
• file yang diakses pertama kali = index.html atau index.php
direktori_utama
hanya berisi file .css
hanya berisi file yang di-upload keserver
hanya berisi file gambar (.jpg, .gif, .png)
hanya berisi file kelas (misal .php)
hanya berisi file .js(javascript)hanya berisi file .html
![Page 5: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/5.jpg)
CSS
• Cascading Style Sheets
• fasilitas untuk mempermudah pemeliharaan sebuah halaman web
• dengan menggunakan CSS sebuah halaman web dapat diubah tampilannya tanpa harus mengubah dokumen HTML-nya
CSS Warning!
• Sering tampilan dengan browser yang berbeda akanmenghasilkan tampilan berbeda, maka harus dites per browser
![Page 6: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/6.jpg)
CSS Warning!
CSS
• ukuran atau jarak =>– point (pt)
– centimeter (cm)
– inchi (in)
– piksel (px)
![Page 7: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/7.jpg)
Class CSS untuk tag HTML
• misal kelas untuk tag paragraf <p>
Makeknya Gimana?
![Page 8: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/8.jpg)
Kelas CSS Berdiri Sendiri
Cara Mengaitkan dengan HTML
![Page 9: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/9.jpg)
Menggunakan Id untuk CSS
CSS pada Atribut Tag HTML
![Page 10: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/10.jpg)
CSS Inline dengan Tag HTML
File CSS .css
![Page 11: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/11.jpg)
Contoh Penggunaan CSS
Contoh Penggunaan CSS
![Page 12: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/12.jpg)
Contoh Penggunaan CSS
Font
• font-size = menentukan ukuran huruf
![Page 13: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/13.jpg)
Font
• font-family = menentukan jenis huruf yang digunakan
font-family : Arial;
font-family : “Courier New”, Verdana, Arial;
Font
• font-weight = menentukan tebal huruf
![Page 14: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/14.jpg)
Font
• font-style = menentukan gaya huruf
Font
• font-variant = menjadikan huruf kapital atau normal
![Page 15: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/15.jpg)
Font
• font = menggantikan semua atribut font
font : Verdana 12pt/15pt bold italic;
Line-height
• menentukan jarak dasar baris dari dua buah baris
![Page 16: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/16.jpg)
Text
• text-decoration = menetukan gaya teks
text-decoration : underline;
text-decoration : line-through;
text-decoration : none;
text-decoration : overline;
text-decoration : blink;
text-decoration : italic;
Text
• text-align = mengatur perataan teks
![Page 17: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/17.jpg)
Text
• text-indent = menentukan indentasi untuk suatu bagian teks, misalnya untuk teks yang lebih menjorok pada awal paragraf
Text
• text-transform = mengubah huruf kecil ke huruf besar atau sebaliknya
– karakter pertama setiap kata menjadi huruf besar
text-transform : capitalize;– semua teks menjadi huruf besar
text-transform : uppercase;– semua teks menjadi huruf kecil
text-transform : lowercase;– menetralkan perubahan sebelumnya
text-transform : none;
![Page 18: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/18.jpg)
Pake Path Dong
• nama_direktori/nama_file
<img src=“images/nangis.jpg”/>
• ../nama_direktori/nama_file
<img src=“../images/nangis.jpg”/>
.html
.html
nangis.jpg
nangis.jpg
direktori images
direktori imagesdirektori templates
word-spacing
• menentukan jumlah spasi diantara kata-kata
![Page 19: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/19.jpg)
letter-spacing
• menentukan jumlah spasi diantara huruf-huruf
vertical-align• menentukan posisi vertikal suatu elemen
– meratakan dasar barisvertical-align : baseline;
– meratakan bagian tengah elemenvertical-align : middle;
– membuat posisi subscriptvertical-align : sub;
– membuat posisi superscriptvertical-align : super;
– meratakan bagian atas elemenvertical-align : text-top;
– meratakan bagian bawah elemenvertical-align : text-bottom;
– meratakan bagian atas elemen menururt elemen tertinggi pada barisvertical-align : top;
– meratakan bagian bawah elemen menururt elemen tertinggi pada baris vertical-align : bottom;
![Page 20: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/20.jpg)
Margin
• margin-left = menentukan margin kiri
Margin
• margin-right = menentukan margin kanan
![Page 21: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/21.jpg)
Margin
• margin-top = menentukan margin atas
Margin
• margin-bottom = menentukan margin bawah
![Page 22: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/22.jpg)
Margin
• margin = menentukan margin dengan urutan atas, kanan, bawah, kiri
– atas 10 piksel, kanan 5 piksel, bawah 5 piksel, kiri 15 pikselmargin : 10px 5px 5px 15px;
– atas 10 piksel, kanan 5 piksel, bawah 5 piksel, kiri 5 piksel (disamakan dengan kanan)margin : 10px 5px 5px;
– atas 10 piksel, kanan 5 piksel, bawah 10 piksel (disamakan atas), kiri 5 piksel (disamakan dengan kanan)margin : 10px 5px;
Color
![Page 23: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/23.jpg)
Background
• background-color = warna background
background-color : transparent;
td{
background-color : #AAAAAA;
}
Background
• background-image = background diisi dengan gambar
background-image : none;
background-image : url(image.tif);
![Page 24: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/24.jpg)
Background
• background-attachment = style tambahan untuk background berupa image, apakah image dapat ikut di-scroll atau tidak
– gambar latar dapat digulungbackground-attachment: scroll;
– gambar latar tetapbackground-attachment: fixed;
Background
• background-position = menentukan posisi background (x, y), bisa diisi dengan ukuran atau top, bottom, left, right, center, middle
background-position: 35% 80%;
background-position: 35% 2.5cm;
background-position: 3.25in;
background-position: top right;
![Page 25: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/25.jpg)
Background
• background = menggantikan semua atribut background
background: green;
background: #FF0000;
background: red url(image.gif) no-repeat scroll 5% 60%;
background: url(image.gif) repeat-y;
background: url(image.gif) top;
Background
• pengulangan background yang berupa image
contoh:– gambar secara horizontal
background : repeat-x;
– pengulangan gambar secara vertikalbackground : repeat-y;
– pengulangan gambar secara horizontal dan vertikalbackground : repeat;
– tidak ada perulangan gambarbackground : no-repeat;
![Page 26: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/26.jpg)
Padding
• menentukan berapa banyak ruangan diantara borderdan isi elemen atau jarak isi dengan batas
Border
• mengatur border suatu elemen– ukuran border
thin • border tipismedium
• border sedangthick
• border tebaldotted
• border garis titik-titiknone
• border tanpa borderdashed
• border garis putus-putussolid
• border garis penuh
![Page 27: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/27.jpg)
Border
• border-top = menentukan border atas
Border
• border-right = menentukan border kanan
![Page 28: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/28.jpg)
Border
• border-bottom = menentukan border bawah
Border
• border-left = menentukan border kiri
![Page 29: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/29.jpg)
Border
• border-color = warna border
border-color: silver red RGB(223, 94, 77) black;
Border
• border-style = gaya border
border-style: solid dotted none dashed;
![Page 30: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/30.jpg)
Border
• border-width = lebar border
border-width: 0.25in;
Border
• border = menentukan border dengan urutan atas, kanan, bawah. kiri (seperti penggunaan style margin) dan warna border
border: thick dashed yellow;
border: dotted gray;
![Page 31: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/31.jpg)
Height dan Width
• height digunakan untuk mengatur tinggi suatu elemen
• width digunakan untuk mengatur lebar elemen
List-Style
• mengatur gaya tampilan list pada dokumen HTML
• list-style-image = mendefinisikan gambar yang digunakan untuk penomoran list
![Page 32: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/32.jpg)
List-Style
• list-style-position = mendeterminasikan posisi gambar penomoran pada list
List-Style
• list-style-type = memilih gambar penomoran pada listdari daftar yang telah ada
![Page 33: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/33.jpg)
List-Style
• list-style = menggantikan semua atribut list-style
list-style: url(delta.gif) inside circle;
list-style: outside upper-roman;
list-style: square;
Position
• Position digunakan untuk menentukan sifat posisi suatu objek
position : absolute;
position : relative;
• absolute digunakan jika letak posisi tidak berubah-ubah
• relative digunakan jika letak posisi berubah-ubah relatif terhadap sesuatu
![Page 34: 4-XHTML dan Dasar-dasar CSS - file.upi.edufile.upi.edu/.../Pemrograman_Web/3-XHTML_dan_Dasar-dasar_CSS.pdf · XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto ... menggunakan](https://reader030.fdocument.pub/reader030/viewer/2022021719/5ba0672609d3f259468ccc9c/html5/thumbnails/34.jpg)
Top, Left, Right
• top digunakan untuk menentukan posisi atas
• left digunakan untuk menentukan posisi kiri
• right digunakan untuk menentukan posisi kanan