| Comunitas Artikel

Belajar Membuat web sederhana dengan HTML

(Bagian 1)

Ahmad Hasnan,

Mahasiswa Teknik Mesin Universitas Brawijaya, Anggota komunitas web

(webcom) Unibraw.

Bahasa HTML merupakan bahasa markup (p

elekat) untuk menampilkan teks. Gambar dan

multi media. Dalam html terdapat tag-tag ya

ng mampu dibaca oleh browser web sehingga

tampilan informasi luar biasa dapat kita nikmati.

Berikut kita akan mempelajari bagaimana membuat web sederhana dengan bantuan HTML

mulai dari tingkat dasar tutorial ini akan me

ngajari anda dari tidak mengerti sama sekali

tentang pembutan situs sampai anda dapat me

mbuat web sendiri dan anda akan belajar

bagaimana membuat situs yang menarik dengan bahasa sederhana ini.

Mulai Menulis HTML

Penulisan bahasa HTML dapat dilakukan de

ngan software word processor seperti

Microsoft word, word pad, kword atau notepa

d, demi kecepatan da

lam penulisan penulis

sarankan untuk menggunkan Notepad,lalu

bagaimana menggunakan NotePad ?, untuk

memulai menggunakan notepad pada wind

ows, klik start, lalu program kemudian

accessories lalu klik notepad,

perhatikan gambar dibawah

Tampilan dari notepad adalah :

untuk menyimpan file kedalam format HTML klik

menu file. Lalu pilih save as ketikkan nama

file anda dan akhiri dengan exte

nsion html, misalnya index.html

biasanya dalam menulis kode – kode html

akan menghasilkan baris yang panjang dan

biasanya akan melebar kea rah baris, untuk

mengatasi hal tersebut dalam menu notepad

terdapat menu word warp yang akan memfor

mat baris baris tersebut ke dalam ukuran

window, sehingga lebih mudah dibaca, untuk

mengaktifkannya klik menu edit lalu pilih Word

Wrap.

Dalam menulis tag HTML kita selalu membut

uhkan tag awal dan tag akhir namun ada

beberapa tag HTML yang tidak membutuhk

an tag akhir misalnya tag paragraph.

Document web sederhana

Dalam bab ini anda akan membuat file html

paling sederhana yang terdiri dari dua

tag yaitu tag untuk html <html> dan bodi

<body>, untuk memulainya buka notepad anda,

ketikkan pada notepad kode html berikut :

<html>

<body>

Web Pertamaku !!!

</body>

</html>

Selanjutnya simpan dengan nama index.html

, panggil dengan browser anda misalnya

internet explorer, caranya pada menu internet ex

plorer klik file lalu open dan pilih dimana file

index.html disimpan klik open, tampilan dari kode

diatas saat dipanggil oleh browser adalah :

Sampai disini anda sudah bisa membuat file

berformat html dengan kata lain anda

telah membuat sebuah halaman web.

Menggunakan Tag Head dan Body

Pada bagian head kita dapat memasukkan judu

l, tag judul dipakai secara luas oleh

mesin pencari web, selain itu dalam penulis

an judul usahakan sesingkat mungkin namun

masih bisa mencerminkan isi dari web anda.

Untuk memulainya buka notepad, ketikka

n <HTML> untuk menambahkan bagian

head ketikkan tag pembuka <HEAD>, pada bagi

an head kita dapat mengetikkan judul dari

homepage yang kita buat, judul ini akan tamp

il saat web anda ditampilkan oleh browser,

kode yang perlu ditulisakan adalah :

<HTML>

<HEAD>

<TITLE> Web Pribadiku </TITLE>

</HEAD>

</HTML>

Save as dalam extension html, panggil lewat

browser web, tulisan “Web Pribadiku” akan

tampil pada browser web.

Penulisan judul harus diusahakan sesingkat

mungkin agar dapat masuk ke dalam

browser web. Namun cukup menjelaskan isi

dari web anda,

Memformat Huruf dan Paragraf

Secara umum setiap tag pembentuk pada

HTML bekerja dengan cara yang sama,

masing – masing tag mempunyai tag pembuka

dan tag penutup, semua text diantara tag

tersebut akan mengikuti format tag yang telah ditentukan.

Huruf Tebal dan miring

Huruf tebal (bold) mempunyai tag dengan awalan <B> dan diakhiri dengan tag

</B>, jadi seluruh karakter yang berada dianta

ra tag tersebut mempunyai format text tebal,

sedangkan tag untuk huruf miring adalah <I> da

n diakhiri dengan </I>, text bergaris bawah

(underlined text) mempunyai pasangan tag <U

> dan </U>.lebih jelasnya ketikkan code

dibawah ini pada notepad,

lalu panggil lewat browser

<HTML>

<HEAD>

<TITLE> Tebal dan miring </TITLE>

</HEAD>

<Body> <B> huruf tebal</B> <I> Huruf miring</I> huruf biasa <U>Garis bawah</U>

<B><I> huruf tebal dan miring </B></I>

</Body>

</HTML>

tampilan dari code HTML diatas adalah

Sub Script dan Super Script

Tag SubScript dan Superscript banyak di

gunakan dalam persamaan matematis, tag

<SUP> dan </SUP> merupakan tag untuk Supe

rscript (sedikit diatas baris) sedangkan

<SUB> dan </SUB> adalah pasangan tag untuk

subscript (sedikit dibawah baris), contoh nya

<HTML>

<HEAD>

<TITLE> Sub dan super </TITLE>

</HEAD>

Disini contoh untuk <SUP> Superscript</SUP> dan satunya <SUB> subscript</SUB>

</Body>

</HTML>

simpan dengan nama contoh.html lalu pang

il lewat browser, tampilan code HTML diatas

Format Paragraph

Tag paragraph dan format huruf merupakan

tag yang paling sering dalam pembuatan

web, sebab informasi pada umumnya berupa

text, tag paragraph <P> merupakan tag

penunjuk setiap paragraph baru, pe

rhatikan code HTML dibawah ini

<HTML>

<HEAD>

<TITLE> Memahami Paragraf </TITLE>

</HEAD>

<Body>

<P> tulisan ini merupakan paragraph pertama

dalam document yang

saya tulis </P>

<P> baris ini merupakan paragraph kedua, para

graph kedua, silahkan buat tag paragraph

sebanyak mungkin sebagai contoh agar lebi

h mudah memahami tent

ang paragraph, dalam

paragraph anda dapat mengubah format sebagi

an huruf atau karakter misalnya <I> text

miring </I> <b>test tebal <b></P>.

</Body>

</HTML>

tampilan dari kode diatas adalah :

cara membuat desain web

Sunday, February 17, 2013

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

· Daftar Tag Pada HTML

ELEMEN DASAR
Jenis Dokumen	<HTML></HTML>	(terdapat pada awal dan akhir dari file HTML)
Judul	<TITLE></TITLE>	(harus selalu terdapat pada mukadimah)
Mukadimah (Header)	<HEAD></HEAD>	(keterangan umum, seperti judul dsb.)
Batang Tubuh	<BODY></BODY>	(isi dari halaman HTML)

