Dasar Dari Modern Web Design

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013
Review Pelatihan 1 & 2 Modern Web Design Course

Jessica Evangeline M
Teknik Metalurgi
12511008 jessicaevam@students.itb.a.c.id
4/9/2013
Review Pelatihan MWD-1

Pelatihan 1 MWD perbedaan internet dan web? internet : menghubungkan perangkat kerasnya (hardware : komputer) web : menghubungkan perangkat lunaknya (link) URL : universal resource Locator http : hyper text transfer protocol cara kerja web : dari client k server, server k internet, data dari internet brupa php, mysQl, javascript,dll masuk k server, di kirim ke browser brupa kode. kode diterjemahkan browser menjadi gambar, tulisan, animasi, dll
HTML BUKAN bahasa pemrograman, karena g ada logikanya, cuma sebagai penanda aja untuk perbedaan2 elemen2 yg ada di website >> cenderung ke strukturnya
HTML : Hyper Text Markup Language CSS : Cascasing Style Sheet >> lbh mengatur tampilan website JavaScript : yang membuat website lbh interaktif dan dinamis (behaviour)
ukuran print : pt ukuran screen : px
www : prefix example.com : domain client : pihak yang mengakses server : tmpat menyimpan browsernya berupa kode server tidak butuh monitor, krna hanya digunakan untuk mengirimkan kode kode saja yang dipelajari, website2 yg dipelajari di client ( yg tampil di client) yg di client : HTML, CSS, Javascript yg di server : PHP, mySQL (tapi ujung2nya keluarnya juga berupa HTML, CSS, Javascript jg) CSS : ada script khusus buat browser yg berbeda (karena ada script yg masih blum standar) SPEED & BANDWIDTH website yg bagus : cepat dibuka , ringan ukurannya, tidak lbih dari 100 kb (agar dpt dibuka kurang dr 6 detik) CODEBULARY: <br /> : enter <hr /> : horizontal line <p></p>: paragraph <h></h> : head <img src= /> : penambahan image April 9, 2013

 <hr />
<p><font color="purple" face="maiandra GD">copas dari grup sebelah : ini inti jawaban rektorat dan sedikit solusi mengenai penutupan gerbang belakang. pertemuan dilakukan kemaren sore sekitar jam 3 dihadiri pihak LK, SP, dan rektorat bagian pengembangan"</font></p> <h2>"Info tambahan"</h2> April 9, 2013 <hr /> <p><img alt="Beasiswa Total" title="Beasiswa src="2013_03_27_15_32_41_155.jpg" width="100px" /></p> <p>Ehem numpang info ya kawan-kawan... Saatnya telah tiba.. Total" align="left"

Buat kamu-kamu angkatan 2011, ingin dapat beasiswa dan pelatihan yang mumpuni? Yuk Daftar jadi BESWAN DJARUM 2013/2014 di sini : </p> <br style="clear:both"> <br /> <br />
</body> </html> Output :
Latihan Kedua: Menyalin Teks Berita dengan membuat html sendiri
April 9, 2013

