Mahbub: 2016

Kamis, 18 Februari 2016

Cara mengganti background HTML dengan notepad

Kali ini saya akan menuliskan tentang bagaimana cara nya mengganti background untuk HTML dengan notepad

contoh:

<html>
<head>
<title>Gufron Ramadhan Page</title>
</head>
<body bg background=”C:/Users/User/Pictures/barcelona3.jpg”>
</body>
</html>

gambar background dapat di ganti dengan gambar kesukaan masing masing
dengan hanya tinggal mengubah direktori tempat gambar itu di simpan

Source :https://gufronblogblog.wordpress.com/2013/04/08/cara-mengganti-background-html-dengan-notepad/

Senin, 15 Februari 2016

MENYISIPKAN GAMBAR, LINK, FRAME, TABEL, DAN FORM KE DALAM HTML

Cara Membuat Gambar, Link, Tabel , Frame pada HTML

Pertama kali kita Buka Menu Notepad yang dapat kita buka di Accessories
Setelah Terbuka kita ketikkan Coding-an HTML yang akan kita gunakan seperti gambar dibawah ini :

Pembuka HTML

<html> ini merupakan pembuka jika kita membuat HTML

<head> ini merupakan tanda bahwa kita sudah memulai membuat dokumen

<title>Putri Meilani (HTML)</title> ini merupakan judul dari HTML yang kita buat

</head> ini merupakan penutup dari dokumen yang kita buat

<h1 align=”center”>Selamat Datang di HTML saya

Rumus diatas merupakan header yang jenis ukuran hurufnya paling besar (h1) dan terletak di rata tengah ( center ) . Header ini bertuliskan “ Selamat Datang di HTML saya “

<body text=”purple” bgcolor=”pink”> ini merupakan isi dari dokumen yang madsudnya adalah warna tulisan dokumen adalah Ungu, dan latar belakang dokumen adalah Pink .

</body> ini merupakan penutup dari isi dokumen

</html> ini merupakan penutup dari kepala HTML

</p> ini merupakan spasi baris

Menyisipkan Gambar di HTML

Sebelum kita menyisipkan gambar terlebih dahulu kita memastikan bahwa gambar yang akan kita masukkan sudah berada didalam folder laptop yang kita gunakan .

<img src=”../pictures/meilani.jpg” width=”120″ height=”120″> ini merupakan rumus bila kita ingin memasukkan gambar kita ke dalam HTML yang kita buat .

<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade> ini merupakan spasi baris

Bila Rumus yang kita masukkan sudah benar maka tampilannya adalah sebagai berikut :

Memasukkan Teks ke dalam HTML

<h1 align=”center”><i>Perkenalkan nama saya Putri Meilani, saya mahasiswi semester 2 di Universitas Gunadarma. Saat ini saya duduk di kelas 1DA03 dengan jurusan Akuntansi Komputer, ini adalah Homepage HTML saya yang pertama.HTML ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih sederhana .</i>

Rumus diatas merupakan header yang jenis ukuran hurufnya paling besar (h1) dan terletak di rata tengah ( center ) . Header ini bertuliskan “Perkenalkan nama saya Putri Meilani ….. “

Bila kita ingin memiringkan tulisan kita, maka kita gunakan <i> dan penutupnya </i>

<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade> ini merupakan spasi baris .

Maka tampilannya jika sudah jadi sebagai berikut :

Memasukkan Link ke dalam HTML

Disini saya akan memasukkan Link Blog WordPress saya kedalam HTML yang saya buat dengan cara :

<a href=”https://meilaniputrimarpaung94.wordpress.com/”

target=”_top”>Silahkan klik disini link saya</a><br>

Rumus diatas merupakan sebuah rumus yang digunakan untuk memasukkan Link kedalam HTML

<br> ini dimadsudkan sebagai spasi baris .

<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade> Rumus ini dimadsudkan sebagai spasi baris

