dasar dasar web dan html css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Dasar - dasar Web dan HTML, css PowerPoint Presentation
Download Presentation
Dasar - dasar Web dan HTML, css

Loading in 2 Seconds...

play fullscreen
1 / 86

Dasar - dasar Web dan HTML, css - PowerPoint PPT Presentation


  • 217 Views
  • Uploaded on

Ir. Darmadi, MM Email : emailkuumum@yahoo.com HP 085715311155. Dasar - dasar Web dan HTML, css. Pengantar.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Dasar - dasar Web dan HTML, css' - kalil


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dasar dasar web dan html css

Ir. Darmadi, MM

Email : emailkuumum@yahoo.com

HP 085715311155

Dasar - dasar Web dan HTML, css

pengantar
Pengantar
  • Sistem Berbasis Web atau Aplikasi Berbasis Web adalah sebuah sistem yang dibangun dengan konsep rekayasa web (web engineering) dan diaplikasikan secara online melalui media internet.
  • Web engineering adalah suatu proses yang digunakan untuk menciptakan suatu sistem aplikasi berbasis web dengan menggunakan ilmu rekayasa, prinsip-prinsip manajemen dan pendekatan sistematis sehingga dapat diperoleh sistem dan aplikasi web dengan kualitas tinggi. Tujuannya untuk mengendalikan pengembangan, meminimalisasi resiko dan meningkatkan kualitas sistem berbasis web (itb.ac.id, 2005).
model pemrograman web

Request (URL)

Response (Content)

Model Pemrograman Web

Request (URL)

Response (Content)

dasar dasar pemrograman berbasis web
Dasar-dasarPemrogramanBerbasis Web

Beberapakonsepdasarpemrogramanberbasis web , yaitu:

  • Komunikasiantaraweb browserdanweb serverberdasarkanprotokolHypertext Transfer Protocol (HTTP) .
  • Dokumendansemuasumberdayaapapun di jaringan yang dikehendakidiidentifikasidenganUniversal Resource Locator (URL).
  • Dokumen web ditulisberdasarkanstandarHypertext Markup Language (HTML) .
  • Pemrogramansisiklien(client-side scripting) dan Java applet.
  • Pemrogramansisiserver(server-side scripting/programming).
pemrograman sisi klien client side scripting
PemrogramanSisiKlien(client-side scripting)

Bahasa pemrograman yang untuk mengaplikasikannya tidak memerlukan web server, atau bahasa pemrograman yang berjalan di sisi client.

Contoh :

  • HTML(.html)
  • JavaScript (.js)
pemrograman sisi server server side scripting
PemrogramanSisi Server (server-side scripting)

Bahasa pemrograman yang untuk mengaplikasikannya memerlukan web server, atau bahasa pemrograman yang berjalan di sisi server.

Contoh :

  • ASP, memerlukan web server IIS.
  • PHP, memerlukan web server Apache.
web browser
Web Browser
  • Web Browser adalah perangkat lunak yang mulanya hanya untuk menampilkan (rendering) dokumen web/HTML. Namun saat ini, web browser harus mampu mengeksekusi (interpretasi) JavaScript atau VBScript, menjalankan Java Applet, memahami dokumen XML, dan menjalankan dokumen tertentu dengan fasiltias plug-in seperti file .swf Macromedia Flash dan sebagainya. Disamping itu, web browser juga mempunyai fasilitas kenyamanan pemakai seperti dapat membuka lebih dari satu jendela, manajemen alamat web yang bagus, pengamanan yang memadai dan sebagainya.
  • Contoh : Internet Explorer, Mozilla Firefox, Opera.
web server
Web server
  • Web server adalah HTTP server sebagai penyedia dokumen yang diminta web browser. Saat ini, web server telah kompleks karena harus melayani banyak hal dan bahkan menjadi pusat layanan-layanan lain. Web server telah menjadi komponen terpenting di application server. Web server harus mampu melayani permintaan dokumen yang diminta web browser, dan mampu disetting berinteraksi dengan program JSP, ASP, PHP, secara CGI dan sebagainya.
  • Contoh : Apache, IIS.
hypertext transfer protocol http
Hypertext Transfer Protocol (HTTP)
  • Hypertext Transfer Protocol (HTTP) adalah protokol level aplikasi untuk sistem informasi hypermedia tersebar. Protokol ini generik dan stateless yang dapat dimanfaatkan banyak tugas selain untuk hypertext. HTTP adalah bahasa komunikasi antara web browser dan web server, dimana kebanyakan komunikasi ini di luar perhatian pemakai web browser.
universal resource locator url
Universal Resource Locator (URL)
  • URL adalah penunjuk ke sumber daya tertentu di jaringan TCP/IP (internet) yang mempunyai format sintaks standar sebagai berikut.

Protokol://Servername:PortNumber/Filepath

Contoh :

http://jayabaya.ac.id/index.html

http://jayabaya.ac.id:30234519/index.html

