Pages

Subscribe:
                            

Labels

Blog ini hanya untuk sharing semata jika ada rekan sekalian yang ingin menyumbangkan ide diperkenankan untuk mengisi box komentar. Terima Kasih

Rabu, 05 Oktober 2011

HTML merupakan dasar dari pembuatan website

HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.

HTML merupakan dasar dari pembuatan websiteSuatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.

HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.

Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.

Silahkan anda pelajari materi ini sampai habis paling tidak ada sedikit tambahan ilmu mengenai pola pembentukan HTML jadi saat anda nanti ingin memaksimalkan web yang anda buat tidak lagi mengalami kesulitan karena sudah mengetahui pola dasarnya.

Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.

Sekarang buka saja notepad anda dan kita mulai.
Kode HTML pertama

Buka notepad dan tuliskan kode dibawah ini
Hello World

Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello <b>World!!</b>

Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag <b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.

Sebuah halaman HTML yang baik harus memiliki tag <head> dan <body>, tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.

Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).

Containers

Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:

Hello <i>World!!</i><br>


Hasil:

Hello World!!

Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu </i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.
Standalone Tag

Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag <img> yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.

Atribut

Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:

Hello <font face="verdana" size="2" color="red">World!!</font>


Hasilnya:

Hello World!!

Tulisan World!! terletak ditengah tag <font> nah tag <font> memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?
HTML Entity

Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:

Saya belajar web

Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu &nbsp; jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:

Saya belajar&nbsp;&nbsp;&nbsp;&nbsp;web


HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.

Struktur Dokumen HTML

Tadi sudah saya katakan bahwa HTML yang baik memiliki tag <head> dan <body>. <head> mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti <base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:

<html>
<head>
<title>Your title</title>
</head>
<body bgcolor="#cccccc">
Hello <b>World!!</b>
</body>
</html>

Hasilnya didalam Microsoft Internet Explorer :

Internet Explorer






Anda lihat teks yang berada diantara tag <title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.
Susun file Anda

Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.
index.html

Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.

Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.

Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body>
Teks dan Paragraf

Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.

Heading merupakan container yang diawali dengan tag <h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.

Cobalah kode berikut ini:

<h1>My First HTML</h1>
<h2>My First HTML</h2>
<h3>My First HTML</h3>
<h4>My First HTML</h4>
<h5>My First HTML</h5>
<h6>My First HTML</h6>

Hasil:
Contoh penggunaan tag Heading

Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah

Sekarang coba kode berikut ini:

<p>Halo, nama saya <b>Budi</b> dan
saya ingin belajar HTML.</p>
<p>Ini merupakan <i>kode HTML pertama saya</i> dan saya
belajar untuk <u>memformat</u> teks dalam HTML </p>

Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba :)

Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:

<h1 align="center">Nama saya Jono</h1>
<p>Halo nama saya Jono dan saya lagi belajar HTML</p>
<p align="right">James, 2006</p>


Tidak perlu berlama-lama langsung saja pada point utama membuat tulisan, link dan banner memiliki fungsi masing-masing. Berikut ulasan lengkapnya :

Bagaimana membuat tulisan :
1. Rata Kiri
Taruh text di sini untuk memberi paragraf rata kiri

<div align="left">Taruh text di sini untuk memberi paragrap rata kiri </div>

2. Rata Kanan
Taruh text di sini untuk memberi paragraf rata kanan

<div align="right">Taruh text di sini untuk memberi paragraf rata kanan</div>

3. Rata Tengah
Taruh text di sini untuk memberi paragraf rata tengah

<div align="center">Taruh text di sini untuk memberi paragraf rata tengah</div>

4. Rata kanan kiri
Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri

<div align="justify">Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri.Taruh text di sini untuk memberi paragraf rata kanan kiri</div>

1. Tulisan berjalan dari kanan ke kiri
Tulisan berjalan dari kanan ke kiri (tulisan anda letakkan disini)
<marquee direction="left" scrollamount="5" align="center">Tulisan berjalan dari kanan ke kiri (tulisan anda letakkan disini)</marquee>

2. Tulisan berjalan dari kiri ke kanan
Tulisan berjalan dari kiri ke kanan (tulisan anda letakkan disini)
<marquee direction="right" scrollamount="5" align="center">Tulisan berjalan dari kiri ke kanan (tulisan anda letakkan disini)</marquee>