Maka tampilannya adalah sebagai berikut :

Menyisipkan Frame pada HTML

Sebelumnya terlebih dahulu kita membuka menu Notepad untuk membuat Frame, karna Frame tidak bias digabungkan dengan Rumus sebelumnya .

<html> ini merupakan pembuka dari HTML

<head> ini merupakan awal dokumen HTML

<title>Meilani Frame-This is my Frame ^_^</title> ini merupakan judul pembuka HTML yang kita buat

</head> ini merupakan penutup dari dokumen

<frameset cols=”148,*”> ini merupakan ukuran Frame yang akan kita gunakan

<frameset rows=”164,*” border=”0″>

<frame src=”../pictures/niy.jpg” scrolling=”no” marginwidth=”0″ marginheight=”0″>

<frame src=”../pictures/yuyu.jpg”> ini merupakan isi dari Frame yang kita gunakan, disini saya mengisikan sebuah foto untuk mengisi frame yang saya buat

</frameset> Ini merupakan sebuah penutup himpunan frame

<frame src=”../pictures/eke.png” noresize> ini merupakan isi dari Frame yang kita gunakan, disini saya mengisikan sebuah foto untuk mengisi frame yang saya buat

</frameset> ini merupakan sebuah penutup himpunan frame

Maka setelah itu kita simpan file HTML kita dengan judul Frame1.Html
Lalu kita ketikkan Rumus seperti gambar dibawah ini :

<a href=”frame1.html”

target=”_top”>silahkan klik frame disini</a><br>

Ini merupakan rumus untuk menyisipkan alamat Frame yang telah kita buat tadi

<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade> Ini merupakan spasi baris

Maka tampilannya akan sebagai berikut :

Dan isi Frame yang kita buat adalah sebagai berikut :

Membuat Tabel di HTML

<table style=”background:#FFFF00″ width=”50%” border=”1″> Ini merupakan rumus untuk mendesain table yang kita buat , dengan arti table ini saya beri warna Merah muda, dengan besar 50%, dan garis bordernya 1

<tr> Ini merupakan baris pada tabel dan element ini harus berada di dalam element TABLE

<th style=”background:white;width:50%;”>Data Siswa Perempuan</th> ini merupakan informasi dari isi table yang kita buat, yang isinya adalah “ Data siwa Perempuan “

<th style=”background:white;”>Data Siswa Laki-laki</th> ini merupakan informasi dari isi table yang kita buat, yang isinya adalah “ Data siwa Laki-laki “

</tr> ini merupakan tanda bahwa kita telah keluar dari baris pada table .

<tr>

<td>Aditya Ramadhani</td>

<td>Ahmad Fathoni</td>

</tr>

<tr>

<td>Ratih Pratiwi</td>

<td>John Ericson</td>

</tr>

</table>

Rumus diatas bermadsud bahwa kita telah memasukkan data kedalam table yang kita buat.

Maka tampilan table yang kita buat adalah sebagai berikut :

Memasukkan Form ke dalam HTML

Sama seperti pada saat kita membuat Frame, disini kita juga membuat Form dengan cara membuka menu Notepad baru .

<html> Ini merupakan kepala dari HTML

<head> Ini merupakan awal dari dokumen HTML

<title> Membuat Forms</title> Ini merupakan isi dokumen Html

</head> Ini merupakan penutup dari isi dokumen html

<body text=”purple” bgcolor=”pink”> Ini merupakan isi dokumen html yang kita buat yang artinya bahwa isi dari html kita adalah warna tulisannya Ungu dan latar belakangnya Merah muda

</body> Ini merupakan penutup dari isi dokumen .

Rumus dibawah ini adalah isi dari Form yang kita buat .

Masukkan Nama<br>

<form>

Nama Depan: <input type=”text” name=”Nama Depan” /><br/>

<br>

Nama Belakang: <input type=”text” name=”Nama Belakang” />

</form>