Kode pemrogramannya: <!DOCTYPE HTML> <html> <head> <title>Ini yang Bikin Jokowi Geram pada Bank Dunia - KOMPAS.COM</title> </head> <body> <h1>Ini yang Bikin Jokowi Geram Pada Bank Dunia</h1> <hr /> <br /> <img title="Gubernur DKI Jakarta Joko Widodo bersama Kepala Perwakilan BPK RI Provinsi DKI Jakarta, Blucer W. Rajagukguk" src="1102453-jokowi-bpk-620X310.jpg" /> <br />
<p><font color = "blue"><strong>JAKARTA,KOMPAS.com</strong></font>--Syarat Bank Dunia (World Bank) untuk pinjaman Rp 1,2 triliun terkait program normalisasi 13 sungai membuat Gubernur DKI Jakarta Joko Widodo berpikir ulang. Dia pun membeberkan keberatannya pada syarat Bank Dunia itu.</p> <p>Jokowi menyampaikan, pihak Bank Dunia meminta proses relokasi warga di bantaran sungai dijamin penuh hak-haknya. Padahal, menurut dia, dirinya sudah pasti akan bertanggung jawab dan menjamin semuanya.</p> <p>Selain itu, Bank Dunia juga meminta Pemerintah Provinsi DKI untuk menjamin seluruh warga yang direlokasi tidak menjadi lebih miskin setelahnya. Jokowi menilai bank Dunia terlalu dalam mencampuri urusan Jakarta.</p> <p>"Rumit (syaratnya). Ya pastilah, kita ini bapaknya mereka kok. Tapi enggak usah terlalu rinci," kata Jokowi di Balaikota DKI Jakarta, Selasa (2/4/2013).</p> <p>Selain itu, syarat yang paling dianggap tidak rasional adalah permintaan Bank Dunia pada Pemerintah Provinsi DKI untuk menjamin semua warga yang direlokasi agar tetap memiliki pekerjaan. Padahal menurut Jokowi, proses normalisasi sungai bisa dilakukan secara bertahap. Mulai dari relokasi, dan kemudian menyalurkannya ke dunia kerja.</p>
April 9, 2013
</body> </html>
Output :
April 9, 2013
REVIEW PELATIHAN MWD-2

codebulary: <th></th> table head <td></td> table data <tr></tr> table row kalo <td> pertama diubah, maka <td> pertama di <tr> yg lain juga akan berubah sesuai dengan yang kita masukkan ukurannya pada bagian atasnya, maka akan berubah smua di bawahnya
Jarak antara konten sama border : padding cellspacing, cellpadding,dan tebal border bisa di dalam <table>
klo menentukan width dan height memang harus penuh perhitungan, harus pas 100 persen totalnya
Hari Selasa sudah mulai belajar C++
jangan lebih atau kurang
Lebar tabel (width) bisa dalam persen ato pixel HOW TO MERGE CELLS? Persen tabel terhadap wilayah nya/bodynya colspan >> menggabungkan kolom rowspan>> menggabungkan baris kalo height itu ga cocok pakai persen biasanya pakai pixel (10px, 20px, 30px,dll) valign= untuk mengatur align secara vertical April 9, 2013
kalo <tr> diubah 1 , yg <tr> lain tdk akan berubah sedangkan untuk <td> dan <th> jika diubah

LATIHAN 1 : Membuat table harga pizza dengan berbagai variasi
Kode Pemrogramannya : <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Latihan Tabel</TITLE> </HEAD> <BODY> <H1>Daftar Menu PIzza</H1> <table border="1"> <tr> <th>Nama</th> <th>Small</th> <th>Medium</th> <th>Large</th> </tr> <tr> <td>Pepperoni</td> <td>Rp 10K</td> <td>Rp 15K</td> <td>Rp 40K</td> </tr> <tr> <td>Super Supreme</td> <td>Rp 15K</td> <td>Rp 16K</td> <td>Rp 30K</td> </tr> <tr> <td>Meat Lovers</td> <td>Rp 10K</td> <td>Rp 15K</td> <td>Rp 40K</td> </tr> <tr> <td>Stuffed Crust</td> <td>Rp 15K</td> <td>Rp 16K</td> <td>Rp 30K</td> </tr> </table> <br /> <br /> <hr /> <table border="2" cellspacing="2" cellpadding="5" align="center" width="80%"> <caption align="bottom"><font color="red" size="5">-Pilihan Pizza--</font><caption> <thead> <tr align="center"> <th>Nama Pizza</th> <td><strong>Pepperoni</strong></td> <td><strong>Super Supreme</strong></td> <td><strong>Meat Lovers</strong></td> <td><strong>Stuffed Crust</strong></td>
April 9, 2013

