Kamis, 30 Agustus 2012

PEMBUATAN HOMEPAGE SEDERHANA DENGAN HTML

Mengenal Hypertext Markup Language (HTML)

HTML (Hypertext Markup Language) adalah kumpulan simbol markup atau kode yang dimasukkan ke dalam sebuah file yang dimaksudkan untuk menampilkan suatu visual pada halaman Web atau World Web Wide (WWW). Kode HTML memerintahkan browser Web bagaimana menampilkan suatu format pada halaman web, seperti kata-kata (teks),  serta gambar atau grafik. Setiap kode HTML disebut elemen, sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut Tag.

HTML adalah Rekomendasi resmi dari World Wide Web Consortium (W3C) dan umumnya digunakan oleh mesin browser dunia yang terkenal seperti Microsoft Internet Explorer, Netscape Navigator dan Mozilla Firefox yang juga menyediakan beberapa kode non-standar tambahan. Versi saat ini dari HTML adalah HTML 4.0.

Dalam kondisi tertentu didalam penulisan tag harus ditulis berpasangan, dan untuk beberapa efek khusus harus diberi awalan dan akhiran tag.

Contoh tag : 

<HTML>
.......Kode program.
</HTML>
 

Belajar Dasar HTML Merancang Web atau Blog

secara ringkas HTML adalah kode yang terdiri dari rangkaian tag untuk menampilkan suatu visual pada halaman Web atau World Web Wide (WWW). Kode HTML ini memungkinkan anda untuk membuat halaman web dan menempatkan  apapun yang anda suka.

Baiklah, mari kita langsung ke intinya. Disini anda akan mempelajari sebenarnya betapa mudahnya untuk membuat sebuah web atau blog. Bahkan pada saat anda selesai membaca posting saya ini , saya yakin anda akan bisa membuat web anda sendiri.
Semudah itukah…? Jawabynya iyaa!, jika anda tekun dan selalu bersemangat, OK!.

Langkah-langkah didalam menyusun sebuah web/blog umumnya adalah sebagai berikut :

1.    Membuat dan menyimpan file HTML
2.    Masukkan kode HTML
3.    Lihat hasilnya di browser (preview)
4.    Ulangi langkah 3 dan 4 jika perlu

Baiklah, mari kita bahas langkah-langkah diatas dengan lebih rinci satu-persatu.

1. Membuat dan menyimpan file HTML
Sebuah file HTML adalah sebuah file teks yang disimpan dalam bentuk  ekstensi “html”.
Jalankan program Notepad editor pada komputer jika anda menggunakan OS Windows, TextEdit jika anda menggunakan Mac. Anda juga dapat  menggunakan pengolah teks HTML khusus seperti Dynamic HTML Editor, Notepad++ dan lain sebagainya.

2. Masukkan kode HTML
-  Buat sebuah file baru pada Notepad anda
-  Simpan file dengan nama  “web pertamaku.html” (tanpa tanda kutip).

Ketik atau copy paste kode HTML berikut  ini ke Notepad anda :


<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
          <title> Contoh Halaman Web Sederhana </title>
    </Head>
          <body> <p> INILAH WEB PERTAMAKU…! </p></Body>
</Html>


3. Lihat hasilnya di web browser (Preview)
Lihat hasilnya di web browser anda, tau caranya?, jalankan web browser anda (Firefox atau Internet Explorer), pada menu klik File -> Open File , lalu arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” tadi, dan lihat hasilnya.

---- Cara lain ----
Arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” menggunakan windows explorer, lalu klik 2 kali pada  file tersebut.


4. Ulangi langkah 3 dan 4 jika perlu
Anda bakalan sering melakukan hal diatas, meng-edit kode html anda kemudian melihatnya lagi di web browser, akan sangat sering, begitu terus berulan-ulang, karena saya yakin anda ingin memastikan hasil dari kreasi anda terlihat apik dan optimal.
Tapi jangan khawatir , hal itu wajar, suatu saat anda akan mengerti mengapa saya berkata demikian.

Penjelasan sederhana dari kode-kode dan tag diatas
OK, sebelum kita lanjutkan, saya akan menjelaskan secara sederhana apa arti dari kode-kode atau tag html diatas.

Sekelompok kode tag HTML ini memerintahkan browser anda apa dan dimana akan menampilkan suatu konten.