hypertext markup language html
Hypertext Markup Language (HTML)
  • Hypertext Markup Language (HTML) merupakan bahasa markup paling popular, disusul eXtensible Markup Language (XML). XML adalah bahasa yang digunakan untuk membuat bahasa markup lain yaitu Wireless Markup Language (WML). Bahasa markup bukan bahasa pemrograman. Oleh karena itu, penyebutan bahasa pemrograman HTML adalah kurang tepat
format dasar html
Format Dasar HTML

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

{ Tempat untuk coding }

</body>

</html>

1 text html
1. TEXT HTML

<html>

<head>

<title>Halaman Latihan 1</title>

</head>

<body>

<h1>Ini adalah latihan pemrograman web pertamaku.</h1>

</body>

</html>

slide16

Kode program tabel standar

<table width="80%" border="1" cellspacing="10“ cellpadding="10">

<tr> <!--deklarasi baris -->

<td><div align="center">No</div></td> <!--deklarasi kolom -->

</tr>

</table>

  • Tag HTML untuk menambahkan komentar : <!-- …..-->
  • Cellpading : Besarnya jarak antara teks pada cell dengan garis/border.
  • Cellspacing : Besarnya jarak spasi antara cell.
  • Width : Lebar tabel yang dinyatakan dalam persen atau pixel.
kode program
Kode Program

<table width="80%" border="1" cellspacing="10“ cellpadding="10">

<tr>

<td><div align="center">No</div></td>

<td><div align="center">NIM</div></td>

<td><div align="center">Nama</div></td>

<td><div align="center">Alamat</div></td>

</tr>

<tr>

<td><div align="center">1</div></td>

<td><div align="center">30551113001</div></td>

<td>Doni</td>

<td>Sleman</td>

</tr>

</table>

3 format html untuk teks
3.FORMAT HTML untuk Teks
  • <p>..</p> : untuk paragrap baru
  • <BR> baris baru
  • <pre>..</pre> : menetapkan teks yang formatnya sudah dibuat terlebih dahulu
  • Contoh :

<p>Teks pada pragrap</p>

<pre>Teks dengan format Pre

* * *

* * * *

* * * * *

* * * * * *

</pre>

4 gambar html
4.gambar HTML

Anda dapat menyatakan pemakaian gambar dengan tag <IMG> (image).

<BODY><IMG src=””></BODY>

Kita juga harus menyebutkan sumber (nama dan tempat) serta ukurannya.

  • Contoh :
  • <img src="compaq front specs.jpg" width="167" height="153" />
  • <BODY>
  • <IMG SRC=“minum.gif" WIDTH=130 HEIGHT=101>
  • </BODY>
slide21

MEMBUAT LINK

</BODY>

Lihat Yahoo!Kemudian tambahkan sepasang anchor tag.

<BODY>

Lihat <A>Yahoo!</A>

</BODY>

Lihat Yahoo!Tambahkan URL-nya dan selesailah sudah! URL adalah singkatan dari Universal Resource Locator. Ini adalah istilah canggih yang diciptakan oleh orang-orang komputer. Mereka memang punya kecenderungan untuk banyak melakukan hal-hal seperti ini. URL sebenarnya adalah sekedar alamat saja.

<BODY>

Lihat <A HREF="http://www.yahoo.com/">Yahoo!</A>

</BODY>

Lihat Yahoo!Mari kita coba satu lagi.

<BODY>

Lihat PTS Online!

</BODY>

slide22
List
  • Ordered List(Daftar terurut, untuk mengatur teks dengan urutan berdasarkan nomor)
  • Contoh :

<ol>

<li>Majalah TI</li>

<li>Buku TI</li>

</ol>

  • Unordered List(Daftar tidak terurut, yang menggunakan bullet sebagai simbol urutannya)
  • Contoh :

<ul>

<li>Majalah TI</li>

<li>Buku TI</li>

</ul>

slide23

Cascading Style Sheet (CSS)

Mempelajari dasar-dasar CSS : Inheritance, class, positioning dan watermarking

dalam modul ini akan dipelajari
Dalam modul ini akan dipelajari:
  • Apa CSS
  • Text formating (color, size)
  • Pewarisan
  • Class
  • Positioning
  • Watermarking
1 apa itu css
1. Apa itu CSS
  • CSS = Cascading Style Sheet adlah suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs
  • CSS dimulai dengan :

<STYLE TYPE="text/css">

NamaKODeBaru { Parameter : nilai }

</STYLE>

  • Sebagai contoh untuk kode HTML <B>..</B> artinya adalah cetak tebal pada teks yang terletak diantaranya. Dengan CSS kita dapat mendefinisikan <B>..</B> agar memiliki efek tambahan sesuai yang kita inginkan, misalnya efek terhadap warna huruf.
  • Contoh : <Style TYPE=“txt/CSS”

U {color=red}

</Style>

contoh efek u u menjadi pengatur warna
Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping “tugas” lama, yaitu warna tulisan.

Hasilnya sama dengan kode berikut :

