Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul - Belajar HTML

    Diunggah oleh

    Dinar Yourbae
    3 tayangan18 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    3 tayangan18 halaman

    Modul - Belajar HTML

    Diunggah oleh

    Dinar Yourbae

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 18

    PRAKTIKUM

    BELAJAR HTML

    A. PRAKTIKUM

    HTML
    HTML merupakan singkatan dari HyperText Markup Language yaitu bahasa standar
    web yang dikelola penggunaannya oleh W3C (World Wide Web Consortium)
    berupa tag – tag yang menyusun setiap elemen dari website. HTML berperan
    sebagai penyusun struktur halaman website yang menempatkan setiap elemen
    website sesuai layout yang diinginkan.

    A. Mul
    B. Unsur HTML
    Tag
    Tag adalah simbol khusus (markup) berupa dua karakter “<” dan “>” yang
    mengapit suatu teks sebagai nama tag. Contohnya tag <body> adalah tag
    dengan nama body. Sebagai besar tag memiliki tag pembuka dan tag penutup
    yang membatasi pengaruh dari tag tersebut.

    Karakteristik dari tag pada HTML :


    - Boleh ditulis dengan huruf besar (kapital), kecil atau campuran, karena
    sifatnya yang incase sensitive. Misalnya : <BODY>, <body> atau <Body>
    semuanya memiliki hasil yang sama. Namun, untuk standarnya lebih baik
    menggunakan huruf kecil semua.

    - Tag bisa berisi tag lain. Tag yang dibuka dahulu ditutup terakhir, sedangkan
    tag yang dibuka terakhir ditutup pertama. Namun, kesalahan dalam struktur
    ini tidak mengakibatkan error.

    tag.html

    Atribut
    Atribut yaitu property yang mengatur bagaimana elemen dari suatu tag akan
    ditampilkan. Atribut ditulis di dalam simbol tag setelah nama tag dengan
    dipisahkan oleh spasi. Atribut ada yang memiliki nilai dan ada yang tidak
    memiliki nilai. Nilai suatu atribut ditulis di dalam tanda petik ganda (“…”),
    dipisahkan dengan simbol sama dengan (=) dari nama atribut.
    Karakteristik dari atribut pada HTML :
    - Atribut hanya ditulis pada tag pembuka
    - Setiap tag memiliki atribut yang berbeda – beda yang dapat diterapkan pada
    tag tersebut.
    - Beberapa atribut ada yang dapat diterapkan ke semua tag atau disebut
    global attribute, misalnya : class,, id, style, dll.
    - Sebuah tag dapat ditulis dengan satu atribut, banyak atribut, atau tanpa
    atribut sama sekali.
    - Jika tag ditulis dengan banyak atribut, masing – masing atribut dipisahkan
    oleh spasi.

    atribut.html

    Element
    Element adalah bagian dari skrip HTML yang terdiri dari tag pembuka, isi
    element dan tag penutup. Jika sebuah element ditampilkan pada browser, maka
    hanya isi element yang tampil di browser.

    element.html

    C. Struktur Dasar HTML


    HTML disimpan dengan ekstensi *.html, jika di dalamnya tidak mengandung
    skrip PHP. Jika di dalamnya mengandung skrip PHP, maka disimpan dengan
    ekstensi *.php

    Dalam penulisan HTML ada beberapa tag yang wajib dituliskan dengan struktur
    yang sudah ditentukan. Setiap file HTML harus menerapkan struktur tersebut.

    struktur_dasar.html
    Penjelasan :

    - <!DOCTYPE HTML> adalah tag awal dari setiap dokumen HTML, yang
    berfungsi untuk menginformasikan pada browser bahwa dokumen yang
    sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan pada
    setiap awal penulisan HTML.

    - <html> … </html> adalah tag yang menunjukkan pembuka dan penutup


    dokumen HTML.

    - <head> … </head> adalah tag yang digunakan untuk menyimpan berbagai


    informasi tentang dokumen HTML. Apa yang terdapat di dalam tag ini tidak
    akan ditampilkan di browser.

    - <title> … </title> adalah tag yang digunakan untuk membuat judul website
    yang akan muncul di title bar browser.

    - <body> … </body>, adalah tag yang menunjukkan bagian utama website.


    Semua yang akan ditampilkan pada halaman browser ditulis di bagian ini.

    D. Pemformatan Paragraf dan Teks


    Pemformatan Paragraf
    Paragraf dibuat dengan tag <p> … </p>, Atribut yang sering digunakan dalam
    tag ini adalah align. Atribut ini digunakan untuk mengatur perataan paragraf.
    Nilai yang dapat diberikan pada atribut align adalah left, center, right, dan justify.

    format_paragraf.html
    Pemformatan Judul
    Ada 6 style judul dalam HTML yang dibuat menggunakan tag <h1> sampai
    <h6>. Tag <h1> menghasilkan judul dengan ukuran huruf paling besar,
    sedangkan <h6> akan menghasilkan judul dengan ukuran paling kecil.

    format_judul.html

    Style Teks
    Teks yang dibuat dengan HTML dapat dibuat tebal, miring, bergaris bawah,
    bergaris tengah dan sebagainya. Tag yang dapat digunakan untuk mengatur
    style teks :
    - Tag <b> … </b> untuk membuat teks tebal.
    - Tag <i> … </i> untuk menjadikan teks miring.
    - Tag <u> … </u> untuk membuat teks bergaris bawah.
    - Tag <strike> … </strike> untuk membuat teks bergaris tengah.
    - Tag <strong> … </strong> untuk menunjukkan teks penting dengan teks
    dicetak tebal.
    - Tag <em> … </em> untuk menunjukkan teks penting dengan teks dicetak
    miring.
    - Tag <small> … </small> untuk membuat teks lebih kecil dari umumnya.
    - Tag <mark> … </mark> untuk membuat teks dengan background kuning,
    seperti teks yang ditandai.
    - Tag <del> … </del> untuk menunjukkan teks yang dihapus dengan teks
    dicoret tengah.
    - Tag <ins> … </ins> untuk menunjukkan teks yang disisipkan dengan teks
    bergaris bawah.

    style_teks.html
    Walaupun hasil yang didapat sama antara tag <b> dan tag <strong>, tag <i>
    dan tag <em>, tag <u> dan tag <ins> , serta tag <strike> dan tag <delete>,
    namun penggunaan tag tersebut memiliki tujuan yang berbeda. Tag <strong>
    dan <em> lebih ditujukan untuk menandai teks yang penting.

    Subscript dan Superscript


    Dalam penulisan matematika, sering ditemui penulisan huruf yang ditulis lebih
    kecil dan posisinya lebih ke atas atau ke bawah yang biasanya disebut
    superscript dan subscript. Untuk membuat superscript menggunakan tag
    <sup> sedangkan untuk membuat subscript menggunakan tag <sub>

    subscript_superscript.html
    Simbol – simbol khusus
    Setiap simbol memiliki kode nama dan kode nomor. Untuk menambahkan
    simbol – simbol tertentu pada HTML. Dapat dilakukan dengan menuliskan kode
    nama atau kode nomor dari simbol tersebut.

    simbol.html

    Teks Komentar
    Komentar adalah baris text yang tidak ditampilkan dalam halaman website.
    Fungsi nya adalah memberi keterangan pada skrip.

    komentar.html
    E. List
    Ada dua jenis list yaitu list berurutan (ordered list) dan list tidak berurutan
    (unordered list).

    Untuk membuat llist berurutan menggunakan tag <ol> … </ol>.


    Tag ini memiliki atribut type, yang menunjukkan jenis penomoran dan dapat
    diberi nilai 1, a, A atau i.

    Untuk membuat list tidak berurutan menggunakan tag <ul> … </ul>. Atribut ini
    juga memiliki atribut type, tetapi nilainya berbeda, yaitu round, disc, dan
    square.

    Untuk membuat item list pada tiap baris list baik pada list berurutan maupun list
    tidak berurutan menggunakan tag <li> … </li>.

    list.html
    F. Tabel
    Tabel pada HTML dapat dibuat menggunakan tag <table> … </table>. Isi dalam
    tabel dibagi menjadi dua bagian yaitu header tabel ditunjukkan dengan tag
    <thead> … </thead> dan body tabel ditunjukkan dengan tag <tbody> …
    </tbody>. Untuk menambah baris pada tabel menggunakan tag <tr> … </tr>
    Untuk menambahkan data, jika berupa data header menggunakan tag <th> …
    </th> sedangkan pada body tabel menggunakan tag <td> … </td>

    tabel.html

    Tag <table> memiliki beberapa atribut :


    - Cellspacing, untuk menentukan jarak antar sel.
    - Cellpadding, untuk menentukan jarak isi sel dengan bordernya.
    - Width, untuk menentukan lebar tabel.
    - Height, untuk menentukan tinggi tabel.
    - Bgcolor, untuk memberi warna background pada tabel.
    - Align, untuk menentukan perataan tabel.
    - Border, untuk menentukan tebal border tabel.

    Atribut juga dapat diberikan pada baris dan sel tabel yaitu pada tag <tr> atau
    <td>. Atribut yang dapat diberikan pada tag <tr> atau <td> diantaranya :
    - Align, untuk menentukan perataan text pada isi sel.
    - Valign, untuk menentukan perataan text secara vertikal.
    - Width, untuk menentukan lebar sel.
    - Height, untuk menentukan tinggi sel.
    - Bgcolor, untuk memberi warna background pada sel.
    - Rowspan, untuk menggabungkan sel baris berikutnya pada kolom yang
    sama.
    - Colspan, untuk menggabungkan sel kolom berikutnya pada baris yang
    sama.

    tabel_dasar.html
    Dalam membuat tabel sering kali menggabungkan beberapa sel menjadi satu
    sel. Dalam HTML, penggabungan sel dikenal dengan istilah span. Untuk
    menggabungkan beberapa sel di dalam HTML menggunakan atribut colspan
    dan rowspan. Colspan digunakan untuk menggabungkan beberapa kolom,
    sedangkan rowspan digunakan untuk menggabungkan beberapa baris. Nilainya
    diisi angka sesuai jumlah kolom atau baris yang di gabungkan.

    tabel_span.html

    G. Menambahkan Gambar
    Tag yang digunakan untuk menambahkan gambar di dalam HTML adalah tag
    <img>. Tag ini tidak memiliki tag penutup. Atribut yang dapat diberikan ke dalam
    tag ini adalah :
    - Src, untuk menentukan sumber dan nama gambar.
    - Width, untuk menentukan lebar gambar.
    - Height, untuk menentukan tinggi gambar.
    - Alt, untuk memberi text alternatif yang ditampilkan jika gambar tidak dapat
    ditampilkan.
    - Title, untuk membuat text yang tampil ketika mouse diatas gambar.

    Format gambar yang didukung oleh tag <img> adalah jpg, png, dan gif. Nama
    dan format gambar harus dituliskan dengan lengkap pada atribut src. Penulisan
    nama dan letak gambar ada beberapa kemungkinan yaitu :
    - Jika gambar satu folder dengan file HTML, maka penulisannya
    src=”nama_gambar.jpg”.

    - Jika gambar terletak di dalam folder yang berada di folder yang sama dengan
    file HTML, maka penulisannya menjadi
    src=”nama_folder/nama_gambar.jpg”

    - Jika gambar terletak di folder yang berbeda dengan folder yang berisi file
    HTML, maka harus keluar dari folder yang berisi file HTML dulu, sehingga
    penulisannya menjadi src=”../nama_folder/nama_gambar.jpg”. Tanda ../
    artinya keluar dari folder yang berisi file HTML

    gambar.html

    H. Menambahkan Video dan Audio


    Tag yang digunakan untuk menampilkan video yaitu <video> … </video>.
    Adapun tag yang digunakan untuk menampilkan audio yaitu <audio> …
    </audio>. Kedua tag ini memiliki kesamaan atributnya yaitu :
    - Src, untuk menentukan nama file dan sumber / letak video atau audio.
    - Width, untuk menentukan lebar video atau audio control.
    - Height, untuk menentukan lebar video, hanya dipakai pada tag <video>
    - Controls, pilihan untuk menampilkan tombol kontrol atau tidak.
    - Autoplay, pilihan untuk langsung dimainkan atau tidak.

    Format video yang didukung yaitu ogg, mp4, dan webm. Sedangkan untuk
    audio, format yang didukung yaitu ogg, mp4 dan wav.

    audio_video.html

    I. Link
    Link merupakan pintasan untuk menuju suatu URL website, baik halaman lain
    pada suatu website maupun halaman pada website lain. Link sering digunakan
    untuk membuat menu website. Tag yang digunakan untuk membuat link adalah
    tag <a> … </a>. Tag ini memiliki beberapa atribut , yaitu :
    - Href, menentukan tujuan dari link ketika diklik.
    - Target, menentukan target yang dituju saat diklik apakah di tab yang sama
    atau tab lain.
    - Title, menentukan tulisan yang tampil saat mouse memasuki area link.

    Penulisan nilai atribut href memiliki beberapa cara tergantung dari fungsi link,
    yaitu :
    - Jika link digunakan untuk membuka file cara penulisannya
    href=”galeri.html”. Jika format file dapat dibuka di browser seperti html, txt,
    jpg, png atau gif, maka file akan ditampilkan pada halaman browser. Jika
    format file tidak dapat dibuka oleh browser seperti docs, xlsx, zip, rar dll,
    maka file akan didownload.
    - Jika link digunakan untuk menuju bagian lain dalam satu halaman website
    maka penulisannya menjadi href=”#bawah”. Agar link tersebut berfungsi ,
    maka harus ada tag <a> yang diberi atribut id=”bawah” sebagai target yang
    dituju ketika link diklik.

    link.html
    J. Iframe
    Iframe digunakan untuk membuat area yang dapat menampilkan konten dari
    website lain. Tag yang digunakan yaitu <iframe> … </iframe>. Tag ini sering
    digunakan untuk membuat widget pada blog. Atribut yang bisa digunakan, yaitu :
    - Src, menentukan sumber website yang ingin ditampilkan.
    - Width, menentukan lebar area.
    - Height, menentukan tinggi area.

    iframe.html

    K. Formulir
    Formulir digunakan untuk menginputkan data oleh pengguna pada website. Data
    yang diinputkan biasanya akan disimpan pada database. Tag yang digunakan
    untuk membuat formulir yaitu <form> … </form>. Tag ini memiliki beberapa
    atribut, yaitu :

    - Action, menentukan nama file yang akan memproses data yang dikirim.
    - Method, mengatur metode pengiriman data, bisa diisi get atau post.
    - Name, mengatur nama form.

    Perbedaan antara method GET dan POST pada form, yaitu :

    - METHOD GET
     Hanya dapat mengirim data dalam ukuran kecil.
     Data yang dikirim akan ditampilkan pada addres bar browser.

    - METHOD POST
     Dapat mengirim data dalam ukuran besar.
     Data tidak ditampilkan pada address bar.

    <label> … </label>
    Digunakan untuk membuat label dari sebuah alat input. Tag ini biasanya ditulis
    sebelum tag <input>, Atribut yang biasanya digunakan dalam tag ini for yang
    diisi dengan nama id dari alat input yang diberi label.

    <input>
    Digunakan untuk membuat alat input dengan berbagai macam tipe, atribut yang
    dapat digunakan pada tag ini , yaitu :
    - Name, memberi nama sebagai identitas data yang akan di kirim.
    - Value, memberi nilai / isi data yang akan dikirim.
    - Size, mengatur lebar alat input.
    - Placeholder, mengatur tulisan yang tampil ketika nilainya kosong.
    - Disabled, membuat input tidak dapat diubah isinya.
    - Readonly, seperti disabled tetapi masih bisa diubah nilainya dengan script.
    - Type, menentukan tipe alat input.
    - Id, memberi identitas data yang akan dikirim.
    Khusus tipe radio dan checkbox memiliki atribut checked. Adapun macam –
    macam tipe input yang dapat diberikan pada atribut type, yaitu :
    - Text, untuk memasukkan text biasa.
    - Hidden, untuk menyembunyikan input
    - Password, untuk memasukkan password.
    - Radio, untuk memberi pilihan beberapa nilai yang dapat dipilih dengan cara
    diklik.
    - Checkbox, untuk memberi pilihan dengan cara dicentang.
    - Submit, untuk membuat tombol yang akan mengirim data ketika diklik.
    - Reset, untuk membuat tombol yang akan mengosongkan formulir ketika
    diklik.
    - Button, untuk membuat tombol biasa yang memiliki fungsi lain.
    Pada HTML 5 ada penambahan beberapa tipe input. Tipe input yang
    ditambahkan pada HTML 5 , yaitu :
    - Color, untuk memilih warna.
    - Time, untuk memasukkan waktu.
    - Number, untuk memasukkan khusus angka.
    - Range, untuk memilih angka pada batas tertentu dengan cara menggeser
    slider.
    - Date, untuk memasukkan tanggal.
    - Email, untuk memasukkan email.
    - Url, untuk memasukkan URL (alamat website).

    form_input.html

    <select> … </select>

    Digunakan untuk membuat input berupa pilihan dalam bentuk dropdown. Atribut
    yang bisa digunakan sama dengan atribut tag <input>. Yang membedakan
    pada tag ini dapat diberi atribut multiple yang memungkinkan pengguna dapat
    memilih lebih dari satu pilihan. Untuk menambahkan pilihan menggunakan tag
    <option> … </option> yang ditulis di dalam tag <select> … </select>

    form_select.html

    <textarea> … </textarea>
    Digunakan untuk membuat input yang dapat diisi dengan text dalam jumlah
    banyak dan lebih dari satu baris. Misalnya : untuk input pesan pesan , komentar,
    berita , dll. Atribut yang dapat digunakan juga sama, namun ada beberapa
    tambahan , yaitu :
    - Cols, untuk mengatur jumlah huruf yang bisa diinputkan dalam 1 baris.
    - Rows, untuk mengatur jumlah baris yang dapat ditampilkan tanpa scroll.

    form_textarea.html
    L. Semantic HTML 5 Template
    Sebelum ada HTML 5, biasanya template HTML dibuat dengan tag <div> yang
    diberi id atau class header, nav, menu, content, title, dan footer. Pada HTML
    5, dikenalkan tag – tag baru yang akan mewakili bagian – bagian website,
    dengan tujuan untuk menyampaikan tujuan dari elemen – elemen tersebut
    kepada pengembang, browser dan algoritma mesin pencari.

    Tag – tag yang ditambahkan tersebut :


    - Tag <header> … </header> digunakan untuk menunjukkan bagian yang
    berfungsi sebagai header website. Tag ini dapat muncul beberapa kali sesuai
    dengan kebutuhan. Bahkan di dalam sebuah konten memungkinkan terdapat
    header lagi.

    - Tag <nav> … </nav>, digunakan untuk menunjukkan bagian yang berfungsi


    sebagai navigasi.

    - Tag <section> … </section>, digunakan untuk memisahkan bagian –


    bagian pada konten website. Tag ini dapat digunakan berkali – kali dalam
    satu halaman website.

    - Tag <main> … </main>, digunakan untuk menunjukkan bagian paling


    penting dalam satu halaman website. Berbeda dengan tag <section> …
    </section>, tag ini biasanya hanya dimunculkan satu kali yaitu pada bagian
    paling penting saja, seperti konten / artikel utama.

    - Tag <article> … </article> , digunakan untuk menampung konten yang


    berupa artikel. Umumnya diletakkan di dalam tag <section> atau <main>

    - Tag <aside> … </aside>, digunakan untuk menunjukkan bagian yang bukan


    merupakan konten utama tetapi memiliki kaitan dengan konten yang sedang
    ditampilkan. Biasanya digunakan untuk menandai sidebar.

    - Tag <footer> … </footer>, digunakan untuk menunjukkan bagian footer.

    template_semantic.java

    Anda mungkin juga menyukai