FORMAT TAMPILAN
Huruf Tebal	<B></B>	(Bold)
Huruf Miring	<I></I>	(Italic)
Garis Bawah	<U></U>	(Underline - jarang digunakan)
Rata Tengah	<CENTER></CENTER>	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	<BLINK></BLINK>	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	<FONT SIZE=?></FONT>	(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf	<FONT COLOR="#$$$$$$"></FONT>
Pilih Jenis Huruf	<FONT FACE="***"></FONT>

PEMISAH
Paragraf	<P></P>	(tag penutup seringkali tak diperlukan)
Align Text	<P ALIGN=LEFT\|CENTER\|RIGHT></P>
Pndah Baris	<BR>	(pindah ke baris berikut)
Garis Datar	<HR>	(Horizontal Rule)
Penataan Letak Garis	<HR ALIGN=LEFT\|RIGHT\|CENTER>
Tebal Garis	<HR SIZE=?>	(dalam satuan pixel)
Lebar Garis	<HR WIDTH=?>	(dalam satuan pixel)
Lebar Garis Persentasi	<HR WIDTH="%">	(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar	<BODY BACKGROUND="URL">	(Tiled Background)
Warna Latar Belakang	<BODY BGCOLOR="#$$$$$$"	(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks	<BODY TEXT="#$$$$$$">

TABEL
Rancangan Tabel	<TABLE></TABLE>
Garis Batas Tabel	<TABLE BORDER=?></TABLE>
Lebar Tabel	<TABLE WIDTH=?>	(dalam satuan pixel)
Lebar Tabel Persentasi	<TABLE WIDTH="%">	(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel	<TR></TR>
Penataan Letak Baris	<TR ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Sel dalam Tabel	<TD></TD>	(harus ada dalam setiap baris tabel)
Penataan Letak Sel	<TD ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Kepala Tabel	<TH></TH>	(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel	<TH ALIGN=LEFT\|RIGHT\| CENTER\|MIDDLE\|BOTTOM VALIGN=TOP\|BOTTOM\|MIDDLE>
Warna Kepala Tabel	<TH BGCOLOR="#$$$$$$">

A. Dasar dasar HTML

1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code dibawah ini:

<html>

<head>

<title> My First HTML Project </title>

</head>

WELCOME TO MY WEBSITE

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwOSBR50SR-kPy69v6R4e4UW6jjU5AxwOsHo1hifAgvSkaL_GnV5gP-NAF5pru4qbFqEJoVxcKWFUw6IvxI47XVsaWN0PU3IX960Qpb62ty3lpw8CLC_CkScOdNeK1gpU5n3C5Kaqsxavc/s320/welcome.png

Gambar 1. Judul Tab Halaman

2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

<html>

<head>

</head>

<body>

<p>Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga. <br><br></p>

<p>Ini adalah paragraf kerdua, yang berisi garis horizontal</p>

<hr> Ini adalah garis horizontal.

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPqtSAOsU6caEaaoLhtfv5UcAtiZ6e1xqIqpWPlKYajPTAY90j9ONKgEycJM0IJoVm3CTcK2G3hOsnVMps8GfZBVSLzWiWbRlNjvAaE1Vo882VKueRnufLSetnRJiFdG5QoBDUoxT1Uk0/s320/paragraf.png

Gambar 2. Mengatur Paragraf

3. Mengatur ukuran huruf, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title> Tag Heading </title>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiS2qPpLsfkkJJeFssSdUA4zq34Hz27MDWfS7v-zDs0I0_Ng3lYXkHGlNxZ1GkNf1kAiE-j6AArs_OwGM4ZJaH8_2N38hQXx2hPLid30uJ0fHKK-3lw-UQL_-fy1RylJiCTotOkpdb2df/s320/Header.png

Gambar 3. Ukuran Huruf

4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title>format tulisan</titele>

</head>

<body>

teks normal <br>

<small> teks small </small><br>

<b> teks tebal </b><br>

<i> teks miring </i><br>

<u> teks bergaris bawah </u><br>

Contoh superscript : x <sup>2</sup><br>

Contoh subscript : H<sub>2</sub>O<br>

<strike> Ini teks tercoret </strike><br>

menggunakan tag font

</font>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig0GUYOBBLHNir9jV9zkqfT6pr7LU-U4zL5ZdBKfAHYaaHuI_s6h-jJ9Qqe0g-7Ny34RFZ49uD6VcsC-kvAhol9vScA0ncHxor8NFegGzbX6VOtQ2OLyaaBfwMYz-fJdswZqO62I3Gnlp3/s320/format+tulisan.png

Gambar 4. Format tulisan

5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

<html>

<head>

<title> From komentar </title>

</head>

<body>

<table>

<tr>

<tdcolspan="3"> </td></tr><tr>
<td colspan="3"><h3>Silahkan Berkomentar : </h3></td>

</tr>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td valign=top>Komentar</td>

</tr>

<tr>

<td colspan="3"><input type=submit name="submit"

value=submit></td>

</tr>
</table>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVv9poeHFFLFNb4HOd0dgbnBPEwWalU8i65m0SILdFhUw4GZ2MuhdNUyem20CjN1WvNWU8uQshE9EWPc04lCIG2CqkDL34s4-t5u4sBJo4JLNEIcS7nZBiKO0QNOmnXMVlKXhp7t3GV0Y/s320/komentar.png

Gambar 5. From komentar

6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

<html>

<head>

<title>warna-warna</title>

</head>

<body>

<tr>

<td colspan="3" align="center">warna-warna </td>

</tr>

<tr>

<td bgcolor="#00FF00">Hijau</td>

<td bgcolor="#FFFF00">Kuning</td>

<td bgcolor="#FF0000">Merah </td>

</tr>

<tr>

<td bgcolor="#FF9900">Orange</td>

</tr>

<tr>

<td bgcolor="#663300">Cokelat</td>

<td bgcolor="#FF00FF">Merah muda</td>

</tr>

</table>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmsyYaZKwKQpRWuU3eweNv-59zNyTQbz0iBSKf9EXWro-7zXmVhxDU_N42H0oZl1gRq0GN_B3TTfMH49GJRXc2HsjpY9c91yumf4FUGZe4zghkuNea7HM5Zkw04JjMsuYa_p3K17ZGuLP/s320/kolom.png

Gambar 6. Tabel

B. Hyperlink

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title> Judul tab </title>

</head>

<body>

Ini hyperlink ke wordpress

<a href="http://www.wordpress.com/" title="Masuwordpress"> Wordpress </a>

<br>Klik dan masuk ke yahoo<a href="http://www.yahoo.com/" title="Masuk yahoo"> Yahoo </a>

<br>Masuk ke facebook anda

<a href="http://http://www.facebook.com/" title="Masuk ke facebook"> Facebook </a>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwVHD2ccrCA8sUaLhMCOsPjpZ5e4MqhoHQQ0Mp5HeQdcg2O_unN1KypkFjAhfulsyICkzW8Rnd38fLyv0-PdJv-EmKhoeiiDCX8S7hGGWcPinrb-c5Z4sBd54nVf4vPPz00pjjIeDAcF49/s320/hyperlink.png

Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title> Judul tab </title>

</head>

<body>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/home.html" title="ke Rumah"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Graphic1.jpg" border="0" width="80" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/desain%20web/profil.html" title="Profilku"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/profil.jpg" border="0" width="100" height="30"/></a>

<ahref="file:///C:/Users/COMPAQ/Documents/HTML.1/html_colors.html" title="Kode Warna Pada HTML"><img src="file:///C:/Users/COMPAQ/Documents/HTML.1/gambar/Kode%20Warna.jpg" border="0" width="150" height="30"/></a>

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJaHOK7Xi8K1ytaCk5iCDilxfhCVKbFoFGG86L2XrnWTU_4gHozG0qXPQR8mkSpLqdRshonzeYby6eyiFPcDryAuvrtv-GkbHNxxgNoXqKZEbpmF17t_tcdk32rpuW2gZn7rjbJWgT8iu/s320/hyperlink+folder.png

Gambar 8. Link Antar Bagian Dalam Web

C. Membuat Website Sederhana

1. Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>login web</title><link rel='icon' href='gambar/B.png'>

</head>

<body>

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)</font>

</p>

<br>

<label><font color="#FF6600">Email Atau telepon:</label>

<br>

<input type="text" name="Email" value=""></br><label><font color="#FF6600">Alamat:</label>

<br>

<label><font color="#FF6600">Tanggal Lahir </label>

<br>

</select>

<option value="1">Januari</option>

<option value="2">Februari</option>

<option value="3">Maret</option>

<option value="4">April</option>

<option value="8">Agustus</option>

<option value="9">September</option>

<option value="10">Oktober</option>

<option value="11">Nopember</option>

<option value="12">Desember</option>

</select>

</select></br>

<label><font color="#FF6600">Jenis Kelamin </label>

<br><font color="red">Pria

<font color="#CCFF00">Wanita</br>

</td>

</table>

<p align="center"> <font size="1" color="#FF6600" ><BLINK>..... Dalam penggisiannya harus jujur yaa, jangan bo'onk :) ......

</body>

</html>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLH_FZFsyC3StLpcD9elUSVr7HT7_BuTvVxYuXL1DX6c3dRIrCkgk0bLMZrMJRGnP6egXgjXErlbGXIYT62ZcpkcTNctcSumhByBLKxGqBoveqlB6_MR5YU37IasbpFM2oxaHK9B_5bPCi/s320/login.png

Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

</head>

<body>

</td>

</tr>

<p><ul><ul><left><BLINK><b><font color="#00CCFF" size="5"><img src='gambar/halo.gif' border='0' width='40' height='40'>~ Selamat datang di website pertama saya ~ <img src='gambar/halo.gif' border='0' width='40' height='40'></font></BLINK></b></ul></ul></p></left>

</ul></left>

</td>

</tr>

<tr>

<p><font color="yellow" size="5">~Dasar-dasar Membuat Website Berbasis HTML~</font>

<p align="lift"><font color="white">Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

<br />

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.<br />

<br />

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.<br />

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: <td> text yang ditampilkan

</td>.<br />

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.<br />

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td> </td><br />

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.<br />

<b>LANGKAH 1</b><br />

<ul>

<li>MEMBUKA NOTEPAD.</li>

</ul>

<b>LANGKAH 2</b> <br />

<ul>

<li>MENGETIKKAN SINTAK/SYNTAX.</li>

</ul>

Berikut ini adalah syntax dasar yang membentuk suatu HTML.<br />

pertama, ketikkan<br /><html><br />

tekan enter, kemudian ketik<br /><head><br />Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.<br />Sekarang ketikkan sintak title tadi, jadi seperti ini:<br /><head> <title> judul halaman web </title> </head><br />

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.<br />Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:<br />

<html><br /><head><br /><title> Judul Halaman Web </title><br />

</head><br />

</body><br />?<br />

  <br />

<br />Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :<br /><body><br />Contoh text yang ditampilin di halaman web, By: Rian Hidayat<br /></body><br />terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :<br /><html><br /><head><br />

<title> Judul Halaman Web </title><br />

</head><br /><body><br />Contoh text yang ditampilkan di halaman web, By: Rian Hidayat<br />

</body><br />

</html><br />

kalo udah, sekarang save dengan nama dasarHTML.<br />

kalo udah disave, buka data yang tadi di save.<br />?<br />Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???<br />Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

</textarea>

<font="left" form method="post" action="file:///C:/Users/COMPAQ/Documents/HTML.1/new%204.html">

Enter your comments here...

</textarea><br>

</form>

</td>

</p>

</tr>

</table>

<b>TUTORIAL HTML</b>

<ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td>

</tr>

s<td colspan='2'background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr>

</table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

</div>

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkt_0JU47cf1pdwfdKlKyZtK8MMuDkac76T9nA2Ud4M7Wl70iyXhGcVQqouMJyLKJ7ROJPPVZzRrYglCyGVyiSe9PbOoaQBbCCtEYshRA5AcJCcH_KTFCyJ2kd_T0MvwvxW-MXxC2DZ803/s320/Home.jpg

Gambar 10. Halaman awal

3. Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>Profilku</title>

</head>

<body>

<tr>

</td>

</tr>

<td><tr><td colspan="2" align="center"><font face="Bauhaus 93" size="8" color="#0066FF"><b>PROFILKU</b></td></tr>

<td><font size="5"color="#00FFFF">: Rian Hidayat</p></td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

<td><font size="4"color="#00FFFF">: Weru, Sukoharjo</td></tr>

<td><font size="5"color="#00FFFF">: Sukoharjo, 09-November-1993</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

<td><font size="5"color="#00FFFF">: Tidur</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>EMAIL</p></b></td>

<td><font size="5"color="#00FFFF">: hrian89@gmail.com</td>

</tr></table>

<td><font size="5"color="#00FFFF">: Bram Putra P.</p></td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>ALAMAT</p></b></td>

<td><font size="4"color="#00FFFF">: Laweyan, Surakarta</td></tr>

<td><font size="5"color="#00FFFF">: Surakarta, 13-April-1992</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>PEKERJAAN</p></b></td>

<td><font size="5"color="#00FFFF">: Mahasiswa</td></tr>

<td align="right"><font size="5" color="#00FFFF"><b><p align='left'>NO.TELPONE</p></b></td>

<td><font size="5"color="#00FFFF">: XXXXXXXXXXXXXX </td>

</tr></table></td>

</p></tr>

</table>

<b>TUTORIAL HTML</b>

<ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr>

<tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr></table><div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;">

</div>

</div>

</body>

</html>

Hasilnya akan seperti pada gambar 11 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9dQG6cVTCKrQvoG9sVNJ11Q1R7kbKcuWqeiG1g5oyuaBsaDybyQv6-ilbxG_zOLxffK28XdvPsfw2nSh6vZDFNRkmkGkraQykSaD4GRIadqp5NhzEjQEEtlPDXPSdgGlCU96pf6Pg7rqk/s320/Profil.jpg

Gambar 11. Membuat data pribadi

4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:

<html>

<head>

<title>Profilku</title>

</head>

<body>

<tr>

</td>

</tr>

<left>

</ul></left>

</td></tr>

<tr>

<td>

<p><b><center><font face="Bauhaus 93" size="7" color='#0000FF'>Galery</font></center></b></p><b>

<tr><p align="center"><font color="#00FFFF" size='6'>Album Kegiatan Teknisi</font>

</table>

</td>

</p></tr></table>

<b>TUTORIAL HTML</b><ul>

<li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr>

<td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr></table>

</body>

</html>

Hasilnya akan seperti pada gambar 12 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjZvRZdYQCsV7eUjiU7jkj90cXykxezYxW9PPu7VAiDan2tuG_Fyy8_AewT8mpJe52jhm8AKbB_HoEQGZQXk4FpAii2wACA7-yHiYBJJjy-Txl6GPRwS42bgtPnAz1Og2TYJnidtwFgPq/s320/album.jpg

Gambar 12. Galery

5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

<html>

<head>

<title>Cara membuat tulisan bergerak</title>

</head>

<body>

<tr>

</td>

</tr>

<left>

</ul></left>

</td>

</tr>

<tr>

<b><center><span style="font-size: large;" align='center'><font color='#0066FF' size='5'>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b>

<br />

<br /><font color='#00FFFF'>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br />

<br />

<b>Teks Bergerak Ke Bawah...</b></center>

</marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="right"><b>Teks Bergerak Ke Kanan...</b></marquee>

</div>

<div style="color: #FFFF00;"><marquee direction="left"><b>Teks Bergerak Ke Kiri...</b></marquee>

</div>

<br />

<b>Teks Bergerak Ke Atas...</b></center>

</marquee>

</div>

<br />

<a name='more'></a><br /><br /><span style="font-size: large;"><font color='#00FFFF'><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br />

<br />

<b><span style="color: #FFFF00;">right</span></b><span style="color: white;">">This text scrolls right...</marquee></span></div><br />

<br /><font color='#00FFFF'>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style="color:#FFFF00;">kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.</font><br /><br />

<div style="color: #FF0000;"><marquee scrollamount="30"><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style="font-size: large;"><font color='#00FFFF'><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font>

<div class="code"><br /><span style="color: white;"><marquee scrollamount="</span><b><span style="color:#FF6600;">30</span></b><span style="color: white;">"></span><span style="color: #FF0000;">Teks ni Macam Ferari..</span><span style="color: white;"></marquee>

</span></div><br /><br /><font color='#00FFFF'>Ubah nomer yang bewarna <b><span style="color:#FF6600;">Oren</span></b> untuk mengubah kelajuan.</font>

<div style="color: #f1c232;"><marquee scrolldelay="300"><b>Teks ini seperti Siput..</b></marquee></div><br />

<div class="code"><br/><span style="color: white;"><marquee scrolldelay="</span><b><span style="color:#00FF00;">300</span></b><span style="color: white;">">Teks ini seperti Siput..</marquee>

</span></div><br /><br /><b><span style="font-size: large;"><font color='#00FFFF'>3.</span></b> Ubah nomer yang bewarna <b><span style="color:#00FF00;">hijau</span></b> untuk mengubah kelajuan.

</font><br /><br /><div style="color: #6600CC;"><marquee behavior="alternate"><b>Teks ini Melantun</b></marquee>

</div><br /><font color='#00FFFF'>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.

</font><br /><br />

<div class="code"><br /><span style="color: white;"><marquee behavior="alternate"></span><b style="color: #6600CC;">Teks ini Melantun</b><span style="color: white;"></marquee>

</span></div><br /><br /><b><font color='#00FFFF'>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak

</font><br /><br /><div style="color: #0066FF;">

<marquee width="200"><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class="code"><br />

<span style="color: white;"><marquee width="</span><span style="color: #00FF00;">200</span><span style="color: white;">">Teks ini bergerak dalam kelebaran 200 width</marquee></span></div>

<br /><font color='#00FFFF'>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style="color: #00FF00;">hijau</span></b>.

</font><br /><br /><span style="font-size: large;"><b><font color='#00FFFF'>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

</font><br /><br />

<div style="color: #33FF33;"><marquee behavior=”alternate” scrollamount=”30” width=”400”><b>Teks Paling Awesome</b></marquee></div>

<br /><font color='#00FFFF'>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.

</font><br /><br />

<br />

<span style="color: white;"><marquee behavior="alternate" width="400" scrollamount="30"></span><b style="color: #33FF33;">Teks Paling Awesome</b><span style="color: white;"></marquee>

</span></div>

<br />

<br /><font color='#00FFFF'>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td>

</p></tr></table>

<b>TUTORIAL HTML</b>

<ul><li><a href="buat%20ayat%20bergerak.html" title='membuat tulisan bergerak'><font color='#0000FF' face='Times New Roman'>Cara membuat tulisan bergerak</a></font></li>

<li><a href='Menbuat%20from%20komentar.html' title='membuat from komentar'><font color='#0000FF' face='Times New Roman'>Cara membuat from komentar</a></font></li>

<li><a href='Membuat%20login.html' title='membuat halaman login'><font color='#0000FF' face='Times New Roman'>Cara membuat halaman login</a></font></li>

</ul></font></table></td></tr><tr height="50"><td colspan='2' background='gambar/zz.jpg'><center><b><marquee><font face="Cooper Std Black" color="#00CCFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>

</tr>

</table>

</div>

</body>

</html>

Hasilnya akan seperti pada gambar 12 berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRZjcMLTHz_E8aTRYv2y2-O1lMioOfKftxVNFowBTVaq20pLE4f1Ekyl6RoCcuYNTT7w7YFKHZPAQE9jQ9191M3nvSgdQwv0R3wtLESzoyK-wwDEEjkJGTCMV3i527s5NFdBjLqT3Wyq0/s320/tulisan+bergerak.jpg

Gambar 13. Artikel tulisan bergerak

Cara Mudah Membuat HTML Menggunakan Notepad

Membuat HTML Daftar Riwayat Hidup

Assalammualaikum..

Halo teman-teman. Ini adalah sedikit contoh pembuatan HTML sederhana menggunakan notepad. Dimana tugas ini dibuat untuk memenuhi mata kuliah Pemrograman Berbasis Web. Di dalam tugas ini, saya membuat Daftar Riwayat Hidup dengan lima menu, yaitu home, data pribadi, pendidikan formal, pengalaman kerja, dan social networking. Dimana dalam setiap menu tersebut terdapat gambar, foto, tabel, garis, maupun informasi lain yang dapat me - link ke tempat lain. Berikut adalah cara pembuatannya:

1.) Buat file baru di notepad, yang saya beri nama oneone.html, twotwo.html, threethree.html, fourfour.html, dan fivefive.html. Dimulai dari file oneone, di dalam file ini terdapat menu home yang akan menampilkan gambar dan tulisan 'siapa saya' yang akan me-link ke tempat lain, disini saya me-link ke tulisan di dalam blog saya. Seperti di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWg5oAQ8b2T7XJ0_mY5ry9_0q8JIYPYoJJBMcuyixkh_oMjJkQ8DyapAdbjCZ-x5OGza-rGYLAsYpyMj5hiT_0anMNb1mJcg5PIqTVT6WpMdE_k3uLEVGP-qg3I16qH3NwKRW25Eehn8/s400/oneone.jpg

Source Code berikut merupakan perintah untuk memasukkan background, dan tulisan sesuai dengan style font yang kita inginkan:

<font size=1 face=tahoma color=black>Pemrograman Berbasis Web</font>

<font size=7 face=verdana color=blue<b><strong>Daftar Riwayat Hidup</b></strong></font>

Dan untuk membuat kelima menu tersebut agar dapat me-link ke halaman selanjutnya, perintahnya adalah :

|<a href=oneone.html>HOME</a> |<a href="twotwo.html">|DATA PRIBADI</a>

| <a href="threethree.html">PENDIDIKAN FORMAL</a> |<a href="fourfour.html"> PENGALAMAN

KERJA </a> |

|<a href="fivefive.html"> SOCIAL NETWORKING </a> |<hr>

Ini untuk memasukkan gambar : <img src="tami.jpg" width="200" height="250" />. Dan untuk me-link ke halaman lain (Disini me-link ke tulisan di blog saya), jika mengklik 'siapa saya?' maka akan masuk ke halaman yang dituju:

<li><a href=http://tamipujiutami.blogspot.com/2012/09/siapa-saya.html>Siapa Saya?</a>

</ul>

Ini adalah contoh tampilan dari file oneone.html yang merupakan menu home:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdGxE9Uv6NCqUI8LE-zX3us8M1hnztG4_OVE3IDH8tcHLOJaV2IpCJ7PoamEkdnZXrtWMXOFUuZ_DKCzwRYYhVVZXrVFNRlEaDUADHfNHf3yrck0ym6y-aq2O7Cr9e01upll1vWdb7ak/s400/home.jpg

Jika kita meng-klik 'siapa saya', maka akan menampilkan blog tulisan saya yang berjudul 'Siapa Saya' seperti di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-aPzItb707YobQpZsoYp_YDEVrHR7JmkBxWbwyeCB3T3ZJhdQHNGEJctX-7Km7ZZpVuOi9Bs3dz9bfak9eZRCD3uLzxd03YLk-igBK4s3pOgDrETAqKSnMDx6rjH72VFKNDo6pPtOpwM/s400/siapasaya.jpg

2.) Sekarang kita isi file notepad selanjutnya yaitu twotwo.html. dalam file tersebut terdapat menu data pribadi, seperti tampilan di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6L_hGnZzFbH9XTTqgjxWBOh6gNxRg6s4MiXoLyLXXejI7g8jpTDFF78xKYP6ipTL5VJQb6utOmvSbWNNp8n3XEu240MRfvj9vtIfKra-DSsrlXW6qlYA55DAsPjxFk1loVBZcyT7bEIE/s400/twotwo.jpg

Source Code untuk membuat halaman tersebut hampir sama dengan file oneone yang sebelumnya, disini hanya ditambah dengan pembuatan tabel dengan 2 baris dan 2 kolom, untuk pembuatan tabel, berikut adalah source code programnya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_sqlvtFB-Oxst2KA9KeJ93CLg6iq34TKTm87e0Z2iw7Cqx7RaDrRaItblCk36ucz1YLJUK2rPu8RljlSpD0d4hYQoK5yiJt9vsCqrtmijbXTqi04IDc3tefKBEQUUasJLmp5eUoG0RA/s400/two.jpg

3.) Untuk menu pendidikan formal (threethree.html), pengalaman kerja(fourfour.html), dan social networking(fivefive.html), source code yang digunakan sama, hanya perlu di edit sesuai dengan isi yang akan kita buat, tampilan dari masing-masing menu seperti di bawah ini:

- Menu Pendidikan formal

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Kd7tDY2XDdlAWRNz8-nV_0cqHzhPGGeF1zqvbS4kB0uOh0GOqaC4g-ILxBXYjdDj24DYRzATGkB0-Vyhyphenhyphena9QxWCQX1Vgzn0v9__7qyzH3UZ9hXAfOV3XOxJNCWODFDkmy6XGtiCc1KI/s400/three.jpg

- Menu Pengalaman Kerja

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8dd8GrOm6ssuLxe7D03gZEIYPvziDDPeYJVNg2qQpc7iNvqdxNiTtH-mJU-rOmPCppRXYma28wQ14izUHcpcgoOQZaJtP_6iCOwSxJpUswL26nzElWqHCSvtDU-3DirmRXrIUVhFb08/s400/four.jpg

4.) Sedikit berbeda mungkin pada file five.five.html yang menampilkan menu social networking, seperti twitter, facebook, dan blog yang me-link ke social network yang saya punya, dimana untuk melink tersebut saya menggunakan icon berupa gambar. sehingga jika dklik akan me-link ke halaman yang telah saya tentukan dengan menggunakan potongan kode program di bawah ini :