efek yang sama pada dua kode i dan u
Efek yang sama pada dua kode I dan U

Tag <U> =under line

Dan tag <I> = italic

Diberi efek baru, yaitu warna merah hurufnya

Tag <B> = bold, diberi efek warna hijau

Klik untuk lihat hasil

beberapa efek pada satu kode b
Beberapa efek pada satu kode B
  • Misalkan pada tag <B> akan dilekatkan efek warna, jenis huruf dan gaya huruf
  • Perintahnya CSS-style nya
  • B { color:lime;

text-decoration: underline;

font-family:Arial }

Klik untuk lihat hasil

2 css global sekali tulis pakai bersama
2. CSS-GLOBAL :Sekali Tulis, pakai bersama

File : global.css

  • Kita dapat mendefinisikan suatu file *.css yang berisi kode-kode CSS
  • File tersebut dapat diacu oleh setiap HTML
  • Jika file HTML akan mengacu file CSS tersebut ditulis :
  • <HEAD>
  • <LINK REL="stylesheet" HREF="global.css"
  • TYPE="text/css">
  • </HEAD>

B {color: red; text-decoration: underline;

font-family: Arial }

I {color:blue; font-family:"Monotype Corsiva"; font-size:20}

Digunakan oleh

Css_global.html

Dan Digunakan oleh

Css_global2.html

selanjutnya 2 file html digabung dalam 1 frame
Selanjutnya 2 file html digabung dalam 1 frame

Klik lihat hasil

Terlihat :

Efek dari tag <B> dan tag <I> yang didefinisikan dalam STYLE di file global.css

3 pewarisan
3. Pewarisan
  • Jika kita definisikan suatu CSS yang berefek pada huruf, sementara dalam HTML juga didefinisikan efek huruf, dan jika tag CSS mengapit tag HTML maka pengaruh tag CSS akan mewaris (menurun) pada tag HTMLnya

Efek warna huruf sebagai pengaruh tag CSS “menurun” pada tag HTML font, yaitu warna hijau

Klik lihat hasil

4 class
4. Class
  • Class adalah suatu kelompok perintah CSS yang dapat digunakan pada tag tertentu HTML untuk memberi efek tambahan berdasar definisi class
  • <STYLE TYPE="text/css">

.tanya {color: red}

.jawab {color: blue}

</STYLE>

  • Pada efek HTML dapat digunakan sbb :
  • <P CLASS=“tanya”> ini adalah teks yang terpengaruh efek

class tanya</P>

  • Efek class dapat dilekatkan paad tag HTML apa saja, seperti pada tag <B>, tag <I> dst
contoh class untuk ubah warna
Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b>

contoh class untuk ubah ukuran huruf
Contoh class (untuk ubah ukuran huruf)

Klik lihat hasil

Font-size : xx-small, x-small, small, medium, large, x-large, xx-large

contoh class untuk ubah warna1
Contoh class (untuk ubah warna)

Klik lihat hasil

Class :merah berefek warna huruf menjadi merah dan class:biru berefek warna huruf menjadi biru. Dapat di-inset pada tag <P> dan tag <b>

5 positioning
5. Positioning

Klik lihat hasil

6 watermarking
6. Watermarking
  • Watermarking adalah konsep mendesaign background layar dengan gambar tertentu
  • Konsep ini dapat diimplementasikan melalui konsep class sebagai berikut :
  • <STYLE TYPE="text/css">

.nama_Class {background-image:

url(“namagambar"); background-repeat: yes}

  • </STYLE> </HEAD>
  • CONTOH : klik !

Hasil klik

latihan
Latihan
  • Buatlah gambar dari windows search seperti gambar dog sebelah ini
  • Namakan gambar tersebut dengan dog2.bmp
  • Gunakan gambar dog2.BMP tersebut sebagai watermarking dalam menampilkan tulisan seperti dalam gambar berikutnya
  • Atur dalam konsep class sedemikian sehingg huruf berwarna magenta dan berukuran 20
slide39

Membuat web page yang bersifat interaktif dengan penggunaan tag <FORM>. Dengan tag ini anda dapat membuat buku tamu, formulir pemesanan, survey , meminta komentar atau apa pun di web site anda.

Pada dasarnya, form html mempunyai bentuk seperti ini....

  <FORM>    awal form   <INPUT>   minta masukan menggunakan salah satu dari

beberapa cara yg tersedia....   <INPUT>   ....anda bisa gunakan berapa pun input yang

anda inginkan   </FORM>   akhir form

Itulah form html secara garis besar.

slide40

Pelajaran 1

  • Mulailah dengan membuka Notepad, kemudian copykan baris-baris di bawah ini:
  • <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
  • </BODY> </HTML>
  • Simpan dengan nama form1.html di folder khusus untuk itu. Buka browser anda (Netscape atau Internet Explorer), dan buka file form1.html tadi. Biarkan Notepad tetap terbuka sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di Notepad.
slide41

Tuliskan tag FORM .

  • <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
  • <FORM>
  • </FORM>
  • </BODY> </HTML>
slide42

Selanjutnya browser harusmempunyaicarauntukmengirim data yang didapatkepadakita.

  • Ada duahal yang dapatandalakukan:
  • 1) andadapatmengirim data tersebutkesuatu program/cgi
  • script untukdiproses, atau
  • 2) andadapatmeminta browser untukmengirim data
  • tersebutmelalui email kepadaanda.
  • Cara pertamamemerlukanpemahamantentangpemrograman web yang ada di luarcakupan tutorial ini
  • Cara kedua, biasadisebutmailto form, memerlukanbeberapahaluntukditambahkandalam tag <FORM>.
