Info Belajar HTML-CSS-PHP

Discussion in 'Komputer dan Gadget' started by Sheratan, 19 May 2012.

  1. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Pemrograman Berbasis Web. HTML-CSS-PHP. Tapi yang PHP tunda dulu ya ilmu saya di PHP masih rendah soalnya.

    Apa sih HTML? Apa sih CSS? Apa sih PHP? Cari sendiri aja di wikipedia.

    Pertama-tama kita bicara soal HTML.
    Code:
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>README</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    ...
    </body>
    </html>
    tag <meta*> digunakan untuk mendeklarasikan meta. Berguna untuk memudahkan situs agar diindes oleh website macam google (yang buat search)

    Macam-macam meta:
    Code:
    <meta NAME="description" CONTENT="Akira! - Sumber info Animanga, Game, dan Musik. Buatan K&A." >
    <META NAME="author" CONTENT="Sheratan">
    <META NAME="robots" CONTENT="all">
    <META NAME="Copyright" content="&copy; Akira! 2011.">
    <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en, id">
    Dari situ udah jelas kan fungsi masing-masing meta buat apa?

    kedua adalah <title*>, nah tag ini digunakan untuk memberi judul pada halaman. Sekarang coba buka ini: http://nagatoyuki.komikanimasi.web.id/ Di browser anda, apa judul halaman itu? Taruhan 50 ribu pasti adalah README. :D

    Lalu <*link href="style.css" rel="stylesheet" type="text/css" /> digunakan untuk memanggil CSS. Sebenarnya sih bisa pake tag <*script> tapi itu jelek. Jadi gak rapih. File css, dalam contoh diatas, style.css berada dalam 1 folder yang sama dengan file html. Kalau beda folder ya kasih tahu dimana lokasinya. Kalau dalam folder "css" berarti "css/style.css" kalau namanya "beda" ya ubah juga namanya jadi "beda.css" Mudah kan?

    Semua itu dimasukkan kedalam tag <head*>

    Lalu tag <body*> adalah tag tubuh file html-nya.

    Untuk awal-awal, kopi-paste kode dibawah ini: http://pastebin.com/aVMuq9Hs
     
  2. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Berikutnya kita belajar CSS.

    CSS itu mudah... tinggal bagaimana kita mau bisa baca tag saja.

    Diatas tadi ada tag <*body> kan? Nah kalau di CSS tinggal gunakan
    Code:
    body { blablabla }
    blablabla-nya isi dengan koding yang anda inginkan. Bentuknya? Banyak. Gak hafal. Cari aja. Untuk contoh coba pakai "background:black;" tanpa tanda kutip.

    Cara baca CSS:
    > Semua tag generik html (macam <*body>, <*p>, <*hr>, <*li>) langsung tulis aja tagnya. Contoh:
    Code:
    body { 
    blablabla
     }
    
    p {
    blablabla
    }
    dan sebagainya.

    > Untuk div
    1. id = #
    contoh:
    Code:
    <div id = "test">asd</div>
    itu pakai
    Code:
    #test { asdasd } 
    2. class = .
    contoh:
    Code:
    <div id = "test" class="test2">asd</div>
    itu pakai
    Code:
    .test2 { asdasd } 
    kalau deklarasi global. Apa itu deklarasi global?
    Itu kalau class "test2" dipakai di div ID yang lain
    contoh:
    Code:
    <div id = "test" class="test2">asd</div>
    Code:
    <div id = "asd" class="test2">asd</div>
    Kalau lokal? gampang, deklarasikan div ID sebelumnya:
    Code:
    #test .test2 { xxx } 
    Code:
    #asd .test2 { kkk } 
    maka koding "xxx" hanya aktif di class test2 ID test. class test2 ID asd gak ngaruh. Kita bisa masukin yang lain. Tapi numpuk juga boleh.

    Bentar. Apa beda ID sama class? Gampang. ID>Class. ID diatas class. Class dibawah ID.

    > untuk border
    Ini bagian yang gw suka. Kita bisa atur border/garis pinggir dari div yang kita buat. Caranya?
    Code:
    div#test { border-top: 1px solid red; } 
    Maka div test punya border merah setebal 1 pixel tipe solid hanya di sebelah kanan.

    Untuk awal-awal ambil CSS ini:
    Code:
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    #footer {
    background-image:url(deptek.png);
    background-repeat:no-repeat;
    min-height: 75px;
    }
    
    #header {
    background-color:white; 
    border:0; 
    margin:0; 
    padding-top: 10px;
    padding-left: 10px; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:55px;
    }
    
    #main {
    margin-top:50px;
    }
    
    div#header {
    border-bottom: 1px solid #000000;
    }
    
    .readme { 
    color: green; 
    font-family:arial; 
    font-size: 40px; 
    position: absolute;
    right: 20px;
    top: 10px;
    }
    
    .judul_1 {
    position: absolute;
    left: 20px;
    top: 10px;
    margin-left: 45px;
    }
    
    .judul_2 {
    position: absolute;
    left: 20px;
    top: 25px;
    margin-left: 45px;
    }
    kasih nama "style.css" taruh di folder yang sama dengan koding html hasil kopas dari post diatas. (post 1)
     
  3. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    To Do and To Do Not

    1. Div >>>> Table. Sangat direkomendasikan untuk menggunakan Div dibandingkan menggunakan table.
    2. Gunakan warna yang "Web Safe" alias mudah dibaca oleh web browser baik versi baru atau lama.
    3. Gunakan huruf yang "Web Safe" alias mudah dibaca oleh web browser baik versi baru atau lama.
    4. Gunakan CSS kapanpun jika memungkinkan! Menggunakan karakter khusus seperti &nbsp (spasi) menjadikan koding kurang rapih.
    5. Gunakan komentar jika memakai kondisi khusus.
    6. Jika membuat tag baru, langsung buat penutupnya. Baru isi tagnya.
    7. Perhatikan penulisan alamat yang digunakan. Apakah "Absolut" (C:/root/asd.jpg) atau "Relatif" (/asd.jpg)
     
  4. Flame-kun

    Flame-kun 大蛇武錬葬! Staff Member

    529
    257
    148
    Terusin kali swt. Gw nunggu lanjutannya ini dari kapan tahun ==

    Lagipula tutorial HTML ini juga useful kok buat mereka yang sering ke portal, jadi nggak datar cuma tulisan-tulisan saja, tapi bisa dikasih "kosmetik" dan "maskara" lainnya...
     
  5. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Mau terusin gw juga bingung. Gak ada yang nanya-nanya. Wkwkwkwk

    Nanti gw terusin tutor pake Zen Style. Macam yang dipakai Akira. Jadi tulisannya div>div>div> dsb yg semacam itu.

    Yup buat hias tulisan portal juga bisa kok.
     
  6. tatsumi_oga

    tatsumi_oga User

    10
    0
    0
    website w3school bagus tuh buat belajar web programming :D
     
  7. kirishima

    kirishima Member

    448
    38
    108
    min nanya, ini punya temen ane sih, kenapa kok kalo localhost gak bisadibuka di browser, tapi kalo 127.0.0.1 bisa?
    trus mau download upload data dari database mysql juga ga bisa,masukin data dari form trus di simpen di database aja ga bisa,
    trus kucoba hal yang SAMA PERSIS di laptopku dan jalan, itu xampp nya ya yang trouble?
    udah coba di install ulang xamp nya tetep ga bisa, kenapa ya?
     
  8. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Coba cek file "hosts"

    C: > Windows > System32 > drivers > etc > hosts
     
  9. R-V

    R-V Writer from Unlucky Town Staff Member

    494
    65
    73
    mas, bisa ajari Java Script gg? aku abis ini belajar Java Script d kampus
     
  10. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    JS ane skip. Gak kuat. Wkwkwk. Lagian juga gak tertarik sama JS.
     
  11. kirishima

    kirishima Member

    448
    38
    108
    Js= bikin facepalm, masalahnya kalo error, kagak ngerti errornya di line brp ato yang mana,soalnya salah satu salah semua ,ga jalan,

    lagian JS itu client side, beda ama php yang server side,
    ane pake JS paling buat ngecek form doang lol, isi nya sesuai kagak
    kalo ga gitu buat bumbu bumbu doang wakwkwkwk
    diselip selipin kayak gini, lol ini dulu aku pas pake ms akses, jaman jaman dahulu kala awkwkwkwk

    Code:
    $sql = "SELECT * FROM member WHERE username='$username'";
     
    $rs = odbc_exec($conn,$sql);
     
    $user1 = odbc_result($rs,1);
     
    $pass1 = odbc_result($rs,2);
     
    if ($username != $user1){
     
    $smtr = "INSERT INTO member (username, password, email, gender, nama, nohp, ttl, avatar) VALUES('$username', '$pass', '$email', '$sex', '$nama', '$nohp', '$ttl', '$file2')";
     
    $cek = odbc_prepare($conn, $smtr);
     
    if (!odbc_execute($cek))
     
    {
     
        echo '<script>';
     
        echo 'alert("Oops terjadi error");';
     
        echo 'javascript: history.go(-1)';
     
        echo '</script>';
     
    }
     
    }
     
    else {
     
        echo '<script>';
     
        echo 'alert("Username sudah terdaftar");';
     
        echo 'javascript: history.go(-1)';
     
        echo '</script>';
     
    }
     
    $_SESSION['username']="$username";
     
    odbc_close($conn);

    min kan ada tag code ama yang buat php
    kalo pilih yang php, waktu mau post kok ga bisa ya, forbidden resources atau apa gitu
     
  12. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Pakai tag code biasa aja. Jangan yg PHP. Itu sengaja lagi di blok berkaitan dengan ini: http://forum.komikanimasi.web.id/threads/yo.1149/#post-25753

    Terus ada lagi, AJAX. Ada yg pernah nyoba gak? forum ini kan pakai sistem AJAX juga tuh, pengen belajar AJAX :D
     
  13. kirishima

    kirishima Member

    448
    38
    108
    AJAX? pernah dengersih, tapi ga tau @@
    tapi
    ane kemaren2 belajar2 jquery, tapi cuma dikit sih, gila dah, semuanya sudah ada tinggal make aja, fungsi fungsi /method dikumpulkan sedimikian rupa, kita tinggal manggil aja, tergantung kita makainya gimana,

    sebenernya males ngutak atik web / belajar webprogramming, kalo keasikan bisa bisa lupa waktu 2 hari ga kerasa udah berjalan, awkwkwkwk
     
  14. darkro90

    darkro90 The Perfect and Elegant Maid

    353
    29
    68
    Apakah disini ada suhu-suhu RGSS3/Ruby? Dengar-dengar systemnya tak terlalu rumit...
     
  15. R-V

    R-V Writer from Unlucky Town Staff Member

    494
    65
    73
    aku mau tanya nih, bagaimana sih cara nambahi fasilitas komentar pada suatu post?
    misal ada posting berita kayak d portal, trus kita akan memberi komen disana..

    itu caranya gimana mulai phpnya sampai sqlnya? need bgt :(
     
  16. kirishima

    kirishima Member

    448
    38
    108
    Caranya nampilin grafik secara real time berubah ubah yang datanya ngikutin database gimana ya? misal nya, level cairan 0-100%, sebelumnya aku pake cara manual, aku buat gambarnya satu satu, misal skalanya 20, jadi aku bikin 6 gambar untuk level 0, 20,40,60,80,100, ntar gambarnya kerefresh sendiri kalo nilai di databasenya udah berubah sesuai skala, nah kalo gambarnya realtime otomatis update ada cara yang lain ga ya? yg atas itu keliatan plain banget, kurang memanjakan mata... jangan pakai flash ya, ogah ngutak atik , ada yang tau cara laiinya? pakai graph? <* sori saya pemula
     
  17. Sheratan

    Sheratan Parental Advisory Staff Member Uploader Donatur Event Winner VN Development Team Masa Latihan

    3.728
    738
    248
    Ini udah bisa?
    Memang kalau pakai flash gimana? Mungkin bisa di cari-cari klo tahu cara dari flashnya :D
     
  18. Dejiko

    Dejiko 6 years old Staff Member

    2.326
    547
    253
    buat game ya??
     
  19. R-V

    R-V Writer from Unlucky Town Staff Member

    494
    65
    73

    Dalam proses sih. masih blom fix bener
     
  20. kirishima

    kirishima Member

    448
    38
    108
    ga jadi min :D, pakai pChart jadinya, males ribet ribet, awkwkwkwkwk
     

Share This Page