Masukkan Password<br>

<form>

Password: <input type=”password” name=”pwd” />

</form>

Jenis Kelamin<br>

<form>

<input type=”radio” name=”sex” value=”male” /> Lakilaki<br />

<input type=”radio” name=”sex” value=”female” /> Perempuan

</form>

Pilih salah satu :<br>

<form>

<input type=”checkbox” name=”vehicle” value=”Motor Cycle” /> Saya Mempunyai Sepeda Motor<br />

<input type=”checkbox” name=”vehicle” value=”Car” /> Saya mempunyai mobil

</form>

Tombol Input<br>

<form name=”input” action=”html_form_action.asp” method=”get”>

Username: <input type=”text” name=”user” />

<input type=”submit” value=”Submit” />

<br>

</body>

</html>

Jika kita sudah membuat Form Html kita, maka kita simpan Form HTML kita dengan format penyimpanan, Form.HTML

Setelah itu kita kembali ke dokumen HTML yang sebelumnya dan melanjutkan rumus kita :

<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade> Ini merupakan spasi baris

<a href=”form.html” Ini merupakan Rumus untuk memasukkan Form yang kita buat tadi .

target=”_top”>silahkan klik form disini</a><br>

Maka tampilan Form kita sebagai berikut :

Maka selesailah HTML yang kita buat, dan tampilannya adalah sebagai berikut :

Source :https://meilaniputrimarpaung94.wordpress.com/2013/06/17/menyisipkan-gambar-link-frame-tabel-dan-form-ke-dalam-html/

Membuat list simbol dengan HTML

Tag <ul></ul> dan <li></li> : Membuat list simbol dengan HTML

Tag <ul> digunakan untuk membuat daftar dengan penanda simbol. Tag ini mempunyai attribute dan value. Attribute :

Type : Digunakan untuk mengubah simbol dari daftar. Valuenya adalah disc, square, atau circle. Value defaultnya adalah disc.

Tag ini mempunyai tag penutup yaitu </ul>. Tag ini digunakan secara bersamaan dengan tag <li></li>. Fungsi tag <li> adalah untuk menambah daftar/isi dari tag <ul></ul>. Cara menggunakan tag <ul> yaitu dengan menyisipkan item ke dalam tag pembuka dan tag penutup yang diapit dengan tag <li> dan </li>.

~CONTOH~

<html>

<body>

<ul>

</ul>

</body>

</html>

Kemudian save sesuai dengan tata cara membuat halaman HTML

Output yang ditampilkan browser adalah :

Item 1
Item 2
Item 3

<html>

<body>

</ul>

</body>

</html>

Kemudian save sesuai dengan tata cara membuat halaman HTML

Output yang ditampilkan browser adalah :

Item 1
Item 2
Item 3

<html>

<body>

</ul>

</body>

</html>

Kemudian save sesuai dengan tata cara membuat halaman HTML

Output yang ditampilkan browser adalah :

Item 1
Item 2
Item 3

<html>

<body>

</ul>

</body>

</html>

Kemudian save sesuai dengan tata cara membuat halaman HTML

Output yang ditampilkan browser adalah :

Item 1
Item 2
Item 3

~#####~

Jika ada yang ingin ditanyakan atau masukan silahkan ditulis di kotak komentar.

Source : http://fsfsource.blogspot.co.id/2012/03/tag-dan_14.html?m=1

Minggu, 14 Februari 2016

Jenis Jenis Tag Kondisional dalam HTML dan Fungsinya

Jenis Jenis Tag Kondisional dalam HTML dan Fungsinya. Tag Kondisional adalah kode HTML yang memberikan fungsi atau kegunaan yang mengkhusus dalam HTML yang dibungkusnya. Dengan memasang condisional tag atau tag kondisional, kita dapat mengatur dimanakah atau kapankah HTML akan muncul. Bergitulah kira kira kegunaan dari Tag Kondisional.