slide43

CARA KEDUA

  • <HTML> <HEAD> <TITLE>Membuat form html</TITLE> </HEAD> <BODY>
  • <FORM METHOD=POST
  • ACTION="mailto:darmadi@yahoo.com"
  • ENCTYPE="application/x-www-form-urlencoded"> </FORM>
  • </BODY> </HTML>
  • Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar, tetapi harus ada spasi di antara setiap atribut tadi
slide44

Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...

NAMAFORM=Daftar+Anggota&NAMA=Bram+D.+Wardhana&ALAMAT=Jl.+Bali+No.+13 &KOTA=Semarang&Propinsi=Jawa+Tengah

Padahal yang anda inginkan adalah format yang lebih mudah kita pahami seperti ini...

NAMAFORM=Daftar Anggota NAMA=Bram D. Wardhana ALAMAT=Jl. Bali No. 13 KOTA=Semarang PROPINSI=Jawa Tengah

Ada beberapa program yang dapat digunakan untuk mengubah format tersebut, misalnya Mailto Formatter Program kecil ini sangat bagus dan bisa anda dapatkan secara gratis (freeware) di internet.

Contoh di atas menunjukkan bahwa form html tidak lebih dari nama masukan (NAMA, ALAMAT, dll) yang dipasangkan dengan nilai masukan (Bram D. Wardhana, Jl. Bali No. 13, dll). Satu-satunya variabel adalah bagaimana cara kita mendapatkan data-data tersebut.

slide45

Pelajaran 2

Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <FORM>. Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.

Bentuk masukan (TYPE of <INPUT>) yang paling umum digunakan dalam form html adalah TEXT.

<INPUT TYPE=TEXT>

Setiap masukan memerlukan nama (NAME).

 <INPUT TYPE=TEXT NAME="ALAMAT">

Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.

slide46

Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.

<INPUT TYPE=TEXT NAME="ALAMAT" VALUE="Jl. Lombok No. 31">

Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya. Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas.

Kita dapat juga menentukan panjang kotak masukan.

<INPUT TYPE=TEXT NAME="ALAMAT"

VALUE="Jl. Lombok No. 31" SIZE=10>

<INPUT TYPE=TEXT NAME="ALAMAT"

VALUE="Jl. Lombok No. 31" SIZE=20>

<INPUT TYPE=TEXT NAME="ALAMAT"

VALUE="Jl. Lombok No. 31" SIZE=30>

slide47

Pelajaran 3

  • Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.
  • <INPUT TYPE=RADIO NAME="TEMAN BAIK">
  • Tambahkan 2 lagi.
  • <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK"> <INPUT TYPE=RADIO NAME="TEMAN BAIK">
slide48

Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.

  • <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK"><P>
  • Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan segera tampak berikut ini. 
  • Setiap Radio Buttons harus diberi VALUE.
  • <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Ed"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Rick"><BR> <INPUT TYPE=RADIO NAME="TEMAN BAIK" VALUE="Tom"><P>
slide49

Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap. Jangan frustasi, saya sendiri sering merasa bingung. Itulah sebabnya saya sangat mengandalkan catatan/referensi tentang html. (Anda pikir saya menyimpan semuanya di kepala saya??)

  • OK, masing-masing kita beri label/nama.
  • <INPUT TYPE=CHECKBOX NAME="Ed" VALUE="YA"> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA"> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
  • Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
slide50

Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.

  • Siapakah di antara mereka yang merupakan sahabat anda?<BR> <INPUT TYPE=CHECKBOX NAME="ED" VALUE="YA" CHECKED> Edi Hasibuan<BR> <INPUT TYPE=CHECKBOX NAME="Rick" VALUE="YA"> Ricky Martanto<BR> <INPUT TYPE=CHECKBOX NAME="Tom" VALUE="YA" CHECKED> Tomi Sudarto<BR> <INPUT TYPE=CHECKBOX NAME="BM" VALUE="YA"> Baramuli<P>
  • Siapakah di antara mereka yang merupakan sahabat anda? Edi Hasibuan Ricky Martanto Tomi Sudarto Baramuli
slide51

