Pengenalan Dasar Web
-
Upload
fadlika-dita-nurjanto -
Category
Documents
-
view
987 -
download
1
description
Transcript of Pengenalan Dasar Web
![Page 1: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/1.jpg)
![Page 2: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/2.jpg)
Pengenalan Dasar Web
Fadlika Dita Nurjanto Upgrading KOMINFO FTI BEM FTI ITS 2013
![Page 3: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/3.jpg)
Biodata Nama : Fadlika Dita Nurjanto TTL : Wonosobo, 9 November 1991 Riwayat Pendidikan:
SD Negeri 2 Wonosobo SMP Negeri 2 Wonosobo SMK Negeri 1 Wonosobo Teknik Informatika ITS 2010
Hobi : Membaca, Berenang, Nggowes Email : [email protected]
Pengalaman Organisasi Staf Ristek HMTC ITS 2011-2012 Staf Bisnis Kopma dr.Angka ITS 2011-2012 Kadep Humas KMI (Keluarga Muslim Informatika ITS) 2012-2013 Asisten Direktur Humas Kopma dr.Angka ITS 2012-2013 Microsoft Student Partner ITS Periode 2012-2013 Koordinator Administrator Laboratorium RPL, Teknik Informatika ITS 2013-sekarang
Motto : Keberuntungan merupakan pertemuan dari kesempatan dan persiapan, bismillah
![Page 4: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/4.jpg)
Be Carefull!
Rileks, Santai, Fokus
![Page 5: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/5.jpg)
Apa itu WWW, Website??
Seberapa penting website untuk organisasi
![Page 6: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/6.jpg)
www (world wide web) layanan yang digunakan di internet untuk menyampaikan informasi
dengan dukungan multimedia berupa teks, gambar, video dan suara.
website kumpulan halaman dari halaman situs, terangkum
dalam sebuah domain yang berada di dalam www
pengertian website
![Page 7: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/7.jpg)
1991 situs web pertama diluncurkan
1993 www dapat digunakan oleh setiap orang
1994 W3C (World Wide Web Consortium) didirikan
2003 web 2.0
2010 web 3.0
sejarah website
![Page 8: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/8.jpg)
web 1.0
web 2.0
web 3.0
web 1.0 teknologi awal website. server berperan sebagai pembari informasi, client berperan sebagai pembaca. bahasa yang digunakan HTML
web 2.0 the web as platform. pemanfaatan web sebagai sebuah platform aplikasi . harnessing collective intelligence. konten dapat diisi oleh pengguna secara interaktif, contoh youtube. lightweight programming models. pembuatan web menggunakan bahasa yang lebih beragam (html, css, javascript)
web 3.0 the 3D web. mendukung kemampuan visual 3D dan interaksi secara realtime. the media-centric web. photo, audio, dan video menjadi cara lain untuk mencari informasi selain menggunakan keyword.
![Page 9: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/9.jpg)
Jenis-jenis Website
website statis website dinamis
front-end only front-end dan back-end
front-end merupakan halaman website yang dapat diakses oleh pengunjung
back-end biasa disebut CMS (Content Management System), atau disebut juga Administrator Area, Dashboard, dsb
website bersifat statis, konten website tidak dapat diupdate
website bersifat dinamis, di mana administrator dapat mengubah konten dengan leluasa
![Page 10: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/10.jpg)
Contoh Website
news
social network
forum
e-commerce
search engine
detiknews, kompas, BBC, reuters
facebook, twitter, tumblr, wordpress, blogger
kaskus, indowebster, detik forum
tokobagus, berniaga, zalora, bhinneka.com
google, bing, yahoo
![Page 11: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/11.jpg)
Contoh Website (2)
Archive Wikipedia, Google Groups, dll
Blog
Blogspot, Wordpress, Tumblr, dll
Corporate Website
Website ITS, BUMN, Perbankan, dll
![Page 12: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/12.jpg)
Komponen Penyusun Website
web browser web server database server
web editor image editor
![Page 13: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/13.jpg)
Unsur-Unsur Website .com, .org, .or.id, .co.id, .net
http://................................. .com
Ho
sting
HTML, CSS, Javascript
Domain
jagoanhosting, idwebhost, dll
Hosting
HTML, CSS, HTML 5, CSS 3, jQuery
Desain & Scripting
![Page 14: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/14.jpg)
Teknologi Web
HTML
CSS Javascript
CMS
PHP
XML JSON
WEBGL
HTML 5
CSS 3
SQL
ASP.NET
![Page 15: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/15.jpg)
HTML
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
![Page 16: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/16.jpg)
CSS
CSS adalah singkatan dari Casading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konfik style. CSS digunakan untuk mendukung pembuatan website sehingga dapat mempercantik tampilan halaman website.
![Page 17: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/17.jpg)
Javascript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi client. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup.
![Page 18: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/18.jpg)
element
HTML
CSS
fontcolor : white backcolor : blue textweight : bold width : 100px weight : 40px font-family : calibri
width
height
Relasi antara HTML dan CSS
![Page 19: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/19.jpg)
CMS CMS (Content Management System) merupakan perangkat lunak yang memungkinkan seseorang untuk menambahkan dan/atau memanipulasi (mengubah) isi dari suatu situs Web.
Pemanfaatan CMS : - Website perusahaan, bisnis, organisasi atau
komunitas. - Portal - Galeri foto - Aplikasi E-Commerce. - Mengelola website pribadi / blog. - Dan lain-lain
Kelebihan CMS : Waktu pembuatan website cepat, manajemen data mudah, banyak tersedia template dan plugin yang bisa ditambahkan
![Page 20: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/20.jpg)
WordPress WordPress adalah sebuah perangkat lunak blog yang ditulis dalam PHP dan mendukung sistem basis data MySQL. WordPress dibuat oleh pengembangnya sebagai perangkat lunak weblogging atau blogging. Tetapi seiring perkembangannya, WordPress banyak digunakan sebagai engine utama dalam website-website perusahaan dan organisasi di dunia. WordPress memiliki banyak modul yang bisa ditambahkan, seperti desain template dan plugin yang dikembangkan oleh banyak komunitas. Desain template dan plugin yang ditawarkan beragam, dari yang free sampai yang berharga ratusan dolar.
![Page 21: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/21.jpg)
Langkah-langkah membangun website yang interaktif
- Tentukan tujuan website - Tentukan sasaran target pengunjung website - Rancang Sitemap Website - Siapkan Content Website (gambar, artikel,
identitas website, motto, disesuaikan dengan sitemap)
- Tentukan teknologi website (CMS, Framework, bahasa pemrograman, database, dll)
- Tentukan alamat website (domain). Pemilihan jenis domain, fasilitas, harga, provider domain.
- Tentukan tempat penyimpanan website (hosting). Pemilihan berdasarkan kapasitas (space), bandwith, layanan provider, harga.
![Page 22: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/22.jpg)
Demo Wordpress
![Page 23: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/23.jpg)
Referensi Belajar
W3Schools : http://www.w3schools.com Wordpress : http://www.wordpress.org IlmuKomputer : http://www.ilmukomputer.org Dan banyak lagi..
![Page 24: Pengenalan Dasar Web](https://reader035.fdocument.pub/reader035/viewer/2022081716/5492c03eb47959424d8b46b3/html5/thumbnails/24.jpg)
Sekian, Terima Kasih
Facebook : Fadlika Dita Nurjanto Twitter : @fadlikadn Blog : fadlikadn.wordpress.com