Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Ex

    Загружено:

    Satria Cengeng
    14 просмотров8 страниц

    Оригинальное название

    ex

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    14 просмотров8 страниц

    Ex

    Загружено:

    Satria Cengeng

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 8

    ex.

    html:
    01 <html> 02 <head> 03 <title>Belajar HTML | IlmuWeb.Net</title> 04 <link rel="stylesheet" href="css/style.css" type="text/css" /> 05 </head> 06 <body> 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="header"> </div> <div class="menu"> <ul> <li>HOME</li> <li>HTML</li> <li>PHP</li> <li>JAVASCRIPT</li> <li>ILMUWEB.NET</li> <li><a href="atur_artikel.html">CONTOH TABEL</a></li> <li><a href="view_tambah.html">CONTOH FORM</a></li> </ul> </div> <div class="leftbar"> </div> <div class="rightbar"> <div class="main"> <p><h2>Selamat datang di Ilmuweb.net</h2></p> <p>Contoh menampilkan gambar: </p> <img src="http://ilmuweb.net/wp-content/uploads/2011/06/aplikasiweb.png"> <p>Tempat belajar membuat web secara gratis</p>

    <p>Untuk belajar mebuat web, terus kunjungi Ilmu Web Dot Net di 28 http://ilmuweb.net atau bisa langsung klik <a href="http://ilmuweb.net">DISINI</a></p> 29 30 31 </div> <div class="footer"> </div>

    32 </body> 33 </html>

    atur_artikel.html:
    01 <html> 02 <head> 03 <title>Belajar HTML -- Membuat Table | IlmuWeb.Net</title> 04 </head> 05 <body> 06 <p><h2>Contoh Tabel:</h2></p> 07 <table border=1px;> 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <tr> <td>1</td> <td>Belajar HTML</td> <td>HTML</td> <td>Edit | Hapus</td> </tr> <tr> <td>2</td> <td>Belajar PHP</td> <td>PHP</td> <td>Edit | Hapus</td> </tr> <tr> <td>3</td> <td>Belajar Javascript</td> <td>Javascript</td> <td>Edit | Hapus</td> </tr> <tr> <td>4</td> <tr> <th>No.</th> <th>Judul</th> <th>Kategori</th> <th>Aksi</th> </tr>

    34 35 36 37 38 39 40 41 42 43 44 45 </table>

    <td>Belajar Membuat Table</td> <td>HTML</td> <td>Edit | Hapus</td> </tr> <tr> <td>5</td> <td>Belajar Form</td> <td>HTML</td> <td>Edit | Hapus</td> </tr>

    46 <a href="view_tambah.html">Contoh Form</a> 47 </body> 48 </html>

    view_tambah.html:
    01 <html> 02 <head> 03 <title>Belajar HTML -- Membuat Form & Table | IlmuWeb.Net</title> 04 </head> 05 <body> 06 <p><h2>Contoh Form</h2></p> 07 <form name="form tambah data" action="" method=""> 08 09 10 11 12 13 14 15 16 17 18 <table> <tr> <th>Judul</td> <td><input type="text name="judul" value=""/></td> </tr> <tr> <th>Isi</th> <td><textarea name="isi" rows="10" col="5"></textarea></td> </tr> <tr> <th>Kategori</th>

    19 20 21 22 23 24 25 26 27 28 29 30 </form> 31 </body> 32 </html> </table>

    <td><select name="kategori"> <option value="HTML">HTML</option> <option value="PHP">PHP</option> <option value="Javascript">Javascript</option> </td> </tr> <tr> <th></th> <td><input type="submit" value="Submit"/></td> </tr>

    Setelah semua file dibuat, aktifkan localhost dengan cara double klik icon XAMPP kemudian klik start pada Apache dan Mysql. Kemudian buka browser Anda dan buka localhost/html. Selamat, web pertama Anda sudah berhasil dibuat. Untuk script web lengkap bisa di download melalui link dibawah ini: [DOWNLOAD]

    Bookmark & Share

    01 <html> 02 <head> 03 <title>Belajar HTML | IlmuWeb.Net</title> 04 <link rel="stylesheet" href="css/style.css" type="text/css" /> 05 </head> 06 <body> 07 <div id="header"> 08 </div> 09 <div id="menu"> 10 <ul> 11 <li>HOME</li> 12 <li>HTML</li> 13 <li>PHP</li> 14 <li>JAVASCRIPT</li>

    15 <li>ILMUWEB.NET</li> 16 <li><a href="atur_artikel.html">CONTOH TABEL</a></li> 17 <li><a href="view_tambah.html">CONTOH FORM</a></li> 18 </ul> 19 </div> 20 <div class="leftbar"> Contoh CSS dengan menggunakan class, pada file css (dalam hal ini 21 style.css, nama class diawali dengan . (titik) sehingga penulisannya menjadi .leftbar<br> 22 Berikut adalah contoh penggunaan CSS untuk class="leftbar" : <br> 23 <pre> 24 .leftbar{ 25 padding:4px; 26 float:left; 27 width:25%; 28 height:70%; 29 border:solid #BEBEBE; 30 } 31 </pre> 32 </div> 33 <div id="rightbar"> Contoh CSS dengan menggunakan id, pada file css (dalam hal ini style.css, nama id diawali dengan # (kres) sehingga penulisannya menjadi #rightbar<br> 35 Berikut adalah contoh penggunaan CSS untuk id="rightbar" : <br> 34 36 <pre> 37 #rightbar{ 38 padding:4px; 39 float:right; 40 width:25%; 41 height:70%; 42 border:solid #BEBEBE; 43 } 44 </pre> 45 </div> 46 <div class="main"> 47 <p><h2>Selamat datang di Ilmuweb.net</h2></p> 48 <p>Contoh menampilkan gambar: </p> 49 <img src="http://ilmuweb.net/wp-content/uploads/2011/06/aplikasi-web.png">

    50 <p>Tempat belajar membuat web secara gratis</p> <p>Untuk belajar mebuat web, terus kunjungi Ilmu Web Dot Net di 51 http://ilmuweb.net atau bisa langsung klik <a href="http://ilmuweb.net">DISINI</a></p> 52 53 </div> 54 <div class="footer"> 55 </div> 56 </body> 57 </html>

    Coba perhatikan syntak dibawah ini yang terdapa pada file index.html:
    1 <link rel="stylesheet" href="css/style.css" type="text/css" />

    Syntak tersebu digunakan untuk menghubungkan file index.html dengan file style.css yang terdapat pada folder css. style.css:
    01 body { 02 background-color:#E2E0E0; 03 font-family:Arial,Helvetica,sans-serif; 04 color:#333; 05 line-height:1.5em; 06 margin:0; 07 padding:0; 08 } 09 #header { 10 width:100%; 11 background:url(../images/header.jpg) no-repeat left; 12 height:135px; 13 margin:0 auto; 14 margin-bottom:0 auto; 15 border-bottom:1px solid #BEBEBE; 16 } 17 ul 18 { 19 list-style-type:none;

    20 margin:10px; 21 padding:5px; 22 } 23 li 24 { 25 display:inline; 26 padding:10px; 27 } 28 .leftbar{ 29 padding:4px; 30 float:left; 31 width:25%; 32 height:70%; 33 border:solid #BEBEBE; 34 } 35 #rightbar{ 36 padding:4px; 37 float:right; 38 width:25%; 39 border:solid #BEBEBE; 40 height:70%; 41 } 42 43 44 45 .main{ padding:4px; margin:auto; border:solid #BEBEBE;

    46 width:47%; 47 height:70%; 48 }

    Perhatikan syntak dibawah ini yang terdapat pada file index.html;


    01 <div class="leftbar"> Contoh CSS dengan menggunakan class, pada file css (dalam hal ini 02 style.css, nama class diawali dengan . (titik) sehingga penulisannya menjadi .leftbar<br> 03 Berikut adalah contoh penggunaan CSS untuk class="leftbar" : <br>

    04 05 06 07 08 09 10 11 12 13

    <pre> .leftbar{ padding:4px; float:left; width:25%; height:70%; border:solid #BEBEBE; } </pre> </div>

    Untuk melakukan perubahan pada tampilan tersebut baik itu mengganti jenis huruf, mengganti warna, mengganti ukuran huruf, menambahkan gambar background dll, hal yang diperlukan adalah mengedit syntak dibawah ini pada file style.css yang terdapat di dalam folder CSS:
    1 .leftbar{ 2 padding:4px; 3 float:left; 4 width:25%; 5 height:70%; 6 border:solid #BEBEBE; 7}

    Untuk lebih memahami penggunaan CSS, silakan download file pada link di bawah in

    Вам также может понравиться