<li><a href=http://www.facebook.com/puji.utami.5209?ref=tn_tnmn><img src="fb.jpg" width="50" height="50"</a>
<li><a href=https://twitter.com/utamipujiutami><img src="twit.jpg" width="50" height="50"</a>
<li><a href=http://tamipujiutami.blogspot.com/><img src="blog.jpg" width="50" height="50"</a>
</ul>
Keterangan: - tulisan dengan warna merah bold, merupakan nama file untuk icon berupa namafile.jpg.
- tulisan dengan warna biru bold menunjukkan link yang akan kita tuju setelah meng-klik
icon gambar.
Untuk tampilannya seperti di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh315BJqAebq3brdt5GLokrk9zhG9Rh3shH7ViqSgQW7jNFFwjO68-dxlMTs_n5HN5jb-YWvYs4MNrtQtc85PPVC_GuYOZO2480wtaBZF7u5wZvsJUcqdX7q5QJ9Qb8wQYPD-P-xgs4JP0/s400/five.jpg

Sekian hasil yang amat sederhana dari tugas pembuatan HTML dari mata kuliah Pemrograman Berbasis Web, semoga bermanfaat ^.^
Terimakasih.

Cara mengganti background HTML dengan notepad

Posted on April 8, 2013 by gufronballwel

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

