• Home
• Profil
• Gallery
• Kontak

Programming WEB dengan HTML

Teknologi Informatika

Situs ini berisi informasi sekitar materi yang berhubungan dengan programming web, diantaranya : HTML, CSS, PHP, MySql dan materi atau artikel lain sekitar web.

Hypertext Markup Language yang sering disebut HTML merupakan dasar pemrograman dalam membuat website. Sebaiknya sebelum anda menggunakan template, CMS atau fitur-fitur lain untuk membuat sebuah website, saya sarankan anda untuk belajar HTML terlebih dulu.

Saat ini P4TK Bisnis dan Pariwisata mulai mencoba untuk membuat diklat jarak jauh yang dapat dijangkau oleh siapapun, dimanapun tanpa dibatasi oleh jarak dan waktu dengan menggunakan fasilitas Open Source yang biasa disebut Open Distance Learning. Simpan dengan nama profil.html 

Buat halaman galery

<TITLE> Halaman Galery <pre> Simpan dengan nama galery.html 

Buat halaman kontak

<TITLE> Halaman Galery <pre> Universitas Pamulang Jl. Surya Kencana No.1 Pamulang-Tangerang Selatan Website : www.unpam.ac.id Email : [email protected] Telp : 021 - 7412566 Fax : 021 - 7412566 Modul Pemrograman Web 1

41

[email protected]

Simpan dengan nama kontak.html Jalankan file index.html dan pastikan tampilan browser sebagai berikut :

8

Modul Pemrograman Web 1

42

[email protected]

BAB X CASCADING STYLE SHEET (CSS) 10.1. Penulisan CSS Style sheet merupakan fasilitas HTML yang memungkinkan kita untuk memisahkan style dan layout dokumen HTML sebenarnya.

Dengan adanya

kemampuan ini kita tidak perlu menyentuh setiap baris HTML lagi jika ingin melakukan perubahan layout pada dokumen, kita cukup mengubah definisi style sheet atau membuat style sheet baru. CSS merupakan kumpulan dari style yang dikelola secara terpisah dengan demikian manajemen pages menjadi lebih mudah dan efisien. Aturan penggunaan CSS disusun oleh tiga bagian yaitu : selector (elemen yang akan didefinisikan), property (atribut yang akan diubah) dan nilai.

Selector {property: value} Beberapa attribute style sheet 

Font-size Atribut font-size digunakan untuk menentukan teks dalam satuan poin, inci, cm, pixel, atau presentase. Nilai-nilai lain yang dapat digunakan adalah xxsmall, x-small, medium, large, x-large, dan xx-large. Contoh : {font-size: x-large}



Font-family Atribut ini digunakan untuk menentukan jenis font (typeface) suatu teks, seperti {font-family: Arial, Sans-Serif}. Sans-Serif akan menggantikan Arial jika system yang digunakan tidak mendukung Arial. Jika typeface terdiri dari beberapa kata, tambahkan tanda petik untuk nama typeface. Seperti {font-family: “Times New Roman”, “Courier New”}



Font-weight Atribut font-weight menyatakan ketebalan suatu jenis font. Misalnya {fontweight : medium}. Nilai-nilai yang bisa digunakan adalah bold, light, bolder, lighter, medium, demi-bold, demi-light, extra-bold, dan extra-light.

Modul Pemrograman Web 1

43

[email protected]



Font-style Atribut ini digunakan untuk menentukan style suatu teks. Beberapa nilai untuk attribute ini adalah normal (default), italic, dan small-caps. Contoh : {font-style : italic}



Font Atribut-atribut font di atas dapat dinyatakan sebagai berikut : H1 {font-family: arial; Font-size: 50 px; Font-weight: bold; Font-style: italic} Penulisan ini dapat diganti menjadi : H1 {font: Arial 50px bold italic}.



Text-align Atribut ini digunakan untuk mengatur peralatan teks. Nilai-nilai yang tersedia adalah left, right, center, dan justify. Contoh: {text-align: left}.

•

