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...........

Minggu, 04 Mei 2014

Contoh Coding Pembuatan Tabel dengan Notepad++

Membuat Tabel Menggunakan Notepad++

Berikut adalah contoh membuat tabel menggunakan notepad++.

Copy dan pastekan kode berikut ke dalam notepad++ anda .

<html>
<head>
<title>tugas tabel</title>
</head>
<body>
<table align="center" border="5" bgcolor="white" cellpadding="5" cellspacing="0" >
<p><th colspan="2">Amik Harapan Medan</th></p>
<tr>
<th colspan="2"> </th>
<p><th colspan="2">21 Maret 2012</th></p>
</tr>
<tr>
<th>No</th>
<th>Data Mahasiswa</th>
</tr>
<tr>
<td>1.Nama</td>
<td>Sunaryo lumbanraja</td>
</tr>
<tr>
<td>2.Nim</td>
<td>1003128</td>
</tr>
<tr>
<td>3.Kelas</td>
<td>4.3 Siang</td>
</tr>
<tr>
<td>4.Alamat</td>
<td>Jl.Meranti</td>
</tr>
<tr>
<td>5.Usia</td>
<td>20 Tahun</td>
</tr>
<th colspan="2"> </th>
<th colspan="5">Medan </th>
<tr>
<th colspan="2"> </th>
<th colspan="2">TTD </th>
</tr>
<tr>
<th colspan="2"> </th>
<th colspan="2">Sunaryo lumbanraja </th>
</tr>
</table>
</body>
</html>

Berikut adalah hasilnya :

Tag HTML Notepad++ Lengkap

Tag HTML Lengkap di Notepad++

Adakah diantara kalian sudah mengetahui tentang tag dan atribut dalam HTML ??? sebagian besar pasti sudah tetapi sekedar untuk mengingat dam memberi info dalam HTML terdapat beberapa tag dan atribut yang masing – masing mempunyai fungsi yang penting dalam web dalam HTML .

HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.Dalam belajr HTML anda bisa belajar membuatnya di dreamweaver atau di notepad
Nah jika ada yang belum tau anda bisa membacanya di bawah ini,saya akan menjelaskan dari dasarnya !!!!!
<html>= pertama kali anda menuliskan script pada dreamweaver atau notepad anda menuliskan <html> itu wajib karna sebagai pembuka dalam menulis script – script yang lain.

