Docstoc

mengenal Bahasa HTML

Document Sample
mengenal Bahasa HTML Powered By Docstoc
					Anda Boleh menyebarkan e-book ini kepada teman-teman anda, tetapi anda tidak diperbolehkan
merubah sedikitpun dari isi e-book ini. Terima kasih, semoga e-book ini bermanfaat bagi anda, dan jangan
lupa untuk mengunjungi website saya http://www.lifemybusiness.co.cc




                             Mengenal Bahasa HTML Bagian 1

                             Dalam membuat website, hal yang perlu anda kuasai adalah mengerti akan
                             bahasa pemrograman html agar bisa terbentuk website yang bisa
                             dihubungkan dengan internet. Internet itu sendiri merupakan jaringan
                             global yang menghubungkan network satu dengan network lainnya di
                             seluruh dunia.

                             Sebelum kita berlanjut pada pengenalan bahasa HTML, maka sebelumnya
                             akan saya jelaskan mengenai Pengertian HTML. HTML kepanjangan dari
                             Hyper text Markup Language adalah satu-satunya bahasa pemrograman
                             yang digunakan untuk merancang halaman web. Semasa SMA dulu
                             saya juga sudah diajari bahasa pemrograman yang menggunakan
                             perintah-perintah HTML.
Sebelum memulai mengenal mengenal bahasa HTML, kita harus mengerti terlebih dahulu
komponen dari Browser:




      1. Jendela web: Pada bagian ini akan muncul judul/tittle dari sebuah situs web.

      2. Url : pada bagian ini akan muncul alamat situs dari sebuah web contoh:
         http://www.lifemybusiness.co.cc

      3. Bar: pada bagian ini juga akan menampilkan judul/tittle dari sebuah web.

      4. Halaman web atau biasa dikenal dengan Workspace: pada bagian ini akan muncul isi dari
         sebuah situs. Agar dapat mengeluarkan halaman dari sebuah website, maka kita harus
         membuat perintah-perintah HTML.

      5. Status Browser: pada bagian ini akan menunjukkan setatus dari website yang anda kunjungi.
         Kalau website berjalan lancar, maka akan tertera tulisan DONE.

Setalah kita mengetahui komponen dari sebuah browser, selanjutnya kita akan memulai mengenal
bahasa pemrograman HTML terlebih dahulu sebelum berlanjut untuk membuat sebuah website.
Dalam pembuatan bahasa pemrograman HTML bisa menggunakan microsoft frontpage,
Dreamweaver, Php designer.

Berikut struktur dari sebuah HTML:

<HTML>

<HEAD>

<TITLE>Judul web</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;">

<meta name="description" content="Indonesia adalah negaraku, tanah airku, tempatku dilahirkan">

</head>

<BODY >

......Isi.....

</BODY>

</HTML>

      1. HTML

            Pada Pembuatan website, kita harus mengawalinya dengan perintah HTML dan ditutup
            dengan perintah HTML juga. Seperti contoh diatas, dalam HTML nanti akan berisi
            HEAD,TITLE, META,BODY.

      2. HEAD
  Pada bagian ini, bisa diisi dengan TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE &
  META.Seperti contoh:

  <Head>

  <Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

  <title>Mengenal Bahasa HTML</title>

  <meta name="description" content="HTML Kepanjangan dari Hypertext Markup
  Language">

  <meta name="keywords" content="html,head,title,meta,">

  <meta name="copyright" content="2009 twenty4alls.co.cc">

  <meta name="distribution" content="Global">

  <meta name="robots" content="index,follow">

  <meta name="publisher" content="Twenty4alls.co.cc">

  <link rel="Bookmark" href="images/a1.jpg">

  <link rel="shortcut icon" href="images/a2.jpg">

  </title></head>

