Sabtu, 17 Mei 2014

BOOTSTRAP

Tutorial Bootstrap – Bagaimana Cara Menggunakan Bootstrap

Pertama, download bootstrap. kemudian jika sudah, buat folder (nama terserah) lalu buat file index.html . Ekstrak zip bootstrap, copy semua folder (css, img, js) ke dalam folder contoh kita.

Kedua, isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal karena kita akan menggunakan HTML5.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My First Bootstrap project</title>
</head>
<body>
</body>
</html>

Ketiga, tambahkan link ke file bootstrap.css di folder css dalam tag <head> dan include javascript files di paling akhir dari tag <body> , jangan di atas.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My First Bootstrap project</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<!-- Javascript files harus ditaruh di bawah untuk meningkatkan performa web -->
 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

Keempat, kita akan mulai mendesain. Tetapi sebelum itu, perlu diingat bahwa bootstrap menggunakan 12 grids, untuk membagi grids tersebut kita akan menggunakan “span”, misal : bila ingin membuat menu disebelah isi, kita dapat membaginya jadi “span4″ untuk menu dan “span 8″ untuk isi. Kita akan membuat :

Header
Marketing Area
Leftside Bar dengan Content Area di satu baris
Footer yang akan dibagi menjadi 2 bagian

Tambahkan ini dalam tag <body> di atas javascript files.

<div class="container">
 <h1><a href="#">Bootstrap Site</a></h1>

 <div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 <ul class="nav">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 </div>
</div>
</div>

Kelima, kita akan membuat marketing area menggunakan class “hero-unit”. Tulis coding ini ke dalam div “container”, jangan diluar. Baca lebih lengkap tentang button pada bootstrap disini.

<div class="hero-unit">
 <h1>Marketing stuff!</h1>
 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 <a href="#" class="btn btn-large btn-success">Get Started</a>
</div>

Keenam, sekarang kita akan membuat area yang akan dibagi menjadi dua, satu untuk leftside bar (menu) dan satu lagi disebelah kanan untuk content area. Kita akan menggunakan div dengan class row sebagai container area ini karena secara default, span akan float ke kiri, kalau tidak menggunakan div dengan class row maka div span4 dan div span8 tidak akan bisa sejajar.

<div class="row">
 <div class="span4">
 <p>Dummy Text</p>
 </div>
 <div class="span8">
 <p>Dummy Text</p>
 </div>
</div>

Ketujuh, kita akan mengisi leftside bar span4 dengan menggunakan class nav dan turunannya class nav-list agar terlihat seperti list/daftar. Sedangkan nav-header untuk membuat judul.

<div class="row">
 <div class="span4">
 <ul class="nav nav-list">
 <li class="nav-header">What we are?</li>
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Our Clients</a></li>
 <li><a href="#">Our Services</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>

 <li class="nav-header">Our Friend</li>
 <li><a href="#">Google</a></li>
 <li><a href="#">Yahoo!</a></li>
 <li><a href="#">Bing</a></li>
 <li><a href="#">Microsoft</a></li>
 <li><a href="#">Gadgetic World</a></li>
 </ul>
 </div>

 <div class="span8">
 <p>Dummy Text</p>
 </div>
 </div>

Kedelapan, kita akan mengisi bagian content area span8 dengan paragraf.

<div class="span8">
 <h3>How we started ?</h3>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

 <h3>How do we market?</h3>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 </div>

Terakhir, kita akan menambahkan footer, footer akan dibagi menjadi tiga bagian yang sama besar, karena boostrap menggunakan 12grids maka untuk mendapatkan tiga bagian yang sama besar harus dibagi menjadi 4-4-4, jadi kita menggunakan span4 untuk ketiga div kita. Jangan lupa untuk membuat div dengan class row terlebih dahulu.

<div class="row">
 <div class="span4">
 <h4 class="muted text-center">Meet Our Clients</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#" class="btn"><i class="icon-user"></i> Our Clients</a>
 </div>

 <div class="span4">
 <h4 class="muted text-center">Know Our Employees</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#" class="btn btn-success"><i class="icon-user icon-white"></i> Our Employees</a>
 </div>

 <div class="span4">
 <h4 class="muted text-center">Reach Us</h4>
 <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
 <a href="#" class="btn btn-info">Contact Us</a>
 </div>
</div>

<hr> <!--Garis Batas-->
<div class="footer">
 <p>&copy; 2013</p>
</div>

Tambahan, kita dapat membuat menu dropdown untuk menu navigasi kita dengan menggunakan class dropdown pada tag <li>.

<div class="navbar">
 <div class="navbar-inner">
 <div class="container">
 <ul class="nav">
 <li class="active"><a href="#">Home</a></li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 <i class="icon-th-large"></i>Projects
 <b class="caret"></b>
 </a>

 <ul class="dropdown-menu">
 <li><a href="#">Item1</a></li>
 <li><a href="#">Item2</a></li>
 <li><a href="#">Item3</a></li>
 </ul>
 </li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 </div>
 </div>