</tr> </thead> <tbody> <tr align="center"> <th>Small</th> <td><font color="blue">Rp 10K</font></td> <td><font color="blue">Rp 15K</font></td> <td><font color="blue">Rp 10K</font></td> <td><font color="blue">Rp 15K</font></td> </tr> <tr align="center"> <th>Medium</th> <td><font color="blue">Rp 15K</font></td> <td><font color="blue">Rp 16K</font></td> <td><font color="blue">Rp 15K</font></td> <td><font color="blue">Rp 16K</font></td> </tr> <tr align="center"> <th>Large</th> <td><font color="blue">Rp 40K</font></td> <td><font color="blue">Rp 30K</font></td> <td><font color="blue">Rp 40K</font></td> <td><font color="blue">Rp 30K</font></td> </tr> </tbody> </table> <hr /> <br /> <br /> <table border="1" cellspacing="3" cellpadding="3"> <tr> <th rowspan="2">Nama</th> <th colspan="3"><em>Ukuran</em></th> </tr> <tr> <th>Small</th> <th>Medium</th> <th>Large</th> </tr> <tr> <td>Pepperoni</td> <td>NA</td> <td>NA</td> <td>NA</td> </tr> <tr> <td>Super Supreme</td> <td>NA</td> <td>NA</td> <td>NA</td> </tr> <tr> <td>Meat Lovers</td> <td>NA</td> <td>NA</td> <td>NA</td> </tr>
April 9, 2013

<tr> <td>StuffedCrust</td> <td>NA</td> <td>NA</td> <td>NA</td> </tr> </table> <hr /> </body> </html>
Keterangan : kode table pertama : warna ungu Kode table kedua : warna merah Kode table ketiga : warna orange OUTPUT :
April 9, 2013

LATIHAN 2 : Menyalin berita ke dalam kolom-kolom yang terpetak-petak Kode Pemrogramannya :
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Challenge layouting with Table</TITLE> </HEAD> <BODY> <H1>Challenge</H1> <Table width="1000px" align="center" Border="1" Cellspacing="2" Cellpadding="5"> <tr height="100px" ALIGN="CENTER">  <th colspan="5"><IMG title="logo kompas" src="logo_kompas.jpg"></th> </tr> <tr height"30px" ALIGN="CENTER">  <th>Nusantara</th> <th>Internasional</th> <th>Ekonomi</th> <th>Pendidikan</th> <th>Politik</th> </tr> <tr ALIGN="Left">  <th colspan="3" rowspan="3" valign="center"> <p><strong><em>KOMPAS.com</em></strong> Mariyuana atau ganja sebenarnya sudah sejak lama dipakai untuk mengobati penyakit. Namun, dalam dunia kedokteran modern, pemanfaatan ganja masih kontroversial. Meski begitu, sebuah keluarga di Oregon, Amerika Serikat, menggunakan ganja untuk mengatasi autisme berat yang diderita anak mereka. Adalah Jeremy Echols, ayah dari Alex, anak penyandang autisme berusia 11 tahun. Alex gemar menyakiti dirinya sendiri. Saat berusia 5 tahun, ia telah menunjukkan gejala autisme berat, antara lain membenturkan wajahnya ke tembok hingga memar. Namun, keadaan ini berubah semenjak Jeremy memberikan program pengobatan dengan menggunakan ganja kepada Alex. Terjadi perubahan dramatis pada perilaku Alex. "Dia pernah memukuli dirinya sendiri hingga berdarah-darah dalam jangka waktu satu jam atau satu setengah jam. Seharusnya, dia dapat bermain normal dengan mainan, namun saat itu sangat tidak mungkin," ujar Jeremy. Jeremy kemudian mulai memberikan obat ganja cair tiga kali seminggu pada Alex. American Academy of Pediatrics melarang pengunaan ganja terhadap anak-anak sekalipun sebagai obat. Hal tersebut disebabkan ganja bersifat racun untuk perkembangan otak anak. Selain itu, belum diketahui efek samping dari penggunaan ganja dalam waktu lama.
April 9, 2013

