Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi HTML

    Diunggah oleh

    Lamtiur Manalu
    17 tayangan20 halaman
    Dokumen menjelaskan tentang HTML (Hypertext Markup Language) yang merupakan bahasa markup standar untuk membuat halaman web. Terdiri dari penjelasan tentang tag-tag dasar HTML seperti paragraph, heading, link, button, image, form dan lainnya beserta contoh kode-kodenya. Juga menjelaskan tentang atribut seperti id, class, dan nested tag.

    Deskripsi Asli:

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen menjelaskan tentang HTML (Hypertext Markup Language) yang merupakan bahasa markup standar untuk membuat halaman web. Terdiri dari penjelasan tentang tag-tag dasar HTML seperti paragraph, heading, link, button, image, form dan lainnya beserta contoh kode-kodenya. Juga menjelaskan tentang atribut seperti id, class, dan nested tag.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    17 tayangan20 halaman

    Materi HTML

    Diunggah oleh

    Lamtiur Manalu
    Dokumen menjelaskan tentang HTML (Hypertext Markup Language) yang merupakan bahasa markup standar untuk membuat halaman web. Terdiri dari penjelasan tentang tag-tag dasar HTML seperti paragraph, heading, link, button, image, form dan lainnya beserta contoh kode-kodenya. Juga menjelaskan tentang atribut seperti id, class, dan nested tag.

    Hak Cipta:

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

    Web Developer Bootcamp

    PT. Lawencon Internasional


    Outlines HTML
    HyperText Markup Language (HTML)
    HTML (HyperText Markup Language) adalah bahasa markup yang digunakan
    untuk memformat document dan ditampilkan di web browser.

    Contoh HTML :

    <!DOCTYPE html >


    <html>
    <head>
    <title>My Awesome Web</title>
    </head>
    <body>
    <p>This is my awesome content</p>
    </body>
    </html>
    Anatomy of HTML Element
    HTML Tags

    Dokumen HTML terdiri dari kumpulan tag-tag yang masing-masing punya fungsi
    untuk melakukan formating dokumen.

    Tag diawali dengan tag pembuka kemudian diakhiri dengan tag penutup (kecuali
    empty/void tag). Contoh empty/void tag adalah br, hr, img dan lainnya.

    Contoh :
    <h1> Ini Judul </h1>
    <p> Ini paragraph </p>
    <br>
    HTML Attribute

    HTML Attribute merupakan informasi tambahan yang berada di dalam suatu


    element. Contoh attribute yang umum ada di dalam tag adalah adalah id dan
    class, sedangkan attribute yang hanya ada pada beberapa tag saja contohnya
    src dan href. Kita juga bisa menambahkan attribute sendiri untuk kegunaan
    lainnya seperti untuk testing.

    Contoh :

    <div id=”container”>ini container</div>


    <div class=”blue”>ini akan berwarna biru</div>

    <img src=”http://myawesomeweb.com/awesome.jpg” />


    <a href=”http://myawesomeweb.com”> My Awesome</a>
    Common Tags

    Dalam membuat sebuah halaman web kita memerlukan beberapa tags, tags
    yang sering digunakan dalam halaman web antara lain :

    ● Heading & Paragraph


    ● Hyperlink
    ● Button
    ● Image
    ● Table
    ● Form (input, select, checkbox, radio, textarea)
    ● Div, Span, Bold, Italic
    Heading & Paragraph

    Heading digunakan untuk memformat suatu teks judul dengan menggunakan tag
    <h1>, heading tag ini tersedia angka 1 sampai 6, semakin kecil headingnya
    semakin besar ukuran fontnya.

    Contoh :
    <h1> Judul Font Paling Besar </h1>
    <h6> Judul Font Paling Kecil </h6>

    Paragraph digunakan untuk memformat suatu teks menjadi paragraph dengan


    menggunakan tag <p>

    Contoh :
    <p> Ini adalah paragraph yang lumayan panjang sehingga kita bisa menggatakan
    ini adalah paragraph yang sebenar-benarnya </p>
    Hyperlink / Anchor

    Hyperlink digunakan untuk melakukan navigasi ke page atau url lain


    menggunakan tag <a>, tag ini mempunyai attribute href yang digunakan untuk
    meletakkan lokasi/url page lain.

    Contoh :

    <a href=”page2.html”> Page 2 </a>


    <a href=”www.google.com” target=”_blank”> Google.com </a>

    Hyperlink memiliki attribute lain yang biasa digunakan seperti target, target ini
    digunakan untuk menentukan posisi dari lokasi/url yang ada di href. Secara
    default target ini berisi _self yaitu ketika di klik maka lokasi/url akan muncul
    sama di window itu, sedangkan jika kita ingin muncul di tab/window baru maka
    ganti dengan _blank
    Button

    Button digunakan untuk melakukan action tertentu seperti buat navigasi, buat
    tombol tambah, ubah, hapus dan lain sebagainya menggunakan tag <button
    type=”button”>. Button ini mempunyai attribute yang sering digunakan seperti
    onclick yang bisa digunakan bersama Javascript untuk melakukan action
    tertentu.

    Contoh :
    <button type=”button”> Page 2 </button>
    <button type=”button” onclick=”show()”> Show </button>

    index.js
    function show() {
    alert(‘ button clicked’ )
    }
    Image

    Image digunakan untuk menampilkan suatu gambar dari lokasi tertentu


    menggunakan tag <img> dengan attribute src untuk meletakkan lokasi
    gambarnya bisa menggunakan local path ataupun url. Attribute lain yang
    digunakan adalah alt yang digunakan sebagai informasi yang akan tampil jika
    terjadi kegagalan dalam menampilkan gambar di src atau sebagai accessibility.

    Contoh :
    <img src=”mobil.jpg” alt=”gambar mobil” >
    Attribute ID

    Attribute ID merupakan attribute yang menggambarkan bahwa suatu element itu


    unique/spesifik dan hanya boleh ada satu valuenya di satu halaman html.
    Biasanya digunakan untuk styling pada CSS nya ataupun untuk testing.

    Contoh :
    <input type=”text” placeholder=”input username” id=”username”>
    <input type=”text” placeholder=”input password” id=”password”>
    <select id=”user-type”>
    <option value=”1”>Pemakai</option>
    <option value=”2”>Penyedia</option>
    </select>
    Attribute CLASS

    Attribute Class merupakan attribute yang menggambarkan bahwa suatu element


    mempunyai karakteristik yang sama dengan element lain dan boleh lebih dari
    satu value yang sama pada satu halaman html.

    Contoh :
    <div class=”red”>teks ini akan berwarna merah</div>
    <p class=”red”>teksi ini akan berwarna merah juga</p>

    Note :
    Satu element bisa memiliki attribute id dan class secara bersamaan
    Nested Tag

    Nested tag element adalah tag element yang bisa berisi tag-tag element lainnya.
    Sedangkan sibling merupakan tag element yang posisinya sama/sejajar.

    Rumus :
    <tag1>
    <tag2>
    <tag3>... </tag3> Keterangan :
    </tag2> ● Hubungan div dengan (h1 dan p) adalah
    </tag1> parent child.
    ● Sedangkan hubungan h1 dengan p
    Contoh : adalah sibling, karena sejajar posisinya.
    <div class=”container”>
    <h1>Ini judul</h1>
    <p>Ini paragraf</p>
    </div>
    Comments

    Memberikan komentar di html agar ketika dijalankan di web browser tidak


    dibaca/render sebagai tag html pada umumnya.

    Contoh :
    <div class=”container”>
    <! -- <h1>Ini tidak di render sebagai tag element di browser</h1> -->
    <p>Ini paragraf</p>
    </div>
    Table

    Table digunakan untuk menampilkan baris dan kolom menggunakan tag <table> <th> <tr>
    <td>
    ● <th> merupakan table heading untuk membuat heading/judul
    ● <tr> merupakan table row untuk membuat baris
    ● <td> merupakan table table data untuk membuat content

    Contoh :
    <table>
    <tr>
    <th> No</th>
    <th> Nama</th>
    </tr>
    <tr>
    <td> 1</td>
    <td> Budi </td>
    </tr>
    </table>
    Form

    Form merupakan tag untuk membuat sebuah formulir yang bisa diinput / dipilih
    oleh pengguna secara langsung. Yang sering digunakan dalam form ini antara
    lain element input text, radio, checkbox, select dan text area.

    Contoh :
    <input type=”text” placeholder=”input teks”>
    <input type=”radio” name=”gender” value=”1”> Laki-laki
    <input type=”radio” name=”gender” value=”0”> Perempuan
    <input type=”checkbox” value=”apel”>
    <input type=”checkbox” value=”mangga”>
    <select>
    <option value=”1”>Pemakai</option>
    <option value=”2”>Penyedia</option>
    </select>
    <textarea rows=”4” cols=”50”> Ini textarea </textarea>
    Div, Span, Bold, Italic

    ● Div merupakan tag yang biasanya digunakan membuat sebuah


    container/wrapper untuk bagian tertentu
    ● Span merupakan tag yang biasanya digunakan untuk wrapper suatu teks
    ● Bold merupakan tag yang membuat font menjadi tercetak tebal
    ● Italic merupakan tag yang membuat font menjadi tercetak miring

    Contoh :

    <div>
    <p> <span class=”red”> Ini warna merah </span> yang ini engga </p>
    <p> <b> Ini fontnya tebal </b> yang ini engga </p>
    <p> <i> Ini fontnya miring </i> yang ini engga </p>
    </div>
    Semantic Tags HTML 5

    Semantic tag merupakan tag yang mempunyai makna khusus seperti <b> <i>
    <img> sedangkan semantic pada html 5 antara lain <header> <footer> <article>
    dan lain sebagainya.

    Contoh :

    <article>
    <h2> Ini judul article </h2>
    <p> Ini paragraph dari article </p>
    </article>

    Anda mungkin juga menyukai