E-weblog: Oktober 2014

Breaking News

Rabu, 22 Oktober 2014

Belajar Image HTML

Assalamu'alaikum,

Gimana kabarnya nih sahabat E-Weblog? semoga baik-baik aja ya. :-)

Pada kesempatan ini admin mau share ilmu tentang penggunaan image HTML. Pasti kalian sudah punya gambaran dong kayak gimana fungsinya itu. Seperti namanya tag ini memang berhubungan dengan masalah gambar. Pengen tau lebih lanjut? Silahkan simak!

Image HTML : ini digunakan untuk menambah daya tarik pada suatu webpage dengan adanya gambar yang dimasukkan. Ekstensi file gambar yang umum digunakan yaitu | .JPG| .PNG| .GIF. Dalam pemilihan gambar juga harus memperhatikan format gambar yang digunakan agar akses halaman web tidak berat karena gambar yang dipasang. Untuk menyisipkan gambar pada dokumen html tag yang digunakan yaitu <img>.

Sintax penulisannya:

<img src=”url” />

dan atribut yang digunakan adalah :

oh iya, letak file gambar harus sama satu folder dengan file html yang dibuat. Ini agar mempermudah load url gambarnya. Contoh : <img src="gambar.jpg"/> syntax itu langsung ke file gambar karena terletak pada satu folder. Tidak satu folder juga bisa, tapi lebih rumit. Contoh: <img src="../folder1/folder2/gambar.jpg"/> tergantung letak file gambar. Gambar juga bisa digunakan untuk link. Kalian bisa perhatikan script dibawah ini!

<!DOCTYPE html>
<html>
<head>
<title>Img sebagai suatu link</title>
</head>
<body>
<p>
<b>Untuk mengunjungi website amikom klik gambar di samping</b> <a href="http://www.amikom.ac.id"><img src="amikom.jpg" width="50" height="50" align="middle" alt="Tombol" /> </a>
</p>
</body>

</html>

Disini admin menyimpan file latihan1.html berada satu folder dengan file gambar amikom.jpg

Hasilnya akan seperti ini :

Oke, untuk sementara gitu dulu ya sahabat E-Weblog, tetap kunjungi blog ini untuk ilmu lainnya. See You Next Time :-)

Jumat, 17 Oktober 2014

Membuat Text berjalan pada Web

Assalamu'alaikum...

Selamat malam sahabat E-Weblog, semoga kalian belum pada tidur ya. Soalnya E-Weblog datang ingin share ilmu nih. Oh ya kalian pernah melihat teks berjalan pada suatu halaman web kan? nah itu yang akan kita pelajari malam ini. Sebelum pada ngantuk mending kita langsung saja ya.

Tag Marquee

Digunakan untuk membuat efek pada suatu teks. Seperti membuat teks berjalan kekiri kekanan kebawah dan keatas. Hal ini bertujuan untuk menambah daya tarik web.

Ada beberapa atribut yang digunakan oleh tag marquee yaitu:

bgcolor : Atribut ini digunakan untuk mengatur background dari text yang akan diberi efek marquee.
direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
scrollamount : Untuk mengatur kecepatan dari gerakan text (angka dalam px), semakin tinggi angka yang digunakan, maka akan semakin cepat gerakan dari textnya.
behaviour : Untuk mengatur efek dari gerakannya (slide, scroll, alternate).
width : Untuk mengatur lebar dari area text nya (dinyatakan dalam px atau %).
height : Untuk mengatur tinggi dari area text nya (dinyatakan dalam px atau %).
align : Untuk mengatur posisi (center, left, right).
onmouseover : Untuk memberhentikan efek ketia disorot(hover) mouse.
onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot(hover) text.

Untuk lebih jelasnya kalian bisa ketik nih script:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Penggunaan Marquee</title>

</head>

<body>

<marquee>Standar tag marquee tanpa atribut</marquee>

<marquee direction="up">marquee direction="up"</marquee> <marquee direction="right">marquee direction="right"</marquee> <marquee direction="down">marquee direction="down"</marquee> <marquee direction="left">marquee direction="left"</marquee>

