Cara Membuat Frame HTML lanjutan

Cara Membuat Frame HTML lanjutan - Frame bisa ibaratkan bingkai yang nanti digunakan untuk menampilkan beberapa dokumen html dalam satu halaman web, biasa kita sebut halaman index. Seperti pada postingan sebelumnya yaitu mengenai dasar membuat frame HTML dimana terdapat latihan frame HTML yang sangat dasar sekali. Kali ini ingin melanjutkan dari postingan sebelumnya.

Apabila kita sama - sama lihat dari sisi kegunaannya, frame bisa berguna seperti berikut :

• Agar logo header tidak berubah namun isi nya terus berubah ketika kita memilih menu yang ada
• Membuat daftar isi, dimana di satu sisi menampilkan judul nya dan disisi lain menampilkan isi dari judul tersebut ketika kita pilih
• dll.

Semua tergantung kebutuhan para pembuat halaman web. Seperti yang saya bahas pada postingan sebelumnya bahwa pada pembuatan frame disini menggunakan tag <frameset>. Pada <frameset> mempunyai attribut, diantaranya :

• BORDER, untuk memberikan garis tepi pada suatu frame dan menentukan ketebalan pada garis tersebut
• ROWS, untuk menentukan berapa baris bagian yang akan dibentuk
• COLS, untuk menentukan berpa kolom bagian yang akan dibentuk

Apabila tidak ada lagi bagian yang akan dibagi, maka giliran untuk membuat <frame> didalam tag <frameset>, dimana tag <frame> mempunyai attribut, diantaranya :

• NAME, untuk memberikan nama atau penamaan apabila frame tersebut akan dijadikan target untuk menampilkan suatu halaman
• SRC, untuk memanggil dokumen HTML
• SCROLLING, memberikan scroll bar atau tidak disamping atau bawah halaman. Pilihan nilai yang bisa diberikan adalah YES, NO atau AUTO.

Screenshot

Cara Pasang
[Buat dokumen HTML yang akan di panggil][halaman pertama]
Ketikan sintax dibawah atau copas boleh

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#00CC00">

Header/logo

</body>

</html>

Simpan dengan ekstensi *.html atau dengan logo.html

[Buat dokumen HTML yang akan di panggil][halaman kedua]
Ketikan sintax dibawah atau copas boleh

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#BFFEBF">

Sidebar/menu

</body>

</html>

Simpan dengan ekstensi *.html atau dengan menu.html

[Buat dokumen HTML yang akan di panggil][halaman ketiga]
Ketikan sintax dibawah atau copas boleh

<html>

<head>

<title>Frame HTML</title>

</head>

<body bgcolor="#80FE80">

Body/isi

</body>

</html>

Simpan dengan ekstensi *.html atau dengan isi.html

 [Buat Master Page]
 Ketikan sintax dibawah atau copas boleh

 <html>

<head>

<title>FRAME HTML</title>

</head>



<frameset rows="10%,*" border="0">

<frame src="logo.html" name="logo">

<frameset cols="20%,*" border="0">

<frame src="menu.html" name="menu">

<frame src="isi.html" name="isi">

</frameset>

</frameset>



 </html>

Simpan dengan ekstensi *.html atau dengan index.html Langkah terakhir coba anda buka dokumen html yang bernama index.html

Dasar Penulisan kode HTML

Dasar Penulisan kode HTML - Kode HTML merupakan dasar dari awal pembangunan website (website building), mungkin banyak yang bertanya - tanya kenapa bisa jadi dasar? Ok, disini kita akan bahas bersama - bersama, HTML disebut dasar pembuatan website karena perannya yang begitu tidak rewel, sebab HTML bisa di sambungkan ke kode - kode yang lain  seperti : PHP, CSS, javascript, dsb. HTML atau singkatan dari Hyper Text Markup Language, merupakan Bahasa Markup (Penandaan), disini ada tanda lebih kecil ( < ) dan lebih besar ( > ) atau kata yang berada di dua tanda itu yang disebut dengan TAG. Selain bisa di sambungkan ke kode - kode yang lain, html pun sangat mudah digunakan, terbukti dari cara pembuatannya, HTML bisa dibuat hanya dengan menggunakan notepad, yang keberadaanya sudah ada dari windows.

Selain dari notepad itu sendiri bisa menggunakan wordpad atau bisa yang lebih mudahnya lagi dengan menggunakan software DreamWeaver. Disitu kita diberikan kemudahan di mulai dari upload gambar, mengatur posisi, menambahkan tabel, dll.

