Home » , » Tutorial dan contoh dasar HTML

Tutorial dan contoh dasar HTML

Tutorial dan contoh dasar HTML - Kali ini saya membahas dengan singkat tentang html. Nah sebelum itu kalian harus tahu kepanjangan dari HTML. HTML adalah singkatan dari Hyper Text Markup Language.

Agan tau tidak struktur dasar dari Html? nah disini saya jelasin dikit tentang struktur dasar html. Coba buka dreamweaver kalian gan trus pilih Html dan liat bagian code, pasti ada script kayak gini kan gan??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Nah struktur dasarnya ada semua disana gan, eiits tapi intinya kalian buat html tidak semuanya harus ada disana, cuman ini saja sih sebenarnya struktur dasar html.

<html>
<head>
       <title></title> // Ini buat judul html kalian.
</head>
<body>//bagian body itu tempat semua script yang bakal kalian olah gan.
</body>
</html>
 Nah ini ada contoh html, ini sebenarnya tugas pacar saya gan. Iseng tak share ke blog ane gan, daripada nganggur gx jelas usai diperiksa ama master dosen :D . Ini tugas sebenarnya disuruh nyari 10 Tag dalam html gan trus langsung diterapin dihtml.

<title>Tugas Pemograman Web</title>
</head>
<body>
<table align="center" width="780" height="500" border="2" cellpadding="5" bordercolor="#000000">
<!-- Tag table berfungsi membuat table sedangkan atribut align berfungsi sebagai mengatur format layout. Atribut width pada tag table berfungsi mengatur ukuran panjang table, sedangkan height mengatur lebar table, atribut border berfungsi sebagai ukuran border, cell padding berfungsi sebagai mengatur jarak/margin pada table sedangkan bordercolor berfungsi mengatur warna border-->
<tr bgcolor="#000000">
<!--Tag tr berfungsi untuk membuat baris pada suatu table dan atribut bgcolor untuk mengatur warna backgroundnya-->
    <td colspan="2" height="120">
<!--Tag td berfungsi membuat kolom pada table, atribut colspan berfungsi memerge kolom dan height untuk mengatur lebar kolom -->
        <img src="image/stiki.jpg" width="780" height="auto" align="top">
<!-- Tag img berfungsi untuk menyisipkan gambar, atribut width dan height untuk mengatur ukuran gambar sedangkan atribut align untuk menentukan posisi gambar -->
        </td>
    </tr>
    <tr>
    <td height="25" align="center" colspan="2" bgcolor="#990033">
        <marquee scrolldelay="1">
<!-- Tag marquee berfungsi sebagai membuat tulisan bergerak dan atribut scrolldelay berfungsi mengatur cepat lambatnya tulisan bergerak-->
        <font size="4" color="#FFFFFF">
<!--Tag font tidak berarti apa-apa jika tidak digabungkan dengan sebuah atribut, misal tag size untuk mengatur ukuran tulisan sedangkan color untuk mengganti warna tulisan-->
                TUGAS WEB PROGRAMMING : 10 TAG HTML
                </font>
</marquee>
      </td>
    </tr>
<tr>
    <td width="290" valign="top" bgcolor="#999999">
        <h4 align="center">TENTANG SAYA</h4>
<!--Tag heading berfungsi mengatur ukuran tulisan heading, misal h1, h2, h3 dan seterusnya dan align berfungsi mengatur posisi tulisannya-->
            <ul type="square">
            <li>NAMA : Nama tidak ditampilkan :D</li>
                <li>NIM : Pikir dah sendiri gan</li>
                <li>INFO :</li>
                <ul>
                    <li>FACEBOOK : <a href="#">Nama FB tidak ditampilkan :D</a></li>
                        <li>EMAIL : <a href="#">Email tidak ditampilkan :D</a></li>
<!--Tag a ditambahkan dengan atribut href untuk membuat suatu tautan link-->
                    </ul>
            </ul>
        </td>
        <td valign="top" bgcolor="#CCCCCC">
        <ol start="1" style="1">
<!--Tag ol atau ul berfungsi untuk membuat deret bullet and numbering, sedangkan atribut start berfungsi untuk mengatur angka dimulai dari berapa pada ol sedangkan style berfungsi membilih style bullet ataupun -->
            <li>Tag a</li>
<!--Tag p untuk membuat suatu paragraf dan atribut align untuk mengatur layout tulisan-->
                <p align="justify">Tag a adalah salah satu dari beberapa tag html yang kebanyakan fungsinya ialah untuk membuat link dimana sebuah text atau gambar yang apabila di klik akan mengarah ke document lain.</p>
                <li>Tag Marquee</li>
                <p align="justify">Tag Marquee digunakan untuk membuat tulisan berjalan atau bergerak pada halaman web anda. </p>
                <li>Tag Img</li>
                <p align="justify">Tag Img digunakan untuk memasukan gambar pada halaman web.</p>
                <li>Tag Table</li>
                <p align="justify">Tag Table digunakan untuk mebuat table</p>
                <li>Tag tr</li>
                <p align="justify">Tag tr digunakan untuk mebuat baris pada table</p>
                <li>Tag td</li>
                <p align="justify">Tag td digunakan untuk mebuat kolom pada table</p>
                <li>Tag p</li>
                <p align="justify">Tag p digunakan untuk mebuat paragraf baru</p>
                <li>Tag font</li>
                <p align="justify">Tag font digunakan untuk mengatur pilihan bentuk maupun ukuran tulisan</p>
<li>Tag Tag underet list</li>
                <p align="justify">Tag underet list berfungsi membuat bullet and numbering </p>
<li>Tag heading</li>
                <p align="justify">Tag heading digunakan untuk memilih ukuran tulisan</p>
            </ol>
        </td>
   </tr>
   <tr bordercolor="#990033">
    <td colspan="2" align="center" bgcolor="#990033"><font size="4" color="#FFFFFF">TERIMA KASIH</font></td>
   </tr>
</table>
</body>
</html>
Dan kira-kira tampilannya kayak dibawah gan :D



3 komentar :

  1. thanks gan infonya, sangat bermanfaat sekali :D

    ReplyDelete
  2. Kunjungan pertama gan :)
    mampir juga di blog sederhana saya http://ikbalcigentur.blogspot.com/

    ReplyDelete

 
Support : Creating Website | Mas Template
Copyright © 2011. Pohon Tua Blogspot - All Rights Reserved
Template modify by Pohon Tua Blog
Proudly powered by Blogger