Pemrograman Web I - Belajar HTML 5

Pemrograman web 1 Materi :css (cascading style sheet)
Tulislah program di bawah ini dan simpan dengan nama contoh1.html ! <HTML> <HEAD> <TITLE>CSS Pertamaku</TITLE> <STYLE TYPE=text/CSS> <!-H1 { font-size: 14pt; font-style: italic; color: green; } --> </STYLE> </HEAD> <BODY> <H1>CSS Pertamaku</H1> Selamat mencoba CSS! </BODY> </HTML>
Tulislah program di bawah ini dan simpan dengan nama contoh2.html ! <HTML> <HEAD> <TITLE>CSS untuk Tabel<TITLE> <STYLE TYPE=text/CSS> <!-TH { font-weight: bold; background-color: blue; color: white; } TR { background-color: silver; color: blue; } --> </STYLE> </HEAD> <BODY> <TABLE> <TR><TH>Kata</TH><TH>Arti</TH></TR> <TR><TD>Blue</TD><TD>Biru</TD></TR> <TR><TD>Green</TD><TD>Hijau</TD></TR> </TABLE> </BODY> </HTML>
Tulislah program di bawah ini dan simpan dengan nama contoh3.html ! <HTML> <HEAD> <TITLE>Atribut ID<TITLE> <STYLE TYPE=text/CSS> <!-#Tebal { font-weight: bold; color: blue; } #Miring { font-style: italic; color: pink; } --> </STYLE> </HEAD> <BODY> <H1>PANTUN</H1> <H2 ID=Miring> Kalau ada jarum yang patah<BR> Jangan disimpan dalam peti</H2> <H3 ID=Tebal> Kalau ada kata yang salah<BR> Jangan disimpan dalam hati</H3> </BODY> </HTML>
Tulislah program di bawah ini dan simpan dengan nama contoh4.html ! <HTML> <HEAD> <TITLE>Contoh Kelas<TITLE> <STYLE TYPE=text/CSS> <!-.kapital { text-transform: uppercase; } .kecil { text-transform: lowercase; } .garis_bawah { text-decoration: underline; } --> </STYLE> </HEAD> <BODY> <H1>KELAS</H1> <H2 CLASS=kapital>Tes, Tes, 123</H2> <H3 CLASS=kecil>Tes, Tes, 123</H3> <P CLASS=garis_bawah>Tes, Tes, 123<P> </BODY> </HTML>

Tulislah program di bawah ini dan simpan dengan nama contoh5.html ! <HTML> <HEAD> <HTML> <TITLE>Contoh Kelas<TITLE> <HEAD> TYPE=text/CSS> <STYLE <TITLE>Kelas untuk Tag<TITLE> <!-<STYLE.kapital { text-transform: uppercase; } TYPE=text/CSS>  --> </STYLE> </STYLE> </HEAD> </HEAD> <BODY> <BODY> <H1>KELAS</H1> <H3 CLASS=biru>Biru? Pasti!</H3> <H2 CLASS=kapital>Tes, Tes, 123</H2> <H3 CLASS=merah>Merah? Pasti!</H3> <H3 CLASS=kecil>Tes, Tes, 123</H3> <H4CLASS=garis_bawah>Tes, Tes, 123<P> <P CLASS=merah>Merah? Gak mungkin!</H4> </BODY> </BODY> </HTML> </HTML> Tulislah program di bawah ini dan simpan dengan nama contoh6.html ! <HTML> <HEAD> <TITLE>Kelas dan Tag<TITLE> <STYLE TYPE=text/CSS> <!-BODY { background-color: white; } CITE { color: red; font-size: 20pt; background-color: silver; } .biru { color: blue; } .biru CITE { color: blue; text-transform: uppercase; } --> </STYLE> </HEAD> <BODY> <CITE>Teks dalam CITE</CITE> <DIV CLASS=biru> Teks pada DIV dengan kelas biru <CITE> Teks dalam CITE yang berada dalam DIV dengan CLASS=biru. Warnanya menjadi biru. </CITE> </DIV> </BODY> </HTML>

