P. 1
Pemrograman Web I_ Belajar HTML 5

Pemrograman Web I_ Belajar HTML 5

|Views: 293|Likes:
Published by Cek Ly
Belajar Web, belajar html, belajar membuat web, belajar mahir web, pemrograman web 1, belajar div, tag, dengan html
Belajar Web, belajar html, belajar membuat web, belajar mahir web, pemrograman web 1, belajar div, tag, dengan html

More info:

Published by: Cek Ly on Aug 21, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

12/16/2014

pdf

text

original

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>

Pemrograman web 1 Materi :css (cascading style sheet)

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>

Pemrograman web 1 Materi :css (cascading style sheet)
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”> <!-- .kecil { text-transform: lowercase; } H3.merah { color: red; } .garis_bawah { text-decoration: underline; } H3.biru { color: blue; } --> --> </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>

Pemrograman web 1 Materi :css (cascading style sheet)
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>

Pemrograman web 1 Materi :css (cascading style sheet)
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>

Pemrograman web 1 Materi :css (cascading style sheet)
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>

Pemrograman web 1 Materi :css (cascading style sheet)
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>

Pemrograman web 1 Materi :css (cascading style sheet)

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>

Pemrograman web 1 Materi :css (cascading style sheet)

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>

Pemrograman web 1 Materi :css (cascading style sheet)
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.

Pemrograman web 1 Materi :css (cascading style sheet)

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>

Pemrograman web 1 Materi :css (cascading style sheet)

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

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->