Lexdorf Code: HTML

Showing posts with label HTML. Show all posts

Tuesday, January 7, 2014

Membuat Peta Dengan Google Maps

sebenarnya sudah lama ingin memposting artikel mengenai ini, hanya saja.. ya biasa masalah deadline dan sebagainya yang menghambat untuk meluncurkan tulisan mengenai maps ini. mumpung waktunya pas semoga bisa bermanfaat :D

dengan adanya google maps, kita bisa memanfaatkan API yang sudah dengan baiknya google buat kita bisa menggunakannya secara free. sekarang kita akan coba membuat peta yang menampilkan kawasan Indonesia sebagai center view (pusat perhatian pada saat website di buka). berikut ini kodenya

peta.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">

    <title>Google Maps</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var tableId = '1ag1g0AguWSczmuXhOudN1XMXTCys8_gwjiUIfg';

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(-6.327827980262304, 106.67339647284699),
          zoom: 4,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas" style="width:650px; height:450px"></div>

</body>
</html>

hasil dari kode diatas adalah

Saturday, January 4, 2014

Membuat Editor Seperti MS. Word

kali ini saya akan membahas tentang cara membuat editor seperti MS. Word, akan kita gunakan plugin CKEDITOR. silahkan download pada link yang tersedia dibawah artikel ini.

berikut kodenya

<html>
<head>
<title></title>
<link rel="stylesheet" href="ckeditor/contents.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

</head>
<body>
<textarea id="editor"></textarea>
<script type="text/javascript" src="ckeditor/editor.js"></script>

</body>
</html>

http://www.4shared.com/zip/xYq5x45fce/ckeditor.html

Saturday, May 21, 2011

Tag Dasar HTML

Tag	Deskripsi	Contoh
<b></b>	Teks tebal	Teks tebal
<i> </i>	Teks miring	Teks miring
<u> </u>	Teks garis bawah	Teks garis bawah
<pre></pre>	Preformatted teks	Contoh teks
<h1></h1>	Header 1	Header 1
<h2></h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4></h4>	Header 4	Header 4
<h5></h5>	Header 5	Header 5
<h6></h6>	Header 6	Header 6
<sub></sub>	Subscript	_Subscript
<sup></sup>	Superscript	^Superscript

Font

Tag	Atribut	Deskripsi
<font></font>	Color, size, name	Mengubah gaya suatu huruf

Links

Tag	Atribut	Deskripsi
<a> </a>	Href, target, style, class, name, id	Membuat link ke dokumen atau situs lainnya

Gambar

Tag	Atribut	Deskripsi
<img>	Src, alt, name, border, height, width	Menampilkan sebuah gambar

Formatting

Tag	Deskripsi	Contoh
<blockquote></blockquote>	Digunakan untuk mengatur text dan gambar dalam suatu tag	Contoh text in a block quote format ( “ “ )
<ol></ol>	Ordered List (digunakan dengan <li>)	1. Item 1
<ul></ul>	Unordered List (digunakan dengan <li>)	• Item 1
<li>	Elemen List
<dd></dd>	Definition List
<dt>	Definition Term
<dd>	Definition Description
<p></p>	Paragraf
<br>	Ganti baris
<hr>	Garis horizonta
<center></center>	Menengahkan elemen

Tabel

Tag	Deskripsi	Contoh
<table></table>	Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign	Mengatur semua elemen table
<tr></tr>	Height, bgcolor, background, align, valign, title	Membuat baris baru
<td></td>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Membuat kolom
<th></th>	Height, width, bgcolor, background, align, valign, title, colspan, rowspan	Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>	Height, width, align, valign, bgcolor, background	Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>	Height, width, align, valign, bgcolor, background, colspan	Format yang berlaku bagi kolom

Form

Tag	Deskripsi	Contoh
<form></form>	Method, action, name, enctype	Mengatur elemen dari form
<input type=>	Text, password, hidden, radio, checkbox, submit, image, reset	Variasi dari tipe elemen input dalam form
<select></select>	Name, size	Membuat combo-box. Digunakan bersama dengan option
<option>	Selected, name, value
<textarea></textarea>	Name, rows, cols, wrap	Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
wrap	Off virtual physical	no wrap word wrap, sent as one line word wrap, sent with breaks

Pengertian HTML

Hypertext Markup Language (HTML) adalah bahasa markup yang umum digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa mark-up atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk menentukan format atau style dari teks yang di tandai.

Pada dasarnya elemen HTML ada 2 kategori:

Elemen <head> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut.
Elemen <body> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser.

Sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu di awali dengan <namatag> dan di akhiri dengan </namatag>.

Berikut adalah contoh HTML:

<html>
<head>
<title>Contoh HTML</title>
</head>
<body>inilah contoh kode HTML
</body>
</html>

Tuesday, January 7, 2014

Membuat Peta Dengan Google Maps

Saturday, January 4, 2014

Membuat Editor Seperti MS. Word

Saturday, May 21, 2011

Tag Dasar HTML

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Pengertian HTML

My Bio

Translate