Tulislah program di bawah ini dan simpan dengan nama contoh7.html ! <HTML> <HEAD> <TITLE>ID dan Tag<TITLE> <STYLE TYPE=text/CSS> <!-#ungu { color: purple; } #ungu H5 { color: blue; } --> </STYLE> </HEAD> <BODY> <H5>Teks H5 berdiri sendiri Warna bawaan</H5> <DIV ID=ungu> Warna teks ini ungu <H4>Teks dalam H4 Ungu juga</H4> <H5>Teks dalam H5 Biru</H5> Warna ini tentu saja ungu </DIV> </BODY> </HTML> Tulislah program di bawah ini dan simpan dengan nama contoh8.html ! <HTML> <HEAD> <TITLE>Atribut STYLE<TITLE> </HEAD> <BODY STYLE = font-size: 16pt; color: blue> Warna ini biru dan berukuran agak besar<BR> <BR> Contoh STYLE pada TABLE <TABLE STYLE = font-style: 12pt; background-color: silver; color: green; BORDER = 1> <TR><TH>Kata</TH><TH>Arti</TH></TR> <TR><TH>Blue</TH><TH>Biru</TH></TR> <TR><TH>Red</TH><TH>Merah</TH></TR> </TABLE> </BODY> </HTML>

Tulislah program di bawah ini dan simpan dengan nama contoh9.html ! <HTML> <HEAD> <TITLE>SPAN dengan STYLE<TITLE> </HEAD> <BODY> <P STYLE = color: blue;> Teks dalam paragraf ini berwarna biru <SPAN STYLE = font-weight: bold; background-color: silver;> Tulisan ini dalam keadaan tebal dan diberi latar belakang </SPAN> Teks ini kembali ke keadaan semula </P> </BODY> </HTML> Tulislah program di bawah ini dan simpan dengan nama contoh10.html ! <HTML> <HEAD> <TITLE>Contoh Kelas<TITLE> <STYLE TYPE = text/CSS> <!.miring { font-style: italic; } .garis_bawah { text-decoration: underline; } --> </STYLE> </HEAD> <BODY> <P>Keadaan asli</P> <P CLASS=miring>Miring lho.. <SPAN CLASS = garis_bawah> dan ini digarisbawahi </SPAN> Kembali miring saja </P> </BODY> </HTML>

Simpan dengan nama styleku.css /* styleku.css */ BODY { background-color: blue; color: white; } .miring { font-style: italic; } #besar { font-size: 39pt; } Simpan dengan nama contoh11.html <HTML> <HEAD> <LINK REL=STYLESHEET TYPE = text/CSS HREF = styleku.css> </HEAD> <TITLE>Contoh Style Eksternal</TITLE> <BODY> Tes, tes, 123... <P ID=besar CLASS=miring> Besar dan miring </P> </BODY> </HTML>
Simpan dengan nama style2.css /* style2.css */ .tebal { font-weight: bold; } Simpan dengan nama contoh12.html <HTML> <HEAD> <LINK REL=STYLESHEET TYPE = text/CSS HREF = styleku.css> <LINK REL=STYLESHEET TYPE = text/CSS HREF = style2.css> </HEAD> <TITLE>Contoh Style Eksternal</TITLE> <BODY> Tes, tes, 123... <P ID=besar CLASS=miring> Besar dan miring <SPAN CLASS=tebal> serta tebal </SPAN> </P> </BODY> </HTML>

