Sabtu, 28 Januari 2017

Mari Belajar HTML menggunakan Sublime Text 3 (HTML Table&List) Part 3

Hallo, Kembali lagi dengan saya admin kece dunia akhirat. Kali ini saya ingin melanjutkan Tutorial membuat website sederhana menggunakan Sublime text 3. Materi yang saya berikan kali ini yaitu Cara membuat Table dan List. Penasaran? Langsung saja kita mulai. Check it out.

<table>      : untuk membuat sebuah table seperti microsoft excel, tetapi bedanya ini dalam sebuah Web
<caption>  : untuk membuat judul di sebuah table
<th>         :Kepanjangan dari table heading, digunakan untuk membuat judul sebuah table seperti No, dn nama. biasanya di tanda dengan hurufnya menjadi bold
<td>          :Kepanjangan dari table data, digunakan untuk membuat isi dari th atau baris atau kalau di Excel seperti celll
<h2>         : untuk membuat tulisan menjadi besar, biasanya digunakan sebagai untuk judul
<ul>          : digunakan untuk membuat daftar dengan penanda simbol. Tag ini mempunyai attribute, yaitu mengubah simbol dari daftar. valuenya adalah disc, square, atau circle. value default disc
<li>           : tag ini digunakan bersamaan dengan <ul> yaitu dengan menyisipkan item ke dalam tag pembuka dan tag penutup. misal <html> <body> <ul> <li>handphone</li></ul></body></html>


Baiklah kita sudah melihat dasar dasar codenya. sekarang kita memprakrtekkannya.. go..

Pertama tama coba anda ketik script dibawah ini.

maksud script diatas yaitu Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehinga satu unit kolom atau row ini menjadi lebih lebar.Colspan adalah kependekan dari "column span" yang bisa diartikan sebagai "seberapa kotak kesamping", sedangkan rowspan adalah "seberapa kotak kebawah". lebih lengkap anda bisa mengunjungi link ini http://elevenmillion.blogspot.co.id/2009/12/colspan-dan-rowspan-di-table-html.html

Ini Output yang dihasilkan dari kode diatas

Selanjtunya coba ketikkan script dibawah ini.

Maksud Script diatas yaitu
<div style="border: 5px double #00FFFF;"></div>  : yaitu membuat sebuah garis bergaya "border" dan berukuran 5px double. #00FFFF adalah warna menggunakan sebuah HEX.
<h2>3 barang yang terdapat di Tas saya</h2>        : yaitu <h2> ukuran font tulisan
<ul style="list-style-type:circle">                           : yaitu kode u/ membuat simbol, misal circle(bulat)
  <li>Handphone</li>                                           : nah gunakan <li> agar symbol muncul disini
  <li></li>
</ul>.

<ol type="a">                                                     : yaitu kode untuk membuat huruf,maupun angka
  <li>Menjadi Pengusaha Sukses</li>                     : berhubungan sy pakai a.jadi huruf yg akan muncul
  <li></li>
</ol>                                                         

<marquee><h1 style="font-family:comic;"><font color="#330000"><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" style="bottom: 5px; display: scroll; left: 5px; position: right;" title="Want more... Click it."><img src="http://i1242.photobucket.com/albums/gg532/faizkr8/boblari.gif" /></a>Thanks for your Attention</font></marquee>        yaitu ,<marquee> digunakan untuk tulisan berjalan, <h1 untuk memperbesar huruf.  dan masalah gift saya ambil gif bergerak spongebob di google.

Ini output kode ketika sudah dijalankan.
    
ini saya berikan source code lengkapnya.. :D
file:///D:/3b.MATA%20KULIAH%20SEM.2/Pemrograman%20Web/Tugas%203-%20HTML%20Table&List/pemrogramanweb.html

Semoga Membantu ya, dan nantikan tutorial pemrograman berikutnya.. jangan lupa tinggalkan Komentar, untuk saran dan kritik diterima untuk kemajuan blog ini menjadi lebih baik

1 komentar:

  1. As claimed by Stanford Medical, It's indeed the one and ONLY reason this country's women live 10 years more and weigh an average of 19 kilos less than us.

    (And really, it really has NOTHING to do with genetics or some secret diet and EVERYTHING to about "how" they eat.)

    P.S, What I said is "HOW", and not "WHAT"...

    TAP this link to uncover if this quick test can help you release your true weight loss possibility

    BalasHapus