Selasa, 13 Mei 2014

Apa Itu Bootstrap

Wikipedia-Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Minggu, 11 Mei 2014

Tampilan Layout Keren

Layout Web Keren

Sabtu, 10 Mei 2014

CSS

Memahami Dasar-Dasar Coding CSS

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

1. Metode Table
2. Metode Div

Manfaat dari CSS:

Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

Static –> posisi normal (default).
Relative –> posisi elemen tergantung dari elemen yang lain.
Absolute –> posisi elemen berpatokan pada jendela browser.
Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Belajar dan Memahami Dasar dasar Code CSS

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css :

<html>
<head>
<style type = “text/css”>
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = “header”>
<div id=”headerLeft”>Header Left</div>
<div id=”headerRight”>Header Right</div>
</div>
</body>
</html>

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

External Style Sheet (file CSS berbeda dari file HTML),
Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:

<html>
<head>
<style type = “text/css”>
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
</body>
</html>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:

<html>
<head>
</head>
<div style=”background-color:#999999; text-align:center;”>Inline CSS</div>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css. Di dalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

Coba kode CSS berikut:

a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Kamis, 08 Mei 2014

Layout Web Sederhana

MEMBUAT LAYOUT WEB SEDERHANA MENGGUNAKAN MACROMEDIA DREAMWEAVER 8

MENAMBAHKAN TITLE

Title adalah judul halaman web. Judul ini berbeda dengan nama HTML yang nanti akan di hasilkan. Berikut adalah kode untuk membuat title (judul) pada web :

<html>

<head>

<title>Belajar membuat html </title>

</head>

<body>

</body>

</html>

sehingga akan menghasilkan tampilan seperti berikut :

MENAMBAHKAN TEKS KE BODY

Setelah kita membuat webpage,tahap selajutnya kita dapat memasukkan teks ke halaman web. Teks ini di letakan di antara tag <body> dan </body>.

<html>

<head>

<title>Belajar membuat html </title>

</head>

<body>

Teks ini adalah isi dari halaman web. Dengan menggunakan tag body, semua apa yang ingin di tampilkan akan terlihat di browser

</body>

</html>

sehingga akan menghasilkan tampilan seperti berikut :

MENAMBAHKAN GAMBAR

Dengan adanya gambar halaman bisa telihat berwarna, sehingga tampilannya lebih bagus dan menarik. Berikut adalah format untuk tag <IMG> untuk memasukkan gambar:

…. Maksudnya kita cari gambar yang di inginkan di file yang berada di dalam computer .

<html>

<head>

<title>menambahkan gambar </title>

</head>

</body>

</html>

sehingga akan menghasilkan tampilan seperti berikut :

BERPINDAH BARIS

Untuk membuat tampilan berpindah baris, kita bisa menggunakan break. Dengan menggunakan tag break akan membuat hasilnya lebih bagus, tidak seperti <pre>.

Apa perbedaan antara break dengan pre pada pembuatan paragraph????

Pemindahan baris dengan menggunakan break tidak memberikan jarak dengan bawahnya. Jadi dengan break tulisan teks masih dianggap satu paragraph.

Berikut ini contoh sebelum menggunakan break:

<title>sebelum break</title>

</head>

<body><h1>puisi cinta</h1>

<p>Namun karena aku ingin menjagamu dan menjaga diriku sendiri dari khalwat yang menjebak</p>

<p>aku mencintaimu dengan menjaga diriku dan dirimu</p>

<p>menjaga kesucianku dan kesucianmu,</p>

<p>menjaga kehormatanku dan kehormatanmu</p>

<p>menjaga kebeningan hatiku dan hatimu</p>

</body>

</html>

sehingga akan menghasilkan tampilan seperti berikut :

SETELAH MENGGUNAKAN BREAK

<title>Setelah break</title>

</head

<body><h1>puisi cinta</h1>

<p>Namun karena aku ingin menjagamu dan menjaga diriku sendiri dari khalwat yang menjebak</br>

aku mencintaimu dengan menjaga diriku dan dirimu</p>

<p>menjaga kesucianku dan kesucianmu,</br>

menjaga kehormatanku dan kehormatanmu</p>

<p>menjaga kebeningan hatiku dan hatimu</p>

</body>

</html>

</body>

</html>

sehingga akan menghasilkan tampilan seperti berikut :

Selasa, 06 Mei 2014

Pengenalan Dreamwaever

PENGENALAN DREAMWEAVER

Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Menurut survey yang dilakukan oleh Pantone.com, www.pantone.com/products/products.asp?idArticle=209&idArea=1, pengguna Dreamweaver adalah 59% dari seluruh koresponden yang disurvey dan memang digunakan tidak hanya oleh desainer, tapi juga programer.