Pelajaran 4

  • Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda gunakan <SELECT> sebagai pengganti <INPUT> dan anda harus tambahkan tag penutup. Mari kita coba.
  • <SELECT> </SELECT>
  • Jangan lupa beri nama.
  • <SELECT NAME="TEMAN BAIK"> </SELECT>
  • Kemudian tambahkan beberapa option.
  •  <SELECT NAME="TEMAN BAIK"> <OPTION>Edi <OPTION>Ricky <OPTION>Tomi <OPTION>Reza </SELECT>
slide52

Dan setiap <OPTION> kita beri VALUE.

  •  <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza </SELECT>
  • Defaultnya adalah pilihan pertama dalam daftar.
  • Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam daftar.
  • <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi" SELECTED>Tomi <OPTION VALUE="Reza">Reza </SELECT>
slide53

Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.

  • <SELECT NAME="TEMAN BAIK"> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT>
slide54

Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag <SELECT>.

  • <SELECT NAME="TEMAN BAIK" SIZE=4> <OPTION VALUE="Edi">Edi <OPTION VALUE="Ricky">Ricky <OPTION VALUE="Tomi">Tomi <OPTION VALUE="Reza">Reza <OPTION VALUE="Arie">Arie <OPTION VALUE="Putri">Putri <OPTION VALUE="Maria">Maria </SELECT>
  • Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?
slide55

Bentuk masukan lain yang sangat berguna adalah <TEXTAREA>.

  •  <TEXTAREA NAME="KOMENTAR"> </TEXTAREA>
  • Anda menentukan besarnya kotak masukan dengan cara....
  • <TEXTAREA NAME="KOMENTAR" ROWS=6 COLS=50> </TEXTAREA>
  • ROWS adalah tingginya, COLS adalah lebarnya.
  • Satu atribut yang cukup membantu dalam <TEXTAREA> adalah WRAP. Mungkin ada browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.
slide56

Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....

  • <TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=VIRTUAL> </TEXTAREA>
  • WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat panjang yang tidak terputus. 
  • Lakukan hal yang sama dengan ini....
  • <TEXTAREA NAME="KOMENTAR" ROWS=3 COLS=30 WRAP=PHYSICAL> </TEXTAREA>
slide57

Pelajaran 5

  • Bentuk lain dari masukan adalah HIDDEN input.
  • <INPUT TYPE=HIDDEN NAME="RAHASIA" VALUE="Form 1">
  • HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan diprosesnya.
  • Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web site untuk menjaring sebanyak mungkin masukan. Anda perlu cara untuk mengetahui web site mana yang memberikan kontribusi terbanyak. Apa yang akan anda lakukan?
slide58

Anda bisa menambahkan HIDDEN input ke dalam form anda seperti ini....

  • <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 1"> ... untuk web site pertama <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 2"> ... untuk web site kedua <INPUT TYPE=HIDDEN NAME="JAJAKPENDAPAT" VALUE="Web Site 3"> ... untuk web site ketiga Dan seterusnya dan selanjutnya....
  • Sebetulnya, anda bisa gunakan pasangan nama/nilai apapun dalam hidden input ini (bahkan dalam setiap jenis input). Saya menggunakan "JAJAKPENDAPAT" untuk memperjelas. Kalau anda pikir terlalu panjang, bisa anda gunakan "JP". Contoh berikut ini tetap merupakan HIDDEN input yang sah....
  • <INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ... Anda akan dapatkan E=Mc^2
  • HIDDEN input juga sangat berguna dan banyak dipakai untuk pemrograman/cgi script.
  • Bentuk terakhir dari input adalah tombol SUBMIT dan RESET.
  • Kedua perintah ini sangat sederhana....
  • <INPUT TYPE=SUBMIT>
  • SUBMIT, tentu saja, dipakai untuk mengirim data yang anda masukkan ke dalam form....
  • ...dan RESET, menghapus seluruh isi form.
slide59

Hai. Kali ini saya akan menjelaskan tentang pembuatan frame untuk dokumen html anda. Pemakaian frame secara baik dapat membantu penampilan web site anda dan mempermudah navigasi halaman-halaman web tersebut. Ingat, kata kuncinya adalah pemakaian secara baik. Jelas?

Membagi halaman web menjadi beberapa frame sebenarnya sangat mudah. Konsep dasarnya adalah seperti ini: Setiap frame adalah dokumen html biasa. Jika anda ingin membagi halaman web anda menjadi 2 frame yang bersebelahan, maka anda harus membuat dokumen html yang lengkap untuk frame kiri dan dokumen html yang lengkap pula untuk frame sebelah kanan. Sebagai tambahan anda perlu membuat dokumen html ketiga. Dokumen ini adalah frame definition document (untuk mudahnya kita sebut saja MASTER PAGE) dan berisi tag <FRAME> yang menentukan tata letak setiap frame dan dokumen html yang akan mengisi frame tersebut. Sebetulnya, memang hanya itu fungsinya.

.

  • Cara Mudah Membuat Frame
slide60

Pada dasarnya, hanya ada tiga tag utama tentang frame yang paling perlu kita perhatikan yaitu:

<FRAMESET> dan

<FRAME>.

</FRAMESET>