Namun, rasanya hampa kalau tidak mempelajari dasarnya, kecintaannya pun tidak awet hanya sementara, karena menurut saya ketika saya mempelajari dasarnya dimulai dari notepad, disitulah kebanggaan saya muncul, betapa tidak ketika seukurannya saya mempelajari dasarnya dulu pada waktu itu bisa membuat dari text biasa menjadi interface yang di tampilkan di web browser yang kini banyak jenisnya ada mozilla firefox, google chrome, IE, dll.

Dari situ munculah kecintaan terhadap kode - kode HTML yang berdampak cintanya terhadap website. Dan tidak tahu kalau menurut sobat - sobat sekalian pendapatnya seperti apa. Sobat bisa memberikan pendapat nya masing - masing. hhe

Screenshot

Dan berikut merupakan struktur dari kode HTML
1. <HTML>
2. <HEAD>
3. <TITLE>
4. <BODY>
contohnya dan mungkin bisa langsung anda coba.

<html>

<head>

<title>Senangnya belajar HTML</title>

</head>

<body> Senangnya belajar HTML dasar di notepad

</body>

 </html>

Caranya sangat mudah untuk mencobanya tinggal copas atau diketik ulang sintak di atas di notepad kemudian save dengan format belajar.html.

Ingin tahu lebih lanjut mengenai HTML ini, yuk kita langsung ke Mengenal tag, elemen dan atribut HTML.

Membuat Caption pada tabel di HTML

Membuat Caption pada tabel di HTML - Kembali Gubug Web akan mencoba sedikit membagikan tutorial mengenai HTML, dengan judul nya Membuat Caption pada tabel di HTML, semuanya pasti sudah pada tahu apa itu tabel. iya, tabel merupakan gabungan dari beberapa baris dan kolom, bila kita menemukan baris dan kolom yang menyatu sudah pasti itu tabel. Membahas postingan mengenai tabel sebetulnya sudah di postinga - postingan sebelumnya, namun ada yang ketinggalan, yaitu pembuatan caption pada tabel atau bisa disebut juga dengan pemberian judul pada tabel.

Judul pada tabel sangat lah penting, karena apa? bagaimana kita mengetahui tabel itu namanya apa dan maksudnya untuk apa, apabila kita tidak memberikan judul pada tabel tersebut. Bisa untuk mempertegas juga bahwa tabel tersebut memiliki nama identitas, serta mempermudah apabila tabel tersebut banyak lebih dari 2 misalkan, nah dengan caption ini kita bisa mudah mencari tabel yang dimaksudkan itu yang mana. bahwa caption/judul ini mencakup dari kesuluruhan isi tabel tersebut. Penempatannya pun harus pada element tabel dan memiliki attribut align yang memiliki nilai "top" atau "bottom". Dimana apabila top digunakan membuat caption/judul diatas tabel sedangkan pada bottom maka posisi caption/judul dibawah tabel.

Mungkin kita sering melihat ini di modul - modul pelajaran sekolah ya. Tetapi kenapa harus ada dalam berbasis website. Mungkin saja ada pertanyaan begini "Dimana saja kita bisa menemukan tabel dengan caption dalam berbasis web?" misal coba kita cari website edukasi, artinya tentang pembelajaran dimulai dari modul sampai ke latihan, kita bisa menemukan fungsi caption ini apabila di website tersebut ada tabel nya. Dan kita juga bisa menggunakan ini apabila kita mau membuat website edukasi atau hanya sekedar catatan harian mengenai pelajaran disekolah yang diharuskan membuat tabel berikut disertakan judulnya atau caption ini.

Baik untuk latihan sekarang saya akan mengambil dari latihan tabel sebelumnya yaitu mengenai Membuat tabel sederhana HTML dan akan ada sedikit sentuhan - sentuhan warna pada tabel tersebut. Oke kalo begitu akan langsung saja dimulai secara teknis nya. Let's Go . . .

Screenshot

Tools

• Web Editor (Notepad ++, DW, dll)
• Web Browser (Mozilla Firefox, Chrome, dll)

Cara Pasang
Ketikan sintax/kode dibawah ini

 <html>

<head>

<title>Membuat Caption Tabel</title>

</head>

<body>



<table border="1" bgcolor="cyan" cellpadding="4" cellspacing="0">

<caption align="top"><b>Tabel 1.1</b></caption>

<tr>

<th>No.</th>

<th>Nama</th>

<th>Alamat</th>

</tr>

<tr>

<td>1.</td>

<td>Dina</td>

<td>Majalengka</td>

</tr>

<tr>

<td>2.</td>

<td>Lili</td>

<td>Cirebon</td>

</tr>

</table>

