Pengenalan Dasar Web
Fadlika Dita Nurjanto
Upgrading KOMINFO FTI
BEM FTI ITS 2013
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
:
fadlikadn@gmail.com

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 
Be Carefull!
Rileks, Santai, Fokus
Apa itu WWW, Website??
Seberapa penting website untuk organisasi
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
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
web 1.0

web 1.0
teknologi awal website. server berperan sebagai pembari informasi,
client berperan sebagai pembaca. bahasa yang digunakan HTML

web 2.0

web 2.0

web 3.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.
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

Jenis-jenis Website
Contoh Website
news
detiknews, kompas, BBC, reuters

social network
facebook, twitter, tumblr, wordpress, blogger

forum
kaskus, indowebster, detik forum

e-commerce
tokobagus, berniaga, zalora, bhinneka.com

search engine
google, bing, yahoo
Contoh Website (2)
Archive
Wikipedia, Google Groups, dll

Blog
Blogspot, Wordpress, Tumblr, dll

Corporate Website
Website ITS, BUMN, Perbankan, dll
Komponen Penyusun Website

web browser

database server

web server

web editor

image editor
Unsur-Unsur Website

.com, .org, .or.id, .co.id, .net

Domain

jagoanhosting, idwebhost, dll

http://................................. .com

Hosting

HTML, CSS,
Javascript

Hosting

HTML, CSS, HTML 5, CSS 3, jQuery

Desain & Scripting
Teknologi Web

HTML
CSS
Javascript

XML

CMS

WEBGL

PHP

HTML 5

JSON

CSS 3

ASP.NET
SQL
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.
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.
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.
Relasi antara HTML dan CSS
HTML

CSS
fontcolor : white
backcolor : blue
textweight : bold
width : 100px
weight : 40px
font-family : calibri

element
width

height
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
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 websitewebsite 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.
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.
Demo Wordpress
Referensi Belajar

W3Schools : http://www.w3schools.com
Wordpress : http://www.wordpress.org
IlmuKomputer : http://www.ilmukomputer.org
Dan banyak lagi..
Facebook : Fadlika Dita Nurjanto
Twitter
: @fadlikadn
Blog
: fadlikadn.wordpress.com

Sekian, Terima Kasih

Pengenalan Dasar Web

  • 2.
    Pengenalan Dasar Web FadlikaDita Nurjanto Upgrading KOMINFO FTI BEM FTI ITS 2013
  • 3.
    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 : fadlikadn@gmail.com 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 
  • 4.
  • 5.
    Apa itu WWW,Website?? Seberapa penting website untuk organisasi
  • 6.
    www (world wideweb) 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
  • 7.
    1991 situs web pertama diluncurkan 1993 wwwdapat digunakan oleh setiap orang 1994 W3C (World Wide Web Consortium) didirikan 2003 web 2.0 2010 web 3.0 sejarah website
  • 8.
    web 1.0 web 1.0 teknologiawal website. server berperan sebagai pembari informasi, client berperan sebagai pembaca. bahasa yang digunakan HTML web 2.0 web 2.0 web 3.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.
  • 9.
    website statis website dinamis front-endonly 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 Jenis-jenis Website
  • 10.
    Contoh Website news detiknews, kompas,BBC, reuters social network facebook, twitter, tumblr, wordpress, blogger forum kaskus, indowebster, detik forum e-commerce tokobagus, berniaga, zalora, bhinneka.com search engine google, bing, yahoo
  • 11.
    Contoh Website (2) Archive Wikipedia,Google Groups, dll Blog Blogspot, Wordpress, Tumblr, dll Corporate Website Website ITS, BUMN, Perbankan, dll
  • 12.
    Komponen Penyusun Website webbrowser database server web server web editor image editor
  • 13.
    Unsur-Unsur Website .com, .org,.or.id, .co.id, .net Domain jagoanhosting, idwebhost, dll http://................................. .com Hosting HTML, CSS, Javascript Hosting HTML, CSS, HTML 5, CSS 3, jQuery Desain & Scripting
  • 14.
  • 15.
    HTML HTML adalah singkatandari 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.
  • 16.
    CSS CSS adalah singkatandari 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.
  • 17.
    Javascript JavaScript adalah bahasapemrograman 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.
  • 18.
    Relasi antara HTMLdan CSS HTML CSS fontcolor : white backcolor : blue textweight : bold width : 100px weight : 40px font-family : calibri element width height
  • 19.
    CMS CMS (Content ManagementSystem) 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
  • 20.
    WordPress WordPress adalah sebuahperangkat 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 websitewebsite 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.
  • 21.
    Langkah-langkah membangun website yang interaktif - Tentukantujuan 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.
  • 22.
  • 23.
    Referensi Belajar W3Schools :http://www.w3schools.com Wordpress : http://www.wordpress.org IlmuKomputer : http://www.ilmukomputer.org Dan banyak lagi..
  • 24.
    Facebook : FadlikaDita Nurjanto Twitter : @fadlikadn Blog : fadlikadn.wordpress.com Sekian, Terima Kasih