Scribd Logo
Unggah

Selamat datang di Scribd!

  • Desain Web

    Diunggah oleh

    Amri Malik Fatahilah
    10 tayangan39 halaman
    good

    Judul Asli

    2. Desain Web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    good

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan39 halaman

    Desain Web

    Diunggah oleh

    Amri Malik Fatahilah
    good

    Hak Cipta:

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

    DESAIN WEB

    Octavina Rizky Utami Putri, M.Pd


    DESAIN WEB
    Text Editor Web Browser

    Web Server
    HTML
    Hypertext Markup Language :
    Bahasa untuk mendeskripsikan halaman web

    Elemen pada html direpresentasikan oleh tags


    Start tag Isi Elemen End tag
    <p align=center> Belajar Desain Web </p>
    <br>

    tag atribut value


    Struktur HTML

    Mendeklarasikan web yang


    dibuat.
    Ex: memberi nama halaman
    web <title></title>

    Tempat memberikan perintah-


    perintah yang berhubungan
    dengan tampilan
    Ex: mengatur huruf
    <font></font>
    Background
    WARNA GAMBAR

    <body bgcolor = warna> <body background = gambar>


    Pilihan warna :
    Aqua Yellow Blue Syarat:
    Fuchsia Gray Green 1. Gambar disimpan dalam satu
    Lime Maroon Navy folder dengan file html
    Olive Purple Red 2. gambar diisi dengan
    Silver Teal White namafilegambar.jpg
    dst (jpg/gif/bitmap/dll)

    #FF0000 : merah #00FF00 : hijau #0000FF : biru


    Membuat Heading
    Heading didefinisikan dengan tag <h1> sampai <h6>
    Baris dan Paragraf
    PENGATURAN BARIS PENGATURAN PARAGRAF

    Rata kiri
    Rata tengah
    Rata kanan
    Rata kanan kiri
    Preformat Teks
    COBA & BANDINGKAN!

    Preformat teks
    digunakan untuk
    menampilkan
    teks sesuai
    dengan yang
    ditulis pada
    editor teks
    Pengaturan Font
    Jenis font: arial, times
    new romans, dll

    Ukuran font: Warna font: red, blue,


    1,2,3,4,5, yellow, dll

    <b> </b> : huruf tebal


    <i> </i> : huruf miring
    <mark> </mark> : menandai huruf
    <del> </del> : garis tengah pada huruf
    <ins> </ins> : garis bawah pada huruf
    <sub> </sub> : indeks
    <sup> </sup> : pangkat
    Numbering & Bullets
    Numbering (Ordered List) Bullets (Unordered List)
    Menampilkan Gambar
    Mengatur Menampilkan
    lebar gambar frame gambar

    Menampilkan Mengatur
    file gambar dengan value tinggi gambar
    namagambar.jpg/gif/dll
    TUGAS
    Buat web tentang Profil Anda yang meliputi:
    1. Background warna polos
    2. Memuat gambar/foto
    3. Heading
    4. Numbering/Bullet

    Anda dapat mengkreasikan desain web anda


    sebaik mungkin ^_^

    Gunakan www.w3schools.com untuk


    membantu anda!
    PHP
    Personal Home Page Hypertext Preprocessor
    Membuat PHP
    1. Buka XAMPP
    2. Aktifkan Apache dan MySQL
    3. Buka C/XAMPP/htdocs
    4. Buat folder baru di htdocs
    5. Buat file .php dengan menggunakan notepad++
    6. Simpan file dengan namafile.php (tanpa spasi)
    di folder no 4
    Membuka tampilan PHP
    1. Buka browser (Mozilla/IE/dll)
    2. Ketik localhost/namafolder/namafile.php
    (yang disimpan di htdocs)
    STRUKUR PHP
    <?php Awal tag php Note: huruf
    echo ; Output kapital/bukan
    ?> tidak masalah
    Akhir tag php

    Aturan Dasar php:


    ; Mengakhiri script php
    $ Penamaan suatu variabel
    echo Menampilkan output pada browser
    // Memberi komentar (tidak diproses)
    CONTOH PHP
    <?php
    echo Ayo Latihan Desain Web <br> ;
    echo Desain web sangat menyenangkan ;
    ?>

    <?php
    echo <font color = yellow> Ayo Latihan Desain
    Web </font> ;
    ?>
    VARIABEL
    Karakter yang memiliki suatu nilai
    Contoh
    $panjang = 5; Tentukan manakah penulisan
    variabel yang benar!
    1. $b benar
    karakter nilai
    2. $15 salah
    Syarat: 3. $p2 benar
    1. Diawali $ & diikuti huruf 4. $2t salah
    2. Setelah huruf, 5. $b* salah
    boleh diikuti angka & _ 6. $LEBAR benar
    3. Tandabaca dilarang 7. $B5 benar
    4. $X $ 8. $#C salah
    TIPE DATA
    Integer Double floating
    Data bilangan bulat Data bilangan real
    $p = 5; $IPK = 3.24;
    echo panjang= $p ; echo IPK = $IPK ;

    Tanpa petik dua

    Pakai petik dua


    String
    Data teks
    $nama = Jokowi;
    echo Nama Saya $nama ;
    OPERATOR ARITMATIK

    Misalkan =2 dan =6
    Tentukan

    $a = 2;
    $b = 6;
    $kali = $a * $b;
    echo Hasil kali $a dan $b
    adalah $kali " ;
    OPERATOR RELASIONAL

    Untuk menguji nilai atau


    variabel pada struktur
    operasi sebagai control
    program seperti if-else

    OPERATOR LOGIKA
    Untuk menggabungkan
    kondisi berganda yang
    mengahsilkan ekspresi
    bernilai true/false
    PERNYATAAN KONTROL: if else (2 pilihan)

    FORMAT
    <?php
    $variabel = data; data
    if (syarat) kondisi
    { echo output1 ; }
    Perintah jika sesuai syarat
    else
    { echo output2 ; } Perintah jika tidak sesuai syarat
    ?>
    CONTOH
    <?php
    $nilai = 80;
    if ($nilai >= 70)
    { echo Anda adalah Lulus"; }
    else
    { echo Anda tidak lulus; }
    ?>
    PERNYATAAN KONTROL: if else if (>2 pilihan)

    FORMAT CONTOH
    <?php <?php
    $variabel = data; $nilai = 75;
    if (syarat1) if ($nilai>=75 && $nilai<=100)
    { echo output1 ; } { echo Nilai A ; }
    else if (syarat2) else if ($nilai > 50 && $nilai < 75)
    { echo output2 ; } { echo Nilai B ; }
    else if (syarat3) else if ($nilai >25 && $nilai <=50)
    { echo output3 ; } { echo Nilai C ; }
    --- dst --- else if ($nilai >=0 && $nilai <25)
    else { echo Nilai D ; }
    { echo output tidak else
    sesuai syarat ; } { echo Cek Nilai Anda ; }
    ?> ?>
    PERNYATAAN KONTROL: switch case (>2 pilihan)

    FORMAT
    <?php
    $variabel= data;
    switch ($variabel)
    {case pilihan1: echo output1";break;
    case pilihan2 : echo " output2"; break;
    case pilihan3 : echo " output3"; break;
    ---dst---
    default : echooutput tidak sesuai syarat ";
    break;}
    ?>
    PERNYATAAN KONTROL: switch case (>2 pilihan)

    CONTOH 1
    <?php
    $pilihan = 1;
    switch ($pilihan)
    {case 1 : echo "Menu Utama";break;
    case 2: echo "Menu Kedua"; break;
    case 3: echo "Menu Ketiga"; break;
    case 4: echo "Menu Keempat"; break;
    case 5: echo "Menu Kelima"; break;
    default : echo"Menu tidak tersedia"; break;}
    ?>
    PERNYATAAN KONTROL: switch case (>2 pilihan)

    CONTOH 2
    <?php
    $pilihan = ketiga;
    switch ($pilihan)
    {case pertama": echo "Menu Utama";break;
    case kedua": echo "Menu Kedua"; break;
    case ketiga": echo "Menu Ketiga"; break;
    case keempat": echo "Menu Keempat";
    break;
    case kelima: echo "Menu Kelima"; break;
    default : echo"Menu tidak tersedia"; break;}
    ?>
    PENGULANGAN : for

    FORMAT CONTOH 1
    <?php <?php
    $var=nilaiawal; $a=1;
    for ($var ==1; $var<=n; rumus)
    for ($a ==1; $a<=5; $a=$a+1 )
    { echo "Latihan $a"."<br>";}
    BATAS BATAS RUMUS
    ?>
    AWAL AKHIR PENGULANGAN
    { echo output"."<br>";} CONTOH 2
    ?>
    <?php
    echo "Barisan bilangan ganjil: ";
    $a=1;
    for ($a ==1; $a<=20; $a=$a+2)
    { echo "$a ";}
    ?>
    PENGULANGAN : while
    FORMAT CONTOH 1
    <?php <?php
    $var=nilaiawal; $a=1;
    while ($var<=batas) while ($a<=5)
    BATAS {echo "Latihan $a <br>";
    AKHIR $a=$a+1; }
    ?>
    {echo output <br>"; CONTOH 2
    $a=$a+1; }
    <?php
    ?>
    RUMUS echo "Barisan bilangan ganjil: ";
    PENGULANGAN $a=1;
    while ($a<=15)
    { echo "$a ";
    $a=$a+2;}
    ?>
    TABEL

    FORMAT
    <table border= >
    <tr>
    <td> </td> atau <th> </th>
    <td> </td> atau <th> </th>
    <td> </td> atau <th> </th>
    </tr>
    </table>

    <th> </th> : (table heading) untuk membuat judul tabel, ex: no, nama, dst
    <tr> </tr> : (table row) untuk pindah baris baru
    <td> </td> : (table data) untuk menampilkan data pada setiap kolom
    TABEL

    ATRIBUT TABEL
    height = 500px/50 % tinggi tabel
    width = 500px/50 % lebar tabel
    bgcolor = warna background warna
    background=gambar background gambar
    align = right/center/left aturan paragraf
    valign = top/middle/bottom aturan paragraf
    colspan=banyak kolom yang digabung menggabungkan kolom
    rowspan=banyak baris yang digabung menggabungkan baris
    TABEL
    CONTOH
    <table border= "2" width="50%" height="25%">
    <tr bgcolor="yellow">
    <th> No </th>
    <th> NIM </th>
    <th> Nama </th>
    </tr>
    <tr valign="middle">
    <td> 1 </td>
    <td> 11111 </td>
    <td> Joko Widodo </td>
    </tr>
    <tr valign="middle">
    <td> 2 </td>
    <td> 22222 </td>
    <td> Susilo Bambang Yudhoyono </td>
    </tr>
    </table>
    MENGGABUNGKAN KOLOM
    MENGGABUNGKAN BARIS
    LATIHAN

    <table border= "2" width="50%" height="25%">


    <tr>
    <th rowspan="2"> No </th>
    <th rowspan="2"> Nama </th>
    <th colspan="3"> Nilai </th>
    </tr>
    <tr>
    <th> Tugas </th>
    <th> UTS </th>
    <th> UAS </th>
    </tr>
    <tr>
    <td> 1 </td>
    <td> Joko Widodo </td>
    <td> 90 </td>
    <td> 85 </td>
    <td> 95 </td>
    </tr>
    <tr>
    <td> 2 </td>
    <td> Susilo Bambang Yudhoyono </td>
    <td> 80 </td>
    <td> 85 </td>
    <td> 90 </td>
    </tr>
    FORM

    Metode Aksi yang dilakukan


    pengiriman data jika menekan tombol
    ke post submit

    <form method =post" action = >

    ...

    </form>
    FORM INPUT TEXT
    <input type=text name=/>

    Jenis data Nama


    yang diinput variabel

    FORM INPUT SUBMIT

    <input type=submit value=/>

    Jenis tombol Nama yang ditampilkan


    pada tombol
    CONTOH 1
    SCRIPT CONTOH 1
    menu.php proses.php
    <html> <html>
    <form method="post" action="proses.php"> <form method="post" action="proses.php">
    <pre> <pre>
    Bilangan 1: <input type="text" name="a"/> Bilangan 1: <input type="text" name="a"/>
    Bilangan 2: <input type="text" name="b"/> Bilangan 2: <input type="text" name="b"/>
    <input type="submit" value="JUMLAH"/> <input type="submit" value="JUMLAH"/>
    </pre> </pre>
    </form> </form>
    </html>
    <?php
    $a=$_POST['a'];
    $b=$_POST['b'];
    $jumlah=$a+$b;
    echo "Jumlah $a dan $b adalah $jumlah";
    ?>
    </html>
    CONTOH 2
    SCRIPT CONTOH 2
    menu.php proses.php
    <html> <?php
    <body> $a = $_POST['bil1'];
    <form method="post" action="proses.php"> $b = $_POST['bil2'];
    <pre> $operator = $_POST['operasi'];
    Bilangan 1 : <input type="text" name="bil1"/> if ($operator=="+")
    {echo "Hasil penjumlahan $a dan $b adalah ";
    Bilangan 2 : <input type="text" name="bil2"/> echo $a+$b;}
    else if ($operator=="-")
    <input type="radio" name="operasi" value="+"> {echo "Hasil pengurangan $a dan $b adalah ";
    Penjumlahan echo$a-$b;}
    <input type="radio" name="operasi" value="-"> else if ($operator=="*")
    Pengurangan {echo "Hasil perkalian $a dan $b adalah ";
    <input type="radio" name="operasi" value="*"> echo $a*$b;}
    Perkalian else if ($operator=="/")
    <input type="radio" name="operasi" value="/"> {echo "Hasil pembagian $a dan $b adalah ";
    Pembagian echo $a/$b;}
    else
    <input type="submit" value="HITUNG"/> {echo " ";}
    ?>
    </pre>
    </form>
    </body>
    </html>

    Anda mungkin juga menyukai