ingat : setiap tag harus di tutup dengan slais “/” ex:<html> …. </html> ; <head> … </head>;dll
<head>….</head> & <title> ….</title>= pada bagian ini adalah judul dari web/html anda
contoh :
<head>
<title> home page saya </title>
</head>
<body> = berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya sebagai halaman web anda
dalam tag body bisa kita sisipkan atribut background yang berguna sebagai background halaman web,contoh :
<body bgcolor=”red”> atau <body bgcolor=”#FF0000”> = memberi warna pada halaman web anda
<body background=”Gambar.jpg”> = memberi background gambar pada halaman web anda,jika anda ingin gambar anda terlihat dan tidak terjadi kesalahan buatlah semua pekerjaan anda dalam 1 folder
<a> … </a> = Membuat hyperlink/link
contoh :
<a href=”google.com”> Home </a> = jika anda klik home anda akan menuju halaman google
<img> = memasukan gambar pada halaman web anda
contoh :
<img src=”dian.jpg”> = perhatikan extensi pada image nya jika berextensi .gif jadi dian.gif tetapi jika jpeg jadi dian.jpg
<img src=”dian.jpg” width=”50″ height=”50″ > = untuk width dan height ini untuk mengatur ukuran gambar
<font> … </font> = membuat tulisan pada halaman web
contoh atributnya :
<font size =”4″ color=”blue” face=”arial”> dianluffi.wordpress.com </font>
atribut size = ukuran tulisan
atribut color = warna pada tulisan
atribut face = jenis untuk tulisannya
lalu tutup dengan “</font>”
<marquee> … </marquee> = tulisan berjalan atau bergerak pada halaman web anda
contoh atribut dalam marquee :
DIRECTION = Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri, kanan, atas, atau bawah
<marquee direction=”right”> dianluffi.wordpress.com </marquee> = tulisan berjalan dari kiri ke kanan
<marquee direction=”left”> dianluffi.wordpress.com </marquee> = tulisan berjalan dari kanan ke kiri
<marquee direction=”up”> dianluffi.wordpress.com </marquee> = tulisan berjalan ke atas
<marquee direction=”down”> dianluffi.wordpress.com </marquee> = tulisan berjalan ke bawah
BEHAVIOR = Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan adalah perilaku geraknya
<marquee behaviour=”scroll”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan
<marquee behaviour=”slide”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan sebelumnya
<marquee behaviour=”alternate”> dianluffi.wordpress.com </marquee> = tulisan dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-balik
SCROLL DELAY = Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan.,nilai yang di isi untuk atribut ini adalah berupa angka dalam mili detik
<marquee scrolldelay=”500″> dianluffi.wordpress.com </marquee> = Delay 500 mili detik
<marquee scrolldelay=”1000″> dianluffi.wordpress.com </marquee> = Delay 1000 mili detik
BGCOLOR = Atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan memiliki warna,prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag TABLE yaitu memberikan warna latar
<marquee bgcolor=”blue”> dianluffi.wordpress.com </marquee> = tag ini bergerak dengan memberikan warna pada dianluffi.wordpress.com
HSPACE = Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada disamping kanan dan kiri tulisan
Selamat datang <marquee width=”20%” bgcolor=”blue”> dianluffi.wordpress.com <br> one piece </marquee> thank you
VSPACE = Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan yang ada diatas dan dibawah tulisan
Selamat datang <br> <marquee width=”20%” bgcolor=”blue”> dianluffi.wordpress.com <br> one piece </marquee><br> thank you
<big> … </big> = membuat tulisan menjadi besar
<small> … </small> = membuat tulisan menjadi kecil
<b> … </b> = membuat tulisan bercetak tebal / bold
<i> … </i> = membuat tulisan bercetak miring / italic
<u> … </u> =membuat tulisan bergaris bawah / underlined
<hn>Judul paragraf</hn> ——>n = 1,2,3,4,5,6 (tingkat judul) = Untuk menuliskan judul suatu paragraf atau lebih dikenal sebagai heading
<p> … </p> = membuat paragraf
<br> = tag untuk mengganti baris ,tag ini tidak perlu di tutup
<tr> … </tr> = tag untuk membuat baris pada table
<td> … </td> = tag untuk membuat kolom/cell pada table
<table> … </table> = untuk mebuat table
Pada tag table terdapat beberapa atribut yaitu :
<table border=”1”> … </table> = merupakan perintah utama dalam pembuatan tabel,pada script ini yang dimaksud dengan border itu adalah ketebalan untuk table nya yaitu table dengan ketebalan 1px,jika anda ganti 1 itu dengan 2 maka garis bordernya juga semakin tebal
<table border=”1″ valign=”top” align=”center” width=”250″ height=”400″ bgcolor=”blue”> … </table>
align=”…” untuk mengatur tabel rata tengah, kanan, atau kiri
width=”…” untuk mengatur lebar tabel,bisa di isi dengan satuan pixel atau persen.
Contoh:
<table width=”80%”> atau <table width=”600”>
height=”…” untuk mengatur tinggi table
valign=”…” untuk mengatur perataan secara vertikal dari suatu cell.Seperti top, middle, dan bottom
bgcolor=”…” untuk mengatur warna background tabel,baris, atau cell
<li> … </li> = Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol ” • ” (bullet) Kelompok item harus diapit oleh tag <ul> … </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol>… </ol>
contoh :
<sup> …. </sup> & <sub> … </sub> = Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
<!– –> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama <applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<blink> Membuat teks berkedip
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<hr> Membuat garis horizontal
<input> Mendefinisikan input field pada form
<map> Mendefinisikan client-side map
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<!DOCTYPE> =Mendefinisikan informasi tipe dokumen
<abbr> = Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja
<acronym> = Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
<address> = Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<base /> = Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen
<bdo> = Digunakan untuk menimpa arah teks
<blockquote> = Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam
<button> = Mendefinisikan sebuah tombol diklik
<cite> = Mendefinisikan kutipan
<code> = Mendefinisikan sebuah bagian dari kode komputer
<col /> = Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel
<colgroup> = Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan
<del> = Untuk memberi garis tengah pada teks/mencoret teks
<dfn> = Mendefinisikan sebuah istilah definisi
<dir> = Mendefinisikan sebuah daftar direktori
<dl> = Mendefinisikan sebuah daftar definisi
<dt> = Mendefinisikan istilah (item) dalam daftar definisi
<em> = Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
<fieldset> = Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
<iframe> = Mendefinisikan sebuah inline frame
<ins> = Membuat teks bergaris bawah
<kbd> = Mendefinisikan teks yang di input dari keyboard
<label> = Mendefinisikan label untuk sebuah elemen <input>
<legend> = Mendefinisikan sebuah caption untuk elemen <fieldset>
<link /> = Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
<listing> = Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag <pre> karena tag <listing> tidak layak/diprotes
<menu> = Mendefinisikan sebuah daftar menu
<meta /> = Mendefinisikan metadata tentang sebuah dokumen HTML
<noscript> = Jika browser user tidak mendukung client-side scripts
<object>meletakkan embed sebuah objek
<optgroup> = Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk sebuah daftar drop-down
<option> = Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar drop-down
<param /> = Mendefinisikan sebuah parameter untuk objek
<q> = Mendefinisikan sebuah kutipan singkat
<s> = Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya menggunakan tag <del>
<samp> = Mendefinisikan contoh keluaran dari program komputer
<select> = Membuat daftar drop-down
<span> = Mendefinisikan sebuah section dalam dokumen
<strike> = Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
<strong> = Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<style> = Mendefinisikan informasi style untuk dokumen HTML
<tbody> = Untuk mengelompokkan isi body di dalam sebuah tabel
<textarea> = Mendefinisikan sebuah kontrol input multiline
<tfoot> = Untuk mengelompokkan isi footer di dalam sebuah tabel
<th> = Mendefinisikan sel header di dalam sebuah tabel
<thead> = Untuk mengelompokkan isi header di dalam sebuah tabel
<tt> = Mendefinisikan teletype text
<ul> = Mendefinisikan daftar dalam format bullet
<var> = Mendefinisikan sebuah variabel