Ada berbagai macam Tag Kondisional yang terdapat di HTML. Tetapi tidak perlu menghafalkan keseluruhannya. Kalau kodenya dihafal pasti tidak akan ingat. Sebaiknya di pahami artinya. Karena kode HTML kebanyakan yang berbahasa inggris. Coba saja lihat beberapa condisional tag yang ada dibawah ini.

Jenis Jenis Tag Kondisional

Halaman Beranda Blog (Home Page)

Tag kondisional pada halaman beranda blog adalah sebagai berikut

<b:if cond='data:blog.url ==
data:blog.homepageUrl'>

Pengertian dari halaman beranda disini adalah URL halaman depan dari blog. Tanpa path/cabang seperti:
http://jonarendra.blogspot.com

Halaman Index

Untuk seluruh laman index pada blog condisional tag nya adalah

<b:if cond='data:blog.pageType ==
"index"'>

Halaman Post / Artikel

Jika ingin menampilkan elemen pada halaman posting saja, tag kondisional yang digunakan adalah seperti ini

<b:if
cond='data:blog.pageType == "item"'>

Contoh dari URL posting adalah begini
http://jonarendra.blogspot.com/2013/11/Jenis-Jenis-Tag-Kondisional.html

Halaman Statis

Halaman statis atau static page juga mempunyai kemiripan dengan posting. Biasanya sering disebut dengan Laman atau Page. Misalkan halaman statis pada blog ini seperti
http://jonarendra.blogspot.com/p/link.html
Elemen yang diatur dalam halaman statis dapat menggunakan tag kondisional, yaitu

<b:if cond='data:blog.pageType ==
"static_page"'>

Halaman Arsip

Archive atau arsip adalah halaman arsip pada tiap blog. Ini pun ada tag kondisional untuk mengatur elemen yang ada hubungannya dengan halaman arsip

<b:if
cond='data:blog.pageType == "archive"'>

Halaman URL Tertentu

Jika ingin membuat kondisi blog berbeda pada halaman di URL tertentu anda bisa menggunakan tag kondisional yang ini

<b:if
cond='data:blog.url == "URL TERTENTU"'>

Ganti saja URL TERTENTU dengan link anda

Halaman Post dan Statis

Ini berguna dan akan aktif pada halaman posting dan pages (static page)

<b:if cond='data:blog.pageType ==
"data:post.url"'>

Halaman Kesalahan / Error 404

Apabila ada link rusak, kesalahan perayapan ataupun link yang tidak ada dalam blog dicari pengunjung, akan tampil halaman Error 404. Untuk menambah CSS atau HTML pada halaman tersebut, gunakan tag seperti ini

<b:if
cond='data:blog.pageType == "error_page"'>

Blog Dalam Kondisi Mobile

Kondisi blog yang dibuka dalam ponsel / mobile pasti harusnya memiliki tampilan yang ringan untuk dimuat. Jadi, pakai tag kondisional berikut jika ingin mengatur halaman blog pada mobile

<b:if
cond='data:blog.isMobile'>

Halaman mobile ditandai dengan URL blog yang ditambahkan dengan ?m=1

Halaman Search Label

Tag kondisional juga ada yang berhubungan dengan halaman search label. Seperti berikut ini

<b:if
cond='data:blog.pageType == data:blog.searchLabel'>

Contoh link search label adalah
http://jonarendra.blogspot.com/search/label/Informasi

Halaman Pencarian Label Tertentu

Pencarian pada label tertentu pun mempunyai tag kondisional tersendiri.

<b:if
cond='data:blog.searchLabel == "LABEL"'>

Apabila anda ingin menampilkan atau tidak menampilkan suatu elemen pada halaman pencarian label tertentu, gunakan tag kondisional ini dengan mengganti LABEL dengan label yang diatur

Halaman Pencarian (Search Query)