<marquee behavior="alternate">marquee behavior="alternate"</marquee>

<marquee behavior="scroll">marquee behavior="scroll"</marquee> <marquee behavior="slide">marquee behavior="slide"</marquee>

<marquee scrollamount="10">marquee scrollamount="10"</marquee> <marquee scrollamount="20">marquee scrollamount="20"</marquee> <marquee scrollamount="30">marquee scrollamount="30"</marquee>

<marquee width="75%">marquee width="75%"</marquee>

<marquee width="30%">marquee width="30%"</marquee>

<marquee height="75%">marquee height="75%"</marquee>

<marquee height="30">marquee height="30"</marquee>

<marquee bgcolor="red">marquee bgcolor="red"</marquee>

<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>

<marquee direction="down" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100"> Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot </marquee>

</body>

</html>

Selamat Mencoba :-)

Standar tag marquee tanpa atribut marquee direction="up" marquee direction="right" marquee direction="down" marquee direction="left" marquee behavior="alternate" marquee behavior="scroll" marquee behavior="slide" marquee scrollamount="10" marquee scrollamount="20" marquee scrollamount="30" marquee width="75%" marquee width="30%" marquee height="75%" marquee height="30" marquee bgcolor="red" marquee bgcolor="#ddd" Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot

Dan semoga postingan E-Weblog malam ini bermanfaat bagi kalian semua. Jangan lupa tetap kunjungi blog ini ya. See you next time..

Salam NetBie...

Cara Membuat LINK pada Web

Assalamu'alaikum..

Hay kawan E-Weblog?

Admin punya ilmu baru nih, kali ini tentang cara membuat link pada web. Oh ya sebagian besar pasti udah tau apa itu link, namun disini admin akan menjelaskan lebih lanjut agar para newbie lebih paham lagi tentang link. Oke, kita langsung aja ke materi.

Link HTML

Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan / atau gambar yang saling menghubungkan menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link sering di singkat hyperlink atau link saja.

Tag Anchor : Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a> diantaranya: atribut href="url" untuk mendefinisikan lokasi link, atribut name="name" untuk mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self". untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser.

Link Relatif : Dibuat untuk membuat suatu link pada page anda ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat format font pada latihan5.html, silahkan klik <a href="latihan5.html">link berikut</a>.
</body>
</html>

maka hasilnya akan seperti ini:

apabila link berikut tadi diklik maka hasilnya akan seperti:

Link Absolut Dibuat untuk membuat link ke page web lain yang berada pada web site lain di internet. Dalam hal ini kalian harus menuliskan alamat internet secara lengkap. Berikut adalah contohnya:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Penggunaan Link Absolut</title>

</head>

<body>

Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a href="http://www.amikom.ac.id">link berikut</a>.

</body>

</html>

maka hasilnya akan seperti ini:

Apabila link diklik maka akan langsung pergi ke web amikom seperti ini:

Link ke Bagian Lain dalam Dokumen: Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut. Ini seperti cara back to top.

Sintaks penulisannya :

<a href="#tujuan">Link asal</a>
Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a>
Artikel bebas
.
.
.

Bagi yang masih penasaran silahkan ketik script ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.Bab 4 ini menunjukkan tujuan dari link dalam satu halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla. Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla.Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>

</html>

Selamat Mencoba :-)
Mungkin cukup sekian dulu yang bisa E-Weblog berikan, nantikan informasi lainnya dilain kesempatan. Jangan lupa tetap kunjungi blog ini ya :-)
See u next time,...
Salam NetBie...

Membuat Akronim/Singkatan pada WEB

Assalamu'alaikum...

Hello sahabat E-Weblog? gimana kabar kalian? moga baik-baik saja ya.

Kali ini admin ingin berbagi ilmu tentang penggunaan akronim/singkatan pada teks. Kalian pasti pernah melihat sebuah kata yang apabila disorot akan muncul tulisan pelengkapnya. Ya seperti itu akronim yang akan admin jelaskan. Daripada kelamaan kita langsung aja yuk ke materi. :-)

