Senin, 23 September 2013

Belajar Mengenai HTML

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.
    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. 


    • 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>

  • <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>
    .
    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>

  • <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.


    • 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>

  • <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>


    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>

    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>


    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>




       SEMOGA BERMANFAAT ^^
    Diposting oleh Jam

    1 komentar:

    1. camilliarabey5 Maret 2022 pukul 06.38

      Solingen-Molydite-Coated Diamond - Titanium-Arts
      Solingen-Molydite-Coated titanium automatic watch Diamond. titanium cartilage earrings $16.99 · This diamond is designed to withstand corrosion. It is very hard for diamond-shaped titanium white acrylic paint diamonds gold titanium to achieve a close 2020 ford ecosport titanium shave. Rating: 4.4 · ‎4 reviews

      BalasHapus

    Langganan: Posting Komentar (Atom)