Biasanya, kalau kita menggunakan search form untuk mencari sesuatu pada blog pasti kita dialihkan ke halaman dengan url begini
http://jonarendra.blogspot.com/search?q=
Jika anda ingin menambahkan sesuatu pada halaman pencarian / search gunakan tag kondisional berikut

<b:if
cond='data:blog.pageType == data:blog.searchQuery'>

Halaman Pencarian Kata Kunci Tertentu

Lebih spesifik lagi dari yang diatas, ini tag kondisional apabila pencarian pada kueri tertentu

<b:if
cond='data:blog.searchQuery == "KEYWORD"'>

Seperti contoh, saya ingin membuat halaman dengan CSS yang berbeda apabila ada pengunjung yang search dengan kata kunci 'blogger'. Maka, pasang tag kondisional seperti diatas dengan KEYWORD menjadi 'blogger'

Bagaimana? sudah lengkap belum Jenis Jenis Tag Kondisional yang saya berikan? Pastinya belum. Karena semuanya bisa dikembangkan lagi menjadi lebih spesifik/detail. Tetapi, apabila anda memiliki tag kondisional umum yang tidak saya buat diatas, silahkan kirim lewat komentar.

Kesimpulannya, Tag Kondisional adalah kode HTML yang digunakan untuk mengatur elemen tertentu pada blog untuk di tampilkan atau tidak ditampilkan pada halaman spesifik, serta pengaturan kondisi elemen tersebut.

SOURCE : http://raramanist.blogspot.co.id/2013/11/jenis-jenis-tag-kondisional-dalam-html.html

kumpulan kode html

HTML pada umumnya memiliki berbagai kode yang digunakan untuk memanggil perintah pada HTML tersebut. Di bawah ini adalah beberapa jenis dan fungsi dari tag HTML yang bisa digunakan, yaitu :
 Memberi komentar atau keterangan.
<a href> Membuat link ke halaman lain dari halaman tersebut.
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama.
<applet> Sebagai awal dari Java applets.
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map.
<b> Membuat teks tebal.
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font.
<bgsound> Memberi (suara latar) background sound pada halaman web.
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya.
<blink> Membuat teks berkedip.
<body> Tag awal untuk melakukan berbagai pengaturan terhadap teks, warna link dan visited link.

<br> Untuk pindah baris.
<caption> Membuat caption pada tabel.
<center> Untuk perataan tengah terhadap teks atau gambar.
<comment> Meletakan komentar pada halaman web tidak akan nampak pada browser.
<dd> Indents teks.
<div> Represents differennt section of text.
<embed> Menambahkan sound atau file avi ke halaman web.
<fn> Seperti tag <a name>.
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan untuk teks.
<form> Mendefinisikan input form.
<frame> Mendefinisikan frame.
<h1>...<h6> Untuk ukuran font.
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal.
<i> Membuat teks miring.
<img> Image, imagemap atau an animation.
<input> Mendefinisikan input field pada form.
<li> Membuat bullet point.
<marquee> Membuat teks berjalan.
<ol> Mendefinisikan awal dan akhir list.
<p> Ganti paragraf.
<pre> Membuat teks dengan ukuran huruf yang sama.
<table> Membuat tabel.
<td> Kolom pada tabel.
<tr> Baris pada tabel.
<u> Membuat teks bergaris bawah.

Contoh :

Hasil Tampilan :

Keteranagn :
- text=#000000 adalah warna untuk tulisan.
- bgcolor=##ff0009 adalah warna untuk background.
- align=center adalah posisi yang ingin di tempatkan.
- size=5 adalah besarnya garis.
- width=50% adalah panjangnya garis. - See more at: http://pendinr.blogspot.co.id/2013/02/jenis-jenis-tag-html.html#sthash.jtrItk3G.dpuf

SOURCE : http://pendinr.blogspot.co.id/2013/02/jenis-jenis-tag-html.html

Hasil Tampilan :

Langganan: Postingan ( Atom )