Perlu saya tekankan bahwa kalau anda berkeinginan untuk membuat dokumen html yang baik, maka anda harus menyediakan waktu untuk mempelajari tag-tag yang bersangkutan. Kalau anda menggantungkan diri pada fasilitas "table wizard" yang ada di dalam "editor html canggih yang amat sangat mudah dipakai" yang banyak tersedia di pasaran, fleksibilitas anda akan sangat terbatas. Dan hasil akhirnya mungkin tidak akan seperti yang anda harapkan. Menurut pendapat saya, editor html terbaik untuk dipakai adalah editor berbasis teks. Program-program ini akan mempermudah penulisan dokumen html anda, tetapi tidak mengerjakannya untuk anda.

  • Cara Mudah Membuat Frame
slide61

Pelajaran 1

  • Sekarang coba anda buat dokumen html berikut.
  • <HTML> <HEAD> <TITLE>Frame HTML Saya</TITLE> </HEAD> <BODY> Lisa</BODY> </HTML>
  • Simpan di folder tadi dengan nama Lisa.html.
  • Lakukan hal yang sama untuk Tessy, Tina, Sari, dan Ratna. Simpan semuanya di folder frame. Seharusnya anda sekarang mempunyai satu folder dengan 5 dokumen html yang berdiri sendiri-sendiri. 
slide62

Ok, ini yang menarik... membuat master page anda. Mulai dengan ini.

  • <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>
  •  <BODY> </BODY>
  •  </HTML>
  • Hapus tag <BODY>. Master page tidak menggunakannya...sehingga menjadi
  • <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD> </HTML>
slide63

.Pemakaian tag <FRAMESET>.

  • <HTML> <HEAD> <TITLE>Frame HTML Saya- Master Page</TITLE> </HEAD>
  • <FRAMESET> </FRAMESET>
  •  </HTML>
  • Agar lebih bersih dan jelas, saya tidak akan tuliskan lagi tag <HTML>, <HEAD> dan <TITLE>. Ingat, anda harus tetap menuliskannya di dokumen anda.
  • <FRAMESET> </FRAMESET>
  • Sekarang adalah waktu yang tepat untuk menyimpannya. Simpan di folder anda (bersama gadis-gadis tadi) dengan nama index.html. Jika anda coba buka file tersebut di browser anda sekarang, halaman ini masih kosong. Tentu saja, yang anda katakan barulah "Inilah Master Page saya".
slide64

Mari kita tentukan bagaimana penampilan halaman tersebut. Kita minta pada browser untuk membaginya menjadi 2 kolom, masing-masing menempati 50% bagian.

  • <FRAMESET COLS="50%,50%"> <! Cols=columns></FRAMESET>
  • Kita harus beritahu browser apa yang mengisi masing-masing frame.
  • <FRAMESET COLS="50%,50%">   <FRAME SRC="lisa.html"> <!src=source>  <FRAME SRC="putri.html"> </FRAMESET>
  • LIHAT. Anda seharusnya bangga dengan frame html yang sudah anda ciptakan!
  • Satu hal lagi sebelum kita lanjutkan. Ingat bahwa <FRAMESET> adalah tag container, sedangkan <FRAME> bukan. Bagi anda yang tidak tahu apa artinya, tag container adalah tag yang berpasangan, jadi memiliki <TAG> pembuka dan </TAG> penutup.
slide65

Pelajaran 2

  • Kita ingat bahwa tag <FRAMESET> lah yang melakukan semua pembagian. Memang itulah yang dilakukannya... membagi halaman. Tag ini menentukan juga bagaimana pembagian tersebut dilakukan. Tapi ingat, kapanpun anda ingin melakukan pembagian - gunakan <FRAMESET>. Dapatkah kita membagi halaman menjadi lebih dari 2 bagian? Ya, tapi jangan lupa menyediakan satu halaman untuk setiap frame atau anda akan membingungkan browser.
  • <FRAMESET COLS="20%,20%,20%,20%,20%">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html">   <FRAME SRC="ratna.html">   <FRAME SRC="tina.html">   <FRAME SRC="sari.html"> </FRAMESET>
slide66

LIHAT

  • Tentu saja kita bisa membuat setiap frame berbeda ukurannya. Pastikan anda tidak salah hitung atau browser akan menampilkan interpretasinya sendiri.
  • <FRAMESET COLS="10%,20%,30%,15%,25%">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html">   <FRAME SRC="ratna.html">   <FRAME SRC="tina.html">   <FRAME SRC="sari.html"> </FRAMESET>
  • LIHAT
  • Bila halaman kita bagi menjadi baris (ROWS) dan bukannya kolom (COLS), kita akan mendapat sesuatu yang berbeda sama sekali.
  • <FRAMESET ROWS="10%,20%,30%,15%,25%">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html">   <FRAME SRC="ratna.html">   <FRAME SRC="tina.html">   <FRAME SRC="sari.html"> </FRAMESET>
slide67

