Scribd Logo
Unggah

Selamat datang di Scribd!

  • (RW) Modul 1 - Membuat Tema

    Diunggah oleh

    Nizat Dochi Dorkzilla
    9 tayangan4 halaman
    rweb

    Judul Asli

    [Rw] Modul 1 - Membuat Tema

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    rweb

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    9 tayangan4 halaman

    (RW) Modul 1 - Membuat Tema

    Diunggah oleh

    Nizat Dochi Dorkzilla
    rweb

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Rekayasa Web | 2014

    MODUL REKAYASA WEB


    Praktikum 1 : MEMBUAT TEMA
    1.1

    Dasar Teori
    1. Pemahaman dan Pengolahan Tema/Template Aplikasi Web
    2. Pemahaman dan Manajemen Folder dan Nama File dalam Aplikasi Web
    3. Penjelasan tentang HTML
    4. Penjelasan tentang CSS
    5. Pemahaman dan Pengolahan struktur HTML
    6. Pemahaman dan Pengolahan Style CSS
    7. Penjelasan perintah untuk memanggil Style CSS dari File HTML
    Syntax : <link rel="stylesheet" type="text/css" href="file_css" />

    8. Penjelasan Tag HTML dan CSS


    Syntax : <div>Isi</div>

    1.2

    Tujuan
    Agar mahasiswa mengerti tentang Pengolahan Tema untuk Aplikasi Web

    1.3

    Outcome
    1. Mahasiswa memahami fungsi Tema Aplikasi Web
    2. Mahasiswa mampu membuat Tema dengan HTML dan CSS dengan struktrur baik
    3. Mahasiswa mampu melakukan manajemen Folder dan Nama File dengan baik
    4. Mahasiswa memahami perintah untuk pemanggilan File CSS
    5. Mahasiswa memahami perintah tag div dalam HTML dan CSS

    1.4

    Bahan Praktikum
    1. Buat Folder dengan nama delapan digit angka belakang NIM kalian masing-masing
    (tanpa spasi). Contoh -> 11013000
    2. Buka Tools Komodo Edit dan Buka Folder Nim Kalian dari Komodo Edit.
    Dengan Cara tekan logo
    kemudian pilih Open Directory.

    3. Kemudian siapkan Folder-Folder bernama admin, config, css, js, masterpages dan
    public. Dengan cara Klik Kanan diarea kosong di bawah Folder NIM kemudian pilih
    New Folder dan berilah nama sesuai dengan yang ditentukan.

    Rekayasa Web | 2014

    Sehinga akan menciptakan struktur folder seperti dibawah ini.

    Gambar Sktruktur Folder


    4. Buat File tema.php sejajar dengan folder diatas dengan cara Klik Kanan diarea kosong
    dibawah folder dan pilih New File.

    Dan isi dengan kode berikut :


    tema.php
    <!DOCTYPE html>
    <html>
    <head>
    <title>Layout Web</title>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><center>Website Pribadi<center></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="beranda.html">Beranda</a></li>
    <li><a href="riwayat.html">Riwayat Hidup</a></li>
    <li><a href="keahlian.html">Keahlian Komputer</a></li>
    <li><a href="kontak.html">Kontak</a></li>
    <li><a href="jejaring.html">Jejaring</a></li>
    </ul>
    </div>
    <div id="content">
    <h2>
    Hallo semua :)
    </h2>
    <p>
    Nama saya adalah Mark Zuckerberg. Saya adalah seorang
    programmer komputer dan pengusaha Internet.
    Saya dikenal karena menciptakan situs jejaring sosial
    Facebook bersama teman saya, yang dengan itu saya menjadi pejabat eksekutif
    dan presiden.
    </p>
    <p>
    Facebook didirikan sebagai perusahaan swasta pada tahun
    2004 bersama teman saya Dustin Moskovitz, Eduardo Saverin, dan Chris Hughes
    ketika menjadi mahasiswa di Universitas Harvard.
    Pada tahun 2010, saya terpilih sebagai Person of the
    Year versi majalah Time.
    Pada 2011, kekayaan saya ditaksir mencapai $17,55
    miliar.
    </p>
    </div>
    <div id="footer">
    <center>Copyright &copy; Website Pribadi 2014</center>
    </div>
    </div>
    </body>
    </html>

    Rekayasa Web | 2014

    5. Buat File External CSS di dalam Folder CSS bernama style.css dan isi dengan kode
    berikut :
    style.css
    body{background-color: #efefef; margin:0; padding:0;}
    h3{color: white;}
    #container{margin: 0 auto; width: 80%; background:#fff;}
    #header{background:#e74c3c;width:100%; height: 100px; padding -top:50px;}
    #header h1 { margin: 0; color: white;}
    #navigation {float: left; width: 100%;background:#7f8c8d; height:30px;}
    #navigation ul{margin: 0;padding: 0;}
    #navigation ul li{list-style-type: none;display: inline;}
    #navigation li a{display: block;float: left;padding: 5px
    10px;color:#fff;text-decoration: none;border-right: 1px solid#fff;}
    #navigation li a:hover { background:#efefef; color: #000; }
    #content{clear: left;padding: 20px;}
    #footer{background:#2c3e50;height:40px; color: white;padding-top: 15px;}

    6. Kemudian load atau panggil file CSS di dalam file HTML agar style CSS tersebut
    dapat digunakan di dalam HTML. Cara Pemanggilan CSS dengan cara meletakkan
    kode pemanggilan di dalam tag <head></head> di dalam HTML.
    <hea d>
    <l i nk rel ="s tyl es heet" type="text/cs s " href="cs s /s tyl e.cs s " />
    </hea d>

    Kode lengkap pada tema.php


    <!DOCTYPE html>
    <html>
    <head>
    <title>Layout Web</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><center>Website Pribadi<center></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="beranda.html">Beranda</a></li>
    <li><a href="riwayat.html">Riwayat Hidup</a></li>
    <li><a href="keahlian.html">Keahlian Komputer</a></li>
    <li><a href="kontak.html">Kontak</a></li>
    <li><a href="jejaring.html">Jejaring</a></li>
    </ul>
    </div>
    <div id="content">
    <h2>
    Hallo semua :)
    </h2>
    7.
    <p>
    Nama saya adalah Mark Zuckerberg. Saya adalah seorang
    programmer komputer dan pengusaha Internet.
    Saya dikenal karena menciptakan situs jejaring sosial
    Facebook bersama teman saya, yang dengan itu saya menjadi pejabat eksekutif
    dan presiden.
    </p>
    <p>
    Facebook didirikan sebagai perusahaan swasta pada tahun
    2004 bersama teman saya Dustin Moskovitz, Eduardo Saverin, dan Chris Hughes
    ketika menjadi mahasiswa di Universitas Harvard.
    Pada tahun 2010, saya terpilih sebagai Person of the
    Year versi majalah Time.
    Pada 2011, kekayaan saya ditaksir mencapai $17,55
    miliar.
    </p>
    </div>
    <div id="footer">
    <center>Copyright &copy; Website Pribadi 2014</center>
    </div>
    </div>
    </body>
    </html>

    Rekayasa Web | 2014

    8. Buat File bernama index.php sejajar dengan tema.php kemudian isi dengan kode
    berikut :
    index.php
    <?php
    header("location:tema.php");
    ?>

    Gambar Struktur Folder dan File


    9. Ketik pada browser http://localhost/11013000/

    Gambar Tampilan Aplikasi MyWeb

    Anda mungkin juga menyukai