PROPERTI CSS Properti font-size Berguna untuk menentukan ukuran font. Ada 4 cara untuk memberikan nilai ke properti ini, yaitu melalui nilai absolut, relatif, ukuran plus satuan, dan persentase. Cara Absolut Kemungkinan Nilai xx-small x-small small medium large x-large xx-large larger smaller Bilangan diikuti dengan: px in cm mm pt pc em en Bilangan diikuti dengan tanda % Keterangan Sangat kecil Agak lebih kecil Kecil Medium Besar Agak lebih besar Sangat besar Lebih besar Lebih kecil Piksel Inci Centimeter Milimeter Titik Pica Tinggi font Separuh tinggi font Relatif terhadap ukuran font orangtua (yang melingkupinya)
Relatif Panjang dan satuan
Persentase
Contoh: <HTML> <HEAD> <TITLE>Font-size</TITLE> </HEAD> <BODY> <SPAN STYLE = "font-size: xx-small">xx-small</SPAN> <SPAN STYLE = "font-size: x-small">x-small</SPAN> <SPAN STYLE = "font-size: small">small</SPAN> <SPAN STYLE = "font-size: medium">medium</SPAN> <SPAN STYLE = "font-size: large">large</SPAN> <SPAN STYLE = "font-size: x-large">x-large</SPAN> <SPAN STYLE = "font-size: xx-large">xxlarge</SPAN> <P STYLE = "font-size: 20px"> Teks berukuran 20 piksel<BR> <SPAN STYLE = "font-size: larger"> Dalam paragraf yang sama teks ini lebih besar<BR> </SPAN> <SPAN STYLE = "font-size: smaller"> Dalam paragraf yang sama teks ini lebih kecil<BR> </SPAN> <SPAN STYLE = "font-size: 150%"> Dalam paragraf yang sama teks ini lebih besar 150%<BR> </SPAN> </P> </BODY> </HTML>
Properti font-family Berguna untuk menentukan nama font. Contoh: <HTML> <HEAD> <TITLE>Font-family</TITLE> </HEAD> <BODY> <SPAN STYLE = "font-family: Impact, Broadway, Arial"; font-size: 30px"> Jika sistem Anda memiliki font Impact teks ini akan ditampilkan dengan Impact. Jika tidak, akan ditampilkan dengan font Broadway kalau font ini ada. Namun, ada kemungkinan font Arial yang akan digunakan kalau sistem tidak mendukung font Impact dan Broadway </SPAN> </BODY> </HTML>
Properti line-height Digunakan untuk menentukan jarak vertikal antara satu baris dengan di atas dan di bawahnya. Nilai yang dapat diberikan pada properti ini berupa normal (tinggi normal) atau bilangan diikuti dengan satuan seperti pada font-size ataupun berupa bilangan diikuti tanda %. Contoh: <HTML> <HEAD> <TITLE>Line-height</TITLE> </HEAD> <BODY> <P> Teks ini berukuran normal<BR> Jarak dengan baris di atas normal<BR> <SPAN STYLE = "line-height: 800%"> Jarak vertikal baris ini 800% jarak normal<BR> </SPAN> Teks ini merupakan penutup paragraf<BR> Perhatikan bahwa jarak vertikalnya normal </P> </BODY> </HTML>
Properti text-decoration Berguna untuk mengatur teks agar digarisbawahi, dicoret, atau dibuat berkedip. Nilai none underline line-through blink Contoh: <HTML> <HEAD> <TITLE>Text-decoration</TITLE> </HEAD> <BODY> <P STYLE = "text-decoration: underline"> Digarisbawahi </P> <P STYLE = "text-decoration: line-through"> Dicoret </P> <P STYLE = "text-decoration: blink"> Berkedip </P> <P STYLE = "text-decoration: underline"> <SPAN STYLE = "text-decoration: line-through"> Digarisbawahi dan berkedip </SPAN> </P> </BODY> </HTML> Keterangan tidak diapa-apakan digarisbawahi dicoret berkedip (tidak semua browser mendukung)
Teks Teks Teks Teks
<HTML> <HEAD> <TITLE>Link Tanpa Garis Bawah</TITLE> </HEAD> <BODY> Contoh Penggunaan text-decoration: none<BR> <A STYLE = "text-decoration: none" HREF = "http://www.fujitsu.com/"> Link tanpa Garis Bawah</A> <BR> <A HREF = "http://www.fujitsu.com/"> Link dengan Garis Bawah</A> </BODY> </HTML>