Sabtu, 03 Mei 2014

Tag- tag Lainnya

Tag-tag lainnya

Sip, gampang kan? eits jangan senang dulu, itu tadi semua contoh tag-tag yang sering kita gunakan, masih banyak lagi tag-tag lainnya yang lebih ajaib seperti <canvas>, <audio>, <video>, <summary>, <progress>, <datalist> masih banyak lagi, lupa saya apa aja.
Tetapi yang utama dan penting-penting ya itu tadi yang sudah saya sebutin. Untuk yang lainnya kapan-kapan kalau sempat saya buat artikel tersendiri, selamat mencoba, jika ada yang salah silahkan didiskusikan di komentar dibawah.

Agar HTML5 jalan di IE8, IE7 dan IE6

Ada yang kelupaan kemarin, bagaimana agar HTML5 jalan di IE8, IE7 dan IE6? mengingat bahwa hanya Internet Explorer 9 keatas saja yang support HTML5, ya walaupun Internet Explorer 9 belum mensupport semua tag HTML5. Anda bisa menggunakan Javascript untuk melakukannya, ada 2 yang menurut saya bagus yaitu Modernizr dan HTML5 Shiv. Saya akan memberitahu yang HTML5 Shiv saja karena scriptnya lebih cepat dan mudah. Tetapi jika Anda ingin agar browser IE lama support CSS3 maka gunakan modernizr. Oke didalam header pasang saja kode seperti ini:

<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Jumat, 02 Mei 2014

Tag-tag HTML

Belajar HTML5 Dasar – Pengenalan Tag-tag HTML5 baru

