Scribd Logo
Upload

Welcome to Scribd!

  • Modul Web+ 2012

    Uploaded by

    Pacis Irwanto
    12 views35 pages
    cc

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    cc

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views35 pages

    Modul Web+ 2012

    Uploaded by

    Pacis Irwanto
    cc

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 35

    Pelatihan Dasar Membuat

    Website

    L/O/G/O

    Pemateri : PAS
    Private
    PAS Private adalah lembaga
    kursus yang saat ini
    concern pada bidang TIK
    (Teknologi Informasi
    Komunikasi)

    PAS Private berdiri sejak November


    2011
    Kursus yang disajikan :

    a. Pembuatan Website Dinamis (Php+mySQL)


    b. Pembuatan Sistem Informasi Berbasis
    Website (Php+mySQL)
    c. Pembuatan Sistem Informasi Berbasis
    Desktop (VB+SQLServer)
    d. Bisnis Online
    Dolar
    dan
    Rupiah
    GARANSI
    100%,(Meraup
    gag ngerti
    biaya
    kembali
    **
    Internet)
    * teknis gag pada rezeki-nya
    *dari
    Garansi
    secara

    ** Syarat dan ketentuan berlaku

    Sekilas Tentang
    Website
    Website adalah media informasi,
    promosi dan komunikasi yang
    terdiri dari halaman-halaman yang
    disediakan melalui jalur internet.
    ex :
    http://tif.uin-suska.ac.id/
    http://umjm.uin-suska.ac.id/

    Secara Umum Website


    Terbagi 2, yaitu :

    Statis
    Dinamis

    Statis
    (tetap)
    Sesuai
    dengan perngertiannya website statis

    merupakan website yang isi halaman nya tetap/tidak


    berubah ubah.
    Pada website statis hanya terdapat halaman
    pengunjung.
    Cukup dengan script HTML dan CSS, kita dapat
    membuat website statis.

    Dinamis
    Website yang dinamis merupakan
    (berubah-ubah)
    halamannya
    berubah ubah.

    web yang isi

    Contohnya facebook dimana isi dari beranda


    facebook setiap waktu akan berubah. Web
    dinamis memerlukan database untuk menyimpan
    data. Berbeda dengan web statis yang tidak
    memerlukan database untuk menyimpan data.
    Salah satu bahasa pemrograman yang dapat
    digunakan dalam membangun website dinamis
    yaitu Php dan database mySQL, agar dapat
    ditampikan kepada pengguna maka dibutuhkan
    script HTML dan CSS.

    Gambaran Website Statis &


    Dinamis
    Website
    Statis

    Website Dinamis

    Secara Umum Website


    Terbagi 2, yaitu :
    Statis

    Dinamis

    Halaman Tetap

    Halaman Berubah-Ubah

    HTML dan CSS

    Php, mySQL, HTML


    dan CSS

    Halaman Pengunjung

    Halaman Pengunjung
    Halaman Administrator

    Sekilas HTML
    HTML (Hyper Text Markup Language) adalah
    standar bahasa yang digunakan untuk
    menampilkan dokumen web. Dokumen HTML
    disebut sebagai markup language karena
    mengandung tanda-tanda tertentu yang
    digunakan untuk menentukan tampilan suatu
    teks dalam suatu dokumen dan tanda-tanda
    atau kode tersebut di kenal dengan TAG.

    DEMO HTML I
    Struktur HTML
    Buat file HTML dengan nama latihan.html
    <HTML>
    <HEAD>
    <TITLE>Wisata Riau 2012</TITLE>
    </HEAD>
    <BODY>
    Pusat Informasi Wisata Riau 2012
    </BODY>
    </HTML>

    DEMO HTML II
    Aplikatif Dasar
    HTML
    Menggunakan Font Judul (H1-H6)
    Wisata <h4>Pusat Informasi Riau
    2012</h4>

    Lanj. DEMO HTML


    II
    Membuat link pada website
    <a
    href="http://www.facebook.com">Facebook</a>

    Lanj. DEMO HTML II


    Memasukkan gambar pada website
    <img src="danaubuatan.jpg" height="130"
    width="110" />

    Lanj. DEMO HTML II


    Membuat list menu pada website
    <ul>
    <li>Beranda</li>
    <li>Katalog Wisata</li>
    <li>Hubungi Kami</li>
    </ul>

    Sekilas CSS
    Cascading Style Sheets (CSS) merupakan suatu
    teknologi yang digunakan untuk memperindah
    tampilan halaman situs web dan aplikasi yang
    berbasis web.

    DEMO CSS
    Struktur dasar CSS
    Buat file CSS dengan nama tampilan.css
    .merah {
    color: red;
    }

    DEMO HTML &


    CSS

    <HTML>
    <HEAD>
    <TITLE>Wisata Riau 2012</TITLE>
    <link rel="stylesheet" type="text/css" href= "tampilan.css" >
    </HEAD>
    <BODY>
    <h4>Pusat Informasi Wisata Riau 2012</h4>
    <div class ="merah">Menilik Wisata di Penjuru
    Riau</div>
    </BODY>
    </HTML>

    DEMO PEMBUATAN WEBSITE


    1. Buat folder baru ex : rajasyahroni
    2. Copy semua file gambar ke dalam folder yang
    dibuat.
    3. Buat file CSS dengan nama tampilan.css
    4. Buat file HTML dengan nama webku.html

    tampilan.css
    #wrap
    }

    webku.html
    HEADER

    <div id=header></div>

    #header{
    }
    #sidebar-kiri {
    }

    CONTENT

    <div=content></div>

    #content {
    }
    #footer {
    }

    FOOTER

    <div id=footer></div>

    LANGKAH PERTAMA :
    tampilan.css
    #wrap {
    margin : auto;
    width : 900px;
    border:1px solid #ccc;
    -border-radius:4px 4px 4px 4px;
    -box-shadow:0 0 20px #1066b5;
    border-radius:4px 4px 4px 4px;
    box-shadow:0 0 20px #1066b5;

    LANJ. LANGKAH
    PERTAMA
    :
    webku.html
    <HTML>
    <HEAD>
    <TITLE>Wisata Riau
    2012</TITLE>
    </HEAD>
    <BODY>
    <div id ="wrap">
    Ini Wrap
    </div>
    </BODY>
    </HTML>

    LANGKAH KEDUA :
    tampilan.css
    #header{
    backgroundimage:url(header.png);
    width:900px;
    height:124px;
    }

    LANJ. LANGKAH KEDUA :


    webku.html
    <HTML>
    <HEAD>
    <TITLE>Wisata Riau
    2012</TITLE>
    </HEAD>
    <BODY>
    <div id ="wrap">
    <div id ="header"></div>
    </div>
    </BODY>
    </HTML>

    LANGKAH KETIGA :
    tampilan.css
    #sidebar-kiri {
    float:left;
    background-color:#f9e6fe;
    padding:10px 20px 10px 20px;
    width:178px;
    height:auto;
    font-family:Arial;
    font-size:13px;
    }

    LANJ. LANGKAH KETIGA :


    webku.html
    <HTML>
    <HEAD>
    <TITLE>Wisata Riau
    2012</TITLE>
    </HEAD>
    <BODY>
    <div id ="wrap">
    <div id ="header"></div>
    <div id ="sidebarkiri"></div>
    </div>
    </BODY>

    LANGKAH KEEMPAT
    :tampilan.css
    #content {
    float:right;
    background-color:#e6eefb;
    padding:10px 20px 10px 20px;
    width:641px;
    height:auto;
    font-family:Arial;
    font-size:13px;
    border-left:1px solid #ccc;
    }

    LANJ. LANGKAH
    KEEMPAT
    :
    webku.html

    <HTML>
    <HEAD>
    <TITLE>Wisata Riau
    2012</TITLE>
    </HEAD>
    <BODY>
    <div id ="wrap">
    <div id ="header"></div>
    <div id = "sidebarkiri"></div>
    <div id =
    "content"></div>
    </div>
    </BODY>

    LANGKAH KELIMA :
    tampilan.css
    #footer {
    clear:both;
    background-image:url(footer.png);
    height:65px;
    width:900px;
    font-family: Tahoma;
    font-size:12px;
    color:#fff;
    text-align:center;
    }

    LANJ. LANGKAH KELIMA :


    webku.html

    <HTML>
    <HEAD>
    <TITLE>Wisata Riau
    2012</TITLE>
    </HEAD>
    <BODY>
    <div id ="wrap">
    <div id ="header"></div>
    <div id ="sidebarkiri"></div>
    <div id
    ="content"></div>
    <div id ="footer"></div>
    </div>

    FINISHING
    1. Buka folder Modul/isi, blok semua isi
    dari css tambahan.txt lalu copy
    paste-kan ke dalam tampilan.css.
    2. Buka folder Modul/isi, blok semua isi
    dari sidebar-kiri.txt lalu copy
    paste-kan ke dalam <div id
    ="sidebar-kiri"></div>.

    LANJ.
    FINISHING

    3. Buka folder Modul/isi, blok semua isi


    dari content.txt lalu copy paste-kan
    ke dalam <div id
    ="content"></div>.
    4. Buka folder Modul/isi, blok semua isi
    dari footer.txt lalu copy paste-kan ke
    dalam <div id ="footer"></div>.

    LANJ.
    FINISHING

    5. Buka folder Web, copy folder js lalu


    paste ke dalam folder yang telah dibuat
    tadi.
    6. Buka folder Modul/isi, blok semua isi dari
    jquery-equal.txt lalu copy paste-kan
    ke dalam tag <head></head>.

    Selesai
    Terima Kasih

    L/O/G/O

    You might also like