HTML
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Membuat Efek Api pada Teks dengan CSS

Saturday, January 04, 2014 7 Comments

Membuat Efek pada Teks dengan CSS

Glow Effect
Glow Effect
   Kali ini saya akan berbagi ilmu mengenai CSS, yaitu memberikan efek glow (text shadow) pada teks. Ada tiga efek yang akan saya bagi di sini.

1. Fire Effect


Taufan Prihantoro


Script CSS:
.fire{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; width: 500px;}

2. Neon Light

Taufan Prihantoro

Script CSS:
.neon{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}

3. Shadow Effect

Taufan Prihantoro

Script CSS:
.shadow{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;}

Baca Juga

1. Cara Mudah Membuat Menu Horizontal Keren dengan CSS
2. Ternyata START Bisa Membuat Komputer HANG
3. WOW! PC dan Laptop Anda Bisa Bicara
4. Cara Melewati Adf.ly di Opera Mini
5. Hal yang Harus dilakukan Saat Sandal Jepit Putus
6. WOW! Kata Kunci Ini Akan Membuat Google Menjadi Menakjubkan!

Cara Mudah Membuat Menu Horizontal Keren dengan CSS

Wednesday, January 01, 2014 16 Comments

Menu Horizontal Dengan CSS3 dan HTML5


Membuat menu horizontal menggunakan CSS dan HTML
Menu Horizontal

    Menu seperti ini sering digunakan di Blog sebagai menu navigasi. Tujuannya untuk memudahkan pembaca  untuk menemukan artikel di suatu Blog. Mungkin Anda ingin mengetahui cara membuat menu horizontal seperti itu. Berikut caranya:

1. Buka Notepad.

2. Paste script HTML di bawah ini:
    <!doctype html>
<html>
<head>
<title>Belajar UL Horizontal</title>
<style>

</style>
</head>
<body>
<ul class="float">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Hiburan</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Daftar Isi</a></li>
</ul>
</body>
</html>

3. Taruh script CSS di bawah ini di dalam tag style:
.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: small-caps;
background:#000;
border: 1px solid black;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}

 4. Simpan file dengan format .html dan save as type: All Files.


Hasilnya:



Baca Juga

Memadukan Tabel dengan CSS

Friday, December 20, 2013 2 Comments

Memberikan Tabel Sebuah Style yang Menakjubkan

CSS digunakan untuk memberi style pada suatu objek
Tabel

     Untuk memberikan style di sebuah tabel, hal yang diperlukan adalah bahan percobaan yaitu tabel. Script tabelnya :




Script Tabel <table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
<tr>
<td>1.6</td><td>Donut</td>
</tr>
</table>
dan Anda telah mengetahui apa itu CSS.

Memberikan Style collapse