Akronim

Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan (akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag <acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title. Sintaks penulisannya :

<abbr title="Kepanjangannya">singkatan</abbr>

<acronym title="Kepanjangannya">singkatan</acronym>

Ketika menggunakan tag diatas, maka pada saat mouse pointer kita berada diatas singkatan tersebut yang di tampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.

Untuk lebih jelasnya kalian bisa ketik nih script:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi.
<br>
<acronym title="Hypertext Transfer Protocol">HTTP</acronym> adalah protokol yang digunakan untuk mentransfer dokumen dalam World Wide Web (WWW)
</body>
</html>

Jika sudah maka apabila di tes pada browser akan tampil seperti ini:

Minggu, 12 Oktober 2014

Cara Membuat LIST (HTML)

Assalammu'alaikum...

E-Weblog hadir lagi nih, yang pasti dengan membawa informasi untuk kita semua. Kali ini E-Weblog akan membahas tentang List (HTML). Oke tanpa basa-basi kita langsung aja ke materi.

List (HTML) merupakan perintah yang digunakan dalam HTML untuk membuat daftar atau pengelompokkan kata. HTML menyediakan 5 cara untuk membuat daftar atau list, yaitu:

Ordered List
Unordered List
Directory List
Menu List
Definition List

Ordered List digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara urut. Ordered list dimulai dengan tag <ol> dan diakhiri tag </ol>. Dan untuk menyatakan setiap bagian digunakan tag <li>. Untuk atribut elemen list yaitu: type = [ 1 | a | A | i | I ] (default 1).

Untuk latihannya kalian bisa ketik nih script:

<html>
<head>
<title>Contoh Penggunaan Ordered List</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF">
 <h1>::- TOKO ELETRONIK ARDAVA -::</h1>
 <hr width="100%" size="5px" align="center">
 <h3>Kategori :</h3>
 <ol type="A">
  <li>Gadget, HP & Accessories</li>
  <li>Computer & Accessories</li>
  <li>Camera & Accessories</li>
  <li>Audio Visual Appliance</li>
  <li>Electronic & Home App.</li>
 </ol>
</body>

</html>

Maka hasilnya akan seperti ini:

Unordered List tidak dijumpai urutan dalam suatu daftar dan setiap bagiannya ditandai dengan tanda bullet. Unordered list dimulai dengan tag <ul> dan diakhiri tag </ul> dan tiap bagiannya digunakan tag <li>. Atribut elemen list yaitu: type = [ disc | square | circle] (default disc).

Untuk latihannya kalian bisa ketik nih script:

<html>
<head>
<title>Contoh Penggunaan Unordered List</title>
</head>
<body bgcolor="#0066FF" text="#FFFFFF">
 <h1>::- TOKO ELETRONIK ARDAVA -::</h1>
 <hr width="100%" size="5px" align="center">
 <h3>Kategori :</h3>
 <ul type="square">
  <li>Gadget, HP & Accessories</li>
  <li>Computer & Accessories</li>
  <li>Camera & Accessories</li>
  <li>Audio Visual Appliance</li>
  <li>Electronic & Home App.</li>
 </ul>
</body>

</html>

Maka hasilnya akan seperti ini:

Oke kawan, untuk sementara begitu dulu. Semoga postingan E-Weblog ini bermanfaat untuk kalian. Tetap kunjungi blog ini untuk informasi yang lain. See You Next Time :-)

Salam NetBie...

Cara membuat karakter unik pada teks

Assalammu'alaikum,

Apa kabar good people? semoga baik-baik saja deh. :-) hehehe.

Oh iya kali ini E-Weblog mau share cara membuat karakter unik pada teks pada web. Buat para alayers pasti senang banget nulis dengan huruf yang aneh, besar kecil simbol apalah itu. Tapi disini E-Weblog tidak ingin mengajari kawan-kawan menjadi alay melainkan tahu dan berinspirasi. Oke langsung saja kita ke TKP :-)