3. BODY

  Perintah BODY digunakan untuk menampilkan semua teks, images(.png, .jpg, .gif). Dalam
  Penulisan Body bisa ditambahi dengan warna background dengan format bgcolor. Untuk
  mengisi BODY atau isi dari pada web, maka ada perintah-perintah atau Komponen-
  komponen yang diletakkan pada BODY in, seperti:

         <p>...</p> :Perintah untuk membuat teks paragraf. Pada bagian ini bisa disisipi letak
          paragraf, seperti ini : <p align=”left”>....</p>. Untuk letak bisa di isi dengan: left,
          center, Right, dan justify.

         <font> : perintah ini digunakan untuk memformat seluruh text yang akan di
          tampilkan di web. Pada perintah ini bisa ditambahi dengan perintah perintah:
          color=”#FFFFFF” , size=”2”  <font color=”#33FF66” size=”2”>....</font>

         <h>: perintah untuk membesarkan teks. Bisa dimulai dari H1 sampai H6. Seperti
          contoh: <H1>Saya sedang mengenal Bahasa Pemrograman HTML</H1>

         <table>: perintah untuk menampilkan tabel. Penulisan tabel bisa disisipi seperti ini:
          <table border="0" width="25" cellspacing="0" cellpadding="0">

         <td>: perintah untuk kolom table. Perintah ini juga bisa disisipi dengan: colspan="0"
          valign="top" width="0". Dan penulisan ini setelah penulisan table seperti ini:
    <table border="0" width="800" cellspacing="0" cellpadding="0">

    <td colspan="2" valign="top" width="100%">........</td></table>

   <li>: perintah untuk mengelompokkan teks. Untuk menampilkan list bullet, maka
    penulisannya <ul><li>......</li></ul>. Sedangkan untuk menampilkan list angka,
    maka penulisannya <ol><li>.....</li></ul>.

   <i>....</i>: perintah untuk mengubah teks menjadi miring.

   <b>....</b>: perintah untuk menebalkan teks.

   <u>....</u>: perintah untuk memberikan garis bawah pada teks.

   <br>: perintah untuk membuat teks baru.

   <s>...</s>:perintah untuk memberi garis ditengah-tengah teks

   <blink>....</blink>:perintah agar teks berkedip

   <a>: Untuk membuat link baik web, e-mail, maupun gambar. Pada perintah ini
    penulisannya: <a href=”images/ade.jpg>....</a> maka menuju ke link gambar, <a
    href=http://www.lifemybusiness.co.cc>...</a> maka akan terbuat link web, dan <a
    href=”awan.adie@yahoo.com>....</a> akan terbuat link e-mail.

   &nbsp; : untuk spasi. Penulisannya seperti ini &nbsp;

   <img src>: perintah untuk menampilkan gambar. Susunan bisa seperti ini: <img
    src="images/ade.jpg" width="176" border="0" height="128" alt=”>,

    width=”...” : perintah memberikan lebar dari gambar.

    height=”…” : perintah untuk tinggi dari gambar.

    border=”…” : perintah memberikan ketebalan dari bingkai gambar.

    alt=”…” : perintah memberi nama dari gambar.

    align=”…” : perintah memberikan posisi dari gambar.



Setelah kita mengetahui perintah-perintah dasarnya HTML, maka kita akan mencoba
untuk mempraktekkannya. Gunakan aplikasi frontpage atau dreamweaver. Tulislah
perintah seperti di bawah ini:

a. Pertama

    Buatlah folder bernama Belajar. Kemudian dalam folder tersebut buat lagi 1 folder
    dengan nama images. Dan dalam folder images masukkan foto anda dan beri nama
    anda. Dan buat gambar seperti ini simpan dengan nama header.gif ukuran width=850
    dan height=60.   Untuk background gambar hitam ganti
   dengan warna putih. Kalau di e-book ini saya buat hitam biar tahu
   gambarnya seperti ini.

   S




   Setelah itu, Buat lagi seperti ini dengan nama bg.gif ukuran width=850 dan
   height=10.




   Dan dengan nama footer.gif ukuran width=850 dan height=60