Sebenarnya ini tulisan lama dari blog saya yang dulu, ya karena sayang dan secara nggak sengaja nemu dikomputer, jadilah saya upload lagi. Tahun 2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis beberapa bulan lalu, maka semua browser utama (IE, Firefox, Safari, Chrome dan Opera) telah mendukung HTML5 dan CSS3. Ya walaupun belum semua fungsi HTML5 & CSS3 didukung spenuhnya, tetapi tahun ini merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML? atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru yang sangat menarik. Disini saya akan mengajari tag-tag yang baru saja dan yang paling banyak digunakan dalam melayout sebuah website.

Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu. Karena disini saya hanya akan menerangkan tag-tag yang baru di HTML5, maka saya asumsikan Anda sudah tahu tag-tag yang lama.

Oke, sebelumnya kita nanti akan membuat sebuah website dengan HTML5 yang layoutnya / wireframe nya kira-kira seperti ini:
Wireframe Website

Nah dengan wireframe seperti itu nanti kira-kira kita akan menggunakan tag berikut ini:
Tag HTML5 Wireframe

Oke ada banyak tag yang baru yah, mari kita mulai saja, siapkan teks editor Anda dan kita buat deklarasi HTML5 beserta <head> nya:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Drop Down Menu</title>

<head>

<body>

Isi web disini

</body>

</html>

Sip, lebih simpel kan, kalau dulu jaman XHTML kita perlu mendeklarasikan transitional, atau strict, sekarang cukup <!DOCTYPE html>. Nah untuk isinya saya akan memberitahu tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam <body>, yang ada tulisan Isi web disini.

<header>

Tag pertama kita adalah <header>, sesuai namanya tag ini ditempatkan diatas pada bagian awal website. Kalau dulu kita pakai <div id=”header”> sekarang kita menggantinya dengan <header>. Tetapi <header> tidak harus melulu dipaling atas web, kita bisa memiliki beberapa <header>, misal didalam artikel (kita akan bahas ini nanti dibagian article).
Nah, didalam <header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi <div> pun tidak masalah.

<hgroup>

Weittss <hgroup>, apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari satu heading berurutan <h1> – <h6> maka kita bisa mengelompokkannya dengan <hgroup>. Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya cuma satu ya nggak usah dikasih <hgroup>. Oke daripada pusing langsung saja lihat contohnya ya:

<header id="main-header">

<hgroup>

<h1>Ini Website HTML5 pertama saya</h1>

<h2>Dan juga yang terakhir karena saya bingung</h2>

</hgroup>

</header>

Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan sesuatu kedalam <header>.

<nav>

Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada website Anda. Ya kalau dulu kita pakai <ul><li> untuk membuat navigasi menu, nah sekarang kita pakai… ummm.. ya sama pakai <ul><li> juga, tetapi kita bungkus dengan <nav>. Nah langsung saja kita lihat contoh kodenya:

<nav id="main-nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

Sip, sama kan? Yang perlu diingat bahwa <nav> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav>.

<section>, <article> dan <time>

Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Kita boleh punya banyak tag <article>, misal saja komentar, nah setiap komentar kita bungkus pakai <article> atau forum dan lain sebagainya. Apabila kita memiliki list atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article> tersebut. Bingung? Langsung kecontoh:

<section>

<h1>Artikel Terbaru</h1>

<article>Isi Teks Artikel 1</article>

<article>Isi Teks Artikel 2</article>

<article>Isi Teks Artikel 3</article>

</section>

Jadi karena diantara kelompok-kelompok <article> ada tag <h1> maka kita tetap perlu membungkusnya dengan <section>.

<section> tidak boleh diberi style, tidak boleh sebagai container layout. Tetap gunakan <div> apabila ingin melayout.

Nah, berikutnya adalah <time>, sesuai namanya, digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. <time> memiliki atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu dalam format standar meskipun kita menulisnya tidak dalam format standar. Contoh:

<p>Ditulis oleh Dhimas pada <time datetime="2011-11-23">Senin Pahing, 23 November 2011</time></p>

Mudah kan? oke kita akan lanjut ke tag berikutnya

Oh iya, gosip mengatakan bahwa <time> akan dibuang dari HTML5 nggak tau mau diganti apa, tetapi menurut saya tag <time> cukup bagus dan tidak perlu digantikan

<figure> dan <figcaption>

<figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua tag <img> kita bungkus dengan <figure>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>. Oke langsung saja lihat contoh kodenya:

<figure>

<img src="foto.jpg" alt="Foto Artis">

<figcaption>Ini adalah foto artis yang saya ambil di kali</figcaption>

</figure>

Kira-kira kodenya seperti itu, kita tinggal menstylenya dengan CSS saja sesuai keinginan kita. Oh iya kita bisa memasang tag <a>, <strong>, <em> didalam <figcaption>

<aside>

Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh penggunaan <aside> berbeda-beda. Oke kalau dilihat dari sejarahnya <aside> itu awalnya namanya <sidebar> tetapi kemudian diganti menjadi <aside>. Nah <aside> merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web, oke berarti bisa disimpulan bahwa <aside> digunakan sebagai sidebar pada website. Nah permasalahannya setiap sidebar misal WordPress, pasti didalamnya terdapat konten-konten lagi, kalau di WordPressbiasanya widget. Nah terus kode nya seperti apa? Ada 3 kemungkinan, yang pertama:

<aside id="sidebar">

<aside>

Ini Widget Pertama

</aside>

<aside>

Ini Widget Kedua

</aside>

<aside>

Ini Widget Ketiga

</aside>

</aside>

Atau yang kedua:

<aside id="sidebar">

<div>

Ini Widget Pertama

</div>

<div>

Ini Widget Kedua

</div>

<div>

Ini Widget Ketiga

</div>

</aside>

Atau yang ketiga:

<div id="sidebar">

<aside>

Ini Widget Pertama

</aside>

<aside>

Ini Widget Kedua

</aside>

<aside>

Ini Widget Ketiga

</aside>

</div>

Nah yang mana yang bener? <aside> didalamnya <aside> atau didalamnya <div>, atau <div> didalamnya <aside>? Tidak ada dokumentasi yang pasti yang mana yang benar, tetapi saya cenderung menggunakan yang ketiga, karena tingkatan <div> lebih luas atau lebih tinggi levelnya daripada <aside>. Tetapi ya terserah Anda, karena semua website yang sudah menggunakan HTML5 menggunakan ketiga cara tersebut.

<footer>

Yang terakhir adalah <footer>, sesuai namanya <footer> diletakkan dibagian bawah website, tetapi kita tidak hanya menggunakannya diakhir website saja. Sama seperti <header> dimana kita menggunakan <footer> dibagian akhir <article>. Jadi intinya <footer> sama dengan <header>, hanya saja <footer> diakhir sedangkan <header> diawal. Berikut ini contoh sederhana penggunaan footer diakhir website:

<footer>

<p>Copyright 2014, Dhimas Ronggobramantyo</p>

</footer>

Sabtu, 17 Mei 2014

Tutorial Bootstrap – Bagaimana Cara Menggunakan Bootstrap

Selasa, 13 Mei 2014

Minggu, 11 Mei 2014

Sabtu, 10 Mei 2014

Atribut ID

1. Position (Posisi)

2. Float (Nempel)

Internal CSS

Eksternal CSS

Inline CSS

Link

Kamis, 08 Mei 2014

MEMBUAT LAYOUT WEB SEDERHANA MENGGUNAKAN MACROMEDIA DREAMWEAVER 8

Selasa, 06 Mei 2014

PENGENALAN DREAMWEAVER

Senin, 05 Mei 2014

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

Minggu, 04 Mei 2014

Membuat Tabel Menggunakan Notepad++

Berikut adalah contoh membuat tabel menggunakan notepad++.

Adakah diantara kalian sudah mengetahui tentang tag dan atribut dalam HTML ??? sebagian besar pasti sudah tetapi sekedar untuk mengingat dam memberi info dalam HTML terdapat beberapa tag dan atribut yang masing – masing mempunyai fungsi yang penting dalam web dalam HTML .

Sabtu, 03 Mei 2014

Tag-tag lainnya

Agar HTML5 jalan di IE8, IE7 dan IE6

Jumat, 02 Mei 2014

<header>

<hgroup>

<nav>

<section>, <article> dan <time>

<figure> dan <figcaption>

<aside>

<footer>

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