Dreamweaver

Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia Dreamweaver.
Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design.

Oke deh, saya sarankan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website.

1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.

2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.

3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design. 

Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihat struktur HTML sebagai contoh struktur:

<title>Untitled Document</title>

dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.

4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.

5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.

6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.

7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser. 

Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag <title>.

MEMBUAT WEB SEDERHANA MENGGUNAKAN NOTEPAD

        Kita semua pasti tahu dengan salah satu Software bawaan dari Windows, yaitu Notepad. Notepad ini bisa kita gunakan sebagai media untuk membuat Web sederhana menggunakan bahasa HTML. Menggunakan bahasa HTML kita harus mengerti tag-tag tertentu dengan fungsi yang berbeda tentunya.
        Sebelumya kita mulai penjelasannya secara detail, ada beberapa hal yang perlu diketahui, yaitu :
tag<> digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup.
Contoh: <td> text yang ditampilkan </td>.
Tag biasa adalah tag yang berisi text yang merupakan isi dari web yang akan kita buat.
contoh <BR> (break). <br> tidak perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, harus ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td> 
Nah..setelah mengetahui hal-hal tersebut, mari kita belajar. Pertama tentu buka dulu Notepad...^^

Langkah Pertama :

1. Kamu tulis <html>

    >Ini adalah sintag dasar dalam bahasa HTML.

2. Kamu tulis <head>

3. Selanjutnya kamu tulis <title>Ini adalah Web sederhana pertama saya</title>

4.<body> Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal   dari <body>.Body adalah  tag container, jadi harus ditutup.

5.<h1>Selamat datang</h1>

   H1 merupakan tag untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.

6.<p> tag ini fungsinya untuk membuat paragraf, dan jangan lupa di tutup </p>

 Contoh scriptnya sebagai berikut :

<html>

<head>

<title>Ini adalah Web sederhana pertama saya</title>

</head>

<body>

<h1>SELAMAT DATANG</h1>

<p>hai...ini adalah halaman pertama dari web sederhana saya</p>

</body>

</html>

Jika sudah, sekarang kita save file HTML yang telah kita buat tersebut.

Cara save program HTML yang telah kita buat tersebut adalah ketika kita ingin melakukan save terhadap file yang kita buat tersebut, ada satu tempat di bawah tempat kita menulis nama file, yaitu Save As Type, kita rubah dari text document(*.txt) menjadi all files. Dan pada saat menulis nama, di akhir di berikan ekstensi .html

Contoh coba.html.

kalo udah disave, buka data yang tadi di save, dan silahkan lihat hasil kerja anda

 ini lah hasinya.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Materi Kuliah Pemrograman Internet HTML

Download Materi Kuliah Pemrograman Internet HTML. Dengan HTML Anda dapat membuat situs Web Anda sendiri. Materi ini mepelajari tentang HTML. HTML mudah dipelajari – Anda akan menikmatinya. Apa itu HTML? HTML adalah bahasa untuk mendeskripsikan halaman web. * HTML singkatan Hyper Teks Markup Language * HTML bukan bahasa pemrograman, ini adalah bahasa markup * Sebuah bahasa markup adalah serangkaian tag markup * HTML menggunakan tag markup untuk menjelaskan halaman web Tag HTML Markup tag HTML biasanya disebut tag HTML * HTML tag adalah kata kunci dikelilingi oleh sudut kurung seperti * HTML tags biasanya datang dalam pasangan seperti dan * Tag yang pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir * Mulai dan akhiri tag juga disebut tag membuka dan menutup tag Dokumen HTML = Web Pages * Menggambarkan dokumen HTML halaman web * Dokumen HTML berisi tag HTML dan teks biasa * Dokumen HTML juga disebut halaman web * Disimpan dengan tipe file .html atau .htm Tujuan dokumen HTML untuk menampilkan dan membaca halaman web di web browser (seperti Internet Explorer atau Firefox). Silahkan Download link dibawah ini : PENGENALAN INTERNET HTML DASAR HTML LANJUT CODE WARNA HTML CSS

Pemograman Web

Pemrograman Web, lebih sering disingkat PW atau PWeb, adalah mata kuliah yang mempelajari tentang bagaimana cara membuat web. Untuk tahu cara membuat web, kita harus mengetahui bahasa pemrograman web dan software-software pembuat web.

Pertama-tama kita akan diajarkan bahasa-bahasa yang terlibat dalam pemrograman web. Misalnya HTML, XML, XHTML, CSS, Javascript, Ajax, Php, JQuery, dan lain-lain.

Sebenarnya, berdasarkan pengalaman satu semester ini, kita tidak diwajibkan menguasai semua bahasa itu. Yang penting adalah bagaimana kita bisa mengerti perbedaan dan fungsi masing-masing, dan tahu kapan harus mengimplementasikannya.

Yang kedua, selain bahasa, kita akan mempelajari seluk beluk web, mulai dari database yang digunakan, software-software pendukung (seperti dreamweaver atau ms visual studio), dan pengetahuan lain hingga kita bisa menciptakan sebuah web yang mandiri dan berfungsi baik.

Di kuliah ini ada praktikum dengan 5 modul: 1. Modul 1: HTML dan CSS 2. Modul 2: Javascript 3. Modul 3: ASP dan Ajax 4. Modul 4: SQL Database 5. Modul 5: Web Service

Setelah satu semester, kuliah ini seperti kuliah Basis Data di semester 3 kemarin. Implementasinya juga hampir sama. Ada database, ada web, ada sistem informasi, dll. Yang berbeda adalah kita bisa memaksimalkan desain web dan fungsionalitas web lain yang belum dijelaskan di basis data.

Satu kelemahan mata kuliah ini adalah kita belum diajarkan bagaimana cara memasang web kita ke internet. Jadi, produk akhir kuliah ini hanya sebatas aplikasi web offline dan belum di-publish dan belum bisa diakses dari luar. Sayang sekali.

Bahasa yang dipakai: HTML dan segala bahasa web lainnya (Php, Ajax, Javascript, CSS, C#, Query, dsb...) Software: dreamweaver, ms visual studio, atau teks editor lainnya (notepad bisa, tapi menyengsarakan)

Disarankan mempelajari situs www.w3schools.com untuk mempelajari bahasa-bahasa web dan fungsi-fungsi web. Sebagian besar materi ada di situs ini.

Ohiya, film yang paling cocok sama mata kuliah ini adalah Social Network yang mengisahkan Mark Zuckerberg membangun Facebook. :P Kalau menonton film ini pasti tahu apa itu pemrograman web, paling enggak secara kasarnya :D

New

M A N U S I A