Properti font-weight Berguna untuk menebalkan teks atau menipiskan teks. Nilai yang dapat diberikan ke properti ini berupa: normal, menyatakan bentuk normal bold atau bolder, menyatakan bahwa teks ditebalkan lighter, menyatakan bahwa teks lebih tipis salah satu angka 100, 200, 300, 400, 500, 600, 700, 800, atau 900, yang menyatakan ketebalan teks. Semakin besar angkanya maka teks semakin tebal. Tidak semua browser mendukung seperti bolder atau lighter. Angka 100, 200, dan 300 tampaknya juga tidak memiliki pengaruh yang signifikan. Contoh: <HTML> <HEAD> <TITLE>Font-weight</TITLE> </HEAD> <BODY> <P STYLE = "font-size: 20px"> ABCDE123 (Normal)<BR> <SPAN STYLE = "font-weight: bold;"> ABCDE123 (Bold)<BR> </SPAN> <SPAN STYLE = "font-weight: bolder;"> ABCDE123 (Bolder)<BR> </SPAN> <SPAN STYLE = "font-weight: lighter;"> ABCDE123 (Lighter)<BR> </SPAN> <SPAN STYLE = "font-weight: 200;"> ABCDE123 (font-weight: 200)<BR> </SPAN> <SPAN STYLE = "font-weight: 700;"> ABCDE123 (font-weight: 700)<BR> </SPAN> <SPAN STYLE = "font-weight: 900;"> ABCDE123 (font-weight: 900)<BR> </SPAN> </P> </BODY> </HTML>
Properti font-style Berguna untuk mengatur teks agar dimiringkan atau tidak. Bila properti ini diisi dengan italic, teks akan dimiringkan. Jika isinya normal, teks tidak dimiringkan.
Properti text-transform Berguna untuk melakukan konversi terhadap teks. Dalam hal ini pengkonversian dapat diatur agar setiap huruf diubah menjadi huruf kecil atau huruf kapital atau hanya huruf pertama yang dikapitalkan. Nilai none capitalize uppercase lowercase Contoh: <HTML> <HEAD> <TITLE>Text-transform</TITLE> </HEAD> <BODY> Di mana ADA KEMAUAN di situ ADA JALAN (Normal)<BR> <SPAN STYLE = "text-transform: uppercase"> Di mana ADA KEMAUAN di situ ADA JALAN (uppercase)<BR> </SPAN> <SPAN STYLE = "text-transform: lowercase"> Di mana ADA KEMAUAN di situ ADA JALAN (lowercase)<BR> </SPAN> <SPAN STYLE = "text-transform: capitalize"> Di mana ADA KEMAUAN di situ ADA JALAN (capitalize)<BR> </SPAN> </BODY> </HTML> Keterangan Teks tidak dikonversi Awal setiap kata dikonversi menjadi huruf kapital Setiap huruf kecil akan diubah menjadi huruf kapital Setiap huruf kapital akan diubah menjadi huruf kecil
Properti text-align Berguna untuk mengatur peletakan teks pada arah horisontal. Nilai yang dapat diberikan pada properti ini berupa: left, right, center, justify. Contoh: <HTML> <HEAD> <TITLE>Text-align</TITLE> </HEAD> <BODY> <H2>ABCDEFG (Bawaan)</H2> <H2 STYLE = "text-align: left">ABCDEFG (left)</H2> <H2 STYLE = "text-align: right">ABCDEFG (right)</H2> <H2 STYLE = "text-align: center">ABCDEFG (center)</H2> </BODY> </HTML>
Properti text-indent Digunakan untuk melakukan indentasi, yaitu menjorokkan baris pertama agak ke kanan. Isi dari properti ini dapat berupa angka diikuti dengan suatu satuan atau angka diikuti dengan tanda %. Nilai dalam persen menyatakan relatif terhadap tag orangtua (yang melingkupinya). Contoh: <HTML> <HEAD> <TITLE>Text-indent</TITLE> </HEAD> <BODY> <P>Ini merupakan suatu contoh teks dalam paragraf yang tidak dilengkapi dengan text-indent.<BR> <SPAN STYLE = "text-indent: 20px"> Sedangkan teks ini menggunakan text-indent: 20px. Perhatikan efeknya! <SPAN> </P> </BODY> </HTML>
Properti border-style Berguna untuk mengatur bingkai suatu isi dalam halaman web. Nilai none solid double inset outset groove ridge Keterangan Nilai default Bentuk 2 dimensi Bentuk 2 dimensi Bentuk 3 dimensi Bentuk 3 dimensi Bentuk 3 dimensi Bentuk 3 dimensi

Pemrograman Web I - Belajar HTML 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pemrograman Web I - Belajar HTML 5

Uploaded by

Copyright:

Available Formats

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Relatif Panjang dan satuan

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Teks Teks Teks Teks

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

Pemrograman web 1 Materi :css (cascading style sheet)

You might also like