Margin-left, Margin-right, Margin-top, dan Margin-bottom Satuan margin dinyatakan dalam poin, inci, atau pixel. Contoh : {margin-top : 10px; Margin-right: -5px; Margin-bottom: 5px; Margin-left: -5px}

10.2 Menggunakan Style sheet Terdapat 3 cara untuk menggunakan style pada halaman web, yaitu : linking, embedding, dan inline. •

Linking Linking merupakan metode menggunakan style sheet dengan cara membuat suatu link pada file di mana style tersebut berada. Untuk membuat link ke suatu style sheet, cukup dilakukan dengan membuat suatu file yang berisi definisi-definisi style dan kemudian menyimpannya dengan ekstensi file “.css” serta menghubungkan halaman web ke URL dari file tersebut. Misalnya file Modul Pemrograman Web 1

44

[email protected]

style sheet mempunyai nama “style2.css” sedangkan URL dari file tersebut berada pada http://www.stylesheet.com/style2.css”, maka pada bagian perlu menambahkan kode HTML sebagai berikut :

•

Embedding Embedding merupakan metode menggunakan style sheet dengan meletakkan definisi style sheet di bagian atas dokumen sebelum bagian . Metode ini dilakukan dengan menggunakan pasangan tag <style> … yang diletakkan di antara bagian dan <style> < ! – BODY {font-family : Arial; font-size : 10pt, color : black} H1 H2 {font: Arial 16 pt medium, color: red} P {font: Arial; font-style: italic} -- > ….

•

Inline Inline merupakan metode menggunakan style sheet dengan memberikan secara langsung suatu style pada suatu tag atau sekumpulan tag. Contoh :

Heading 1

Teks dalam paragraph ini terlihat tebal dengan identasi 15 pt.

Teks dalam paragraph ini terlihat tebal dengan identasi 45 pt.

Beberapa contoh penggunaan style sheet : Contoh 1: P { Text-align: center; Color: blue; Font-family: arial }

Modul Pemrograman Web 1

46

[email protected]

Contoh 2: h1, h2, h3, h4, h5, h6 { Color: green; }

Contoh style sheet external: Body {background-color: yellow} H1 {font-size: 36 pt} H2 {color: blue} P {margin-left: 50px}

Simpan dengan nama : style1.css Latihan 1: <style type="text/css"> body { background-image: url('myflower.gif'); background-repeat:repeat-y; } h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify; font-size: 125%; color: red;}

Penggunaan Align pada CSS

Oktober, 2010

Ketika saya masih terlalu muda dan masih sangat rentan, ayah saya memberi nasihat "apabila kamu dikritik oleh seseorang ingatlah bahwa semua orang didunia tidak ada yang memiliki kelebihanmu ". In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people Modul Pemrograman Web 1

47

[email protected]

in this world haven't had the advantages that you've had.'

Note: Try to resize the browser window to see how justify works.

Welcome to my home page!

The Best Poetry I <em>NEVER Wrote

• 'There Once Was A Man From Nantucket' - <span CLASS="class1">Anonymous
Modul Pemrograman Web 1

49

[email protected]


• 'Cool In Fur' - <span CLASS="class1">Harry B. Foot
• And My All Time Fave:
  • 'A Toast To My Toaster' - <span CLASS="class1">Me!

Brought to you by the letter <span ID="tagid2">"H" and <span ID="tagid1">Joe Shmoe

<span CLASS="funkyclass">ADVERTISEMENT: Buy Navel Lint Contemplator! Its a browser and its a sandwich spread! Go to our home page without delay! Why? Because shelf life is only 8 hours unless refrigerated. We know that makes it hard to browse, but it promotes frequent upgrading to the latest and greatest version.

All standard disclaimers apply. Your life depends on NOT copying this document in any way. This tape will self destruct in 10 seconds...

<SCRIPT language="JavaScript"> "); document.writeln("

Operasi Aritmatik

"); //--> 
 Modul Pemrograman Web 1



58



