Scribd Logo
Upload

Welcome to Scribd!

  • E-Commerce Bab 01

    Uploaded by

    heroe susilo sihombing
    74 views6 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, 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 DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    74 views6 pages

    E-Commerce Bab 01

    Uploaded by

    heroe susilo sihombing

    Copyright:

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

    1

    PENGANTAR HTML

    Tujuan Instruksional :

    1. Mahasiswa memahami apa yang dimaksud dengan HTML


    2. Mahasiswa mengetahui format dasar penulisan sebuah dokumen HTML
    3. Mahasiswa dapat menyusun dan menyimpan sebuah dokumen HTML
    sederhana
    Pengantar HTML

    A. Konsep Dasar HTML

    File HTML

    1. HTML merupakan singkatan dari HyperText Markup Language


    2. File HTML adalah file teks yang mengandung tag penanda (markup
    tags)
    3. Tag penanda memberitahu web browser bagaimana halaman web
    harus ditampilkan
    4. File HTML harus memiliki ekstensi .htm atau .html
    5. File HTML dapat dibuat dengan menggunakan teks editor sederhana

    Ekstensi HTM atau HTML

    Saat menyimpan sebuah dokumen atau file HTML ada dua macam ekstensi,
    yaitu ekstensi .htm atau .html yang dapat digunakan. Ekstensi .htm di-
    gunakan mengingat pada awal perkembangan teknologi komputer hanya da-
    pat mendukung penggunaan tiga huruf untuk penyimpanan file. Dengan
    teknologi informatika yang semakin maju, saat ini disarankan untuk menyim-
    pan file HTML dengan ekstensi .html

    Seluruh latihan yang ada pada modul kuliah ini selanjutnya akan mengguna-
    kan ekstensi .html untuk menyimpan file HTML.

    Editor HTML

    HTML dapat dengan lebih mudah diedit dengan menggunakan aplikasi yang
    bersifat WYSIWYG (what you see is what you get) seperti Microsoft Front-
    Page, Macromedia Dreamweaver, Adobe PageMill, dan lain-lain. Aplikasi ini
    selain mudah digunakan juga menyediakan berbagai fasilitas dalam mengatur
    tampilan sebuah halaman web.

    Namun untuk dapat menjadi seorang Web Developer yang terlatih, disaran-
    kan untuk tetap menggunakan teks editor sederhana dalam mempelajari
    HTML, misalnya adalah EditPlus2.exe atau notepad.exe

    Latihan
    1. Jalankan aplikasi Notepad.
    2. Ketik baris perintah berikut ini :

    <html>
    <head>
    <title>Judul Halaman</title>
    </head>
    <body>
    Ini file percobaan HTML. <b>Teks ini tebal.</b>
    </body>
    </html>

    2 E-Commerce - Akademi Akuntansi Y.A.I


    Pengantar HTML

    3. Simpan file di My Document sebagai “coba1-1.html” dengan cara klik


    menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada
    bagian Save as type pilih All Files, lalu ketik “coba1-1.html” pada
    bagian File name, klik tombol Save.
    4. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang
    muncul klik Browse, cari file “coba1-1.html” yang baru dibuat tadi
    (misalnya di C:\My Documents\coba1-1.html), lalu klik OK.

    Penjelasan
    1. Tag pertama di bagian awal adalah <html>. Tag ini menjelaskan pada
    web browser bahwa ini adalah awal dari sebuah dokumen HTML. Tag
    ini diakhiri dengan </html> pada bagian akhir, yang menjelaskan
    bahwa ini adalah akhir dari dokumen HTML.
    2. Teks yang berada di antara tag <head> dan </head> menjelaskan
    informasi dari dokumen HTML yang bersangkutan. Informasi ini tidak
    ditampilkan pada web browser.
    3. Teks yang berada di antara tag <title> dan </title> berisi judul ha-
    laman HTML. Judul ini akan ditampilkan pada bagian caption di sebelah
    atas aplikasi web browser.
    4. Teks yang berada di antara tag <body> dan </body> adalah isi doku-
    men HTML yang nantinya akan ditampilkan pada web browser.
    5. Teks yang berada di antara tag <b> dan </b> akan ditampilkan de-
    ngan huruf tebal.

    B. Tag dan Elemen HTML

    Tag HTML

    1. Tag HTML digunakan untuk menandai elemen HTML


    2. Tag HTML ditandai dengan penggunaan karakter kurung siku, yaitu <
    dan >
    3. Tag HTML umumnya selalu berpasangan, misalnya <b> dan </b>
    4. Tag pertama adalah tag awal, dan tag kedua adalah tag akhir yang
    ditandai dengan digunakannya karakter garis miring (/)
    5. Teks yang berada di antara tag awal dan tag akhir disebut isi elemen
    6. Tag HTML tidak bersifat “case sensitive”, maksudnya <b> bermakna
    sama dengan <B>

    Elemen HTML

    Perhatikan kembali contoh latihan sebelumnya.

    <html>
    <head>
    <title>Judul Halaman</title>
    </head>
    <body>
    Ini file percobaan HTML. <b>Teks ini tebal.</b>
    </body>
    </html>

    E-Commerce - Akademi Akuntansi Y.A.I 3


    Pengantar HTML

    Berikut ini adalah contoh elemen HTML :

    <b>Teks ini tebal.</b>

    1. Elemen HTML dibuka dengan tag awal : <b>


    2. Isi elemen HTML adalah : Teks ini tebal.
    3. Elemen HTML ditutup dengan tag akhir : </b>
    4. Maksud dari tag <b> adalah untuk mendefinisikan bahwa isi elemen
    HTML tersebut ditampilkan dengan huruf tebal.

    Contoh elemen HTML lainnya adalah :

    <body>
    Ini file percobaan HTML. <b>Teks ini tebal.</b>
    </body>

    1. Elemen HTML dibuka dengan tag awal : <body>


    2. Dan ditutup dengan tag akhir : </body>
    3. Isi elemen HTML adalah : Ini file percobaan HTML. <b>Teks ini tebal.
    </b>
    4. Maksud dari tag <body> adalah untuk mendefinisikan bahwa elemen
    HTML ini adalah isi dari dokumen HTML tersebut.

    Atribut Tag HTML

    Tag HTML dapat memiliki atribut.


    1. Atribut ini berisi informasi tambahan mengenai elemen HTML.
    2. Atribut selalu ditulis dengan format nama atribut=”nilai atribut”
    3. Atribut selalu ditulis pada tag awal sebuah elemen HTML

     Latihan
    1. Jalankan aplikasi Notepad
    2. Ketik baris perintah berikut ini :

    <html>
    <head>
    <title>Judul Halaman</title>
    </head>
    <body bgcolor="red">
    Ini file percobaan HTML. <b>Teks ini tebal.</b>
    </body>
    </html>

    3. Simpan file di My Document sebagai “coba1-2.html” dengan cara klik


    menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada
    bagian Save as type pilih All Files, lalu ketik “coba1-2.html” pada
    bagian File name, klik tombol Save.
    4. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang
    muncul klik Browse, cari file “coba1-2.html” yang baru dibuat tadi
    (misalnya di C:\My Documents\coba1-2.html), lalu klik OK.

    4 E-Commerce - Akademi Akuntansi Y.A.I


    Pengantar HTML

     Penjelasan
    1. Tag <body> digunakan untuk mendefinisikan isi dari dokumen HTML.
    Tambahan atribut “bgcolor” seperti pada contoh di atas akan memerin-
    tahkan web browser untuk menampilkan warna latar belakang pada
    halaman web.
    2. Sehingga tag <body bgcolor=”red”> akan menampilkan halaman web
    dengan latar belakang berwarna merah.
    3. Secara default web browser akan menampilkan halaman web dengan
    warna putih sebagai latar belakang.

    B. Soal Latihan

    No. Soal Nilai


    1 Buatlah sebuah file Tugas1a.html yang menampilkan
    nama dan alamat rumah anda !!

    2 Buatlah sebuah halaman Web seperti pada gambar


    berikut !! (Keterangan : warna latar belakang adalah
    kuning)

    E-Commerce - Akademi Akuntansi Y.A.I 5


    Pengantar HTML

    6 E-Commerce - Akademi Akuntansi Y.A.I

    You might also like