Scribd Logo
Upload

Welcome to Scribd!

  • Belajar Membuat HTML

    Uploaded by

    hadikomara purkoni
    1K views8 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1K views8 pages

    Belajar Membuat HTML

    Uploaded by

    hadikomara purkoni

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Belajar Membuat HTML

    Pendahuluan Bab 1 2 3 4 5

    • Homepage ini berisi materi yang akan membatu anda membuat


    HTML.
    • Mungkin kita akan bertanya apakah membuat homepage itu
    susah? Jawabannya sangat mudah sekali.
    • Hanya membutuhkan waktu kurang dari satu hari untuk belajar,
    HTML anda bisa dilihat diseluruh dunia.
    • Coba anda ikuti tahap demi tahap materi ini, anda akan
    memperoleh kemudahannya.

    Pendahuluan

    Pendahuluan Bab 1 2 3 4 5
    Apakah HTML itu?
    HTML singkatan dari Hyper Text Markup Language.
    HTML bukan suatu bahasa pemrograman tetapi sebuah bahasa dalam bentuk text yang
    dapat digunakan untuk menyusun tulisan, gambar, suara, film dan banyak lagi informasi
    yang bisa ditampilkan.
    Apa yang diperlukan untuk membuat HTML?
    Cukup dengan mengunakan Notepad untuk mengetik Text dan Internet Explorer untuk
    menampilkan halaman WEB kita.
    Kalau kita menginstall windows dua program ini sudah pasti tersedia.
    Anda juga dapat menggunakan program-program yang lain untuk membuat HTML
    seperti Front Page, Microsoft Word, Dos Edit, Mac SimpleText, Unix, dll.
    Bagaimana menjalankan HTML?
    Dengan cara mengetik di editor kemudian disimpan dalam file dengan akhiran html,
    misalnya coba.html
    Kemudian file yang berakhiran html tersebut dibuka di Internet Explorer, jadilah sudah
    program HTML kita.
    Bagaimana program HTML Online?
    Hubungkan program HTML kita dengan salah satu Internet Service Provider (ISP) yang
    kita kehendaki.
    Kita bisa menggunakan provider dari www.geocities.com dengan cara upload file atau
    dengan provider lainnya.

    Kalau sudah siap mari kita buka Bab 1

    Membuat Halaman Pertama


    Pendahuluan Bab 1 2 3 4 5

    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 <html> dan diakhiri dengan tag
    </html>
    <head> dan </head> digunakan sebagai informasi tentang dokumen kita.
    <title> dan </title> digunakan sebagai judul dari browser kita.
    <body> 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.

    Menambah Text dan Formatnya


    Pendahuluan Bab 1 2 3 4 5

    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<p>
    Dan ini baris ke tiga<br>
    Kalau ini baris ke empat<br>
    </body>
    </html>
    Hasilnya silahkan di lihat disini.
    <p> artinya pindah paragraf atau pindah dua baris
    <br> artinya pindah baris

    2. Membuat Heading
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    <h1>Heading Pertama</h1>
    <h2>Heading Kedua</h2>
    <h3>Heading Ketiga</h3>
    <h4>Heading Keempat</h4>
    <h5>Heading Kelima</h5>
    <h6>Heading 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:
    <style type="text/css">
    body {font-family:"Arial";font-size:"12pt";color:blue}
    </style>
    <body>
    Ini <b><i><u>halaman</u></i></b> web saya
    </body>
    Hasilnya silahkan di lihat disini.
    <style> dan </style> adalah bentuk, ukuran dan warna text.
    <b> dan </b> adalah text yang ditebalkan.
    <i> dan </i> adalah text yang dimiringkan.
    <i> dan </i> adalah text yang digaris bawahi.
    Membuat Tabel
    Pendahuluan Bab 1 2 3 4 5

    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:
    <table>
    <tr><th>Kolom 1</th><th>Kolom 2</th></tr>
    <tr><td>Baris 2</td><td>Baris 2</td></tr>
    <tr><td>Baris 3</td><td>Baris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.
    <tr> definisi baris horisontal
    <td> definisi data sel dalam satu baris
    <th> definisi data sel pada judul tabel

    2. Membuat Tabel Dengan Formatnya


    Silahkan ketik diantara <head> dan </head> seperti dibawah ini:
    <style 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:
    <table with="50%" border="1" rules=ALL>
    <tr><th bgcolor="silver">Kolom 1</th><th bgcolor="silver">Kolom 2</th></tr>
    <tr><td align="center">Baris 2</td><td align="center">Baris 2</td></tr>
    <tr><td align="center">Baris 3</td><td align="center">Baris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.

    3. Membuat Tabel Lanjutan


    Silahkan ketik diantara <head> dan </head> seperti dibawah ini:
    <style 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:
    <table with="100%" border="1" rules=ALL>
    <tr><th bgcolor="silver" colspan="2">Kombinasi kolom 1 dan kolom 2.</th></tr>
    <tr><td>Baris 2</td><td rowspan="2">Kombinasi baris 2 dan baris 3.</td></tr>
    <tr><td>Baris 3</td></tr>
    </table>
    Hasilnya silahkan di lihat disini.
    Menghubungkan Text dan Dokumen
    Pendahuluan Bab 1 2 3 4 5

    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 <a href="hal1.html">klik disini </a>untuk membuka halaman
    pertama.<br>
    Silahkan <a href="http://www.geocities.com/riyanto_its/html.html">klik disini
    </a>untuk membuka web belajar HTML.<br>
    Silahkan <a href="mailto:sigit@ece.ibaraki-ct.ac.jp">klik disini </a>untuk
    mengirim email ke Sigit.<br>
    Hasilnya silahkan di lihat disini.

    2. Menghubungkan Text Pada Halaman Yang Sama


    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    <h2>Klik tulisan bergaris untuk membaca text secara penuh</h2><br>
    <a href="#BS"><i>Paragraf Satu</i></a><br>
    <a href="#BD"><i>Paragraf Dua</i></a><br>
    <h1>Membaca Artikel Penuh>/h1><br>
    <h2><a name="BS">Paragraf Satu</a></h2><br>
    Ini tulisan pertama.<p>
    Ini tulisan kedua.<p>
    Ini tulisan ketiga.<p>
    Ini tulisan keempat.<p>
    Ini tulisan kelima.<p>
    Ini tulisan keenam.<p>
    Ini tulisan ketujuh.<p>
    <h2><a name="BD">Paragraf Dua</a></h2><br>
    Ini tulisan pertama.<p>
    Ini tulisan kedua.<p>
    Ini tulisan ketiga.<p>
    Ini tulisan keempat.<p>
    Ini tulisan kelima.<p>
    Ini tulisan keenam.<p>
    Ini tulisan ketujuh.<p>
    Hasilnya silahkan di lihat disini.

    3. Menghubungkan Text Pada Halaman Lain


    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:
    <h2>Klik tulisan bergaris untuk membaca text secara penuh</h2><br>
    <a href="para1.html"><i>Paragraf Satu</i></a><br>
    <a href="para2.html"><i>Paragraf Dua</i></a><br>
    Hasilnya silahkan di lihat disini.

    You might also like