LAPORAN PRAKTIKUM
PENGENALAN
WEB
Modul 7
CSS Lanjut
Disusun
Oleh :
HERI PURNAMA
125410101
TI 03
UPT LABORATORIUM
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2014
CSS Lanjut
1).PEMBAHASAN
A.LISTING
HTML
CSS (Cascading Style Sheets) digunakan dalam
kode HTML untuk menciptakan suatu kumpulan style yang dapat digunakan untuk memperluas
kemampuan html. Singkatnya CSS digunakan untuk mengatur html supaya tampil
lebih baik dan lebih menarik.
Ø
Disini dapat dilihat adalah bahwa di sini adalah SINTAK
untuk membuat halaman Web yakni pada SINTAK htmlnya yang mana pada Sintak ini
mencakup beberapa hal yakni :
1.
Menggunakan
judul halaman Web yang dituliskan pada tag yakni dengan judul
halaman Web “Pengaturan Font”
2.
Pada
halaman Web ini CSS dipanggil dengan metode Eksternal yang mana dipanggil di
dalam tag head.Ini bisa dilihat pada tag yang mana fungsi
dari tag ini adalah informasi hubungan (relationship) dari tag link tersebut,
yaitu sebagai stylesheet. Href
diisi dengan lokasi
file CSS yang
ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.
3.
Tag
digunakan untuk penulisan yang mana yang diterapkan pada tag
tag Body sendiri digunakan untuk menampilkan apa yang ada di
dalam halaman Web.
Ø Format penulisan ini juga menggunakan
bahasa HTML yang mana semua tag tersusun rapi dan sewajarnya.
CSS
p {
font-family:"Comic Sans
MS";
font-size:24px;
font-weight:bold;
color:#33cc00;
text-transform:capitalize;
}
Ø
Disini
dapat dilihat bahwa ini adalah sebuah Sintak untuk halaman Web yang ada
diatas yang mana pada Sintak ini menggunakan sebuah peraturan yaitu :
1.
Apabila
bertemu dengan tag maka perintah atau kode pada halaman HTML akan
dikerjakan.Atau CSS dipanggil untuk menggerjakan pada suatu tag yang mana
pada hal ini untuk menggerjakan tag
Ø
Pada
CSS ini menggunakan Font untuk penggaturan Halaman Webnya,yang mana menggunakan urut-urutan properti dan valuen
fontnya adalah :
1)
Untuk
penggaturan jenis front menngunakan properti “font-family” dengan nilai atau
valuenya “Comic Sans MS”
2)
Untuk
penggaturan ukuran fontnya menngunakan properti “font-size” dengan nilai atau
valuenya “24px” Pd berarti menngunakan ukuran PIXEL
3)
Untuk
penggaturan ketebalan fontnya menggunakan properti “front-weight” dengan
nilai atau valuenya “bold”
4)
Untuk
penggaturan warna fontnya menngunakan properti yakni “Color” yang mana pada
properti ini menggunakan valuenya adalah “#33cc00” atau bisa
juga dibilang sebagai warna yang akan tampil adalah warna HIJAU.
5)
Untuk
penggaturan transform fontnya menggunakan properti yakni ”text-transform” yang mana properti ini menggunakan
nilai atau valuenya adalah “capitalize”
|
·
RUNNING
Ø Dapat dilihat pada
tampilan halaman Web ini yang ditampilkan sesuai dengan apanya dinginkan.
2.Latihan
HTML
Contoh berikut menggunakan font : 'browalia new'
untuk menyertakan font yang dapat digunakan untuk halaman web yang sedang
dikembangkan.
Ø
Disini dapat dilihat adalah bahwa di sini adalah SINTAK
untuk membuat halaman Web yakni pada SINTAK htmlnya yang mana pada Sintak ini
mencakup beberapa hal yakni :
a.
Menggunakan
judul halaman Web yang dituliskan pada tag yakni dengan judul
halaman Web “Pengaturan Font”
b.
Pada
halaman Web ini CSS dipanggil dengan metode Eksternal yang mana dipanggil di
dalam tag head.Ini bisa dilihat pada tag yang mana fungsi
dari tag ini adalah informasi hubungan (relationship) dari tag link tersebut,
yaitu sebagai stylesheet. Href
diisi dengan lokasi
file CSS yang
ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.
c.
Tag
digunakan untuk penulisan yang mana yang diterapkan pada tag
tag Body sendiri digunakan untuk menampilkan apa yang ada di
dalam halaman Web.
Ø Format penulisan ini juga menggunakan
bahasa HTML yang mana semua tag tersusun rapi dan sewajarnya.
CSS
@font-face
{
font-family: 'Browallia New';
src: local('?'),url('font/Browallia-New.ttf')
format('truetype');
font-weight:
normal;
font-style:
normal;
}
p
{
font-family: 'Browallia New';
}
Ø
Pada
CSS ini digunakan Untuk menyertakan font dalam sebuah halaman web yang mana menggunakan “@font-face”.Dalam
css developer / programmer dapat menyertakan font untuk digunakan dalam web
walaupun font tersebut tidak terinstall dalam komputer client Yang mana menggunakan properti
sebagai berikut :
a.
Menggunakan
jenis front yakni “Browalia New”
b.
Src
digunakan untuk mencari dimanakah font tersebut disimpan dalam folder dan Url
digunakan untuk Memanggil font tersebut.denda format “tua type”
c.
Untuk
menentukan ketebalan font digunakan properti “font-weight” yang mana
menggunakan ketebalan Noya adalah “normal”
d.
Untuk
menentukkan style yang digunakan menngunakan properti “font-style” yang mana
dengan menggunakan nilai atau valuenya adalah “normal”.
Ø Disini dapat dilihat bahwa ini adalah
sebuah Sintak untuk halaman Web yang ada diatas yang mana pada Sintak ini
menggunakan sebuah peraturan yaitu :
1.Apabila bertemu dengan
tag maka perintah atau kode pada halaman HTML akan dikerjakan.Atau
CSS dipanggil untuk menggerjakan pada suatu tag yang mana pada hal ini untuk
menggerjakan tag
Ø Pada ID P akan menngerjakan yaitu :
1.akan menampilkan font dalam halaman Web yakni akan bertipe “Browalia
New”
|
RUNNING
Ø Dapat dilihat Pada tampilan Web diatas font yang ditampilkan “Browalia-New”
2).TUGAS
HTML
.jpg)
TAMAN SARI
JUN 01,
2014Dilihat : 3,487,497
Menjelajah Kesejukan
Istana Air Tamansari Jogjakarta (Water Castle).Dalam sejarah kerajaan jawa
terutama di sekitar propinsi Yogyakarta (jogja) tak bisa dilepaskan dari yang
bernama kerajaan mataram islam
.jpg)
alt="Gambar Artikel"/>
PANTAI INDRAYANTI
JUN 01,
2014Lihat : 3,487,497
Pantai Indrayanti
merupakan salah satu pantai yang berada di Kabupaten Gunung Kidul Daerah
Istimewa Yogyakarta. Pantai yang terletak di Desa Tepus ini bersebelahan
dengan Pantai Sundak.
.jpg)
alt="Gambar Artikel"/>
CANDI PRAMBANAN
Feb 12,
2007Views : 3,487,497
Sekilas Candi Prambanan
Candi Rara Jonggrang atau Lara Jonggrang yang terletak di Prambanan adalah
kompleks candi Hindu terbesar di Indonesia. Candi ini terletak di propinsi
Jawa Tengah, di pulau Jawa
Apakah Ini ?
Pariwisata kota Yogyakarta
adalah website yang mengupas tuntas tempat-tempat Pariwisata Kota Yogyakarta
dan sekitarnya.
Artikel berdasarkan kategori
Pariwisata kota
Yogyakarta.net copyright 2014
css
*{
margin:0;
padding:0;
font-family:calibri, ‚segoe ui‛, arial,
tahoma, sans-serif;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: url(images/header.jpg) repeat-x
#555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ;
height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
#daftar-artikel{
width:470px;
float:left;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#sidebar{
width:270px;
float:right;
}
#sidebar h2{
font-size:18px;
margin:10px 0;
}
#sidebar p{
line-height:20px;
color : #636363;
}
#sidebar ul{
margin-left:10px;
}
#sidebar ul li a{
color:#636363;
text-decoration:none;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
|
TAMPILAN
Menampilkan berdasarkan bentuk
FONT
HTML
TAMAN SARI
JUN 01,
2014Dilihat : 3,487,497
INI
MENGGUNAKAN FORMAT FONT "Browallia-New.ttf"
Menjelajah
Kesejukan Istana Air Tamansari Jogjakarta (Water Castle).Dalam sejarah
kerajaan jawa terutama di sekitar propinsi Yogyakarta (jogja) tak bisa
dilepaskan dari yang bernama kerajaan mataram islam, yang saat ini lebih
dikenal dengan keraton Yogyakarta dan Keraton Surakarta. Nah, bercerita
tentang jogja maka tak bisa dipisahkan dari keberadaan penciptaan arsitektur
yang sangat bagus di sekitar keraton Jogja, selain bangunan Keraton sendiri
juga ada bangunan yang menarik, masyarakat biasa menyebutnya dengan
Tamansari.
Tamansari merupakan sebuah komplek
sistematis yang lebih banyak menonjolkan artistik pada bagian kolam dan air.
Hal yang sama ketika Petualang berjalan di sekitar Sumur Gemuling (Gumuling)
dimana nilai artistik pada bagunan tersebut lebih banyak menunjukan sisi
kesejukan air.
Tamansari kemudian banyak disebut sebagai
Istana Air (water castle) yang karena nilai arsitektur dan keunikan pada
lekukan bangunan dan air yang terisi dikolam kolam. Dalan sejarahnya yang
disampaikan oleh beberapa orang yang menjadi guide Istana Air Tamansari
menyebutkan bahwa Taman ini dipergunakan oleh Raja Mataram (Jogja) untuk
melakukan mandi pada bulan-bulan tertentu. Ada sedikit kemistikan yang
terjadi di sekitar area kolam kala itu. Ketika Raja hendak masuk ke Istana
Air Tamansari maka disambut dengan musik gamelan yang dilagukan dari
bangunan-bangunan kecil di kanan dan kiri yang ada di depan Istana Air
Tamansari. Lalu ada upacara tertentu untuk menyambut Raja dan orang-orang
yang hendak masuk ke Istana Air Tamansari Istana Air Tamansari ini dibangun
ketika pada tahun 1758-1769 oleh Raja Mataram (Jogja) yang bernama Sultan
Hamengku buwono I.
INI MENGGUNAKAN FORMAT
FONT "Eras-Light-ITC.TTF"
Walaupun kondisinya berbeda
dengan ketika Istana Air Tamansari ini dibuat, namun kondisinya masih tetap
terjaga dan masih nampak sebagian besar yang bisa menjadi simbol keunikan dan
artistik dari bangunan tersebut. Bangunan-bangunan yang masih tersisa
misalnya Sumur Gemuling (Gumuling), Gedhong Gapura Hageng ( Hageng = besar)
didekat pintu masuk, Umbul Pasiraman (yang sekarang ada kolam-kolam ketika
pertama masuk), Gedhong Gapura Panggung ( Kolam yang terdapat bangunan kembar
di sisi kanan dan kiri berekatan dengan kolam), dan beberapa bangunan yang
hendak menuju ke Sumur Gemuling yang sekarang menjadi tempat bagi masyarakat
jogjakarta. Dulu, antara Istana Air Tamansari dan Sumur Gemuling merupakan
taman-taman yang indah dan sejuk, namun sekarang hanya tersisa taman kecil
yang berada di paling belakang Istana Air Tamansari.
Walaupun tak seindah dan sesejuk ketika jaman dulu Istana ini dibuat,
namun keunikan dan artistik dari bentuk bangunan Tamansari bisa menyenangkan
untuk dinikmati. Cuaca yang panas tidak menjadi persoalan, apalagi ketika
melihat kolam-kolam air yang menyegarkan dan menyejukan seolah memanggil
untuk segera berendam. Namun karena memang Istana Air Tamansari ini merupakan
bangunan cagar budaya, tidak lagi diperbolehkan untuk para Petualang nyegur
dan berendam. Istana Air Tamansari sangat pas untuk dijadikan alternatif
tambahan ketika ingin menyusuri Jogja untuk melihat keindahan dan keunikan
Jawa dijamannya hingga sekarang.
Kalau berpetualang hari ahad, tipsnya adalah datang pagi ke Istana Air
Tamasari lalu berjalan beberapa meter ke arah belakang menuju Sumur Gumuling.
Nah, sebelum jam menunjukan pukul 10.00 am silakan untuk segera berkunjung ke
Keraton Jogjakarta untuk melihat tari dan iringan musik gamelan yang mengugah
rasa, kalau boleh dinilai maka tari dan musik di keraton Jogja bisa dinilai
sepuluh plus (10+). Selain gerakan tarian yang sangat bagus, juga tabuhan
musik gamelan yang membuat pendengarnya untuk tetap terdiam
menikmati.
Pariwisata kota Yogyakarta.net
copyright 2014
CSS
*{
margin:0;
padding:0;
}
@font-face {
font-family: 'Browallia New';
src: local('?'),url('font/Browallia-New.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: url(images/header.jpg)
repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'Browallia New';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
*{
margin:0;
padding:0;
}
@font-face {
font-family: Eras Light ITC;
src: local('?'),url('font/Eras-Light-ITC.TTF') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background:
url(images/header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'Eras Light ITC';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
|
HTML
PANTAI INDRAYANTI
JUN 01,
2014Dilihat : 3,487,497
Pantai
Indrayanti merupakan salah satu pantai yang berada di Kabupaten Gunung Kidul
Daerah Istimewa Yogyakarta. Pantai yang terletak di Desa Tepus ini
bersebelahan dengan Pantai Sundak. Pasir Putih membentang dari timur ke barat
di Pantai Indrayanti. Selain pasir putih, para wisatawan sangat dimanjakan
dengan keindahan dan kebersihan pantai ini.
Menuju
Pantai Indrayanti anda membutuhkan waktu kurang lebih 2 jam perjalanan dari
Kota Yogyakarta. Dari Wonosari ada 2 jalan menuju pantai Indrayanti, pertama
melalui jalur Selatan yang melewati Pantai Baron, Kukup, Krakal, Sundak dan
ke timur sampai Pantai Indrayanti. Atau bisa melewati pertigaan dari Wonosari
mengambil jalur ke kiri arah ke Pantai Sundak, Siung dan Wediombo. Jalan
menuju lokasi Pantai sudah cukup baik tetapi harus berhati - hati karena
medan yang naik turun melewati perbukitan sewu. Untuk sampai disana anda
harus menggunakan kendaraan pribadi dikarenakan belum ada kendaraan umum yang
melayani rute tersebut.
Pariwisata kota
Yogyakarta.net copyright 2014
CSS
*{
margin:0;
padding:0;
}
@font-face {
font-family: Dael Calligraphy;
src: local('?'),url('font/Dael-Calligraphy.TTF') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background:
url(images/header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'Dael Calligraphy';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
font-family:'Dael Calligraphy';
}
|
TAMPILAN
HTML
CAND PRAMBANAN
JUN 01,
2014Dilihat : 3,487,497
Sekilas Candi
Prambanan Candi Rara Jonggrang atau Lara Jonggrang yang terletak di Prambanan
adalah kompleks candi Hindu terbesar di Indonesia. Candi ini terletak di
propinsi Jawa Tengah, di pulau Jawa, kurang lebih 20 km timur Yogyakarta, 40
km barat Surakarta dan 120 km selatan Semarang, persis di perbatasan antara
provinsi Jawa Tengah dan Daerah Istimewa Yogyakarta. Candi Rara Jonggrang
terletak di desa Prambanan yang wilayahnya dibagi antara kabupaten Sleman dan
Klaten.Pembangunan candi ini pada sekitar tahun 850 Masehi. Belum jelas siapa
pendirinya, namun salah seorang dari kedua orang ini, yakni: Rakai Pikatan,
raja kedua wangsa Mataram I atau Balitung Maha Sambu, semasa Tidak lama
setelah dibangun, candi ini ditinggalkan dan mulai rusak.
Renovasi
candi ini dimulai pada tahun 1918, dan sampai sekarang belum selesai.
Bangunan utama baru diselesaikan pada tahun 1953. Banyak bagian candi yang
direnovasi, menggunakan batu baru, karena batu-batu asli banyak yang dicuri
atau dipakai ulang di tempat lain. Sebuah candi hanya akan direnovasi apabila
minimal 75% batu asli masih ada. Oleh karena itu, banyak candi-candi kecil
yang tak dibangun ulang dan hanya tampak fondasinya saja. Sekarang, candi ini
adalah sebuah situs yang dilindungi oleh UNESCO mulai tahun 1991. Antara lain
hal ini berarti bahwa kompleks ini terlindung dan memiliki status istimewa,
misalkan juga dalam situasi peperangan.
Pariwisata kota
Yogyakarta.net copyright 2014
CSS
*{
margin:0;
padding:0;
}
@font-face {
font-family: PRISTINA;
src: local('?'),url('PRISTINA.TTF') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background:
url(images/header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'PRISTINA';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
|
HTML (SAMA)
CSS
*{
margin:0;
padding:0;
}
@font-face {
font-family: Lumpbump;
src: local('?'),url('font/Lumpbump.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background:
url(images/header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'Lumpbump';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
|
Html sama
Css
*{
margin:0;
padding:0;
}
@font-face {
font-family: Flowerpot;
src: local('?'),url('font/Flowerpot.otf') format('truetype');
font-weight: normal;
font-style: normal;
}
body{
background-color:#DDDDDD;
}
#wrapper{
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{
background:
url(images/header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{ width:800px ; height:38px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:1px solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
color : #ffffff;
}
#header form input{
border:none;
height:20px;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
font-family: 'Flowerpot';
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
|
tampilan
3).KESIMPULAN
a.
Dalam CSS dapat menampilkan jenis font
pada halaman Web yang ada walaupun jenis font tersebut belum diinstall pada
komputer klien.Dengan menggunakan “font-face”
b.
Didalam css pun juga dapat digunakan
untuk menggatur jenis font sehingga fungsi tag dalam html pun jadi
jarang diggunakan.
4).LISTING
TERLAMPIR
0 komentar:
Post a Comment
Thanks For Your Feedback.