b. Kedua

   Tulislah seperti contoh, jangan sampai anda mengkopinya kalau anda ingin bisa
   membuatnya:



   <html>

   <head>

              <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

              <meta name="author" content="Ade Tiawan">

            <meta name="description" content="Indonesia adalah negara yang aku
   cintai" >

              <title>Saya sedang Belajar membuat web</title>

   </head>

   <body bgcolor="#33FF66" link="#0066CC" vlink="#11111">



    <center>

    <table border="0" cellspacing="0" cellpadding="0">

       <tr>
    <td width="100"><img border="0" src="images/header.gif" width="850"
height="60"></td>

  </tr>

 </table>

 </center>

<div align="center">

 <center>

 <table border="0" cellspacing="0" cellpadding="0" width="850"
background="images/bg.gif"></center>

          <tr>

   <td width="100%">

    <div align="center">

      <center>

      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="750" id="AutoNumber1"></td></tr>

                 <tr>

                        <td><table border="0" width="100%" cellspacing="0"
cellpadding="10">

          <td width="100%"><strong class="highlight"></center></center></a>

      <h1 align="center"><img border="0" src="images/ade.jpg" align="left"
width="128" height="176"alt="Menggunakan src img"title="belajar menampilkan
gambar"><font color="#DD0000" size="5">

       Saya sedang belajar bikin halaman depan web</font></h1>

        <p align="left"> Pertama saya akan menulis paragraf dengan posisi paragraf
di sebelah kiri</p>

       <p align="center"> Selanjutnya saya akan menulis paragraf dengan posisi
paragraf di sebelah tengah</p>

                        <p align="Right"> Selanjutnya saya akan menulis paragraf
dengan posisi paragraf di sebelah kanan</p>

                        <p align="justify"> Selanjutnya saya akan menulis paragraf
dengan posisi paragraf di sebelah rata kanan kiri</p>

                        <H1>Selanjutnya saya akan menulis teks menggunakan
heading 1</H1>

                        <H2>Selanjutnya saya akan menulis teks menggunakan
heading 2</H2>
                       <H3>Selanjutnya saya akan menulis teks menggunakan
heading 3</H3>

                       <H4>Selanjutnya saya akan menulis teks menggunakan
heading 4</H4>

                       <H5>Selanjutnya saya akan menulis teks menggunakan
heading 5</H5>

                       <H6>Selanjutnya saya akan menulis teks menggunakan
heading 6</H6>

                       <ul><li>Menggunakan list bullet</li></ul>

                       <ol><li>Menggunakan list number 1</li>

                       <li>Menggunakan list number 2</li>

                       <li>Menggunakan list number 3</li></ol>

                    <a href="images/ade.jpg"> Klik sini untuk menuju link
gambar</a>&nbsp;&nbsp;&nbsp;

                     <a href="http://lifemybusiness.co.cc"> Klik sini untuk
menuju link web</a>&nbsp;&nbsp;&nbsp;

                      <a href="awan.adie@yahoo.com"> Klik sini untuk menuju
link e-mail</a>&nbsp;&nbsp;&nbsp;

                       </table></td></tr></div>

                        <tr><td><p align="center"><blink><font color="#FF0000"
face="Arial" size="5">Jangan Lupa kunjungi <a
href="http://lifemybusiness.co.cc">lifemybusiness.co.cc</a></font></blink></p>

<p align="center"><font color="#FF0000" face="Times is roman" size="2"> Created
by Ade Tiawan</font></p></td></tr>

                       <div align="center">

 <center>

 <table border="0" width="800" cellspacing="0" cellpadding="0">

  <tr>

    <td width="100%"><img border="0" src="images/footer.gif" width="850"
height="60"></td>

  </tr>

 </table>

 </center>

</div>
                 </body>

                 </html>

            Setelah ini simpan di folder belajar dengan nama index.html. Dan kalau anda betul
            menulisnya, maka akan menjadi seperti ini:




Written                    : Ade Tiawan

Contact person             : 08990466502

e-mail                     : awan.adie@yahoo.com

website / blog             :

        http://www.kemujuran.co.cc

        http://www.lifemybusiness.co.cc

        http://www.adetiawan.blogspot.com

				
DOCUMENT INFO
Shared By:
Tags: ebooks
Stats:
views:5473
posted:5/7/2010
language:Indonesian
pages:8