Kendati demikian, bagi keluarga Echols, manfaat yang didapatkan dari pengobatan ganja lebih besar daripada efek sampingnya. "Bagi kami, efek samping obat yang belum diketahui tersebut mungkin bukan apa-apa dibanding dengan perilaku menyakiti dirinya sendiri," ujar Jeremy. </th> <td colspan="2"> <ol>TERKAIT</ol> <il>BERITA 1</il> </td> </tr> <tr ALIGN="CENTER">  <td colspan="2">SUB2</td> </tr> <tr ALIGN="CENTER">  <td colspan="2">SUB3</td> </tr> <tr ALIGN="CENTER">  <th colspan="5">FOOTER</th> </tr> </BODY> </html> OUTPUT :
April 9, 2013

LATIHAN 3 : PEMBUATAN FORM MENIRU FORM SIGN UP FACEBOOK Kode Pemrogramannya : <!DOCTYPE HTML> <HTML> <HEAD> <Title>Latihan Form</Title> </HEAD> <BODY> <form name="Login" action="login.php" method="POST"> <table> <tr> <td> <label for="username">Email or Phone</label> </td> <td> <label for="password">Password</label> </td> <td></td> </tr> <tr> <td> <input type="text" id="username" required/> </td> <td> <input type="password" id="password" value="Password Anda" required /> </td> <td> <input type="submit" value="Log In"/> </td> </tr> <tr> <td> <input type="checkbox" id="cawang" checked/> <label for="cawang" >Keep Me Logged In</label> </td> <td> <a href="#">Forgot Your Password?</a> </td> </tr> </table> </form> <h1>Sign up</h1> <form action="signup.php" method="POST"> <input type="text" size="15" placeholder="First Name" required/>  <input type="text" size="15" placeholder="Last Name" required/> <br /> <input type="text" size="37" placeholder="Username" required/> <br /> <input type="password" size="37" placeholder="Password" required/> <br /> <input type="email" size="37" placeholder="Your Email" required/>  <br /> <input type="email" size="37" placeholder="Re-enter Your Email" required/> <br /> <br /> <p> Birthday : <br /> <select> <option>Month</option> <option>Jan</option> <option>Feb</option> <option>Mar</option> <option>Apr</option> <option>May</option> <option>Jun</option> <option>Jul</option> <option>Aug</option> <option>Sep</option> <option>Oct</option> <option>Nov</option> <option>Dec</option> </select> <select> <option>Date:</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> <select> <option>year:</option> <option>1993</option> <option>1992</option> </select> </p> <br /> <input type="radio" name="gender" id="female" /> <Label for="female">&nbsp Female</Label> <input type="radio" name="gender" id="male" /> <Label for="male">&nbsp Male </Label> <br /> <input type="Submit" value="Sign Up" /> </form> </BODY> </HTML>
April 9, 2013
[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013 OUTPUT:
KETERANGAN KODE: <tr> : table row :baris table <td> : table data
Input type=text : membuat box kosong yang dapat diisi dengan text Input type=password : membuat box kosong yang dapat diisi dengan password dan tidak ditampakkan hurufnya dalam penampilannya (berupa tanda bintang atau lingkaran Input type=email : membuat box kosong yang dapat diisi dengan email (bertanda @domain.com, jika tidak ada domainnya, maka input akan ditolak) Input type=radio : membuat pilihan/opsi yang hanya bisa dipilih satu saja dari keseluruhan opsi yang ada (untuk pemilihan gender, dll) Input type=checkbox : untuk membuat opsi yang dapat dipilih lebih dari Satu
April 9, 2013

Dasar Dari Modern Web Design

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dasar Dari Modern Web Design

Diunggah oleh

Hak Cipta:

Format Tersedia

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

Review Pelatihan 1 & 2 Modern Web Design Course

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

Review Pelatihan MWD-1

ukuran print : pt ukuran screen : px

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

</body> </html> Output :

Latihan Kedua: Menyalin Teks Berita dengan membuat html sendiri

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

REVIEW PELATIHAN MWD-2

Hari Selasa sudah mulai belajar C++

jangan lebih atau kurang

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

[REVIEW PELATIHAN 1 & 2 MODERN WEB DESIGN COURSE] April 9, 2013

Anda mungkin juga menyukai