Nama : Davin Pramudya Rafdianzikri
Nama panggil : Davin
Status : Pelajar
Sekolah : SMK Telkom Sandhy Putra Banjarbaru
Angkatan : 14
TTL : Banjarbaru, 14 November 1997
Agama : Islam
Gol. Darah : O
Zodiak : Scorpio
Minggu, 26 Oktober 2014
Profil Penulis
Nama : Davin Pramudya Rafdianzikri
Nama panggil : Davin
Status : Pelajar
Sekolah : SMK Telkom Sandhy Putra Banjarbaru
Angkatan : 14
TTL : Banjarbaru, 14 November 1997
Agama : Islam
Gol. Darah : O
Zodiak : Scorpio
Foto Selama Magang di PT. Telkom Witel Semarang
 |
| Praktek Jumper di STO Majapahit |
 |
| Membuat Aplikasi Web Canvasser di Witel Semarang |
 |
| Penjemputan Selesai Magang di Witel Semarang |
Sabtu, 25 Oktober 2014
MENGATUR WARNA
MENGATUR WARNA
Contoh berikut
adalah perintah pengaturan warna.
body {
color: black;
background:
white; }
strong { color: red }
Model
pengaturan di atas
memberikan warna hitam teks (default)
dan latar belakang putih, tetapi memiliki elemen
strong pada warna merah. Ada 16 buah nama warna standar yang dijelaskan dalam uraian berikut. Selain itu dapat juga
mempergunakan nilai desimal untuk
warna merah, hijau dan biru, dan masing-masing memiliki interval antara 0 sampai
255. Misalnya rgb(255, 0, 0) akan
memberikan warna merah di layar monitor. Juga dapat mempergunakan angka hexadecimal yang dimulai karakter # yang diikuti enam angka hexadecimal sebagai pengaturan warna.
Sebuah pengubah juga diberikan di
bawah
ini agar dapat melakukan pengubahan nilai dari RGB ke nilai hexadesimal.
Mengatur
warna link
Cara mempergunakan CSS untuk mengatur warna hypertext link, dengan warna yang
berbeda untuk link yang belum pernah
diakses, link yang pernah diakses dan
link yang akan kemudian diakses serta link yang aktif. Cara mengatur warnanya
pada saat kursor mouse berada di atas daerah yang akan diberi link.
Hal ini dapat di tuliskan dalam bentuk perintah berikut :
:link { color:
rgb(0, 0, 153) } /* untuk warna
link yang
belum
diakses */
:visited {
color: rgb(153, 0, 153) } /* untuk
warna link
yang telah
diakses */
:active {
color: rgb(255, 0, 102) } /* untuk
warna link
ketika link
diklik */
:hover {
color: rgb(0, 96, 255) } /* untuk warna
link ketika
mouse
diatasnya*/
Kadang-kadang
ingin memperlihatkan link hyperteks
tanpa garis bawah. Cara melakukan ini dengan memberikan property text-decoration
atau none, contoh :
a.plain { text-decoration:
none }
Contoh berikut
juga menampilkan link yang tidak bergaris bawah.
This is <a
class="plain" href="what.HTML">not
underlined</a>
MENAMBAHKAN BORDER DAN LATAR BELAKANG
MENAMBAHKAN BORDER DAN LATAR BELAKANG
Cara menambahkan border disekitar heading, daftar (list),
atau paragraf atau sekelompok heading,
list dan paragraf secara tertutup
dengan mempergunakan elemen div.
Contoh :
div.box{ border: solid; border-width: thin; width: 100% }
Catatan
: tanpa property "width"
beberapa browser akan menempatkan tepi
kanan terlalu jauh ke arah kanan. Untuk mencegah hal ini menuliskan perintah HTML-nya sebagai berikut :
<div
class="box"> The content within this DIV
element
will be enclosed in a box with a thin line
around it. </div>
Ada sedikit jenis border yaitu : dotted, dashed,
solid, double, groove,
ridge,
inset dan outset. Lebar border diatur dengan mempergunakan property "border-width".
Nilai dari property ini yaitu thin, medium dan thick yang
tampak setipis ukuran 0.1
em.
Property "border-color" memungkinkan pengaturan warna.
Sebuah efek yang cantik dapat
dilakukan dengan memberikan warna latar belakang kotak dengan warna tebal (solid color) atau dengan hamburan
gambar ("tile image").
Untuk melakukan ini perlu mempergunakan property
"background" dengan mengikuti
perintah berikut ini.
div.color
{
background:
rgb(204,204,255);
padding:
0.5em;
border:
none;
}
Tanpa pengaturan property border, biasanya program browser hanya akan menampilkan warna standar saja. Property padding memberikan beberapa ruangan di antara tepi-tepi daerah
berwarna dan teks yang ada di dalamnya.
Cara mengatur nilai property padding
dengan menambahkan padding-left, padding-top, padding-right dan padding-bottom.
Pengaturan ini dituliskan misalnya sebagai :
padding-left: 1em.
Jika menginginkan border pada satu
sisi halaman web saja. Caranya
melakukan pengontrolan tiap sisi border
dengan memberikan keterangan border-left,
border-top, border-right dan border-bottom.
Contoh
:
p.changed
{
padding-left:
0.2em;
border-left:
solID;
border-right:
none;
border-top:
none;
border-bottom:
none;
border-left-wIDth:
thin;
border-color: red; }
Susunan
perintah di atas
memberikan efek pada tampilan web dengan
border berwarna merah di sisi sebelah kiri.
MENGATUR FORMAT FONT
MENGATUR FORMAT FONT
1.
Model huruf
Model yang umum dipakai adalah teks
miring (italik) atau tebal (bold). Umumnya program browser
mempergunakan tag em untuk huruf italic dan tag strong untuk huruf tebal. Misalnya ingin menuliskan kode em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode strong untuk huruf tebal uppercase, perintahnya dituliskan
sebagai berikut :
em {
font-style: italic; font-weight: bold; }
strong {
text-transform: uppercase; font-weight:
bold; }
bila
gagal dapat ditambahkan perintah ini :
h2 { text-transform: lowercase; }
2.
Mengatur ukuran huruf
Kebanyakan program browser mempergunakan huruf yang lebih
besar untuk heading yang penting sifatnya. Bila menimpa ukuran defaultnya, ada resiko yaitu huruf
menjadi tampak lebih kecil khususnya bila mempergunakan ukuran yang ditambahkan
tersebut dengan ukuran titik (point).
Karenanya disarankan untuk melakukan pengaturan ukuran huruf dengan ukuran yang
sama.
Contoh
berikut mengatur ukuran heading dalam persen relatif terhadap ukuran teks
normal.
h1 {
font-size: 200%; }
h2 {
font-size: 150%; }
h3 { font-size: 100%; }
3.
Mengatur jenis huruf
Bisa saja jenis huruf favorit tidak bisa ditampilkan
oleh berbagai jenis browser. Untuk
mengatasi hal ini dapat dituliskan beberapa jenis huruf yang tidak dapat ditampilkan
oleh hampir semua browser. Ada beberapa
jenis huruf generik yang dijamin
cocok, sehingga disarankan untuk mengakhiri daftar perintah HTML dengan salah satu jenis huruf
berikut : serif, sans-serif, cursive, fantasy, atau monospace, contoh :
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family:
Garamond, Times New Roman, serif;}
Dalam
contoh ini heading penting akan
ditampilkan dalam bentuk huruf Garamond,
bila gagal maka akan ditampilkan dalam bentuk Times New Roman, dan bila juga masih tidak dapat tampil, maka
akan tampil sebagai huruf serif. Teks
paragraf akan ditampilkan dengan huruf Verdana
atau bila masih tidak
tampil juga, maka browser masih dapat
menampilkannya dengan jenis huruf standar
sans-serif.
Senin, 20 Oktober 2014
PEMAKAIAN ELEMENT STYLE
PEMAKAIAN ELEMENT STYLE
Untuk mengatur warna huruf dan
latar belakang dapat dikerjakan dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen.
<style
type="text/CSS">
body { color: black; background: white; }
</style>
Pernyataan yang
ditulis antara kode tag <style> dan </style> menunjukkan perintah pengaturan style.
1.
Link ke sheet lainya
Apabila menginginkan style yang sama untuk halaman HTML yang lain, disarankan memisahkan sheet-sheet dari dokumen HTML namun satu dan lainnya terhubung
dengan cara link.
<link
rel=”stylesheet” href=”style.CSS”>
Kode tag untuk link ini ditempatkan di bagian "head" dokumen. Perintah rel
perlu diatur dengan pernyataan "stylesheet"
agar supaya browser dapat menemukan
perintah href sebagai penunjukan ke
alamat Web (URL) sheet.
2.
Mengatur tepi halaman (page margin)
Halaman Web akan tampil cantik bila dituliskan dalam margin yang lebih lebar. Mengatur sisi kiri dan kanan memakai
karakter “margin-left” dan “margin-right”, Contoh :
<style
type="text/CSS">
body {
margin-left: 10%; margin-right: 10%; }
</style>
Perintah di atas
dituliskan dengan tujuan agar tampilan halaman Web di layar monitor memiliki
batas halaman kiri 10% dari lebar layar monitor.
3.
Mengatur inden kiri dan kanan
Agar halaman Web tampil lebih cantik bisa
juga diberikan inden (spasi) dari margin kiri beberapa huruf sebelum
menuliskan awal kalimat. Contoh :
<style
type="text/CSS">
body {
margin-left: 10%; margin-right: 10%; }
h1 {
margin-left: -8%;}
h2,h3,h4,h5,h6
{ margin-left: -4%; }
</style>
4.
Mengatur jarak penulisan
tepi atas dan bawah halaman
Program Browser biasanya mengerjakan batas atas dan bawah, paragraf dan lain-lain
dengan baik. Namun ketika ingin membuat ruang di sebelah atas atau bawah
halaman web, atau ingin membuat spasi
yang khusus, barulah di sini
perlu memiliki cara mengaturnya.
Property
"margin-top" menentukan
ruang sebelah atas dan property
"margin-below" menentukan
ruang sebelah bawah halaman web.
Bila hendak mengatur semuanya dengan heading h2, cukup menuliskan dengan perintah HTML sebagai berikut :
h2 { margin-top: 8em; margin-bottom: 3em; }
Kode
em merupakan unit penting dalam mengatur ukuran tinggi font (huruf). Ini lebih mudah bila dibandingkan dengan pengaturan pixel atau titik (point). Unit ini akan
sangat berguna pada pembuatan huruf besar.
Satuan
titik (Point) umumnya dipergunakan
oleh program word processor misalnya
dituliskan ukuran huruf 10 pt.
Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran huruf yang berbeda
pada pemakaian program browser yang
berbeda pula. Apa yang dikerjakan dengan baik dengan menggunakan sebuah program
browser, bila dibaca dengan program browser yang lain belum tentu baik.
Pergunakanlah kode em untuk mengatasi
hal ini.
Untuk
mengatur ruang sebelah atas bagian heading
halaman web, sebaiknya membuat nama style untuk heading tersebut. Dalam penulisan HTML-nya cukup menggunakan atribut
class. Contoh :
<h2 class="subsection">Getting started</h2>
Kemudian
pengaturan ruangnya ditulis dengan perintah berikut :
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
Pengaturan
ini dimulai dengan nama tag, sebuah
titik dan kemudian nilai dari atribut class.
Bila pengaturan tersebut tidak
memberikan hasil. Ada cara lain untuk mengatur style elemen tertentu. Tapi atribut
class tetap bersifat fleksibel.
Pada
saat sebuah "heading"
diikuti dengan sebuah paragraf, nilai untuk batas bawah (margin-bottom) untuk heading
tersebut tidak
ditambahkan dengan nilai batas atas (margin-top)
paragraf.
5.
Inden
pada baris pertama
Untuk membuat inden pada baris pertama tiap paragraf. Cara berikut dapat dilakukan.
p { text-indent: 2em; margin-top: 0; marginbottom: 0; }
Cara tersebut
akan membuat inden pada baris pertama
paragraf sejauh 2 em dan memberikan
jarak antar paragraf.
PENGGUNAAN CSS
PENGGUNAAN CSS
Ada 3 cara penggunaan CSS yaitu inline CSS, embedded
CSS dan external CSS.
1.
Inline CSS
Inline CSS merupakan cara penggunaan CSS dengan menambahkan langsung di tag dokumen HTMLnya sebagai atribut.
Contoh :
. . . .
<p style="color:blue">
Membuat tulisan warna biru
</p>
<p style="font-style:italic;">
Membuat tulisan miring
</p>
. . . .
Penulisan CSS dengan cara inline ini dimulai dengan kata style lalu diikuti dengan syntax property : value.
2.
Embedded CSS
Embedded CSS merupakan cara penggunaan CSS yang disisipkan di dalam tag <style> ...</style>. Tag style tersebut disimpan di antara
tag <head>...</head>.
Contoh:
<HTML>
<head>
<style>
p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar
CSS Mudah</p>
<p>Pengaturan
paragraf dengan menggunakan
CSS di dalam
header dokumen HTML</p>
<p>Dengan
contoh ini, maka setiap paragraf
atau yang berada diantara
</p><p>dan</p>akan memiliki format yang sama </body>
</HTML>
3.
External CSS.
Cara ini menggunakan file CSS yang dituliskan
secara terpisah dengan dokumen HTML.
Dengan cara ini, hanya perlu dimiliki satu set
kode CSS yang digunakan untuk semua
halaman web. Ada dua langkah yang
harus dikerjakan untuk menggunakan CSS
dengan cara ini
a.
Membuat satu file dengan
notepad atau teks editor lain, dan beri
nama, misalkan: style.CSS, lalu tuliskan kode-kode CSS di dalam file tersebut.
p{
font-family:
arial;
font-size:
small;
}
h1{
color: red;
}
b.
Langkah kedua adalah memanggil file
style.CSS dari semua halaman web.
Caranya dengan memasukkan kode di bawah ini yang disisipkan di antara tag <head> dan </head>
....
<head>
<link
rel=”stylesheet” href=”style.CSS”
type=”text/CSS”></link>
</head>
....
KOMENTAR DALAM STYLE SHEET
KOMENTAR DALAM STYLE SHEET
Comments
atau komentar biasanya digunakan oleh programmer
untuk memudahkan mengingat kembali script
yang sudah ditulisnya, Comments di CSS yaitu dengan menggunakan:
/* isi Comments */
Contoh
:
H1 { color:blue;} /* H1 elements akan menjadi
biru */
Tags.H1.color = “blue”; /* H1 elements akan
menjadi biru */
STRUKTUR PENULISAN CSS
STRUKTUR PENULISAN CSS
Berikut
ini adalah struktur penulisan CSS.
Selector {
Properties : Value; }
1.
Selector
Bagian pertama sebelum tanda “{}”
disebut selector, selector digunakan untuk menentukan element mana yang akan diatur stylenya. CSS memiliki 3 jenis selector
basic yaitu class selector, ID selector, dan tag selector.
a. Class selector
Class adalah “agen bebas” yang dapat diterapkan
untuk tag HTML apapun. Kita dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam CSS
disimbolkan dengan tanda
titik ( . ).
Contoh :
Penulisan code di dalam dokumen HTML
. . . .
<h3 class=’judul’>
Belajar Membuat Website
</h3>
. .
. .
Penulisan
code dalam CSSnya
.judul{
Font : 12pt Impact;
}
Sebuah
selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class
jika terdapat 2 atau lebih elemen/tag
HTML yang bisa memiliki style yang sama dalam satu halaman.
b.
ID
Selector
Hampir
sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML,
tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML
tertentu.
Contoh:
Penulisan
code dalam dokumen HTML
. . .
.
<div
id=’footer’>
Copy-Right
Telkom School – 2014
</div>
. . . .
Penulisan
code di CSSnya
#footer
{
color:
blue;
border:
1px solid black;
}
Selector ID digunakan hanya untuk 1 elemen
pada satu halaman web. Misalnya saja ID #footer
di atas
hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.
c. Tag
selector
Nama dari elemen HTML digunakan sebagai selector
untuk mendefinisikan tag HTML yang
berasosiasi. Misalnya, selector dari
<h1> adalah h1. HTML selector digunakan dalam CSS rule
untuk mendefinisikan bagaimana suatu tag
akan ditampilkan.
Contoh:
Penulisan code di dokumen HTML
.
. . .
<h1> Mengarungi Samudra PHP
</h1>
<h1> Belajar HTML dan CSS
</h1>
. .
. .
Penulisan code di CSSnya
h1{
font: 12pt Impact;
color:red;
}
2.
Declaration
Bagian
yang berada di dalam
tanda “{}”, terdiri dari property dan nilainya.
Langganan:
Postingan (Atom)
