Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML Anatomy

    Diunggah oleh

    Muhammad Fatur Rochman
    4 tayangan29 halaman

    Judul Asli

    1. HTML Anatomy

    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
    4 tayangan29 halaman

    HTML Anatomy

    Diunggah oleh

    Muhammad Fatur Rochman

    Hak Cipta:

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

    BAB I

    HTML Anatomy

    A. Tujuan
    a. Peserta didik dapat mengetahui apa itu HTML serta dengan sejarahnya.
    b. Peserta didik dapat mengetahui perbedaan markup language dan program
    language.
    c. Peserta didik dapat mengetahui penggunaan tag dan atribut.
    d. Peserta didik dapat mengetahui tag dasar dalam HTML.

    B. Perlengkapan
    a. Modul Pengenalan HTML
    b. Software Text Editor atau IDE pemrograman WEB (Notepad++, Visual Studio
    Code, Sublim, dsb)
    c. Laptop atau komputer dengan sistem operasi Windows, Linux, atau Mac

    C. Materi

    Belajar HTML merupakan langkah pertama yang sangat penting dalam memahami
    dasar-dasar pembuatan aplikasi web. Sebagian besar aplikasi web saat ini
    menggunakan HTML. Memahami konsep-konsep dasar HTML akan membantu kita
    membangun dasar yang kokoh untuk pemahaman lebih lanjut terhadap teknologi
    web. Dengan HTML, kita akan memiliki dasar untuk memahami cara berinteraksi
    dengan elemen-elemen web, membuat konten yang terstruktur, dan membangun
    kehadiran online yang menarik. Dengan memahami HTML, Kita dapat
    meningkatkan kemampuan dalam mengembangkan situs web yang responsif dan
    menarik bagi pengguna.
    1) Apa itu HTML?

    Kita akan membahas apa itu HTML, sejarahnya, sampai kita nanti akan membuat
    website sederhana menggunakan HTML. HTML adalah singkatan dari Hypertext
    Markup Language. HTML adalah bahasa markup untuk membuat halaman web. Di
    dalam HTML terdapat serangkaian markup yang kita sebut dengan tag untuk
    memberi tahu browser bagaimana sebuah konten akan ditampilkan. Misalnya, nanti
    kita akan menampilkan sebuah teks. Teks itu harus kita beri sebuah tag untuk
    memberi tahu browser agar teks ini ditampilkan sesuai yang kita inginkan, baik itu
    sebagai paragraf atau judul halaman.

    2) Perbedaan Bahasa markup dan bahasa pemrograman?

    HTML merupakan bahasa markup language, bukan bahasa pemrograman. HTML


    tidak memiliki variabel, function, atau struktur kontrol seperti pengkondisian,
    pengulangan, dan sejenisnya. HTML dirancang untuk menandai konten dalam
    halaman web dan menentukan cara konten tersebut ditampilkan di dalam browser.

    3) Sejarah HTML?

    HTML pertama kali dibuat oleh Tim Berners-Lee pada tahun 1991. Versi pertama
    HTML yaitu HTML 1.0 yang hanya memiliki 18 tag saja. di tahun sebelumnya dia
    telah membuat protokol HTTP pada tahun 1990 untuk memungkinkan komunikasi
    antar server dan client web. pada tahun 1994 Berners-Lee mendirikan organisasi
    bernama W3C untuk mengatur standar web dan berperan penting dalam
    pengembangan HTML, dari tahun ke tahun HTML mengalami perkembangan yg
    sangat baik. dan HTML 5 hadir dengan elemen semantik, dukungan multimedia, dan
    peningkatan kemampuan javascript yang menjadikannya standar utama untuk
    mengembangkan aplikasi web modern hingga saat ini.
    Tim Berners-Lee

    Organisasi W3C

    4) Cara kerja elemen HTML?

    HTML bekerja di dalam file berekstensi .html. Ekstensi ini dapat dibuka di semua
    browser, seperti Chrome, Safari, Edge, Opera, dan Mozilla. Dengan menuliskan
    setiap tag elemen HTML di dalamnya, kita dapat mendefinisikan tampilan dan
    konten yang akan ditampilkan di browser.

    5) Tag dan atribut?

    Tag adalah salah satu elemen dalam HTML yang berfungsi untuk mendefinisikan
    konten yang akan ditampilkan di browser. Setiap tag elemen HTML memiliki
    fungsinya masing-masing. Contoh penulisan tag elemen dalam HTML, seperti
    gambar di bawah ini:
    Contoh penulisan elemen html di dalam file .html

    tag merupakan blok-blok dalam sebuah elemen di dalam HTML. Tag dibuat dengan
    kurung siku <...>, lalu di dalamnya berisi nama tag dan kadang juga ditambahkan
    dengan atribut. terdapat tag pembuka `<...>` sebagai penanda awal suatu elemen
    HTML, lalu konten yg akan diisi diantara kedua tag antara pembuka dan penutup
    sebagai contoh yaitu “document” yg berada diantara tag “<title>”, tag penutup
    “</…>” sebagai penanda akhir dari suatu elemen HTML. Terdapat beberapa tag
    dasar yang harus ada di setiap file HTML, yaitu:

    ● <html> … </html>, sepasang tag ini harus dimiliki setiap file HTML, di
    dalamnya adalah tag-tag yang kita gunakan untuk membangun halaman web
    ● <head> … </head>, sepasang tag <head> juga tag yang harus ada dalam file
    HTML, di dalamnya terdapat pengaturan-pengaturan dasar seperti judul
    halaman, meta tag, style, dan sebagainya
    ● <body> … </body>, sepasang tag <body> adalah tag yang wajib ada dalam file
    HTML, di dalam tag ini kita meletakan tag-tag konten HTML
    ● <title> … </title>, sepasang tag ini diletakkan di dalam tag <head>, tag
    ini digunakan untuk mengatur judul halaman web kita, apabila tidak ada tag ini
    dalam file HTML kita, maka web browser akan menggunakan URL web sebagai
    judul halaman
    ● <style> … </style>, sepasang tag ini diletakkan dalam tag <head> yang
    berfungsi untuk menuliskan kode CSS agar tampilan halaman web dapat diatur
    ● <meta> … </meta>, tag ini termasuk tag yang tidak wajib menggunakan tag
    penutup seperti tag lain, sepasang tag berfungsi untuk mendeskripsikan website
    kita. Contohnya seperti menambahkan atribut charset encoding, dan
    “name="viewport"” serta content dengan nilai “width=device-width,
    initial-scale=1.0”
    ● <script> … </script>, sepasang tag ini diletakkan dalam tag <body> yang
    berfungsi untuk menuliskan kode javascript agar web lebih interactive.

    di dalam tag terdapat atribut untuk memberi informasi agar dapat mengatur suatu
    perilaku atau tampilan elemen HTML. Beberapa atribut sifatnya wajib ada juga yg
    tidak, seperti attribut src dari img yg berfungsi lokasi sumber gambar yg akan
    ditampilkan lewat tag img. contohnya seperti dibawah ini:

    contoh atribut dalam tag meta

    penulisan attribute terdiri dari nama attribute lalu diisi dengan nilai attribute yg
    diinginkan. Contohnya seperti di gambar nama atribut dari tag meta yaitu name,
    charset, dan content lalu diisi nilai atributnya, fungsi atribut charset untuk

    6) Cara membuat halaman web dengan HTML

    Marilah kita langsung mempraktekkannya. Pertama, mari kita buat sebuah folder
    terlebih dahulu. Buka editor Anda, disarankan menggunakan Visual Studio Code
    karena interaktif dan memiliki banyak ekstensi untuk mempermudah para
    pengembang. Kemudian, buatlah sebuah file dengan ekstensi .html. Setelah itu,
    tulislah tag elemen HTML seperti berikut di dalam file tersebut:
    Contoh file .html dengan tag elemen html didalamnya

    Tulis baris kode di atas, lalu simpan dalam file index.html. Lalu, buka file yg telah
    dibuat di browser, tekan enter. Maka browser akan menampilkan halaman sebagai
    berikut:

    Hasil Tampilan Hello World di browser

    7) Tag Dasar HTML

    Selain tag-tag yang telah dibahas sebelumnya, terdapat beberapa tag dasar yang ada
    pada HTML diantaranya:
    a) Tag Heading

    Heading adalah tag yang digunakan untuk menuliskan judul suatu konten dalam
    halaman web. Ada 6 tingkatan heading, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan
    <h6>. Sebagai contoh, berikut adalah penulisan heading dalam file HTML:

    Penulisan Heading dalam HTML

    Tulis baris kode di atas, di dalam file index.html. Tuliskan sesuai dengan lokasi
    direktori kalian atau cara yang lebih mudah, seperti dengan menarik file ke dalam
    browser, lalu tekan enter. Maka hasilnya adalah sebagai berikut:
    Hasil Baris Kode Heading dalam HTML

    Bisa kita lihat dalam contoh hasil di atas, perbedaan setiap jenis tingkatan heading
    adalah pada ukuran fontnya. Ukuran huruf paling besar terdapat pada <h1>,
    sedangkan <h6> memiliki ukuran huruf paling kecil.

    b) Tag Paragraf

    Seperti namanya, tag paragraf digunakan untuk menuliskan paragraf pada halaman
    web. Tag paragraf dalam HTML dituliskan menggunakan sepasang tag <p> …
    </p>, dengan konten paragraf ditempatkan di antara tag tersebut. Berikut adalah
    contoh penulisan tag paragraf:
    Penggunaan Tag Paragraf dalam HTML

    Tulis kode baris di atas, lalu simpan dalam file HTML kita. Buka browser dan akses
    file tersebut. Berikut merupakan hasil dari baris kode di atas:

    Hasil Baris Kode Tag Paragraf

    Dalam baris kode tersebut, dicontohkan juga penggunaan dalam penulisan sebuah
    artikel. Pada umumnya, dalam artikel terdapat judul artikel yang kita tuliskan
    menggunakan tag <h1> dan isi artikel kita tuliskan menggunakan tag <p>.

    c) Tag Text Format

    Formatting text dalam HTML menggunakan beberapa tag yang telah didefinisikan.
    Ada beberapa kegunaan dalam formatting text, seperti:

    ● <b> - Bold text


    ● <strong> - Important text
    ● <i> - Italic text
    ● <em> - Emphasized text
    ● <mark> - Marked text
    ● <small> - Smaller text
    ● <del> - Deleted text
    ● <ins> - Inserted text
    ● <sub> - Subscript text

    Cara penggunaan format teks dalam HTML adalah dengan menempatkan teks yang
    ingin diubah formatnya di dalam tag. Berikut adalah contoh penggunaan salah satu
    tag untuk format teks:

    Penggunaan Text Formatting

    Kita dapat menggunakan file sebelumnya dalam mencoba baris kode diatas. Atau
    Kita juga diperbolehkan membuat file baru dengan nama formatting.html pada
    folder yang telah dibuat. Tambahkan tag strong pada kalimat “Lorem Ipsum”,
    simpan lalu refresh halaman web kita. Berikut merupakan hasil dari baris kode di
    atas:
    Hasil Penggunaan Text Formatting

    Pada gambar di atas, terlihat bahwa teks 'Lorem ipsum' tercetak tebal. Hal ini
    disebabkan oleh penulisan kalimat 'Lorem ipsum' di dalam tag
    <strong>...</strong>. Penulisan tag pemformatan teks tidak harus terletak
    dalam tag paragraf.

    d) Tag Anchor (Hyperlink)

    Halaman web memungkinkan kita untuk berpindah dari satu halaman ke halaman
    lain. Untuk melakukan itu, kita menggunakan tag anchor atau hyperlink. Hyperlink
    pada HTML menggunakan tag <a>. Penulisannya dalam file HTML sebagai berikut:

    Penulisan Penggunaan Tag Anchor atau Hyperlink


    Baris kode di atas adalah file pertama, karena kita akan melakukan perpindahan
    halaman, maka dibutuhkan halaman kedua. Berikut merupakan file kedua yang
    akan kita gunakan:

    File Kedua dalam Penulisan Tag Anchor atau Hyperlink

    Tulis kedua file tersebut, lalu simpan dengan nama halaman1.html untuk file
    pertama, dan halaman2.html untuk file kedua. Dalam tag <a>, terdapat atribut
    href="", atribut ini yang kita gunakan untuk mengatur file atau halaman mana
    tujuan hyperlink kita. Berikut merupakan hasil dari baris kode di atas:

    Tampilan Halaman Pertama Tag Hyperlink


    Pada gambar di atas, terlihat bahwa tag <a> yang kita buat ditampilkan dengan
    warna biru. Tampilan tersebut yang menandakan bahwa tulisan tersebut adalah
    hyperlink. Apabila kita klik, maka halaman akan berpindah ke halaman 2.

    e) Tag List

    Jika sebelumnya kita belajar bagaimana menggunakan teks yang berhubungan


    dengan menulis artikel, saat ini kita akan membahas tag yang juga sering kita
    jumpai dalam penulisan artikel. Dalam artikel, sering kita jumpai penulisan daftar
    atau poin-poin tertentu yang disampaikan. Dalam HTML, terdapat dua jenis list,
    yaitu:

    ● Ordered List <ol> … </ol>, digunakan untuk menampilkan list yang terurut
    seperti menggunakan nomor maupun abjad
    ● UnOrdered List <ul> … </ul>, digunakan untuk menampilkan list berupa
    simbol

    Berikut merupakan contoh penggunaan list dalam HTML:

    Baris Kode Penggunaan Tag List


    Pada baris kode di atas terdapat dua buah list. List pertama menggunakan ordered
    list, sedangkan yang kedua menggunakan unordered list. Pada setiap list, terdapat
    atribut type yang digunakan untuk menentukan jenis list yang diinginkan. Ada
    beberapa tipe dalam ordered list, yaitu:

    Type Ordered List Fungsi

    1 Menampilkan list berupa penomoran


    dengan bilangan desimal (default)

    I Menampilkan list berupa penomoran


    dengan bilangan romawi

    i Menampilkan list berupa penomoran


    menggunakan bilangan romawi kecil

    A Menampilkan list berupa penomoran


    menggunakan alphabet kapital

    a Menampilkan list berupa penomoran


    menggunakan alphabet kecil

    Pada penggunaan unordered list juga terdapat beberapa tipe, diantaranya:

    Type Unordered List Fungsi

    disc Menampilkan list menggunakan simbol


    titik (default)
    circle Menampilkan list menggunakan simbol
    lingkaran

    square Menampilkan list menggunakan simbol


    persegi

    none Menampilkan list dengan tidak


    menampilkan simbol

    Tulis baris kode pada Gambar 2.10 di atas lalu simpan file HTML kita. Akses pada
    browser anda, maka akan menghasilkan tampilan sebagai berikut:

    Hasil Baris Kode List HTML

    f) Tag Komentar

    Komentar adalah elemen yang akan diabaikan oleh browser. Komentar tidak akan
    ditampilkan di browser. Dia biasanya digunakan untuk memberikan informasi
    tambahan pada kode HTML dan kadang juga digunakan untuk menonaktifkan
    beberapa kode HTML.

    Komentar dapat dibuat dengan menggunakan tag `<!-- isi komentar -->`. Untuk
    lebih jelasnya, silahkan perhatikan contoh kode program di bawah ini.

    8) Atribut HTML

    Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut
    sebagai modifier yang akan menentukan perilaku dari elemen. Atribut dapat
    ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan
    menggunakan atribut seperti elemen `<a>`,`<img>`, dll.

    Tag `<a>` adalah tag untuk membuat link. Tag ini mewajibkan menambahkan
    atribut `href` untuk menyatakan halaman tujuan dari link. Perhatikan kode pode
    program di bawah ini.
    Penulisan atribut di dalam elemen a.

    Dalam suatu elemen, juga bisa terdiri dari lebih dari satu atribut, seperti pada
    contoh kode program di bawah ini.

    Penulisan atribut lebih dari satu.

    Terdapat beberapa jenis atribut dalam suatu elemen. Pertama, ada atribut global, di
    mana atribut tersebut dapat ditambahkan ke semua elemen. Kedua, ada atribut
    khusus yang hanya dapat digunakan pada elemen tersebut. Untuk lebih jelas,
    perhatikan jenis atribut di bawah ini:

    1. Atribut Global

    Berikut beberapa atribut yang termasuk atribut global beserta fungsinya:

    Nama Atribut Fungsi

    class Menentukan class CSS yang akan digunakan

    id Menentukan id unik untuk elemen

    lang Menentukan bahasa yang digunakan untuk isi elemen

    style Menentukan inline CSS untuk elemen


    2. Atribut Khusus

    Contoh atribut yang termasuk atribut khusus adalah sebagai berikut:

    Nama Atribut Bisa dipakai di tag

    src <audio>, <embed>, <iframe>, <img>

    href <a>, <link>

    action <form>

    autoplay <audio>, <video>

    Ada beberapa hal yang perlu diperhatikan agar penulisannya benar dan valid,
    diantaranya adalah sebagai berikut.

    1. Gunakan Huruf Kecil

    Menurut validator W3C, menulis atribut menggunakan huruf besar boleh saja.
    Namun, disarankan untuk menggunakan huruf kecil saja, karena lebih rapi dan lebih
    umum, atau sering digunakan.

    2. Gunakan Tanda Petik

    Gunakan tanda petik untuk mengisi nilai atribut yang mengandung teks, karena
    ketika terdapat lebih dari satu kata, maka membutuhkan spasi. Apabila tidak
    menggunakan tanda petik, maka akan dianggap sebagai atribut baru.

    3. Penggunaan Spasi

    Jika terdapat nama atribut yang lebih dari satu, maka ia ditulis dengan tanda min (-)
    bukan spasi.

    9) Elemen Form.

    Form adalah elemen HTML yang digunakan untuk mengumpulkan input dari
    pengguna. Form dapat berisi berbagai elemen, seperti teks input, area teks, kotak
    centang, radio button, dan banyak lagi. Saat formulir dikirim, data yang dimasukkan
    oleh pengguna dikirim ke server untuk diproses. Elemen form biasa digunakan
    untuk kebutuhan seperti halaman login, registrasi, atau formulir.

    Struktur pembuatan form.

    Untuk membuat form kita perlu menggunakan elemen <form> sebagai awalan dan
    diakhiri dengan </form>, di dalam elemen form diisi dengan elemen. ada beberapa
    atribut yang dapat digunakan dalam form yaitu :

    ● enctype, Menentukan tipe encoding yang digunakan saat mengirimkan data


    formulir. Berguna jika formulir mengandung file yang diunggah.
    ● method, Menentukan metode apa yang akan dikirim ke server, ada beberapa
    method yaitu GET, dan POST.
    ● action, Menentukan data dari form akan dikirim kemana, nilai dari action bisa
    berupa URL, atau mengarah ke file tertentu.

    beberapa elemen penting yang digunakan sebagai input di dalam elemen form :

    ● <input>, digunakan untuk membuat berbagai jenis tipe input, penjelasan type
    dan atribut sebagai berikut:
    ○ type:submit, digunakan untuk mengirimkan formulir. tipe ini sudah
    tidak disarankan lagi digunakan karena bisa menggunakan elemen
    <button>
    ○ type:text, digunakan untuk membuat input dengan tipe teks.
    ○ type:number, digunakan untuk membuat input dengan tipe number.
    ○ type:hidden, Membuat input tersembunyi yang tidak ditampilkan
    pada halaman, tetapi nilainya dapat dikirimkan saat formulir dikirim.
    ○ required, input yang menggunakan atribut ini harus diisi sebelum
    formulir dapat dikirim.
    ○ type:radio, digunakan untuk menampilkan banyak opsi, namun
    hanya dapat memilih satu opsi.
    ○ type:checkbox, fungsinya sama seperti radio, yang membedakan
    yaitu dapat memilih lebih dari satu opsi.
    ○ type:file, digunakan untuk membuat input untuk menangani file
    yang dikirim, untuk tipe input ini diperlukan atribut enctype di dalam
    elemen <form>.
    ○ placeholder, digunakan untuk menampilkan teks di dalam input
    untuk memberikan petunjuk kepada pengguna.
    ○ value, digunakan untuk menentukan nilai yang akan dikirim ke server
    ketika formulir dikirim.
    ○ name, digunakan untuk memberikan nama atau identifier untuk
    elemen input.
    ● <textarea>, digunakan untuk membuat area teks lebih besar.
    ● <button>, digunakan untuk membuat tombol interaktif di dalam formulir atau
    di bagian lain dari halaman web. ada beberapa tipe button yang dapat
    digunakan:
    ○ submit, digunakan untuk mengirimkan form.
    ○ button, tidak ada perilaku khusus, digunakan jika ingin menangani
    tindakan tombol dengan JavaScript.
    ○ reset, digunakan untuk Mengembalikan nilai formulir ke nilai
    awalnya.
    ● <Select>, digunakan untuk membuat daftar pilihan seperti dropdown.
    ● <option>, digunakan untuk mendefinisikan nilai pilihan yang ada di dalam
    elemen select.
    ● <label>, digunakan untuk Membuat keterangan untuk elemen masukan.
    Penulisan elemen input text.

    Untuk membuat input type teks, kita hanya perlu membuat elemen input di dalam
    form, lalu tambahkan atribut type dengan nilai text. Ketika kita jalankan, maka
    akan tampil seperti ini.

    Tampilan input text.


    Penulisan elemen input text.

    Untuk membuat input type password, kita hanya perlu membuat elemen input di
    dalam formulir, lalu tambahkan atribut type dengan nilai "password". Maka, input
    dengan type password akan menyembunyikan teks yang dimasukkan dan
    menampilkan karakter * sebagai gantinya. Ketika dijalankan, tampilannya akan
    seperti ini.

    Tampilan input password.


    Penulisan elemen input number.

    Untuk membuat input type number, kita hanya perlu membuat elemen input di
    dalam formulir, lalu tambahkan atribut type dengan nilai “number”. Maka, input ini
    hanya dapat diisi dengan number saja. Ketika dijalankan, tampilannya akan seperti
    ini.

    Tampilan input number.


    Penulisan elemen label

    Untuk memberikan informasi sehingga kita dapat mengidentifikasi tujuan dari suatu
    input, kita dapat menggunakan elemen <label>, kemudian tambahkan atribut for
    yang disesuaikan dengan ID input yang diinginkan. Ketika hal ini dieksekusi di
    browser, apabila kita mengklik teks label, input yang sesuai akan menjadi aktif.

    Tampilan elemen label.


    Penulisan elemen radio.

    Untuk membuat input type radio, kita hanya perlu membuat elemen input di dalam
    formulir, lalu tambahkan atribut type dengan nilai 'radio'. untuk menggunakan
    elemen Maka, input ini hanya dapat dipilih satu dari pilihan yang diberikan. Ketika
    dijalankan, tampilannya akan seperti ini.

    Tampilan input radio.


    Tampilan input checkbox.

    Untuk membuat input type checkbox, kita hanya perlu membuat elemen input di
    dalam formulir, lalu tambahkan atribut type dengan nilai 'radio'. Maka, input ini
    dapat memilih lebih dari satu dari pilihan yang diberikan. Ketika dijalankan,
    tampilannya akan seperti ini.

    Tampilan input checkbox.


    Penulisan elemen textarea.

    Untuk menciptakan input dengan tampilan yang lebih luas, kita dapat
    menambahkan elemen <textarea> dalam struktur HTML kita. Berbeda dengan
    <input type='text'>, <textarea> memberikan fleksibilitas yang lebih besar
    dalam menentukan ruang input. Berikut adalah contoh tampilannya.

    Tampilan elemen textarea.

    Penulisan elemen select dan option.


    Untuk membuat input select mirip dengan daftar pilihan, kita dapat menggunakan
    elemen <select>. Selanjutnya, tambahkan elemen <option> untuk
    mendefinisikan nilai-nilai yang dapat dipilih.

    Tampilan elemen select

    D. Reference.

    Shiksha Online , “html-forms-tutorial-with-examples”,


    https://www.shiksha.com/online-courses/articles/html-forms-tutorial-with-exampl
    es/

    Anda mungkin juga menyukai