Cara Membuat Tulisan Berjalan (Marquee) Di Blog Banyak Variasi - Lengkap!!

Cara membuat blog blogger dan wordpress, trik SEO dan blog terbaru dari ahli & pakar SEO Indonesia

Home » Blogger » Cara Membuat Tulisan Berjalan (Marquee) Di Blog Banyak Variasi - Lengkap!!

Cara Membuat Tulisan Berjalan (Marquee) Di Blog Banyak Variasi - Lengkap!!

Cara membuat tulisan berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan juga disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog sehingga pengunjung bisa lebih suka dengan blog anda.

Perlu anda ketahui bahwa kode dasar Marquee adalah..

<marquee>TEKS YANG BERGERAK</marquee>

Kode diatas menjadi seperti ini

Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..

Cara pemasangan kode Marquee pada artikel

Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
Silahkan masukkan kode Marquee di mode HTML
Cek posisi teks di mode Compose
Untuk melihat apakah kode berjalan, silahkan klik Pratinjau.

Cara pemasangan kode Marquee pada widget

Login ke akun blogger anda
Masuk ke menu Tata Letak, Klik tambahkan gadget
Silahkan pilih HTML/Java Script
Masukkan kode Marquee yang anda pilih
Silahkan klik Simpan
Kemudian silahkan cek apakah kode sudah bekerja.

