Web

586 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
586
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web

  1. 1. WEB Nama : Ayu Setiani Mayzaroh Kelas : X Multimedia 2 E-mail : Ayu.setiani15@yahoo.co.id Blogger : Setianiayu.blogspot.com
  2. 2. Mengelola Isi Halaman Web1. Adobe Image Reader2. Macromedia Dreamweaver3. Macromedia Fireworks4. Minrosoft frontpage5. Dan lain sebagainya• Mengenal macromedia dreamweaver MXMacromedia dreamweaver yang merupakan salahsatu software web desain terpopuler dipilih sebagaisebagai software web desain yang akan digunakandalam proses pemelajaran ini.
  3. 3. Mengelola Isi Halaman WebMacromedia dreamweaver dipilih karenakompatibilitas dan dukungan terhadap berbagaibahasa program web, antara lain; ASP,JSP, CFM,ASP.NET, PHP, JAVASCRIP, CSS DAN YML. Memeriksa informasi untuk relevansi dancurrency windows dreamwaever MX ini dibagimenjadi 7 bagian yaitu, ;
  4. 4. Mengelola Isi Halaman Web1. Insert bar,2. Document toolbar,3. Document window,4. Panel groups,5. Tag selector,6. Property inspector7. Files panel
  5. 5. Mengelola Isi Halaman Web• HTMLHTML yang merupakan kepanjangan dari hyper text markup language memiliki fungsi untuk memformat dokomenteks biasa agar bisa digunakan pada world wide web(www). HTML bukan merupakan suatu bahasapemrograman, karena sifatnnya yang hanya memberikantanda (marking up) pada suatu dokumen teks dan bukansebagai program.Struktur dasar dokumen HTML berisi elemen-elemen atautag seperti pada gambar berikut.Keterangan;• <html> </html> ; mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
  6. 6. Mengelola Isi Halaman Web• <head> </head> ; mendefinisikan head dalam sebuah file HTML.• <title> </title> ; mendefinisikan judul yang hendak ditampilkan pada browser.• <body> </body> ; mendefinisikan teks beserta formatnnya yang hendak ditampilkan sebagai isi halaman web.
  7. 7. Mengelola Isi Halaman Web• Format teks dasar dalam HTML ;Heading, HTML mengenal 6 level heading, mulai I(terbesar) sampai 6. Heading ditampilkan denganfont lebih besar dan tebl daripada teks normal.PARAGRAF, setiap ada paragraf baru diawali dengan<p>.LIST,HTML mendukung daftar (list) tidak bernomordan devinisi.PERFORMATTED teks, dalam html , spasi tab danbaris baru (enter) tidak memiliki pengaruh.
  8. 8. Mengelola Isi Halaman WebEXTENDED QUOTATIONS, untuk membuatkutipan panjang sehingga hasilnnya menjorokkedalam digunakan tag (blockquote).GANTI BARIS (line break), untuk menulis alamatsurat dengan baris-baris pendek, tidak bagusjika menggunakan tag <p> (spasi terlalu besar).GARIS DATAR (horizontal rule), untuk membuatgaris horizontal yang digunakan untukmembatasi bagian-bagian digunakan tag <hr>.Memformat karakter,
  9. 9. Mengelola Isi Halaman Webb atau < strong> untuk membuat teks bold.i atau <em> untuk membuat teks italic.tt atau < code> untuk membuat teks typewriter.Dasar link HTMLHyperlink merupakan sesuatu yang sangat pentingdi website, sebab hyperlink akan menghubungkanantara satu halaman dengan halaman lainnya baikdalam satu website maupun antar website.Untuk membuat hyperlink digunakan tag <a>.Huruf a artinya “anchor”. Tag <a> biasannya diikutiatribut “href” dimana nilai dari atribut inimerupakan alamat halaman yang akan dituju.
  10. 10. Mengelola Isi Halaman Web• Macam-macam link1. Relative dan Absolute link, link kesuatu dokomenpada direktori lain dapat dibuat dengan menentukanrelative path dari posisi dokumen asal berada. Inidisebut sebagai relative link.A href =”harga/index.html”>daftar harga <a/>Alamat (URL) dokumen secara lengkap (absolutepath) dapat digunakan untuk menentukan tujuan link,disebut link absolute ;A href=http://gmail.google.com>E-mail google </a>
  11. 11. Mengelola Isi Halaman Web2. Link kesuatu bagian di dokument lain,misalnya :Satu html dilink kesuatu bagian di dua.html,caranya adalah :Pada dokumen satu.html, dituliskan :<a href=”dua.htm#BT> Tiga </a>Pada bagian yang dituju, dituliskan :<a name=”BT”Tiga </a>
  12. 12. Mengelola Isi Halaman Web3. Link ke suatu bagian di dokument yangsama, carannya hampir sama denganlangkah di atas :Pada dokumen satu.html, dituliskan :<a name =”BT”> Tiga </a>Pada bagian yang dituju, dituliskan :<a name =”BT”>Tiga </a>
  13. 13. Mengelola Isi Halaman Web4. Mailto, link yang langsung menuju ke alamat e-mail.<a href=mailto:saya@gmail.com?subject=masukga?>Kirim E-mail </a> Menyiaipkan GambarAtribut ukuran gambar, bila tidak dituliskan, makaukuran gambar sesuai ukuran aslinnya. Namunukuran gambar bisa dibuat dengan nilai tertentudengan cara menuliskan atribut height dan widht.
  14. 14. Mengelola Isi Halaman WebMembuat TabelTabel merupakan cara untuk menampilkaninformasi dalam bentuk sel yang terdiri darikolom dan baris.Membuat FrameFrme HTML digunakan untuk membuat tampilanHTML yang terbagi menjadi beberapa bagian dimana setiap bagiannya merupakan satu halamanHTML yang terpisah.
  15. 15. Mengelola Isi Halaman WebMembuat FromForm merupakan elemen HTML yang berupablanko (form) yang dipergunakan untuk menjaringinformasi dari penggunaMacam-macam form :Input, dengan tipe :1. Texs, password, checkbox, radio button, reset,submit dan hidden.2. Text area.3. Select.
  16. 16. Memahami Prinsip-Prinsip Dasar Web1. Pengertian desain web Desain web adalah seni dan proses dalammenciptakan halaman web tunggalatau keseluruhandan bisa melibatkan estetika dan seluk belukmekanis dari suatu operasi situs web walaupun yangutama memutuskan pada cook dan feel dari situsweb tersebut sebagian dari aspek yang mungkintercangkup pada desain web/ produksi web adalahmenciptakan animasi dan grafis, pemilihan warna,pemilihan font, desain navigasi menciptakan isiHTML/XML authoring
  17. 17. Memahami Prinsip-Prinsip Dasar Webjava script programming dan pengembangaan e-cammerce. Desainer web adalah orang yang bertugasmendesain halaman web tugas desainer websecara umum adalah menentukan look dan peelsebuah situs web. Secara garis besar seorangdesainer web yang baik harus mampumemahami seni, program dan aspek elemenyang ada pada web.
  18. 18. Memahami Prinsip-Prinsip Dasar Web Secara garis besar penciptaan desain webdidasarkan pada 3 hal yakni estetika, mood,content. Estetika berhubungan dengankeindahan, warna, font, corak, kesesuaianproduk dengan keserasian gambar . Tipografidan navigasi mood merupakan pengesananatau pemberian pesan pada pengunjungmengenai perasaan dari situs tersebut,tampilan situs bisa membawa
  19. 19. Memahami Prinsip-Prinsip Dasar Webkemasa lalu, masa kini atau masa mendatang ,juga bisa membawa rasa sedih, gembira, simpatidan lain lain. Beberapa element yangmengekpresikan mood ditampilkan melaluiwarna, teks, layout, gambar grafis, dan efekpendukung lain. Konten meliputi isi halamanweb yang lengkap, menarik one stop visiting. Halyang berkaitan dengan kokten misalnnya webmemiliki situs download, chatting, searching,menu member registrasi dan info lainnya yangdibutuhkan..
  20. 20. Tujuan Membuat Websait• Dalam membuat sebuah website ada beberapa hal yang perlu anda persiapkan sebelum anda memulainya. Pertama : anda bisa mengajukan sebuahpertanyaan kepada diri anda sendiri yaitu “apatujuan saya membuat website?” denganmenjawab!
  21. 21. • Perlu anda ketahui, jenis jenis website itu bermacam macam.• Ada yang hanya satu halaman seperti website perusahaan. Ada yang menggunakan sistem blog dan sering disebut juga blog atau web blog, ada yang menggunakan Cms (content management system) seperti joomla, ada yang berupa forum ada yang berupa forum diskusi, ada yang berupa website iklan baris, ada yang berupa website toko online dan yang lebih kompleks lagi seperti website komunitas friendster.
  22. 22. Website adalah salah satu alat komunikasiyang efektif untuk memperkenalkanperusahaan/ produk dan berkomunikasi denganpelanggan.
  23. 23. Untuk membuat website ada tiga bagian utama yang perlu anda pahami yaitu: Domainadalah nama/alamat dari sebuah website.diinternet setiap orang harus mengetikan sebuahnama domain untuk bisa membuka danmembaca isi dari sebuah website. Dalam halini, peranan pemilihan nama domain cukuppenting untuk membedakan website andadengan website orang lain.
  24. 24. • Domain ini telah terdiri dari nama domain dan extension. Contoh blogbisnisinternet.com.• Blogbisnisinternet adalah nama domain dan com adalah extensionnya. Extension biasanya mewakili untuk kategori tertentu seperti : (.com) untuk keperluan komersial; (.net) untuk keperluan jaringan; (.org)unutk keperluan website nonkomersial dan lain lain.
  25. 25. Extension• Bermacam macam, bisa berupa TLD (Top Level Domain) seperti (.com;.net;.org) atau ada juga yang berupa CTLD (Country Top Level Domain) seperti (.co;.id;.co.cc) dimana id mewakili domain negara indonesia.• Untuk memilih nama domain anda bisa menggunakan website yang menyediakan jasa registrasi, nama domain atau dengan menggunakan software domain tools untuk membantu memilih nama domain untuk websita anda.
  26. 26. • Bila anda meenggunakan website yang menyediakan jasa registrasi nama domain. Contohnya domianhostingmurah.net , anda tinggal masukkan nama domain yang anda sukai untuk mengecek apakah masih tersedia atau tidak.• anda buka : http://www.domainhosting murah.net/ dan masukkan nama domain.
  27. 27. 4. Anda bisa menggunakan tanda (-) bila andamau5.Usahakan pilih domain (.com)6.Anda bisa mengikuti sertakan keywarddalam nama domain anda untukmembantu proses SEO (Search EngineOptimization) agar website anda tampil disearch engine dengan posisi lebih atas.
  28. 28. Tips memilih nama domain antara lain :1. Pilih nama domain yang simpel dan mudah diingat.2. Pilih nama domain yang sesuai dengan mewakili isidan tujuan dari website anda. Untuk mempermudahorang mengingat nama domain atau alamat website andanantinya.3. Bila ada menggunakan nama domain yang panjang.Usahakan menggunakan nama domain/alamat websiteanda nantinya yang panjang. Usahakan menggunakannama domain yang berisi kata-kata umum sehinggamenghindari untuk kesalahan nama domain.
  29. 29. Hostingadalah tempat anda meletakkan file filewebsite anda disebuah server yangterhubung dengan jaringan internet, jadiagar website anda bisa ditampilkan, makafile file website perlu anda simpan disebuah server hosting,anda perlu membelipaket hosting.
  30. 30. Dalam memilih paket hosting, adabeberapa hal yang perlu diperhatikan,yaitu• Sistem server yang digunakan,apakah linux atau windows. Hal iniakan menentukan software dan bahasa pemograman website yang bisa digunakan,kebanyakan orang menggunakan linux,anda pilih linux saja.• Besar disk space yang diberikan. Disk space adalah kapasitas pada server hosting yang diberikan untuk anda untuk menyimpan file-file anda di komputer. Tentunya pilihan terbaik adalah paket hosting yang sesuai dengan kebutuhan anda.
  31. 31. Besaran bandwith yang di berikan, bandwithadalah kapasitas akses perbulan diberikanuntuk mengakses website anda setiap orangyang membuka website atau mendownload filedari website anda agar bisa ditampilkan padabrowser firefox atau internet eksprolenya akanmendownload file anda, hal tersebut akanmemakan bandwith. Dan kappasitaspemakaian bandwith ini akan diseret setiapawal bulan.
  32. 32. • Domain allowed jumlah domain yang bisa digunakan dalam sebuah paket hosting, anda bisa menggunakan satu bulan paket hosting untuk semua domain anda, bila paket hosting untuk semua domain, anda bisa paket hosting tersebut memberikan akses untuk itu, dan anda juga perlu mempertimbangkan besarnya disk space maupun bandwith yang diberikan, apakah cukup untuk menjelaskan domain domain analog.• Jumlah data base yang diijinkan, contoh untuk linux,berapa banyak jumlah data base maysol yang diijinkan.
  33. 33. Untuk pembelian domain dan hosting ini tidakperlu anda lakukan pada satu buahperusahaan anda bisa membelinya ditempattempat yang berbeda. Yang perlu andalakukan hanyalah menghubungkan antaradomain dan hosting ini dengan melakukansettind DNS (domain name server) padaaccount domain anda mengkoneksi domaindengan hosting.
  34. 34. Anda bisa membeli domain danhosting pada website berikut :Untuk pembelian di Indonesia anda bisa membelimelalui domainhostingmurah.net yangmerupakan sebuah website waralaba dari hostingId web hosting, pembelian melalui websitewaralaba lebih murah dibandingkan pembelianlangsung di Idwebhosting , kurang lebih 8-10%dari harga, fasilitas dan support tetap samadiberikan Idwebhosting
  35. 35. Software websiteBila anda belum tahu software yang akan andagunakan anda bisa googling di internet. Untukmelihat website-website lain yang sudah adadan lihat contoh website yang anda rasa cocoksebagai website yang anda inginkan.
  36. 36. • Anda dapat mengecek pada website yang sudah ada tersebut websitenya menggunakan software apa? Bila website tersebut menggunakan software website open source seperti blog wordpress, joomla, phpbb, dan lain-lainnya.• Tentunya anda bisa membuat website Yang sama. Tetapi harap di ingat yang anda contoh adalah jenis websitenya, buka mencopy tampilan dan isi (content) websitenya, hal tersebut tidak diperbolehkan.
  37. 37. • OPEN SOURCE ADALAH SEBUAH SISTEM BARU DALAM MENDISTRIBUSIKAN PERANGKAT LUNAK KEPADA PENGGUNA DENGAN MEMBERIKAN PROGRAM DAN SOURCE CODENYA SECARA GRAFIS
  38. 38. III.BELAJAR MEMBUAT WEBSITE DENGAN BLOG WORDPRESS• Langkah-langkah belajar membuat website dengan blog wordpress adalah sebagai berikut:• Anda login di cpanel hosting anda, dengan alamat http://domainanda.com/cpanel kemudian masukkan username dan password yang diberikan oleh hosting anda. Pada cpanel hosting anda bisanya sudah tersedia video yang akan memandu anda dalam mengunakan fasilitas di cpanel dengan baik. Lebih baik anda belajar melalui video tersebut.
  39. 39. • Pada cpanel hosting anda, anda klik icon “fantastic”• Kemudian akan ditampilkan daftar software open source yang bisa digunakan fantastico merupakan program yang membantu proses penginstalan software dengan mudah. Hanya dengan mengisi data dan mengikuti langkah- langkah yang sudah disediakan, seperti yang akan dijelaskan dalam tutorial belajar membuat website dengan blog wordpress ini. Anda pilih wordpress.
  40. 40. • Selanjutnya klik “new installation”• Dilanjutkan dengan mengisi data untuk tempat penginstalan blog wordpress. Bila anda ingin menginstal blog wordpress pada directory utama di domainanda.com, anda kosogkan kolom “install in directory” tetap bila anda masukkan nama subdomain folder yang akan digunakan.• Klik “finish installation” untuk menyelesaikan proses penginstalan blog wordpress.
  41. 41. PENGENALAN JOOMLA• Tentang joomla• Joomla adalah sebuah conten management system yang dapat digunakan oleh siapa saja untuk keperluan pembuat website, mulai dari yang sangat sederhana sampai dengan website yang sangat kompleks.
  42. 42. Berikut beberapa jenis website yang dapat di bangun dengan joomla :• Website corporate atau portal (berita)• Website e-commerce (seperti took bagus/berniaga)• Website unutk perusahan kecil• Website Untuk organisasi non-profit (yayasan nnon- profit)• Website Untuk pemerintah• Website untuk keperluan internet• Website untuk sekolah dan perguruan tinggi• Website untuk pribadi/blog• Website untuk komunitas dan portal• Website untuk majalah,Koran,dan tabloid• Dan masih banyak lagi website lainnya.
  43. 43. • Begitu banyak aplikasi yang dapat ditangani oleh joomla. joomla begitu mudah di modifikasi karena joomla memiliki prinsip fleksibel,simple,elegan, costomi zable, dan power full.• Joomla merupakan pengembangan dari open source project mambo, yang dahulu sering disebut sebagai mambo open source/mos. Mambo sebenarnya dikembangkan pada komunitas open source (komunitas pengembangan) sebuah vaviant wcms yang gratis untuk di kembangkan setelah menyerahkannya pada komunitas, mos berkembang dengan baik pada bulan agustus 2005 terjadi perselisihan prinsip anatra pihak komunitas pengembangan mos dengan miro.
  44. 44. Struktur file dan direktori joomlapada bagian ini kata belajar tentang struktur file dan direktori • Struktur file • File yang kita bahas adalah filefile penting yang terletak diroot direktori server joomla yaitu :
  45. 45. Indeks.php merupakan file utama untukmenampilkan halaman web joomla. Beberapapengaturan joomla terdapat pada file ini, jikakita mengakses file ini, brarti kita membukahalaman dengan website joomla. Misalnyawww.lintsn.com/index.phpConfiguration.php merupakan file yangterbentukl saat kita melakukan prosesinstalasi joomla. Pada file ini terdapatpengaturan untuk koneksi ke data base danpengaturan penting lainnya. Jika file ini rusak,website joomla tidak akan berfungsi.
  46. 46. • Copy right.php file ini berisi tentang hak cipta website cms joomla, walaupun sebenarnya.• Cense.php file ini berisi informasi tentangg lisensi website cms joomla.• Mainbody.php ini merupakan file pendukung yang sangat penting dalam mengatur tampilan berita diwebsite joomla.• Pathway.php sebuah file yang berfungsi untuk menggambarkan unitan proses aplikasi yang ada di joomla.

×