Anda juga mungkin sudah mengamati  bahwa pada setiap tag "pembuka" selalu diakhiri dengan tag "penutup", seperti <html> - </html>, <title> - </title>, <head> - </head>, <body> - </body>, perhatikan juga  konten atau materi yang ingin ditampilkan selalu diapit di antaranya. Sebagian besar  tag HTML harus dibentuk dengan tag pembuka dan penutup.

Sebuah halaman web pada umumnya minimal harus berisikan kode tag seperti pada contoh diatas.

Perhatikan  tag :


 <head>
              <title> Contoh Halaman Web Sederhana </title>
    </Head>


Tag “<title> Contoh Halaman Web Sederhana </title>“  ini ditampilkan pada Judul Tab dan Judul Halaman dari web browser (perhatikan gambar).

Sedangkan tag “<body> <p> INILAH WEB PERTAMAKU…! </p></body>” tampil di halaman utama
(body).

 Cara Membuat Homepage

Home Page, adalah suatu fasilitas yang disediakan oleh setiap Browser Internet. Home Page ini digunakan untuk membuka alamat situs internet yang akan ditampilkan pertama kali di browser. Nah, namun tahukah anda bagaimana mengganti atau memasang Home Page di browser Mozilla Firefox? Berikut ini akan saya tunjukkan cara-caranya.
1. Klik menu Tools –> Options –> Klik pada Tab/Menu General
2. Sorot pada When Firefox starts –> Pastikan anda pilih Show my home page
3. Pada Home Page, silahkan anda masukkan alamat website yang ingin anda jadikan Homepage, seperti ; http://www.google.com, http://procompxp.wordpress.com, dll.
4. Klik OK, untuk mengujinya silahkan anda tutup browser Mozilla Firefox anda, lalu buka kembali. Jika sudah yang pertama kali tampil di browser adalah alamat yang anda masukkan tadi, berarti pemasangan sudah berhasil.
NB : Selain option Show my home page, anda juga bisa mensettingnya menjadi Show a blank page (tanpa home page) dan juga Show my windows tabs from last time (untuk menampilkan jendela dan tab kembali seperti saat terakhir browser di tutup)


Membuat link di dalam satu halaman website.

Pada tulisan ini tepatnya pada bagian atas setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:
<a name="top"></a>
Dengan tag tersebut kita dapat membuat link ke lokasi tersebut dengan membuat link seperti berikut ini:
Klik link berikut untuk <a href="#top">Kembali ke atas</a>
Hasil:
Klik link berikut untuk Kembali ke atas
Dengan cara diatas kita juga bisa membuat link ke suatu halaman website dan langsung melompat ke topik tertentu di dalam satu halaman.
Link berikut akan membawa anda ke halaman Belajar HTML dengan topik <a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>.
Hasil:
Link berikut akan membawa anda ke halaman Belajar HTML dengan topik Hyperlink HTML.
Contoh diatas dapat dibuat dengan menambahkan tag berikut sebelum titel Hyperlink HTML di dalam halaman tujuan seperti contoh diatas adalah halaman Belajar HTML:
<a name="hyperlink-html"></a>
Atau bisa juga dengan menambahkan atribut "id" di dalam tag titel. Seperti contoh diatas, titel Hyperlink HTML tersebut berada di dalam tag <h3> jadi kita bisa menuliskan:
<h3 id="hyperlink-html">Hyperlink HTML</h3>
Untuk membuat link ke lokasi tersebut kita harus membuat link ke halaman utamanya dulu baru kemudian di ikuti dengan nama atau id dengan format: "#nama-link".
<a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>
Hasil:
Hyperlink HTML

Membuat Email Link.

<a href="mailto:alamat email">link teks</a>
Contoh:
Jika ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a> ke bagian pelayanan.
 
 

Sebuah dokumen HTML terdiri dari 2 bagian yaitu head (kepala) dan body (badan). Bagian head ditandai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi tentang dokumen tersebut , misalnya judul, nama penulis (author), komentar-komentar ,dan lain-lain. Sedangkan bagian body digunakan untuk memaparkan isi utama dari dokumen (artikel) dari suatu web.
Contoh tag membuat web sederhana :

<HTML>
  <HEAD><H1>Contoh Web Sederhana</H1>

Tidak ada komentar:

Posting Komentar