3. Tulisan berjalan bolak-balik kanan kiri
Tulisan berjalan bolak-balik kanan kiri(tulisan anda letakkan disini)
<marquee direction="left" scrollamount="5" align="center" behavior="alternate">Tulisan berjalan bolak-balik kanan kiri(tulisan anda letakkan disini)</marquee>

4. Tulisan berjalan dari atas ke bawah
Tulisan berjalan dari atas ke bawah(tulisan anda letakkan disini)
<marquee direction="down" scrollamount="5" align="center">Tulisan berjalan dari atas ke bawah(tulisan anda letakkan disini)</marquee>

5. Tulisan berjalan dari bawah ke atas
Tulisan berjalan dari bawah ke atas(tulisan anda letakkan disini)
<marquee direction="up" scrollamount="5" align="center">Tulisan berjalan dari bawah ke atas(tulisan anda letakkan disini)</marquee>

6. Tulisan berjalan mondar mandir atas bawah
Tulisan berjalan mondar mandir atas bawah(tulisan anda letakkan disini)
<marquee direction="up" scrollamount="5" align="center" behavior="alternate">Tulisan berjalan mondar mandir atas bawah(tulisan anda letakkan disini)</marquee>

7. Tulisan berjalan zig-zag nembus
Tulisan berjalan zig-zag nembus(tulisan anda letakkan disini)

<center><marquee direction="up" scrollamount="5" align="center" behavior="alternate" width="90%"><marquee direction="right">Tulisan berjalan zig-zag nembus(tulisan anda letakkan disini)</marquee></marquee></center>

8. Tulisan berjalan zig-zag mantul
Tulisan berjalan zig-zag mantul(tulisan anda letakkan disini)

<center><marquee direction="up" scrollamount="5" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate">Tulisan berjalan zig-zag mantul(tulisan anda letakkan disini)</marquee></marquee></center>


Bagaimana membuat link :

1. Terbuka dijendela yang sama
Membuat border background script berbeda warna
<a href='http://ipanelonlineku.blogspot.com/2011/10/membuat-border-background-script.html'>Membuat border background script berbeda warna</a>

2. Terbuka dijendela yang baru
Membuat tampilan background memilki variasi warna
<a href="http://ipanelonlineku.blogspot.com/2011/09/membuat-tampilan-background-bervariasi.html" target="_blank">Membuat tampilan background memilki variasi warna</a>

Bagaimana membuat banner :

1. Upload photo ke blogger
Membuat tampilan background bervariasi

<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKP_bLbuNc9LGAAdp3bugtGZLr6yRhvxmDjfpo1t7ig-TAG9-IHFpGubaaa8ZO3-zUiUZvOcirxYy96WoTkdi-EHYrwCWt7dAZ7nqlENMIS8e6kWIU4JJMMH2PAfBBdI7G-ma-_ZRWC1k/s1600/Membuat+tampilan+background+bervariasi+.jpg"><img style="float:center; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKP_bLbuNc9LGAAdp3bugtGZLr6yRhvxmDjfpo1t7ig-TAG9-IHFpGubaaa8ZO3-zUiUZvOcirxYy96WoTkdi-EHYrwCWt7dAZ7nqlENMIS8e6kWIU4JJMMH2PAfBBdI7G-ma-_ZRWC1k/s200/Membuat+tampilan+background+bervariasi+.jpg" alt="Membuat tampilan background bervariasi " id="BLOGGER_PHOTO_ID_5659234600147638898" border="0" /></a></div>

Dapatkan berbagai informasi menarik dengan mengunjungi link yang ada dalam blog ini mulai dari bisnis online, lowongan kerja, tips blogging dll. Pilih berdasarkan kategori yang anda minati lalu masukkan kata kuncinya dan klik cari informasi sekarang
Google
Kategori -->
Blog ini tidak memiliki kerja sama dengan pihak manapun semua hasil yang didapatkan berasal dari kerja keras penulis mengoptimalkan blog secara berkala. Anda bisa siapapun juga bisa asal ada usaha
Kekayaan sesungguhnya adalah ilmu yang terus di kembangkan tidak pernah bosan belajar hal baru terlebih ilmu itu bermanfaat bagi orang lain. Percayalah ilmu yang anda bagi kepada mereka sampai kapanpun tidak pernah berkurang justru semakin bertambah.

Tidak ada komentar:

Posting Komentar

Get Paid To Promote, Get Paid To Popup, Get Paid Display Banner