Supaya lebih jelas dan tidak bingung, kita bahas terlebih dahulu cara mengubah warna , huruf, dan ukuran pada teks. Ikuti langkah-lenglah berikut..

Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#800C0C;"

Arial adalah jenis huruf
20px adalah ukuran huruf
#f2f2f2 adalah warna huruf

Silahkan ubah sesuai dengan keinginan anda

Contoh kode nya seperti ini..
<marquee bgcolor="pink" style="font-family: Arial; font-size:20px; color:#800C0C;">CONTOH BACKGROUND AREA TEKS</marquee>

Hasilnya akan terlihat seperti ini..

Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya..

Kode Marquee untuk mengatur pengulangan Rotasi

kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.
Contoh kodenya seperti ini:
<marquee loop="6">TEKS BEROTASI 6 KALI</marquee>

Hasilnya akan terlihat seperti ini..

Kode Marquee untuk mengatur lebar teks

Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.

Contoh kodenya seperti ini:
<marquee width="50%">LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.

Hasilnya akan terlihat seperti ini

Kode Marquee untuk memberi link pada teks

Kode dasar seperti ini..
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://seoterpadu.blogspot.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN</a></marquee>

Hasilnya akan terlihat seperti ini..

Kode Marquee untuk mengatur background pada jalur teks

Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.

Contoh kodenya seperti ini:
<marquee bgcolor="pink">CONTOH BACKGROUND AREA TEKS</marquee>

Keterangan: pink bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain.

Hasilnya akan terlihat seperti ini

Kode Marquee untuk mengatur kecepatan jeda

Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.

Contoh kodenya seperti ini:
<marquee scrolldelay="750">TEKS BERJALAN DALAM JEDA 0,75 DETIK</marquee>

Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..

Hasilnya akan terlihat seperti ini..

Kode Marquee untuk memberi Alt Title pada area teks berjalan

Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.

Contoh kodenya seperti ini:
<marquee title="TEKS YANG AKAN MUNCUL JIKA KURSOR DIARAHKAN KE AREA TEKS BERJALAN">TEKS YANG BERJALAN DENGAN PESAN</marquee>

Hasilnya seperti ini..

Kode Marquee untuk mengatur kecepatan teks berjalan

Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.