</body>

 </html>

Simpan dengan ekstensi *.html atau dengan nama caption.html

Penerapan selector id dan class pada CSS

Penerapan selector id dan class pada CSS - Dalam penerapan selector id dan class pada CSS ini termasuk ke dalam kelompok tutorial CSS dasar. Yang mana kita selalu kebingungan antara id dengan class, mungkin dari fungsi nya ada kesamaan yaitu sama - sama untuk memanggil gaya dari css luar, tetapi ada sisi perbedaannya, yang akan sama - sama kita bahas. Untuk itu mari disimak ya.
CSS atau merupakan singkatan dari Cascading Style Sheet merupakan bahasa pemrograman untuk membantu pembuatan struktur web dengan HTML agar lebih mudah dan menarik. Bila kita postingan sebelum ini membahas Pengertian dan Pengenalan tag CSS dasar dimana postingannya berisi tentang pengertian serta pengenalan tag dasar dari CSS.


Kelanjutan dari itu, CSS mempunyai id dan class, kedua tag tersebut disebut dengan selector, dimana dibawah akan dijelaskan pengertiannya.
Selector id
Digunakan untuk memberikan style pada elemen tunggal saja. Diberikan definisi "#", yang bisa dicontoh kan sebagai berikut ini :
#pilih
{
text-align : left;
color : blue;
}
syntax diatas akan diterapkan pada file css luar atau pada file html, dan diterapkan dengan id = "pilih"

Selector class
Digunakan untuk memberikan style pada beberapa elemen. Disinilah titik perbedaan nya bahwa selector class bisa memberikan gaya pada halaman web lebih dari satu elemen. Pendefinisiannya pun berbeda pada selector class didefiniskan ".", yang bisa dicontoh kan sebagai berikut ini :
.kanan
{
text-align : right;
}
Dengan syntax diatas kita bisa artikan bahwa element HTML yang mempunyai class kanan akan dibuat perataannya kanan.
Contoh lain
p.kanan
{
text-aling : right;
}
Dengan syntax diatas kita bisa artikan bahwa element HTML p dengan class = "kanan" akan dibuat perataan kanan

Perlu Diingat !!!
"Jangan gunakan angka untuk memberikan nama pada id dan class, karena tidak akan bekerja pada mozilla firefox"

Seperti itu lah tutorial mengenai selector id dan class pada CSS, bagaimana? sekarang sudah lumayan jelas bukan? atau masih remang - remang. he..he..he.., kalau masih ada yang kurang jelas bisa anda tanyakan pada komentar dibawah ini. Semoga tutorial penerapan selector id dan class pada CSS ini bisa bermanfaat.

Cara - Cara Menghubungkan CSS ke halaman HTML

Cara - Cara Menghubungkan CSS ke halaman HTML - Dimana yang sudah sama - sama kita bahas mengenai CSS ialah baru mengenai pengertian CSS serta cara penulisannya saja. Namun, ada yang bertanya seperti ini, "Bagaimana mas cara menerapkan/menghubungkan ke HTML nya?", dari pertanyaan itu saya tergerak untuk membuat tutorial ini. Bagi yang biasa hidupnya tidak lepas dari pengkodingan website, pasti bukan istilah yang asing lagi, dimana CSS ini seperti yang kita ketahui, mempunyai peran yang sangat penting, salah satunya untuk mengatur tata letak serta gaya halaman agar bisa terlihat rapi dan enak dilihat oleh pengunjung. Kenapa saya hubungkan antara website yang rapi dan bagus gaya nya dengan pengunjung, itu karena pengunjung tidak hanya melihat isi dari postingan saja, tetapi melihat dari sisi lainnya juga, seperti dari kerapian, gaya, dll sehingga pengunjung betah berselancar di website kita. Karena bagaimana pun juga pengunjung adalah nyawa bagi website kita. Ya. . . walaupun misal nya kita kurang dalam hal seni nya, minimal kita bisa membuat webiste tersebut bisa menjadi rapi dan nyaman bagi para pengunjung.

Ada beberapa cara untuk menghubungkan dari CSS ke HTML, diantaranya :
1. Internal style sheet
 Pada cara pemberian gaya HTML ini apabila kondisinya anda ingin memberikan gaya yang unik pada satu halaman saja. Penempatan gaya nya pada bagian kepala HTML, misal dengan style seperti dibawah ini :
<head>
<style>

 ..area kode css..

</style>