Dalam seri tutorial ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver MX dan membuat halaman web sederhana.

Mengenal Lingkungan Kerja Dreamweaver MX

Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.

Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.

Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Bekerja dengan Teks
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2

Fig 2. Property Inspector

Heading

Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.

Fig 3. Heading

Paragraf dan Line Break

Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (&lg:
&tg:) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan
di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.

Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector

Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 5.

Membuat Link, Anchor, dan Target

Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.html

Senin, 05 Mei 2014

Mebuat Teks/gambar bergerak pada tampilan web/blog

Tag Marquee

Salah satu cara untuk menarik perhatian pada suatu kata atau kalimat dalam suatu blog atau website adalah dengan membuat variasi pada kata atau kalimat tersebut.
Diantaranya dengan menggunakan Marquee / text berjalan ( pergerakkan text dari kiri ke kanan atau kanan ke kiri, ke atas ke bawah atau sebaliknya, juga gabungan atau variasi dari keduanya).

Maka dari itu, Marquee merupakan salah satu tag yang favorit digunakan untuk mempercantik tampilan blog / web kita. marquee bukan hanya digunakan untuk membuat text berjalan tapi juga dapat digunakan untuk gambar berjalan pada "header".

Berikut adalah contoh-contoh koding marquee untuk teks bergerak :

1. Bergerak dari kanan ke kiri
<marquee> Kata / kalimat yang akan ditampilkan </marquee>

2. Bergerak dari kiri ke kanan

<marquee direction="right"> Kata / kalimat yang akan ditampilkan </marquee>

3. Bergerak dari kanan ke kiri dan dari kiri ke kanan

<marquee behavior="alternate"> Kata / kalimat yang akan ditampilkan </marquee>

4. Bergerak dari bawah ke atas

<marquee direction="up">Kata / kalimat yang akan ditampilkan </marquee>

5. Bergerak dari Atas ke Bawah

<marquee direction="down"> Kata / kalimat yang akan ditampilkan </marquee>

6. Bergerak dari bawah ke atas dan dari Atas ke Bawah

<marquee behavior="alternate" direction="up">Kata / kalimat yang akan ditampilkan </marquee>

7. Bergerak Zigzag

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right"> Kata / kalimat yang akan ditampilkan </marquee></marquee>

8. Marquee dengan background warna

<span style="color: white;"><marquee direction="left" style="background: RED;">Kata / kalimat yang akan ditampilkan</marquee></span>

9. Marquee dengan Border <marquee style="border: BLUE 2px SOLID;">Kata / kalimat yang akan ditampilkan</marquee>

Berikut adalah Koding Marquee untuk "gambar bergerak" :

Sebenarnya sama saja kodingnya, yang berbeda adalah kita harus memanggil gambar yang kita mau tampilkan. kita harus menyimpan gambar tersebut dalam satu folder yang sama dengan html.

jika sudah, berikut koding marquee gambar :

<marquee>
<img src="lokasi url image 1">
<img src="lokasi url image 2">
<img src="lokasi url image 3">
<img src="lokasi url image 4">
<img src="lokasi url image 5">
<img src="lokasi url image 6">
</marquee>
Dan seterusnya...........

Sabtu, 17 Mei 2014

BOOTSTRAP

Tutorial Bootstrap – Bagaimana Cara Menggunakan Bootstrap

Selasa, 13 Mei 2014

Apa Itu Bootstrap

Minggu, 11 Mei 2014

Tampilan Layout Keren

Sabtu, 10 Mei 2014

CSS

Atribut ID

1. Position (Posisi)

2. Float (Nempel)

Internal CSS

Eksternal CSS

Inline CSS

Link

Kamis, 08 Mei 2014

Layout Web Sederhana

MEMBUAT LAYOUT WEB SEDERHANA MENGGUNAKAN MACROMEDIA DREAMWEAVER 8

Selasa, 06 Mei 2014

Pengenalan Dreamwaever

PENGENALAN DREAMWEAVER

Senin, 05 Mei 2014

Mebuat Teks/gambar bergerak pada tampilan web/blog

Tag Marquee

Maka dari itu, Marquee merupakan salah satu tag yang favorit digunakan untuk mempercantik tampilan blog / web kita. marquee bukan hanya digunakan untuk membuat text berjalan tapi juga dapat digunakan untuk gambar berjalan pada "header".

Berikut adalah contoh-contoh koding marquee untuk teks bergerak :

1. Bergerak dari kanan ke kiri <marquee> Kata / kalimat yang akan ditampilkan </marquee>

2. Bergerak dari kiri ke kanan

1. Bergerak dari kanan ke kiri
<marquee> Kata / kalimat yang akan ditampilkan </marquee>