Contoh kodenya seperti ini:
<marquee scrollamount="12">KECEPATAN TEKS YANG BERJALAN 12</marquee>

Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.

Hasilnya akan terlihat seperti ini..

Kode Marquee untuk mengatur arah teks bergerak

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode nya seperti ini:
<marquee direction="left">TEKS AKAN BERGERAK KE KIRI</marquee>

Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.

Hasilnya akan terlihat seperti ini..

Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse

Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee>

Hasilnya akan terlihat seperti ini..

Jadi itulah, beberapa macam variasi kode Marquee. Semoga bermanfaat untuk anda. Dan terima kasih sudah mau berkunjung ke blog ini.

Tolong Share artikel ini di: 61 25 Digg0

Komentar →

- See more at: http://www.seoterpadu.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html#sthash.1EVdSUKC.dpuf

Pertamakali tekan Ctrl+N untuk membuat kanvas kerja baru.
Pilih Rectangle Tool atau tekan F6.
Sambil menekan Ctrl, tekan dan geser Rectangle Tool untuk membuat kotak segiempat sama sisi (kubus).
Pastikan kubus dalam keadaan terpilih. Pada Property Bar, rubah ukuran lebar menjadi 5 CM dan tinggi 5 CM. Setelah selesai tekan P untuk menempatkan kubus tepat di tengah kanvas kerja.
Tekan F4 untuk memperbesar tampilan kubus.
Pilih Shape Tool atau tekan F10. Kemudian tarik node yang ada di sudut kiri atas ke arah dalam untuk membuat sudut-sudut kubus melengkung.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Ihh0SzNjleRIcbnFflDCVm1ykb5Z1GUMpbUV8N-PfOe_3Q6lwt1EjxR5e3vw00MCOxmjTD8o5K7fS7ewSoeiS1HGVPhtYJfqdzhLykLUW-BVFoyrsAgt3K3HCneBQqCVxYdwps2DmA3r/s400/BP+1.jpg

Tekan F11 untuk memunculkan kotak dialog Fountain Fill. Kemudian atur beberapa spesifikasi seperti contoh di bawah ini. Setelah selesai tekan OK.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6OIImFlfUfAdxQ1gVoF9g25ckKFis5G4ywqcJ_3fl7rsNzzqIV84JOnN-Wdzq7U9gzbSuLHLn56Jjix9LthFfMDmBxbomAu-tV2eG1MCjHjxYlkMIgaDzhabKNkSUVq4ncljubIWx1gX/s400/BP+2.jpg

Pilih Pick Tool kemudian klik di sembarang tempat untuk melepaskan pilihan pada objek kubus.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8iAPG48BxpUjIf3J768wJudi9ZhTFdSo3wIPHSGdynAczjrXqc2AM0dm4RtjVbZr5iftt5r2B3gYgCPlEHphiFO4ILw-Rr67mj2ohSLAmWY3qmQ9Sa9C0AK35hhYBL8_HC8FctB89642/s400/BP3.jpg

Pilih kembali Rectangle Tool atau tekan F6. Buat sebuah kotak persegi panjang dan tempatkan di posisi atas kubus.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMWAF1Q3tBkGFUj9zmo931qguhQwyFwOem_2QT58c3R_PWWlRTNTiO43rIXSMPIGHA4lc4bQeg_I___F3tSrJvR9EtbIbE0PJ3eh1T6mBk3o82TrFGkEQPFlD4Q0oJmst6_wqcsihLpUC/s400/BP+4.jpg

Sama seperti pada objek kubus, lengkungkan sudut-sudut kotak persegi panjang tersebut menggunakan Shape Tool.
Tekan F11. Pada kotak dialog Fountain Fill atur beberapa spesifikasi seperti contoh di bawah ini. Setelah selesai tekan OK.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5g5WEcMahrYKlwXu30BqWiOc4m_d8nS9ITmxbQ22jo821oYnF3OAyA5V3mYenq7Dp0s8zi_TVvkcdBYN0fDmHhqRhwRU2MrX4IFDc04VOOErd0QTs3ZQXjRrf-4U7dtBrpnHQ5_ZCKDQ8/s400/BP+5.jpg

Tekan Outline kemudian pilih None untuk menghilangkan garis outline.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgORD6PBwGiBbgjfAQ-m3wSOgMmIUvzWmyNFYm3IagzLUu9-Hj1Y0mQCUYiQ28aw36NNTzS1ystWANqjl_NsB8bzi12qeqzf6L1Mge-XhJ2kenS9mv7EukfC3pCPsJYZzTka7cs4v_dPFnJ/s400/BP+6.jpg

Pilih Transparency.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiub9Jmt8ftB0JOklxxP1Pbiuh26FLTPZhK2sVqctTEcBiMQBshm_3GjmtrxvN3cbrVwg0b-HSJWbzqvfZbcozn-haDCKpVsF1H4qtwkNRZMjI_uFHjIWrSP8SuiFAXglCaP4NVHYBphubE/s400/BP+7.jpg

Pada Property Bar, pilih type: Linear dan angle: -90.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbUMBzDJdrqNcTYyFoLaJQQUX4sTfaSkIBh5q3uZYKC8wlto5yoGFSPnHeI2WIg-62eGs-a2QIxT0z2c4HmkuHvovPcGOVbAUmF4afHxQcTEto9d-NB1IvgWDHPqCvJ64tF0D3HL-t_M-/s400/BP+8.jpg

Pilih Text Tool atau tekan F8. Tulis huruf "f" menggunakan font: Arial Bold, ukuran: 150 pt dan warna: putih. Geser dan tempatkan huruf dengan "f" seperti contoh di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6dkLFBhpRtlBVfUILT0ROoyR1zxUeqgzjYk4dzb2PyyNVHCD88LQOv3eVmvTtVC7isG5V9jxOsS8pRneoutnttGDbKsb_XEkdvkmKx8IFmwG3ezbZYIkjDV2IWtcz6JyB6zRymHnhxuI/s400/BP+9.jpg

Membuat Logo AC MILAN

Publish: 07 Agustus 2010 | Author & Copyright: Arwan | Status: FREE Tutorial

Tutorial Coreldraw kali ini akan mengajak kita untuk belajar membuat logo yang tak asing bagi para pecinta sepak bola yaitu Logo AC Milan.
Yeah,, tentunya untuk start kita harus membuka aplikasinya terlebih dahulu (yang penulis pakai CorelDRAW 12).

Langkah - Langkahnya:
1. Aktifkan Ellipse Tool (F7) kemudian buat objek elips dan beri warna merah. kemudian buat objek elips lagi tapi ukurannya lebih kecil dengan warna putih dan letakan ditengah elips merah.

Tips : agar tepat berada di tengah-tengah, pilih saja kedua objek (elips merah dan putih) kemudian tekan huruf P pada keyboard.

2. Masih dengan ellips tool, buat objek lingkaran sambil menekan ctrl agar objek benar-benar bulat. Kemudian kita belah menjadi dua dengan Knife Tool dengan cara klik di Garis atas dan bawah lingkaran. Setelah menjadi dua bagian, beri warna merah untuk sebelah kiri dan putih untuk kanan.

3. Aktifkan Graph paper tool (D) atur dengan columns=6 dan rows=1 pastikan snap to object sudah di centang (View-Snap To Object).
Buatlah diatas setengah lingkaran merah seperti ini.

4. Drag dari P1 ke P2 dengan Pick Tool
kemudian pilih Intersect
pada tool bar kemudian delete Graph paper-nya.

5. Pilih setengah lingkaran merah kemudian ungroup (Ctrl+U) atau pada menu Arrange-Ungroup dan beri warna hitam pada bagian a, b dan c.

