Cara Membuat website dengan Dreamweaver
|
|
|
- Yuliana Pranoto
- 7 tahun lalu
- Tontonan:
Transkripsi
1 Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See Is What You Get intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Kata Kunci: coldfusion, ASP. Pendahuluan Adobe Dreamweaver merupakan program penyunting halaman web dari Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver dari Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang lengkap serta kemudahan dalam penggunaannya. Dreamweaver juga sebagai program untuk membuat, mendesain dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML. Pembahasan Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian : 1. Header 2. Menu navigasi 3. Konten 4. Sidebar 5. Footer Langsung saja kita akan membuat website di dreamweaver, Dreamweaver anda, Create new pilih PHP buka program Adobe
2 Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP. Berikutnya anda membuat file baru, tekan CTRL + N pada Blank Page pilih CSS kemudian klik create,simpan dengan nama style.css dalam folder yang sama dengan file index.php Kembai ke file index.php, klik tab index.php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag </head> <link href="style.css" rel="stylesheet" type="text/css" /> Script tersebut berfungsi menghubungkan file CSS dengan index.php Mengatur Body Website Masih dalam file index.php, klik icon New CSS Rule yang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift + F11 untuk menampilkan tab CSS Style.
3 Setelah muncul Window New CSS Rule, isi pengaturan sebagai Selector : body Jika sudah klik Ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : # Background = Background color : #CCCCCC Box = width : 900 pixel Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S Mengatur Link Website Sekarang kita akan mengatur warna, ukuran, dan style Link secara default. Klik i con New CSS Rule, isi pengaturannya sebagai Selector : a Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai
4 Type: Color : #ff6000 Pada Decoration centang None Jika sudah klik ok. Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule, isi pengaturannya sebagai Selector : a:hover Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai Type: Pada Decoration centang Underline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor, kemudian pilih warnanya. Jika sudah klik Ok. Membuat Header Website Setelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body> <div id="header"></div> Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #header Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai Type:
5 Size : 12 pixel Color : #FFFFFF Background: Background image : klik browse pilih header.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 110 pixel Padding : centang same for all, kemudian isikan 20 pixel Jika sudah klik OK, kemudian simpan file style.css anda. Untuk melihat preview website anda tekan F12. Selanjutnya kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div id= header > kemudian klik insert = > image = > logo.jpg Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara : Melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80 Masih tetap pada Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda. Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda. Dibawah code : <a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a> Ketikkan : <p>deskripsi website anda disini</p> Ganti tulisan deskripsi website anda disini dengan deskripsi / penjelasan website anda.
6 Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5. Membuat Menu Navigasi Website Setelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="navigasi"></div> Sekarang kita akan mengatur CSS untuk navigasinya. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #navigasi Setelah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai Background: Background image : klik browse pilih bg-nav.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 35 pixel Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel Pada bagian margin centang same for all isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css. Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
7 Setelah muncul jendela Table, isikan pengaturannya sebagai Rows : 1 Columns : 4 Table Width : kosongkan saja Border Thickness : kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5 Jika sudah klik ok. Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
8 Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya. Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai Selector : #navigasi a Setelah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai Type: Color : #FFFFFF Jika sudah klik Ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12 Membuat Konten Website Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="content-wrapper"> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #content-wrapper Setelah muncul CSS Rule Definition for #content-wrapper in style.css, isikan pengaturannya sebagai Background: Background color : #DDDDDD
9 Box : Width : 860 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding hilangkan centang same for all, isikan top: 0 pixel, bottom: 0 pixel, right: 20 pixel, left: 0 pixel Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id= content-wrapper > <div id="content"></div> Sehingga kodenya menjadi seperti <div id="content-wrapper"> <div id="content"></div> </div> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #content Setelah muncul CSS Rule Definition for #content in style.css, isikan pengaturannya sebagai Background: Background color : #FFFFFF Box : Width : 600 pixel Float : Left Pada bagian padding centang same for all, isikan 20 pixel Jika sudah klik ok, simpan file index.php dan style.css. Membuat Sidebar Konten Sidebar adalah kolom yang ada di sebelah kanan / kiri konten website anda, biasanya berisi menu menu seperti berita terbaru atau link link tertentu.
10 Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id= content ></div> <div id="sidebar"></div> Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #sidebar Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai Box : Width : 200 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding centang same for all, isikan 10 pixel Jika sudah klik ok, simpan file index.php dan style.css. Hasil : <div id="content-wrapper"> <div id="content"></div> <div id="sidebar "></div> </div> Membuat Footer Website Footer adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda. Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="footer"></div> Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai Selector : #footer
11 Setelah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai Background: Background image : klik browse pilih footer.jpg dalam folder images Repeat : no-repeat Block: Text align : Center Box : Width : 860 pixel Float : Left Height : 80 pixel Pada bagian padding centang same for all, isikan 20 pixel Pada bagian margin centang same for all, isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css. Penutup Itulah cara mudah pembahasan cara membuat website dengan menggunakan dreamweaver. Referensi Biografi Nama saya Pajrin Wurika Sahara, saya kelahiran bandung 19 desember 1993 pada saat ini saya sedang menuntut ilmu di salah satu perguruan tinggi di Raharja dan mengambil jurusan Teknik informatika dengan jurusa MAVIB (multimedia audio visual broadcasting ).
Komunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
PRAKTIKUM SISTEM INFORMASI MANAJEMEN
MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for
Gambar 1.1 Desain halaman web
DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8. Jika Anda menggunakan versi di atasnya, misalnya
Area kerja. Gambar 1. Tampilan awal MS FrontPage
Microsoft FrontPage I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images,
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE Oleh: Asyti Febliza I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain,
Macromedia Dreamweaver. Tatik Retno Murniasih, S.Si., M.Pd.
Tatik Retno Murniasih, S.Si., M.Pd. Merupakan software web design yang berguna untuk merancang web dan layout halaman web. Dalam merancang web bisa dilakukan dengan cara mendesain dan memprogram. Untuk
Membuat situs sederhana dengan Dreamweaver *)
Membuat situs sederhana dengan Dreamweaver *) Oleh: Sri Andayani Jurusan Pendidikan Matematika, FMIPA UNY Dreamweaver merupakan salah satu perangkat lunak bantu dalam kelompok Macromedia yang digunakan
MACROMEDIA DREAMWEAVER 8
MACROMEDIA DREAMWEAVER 8 Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan
Cara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
Modul 5 Macromedia Dreamweaver 8
Laporan Praktikum Modul 5 Macromedia Dreamweaver 8 Mata kuliah : CF 1310 Pengantar Teknologi Informasi Disusun oleh : Nama Route Gemilang 5208 100 073 Semester Ganjil 2008/2009 Jurusan Sistem Informasi
-Sejarah Dreamweaver-
-Sejarah Dreamweaver- SEJARAH Pada Jaman Dahulu Kala Hiduplah seorang Programmer yg bernama Mr.MX dia adalah Programmer bhs C++ yg Pintar dan akhirnya dia disuruh oleh Raja di Negerinya untuk membuatkan
Teks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
FLASH, FRAME, BEHAVIOR
FLASH, FRAME, BEHAVIOR 1. Flash Menyisipkan Flash Button a. Pilih menu : insert image interactive flash button b. Tentukan property : Style : pilih bentuk / jenis tombol flash Button text : tulis label
Mengenal Dreamweaver MX 2004
Mengenal Dreamweaver MX 2004 Macromedia Dreamweaver MX merupakan software yang dikenal sebagai software web authoring tool, yaitu software untuk desain dan layout halaman web. Versi terbaru Dreamweaver
STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.
STMIK SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 PENDAHULUAN Dreamweaver adalah sebuah program website editor yang berfungsi untuk membuat dan
Cara Koneksi Database di Dreamweaver CS3
Cara Koneksi Database di Dreamweaver CS3 Bella Mutia Ropana bellamutiaropana@raharja.info Abstrak Dreamweaver merupakan software aplikasi yang digunakan sebagai HTML editor profesional untuk mendesain
Ruang Kerja DREAMWEAVER MX 2004 :
1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER
TUTORIAL PEMBUATAN WEBSITE DENGAN MACROMEDIA DREAMWEAVER
TUTORIAL PEMBUATAN WEBSITE DENGAN MACROMEDIA DREAMWEAVER Disampaikan dalam Kegiatan PPM dengan Judul Pelatihan Pembuatan Sumber Belajar Matematika Berbasis Web Dengan Menggunakan Perangkat Lunak Macromedia
Tabel, List. Tempatkan kursor pada dokumen windor, kemudian pilih salah satu cara berikut : Insert Table
Tabel, List 1. Tabel Tabel adalah objek yang terdiri dari kolom dan baris. Tabel dalam halaman / dokumen Web sebenarnya terdiri dari tag-tag HTML, yaitu tag , tag , tag . 1.1. Menyisipkan
CSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
Membuat Bahan Ajar berbasis Web dengan Adobe Dreamweaver CS3. Bambang Adriyanto
Membuat Bahan Ajar berbasis Web dengan Adobe Dreamweaver CS Bambang Adriyanto MEMBUAT SITE dan HALAMAN BARU Membuat Site Sebelum membuat halaman-halaman web Anda harus membuat Site terlebih dahulu, untukmemudahkan
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
Belajar membuat gambar bergerak menggunakan Macromedia Flash MX
Belajar membuat gambar bergerak menggunakan Macromedia Flash MX Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Macromedia Flash adalah software yang banyak dipakai oleh desainer Web karena mempunyai
BAB III ANALISA DAN PEMBAHASAN MASALAH
BAB III ANALISA DAN PEMBAHASAN MASALAH Pada bab ini akan dibahas bagaimana cara merancang dan membangun Website Yuni-Museum. Dalam pembuatan website ini, penulis lebih banyak bekerja dengan menggunakan
Design Web Dengan 2 Kolom
Design Web Dengan 2 Kolom Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
Adobe Dreamweaver. CS3 Langsung Praktek! Dewi Putri & Ayu Ratih Wisah. PalComTech Publisher
Adobe Dreamweaver CS3 Langsung Praktek! Dewi Putri & Ayu Ratih Wisah PalComTech Publisher Adobe Dreamweaver CS3 Langsung Praktek! Penulis : Dewi Putri & Ayu Ratih Wisah Editor : Kasmoni Desain Kover :
TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER
1 TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA 1. HTML adalah kepanjangan dari. A. Hyper Text Multiple Language B. Hiper Text Multiple Language C. Hipo Text Multiple Language D. Hyper Text Multiple Land E.
BAB III ANALISA DAN PEMBAHASAN
21 BAB III ANALISA DAN PEMBAHASAN 3.1 Sejarah Berdirinya Perusahaan PT. Emax Fortune Internasional adalah sebuah perusahaan yang bergerak di bidang penjualan produk apple macintosh. Selain itu kami juga
- Hingga Muncul tampilan dan editor Frontpage sebagai berikut : Area Kerja. Menu Formatting. Layer Kerja
MS. Frontpage adalah salah satu software buatan Microsoft yang digunakan untuk membuat halaman-halaman situs (website) yang sangat populer, selain mudah digunakan MS. Frontpage juga mempunyai fitur-fitur
BAB 5 PROSES EDITING 5.1. EDITING AWAL
BAB 5 PROSES EDITING Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih
CARA MEMBUAT CSS DENGAN DREAMWEAVER
CARA MEMBUAT CSS DENGAN DREAMWEAVER Dewi Wijayanti dewiwijayanti@raharja.info Abstrak Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets
Triswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Tutorial Mengedit Halaman HTML dengan Dreamweaver
Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi
BAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1. Internet Internet merupakan suatu jaringan antar komputer yang saling dihubungkan. Media penghubung tersebut bisa melalui kabel, kanal satelit maupun frekuensi radio, sehingga
BAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN
6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Cascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
Header-Footer, Preview dan Cetak Dokumen
Header-Footer, Preview dan Cetak Dokumen BAB 4 Pada Bab ini anda akan mempelajari cara: Membuat header dan footer Membuat nomor halaman pada header Menambahkan informasi pada footer Mengatur ukuran halaman
Membuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli.
Membuat Aplikasi GPS & Suara Antrian dengan PHP Ronald Rusli www.bukulokomedia.com MEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Ronald
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
C. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
Author : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
BAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1. Pengertian Perancangan Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu (Kamus Bahasa Indonesia, 1988, h: 927). Perancangan merupakan penggambaran, perencanaan,
Modul 5 Macromedia Dreamweaver 8
Tugas Pendahulan Modul 5 Macromedia Dreamweaver 8 Mata kuliah : CF 1310 Pengantar Teknologi Informasi Disusun oleh : Nama Route Gemilang 5208 100 073 Semester Ganjil 2008/2009 Jurusan Sistem Informasi
Bab III PEMBAHASAN PEMBUATAN WEBSITE.
Bab III PEMBAHASAN PEMBUATAN WEBSITE. Pada bab ini dibahas bagaimana merancang dan membangun sebuah website PT.DIAMOND ICE CREAM. Dalam pembuatan website ini lebih banyak bekerja dengan menggunakan aplikasi
Modul 10 DreamWeaver MX Suendri, S.Kom
Modul 10 DreamWeaver MX 2004 Suendri, S.Kom -- Untuk Indonesia Tanah Air Tercinta -- Suendri, S.Kom 2 Lisensi Dokumen Seluruh isi dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara luas
How to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
BAB 6. Mencari Teks, Halaman, Menggabungkan Dokumen Dan Menggunakan Format Kolom
BAB 6. Mencari Teks, Halaman, Menggabungkan Dokumen Dan Menggunakan Format Kolom 1. Mencari (Find) dan Mengganti (Replace) Teks. a. Buka kembali file Tips Nama Cantik. Klik tab menu Home, sorot pada bagian
1.1 Apa Itu Dreamweaver 8?
Student Guide Series: Macromedia Dreamweaver 8 1.1 Apa Itu Dreamweaver 8? Macromedia Dreamweaver 8, atau biasa disebut Dreamweaver 8, adalah sebuah perangkat lunak aplikasi untuk mendesain dan membuat
BAB III ANALISA MASALAH DAN RANCANGAN PROGRAM
21 BAB III ANALISA MASALAH DAN RANCANGAN PROGRAM 3.1. Gambaran Umum. Bisnis dunia seluler tak cuma milik provider dan vendor ponsel. Permain di kategori layanan konsumen juga ikut ramai. Apalagi pengguna
Pokok Bahasan Membuat dan Menempatkan Tabel Menempatkan Footnotes Menempatkan Komentar (Comment) Mencetak Dokumen
Membuat Tabel, Footnote, Komentar dan Mencetak pada Word 2007 Pokok Bahasan Membuat dan Menempatkan Tabel Menempatkan Footnotes Menempatkan Komentar (Comment) Mencetak Dokumen 36 JBK Microsoft Office 2007
BAB II LANDASAN TEORI
4 BAB II LANDASAN TEORI 2.1 Definisi Aplikasi Aplikasi adalah penggunaan atau penerapan suatu konsep yang menjadi pokok pembahasan. Aplikasi dapat diartikan juga sebagai program komputer yang dibuat untuk
BAB 9. Membuat Equation, Hyperlink, Watermark Dan Mencetak Dokumen.
BAB 9. Membuat Equation, Hyperlink, Watermark Dan Mencetak Dokumen. 1. Menyisipkan Objek Equation. Ketikkanlah persamaan rumus di bawah ini. a. Buat dokumen baru (ctrl +N). Klik tab menu Insert, klik icon
PANDUAN PRAKTIS MICROSOFT WORD 2007
Bagian 1: Mengenal Microsoft Office Word 2007 1.1. Memulai Aplikasi Microsoft Office Word 2007 Untuk membuka Microsoft Word caranya adalah: Klik Tombol Start yang ada di taskbar. Pilih menu All Program
PENGENALAN HTML - 3. Gambar 1. Layer Toolbar
PENGENALAN HTML - 3 A. Layer Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, kita dapat membuat halaman HTML yang tampilannya lebih fleksibel. Layer
MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
PERTEMUAN 6 Teknologi dan Perangkat Pendukung
PERTEMUAN 6 Teknologi dan Perangkat Pendukung Editor program Web Browser Editor Gambar Editor Multimedia Editor Warna Sebuah Situs Web (Website) Sebuah situs web (website) merupakan kumpulan dari berbagai
Membangun website dinamis berbasis PHP-mySQL (3)
Membangun website dinamis berbasis PHP-mySQL (3) Agus Subardjo multigraphica@yahoo.com http://multigraphica.com Lisensi Dokumen: Copyright 2011-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com
Mengelola Bagian. Website Sekolah. Mengelola bagian utama Website Sekolah dibagi menjadi 3
Bab II: Mengelola Bagian Website Sekolah Utama Mengelola bagian utama Website Sekolah dibagi menjadi 3 kategori pokok, yakni: Mengelola Admin Merubah Disain Banner Atas Melengkapi Profil Sekolah A. Mengelola
KAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
MICROSOFT WORD Baris Judul. Drawing Toolbar
MICROSOFT WORD 2003 A. Membuka Microsoft Word 2003 Untuk membuka program Microsoft Word, ikutilah langkah-langkah berikut: Klik start klik All Programs klik Microsoft Office klik Microsoft Office Word
BAB III CASCADING STYLE SHEET
BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan
XHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
Index. Home. About Us. Guest Book. Site. Gambar 3.1 Struktur Navigasi Composite (Campuran)
46 3.2 Struktur Navigasi Struktur navigasi website digunakan untuk menggambarkan secara garis besar isi dari seluruh situs web dan menggambarkan bagaimana hubungan antara isi-isi tersebut. Struktur navigasi
LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
Panduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono
Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan
Bu k u Ma n u a l Web Si t e SK PD Pem er i n t a h K a b u pa t en Ma l a n g
Bu k u Ma n u a l Web Si t e SK PD 2016 Pem er i n t a h K a b u pa t en Ma l a n g Situs web Satuan Kerja Perangkat Daerah Pemerintah Kabupaten Malang didesain untuk bisa dirubah atau diupdate secara
Membuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,
1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Membuat Template Website Menggunakan Teknik Layer ala CSS
Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet
Modul ke: Aplikasi Komputer. Microsoft Word. Fakultas TEKNIK. Muhammad Rifqi, S.Kom, M.Kom. Program Studi. Ilmu Komputer.
Modul ke: Aplikasi Komputer Microsoft Word Fakultas TEKNIK Muhammad Rifqi, S.Kom, M.Kom Program Studi Ilmu Komputer http://www.mercubuana.ac.id MEMULAI MS WORD Klik START > Program > Micorosoft Office
BAB 13 MEMPERCANTIK TAMPIL WEB
BAB 13 MEMPERCANTIK TAMPIL WEB Website yang baik bukan terletak pada banyaknya animasi yang ditampilkan, tidak juga karena banyaknya video yang disediakan atau banyaknya warna yang dikombinasikan. Website
Mencari Text 2) 3) KTI A : Week 02 (Pembuatan Dokumen)
1 Mencari Text Untuk mencari sebuah text secara cepat, gunakan fasilitas Find and Replace, yang dapat dipanggil melalui menu Edit Find atau Ctrl+F. Hasilnya adalah : 4) Mencari untuk Highlight : menandai
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil
Tutorial Singkat Membuat Desain Header di CMS Balitbang.
Tutorial Singkat Membuat Desain Header di CMS Balitbang. Desain header cms balitbang bisa dirubah sesuai dengan keinginan kita dan tentu saja menyesuaikan dengan content website yang kita buat, misalnya
Microsoft Words. Oleh : ANNISA RATNA SARI
Microsoft Words Oleh : ANNISA RATNA SARI PENGENALAN MS WORD : 1. Tampilan MS Word 2. Membuka MS Word 3. Membuat Dokumen Baru 4. Membuka File yang Sudah Tersimpan 5. Menyimpan Dokumen 6. Menutup File Dokumen
Tutorial pembuatan Company Profile dengan JagoanWeb
Tutorial pembuatan Company Profile dengan JagoanWeb Untuk memudahkan Anda dalam membuat company profile Anda, berikut adalah panduan untuk setting / pengaturan pada halaman Admin Anda. A. MENGGANTI TEMPLATE
BAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1 Informasi dan Internet Informasi menurut Jogiyanto H, M, Informasi adalah data yang diolah menjadi bentuk yang lebih berguna dan bagi yang menerima. (Jogiyanto, H.M., Analisis
MEMBUAT WEBSITE PERSONAL
MEMBUAT WEBSITE PERSONAL dengan Microsoft FrontPage UNTUK KALANGAN SENDIRI Dilarang menyalin sebagian atau seluruh bagian modul ini tanpa ijin dari penyusun Modul Workshop : Membuat Website Personal 1
Aplikasi Komputer. Pengenalan tentang Ms. Word 2010 serta fungsi-fungsi dasarnya (1) Ita Novita, S.Kom, M.T.I. Modul ke: Fakultas Ilmu Komputer
Modul ke: Aplikasi Komputer Pengenalan tentang Ms. Word 2010 serta fungsi-fungsi dasarnya (1) Fakultas Ilmu Komputer Ita Novita, S.Kom, M.T.I Program Studi Informatika www.mercubuana.ac.id Pengenalan Microsoft
Modul 5 Desain dengan Dreamweaver II
Modul 5 Desain dengan Dreamweaver II 1.1 Tujuan a. Mahasiswa dapat membuat web dengan dreamweaver b. Mahasiswa dapat mengenal komponen dreamweaver lebih lanjut 1.2 Materi a. Membuat Website b. Text, Tabel
MODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK
A. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Kata Pengantar.
Kata Pengantar Saat ini Dreamweaver MX telah menjadi program yang paling banyak di gunakan sebagai program pembuat web. Meskipun di pasaran telah banyak beredar web authoring yang lain, tetapi keberadaan
Table, List, Form DWI SETIYA.N. /
LIST, TABLE DAN FORM Alat dan Bahan Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai
Pengenalan HTML dan CSS
Pengenalan HTML dan CSS Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi
Bab 9 Menggunakan Tabel
Bab 9 Menggunakan Tabel Webmaster Pro Front Page XP Daftar Isi Bab 9 1 Membuat sebuah tabel...284 1.1 Cara pertama membuat tabel... 284 1.2 Cara kedua membuat tabel... 286 1.3 Cara ketiga membuat tabel...
BAB II LANDASAN TEORI
4 BAB II LANDASAN TEORI 2.1 Internet Bisa di maklumi jika sampai saat ini banyak orang yang masih belum juga mengerti apa sebenarnya makna dari istilah internet. Sesungguhnya memang tidak ada jawaban yang
Modul ke: Aplikasi komputer. Microsoft Excel 2010 Bagian 1. 09Fakultas FASILKOM. Wardhana., S.Kom., S.T., MM. Program Studi MKCU
Modul ke: 09Fakultas Ariyani FASILKOM Aplikasi komputer Microsoft Excel 2010 Bagian 1 Wardhana., S.Kom., S.T., MM Program Studi MKCU Microsoft Excel Sebuah program aplikasi lembar kerja spreadsheet yang
Makmal 1: Perisian Adobe Dreamweaver CS3
Makmal 1: Perisian Adobe Dreamweaver CS3 Pengenalan kepada Adobe Dreamweaver CS3 1. Adobe Dreamweaver CS3 (ADCS3) adalah satu aplikasi pembangunan web. Dahulunya ADCS3 dikenali sebagai Macromedia Dreamweaver
BAB I PENDAHULUAN 1.1 Latar Belakang Masalah Aplikasi Website PT. DIAMOND Menggunakan Macromedia DreamWeaver MX
BAB I PENDAHULUAN 1.1 Latar Belakang Masalah Dengan meningkatnya persaingan yang semakin ketat pada saat sekarang ini PT. Diamond mengeluarkan produk-produk terbaru agar dapat bersaing dengan perusahaan
APLIKASI KOMPUTER. Pokok Bahasan : MS. Excell 2010 (Bagian 2) Anggun Puspita Dewi, S.Kom., MM. Modul ke: Fakultas MKCU
APLIKASI KOMPUTER Modul ke: Pokok Bahasan : MS. Excell 2010 (Bagian 2) Fakultas MKCU www.mercubuana.ac.id Anggun Puspita Dewi, S.Kom., MM Program Studi Sistem Informasi & MarComm Micosoft Excel 2010 Untuk
CSS. inheritance (pewarisan)
{CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css