[email protected]



  Latihan 4 :   <script language="JavaScript" type="text/javascript"> var greetingString = "Hello"; var myName = prompt("Please enter your name", ""); var concatString; document.write(greetingString + " " + myName + "
"); concatString = greetingString + " " + myName; document.write(concatString);    Latihan 5 :    <script language="JavaScript" type="text/javascript"> var myString = "56.02 degrees centigrade"; var myInt; var myFloat; document.write("\"" + myString + "\" is " + parseInt(myString) + " as an integer" + "
"); myInt = parseInt(myString); document.write("\"" + myString + "\" when converted to an integer equals " + myInt + "
"); myFloat = parseFloat(myString); document.write("\"" + myString + "\" when converted to a floating point number equals " + myFloat);   



Modul Pemrograman Web 1



59



[email protected]



Latihan 6 : Buatlah kalkulator dengan menggunakan Java Script, minimal tampilan sebagai berikut :



Modul Pemrograman Web 1



60



[email protected]



BAB XII STRUKTUR KENDALI DAN FUNGSI 12.1 Struktur Kendali 



IF Perintah IF ada tiga macam, yaitu : • IF dengan satu kondisi IF (kondisi) { ---------} • IF dengan dua kondisi IF (kondisi) { ----------} Else { ---------} • IF lebih dari dua kondisi IF (kondisi) { -------} Elseif (kondisi) { --------} Else { --------}



Modul Pemrograman Web 1



61



[email protected]



Latihan 1 : <script type="text/javascript">   Latihan 2 : <script type="text/javascript"> //If the time is less than 10, you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); }  



SWITCH ... CASE switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break;



Modul Pemrograman Web 1



62



[email protected]



default: code to be executed if n is different from case 1 and 2 }



Latihan 3 : <script type="text/javascript"> var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("I'm looking forward to this weekend!"); }  Latihan 4: alert("What I Learned In College...") //Please change the subject ;-) var subject = "Humility" switch (subject) { case "Deep Thoughts" : alert("On Deep thoughts : A day without sunshine is like night."); break; case "Problem Solving" : alert("On Problem Solving : When the only tool you own is a hammer, every problem begins to resemble a nail. - Abraham Maslow") break; case "Materialism" : alert("On Materialism : He who dies with the most toys, is, nonetheless, still dead.") break; case "Infinity" : alert("On Infinity : If you had everything, where would you keep it?") Modul Pemrograman Web 1



63



[email protected]



break; case "Economics" : alert("On Economics : The cost of living hasn't affected its popularity.") break; case "Revisionist History" : alert("On Revisionist History : What was sliced bread the greatest thing since?") break; case "Literature" : alert("On Literature : This is not a novel to be tossed aside lightly. It should be thrown with great force. - Dorothy Parker") break; case "Humility" : alert("On Humility : To err is human, to moo bovine.") break; case "Excuses" : alert("On Excuses : I can't complain, but sometimes I still do. - Joe Walsh") break; case "Numbers" : alert("On Numbers : 2 is not equal to 3 - not even for very large values of 2.") break; default:alert("I learnt nothing in college"); } Latihan 5 : <script type="text/javascript"> var red = 1; var result = null; switch (red) { case 1: result = 'one'; break; case 2: result = 'two'; break; default: result = 'unknown'; } document.write(result); 



12.2 LOOP 1. For Loop for(INITIALIZATION ; CONDITION ; NEXT) { code to be executed



}



Modul Pemrograman Web 1



64



[email protected]



