Sabtu, 30 April 2011
» » Belajar Membuat HTML

on
No Comment
Bab 1
Silahkan buka notepad anda.
Ketik seperti dibawah ini:
<html>
<head><title>Halaman web saya yang pertama</title></head>
<body>
Ini halaman web saya yang pertama.
</body>
</html>

  • Setiap dokumen HTML harus diawali dengan tag &lthtml> dan diakhiri dengan tag </html>




  • &lthead> dan </head> digunakan sebagai informasi tentang dokumen kita.




  • &lttitle> dan </title> digunakan sebagai judul dari browser kita.




  • &ltbody> dan </body> digunakan sebagai isi dari halaman WEB kita. Sekarang kita simpan text yang telah kita ketik misalnya dengan nama hal1.html
    Sekali lagi jangan lupa akhiri nama file dengan .html
    Selanjutnya kita buka Internet Explorter: klik gambarnya, kemudian File->Open->Browse, cari file dengan nama hal1.html kemudian Open dan OK.
    Apa yang terjadi? Ternyata halaman WEB kita sudah bisa tampil sekarang, seperti dibawah ini.


    Pada bab ini kita akan belajar membuat paragaf, heading, format text dan bentuknya.
    1. Membuat Paragraf
    Silahkan ketik di notepad seperti dibawah ini:
    <html>
    <head><title>Menambah Text dan Formatnya</title></head>
    <body>
    Ini baris pertama&ltp>
    Dan ini baris ke tiga&ltbr>
    Kalau ini baris ke empat&ltbr>
    </body>
    </html>
    Hasilnya silahkan di lihat disini.

  • &ltp> artinya pindah paragraf atau pindah dua baris



  • &ltbr> artinya pindah baris
    2. Membuat Heading
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini: &lth1&gtHeading Pertama</h1>
    &lth2&gtHeading Kedua</h2>
    &lth3&gtHeading Ketiga</h3>
    &lth4&gtHeading Keempat</h4>
    &lth5&gtHeading Kelima</h5>
    &lth6&gtHeading Keenam</h6>
    Hasilnya silahkan di lihat disini.



  • Terlihat bahwa besarnya tulisan tiap heading berbeda-beda.
    3. Format Text dan Bentuknya
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini: &ltstyle type="text/css">
    body {font-family:"Arial";font-size:"12pt";color:blue}
    </style>
    &ltbody>
    Ini &ltb>&lti>&ltu&gthalaman</u></i></b> web saya
    </body>
    Hasilnya silahkan di lihat disini.



  • &ltstyle> dan </style> adalah bentuk, ukuran dan warna text.



  • &ltb> dan </b> adalah text yang ditebalkan.



  • &lti> dan </i> adalah text yang dimiringkan.



  • &lti> dan </i> adalah text yang digaris bawahi. Tabel digunakan untuk menampilkan angka-angka dalam baris dan kolom, pada bab ini kita akan belajar bagaimana membuat tabel.
    1. Membuat Tabel Sederhana
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    &lttable>
    &lttr>&ltth&gtKolom 1</th>&ltth&gtKolom 2</th></tr>
    &lttr>&lttd&gtBaris 2</td>&lttd&gtBaris 2</td></tr>
    &lttr>&lttd&gtBaris 3</td>&lttd&gtBaris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.



  • &lttr> definisi baris horisontal



  • &lttd> definisi data sel dalam satu baris



  • &ltth> definisi data sel pada judul tabel
    2. Membuat Tabel Dengan Formatnya
    Silahkan ketik diantara <head> dan </head> seperti dibawah ini: &ltstyle type="text/css">
    th {font-family:"Arial";font-size:"12pt";color:red}
    td {font-family:"Tahoma";font-size:"12pt";color:blue}
    </style>
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    &lttable with="50%" border="1" rules=ALL>
    &lttr>&ltth bgcolor="silver"&gtKolom 1</th>&ltth bgcolor="silver"&gtKolom 2</th></tr>
    &lttr>&lttd align="center"&gtBaris 2</td>&lttd align="center"&gtBaris 2</td></tr>
    &lttr>&lttd align="center"&gtBaris 3</td>&lttd align="center"&gtBaris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.
    3. Membuat Tabel Lanjutan
    Silahkan ketik diantara <head> dan </head> seperti dibawah ini:
    &ltstyle type="text/css">
    th {font-family:"Arial";font-size:"12pt";color:red}
    td {font-family:"Tahoma";font-size:"12pt";color:blue}
    </style>
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    &lttable with="100%" border="1" rules=ALL>
    &lttr>&ltth bgcolor="silver" colspan="2"&gtKombinasi kolom 1 dan kolom 2.</th></tr>
    &lttr>&lttd&gtBaris 2</td>&lttd rowspan="2"&gtKombinasi baris 2 dan baris 3.</td></tr>
    &lttr>&lttd&gtBaris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.
    bab 4
    Pada bab ini kita akan membahas cara menghubungkan text atau web dokumen yang kita buat ke lokasi tertentu atau sering disebut dengan Hyperlinks.
    Kita dapat menghubungkan text kita dengan file dan email lainnya, bisa juga kita hubungkan dalam halaman yang sama ataupun halaman yang berbeda.
    1. Menghubungkan Text kita dengan file lain dan email lain
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    Silahkan &lta href="hal1.html"&gtklik disini </a&gtuntuk membuka halaman pertama.&ltbr>
    Silahkan &lta href="http://www.geocities.com/riyanto_its/html.html"&gtklik disini </a&gtuntuk membuka web belajar HTML.&ltbr>
    Silahkan &lta href="mailto:sigit@ece.ibaraki-ct.ac.jp"&gtklik disini </a&gtuntuk mengirim email ke Sigit.&ltbr>
    Hasilnya silahkan di lihat disini.
    2. Menghubungkan Text Pada Halaman Yang Sama
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    &lth2&gtKlik tulisan bergaris untuk membaca text secara penuh</h2>&ltbr>
    &lta href="#BS">&lti&gtParagraf Satu</i></a>&ltbr>
    &lta href="#BD">&lti&gtParagraf Dua</i></a>&ltbr>
    &lth1&gtMembaca Artikel Penuh>/h1>&ltbr>
    &lth2>&lta name="BS"&gtParagraf Satu</a></h2>&ltbr>
    Ini tulisan pertama.&ltp>
    Ini tulisan kedua.&ltp>
    Ini tulisan ketiga.&ltp>
    Ini tulisan keempat.&ltp>
    Ini tulisan kelima.&ltp>
    Ini tulisan keenam.&ltp>
    Ini tulisan ketujuh.&ltp>
    &lth2>&lta name="BD"&gtParagraf Dua</a></h2>&ltbr>
    Ini tulisan pertama.&ltp>
    Ini tulisan kedua.&ltp>
    Ini tulisan ketiga.&ltp>
    Ini tulisan keempat.&ltp>
    Ini tulisan kelima.&ltp>
    Ini tulisan keenam.&ltp>
    Ini tulisan ketujuh.&ltp>
    Hasilnya silahkan di lihat disini.
    3. Menghubungkan Text Pada Halaman Lain
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    &lth2&gtKlik tulisan bergaris untuk membaca text secara penuh</h2>&ltbr>
    &lta href="para1.html">&lti&gtParagraf Satu</i></a>&ltbr>
    &lta href="para2.html">&lti&gtParagraf Dua</i></a>&ltbr>
    Hasilnya silahkan di lihat disini.



    • Diposting oleh di 18.50
    Share:

    0 komentar:

    Posting Komentar

    Langganan: Posting Komentar (Atom)