Latest Post


    Terimakasih Telah Berkunjung

    Belajar Dasar HTML

    Seorang blogger setidaknya harus memahami isi html blog yang dimiliki, yah meskipun tidak merupakan suatu keharusan sih. Baiklah bagi yang berminat mendalami kode html, berikut napetis berikan petunjuk singkatnya.

    Definisi

    HTML (HiperText Markup Language) adalah merupakan sebuah bahasa text yang digunakan untuk membuat sebuah halaman web untuk menampilkan informasi-informasi ke sebuah software browser di internet seperti internet explorer, mozila firefox dan lainnya.
    Memulai HTML
    Software apakah yang digunakan untuk menulis bahasa HTML ? untuk menulis bahasa html biasa digunakan software bawaan windows yaitu notepad tetapi bisa juga menulis HTML pada Microsoft Front Page, DOS Edit.
    Untuk membuat sebuah bahasa HTML pada notepad harus disimpan (save) dengan akhiran atau extensi html agar bisa dibaca oleh web browser, sebagai contoh latihan1.html.

    Menjalankan HTML
    Setelah membuat sebuah proyek HTML dengan cara mengetik pada notepad, selanjutnya HTML tersebut coba dijalankan dengan menggunakan sotware browser yang ada pada komputer anda, misalnya Internet Explorer yang merupakan bawaan windows, atau bisa juga dengan firefox, gunakan salah satunya.

    Cara membuka file HTML
    Jalankan wbe browser anda (IE atau firefox), jika menggunakan Internet Explorer, maka klik menu File kemudian pilih Open, selanjutnya cari file html yang barusan anda buat kemudian klik open. Apabila menggunakan firefox maka klik menu File kemudian pilih Open File, selanjutnya cari file html yang sudah dibuatkan tadi kemudian klik Open.

    bentuk dasar dari html adalah :

    <html>
    <head>
    <title>
    Judul HTML pertamaku
    </title>
    </head>
    <body>
    body/isi HTML pertamaku.
    </body>
    </html>
    Untuk mencoba sebuah proyek html anda yang baru, coba buka notepad kemudian ketikan kode di atas dan simpan (save) dengan nama file latihan1.html kemudian coba jalankan pada browser (Internet Explorer/Mozilla Firefox) di komputer anda.


    Oke, setelah bisa membuat dasar html, berikutnya adalah tentang heading.

    Heading
    Atau biasa disebut Judul. Ada beberapa jenis heading yang kita temui, berikut adalah variannya:

    1. <h1>Judul 1</h1>
    2. <h2>Judul 2</h2>
    3. <h3>Judul 3</h3>
    4. <h4>Judul 4</h4>
    5. <h5>Judul 5</h5>
    6. <h6>Judul 6</h6>

    Penjelasannya :
    <h1>....</h1> adalah merupakan penulisan judul dengan ukuran huruf yang paling besar dan untuk <h2>...</h2> dan seterusnya sampai <h6>...</h6> adalah judul kedua sampai dengan judul keenam dengan ukuran huruf semakin besar nilainya maka semakin kecil ukuran hurufnya.

    Sebagai praktek buatkan atau ketik kode HTML berikut ini pada notepad kemudian simpan dengan nama file praktek2.html kemudian buka atau jalankan pada web browser anda dan perhatikan hasil yang terjadi.

    <h1>Judul Baris Pertama</h1>
    <h2>Judul Baris Kedua</h2>
    <h3>Judul Baris Ketiga</h3>
    <h4>Judul Baris Keempat</h4>
    <h5>Judul Baris Kelima</h5>
    <h6>Judul Baris Keenam</h6>

    Dan hasilnya akan terlihat seperti berikut:


    Judul Baris Pertama

    Judul Baris Kedua

    Judul Baris Ketiga

    Judul Baris Keempat

    Judul Baris Kelima
    Judul Baris Keenam

    Oke? Bisa? Sip!! Pindah ke materi berikutnya.

    Tabel
    Bentuk HTML tabel pada dasarnya adalah seperti berikut

    <table>
    <tr>
    <td>kolom1 </td><td>kolom2 </td>
    </tr>
    <tr>
    <td>kolom1 </td><td>kolom2 </td>
    </table>

    Penjelasan
    <tabel>dan </tabel>adalah merupakan batasan area HTML untuk tabel.
    <tr>dan </tr>menyatakan batasan untuk sebuah baris dalam table.

    <td>dan </td>adalah batasan untuk data dalam sebuah sel tabel, pada bentuk penulisan HTML di atas pada kata "kolom1" dan "kolom2" yang pertama menyatakan posisi sel kolom1 baris1 dan kolom2 baris1 sedangkan untuk kata "kolom1" dan "kolom2" yang kedua adalah menyatakan posisi sel berada pada kolom1 baris2 dan kolom2 baris2.

    Contoh

    <table border="1">
    <tr>
    <td>baris1 kolom1 </td>
    <td>baris1 kolom2 </td>
    </tr>
    <tr>
    <td>baris2 kolom1 </td>
    <td>baris2 kolom2 </td>
    </tr>
    <tr>
    <td>baris3 kolom1 </td>
    <td>baris3 kolom2 </td>
    </tr>
    Penambahan border="1" adalah dengan maksud memberikan batasan antar setiap sel dengan sbuah garis atau tabel bergaris, jika tabel dibuat tidak bergaris maka tinggal menghilangkan penulisan border. Angka 1 pada kata border="1" menyatakan nilai atau ukuran garis pada tabel tersebut, semakin besar nilainya maka semakin besar pula garisnya.

    ketiklah contoh di atas pada notepad kemudian simpan dengan nama file latihan3.html dan coba jalankan dari browser pada komputer anda.

    Hasilnya jika di jalankan pada browser akan terlihat seperti di bawah ini :



    Udah bisa kan? Sekarang tentang format teks.

    Format Teks
    Suatu paragraf atau alinea memiliki tag <p> untuk awal paragraf sedang untuk tag penutup adalah </p>.
    penulisan sintaksnya adalah :

    <p>
    ...................
    </p>

    tag <p> memiliki attribut align yang memiliki nilai left, right dan center dan sintaksnya sebagai berikut :

    <p align="left">
    ...................
    </p>

    contoh :

    <p align="center">
    Ini adalah HTML rata tengah
    </p>
    <p align="right">
    Ini adalah HTML rata kanan
    </p>
    <p align="left">
    Ini adalah HTML rata kiri
    </p>

    ketiklah contoh di atas pada notepad kemudian simpan dengan nama file format.html dan coba jalankan pada browser dan lihat hasilnya.

    Font atau huruf memiliki tag <font> dengan attribute color, face dan size, sintaksnya akan menjadi

    <font color="red" face="arial" size="10">
    ini HTML font
    </font>


    Terakhir, tentang list/daftar.

    Elemen ol (ordered list), ul (unordered list) dan li (list item)

    Untuk elemen ol memiliki attribut start dan type, start untuk menentukan format penomoran awal, sebagai contoh apabila dimulai dengan nomor 1 maka start akan diberikan attribut 1 (start="1" dan apabila ingin memulai dengan nomor 2 atau tiga atau empat maka attribute untuk startnya sesuaikan dengan awal penomoran tersebut.
    HTML untuk elemen ul (unordered list) digunakan untuk membuat list tanpa adanya nomor urut baik berupa angka maupun abjat seperti 1, A, a, I, i dan sebagainya melainkan berupa bentuk lingkaran, kotak maupun bundar dan memiliki attribute type yang berfungsi untuk mengubah bentuk attribute tersebut.

    HTML untuk elemen li (list item) juga memiliki attribute start dan type

    Berikut ini beberapa contoh html untuk elemen ol, ul dan li.

    Contoh HTML untuk ol dan li

    Link Blogku
    <ol>
         <li>Home</li>
         <li>Sitemap</li>
         <li>Backlink</li>
         <li>Mail Us</li>
    </ol>

    Hasilnya seperti berikut :


    Link Blogku

    1. Home
    2. Sitemap
    3. Backlink
    4. Mail Us
    Contoh untuk elemen ul (unordered list)

    Link Blogku
    <ul>
         <li>Home</li>
         <li>Sitemap</li>
         <li>Backlink</li>
         <li>Mail Us</li>
    </ul>


    Hasilnya seperti berikut

    Link Blogku

    • Home
    • Sitemap
    • Backlink
    • Mail Us
    Untuk mencoba sendiri html untuk elemen ol, ul dan li silahkan copy kode html di atas dan pastekan pada notepad kemudian simpat dengan nama file : olulli.html kemudian coba jalankan pada browser dan lihat hasilnya.

    Sebenarnya ada buaaanyak sekali kode html yang lain:
    Misal <br>......</br> atau <div>....</div> dan banyak lagi
    Silahkan bongkar sendiri blog anda, dan mulailah berkreasi, namun sebelumnya jangan lupa untuk membuat terlebih dahulu back up nya. Inti dalam html, setiap dimulai dengan '<x>' maka harus ditutup dengan '</x>' paham kan?? 
    Misal nih ada kode <life> maka akhirnya adalah </life> (heheu, cuma bercanda)
    P.S: untuk para master, maaf kalo ada yang salah dari tulisan di atas, mohon bimbingannya, ane masih newbie gan :)

    Disadur dari: http://belajar-ilmu-komputer.blogspot.com



    0 komentar:

    Post a Comment