6. Dengan Rectangle Tool (F6) kita buat dua objek persegi panjang seperti gambar di bawah dan letakan di atas objek setengah lingkaran putih.
Pilih kedua persegi panjang tersebut, caranya pilih P1 kemudian tekan dan tahan Shift pada keyboard dan pilih P2.
Kemudian di Weld

Pilih setengah lingkaran putih dan objek yang kita Weld tadi,
kemudian pilih Intersect dan beri warna merah. Delete hasil weld-nya.

7. Selanjutnya kita buat lingkaran yang sedikit lebih besar dari lingakaran pertama,
kemudian gunakan fasilitas Fit Text To Path yang berada pada Menu Text, kita tuliskan "ACM" dengan jenis font Verdana kalo ukurannya disesuaikan saja.
Kemudian gunakan Pick Tool untuk memilih Text Orientation-nya menjadi

Selanjutnya pisahkan objek lingkaran dan tulisan ACM (Arrange-Break Text Apart) dan hapus lingkarannya.

8. Untuk membuat tulisan "1899" sama seperti membuat "ACM" hanya Path-nya bukan lingkaran tapi garis lengkung.
Caranya : aktifkan Pen Tool klik di kanan dan kiri (untuk mengakhiri tekan ESC),
dengan Shape Tool (F10) klik satu kali pada garis kemudian pilih Convert Line To Curve

Pada garis tengah klik dan drag ke bawah, jika sudah lengkung gunakan Fit Text To Path pada Menu Text dan ketikan "1899" (font=Arial, ukuran=disesuaikan sendiri)
kemudian Arrange-Break Text Apart dan hapus path lengkungnya. Hingga hasilnya kurang lebih seperti ini...

Selamat mencoba dan ber-Eksperimen semoga Desain logo Android dengan Coreldraw

http://1.bp.blogspot.com/-ldRKrmZ0r1E/Ur1YGkuGp2I/AAAAAAAADGI/G3kOyId2LJI/s1600/finish+android.gif

Alif Ilmu | Tutorial kali ini saya akan membuat logo Android dengan Coreldraw, setelah sekian lama tidak mengoprasikan software coreldraw rasanya semua jemariku terasa kaku...mari kita buat tutorialnya.

1. Buka program Coreldraw.

2. Klik New pada jendela welcome screen.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3BeF-US7CogI4qawdNRWyOn50gBmNslBZAzKIIwDOQa2HFlNDHfaI2rCwnjgxzRWb6rBYYEptWDhmRtrAbUlawZIT-Cb4MrgbcBc1rpxP_1Mh5_tFLWoPPT6L_4ITGVrPEJBJ8idG2Y/s1600/welcome+screen.jpg

3. Setelah itu aktifkan Rectangle Tool

dan buatlah sebuah kotak seperti pada gambar di bawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9yqEXWukcXD1iPfOQQDm8aV7so8ZXVpKIIkdvTK_h1alwndqLZgSiEGw2R-USmNPbua46UgkVbPvtDCJnpgenEIIfFJ1KJNT3rlA0BW11gLmP7oksiMTufgIOnXSQ3zrBdX8mRXSK1WY/s1600/Kotak.jpg

4. Aktifkan Shape Tool, lalu tarik salah satu sudut dari kotak tersebut hingga seperti pada gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElz4EighnFNOYXZ8rdCW-zGrGlqbZYRKjdjBRRF-hbCvouZ2lhpVWZuTB056PIcm6-W6Rc8RCRePS57gLfnDhaNgqa3Oe58iLVSIEFtOY93f604rMQ1N0KPWSuTPlfE-nQxx0SVIDaQE/s1600/shape+kotak.jpg

5. Buat kembali sebuah kotak dan tempatkan pada setengah kotak pertama, lihat gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisduGKATpKozYC1bA9f6jFmtAR413vWX4yj5tvstrhyphenhyphenro8Oh6r8Bcvk4up9r_MfxjTc_yJTo4BBUFaWhpHEvnBHcp0_wHgpusgA-0PEh81Rd0kWw3q9F1D5u24HkEvgQIrHi5RLn-Hykk/s1600/kotak+ke-2.jpg

6. Masih dalam kotak yang baru dibuat tadi, lalu pilih Arrange > Shaping > Trim. Maka pointer akan berubah dan klik pada kotak pertama, hasilnya kotak pertama akan terpotong oleh kotak yang diatasnya (kotak kedua)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZDKoq5fiA_DeugVusNav7b-fpispU1Wv8ZbMKtsy9HtFxXbp0t741a3JPcQqMKb8psP7vMKXjIL5gHBVUMvgD-Pb7z70mv7mHeXTTTKpwt8M1SC6xoD0zmHPYFhC37aAlXfLsa8NUjJI/s1600/kotak+terpotong.jpg

7. Hapus kotak yang ditunjukan pada gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzrsmTlVAUllz41yLo4JQ4EMoG6d6DJZgsRrVXvM1j0q6kdnhGEWSgn29Vd1Hk76NlzbrTDGyDUUs16NLXJua6hyphenhyphenmn0aC4uEAUA9r0p3FVqtU211Waeyc38fSVyb2VudNdNtEQxvs_iv8/s1600/hapus+kotak.jpg

8. Buatlah 4 buah kotak persegi panjang, yang dimana 2 buah kotak tersebut untuk bagian lengan dan 2-nya lagi untuk bagian kaki. Lihat gambar dibawah (untuk membuat kotak seperti dibawah ikuti/ulangi langkah ke 3 - 4).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhpD8_NZK_-OQD4A6QYPv9mPr7zXL6RD_0Qr_h8dfFsS09-K5tY7FwhZdD4npC8v-ahar-xhB_PZsMHdA16vViLk8Qo77u2_AbhGbf21kz6vl3CZK8ZWzQgYruhA3hKjWhaxBkuA_hwo/s1600/4+kotak.jpg

9. Tempatkan ke 4 kotak tersebut seperti pada gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcsk9_cuBr6vDCSrcr74iT3VjvcuveUkEjs36D8BDEhJjIn9YMaf5OnsM5wVNGv_nGA01DlrE0uBjfnj1AeZ2akIjO3NoiPSRnhEyPWbK-5FePQoet-Zhw6yFUdzMAKYuTsKdIAMbQheA/s1600/peletakan+kotak.jpg

10. Pilih kedua kotak untuk kaki lalu klik Arrange > Shaping > Weld dan klik pada kotak pertama, hasilnya akan seperti gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXJl40OKz1I5S4ELVX3t92NfLizzJseup66KhwxdoKqj8QrxhUsF2TOR0yJIIVBXq4WDqVCkGBv7Bjh3AmRXLGQfAcd87vTza8_OrogACmduKhny9iDUK1DR74dDHG4XGPQckhdxoRrN0/s1600/kaki+gabung.jpg

11. Buatlah sebuah lingkaran dengan menggunakan Ellipse Tool lalu potong lingkaran tersebut hingga menjadi setengah lingkaran (untuk membuat setengah lingkaran langkahnya sama seperti langkah ke 3 - 7).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0lEegHNsQViXM0HHbR6XhE4XgeM3J6PlJZi1UGJGlVBXDiFi1LGIHBCCVKVA5dJvaLaY85H5KgPw-bPu7628HZKVRrCwLGGp3BGNQJafkfWzWOPS-6lrXokS4rOcAeXjSrTzETOCnXA/s1600/setengah+jadi.jpg

