Pemrograman Internet
Oleh : Suprayogi,S.Kom
1
CSS (CASCADING STYLE SHEET)
CSS DASAR
• Tentang CSS
• Kegunaan CSS
• Aturan Penulisan
• CSS Background
• CSS Font
• CSS Teks
• CSS Border
• Margin
• Contoh Layout Web menggunakan CSS
Pemrograman Internet
Oleh : Suprayogi,S.Kom
2
Tentang CSS
CSS (Cascading Style Sheet)
adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk
mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak
terjadi pengulangan tulisan.
Keuntungan menggunakan CSS
• Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
• Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
• Mempercepat proses rendering/pembacaan HTML.
Cara penulisan CSS
Inline style sheet
Penulisan didalam elemen HTML.
Contoh script 1
Gambar 1
Embedded Style Sheet
Penulisan CSS didalam dokumen HTML dan menggunakan tag <style></style>
Contoh script 1
Gambar 2
Pemrograman Internet
Oleh : Suprayogi,S.Kom
3
Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.
Contoh script 3
Contoh script style1.css
Gambar 3
Pemrograman Internet
Oleh : Suprayogi,S.Kom
4
Aturan penulisan CSS
Selector
Terdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan value
Contoh
H1
{
Color : #0000FF
}
Keterangan :
Selector : H1
Properti : Color
Value : #0000FF
Macam-macam Selector
Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
Class
Diawal penulisan menggunakan tanda titik,
pada HTML ditambahkan class
stlye1.css
Contoh script 4
Gambar 4
Pemrograman Internet
Oleh : Suprayogi,S.Kom
5
ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain
web krn didefiniskan denga ID berbeda.
Misl.
Style1.css
Contoh script5
Gambar 5
Pemrograman Internet
Oleh : Suprayogi,S.Kom
6
CSS Background
Property background
1. Background-color
Contoh:
Body {
Background-color : green;
}
2. Background-Image
Contoh:
Body {
Background-image : url(gambar1.jpg);
}
3. Background-attachment
Body {
Background-attachment : scroll;
}
4. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url(image/gambar1.jpg);
Background-position : bottom center
}
style1.css
Contoh script6
Gambar 6
Pemrograman Internet
Oleh : Suprayogi,S.Kom
7
CSS Font
Property Font
1. Font-family
P {
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P {
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P {
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P {
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {
Font-weight : bolder;
}
CSS Teks
Property teks
1. color
P {
color :red;
}
2. teks-align (nilai left,right,center,justify)
P {
Text-align :justify;
}
3. text-decoration (nilai : none,underline,overline,line-through,blink)
P {
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize;
}
5. Letter-spacing
P {
letter-spacing : 20px;
}
6. Teks-indent
P {
Text-indent : 50px;
}
Pemrograman Internet
Oleh : Suprayogi,S.Kom
8
CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
CSS Border
Property Border
1. border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-style-type : groove ;
}
2. border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-bottom-style : groove ;
}
3. border-bottom-width ()
.b1 {
border-bottom-width :10px;
}
4. border-bottom-color ()
.b1 {
border-bottom-color :red;
}
Pemrograman Internet
Oleh : Suprayogi,S.Kom
9
Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
Pd css
.kotak {
Padding-top : 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
Pada file HTML
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”cssku.css”>
</style>
</head>
<body>
<p class=kotak > teks1 <p>
</body>
</html>
Pemrograman Internet
Oleh : Suprayogi,S.Kom
10
Latihan
Membuat layout halaman web menggunakan CSS
File cssku.css
#header {
position:static;
height:90px;
width:800px;
background-color:#666666;
padding-top:4%;
padding-right:2%
padding-bottom:2%;
padding-left:4%;
line-height:0.5px;
left:50px;
right:50px;
}
.judul1 {
font-family:verdana,helvetica,sans-serif;
font-size:1em;
color:#ffffff;
letter-spacing:1em;
}
.judul2 {
font-family:verdana,helvetica,sans-serif;
font-size:1.5em;
color:#ffff00;
letter-spacing:1em;
text-decoration:line-underline;
}
.judul3 {
font-family:verdana,helvetica,sans-serif;
font-size:1.5em;
color:#ffff00;
letter-spacing:0.25em;
text-decoration:line-underline;
}
#nav_left{
background-color:#999999;
height:40px;
width:170px;
line-height:0.1;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffffff;
}
#nav_left_link {
font-size:10px;
background-color:#666666;
height:415px;
width:170px;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffffff;
}
#nav_left_menu_caption {
background-color:#666666;
height:20px;
width:170px;
line-height:0.1;
padding:0.5em;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-width:#ffffff;
}
.menu_caption {
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
color:#ffff00;
text-align:center;
vertical-align:middle;
}
#stylelink a:link, #stylelink a:visited {
display:block;
border-top:1px solid #ffffff;
border-bottom:1px solid #cccccc;
background-color:#666666;
font-weight:bold;
color:#ffff00;
width:100px;
padding-top:3px;
padding-right:0px;
padding-bottom:3px;
padding-left:10px;
text-decoration:none;
}
#stylelink a:hover {
border-top:1px solid #cccccc;
background-color:#0000hh;
background-image:none;
font-weight:bold;
text-decoration:none;
color:#ffffff;
}
#bawah{
background-color:#999999;
height:30px;
width:800px;
padding-right:2em;
padding-left:4em;
padding-top:1em;
padding-bottom:1em;}
.copyright_bawah{
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
Pemrograman Internet
Oleh : Suprayogi,S.Kom
11
color:#ffffff;
text-align:center;
width:800px;
}
#box_isi {
position : absolute;
height:auto;
width:615px;
left:204px;
top:100px;
padding:1em;
border-left-width:1px;
border-left-style:dotted;
border-left-color:#666666;
border-right-width:1px;
border-right-style:dotted;
border-right-color:#666666;}
.isi {
font-family:verdana,arial,helvetica,sans-serif;
font-size:1.2em;
color:#666666;
line-height:2em;
text-align:justify;
vertical-align:none;
}
body {
font-family:verdana,arial,helvetica,sans-serif;
background-color:#cccccc;
margin:auto;
padding:0.2em;
}
p {
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
}

'Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya dan berkomunikasi. Multimedia sering digunakan dalam dunia hiburan. Selain dari dunia hiburan, Multimedia juga diadopsi oleh dunia game.

Multimedia dimanfaatkan juga dalam dunia pendidikan dan bisnis. Di dunia pendidikan, multimedia digunakan sebagai media pengajaran, baik dalam kelas maupun secara sendiri-sendiri. Di dunia bisnis, multimedia digunakan sebagai media profil perusahaan, profil produk, bahkan sebagai media kios informasi dan pelatihan dalam sistem e-learning.

Pada awalnya multimedia hanya mencakup media yang menjadi konsumsi indra penglihatan (gambar diam, teks, gambar gerak video, dan gambar gerak rekaan/animasi), dan konsumsi indra pendengaran (suara). Dalam perkembangannya multimedia mencakup juga kinetik (gerak) dan bau yang merupakan konsupsi indra penciuman. Multimedia mulai memasukkan unsur kinetik sejak diaplikasikan pada pertunjukan film 3 dimensi yang digabungkan dengan gerakan pada kursi tempat duduk penonton. Kinetik dan film 3 dimensi membangkitkan sense realistis.

Bau mulai menjadi bagian dari multimedia sejak ditemukan teknologi reproduksi bau melalui telekomunikasi. Dengan perangkat input pendeteksi bau, seorang operator dapat mengirimkan hasildigitizing bau tersebut melalui internet. Komputer penerima harus menyediakan perangkat output berupa mesin reproduksi bau. Mesin reproduksi bau ini mencampurkan berbagai jenis bahan bau yang setelah dicampur menghasilkan output berupa bau yang mirip dengan data yang dikirim dari internet. Dengan menganalogikan dengan printer, alat ini menjadikan feromon-feromor bau 

DINUS INSIDE

Dinus Inside adalah..................................????????????????

Awalnya saya hanya bisa membayangkan apa sih itu dinus inside? terjawablah sudah mulai tanggal 3 september 2012 kemarin, bahwa kegiatan itu aku menanggapinya "NANO-NANO" artinya asem manis, enak g enak ada semua!! tapi yang saya tau tujuan dinus inside adalah pengenalan kampus secara keseluruhan mencakup semua dosen dan staf-stafnya, serta cara-cara regristrasi yang ada si kampus Universitas Dian Nuswantoro dan masih banyak yang mungkin saya tidak tangkap! karna jujur saya suka borring sama kegiatan tersebut yang menurut saya amat sangat melelahkan dan sangat membosankan.

bagaimana tidak, lha secara kita semua dengerin ceramah / kuliah umum dengan posisi duduk berjam-jam, siapa orang yang tidak capek. belum lagi penugasan-penugasan yang diberikan amat sangat menyiksa. kita pulang jam 4 sore, bahkan lebih. setelah pulang harus mikir buat penusan yang telah di berikan, dan itu memakan waktu yang amat sangat panjang yaitu sampai tengah malam. selanjutnya tidur bangun dan jalannin dinus inside seperti hari-hari sebelunnya. Apa itu tidak menyiksa???? kapan istirahatnya????



DEMKIAN TERIMA KASIH, MAAF JIKA MENYINGGUNG

DINUS EXPO

awalnya saya nggak tau bagaimana dinus expo itu. yang ada hanya berfikir paling-paling sama separti dinus inside yang melelahkan itu. tapi setelah mengukuti dinus expo tidak seperti yang saya bayangkan, malah jauh dari prasangka saya. 

dinus expo itu mengasikkan ya...!! dimana kita bisa komunikasi dengan berbagai komunitas, organisasi, atau apalah yang ada di UDINUS. dan kita juga bisa tanya tentang ini itu, lumayan buat tambah pengalaman dan sebagai media untuk pendekatan kepada senior. 

tapi ada kekurangngannya juga sih di dinus exponya. yaitu tempat dan layout stan-stannya yang sanagt tidak nyaman bagi mahasiswa baru yang membutuhkan stempel atau tanda tangan dari masing-masing stan. 

tapi tetap aja asik, semoga asiknya ini sampai besok akhir dinus expo.

Salam kreator masa depan........................ Selalu berkarya!!!!!!!!!!!!!!!!!!!!!!!!

gambar di stan DOSCOM.