</head>
2. External style sheet
Pada cara ini apabila kita sedang membuat halaman lebih dari satu atau banyak, dengan cara ini lah anda cukup melakukan pengeditan pada satu halaman saja yang nantinya harus terhubung ke halaman - halaman yang dibutuhkan gaya/style. Kita gunakan tag <link>. Yang ditempatkan pada bagian kepala HTML, untuk lebih jelasnya, seperti contoh dibawah ini :
<head><link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
Sekarang membuat file CSS nya, bisa dibuat dengan web editor apa saja, misal notepad. Disimpan dengan ekstensi *.css. Contoh nya seperti dibawah ini :
p {margin-right:15px;}
h2 {color:blue;}
3. Inline style
Pemberian gaya HTML pada cara ini disisipkan pada tag HTML. Contoh nya seperti dibawah ini :
<p style="color:sienna; margin-left:100px;">This is a paragraph.</p>
Coba simpan dengan format *.html

Seperti itu lah cara - cara menghubungkan CSS ke halaman HTML, apabila ada yang kurang boleh ditanyakan dikolom komentar bawah ini.

Membuat Tabel HTML Responsive dengan CSS di Blog

Kamu pernah membuat tabel di HTML? Apabila iya, artikel ini pas. Untuk itu, lanjutkan simak sampai kebawah ya. Karena topik yang dibawakan sekarang cukup menarik yaitu : Membuat Tabel HTML Responsive dengan CSS di Blog. Blog disini ditujukan untuk pembuatan blog nya di blogger, untuk secara HTML secara offlinenya next time ya. Dari judul ini mungkin muncul pertanyaan kenapa harus responsive? Berawal dari maraknya penggunaan gadget, dimulai dari smartphone sampai tablet. Tampilan situs webiste/blog harus mengikuti ukuran layar ponsel secara fleksibel, karena begitu banyak nya orang yang menggunakan gadget untuk melakukan aktifitas nya dalam berselancar di internet. Terlepas dari pada itu, tabel pun yang kita tahu begitu banyak kegunaannya, mau tidak mau/bahkan harus menjadikan tabel yang responsive. Ya..kalau tidak mau ditinggal langsung oleh pengunjung. hehe

Mungkin apabila kamu buka di laptop/PC tabel akan normal - normal saja. Tapi, coba dibuka di gadget smartphone yang ukuran layarnya cukup sempit, maka tabel tidak mengikuti layar atau malah menyamping, melampaui batas layar bagian samping.

Pembuatan tabel untuk di web menggunakan kode HTML, tetapi harus ada penunjang nya agar tabel menjadi responsive yaitu dengan kode CSS. Karena disini tidak akan mengulas lebih dalam mengenai apa itu CSS. Bagi yang ingin tahu mengenai dasar nya mari bisa baca di : Pengertian dan Mengenal tag CSS dasar.

Kembali ke topik yang sekarang kita bahas, mari langsung saja praktekan.

#Membuat Tabel Standar
Buat postingan baru di blog
Ke tab HTML, kamu ketikan kode dibawah ini

<table border=1>

<tr>

<th>Spesifikasi</th>

<th>Minimum</th>

</tr>

<tr>

<td>Processor</td>

<td>500 MHz</td>

</tr>

<tr>

<td>RAM</td>