LIHAT

  • Mari kita kembali ke bentuk 2 frame, halaman yang dibagi menjadi 2 kolom sama besar.
  • <FRAMESET COLS="50%,50%">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html"> </FRAMESET>
  • LIHAT
  • Kita bisa mengganti 50% dengan 50 pixels (picture elements, setiap titik di layar komputer anda. Atau kita gunakan saja istilah titik. OK? OK). Dan kita bisa gunakan * sebagai pengganti angka. * berarti berapapun sisanya.
  • <FRAMESET COLS="50,*">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html"> </FRAMESET>
slide68

Ada satu hal yang sangat penting dan harus anda perhatikan. Misalkan anda membuat frame selebar 100 titik di sebelah kiri, dan 100 titik di kanan. Karena ukuran layar anda adalah 800x600, maka frame ketiga di tengah menjadi selebar 600 titik. Semuanya tampak bagus dan keren... untuk anda. Misalkan layar komputer saya ukurannya hanya 640x480. Kedua frame dengan lebar 100 titik tadi hanya tampil selebar 80 (640/800x100) titik di layar saya. Bila anda memakai ukuran absolut dalam tag <FRAMESET> anda, SELALU gunakan paling tidak satu * sebagai frame yang elastis. Dengan cara ini segala sesuatunya akan tampak baik bagi semua orang.

  • Ini adalah kesalahan umum yang sering terjadi dalam pemakaian frame dan saya ingin anda ekstra hati-hati mengenai hal ini. Pembagian halaman yang paling umum adalah frame kecil di sebelah kiri berisi menu atau topik bahasan dan frame utama yang lebih besar di sebelah kanan . Masalahnya adalah ... Jika anda membuat frame menggunakan persentase (misalnya <FRAMESET COLS="15%,85%">) segala sesuatunya akan tampak baik bagi anda. Tapi... bagi orang lain dengan ukuran layar yang berbeda, yang tampak mungkin akan berbeda.
slide69

Penyebabnya adalah karena anda menentukan frame sebelah kiri lebarnya 15%. 15% dari apa? 15% dari berapapun lebar layar komputer mereka. Ini berarti frame kiri bisa 'tampil beda' bagi orang yang berbeda pula. Bagaimana mengatasinya?

  • Gunakan saja nilai absolut untuk frame kiri dan buatlah frame kanan elastis (misalnya <FRAMESET COLS="120,*">). .
  • Tidak ada salahnya jika nilai absolut tersebut kita perbesar sedikit. Supaya tidak terlalu sesak dan ada ruang untuk bernafas. Sebagai contoh, jika 100 titik mencukupi tetapi tampak terlalu sempit... ubahlah lebar frame menjadi 120 atau 125 titik.
slide70

Kita juga dapat membuat lebih dari satu frame elastis dan menyatakan ukurannya relatif satu terhadap yang lain.

  • <FRAMESET COLS="50,*,2*">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html">   <FRAME SRC="ratna.html"> </FRAMESET>
  • LIHAT
  • Terjemahannya kurang leb: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan Ratna ketiga.
  • Pastikan bahwa semuanya dibuat dengan urutan yang benar. <FRAME> pertama ditampilkan sesuai dengan ukuran yang pertama dalam tag <FRAMESET> (50/lisa), ukuran kedua untuk frame kedua (*/putri) dan ukuran ketiga untuk frame ketiga (2*/ratna)..
slide71

Bagaimana jika kita ingin membagi Ratna menjadi dua bagian horisontal. Ingat yang saya katakan bahwa kalau anda ingin membagi halaman, anda harus menggunakan tag <FRAMESET>. Pertama-tama kita harus mengganti Ratna dengan pasangan tag <FRAMESET>.

  • <FRAMESET COLS="50,*,2*">   <FRAME SRC="lisa.html">   <FRAME SRC="putri.html">
  • <! Ini frame sisanya>  <FRAMESET ROWS=”50,50”>
  •   <FRAME SRC=”ratna.html">   </FRAMESET > </FRAMESET>
  • Artina: Buat 3 frame. Buat frame pertama selebar 50 titik. Sisanya bagikan kepada frame 2 dan 3, tetapi buatlah frame 3 dua kali lebih besar dari frame 2. Tempatkan Lisa di frame pertama, Putri di frame kedua dan Ratna di frame ketiga akan kita bagi 50,50 horisontal
slide72

Membuat halaman direktori LINK

  • <HTML> <HEAD> <TITLE>Membuat Frame- Daftar</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF">
  • <H3>Daftar</H3>
  • <A HREF="home.html" TARGET="FRAME-UTAMA">Home</A><P>
  • <A HREF="sini.html" TARGET="FRAME-UTAMA">Ke sini</A><BR> <A HREF="sana.html" TARGET="FRAME-UTAMA">atau ke sana</A><P>
  • atau kunjungi<BR> <A HREF="http://www.pts.co.id/" TARGET="_top">PTS Online</A><BR> <A HREF="http://www.tutorial.or.id/" TARGET="_top">Web Tutorial</A>
  • </BODY> </HTML>
  • Coba lihat Master Page.