Cara memformat karakter pada HTML itu ada 2, yaitu Logical Format dan Physical Format.

Logical Format akan menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang termasuk pada logical format sebagai berikut:

silahkan ketik aja script berikut dengan notepad++, sublime teks atau bisa juga dengan Adobe Dreamweaver. Setelah itu jangan lupa di save dengan ekstensi .html.

<html>
<head>
<title>Contoh Penggunaan Logical Format</title>
</head>
<body>
<cite>Ir. Soekarno</cite> adalah Presiden pertama republik Indonesia. <br><br>
Untuk menampilkan data array di pemrograman PHP adalah <code>echo "$namaarray[]";</code><br><br>
Saya berkata, "Jangan di pegang <em>nanti rubuh</em>."<br><br>
Untuk mengunjungi wesite amikom, ketikkan pada url <kbd>amikom.ac.id</kbd><br><br>
Pada abjad terdapat 5 huruf vokal, yaitu <samp>AIUEO</samp>.<br><br>
Katakan tidak untuk <strong>Narkoba</strong><br><br>
Kode program tersebut diiterasi sebanyak <var>N</var> kali.<br><br>
<dfn>Ayam adalah hewan berkaki dua.</dfn>
</body>
</html>

Apabila ketika dicek atau dites pada browser maka hasilnya akan seperti ini:

Physical Format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format yaitu:

Untuk yang ingin memahami, kalian bisa ketikkan script dibawah ini :

<html>
<head>
<title>Contoh Penggunaan Physical Format</title>
</head>
<body>
<b>Kalimat ini akan dicetak tebal</b><br>
<i>Kalimat ini akan dicetak miring</i><br>
<u>Kalimat ini akan bergaris bawah</u><br>
<strike>Kalimat ini akan bergaris tengah</strike><br>
<tt>Menampilkan huruf seperti huruf mesin ketik.</tt><br>
H<sub>2</sub>O<br>
2<sup>3</sup>=8<br>
</body>
</html>

Maka hasilnya akan seperti ini:

Oke, sekian dulu yang bisa E-Weblog sharing. Silahkan kalian lebih pahami perbedaan kedua format tersebut agar lebih menguasainya. Jangan lupa tetap kunjungi blog ini ya untuk info lainnya :-)

Wassalammu'alaikum...

Salam NetBie...

Rabu, 08 Oktober 2014

Komentar

Assalamu'alaikum...

E-Weblog hadir lagi nih dengan informasi baru. Kali ini admin ingin membagi ilmu tentang Penggunaan Komentar di web. Pasti kalian ada yang penasaran kan? Oke kita langsung saja ke materi.

Dalam suatu dokumen informasi ada sebagian teks yang berfungsi sebagai catatan atau komentar untuk dokumen tersebut. Komentar ini tidak akan ditampilkan dalam browser. Teks yang berfungsi sebagai komentar disimpan dalam tag

Untuk prakteknya ketik aja script berikut dengan notepad++ atau bisa juga dengan Adobe Dreamweaver.

<html>
<head>
<title>Penggunaan Komentar</title>
</head>
<body>

<p>Rajin pangkal <b>pandai</b></p>

</body>
</html>

Apabila sudah menulis seperti diatas, langkah selanjutnya save-as file dengan ekstensi .html, nama boleh bebas. Kemudian cek hasilnya dengan klik file tersebut dan lihat tampilan yang tampak dibrowser. Apabila yang nampak hanya tulisan "Rajin pangkal pandai" berarti script sudah benar.

Dari materi diatas kita ketahui bahwa ada komentar yang tidak muncul dibrowser, untuk mengetahui komentar apa itu kita bisa mengeceknya dengan cara tekan Ctrl + U dibrowser Mozilla maka akan nampak komentar yang disembunyikan itu.

Oke, sekian dulu yang bisa E-Weblog sharing. Tunggu ilmu lainnya yang akan admin sharing juga og. Yang pasti tetap kunjungi blog ini. :-)
See U next time
Salam NetBie...