<html>
<head>
<style>
table
{
border-collapse:collapse;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
<tr>
<td>1.6</td><td>Donut</td>
</tr>
</table>
</body>
</html>

Style di tag td

a.  Mengatur Align di Tag td

<html>
<head>
<style>
td
{
text-align:center;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

b. Mengatur Padding di td

<html>
<head>
<style>
td
{
text-align:center;
padding:15px;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

Mengatur Width dan Height Tabel

<html>
<head>
<style>
table
{
width:100px;
height:75px;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>
Baca juga: Kelebihan dan Kekurangan nge-Blog dan Blog

Memberikan Teks Sebuah Style dengan CSS

Thursday, December 19, 2013 Add Comment

Memberikan Style ke dalam Sebuah Kata

CSS bukanlah bahasa pemrograman
CSS

    Kata akan lebih menarik jika kata tersebut memiliki warna yang indah, bentuk yang menarik. Dalam dunia Web untuk memberikan style ke dalam sebuah kata digunakanlah CSS. Dalam menggunakan CSS saya biasanya menggunakan metode Inline Style Sheet atau Internal Style Sheet.

Untuk belajar CSS, Anda harus menguasai HTML.

Membuat HTML dengan Metode Inline Style Sheet dan Internal Style Sheet

A. Memberikan Warna

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 style="color:red; text-align:center;">Taufan Prihantoro</h1>
<h1 style="color:green;">Taufan Prihantoro</h1>
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
body
{
color:blue;
}
h1.taufan
{
color:red;
text-align:center;
}
h1.prihantoro
{
color:green;
}
</style>
<title>Belajar CSS</title>
</head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 class="taufan">Taufan Prihantoro</h1>
<h1 class="prihantoro">Taufan Prihantoro</h1>
</body>
</html>


B. Memberikan Garis

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-decoration:underline;">Teks bergaris bawah</h1>
<h1 style="text-decoration:overline;">Teks bergaris atas</h1>
<h1 style="text-decoration:line-through;">Teks dicoret</h1> 
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
h1.bawah
{
text-decoration:underline;
}
h1.atas
{
text-decoration:overline;
}
h1.dicoret
{
text-decoration:line-through;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1 class="bawah">Teks bergaris bawah</h1>
<h1 class="atas">Teks bergaris atas</h1>
<h1 class="dicoret">Teks dicoret</h1> 
</body>
</html>

C. Huruf Awal Teks Berhuruf Kapital

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-transform:capitalize;">huruf awal di seluruh teks ini berhuruf besar</h1> 
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
h1
{
text-transform:capitalize;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1>huruf awal di seluruh teks ini berhuruf besar</h1> 
</body>
</html>

D. Memberikan Background Pada Teks

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<p style="background:yellow;">Taufan Prihantoro</p>
<p style="background:lightblue;">Taufan Prihantoro</p>
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
p.yellow
{
background:yellow;
}
p.birumuda
{
background:lightblue;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="yellow">Taufan Prihantoro</p>
<p class="birumuda">Taufan Prihantoro</p>
</body>
</html>

E. Margin dan Padding

<html>
<head>
<style>
p.margin
{
margin:50px;
background:lightgreen;
}
p.padding
{
padding:50px;
background:lightblue
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="margin">Teks dengan margin 50px</p>
<p class="padding">Teks dengan padding 50px</p>
</body>
</html>

F. Memberikan Efek Shadow

<html>
<head><title>CSS</title>
<style>
h1
{
text-shadow:15px 15px 15px blue ;
text-align:center;
font-size:100px;
color:red;
}
</style>
</head>
<body>
<h1>Taufan Prihantoro</h1>
</body>

Cara Mudah Membuat Tabel dengan HTML

Thursday, December 19, 2013 1 Comment

Membuat Tabel dengan HTML

 
    Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Lalu, bagaimana membuat tabel dengan HTML?. Ada elemen apa saja untuk membuat tabel?. Di bawah ini ada tulisan yang akan menjawab semua pertanyaan itu.

1. Bagaimana Membuat Tabel dengan HTML?

    Untuk membuat tabel dengan HTML harus diawali dengan tag <table> dan diakhiri dengan tag </table>.

2. Elemen yang Ada di HTML

ElemenFungsi
captionMendifinisikan judul tabel
thTable Heading. Membuat heading dalam cell
trTable Row. Membuat baris tabel
tdTable Data. Membuat kolom

3. Cara Membuat Tabel

   Sebelum melanjutkan bahasan ini, mari kita ketahui ada attribute apa saja di dalam tag td.


AttibuteFungsi
align="center|left|right"Perataan teks di dalam cell secara horizontal
valign="top|middle|bottom"Pertaaan teks di dalam cell secara vertikal
colspan="n"Menggabungkan kolom sebanyak n
rowspan="n"Menggabungkan baris sebanyak n
cellspacing="n"Memberikan jarak antar sel
cellpadding="n"Memberikan jarak dengan border
bgcolor="color"Memberi warna pada background
background="gambar"Memberi background bergambar


Sekarang kita buat tabel:

1. Dengan Attribute align, bgcolor, dan background

   Untuk menggunakan attribute background Anda diharpakan sudah mengetahui cara memasukan alamat filenya ke dalam HTML.

<html>
<head><title>Tabel</title></head>
<body>
<table border="1" background="gambar.ekstensi" align="center">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td align="center" bgcolor="green">1.5</td><td>Cupcake</td>
</tr>
<tr>
<td align="center" bgcolor="blue">1.6</td><td>Donut</td>
</tr>
<tr>
<td align="center" bgcolor="yellow">2.0</td><td>Eclair</td>
</tr>
</table>
</body>
</html>

Disimpan dengan ekstensi .html
Hasilnya:
Penggunaan attribute bgcolor dan align di tabel menggunakan HTML
Tabel dengan align center dan bgcolor.

2. Menggunakan Attribute colspan dan rowspan

A. colspan

<html>
<head><title>Tabel</title></head>
<body>
<table border="1">
<tr>
<td colspan="2">Kolom Yang digabungkan</td>
</tr>
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Merger Kolom dengan attribute colspan
Menggabungkan Kolom.

B. rowspan

<html>
<head><title>Tabel</title></head>
<body>
<table border="1">
<tr>
<td rowspan="2">Kolom Yang digabungkan</td><td>Nomor Versi Android</td>
</tr>
<tr>
<td>Nama Versi Android</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Menggunakan attribute rowspan
Menggabungkan Baris.

3. Menggunakan Attribute cellspacing dan cellpadding

A. cellspacing

<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellspacing="15">
<tr>
<td>Nama Versi Android</td><td>Nomor Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Mengatur jarak dengan attribute cellspacing
Mengatur Jarak Antar Cell.

B. cellpadding

<html>
<head><title>Tabel</title></head>
<body>
<table border="1" cellpadding="15">
<tr>
<td>Nama Versi Android</td><td>Nomor Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Menggunakan cellpadding untuk tabel
Penggunaa cellpadding.

    Sekian dari saya tentang Cara Mudah Membuat Tabel dengan HTML. Apabila ada yang belum mengerti bisa tinggalkan petanyaan di komentar. Terima Kasih.
 Memadukan Tabel dengan CSS.

Baca juga --- Perkenalan dengan CSS

Membuat Halaman Web dengan Tag HTML Sederhana

Tuesday, December 17, 2013 1 Comment

Membuat Halaman Web Dengan Tag HTML Sederhana

     Setelah mempelajari artikel sebelumnya yaitu tag-tag dasar HTML, sekarang kita akan membuat halaman web dengan menggunakan tag-tag tersebut. Seperti apa jadinya jika kita menggabungkan tag-tag tersebut? CTO:

1. Membuat Background

     Tulis struktur HTML, lalu di tag body tambahkan attribute background atau bgcolor.

A. Attribute background

    Fungsinya untuk membuat background suatu halaman web bergambar. Caranya tuliskan script HTML berikut: <body background="alamatgambar.ekstensi">.

Cara memasukan file ke dalam script HTML:
    Alamat gambar dapat berupa URL atau direktori dari PC. Untuk gambar yang memiliki folder terpisah dengan file HTML yang dibuat, maka tuliskan alamatnya dengan benar. Contoh jika ingin memasukan gambar yang berjudul Adik.jpg yang berada di:
Mengubah alamat file ke script HTML
Alamat file Adik.jpg

     Maka alamat yang ditulis <body background="D:/Tefanz/Multimedia/Images/Keluarga/Adik.jpg>
Sedangkan untuk gambar dan file HTML yang dibuat berada di folder yang sama, maka alamat yang ditulis <body background="Adik.jpg">

B. Attribute bgcolor

    Caranya cukup mudah hanya menambahkan bgcolor="warna" di tag body. Contoh: <body bgcolor="#1acbe9">

2. Menggunakan Tag title

   Tag title ditulis di antara tag head. Fungsi dari tag ini adalah memberi judul halaman web yang ditampilkan di title bar. Contoh:
<head>
<title>My Web</title>
</head>

3. Menggunakan Tag heading

    Cara membuat heading dengan menuliskan script: <h...>...</h...>. diisi dengan angka 1-6. Semakin besar angkanya semakin kecil tulisannya. Contoh:
<h1>Taufan Prihantoro</h1>

Jika Anda ingin heading ini berada di tengah, tinggal tambahkan tag center, menjadi:
<center><h1>Taufan Prihantoro</h1></center>.

4. Paragraf dan Line Break(enter)

    Untuk membuat paragraf tinggal ketik <p>...isi paragraf</p>. Sedangkan untuk enter atau pindah baris ketik <br>, tag ini tidak mempunyai tag end.

5. Memformat Teks

     1. Membuat tulisan bold: <b>Tulisan bold</b>
     2. Membuat tulisan bergaris bawah: <u>Tulisan bergaris bawah</u>
     3. Membuat tulisan italic: <i>Tulisan miring</i>
     4. Membuat tulisan dicoret: <s>Tulisan yang dicoret</s>
     5. Membuat garis horizontal: <hr>, tag ini juga tidak mempunyai tag penutup.
     6. Membuat teks bergerak: <marquee>Teks bergerak</marquee>
         Di tag marquee ada beberapa attribute dan value:
       
AttributeValueKeterangan
behavioralternateTeks bergerak memantul
scrollTeks bergerak terus menerus
slideTeks bergerak Sekali
directionleftkiri
topatas
rightkanan
bottombawah
loopnPerulangan yang bernilai n
bgcolorcolorWarna latar belakang cell

     7. Membuat tulisan subscript: O<sub>2</sub>
     8. Membuat tulisan superscript: 2<sup>3</sup>=8
     9. Membuat keterangan alamat: <address>...</address>

6. Membuat Daftar (List)

   Setiap list memiliki tag li, fungsinya untuk menandakan bahwa teks yang diapit oleh tag li adalah bagian dari list. Ada 2 jenis list yaitu:

A. Ordered List

    Yaitu daftar yang terurut, seperti penomorannya menggunakan angka, huruf, angka romawi, huruf kapital. Tag yang digunakan adalah tag ol. contoh:
<ol>
<li>CSS</li>
<li>CSS3</li>
<li>HTML</li>
<li>HTML5</li>
<li>Javasctipt</li>
</ol>

   Untuk mengatur penomoran list mulai dari mana bisa ditambahkan attribute: start.
   Untuk mengatur model penomoran apakah menggunakan nomor atau huruf tambahkan attribute: type.
Contoh:
<ol type="A" start="B">
<li>CSS</li>
<li>CSS3</li>
<li>HTML</li>
<li>HTML5</li>
<li>Javasctipt</li>
</ol>

B. Unordered List

    Yaitu List yang menggunakan simbol. Tag yang digunakan adalah <ul>. Contoh:
<ul>
<li>CSS</li>
<li>CSS3</li>
<li>HTML</li>
<li>HTML5</li>
<li>Javasctipt</li>
</ul>

Apa Jadinya Jika Kita Menggabungkan tag-tag diatas?

Inilah hasilnya apabila Anda menyatukan tag-tag diatas:
Penggunaan tag HTML dasar di halaman web
Hasil
Dengan script:
<html>
<head>
<title>My Web</title>
</head>
<body bgcolor="#1acbe9>
<center><h1>Taufan Prihantoro</h1></center>
<p>Isi Paragraf</p><br>
Baris Baru
<br><b>Tulisan dengan style bold</b>
<br><i>Tulisan dengan style italic</i>
<br><u>Tulisan dengan style underline</u>
<br><s>Tulisan dengan style strike out</s>
<hr>
<marquee behavior="alternate">Tulisan Bergerak Memantul</marquee>
CO<sub>2</sub>
5<sup>2</sup>
<address>Bandung, Jawa Barat, Indonesia</address>
<ol>
<li>HTML</li>
<li>HTML5</li>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
</ol>
<br>
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>Javascript</li>
<li>C++</li>
<li>Java</li>
</ul>
</body>
</html>
   Coba Anda perhatikan tag-tag yang ada. Pahami apa fungsi dari tag tersebut. Jika Anda sudah paham, maka Anda akan tahu kapan tag tersebut digunankan.

Sekian dari saya, Terima Kasih Sudah Membaca.

Baca juga: Hal yang Harus dilakukan Saat Sandal Jepit Putus
Subscribe to: Comments (Atom)