slide75

Tanda & berarti awal suatu karakter khusus. Tanda ; berarti akhir karakter khusus tadi dan huruf-huruf di antaranya adalah semacam singkatan yang menunjukkan fungsinya. Hanya sedikit karakter yang tergolong khusus. Ada 6 lagi yang perlu anda tahu. (Catatan- semuanya harus dituliskan dengan huruf kecil)

&nbsp;     non-breaking space        (spasi)    

&lt;       < less-than symbol        (tanda lebih kecil)    

&gt;       > greater-than symbol     (tanda lebih besar)    

&amp;     & ampersand               (dan)    

&quot;     " quotation mark          (tanda petik)    

&shy;      ­ soft hyphen             (tanda sambung)

Anda tidak harus menggunakannya setiap saat, hanya kalau dengan menuliskan karakter aslinya browser menjadi bingung. Bagaimana anda tahu kalau itu terjadi? Tidak ada 'aturan' pasti yang bisa saya kemukakan. Hal itu akan anda ketahui dengan sedikit latihan dan beberapa kali kesalahan.

slide76

Sebagian orang beranggapan bahwa membuat kesalahan itu jelek. Mereka tidak berani mencoba sesuatu yang baru karena takut akan mengacaukan semuanya. Melakukan kesalahan yang sama berulang-ulang memang sedikit bodoh. Tetapi, khususnya pada saat anda belajar, jangan takut untuk mengacaukan hasil kerja anda. Kesalahan adalah teman kita :-) Jika anda tidak pernah mengacaukan sesuatu berarti anda tidak belajar apapun dan kemungkinan tidak melakukan apapun. Ingat, mengacaukan hasil kerja adalah bagian yang sah dan sangat bisa diterima dari proses belajar!

pengantar1
Pengantar
  • Setelah anda selesai membuat sebuah website atau sistem berbasis web, lalu anda ingin menguploadnya ke internet agar dapat diakses secara online oelh setiap orang, maka anda memerlukan tempat hosting dan nama domain sebagai pengenal website anda.
web hosting
Web Hosting
  • Perusahaan Web Hosting adalah penyedia/provider yang menyewakan tempat(space) dengan kapasitas tertentu dan harga tertentu, untuk menyimpan semua file website anda, agar bisa diakses online. Biasanya ada yang memberlakukan sistem sewa per 3 bulan, 6 bulan atau per tahun.
  • Umumnya perusahaan web hosting sekaligus menjual domain, bahkan ada yang membuat paket tertentu antara hosting dan domainnya. Misalkan untuk paket hosting enterprise, maka domainnya diberikan gratis untuk tahun pertama.
slide80
Namun ada juga perusahaan yang menjual terpisah antara hosting dan domainnya. Misalkan, hosting di provider A, tapi domainnya beli dari provider B.
  • Selain yang bayar, anda pun bisa memanfaatkan fasilitas web hosting gratis untuk proses belajar. Misalnya : myjspace.com. Untuk mencari web yang memberikan layanan hosting gratis, maka anda bisa mencarinya di google dengan keyword “Free web hosting”.
  • Contoh perusahaan web hosting di Jogja :

- Rumahweb.com

- Idwebhost.com

- Citra.net, dll

software untuk upload file website
Software untuk Upload File Website
  • Ada beberapa software yang dapat anda gunakan untuk proses upload file ke internet, diantaranya :
    • FileZilla(bawaan Xampp)
    • CuteFTP
    • SecureFX, dll
domain
Domain
  • Domain adalah nama pengenal/alamat website anda di internet.
  • Penamaan domain diatur oleh sebuah organisasi yaitu Internet Corporation for Assigned Names and Numbers(ICANN).
  • Dalam penamaan domain ada yang disebut Top Level Domain(TLD) yaitu format penamaan domain dengan posisi paling tinggi misalnya .com.
  • Ada 3 jenis TLD , yaitu:

- Generic TLD(gTLD), terdiri dari 3 huruf atau lebih

- Country-code TLD(ccTLD), terdiri dari 2 huruf dan merupakan domain yang mengindikasikan nama negara

- TLD Arpha, yang digunakan khusus untuk tujuan pengelolaan infrastruktur teknik dalam jaringan internet.

country code tld cctld
Country-code TLD(ccTLD)

Daftar diantara kode domain negara

domain indonesia
Domain Indonesia

Beberapa domain yang khusus digunakan di Indonesia

Contoh :

http://deplu.go.id, http://tasikmalaya.go.id

http://uty.ac.id, http://ugm.ac.id

http://kompas.co.id

http://an.tv, dll

domain gratis
Domain Gratis
  • Sebagaimana hosting gratis, maka domain pun ada yang memberikannya secara gratis. Misalnya freedomain.co.nr.
  • Dia memberikan domain gratis dengan akhiran .co.nr. Contoh http://euismarlina.co.nr.