<td>256 MB(512 MB up recomended</td>

</tr>

 </table>

Silakan Publikasikan
Apabila kamu lihat hasil nya sampai sini, tabel belum responsive dan tampilannya masih biasa saja
Untuk itu mari kita lanjut ke tahap selanjutnya

#Membuat CSS

• Menuju menu Template
• Kemudian Edit HTML
• Akan muncul kotak tempatnya kode-kode HTML
• Langsung cari kode </head> (cara cepat : CTRL+F lalu ketikan </head>)
• Ketikan kode dibawah, diatas kode </head>

/* CSS Post Table by JT*/



.post-body table th, .post-body table td, .post-body table caption{border:1px solid #d8dde1;padding:.2em .5em;text-align:left;vertical-align:top;}



.post-body table.tr-caption-container {border:1px solid #d8dde1;}



.post-body th{font-weight:700;}



.post-body table caption{border:none;font-style:italic;}



.post-body table{}



.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #d8dde1;}



.post-body th{background:#109C02;color:#fff;}



.post-body table.tr-caption-container td {border:none;padding:8px;}



.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}



.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}



img {max-width:100%;height:auto;border:none;}



table {max-width:100%;width:100%;margin:1.5em auto;}



table.section-columns td.first.columns-cell{border-left:none}



table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}



table.columns-2 td.columns-cell{width:50%}



table.columns-3 td.columns-cell{width:33.33%}



table.columns-4 td.columns-cell{width:25%}



table.section-columns td.columns-cell{vertical-align:top}



table.tr-caption-container{padding:4px;margin-bottom:.5em}



td.tr-caption{font-size:80%}

• Kemudian kamu coba Simpan dan Lihat hasilnya
• Selamat tabel nya sudah responsive mobile

Hasilnya kurang lebih seperti dibawah ini :

Tabel standar (baca : banyak digunakan) diatas apabila tidak terlalu membutuhkan banyak bagian kepala dari struktur tabel tersebut. Seperti contoh diatas kan hanya membuat bagian Spesifikasi dan Minimum saja. Ada lagi bentuk tabel yang mengharuskan bagian kepala tabel nya banyak, seperti yang digunakan untuk tabel spesfikasi handphone, motor, dan lain lain.

#Membuat Tabel bentuk kedua(spesifikasi handphone,motor,dll)

• Buat postingan baru di blog
• Masuk ke tab HTML, lalu ketikan kode dibawah

<table border=1>

<tr>

<th width=35%>Peluncuran</th>

<td>Januari 2016</td>

</tr>

<tr>

<th width=35%>Kartu SIM</th>

<td>Dual SIM (Nano-SIM/ Micro-SIM, dual stand-by)</td>

</tr>

</table>

• Terakhir Publikasikan dan lihat hasilnya

Hasilnya kurang lebih seperti dibawah ini :

Seperti itulah artikel tutorial mengenai Membuat Tabel HTML Responsive dengan CSS di Blog, dengan membuat tabel yang responsive bisa memanjakan dan membuat betah pengunjung yang membukanya dengan menggunakan gadget.

Pengertian dan Mengenal tag CSS dasar

Pengertian dan Mengenal tag CSS dasar - Ini merupakan pembahasan mengenai CSS perdana, pertama kali yang dibuat. CSS ini singkatan dari Cascading Style Sheet, yang masuk ke dalam kelompok bahasa pemrograman, dimana nanti nya kelanjutan dari HTML. Sudah pasti, apabila anda ingin mempelajari CSS maka harus mengetahui terlebih dahulu HTML nya. Yang akan menstruktur kan halaman web menjadi lebih rapi dan enak untuk dilihat. Sebetulnya bisa tanpa CSS, hanya menggunakan bahasa HTML saja, tetapi pembuatan yang rumit yang akan berimbas ke harga menjadi mahal apabila program tersebut akan dijual, seperti yang dialami ketika HTML pada versi 3.2.

CSS adalah suatu bahasa pemrograman, untuk menstruktur komponen - komponen web sesuai keinginan kita, dimulai dari pewarnaan, tata letak, sampai pengaturan paragrap sekalipun bisa dengan CSS. Karena dengan CSS ini lah pengerjaan kita bisa semakin mudah, serta cepat. Namun, mudah dan cepat ini tanpa mempunyai alasan, itu karena ketika kita ingin membuat dan mengedit hanya dari 1 file saja, berbeda apabila kita ingin mengubah warna pada halaman 1 dan halaman 2, maka harus mengedit di kedua file tersebut. Mending kalo yang dibuat halaman nya hanya 2, coba misal yang dibuat pada web tersebut lebih dari 2 halaman, maka proses pembuatan dan pengeditan akan memakan waktu yang tidak sebentar. Maka dengan CSS ini lah bisa memudahkan kita baik dalam proses pembuatan maupun pengeditan.

Dibawah akan saya coba memberikan tag dasar mengenai syntax yang akan digunakan dalam pembuatan CSS dasar ini.
h5 { font-size : 18px; color : red; }
Keterangan :
h5, merupakan selector atau tag HTML yang dipilih untuk diformat
font-size, merupakan properti dari CSS
18px, nilai dari properti CSS
{ }, merupakan tanda kurawal yang akan menjadi deklarasi atau statement CSS
Setiap proses akan diakhir dengan tanda ;
Tanda pemisah antara properti dengan nilai dengan menggunakan tanda titik dua (:)


Seperti hal nya bahasa pemrogram lainnya, katakan saja PHP, JavaScript, ASP dan lainnya. CSS pun mempunyai tag komentar, ini dimaksudkan agar tag yang dituliskan pada web editor tidak bekerja atau tampil pada web browser. CSS comment tersebut bisa kita buat dengan tag /* dan diakhir dengan */. Seperti tutorial sebelumnya yang sudah kita sama - sama pelajari mengenai Komentar pada PHP dengan mudah, tag nya sama.
Seperti itu lah pembahasan mengenai CSS dasar serta penulisan nya, apabila ada pertanyaan silakan bisa diajukan di kolom komentar saja ya. ^_^