Latihan 6 :   <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("
"); }    Latihan 7 :   <script type="text/javascript"> alert("The Student Mind During A Final Exam"); //Make an array with all the thoughts var thoughts = new Array("The prof. never covered this section!", "Actual knowledge on the subject.", "The T.A.'s kinda cute!", "I knew I should have read the book!", "Soon this will all be behind me!", "I hope the curve is really low!", "PANIC ZONE!", "Prayers for a miracle flood, fire, tornado, hurricane, earthquake...etc...", "Eeny, meeny, miny moe...", "Summer break!"); //Show all the thoughts - one by one... for(i=0;i<10;i++) { alert("Thought #"+(i+1)+" : "+thoughts[i]); }   



Modul Pemrograman Web 1



65



[email protected]



2. While while(CONDITION) { code to be executed } Latihan 8 :   <script type="text/javascript"> var i=0; while (i<=5) { document.write("The number is " + i); document.write("
"); i++; }   



3. Do .. While do { code to be executed } while (variable<=endvalue); Latihan 9 :   <script type="text/javascript"> var i=0; do { document.write("The number is " + i); document.write("
"); i++; } while (i<=5);   



Modul Pemrograman Web 1



66



[email protected]



BAB XIII



FUNCTION DAN ARRAY



13.1. FUNCTIONS function functionname(var1,var2,...,varX) { some code } Latihan 1. <SCRIPT language="Javascript"> "); document.write("Nilai dari a adalah ",a); // -->  Latihan 2.   <script type="text/javascript"> function product(a,b) { return a*b; }    <script type="text/javascript"> document.write(product(4,3));   



Modul Pemrograman Web 1



67



[email protected]



13.2 Array Array dapat didefinisikan sebagai berikut : 



var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW";







var myCars=new Array("Saab","Volvo","BMW"); // condensed array







var myCars=["Saab","Volvo","BMW"]; // literal array



Latihan 3.    <script type="text/javascript">     Latihan 4.   <script language="JavaScript" type="text/javascript"> function convertToCentigrade(degFahren) { var degCent; degCent = 5/9 * (degFahren - 32); return degCent; } Modul Pemrograman Web 1



68



[email protected]



var degFahren = new Array(212, 32, -459.15); var degCent = new Array(); var loopCounter; for (loopCounter = 0; loopCounter <= 2; loopCounter++) { degCent[loopCounter] = convertToCentigrade(degFahren[loopCounter]); } for (loopCounter = 2; loopCounter >= 0; loopCounter--) { document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit"); document.write(" which is " + degCent[loopCounter] + " degrees centigrade
"); }    Latihan 5   <script type="text/javascript"> var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family);    Latihan 6   <script type="text/javascript"> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family);    Modul Pemrograman Web 1



69



[email protected]



BAB IV KOLEKSI CODE JAVA SCRIPT 14.1 Membuat tanggal   <TITLE> New Document    <script type="text/javascript"> function makeArray() { for (i = 0; i<makeArray.arguments.length; i++) this[i + 1] = makeArray.arguments[i]; } var months = new makeArray('Januari','Februari','Maret','April','Mei' ,'Juni','Juli','Augustus','September','Oktober','Nov ember','Desember'); var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var yy = date.getYear(); var year = (yy < 1000) ? yy + 1900 : yy; document.write(day + " " + months[month] + " " + year);    Tampilan Browser sesuai dengan tanggal dari system yang sedang aktif, misalnya : 25 anuari 2011



14.2 Teks jalan distatus bar    <script language="VBScript"> 


70



[email protected]



Sub TeksJalan() Pjteks=Len(Teks) Ambil1=Mid(Teks, 2, Pjteks-1) Ambil2=Mid(Teks,1,1) Teks=Ambil1 & Ambil2 Window.Status=Teks Window.SetTimeOut "TeksJalan", 200 End Sub -->     



14.3 Animasi Kursor    <script language="JavaScript"> 


Modul Pemrograman Web 1



71



[email protected]



function textfollow() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.all.span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("textfollow()",10) } file://-->  <STYLE> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:verdana; color:black; font-weight: bold; } a { color:FFFFCC; text-decoration:none } a:hover { color:FFFF99; text-decoration:underline } a:visited { color:FFFF99 }  <script language="JavaScript">



Modul Pemrograman Web 1



72



[email protected]



") document.write(message[i]) document.write("") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; //-->    Gerakan Mouse .....  



Modul Pemrograman Web 1



73



[email protected]



DAFTAR PUSTAKA 1. http://www.w3c.org 2. Sebesta, R.W., Programming the World Wide Web, Addison Wesley, 2002 3. Internet &World Wide Web How to Program, Deitel, Deitel & Nieto 4. http://www.w3schools.com 5. Effendi, Pemrograman Dynamic HTML 6. http://en.wikipedia.org/wiki/World_Wide_Web



Modul Pemrograman Web 1



74