TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER
|
|
- Surya Jayadi
- 7 tahun lalu
- Tontonan:
Transkripsi
1 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 yang akan dipersiapkan terlebih dahulu adalah sebagai berikut : 1. Desain Website 2. Membuat Website Dengan Dreamweaver 3. Upload Website 1.Desain website Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan kita buat. Untuk kesempatan ini, kita akan membuat desain website statis dengan format xhtml yang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools. 1.1 Tampilan website Tampilan halaman website / webpage pada kesempatan ini adalah membuat halaman web sederhana dengan 4 bagian / block seperti gambar dibawah ini dengan deskripsi sebagai berikut : gambar 1.1 tampilan website 3 Header Menu Content Footer Header Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage Menu Menu Adalah Navigator dari Content layout, berisikan link informasi sebuah website. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengan kebutuhan pemilik seperti : home, article, about me, contact dsb Content Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu Footer Footer hampir sama dengan header, namun yang membedakan adalah, posisi footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright pembuat / pemiliknya.
2 2 1.2 Webpage Content Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan dinavigasi dari menu, dengan informasi sebagai berikut : 1. Home (Index.html) Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage. dengan inisial Home pada menu navigasi 2. Article (Article.html) Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi 3. About Me (About.html) Menampilkan informasi pemilik Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik 4. Contact (Contact.html) Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik Komponen 1.3 Menyiapkan Graphic / Gambar pendukung webpage Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang ditempung pada file images sebagai berikut : images Folder/ directory gambar background-header.png File gambar background header block background-footer.png File gambar background footer block background-content.png File gambar background content block background-menu.png File gambar background menu navigasi block pastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan file website anda. 1.4 File Management Website Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita buat adalah sebagai berikut : index.html html file, halaman utama / homepage article.html html file, halaman article about_me.html html file, halaman tentang pemilik contact.html html file, halaman contact pemilik template.css css file, Style Library halaman website images Folder / directory gambar Buat 1 buah Folder / directory dengan nama workshop pada PC anda yang teletak pada C:\ File management diatas akan berada pada folder yang anda buat. C:\workshop\ Untuk awal tentunya anda belum mempunyai file index.html, about_me.html & template.css. file graphic pendukung dapat dicopy dari tempat yang telah disediakan. 2.1 Membuat XHTML dengan Dreamweaver MX Untuk Memulai membuat website dengan dreamweaver, anda dapat langsung membukanya pada desktop shortcut atau melalui menu : start All Program Macromedia Macromedia Dreamweaver MX 2004 Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan. 2.1 Site Setup Menggunakan Dreamweaver Konfigurasi awal pembuatan website, adalah setup Dreamweaver site ditujukan untuk setup informasi sites, letak directory, dsb. Click shortcut Dreamweaver site seperti pada gambar 2.1
3 3 Gambar tampilan awal dreamweaver Dreamweaver site 1. Pilih tab basic pada window konfigurasi site definition, masukan nama site Workshop pada text box yang disediakan. Next 2. Editing Files, Part 2 pilih No, I do not want to use a server technology dengan memilih / check radio button. Next 3. Editing Files, Part 3 pilih Edit local copies on my machine, then upload to server when ready (recommended) dengan memilih / check radio button. Pada pertanyaan Where on your computer do you want to store your files?, masukan path directory yang telah kita buat. Isi text box dengan C:\workshop\ atau dengan memilih directory melalui browse button disampingnya. Next 4. Pada Bagian Sharing Files, pada pertanyaan How do you connect to your remote server? pilih Local\Network pada combobox yang disediakan, pada pertanyaan What folder on your server do you want to store your files in? masukan path file yang telah kita buat pada text box yang disediakan dengan C:\workshop\ dan checked check box Refresh, remote file list automatically Next 5. Sharing File part 2, pilih No, do not enable check in and check out dengan memilih klik check box tersebut. Next 6. Summary result Hasil setup anda akan seperti gambar disebelah ini. Akhiri setup dengan melakukan klik tombol Done. Selanjutnya anda akan memasuki tampilan site workshop. Done Gambar summary setup
4 4 Pada panel Files, anda dapat melihat root directory beserta file-file anda. Gambar panel Files 2.2 Membuat Halaman Index.html Pada Dashboard Dreamweaver menu pilih HTML pada sub Create New Shortcut. Anda akan memasuki workspace Dreamweaver. Gambar Title webpage Masukan Judul Home pada textbox title Gambar Saving Index.html Save halaman Pertama anda dengan nama index.html pada folder C:/workshop/ Gambar seting block div insert div tag pada halaman layout dengan class sesuai dengan design yang akan dibuat container, footer, content, menu, header seperti digambar sebelah ini.
5 5 Gambar homepage content masukan informasi sesuai dengan block yang telah dibuat. 1.header block : Dengan nama anda dan motto 2.menu block : navigator halaman diikuti dengan fungsi hyperlink Home Article About me Contact 3.content block : informasi homepage berisikan kata sambutan, dsb 4.footer block : informasi pembuat 2.1 Membuat CSS dengan Dreamweaver MX Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut : 1. Inline style ditulis langsung pada setiap tag / elemen 2. Document level style ditulis diantara bagian head HTML pada setiap dokumen 3. External style sheet ditulis difile.css sebagai file external yang dapat dipanggil / digunakan lebih dari 1 halaman / webpage. Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file template.css melalui menu File new CSS pada kategori basic page. Selanjutnya gunakan template.css sebagai link stylesheet pada index.html dengan Attach style sheet pada panel CSS Gambar Attach Css Halaman index.html akan menampung script sebagai berikut sebagai link CSS external <link href="template.css" rel="stylesheet" type="text/css" />
6 6 setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0. dengan menggunakan wizard dari dreamweaver atau menulis sctipt css sebagai berikut : * { color: #333333; margin: 0px; padding: 0px; selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini : body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #313131; h1 { text-transform: lowercase; color: #3399FF; font-size: 25px; h2 { color:#3399ff; font-size: 14px; text-transform: uppercase; buat style tag div div { padding: 5px; border: 1px solid #FFFFFF; style class container.container { width: 600px; margin-top: 20px; margin-right: auto; margin-left: auto; padding: 0px; border: 3px ridge #FFFFFF; Style class header.header { background: #FFFFFF url(images/background-header.png); text-align: center; Style class content.content { font-size: 12px; background: #FFFFFF url(images/background-content.png) repeat-x; text-align: justify; Style class menu.footer { font-size: 11px; color: #FFFFFF;
7 7 background: #FFFFFF url(images/background-footer.png); text-align: center; Style class menu.menu { height:25px; padding:0px; border:0px; Advance class menu pada tag li, a dan a:hover.menu li { list-style:none; text-align: center; float: left; height: auto; width: 150px; font: 12px/25px Verdana, Arial, Helvetica, sans-serif;.menu li a { font-weight: bold; text-transform: uppercase; color: #FFFFFF; text-decoration: none; background: url(images/background-menu.png); display: block;.menu li a:hover { background: url(images/background-menu.png) 0-25px; color:#000000; Maka tampilan home page anda akan akan seperti sebagai berikut : Gambar index.html
8 8 Gambar article.html Anda dapat melanjutkan ke halaman selanjutnya dengan informasi yang diinginkan dengan melakukan save as dari halaman yang sudah ada. Setelah ke 4 halaman telah selesai dibuat selanjutnya kita dapat meneruskan ke tahap upload website.
9 9 5. Upload Website Gunakan File Transfer Protocol (FTP) Apabila computer host anda mendukung. Sedangkan untuk free webhosting (webhosting gratis) tergantung pada layanan host itu sendiri. 1.Sebelum registrasi user ke layanan free webhosting, anda harus memiliki terlebih dahulu. 2.Pilih WebHosting (275mb.com, Geocities.com, dsb) 3.Registrasi user dan Konfirmasi pendaftaran hingga anda mendapatkan akses untuk menggunakan layanan tersebut. 4.Upload file ke host, upload semua file yang berada pada folder workshop yang berada pada drive C:/workshop ke root webhost anda. 5.Enjoy your sites. Geocities memberikan layanan hosting gratis yang terintegrasi dari yahoo account. Untuk itu hal yang perlu dipersiapkan adalah. Yahoo Account atau Anda dapat melakukan registrasi ke yahoo terlebih dahulu untuk mendapatkan layanan free host ini. Pilih Free webhost SIGN UP Gambar Yahoo Geocities Home
10 10 Geocites memberikan layanan setup wizard, blog, dsb namun pada kesempatan ini kita akan melakukan upload file sendiri. Pilih Tab Create & Update pada Group box File Management Tools pilih File Manager Open File Manager Gambar Yahoo Geocities File Manager Upload File yang telah anda buat index.html html file, halaman utama / homepage article.html html file, halaman article about_me.html html file, halaman tentang pemilik contact.html html file, halaman contact pemilik template.css css file, Style Library halaman website images Folder / directory gambar Anda dapat melihat sites anda dari link yang telah ditampilkan diatas file manager. Text yang terlingkar warna merah pada Gambar
Cara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Lebih terperinciMengenal 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
Lebih terperinciMACROMEDIA 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
Lebih terperinci1.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
Lebih terperinciMembangun 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
Lebih terperinciCara Membuat Website Dengan Dreamweaver 8
Cara Membuat Website Dengan Dreamweaver 8 Hilmi Akbar Hilmi_Akbar@ymail.com Abstrak Macromedia Dreamweaver 8 merupakan alat desain web komprehensif yang disukai oleh para profesional web, tapi cukup mudah
Lebih terperinciBAB III ANALISA DAN PEMBAHASAN MASALAH
BAB III ANALISA DAN PEMBAHASAN MASALAH 3.1. Analisa Masalah Berbusana muslim kini bukan lagi sekedar memenuhi ajaran agama, tapi juga sudah menjadi bagian dari dunia mode. Lebih dari itu, sekarang busana
Lebih terperinciModul 4 Desain dengan Dreamweaver I
Modul 4 Desain dengan Dreamweaver I 1.1 Tujuan a. Mahasiswa dapat membuat template web dengan dreamweaver b. Mahasiswa dapat mengenal komponen dreamweaver 1.2 Materi a. Web dan Dreamweaver b. Desain Web
Lebih terperinciBAB III ANALISA DAN PEMBAHASAN MASALAH
BAB III ANALISA DAN PEMBAHASAN MASALAH Pada bab ini akan dibahas bagaimana merancang dan membuat Web budi daya anggrek dengan menggunakan macromedia dreamweaver mx. Pembahasan ini akan dibagi menjadi beberapa
Lebih terperinciTUTORIAL CONTENT MANAGEMENT SYSTEM WEB HOSTING JOOMLA
TUTORIAL CONTENT MANAGEMENT SYSTEM WEB HOSTING JOOMLA Pada tutorial ini, akan dijabarkan langkah per langkah untuk meng-hosting web Joomla Anda dari komputer lokal ke web hosting gratis di Internet. Tutorial
Lebih terperinciMembuat 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
Lebih terperinciKomunikasi 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
Lebih terperinciPRAKTIKUM 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
Lebih terperinci-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
Lebih terperinciTutorial Membuat Website Gratis
Tutorial Membuat Website Gratis Membuat Website Gratis Dalam membuat website ada 2 komponen yang harus dipersiapkan yaitu domain dan web hosting. Domain adalah nama dan alamat dari sebuah website contohnya
Lebih terperinciCara membuat HTML dasar
Cara membuat HTML dasar Oleh : Ronaldo Fantoni 11 IPA /12 1. Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
Lebih terperinciPERTEMUAN 1. Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage
PERTEMUAN 1 Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage Materi yang akan dibahas : 1. Kegunaan dari dokumen dan audiens 2. Bahasa HTML 3. Struktur dasar penulisan dokumen 4. Site
Lebih terperinciC. 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:
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciBAB 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
Lebih terperinciSIMPLE 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
Lebih terperinciSTMIK 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
Lebih terperinciBab III Membuat Tampilan Web Sendiri Menggunakan Front Page
Bab III Membuat Tampilan Web Sendiri Menggunakan Front Page Setelah beberapa kali menggunakan beberapa media untuk membuat tampilan web, mulai saatnya membuat tempilan web sendiri dengan software. Walaupun
Lebih terperinciPercobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html
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 icon pada list
Lebih terperinciRuang 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
Lebih terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
Lebih terperinciMembuat 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
Lebih terperinciBAB 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
Lebih terperinciTriswansyah 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
Lebih terperinciTutorial Membuat Template Joomla 1.5
Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial
Lebih terperinciMEMANFAATKAN CASCADING STYLE SHEET UNTUK MEMPERINDAH TAMPILAN WEB
Media Informatika Vol. 8 No. 2 (2009) MEMANFAATKAN CASCADING STYLE SHEET UNTUK MEMPERINDAH TAMPILAN WEB Budi Maryanto Sekolah Tinggi Manajemen Informatika dan Komputer LIKMI Jl. Ir. H. Juanda 96 Bandung
Lebih terperinciTutorial penggunaan CMS / Application By. Steph/IT/04/2010
Tutorial penggunaan CMS / Application By. Steph/IT/04/2010 Bab I Pengenalan dasar Website Ditek Jaya terdaftar dengan menggunakan nama domain http://www. ditekjaya.co.id Website Ditek Jaya dilengkapi dengan
Lebih terperinci2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
Lebih terperinciBAB 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
Lebih terperinciMembuat web CMS dengan JOOMLA
Membuat web CMS dengan JOOMLA Tingkat sangat pemula sekali dan hanya pengetahuan dasar bagi pemula Ditulis oleh deris stiawan dengan langsung dicoba (newbie) Disini penulis menggunakan XAMPP sebagai web
Lebih terperinciKAJIAN 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
Lebih terperinciMengenal dan Mengedit HTML
Mengenal dan Mengedit HTML 3.1 Pengertian HTML HTML (HyperText Markup Language) merupakan protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser. HTML juga digunakan
Lebih terperinciPERTEMUAN 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
Lebih terperinciLANGKAH DEMI LANGKAH MEMBANGUN WEBSITE GRATIS DI
LANGKAH DEMI LANGKAH MEMBANGUN WEBSITE GRATIS DI DIPERSEMBAHKAN OLEH http://www.klikabadi.com Dipersembahkan Oleh : http://www.klikabadi.com 1 KATA PENGANTAR Mempunyai website sendiri merupakan suatu kebanggaan
Lebih terperinciIntroduksi. Team Training SMK-TI I-58
Introduksi Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip
Lebih terperinciTutorial 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
Lebih terperinciDasar-dasar Dreamweaver
FAUZAN SRIRADITYO UTOMO 08148102 TUGAS TV INTERNET Dasar-dasar Dreamweaver I. Elemen Dreamweaver Anda harus nyaman mencari dan menggunakan alat-alat dan objek dalam Dreamweaver (ada banyak lagi, tetapi
Lebih terperinciCara Mudah Membuat Website
Cara Mudah Membuat Website Oleh : Deryandri Ternyata membuat website itu mudah, dahulu mampu membuat website sudah canggih bagi orang orang awam, seiring dengan perkembangan ilmu pengetahuan membuat website
Lebih terperinciMacromedia 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
Lebih terperinciXHTML 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
Lebih terperinciMATERI II CASCADING STYLE SHEETS (CSS) DASAR
MATERI II CASCADING STYLE SHEETS (CSS) DASAR Tujuan : 1. Memahami tentang konsep CSS 2. Memahami aturan penulisan pada CSS 3. Memahami selector sebagai pengontrol design 4. Memahami pembuatan background
Lebih terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
Lebih terperinciE-commerce Development Berbasis Wordpress
E-commerce Development Berbasis Wordpress P A R T 2 A / 4 w w w. v e r o n i c a s t e v a n y. c o m w w w. g r a p h i c b y v e s t e. c o m PAGE 2 Pendahuluan WordPress merupakan sebuah CMS (Content
Lebih terperinciCSS. Auriza Akbar 1 Juni 2012
CSS Auriza Akbar auriza.akbar@gmail.com 1 Juni 2012 Apa itu CSS? CSS = Cascading Style Sheets Mekanisme sederhana untuk menambahkan style (seperti font, warna, spasi) ke dalam dokumen web http://www.w3.org/style/css/
Lebih terperinciBAB 2 LANDASAN TEORI
BAB 2 LANDASAN TEORI 2.1 Pengenalan HTML 2.1.1 Pengertian Dokumen HTML HTML ( Hypertext Markup Language ) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa
Lebih terperinciSOAL 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.
Lebih terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX 2004
MODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX 2004 1. Untuk menjalankan dreamweaver klik Start->Program->Macromedia- >Macromedia Dreamweaver MX2004 2. Tampilan awal biasanya
Lebih terperinciPanduan 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
Lebih terperinciMateri 1. Selamat Datang Di Frontpage 2000
Materi 1 Selamat Datang Di Frontpage 2000 By Sugeng Wibowo noidentresponse@yahoo.com MEMBUAT WEB SEDERHANA DENGAN MICROSOFT FRONTPAGE 2000 1. Pendahuluan Sebelum kita membuka program Microsoft Frontpage
Lebih terperinciPANDUAN PENGGUNAAN. Joomla! Versi 1.5. Oleh: Anon Kuncoro Widigdo
PANDUAN PENGGUNAAN Joomla! Versi 1.5 Oleh: Anon Kuncoro Widigdo anonkuncoro@yahoo.com Kendari 2009-2010 MODUL I Pendahuluan Joomla adalah sebuah aplikasi sistim manajemen konten atau Content Management
Lebih terperinciCSS 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
Lebih terperinciBAB 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
Lebih terperinciMembuat 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
Lebih terperinciKISI-KISI UAS SEMESTER 2
1. Orang yang membuat website disebut dengan a. Web admin b. Web programer c. Web designer d. Publisher e. Programmer 2. Unsur yang terdapat pada Graphic Design dalam sebuah web adalah? a. Jumlah halaman,
Lebih terperinciGambar 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
Lebih terperinciMEMBUAT 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,
Lebih terperinciCSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
Lebih terperinciPENGABDIAN MASYRAKAT PELATIHAN PEMBUATAN WEB UNTUK USTADZ DAN PENGELOLA PONDOK PESANTREN SEBAGAI MEDIA INFORMASI DI KABUPATEN/KOTA KEDIRI
MODUL PENGABDIAN MASYRAKAT PELATIHAN PEMBUATAN WEB UNTUK USTADZ DAN PENGELOLA PONDOK PESANTREN SEBAGAI MEDIA INFORMASI DI KABUPATEN/KOTA KEDIRI Modul ini merupakan pentunjuk awal untuk pembuatan web hosting
Lebih terperinciSetting Web Mahasiswa
UNIVERSITAS AIRLANGGA Setting Web Mahasiswa unair-joomla Login ke Control Panel Administrator Langkah selanjutnya adalah login ke Control Panel Administrator, misal website anda berdomain feb.example.com,
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Lebih terperinciTUTORIAL 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
Lebih terperinciUser Guide Manual. User diminta menentukan destination directory untuk menentukan lokasi dimana
1.Bee-Messenger : Cara Instalasi User Guide Manual Double click pada Bee-Messenger_1_0_0.exe Pada setup Bee-Messenger klik next. User diminta menentukan destination directory untuk menentukan lokasi dimana
Lebih terperinciMengembangkan Website Berbasis Wordpress
Mengembangkan Website Berbasis Wordpress Bagian 1: Pengenalan dan Instalasi Wordpress Hanif Rasyidi Pendahuluan Perkembangan teknologi saat ini membuat internet menjadi salah satu sumber utama dalam pencarian
Lebih terperinciMakmal 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
Lebih terperinciTUTORIAL RUBY ON RAILS
TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi 083112706450100 UNIVERSITAS NASIONAL DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL 2. MEMBUAT HALAMAN WEB
Lebih terperinciPetunjuk Pengembangan Course dalam Elearning berbasis Moodle
1 Petunjuk Pengembangan Course dalam Elearning berbasis Moodle (Part I) Oleh: Herman Dwi Surjono, Ph.D. hermansurjono@uny.ac.id http://herman.elearning-jogja.org A. Pendahuluan Portal elearning kini banyak
Lebih terperinciArea 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,
Lebih terperinciPANDUAN MANUAL JENTERPRISE
PANDUAN MANUAL JENTERPRISE Untuk memulai pengoperasian Web jenterprise, langkah langkah yang perlu dilakukan adalah melakukan konfigurasi halaman administrator. Halaman administrator bisa di akses di http://namadomainanda/admin/,
Lebih terperinciBAB X Upload File ke Internet
BAB X Upload File ke Internet Bila anda telah membuat halaman-halaman web yang tersimpan sebagai file-file HTML dalam hardisk komputer anda, berarti anda telah mempunyai website sendiri secara offline.
Lebih terperinciBAB IV PEMBAHASAN. dapat dilakukan dengan memasukkan IP address sesuai dengan IP address yang telah
BAB IV PEMBAHASAN Pada bab pembahasan ini akan dibahas tentang hasil dari Kerja Praktek yang telah dibuat berdasarkan materi yang didapat dari berbagai buku sehingga terbentuk menjadi sebuah web dan dapat
Lebih terperinci3. Pilih layout dari blog yang akan kita buat seperti gambar di bawah ini : 4. Lalu pilih tema sesuai dengan layout yang sudah kita pilih tadi seperti
Membuat Blog dengan Wordpress Apa Itu WordPress? WordPress adalah salah satu platfrom blog yang saat ini sudah mengalami banyak perkembangan sehingga bisa kita gunakan untuk membuat website untuk banyak
Lebih terperinciPage 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma
Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah
Lebih terperinciInsert Bar (Frame) Insert Bar (Form) Insert Bar (Templates) Insert Bar (Characters)
DAFTAR ISI Halaman Judul Lembar Pengesahan... i Abstraksi... ii Kata Pengantar... iii Daftar Isi... v Daftar Gambar... viii Daftar Tabel... x BAB I PENDAHULUAN... 1 1.1 Latar Belakang Masalah... 1 1.2
Lebih terperinciMODUL 5 MACROMEDIA FIREWORKS
MODUL 5 MACROMEDIA FIREWORKS Tujuan : 1. Memahami penggunaan Fireworks dalam mendesign suatu web. 2. Memahami pembuatan tombol dalam Fireworks. 3. Memahami langkah-langkah pembuatan Fireworks dari awal.
Lebih terperinciCara Mudah Mengedit Cascading Style Sheet (CSS)
Cara Mudah Mengedit Cascading Style Sheet (CSS) Riska Islaminati riska.islaminati@raharja.info :: http://www.komputeran.com/2012/04/cara-mudahmengedit-cascading-style.html Abstrak CSS salah satu teknik
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciTUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian
Lebih terperinciCSS. 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
Lebih terperinciMembuat FTP di Windows Server 2003
Membuat FTP di Windows Server 2003 Oleh : Ari Nugroho FTP merupakan protokol aplikasi pada lingkungan TCP/IP yang berfungsi untuk mentransfer file antar jaringan seperti yang terdapat pada internet. Dengan
Lebih terperinciLink Categories, digunakan untuk mengelompokkan link ke dalam kategorikategori
Panduan Dasar Membuat Website Menggunakan Wordpress WordPress Dashboard (Admin) 1. Untuk login ke halaman admin, ketik: wp-admin atau wp-login.php di belakang alamat domain Anda. Contoh feddy.staff.telkomuniversity.ac.id/wp-admin.
Lebih terperinciTutorial Membuat Blog Menggunakan Layanan WORDPRESS
Tutorial Membuat Blog Menggunakan Layanan WORDPRESS MENDAFTAR DI WORDPRESS WordPress ialah platform penerbitan pribadi yang semantik, yang berfokus kepada estetika, standar web, dan kegunaan. WordPress
Lebih terperinciMODUL 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
Lebih terperinciCara Upload Website Ke Internet
Cara Upload Website Ke Internet Halo :). kali ini saya akan berbagi tentang cara upload website agar website yang kita buat dapat di akses online melalui internet. diantara teman teman ada yang masih bingung,
Lebih terperinciUPT PERPUSTAKAAN UNIVERSITAS SYIAH KUALA
UPT PERPUSTAKAAN UNIVERSITAS SYIAH KUALA INSTRUKSI KERJA TATA CARA SETTING VPN (VIRTUAL PRIVATE NETWORK) NO. IK- PP 11-04 Dibuat Oleh Diperiksa Oleh Disetujui Oleh Aisyiah, S.E Charlis Siana Rosita, S.Sos.
Lebih terperinciPemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Lebih terperinciMembuat Web Pribadi dengan biaya Rp. 0,- (Domain Pribadi, Web Host, E-Mail Forwarding, Sub Domain, MySQL 5 Database, FTP, CPanel)
Membuat Web Pribadi dengan biaya Rp. 0,- (Domain Pribadi, Web Host, E-Mail Forwarding, Sub Domain, MySQL 5 Database, FTP, CPanel) Langkah-Langkah 1. Membuat e-mail 2. Membuat domain 3. Webhost (andri@heryandi.net)
Lebih terperinci6. 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
Lebih terperinciMengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency
Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
Lebih terperinciDAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...
DAFTAR ISI COVER DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN... 3 1.1 Latar Belakang... 3 1.2 Rumusan Masalah... 3 1.3 Tujuannya... 3 BAB II PEMBAHASAN... 4 2.1 Pengertian CSS... 4 2.2 Format
Lebih terperinciTAKEN FROM ROSIHANARI.NET
TAKEN FROM ROSIHANARI.NET Pendahuluan CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat
Lebih terperinciCara 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 : -
Lebih terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Lebih terperinciMoh Sulhan Apa itu Hosting? Lisensi Dokumen:
Hosting Gratis Moh Sulhan sulhan@supportindo.com alan2net@yahoo.co.id Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
Lebih terperinciBAB 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
Lebih terperinciBAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1 Pengertian Perancangan Perancangan adalah proses merencanakan segala sesuatu terlebih dahulu. Perancangan merupakan penggambaran, perencanaan, pembuatan sketsa dari beberapa elemen
Lebih terperinci