12. Buat kembali 2 buah kotak seperti gambar dibawah, kali ini ukurannya lebih kecil dari kotak sebelumnya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj44_r3MOc8qmSSdXpCcHFc364IAQf7WX5NyXX6-YzDYQkBYbsU3a5GzH97Brw0SO9iIvHND-M6DR3lt2gPdELsAFSFGZ5F8Lr0fmnmIaJtdnH8v3qHHwiESrLdlNF2cE_zJY1MiDD-EfI/s1600/antena.jpg

13. Tempatkan kotak-kotak tersebut seperti gambar dibawah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEvOfW-BhUaaKdb6iVBtd7PljMMWQyfvZtZsrhBFwQalrXXsHXx4xbkNv9Z-UPrd6kfOVTJMgqBl0YO-GoFFfRG1QVykR4mkjBrmagbksSUyG9XM3CqZN_AMmN18MCsivlPxJktvfN2I/s1600/pasang+antena.jpg

14. Gabungkan keduanya dengan objek setengah lingkaran (langkahnya sama seperti langkah ke 10).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSLDStzij92RkyqaUe7gxUgOTmU4BMvrvFcWhYzZPCseSAGv610dyOqcno7H48U5A8YmP3LuBBLYU6CIQgD1Pjxl1B7wLH0t6Ih0y3I1yBh2SWV5jvQ6zcWLMf-zhwrBW2UovKJSEycg/s1600/stengah+jadi.jpg

15. Beri warna untuk keseluruhan objek dengan warna hijau muda pada color palette

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZo76VpEArYDj9mtWR2ShlDgN7qQ9PLS7MbWdnJ2YkbLhIE611HbGXv_sObY_aXJrN-v-wlB-sc_OextMptcLcBUhwjbvJ0pAKTsl3ENt6t1xrPJdg7cMWzSD9eJzcW_yeUxcOVDfa1ok/s1600/color.jpg

lihat gambar dibawah, untuk menghilangkan garis tepi pada seluruh objek klik Outline Tool > No Outline.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XNSw51QZfKohS2-afGH-PustWJSSNI9hwtt2hfsgrIj5TmgennB22BTLhmWg7Y9KE-hhgAKMa73ayU6bPmKFXy05bSLKwhVuE3LnGRZu5Z3LEeZpmtLo0elY-SR1X0Qu-3B5sZo_EAI/s1600/tanpa+mata.jpg

16. Buat lagi 2 buah lingkaran untuk bagian mata.
dan seperti dibawah inilah hasil desain logo Android dengan Coreldraw ala alif-ilmu.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbpby3x-n1VAiAXNDW-ukBLumfGuvnrO7jCUp4y4RlutH9YViVrfY0gx_Ab8qIjHoW4QeHef2XLC9l5JaaMRhhEiiRou488Di5FAs8eBjgymHLSbb9vwG87qSm6-do5q_ygCER0ViwiK0/s1600/android+Finis.jpg

untuk font Androidnya bisa kamu Download disini.
mudah bukan untuk membuatnya, Silahkan untuk dicoba!!!

di 9:58 PM

bermanfaat.. ;-) Membuat Logo Android menggunakan Corel draw X4

Tutorial Corel draw Membuat logo / lambang Android

langkah pembuatan logo android menggunakan corel draw X4 :

1. Buka Corel draw anda, versi berapapun (saya memakai corel X4), Kemudian buat sebuah objek setengah lingkaran atau dengan cara buat satu lingkaran dan satu buah persegi dengan memakai eclipse tool dan Rectangle tool di toolbar corel anda kemudian persegi tersebut ditempelkan pada posisi tenganh objek lingkaran sorot kedua objek tersebut kemudian pilih Simplify. maka hasilnya akan seperti dibawah ini

2. Buat bagian badan dengan memilih Rectangle Tool atau persegi kemudian pada Round cornernya (sudut2nya) bentuk agak membulat dengan shaping tool (shaping dan rectangle tool ada di bagian tool bar sebelah kiri layar corel anda)

3. Buat bagian tangan dengan Rectangle tool (persegi) dan bentuk seperti gambar dibawah ini dengan cara pembentukan shaping corner pada nomer 2, setelah terbentuk duplikat atau tekan saja shortcut (+) pada objek tangan tersebut.

4. Kedua tangan sudah terbentuk, atur posisinya sesuai kehendak anda atau bisa ikuti contoh keterangan gambar dibawah.

5. Buat bagian kaki dengan rectangle tool (persegi) seperti gambar dibawah ini, prosesnya sama seperti pada poin ke 3 atur lebar, panjang dan posisinya sesuai selera (pokoknya dipas pasin aja)

6. Buat bagian mata dengan membentuk 3 lingkaran berbeda dengan eclipse tool, lingkaran besar pertama berwarna hitam dan 2 lingkaran lagi berwarna putih, untuk lingkaran putih bedakan ukuran lingkarannya seperti gambar dibawah ini. setelah terbentuk mata menyerupai contoh gambar dibawah ini kemudian duplikat atau tekan (+) atur posisi matanya sesuai dengan selera anda atau bisa ikuti dengan contoh gambar dibawah ini.
Jangan lupa membuat antena pada bagian kepala dengan menggunakan pent tool, bentuk lah seperti menyerupai tanduk atau bisa lihat contoh seperti gambar dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZaek8rJnEodvrQkHU8E0XLoDLJPNlAKRYCl-u6VAU-hFr0z7gqgTgJF8vpivBu3n6iNS6vIZ1AelyFtTiRFlGNTh0OOxAyEQYWmfgk9bgcDhzoRC3hVznO1Wg-tghdwthny5hesrFeDO/s1600/cdr6.jpg

7. Untuk menambah aspek 3D tambahkan lingkaran putih di bagian kepala ikuti bentuk kepalanya atau bisa menduplikasi bagian kepala kemudian pilih warna putih dan pada tool bar pilih tranparency tool atur hinga grading cahaya membentuk 3D pada kepala (bisa anda lihat contohnya dibawah), lakukan proses serupa untuk menambah unsur 3D pada bagian badan dan tangan (bisa lihat contohnya di keterangan gambar)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJJh08W95iwKym9EwPvdGNSyxIEkHMf7kGg2Mo-f8vFe51yjAkSs8QW5x7w0HW4qaR8yTnnRbKeqmmjw-ITM11J62ReUcHEbRQg5QN0OfiOoCJIeccJhq2MV5xAZu461yGIbpC4_sBRX3N/s1600/cdr7.jpg

8. Setelah proses shading 3D selesai warnai bagian awal dari kepala hingga kaki jika lupa mewarnainya dengan warna hijau, bisa anda tambahkan objek lain seperti silhoute atau frame text dll tergantung dari kreatifitas anda agar logo android tersebut lebih menarik,
Gunakan pen tool dan gambarlah seperti objek siloute di belakang layer robot

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnIVKTxnOOHzCXdec8PqKLdhtOMq5xuRs-eJrgHKgfY3PJ3IHrwatfQtHOrYIbA-p7ney0pGQPwAlsUoswBDU7SxOKtwFNPVWGTmXo8kjYr7ZcH4IkOfhYHt200GOMbJrkS0VN9I5gfPw/s1600/cdr8.jpg

9. maka hasilnya akan seperti ini, hasil akhir tergantung dari penambahan unsur kreatifitas anda.

Semoga cara cara membuat logo android menggunakan corel draw diatas bisa bermanfaat untuk anda yang sedang dalam proses pembelajaran corel draw, Bago sobat yang ingin mendownload artikel corel draw membuat logo berbentuk Pdf, bisa anda download DISINI.

bermanfaat.. ;-) Membuat Logo Android menggunakan Corel draw X4

0 comments:

Post a Comment

Recent Posts

Blog Archive