Scribd Logo
Unggah

Selamat datang di Scribd!

  • Penkom Web1b

    Diunggah oleh

    Nandini Putri
    3 tayangan29 halaman
    Kkpi

    Judul Asli

    penkom-web1b

    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
    Kkpi

    Hak Cipta:

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

    Penkom Web1b

    Diunggah oleh

    Nandini Putri
    Kkpi

    Hak Cipta:

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

    X

    HTM
    L5
    ●
    HTML5: standar terbaru HTML
    ●
    XHTML5: HTML5 dengan aturan penulisan yang
    tegas à la XML
    ●
    hanya ada satu cara penulisan XHTML
    – lebih mudah, karena aturannya lebih jelas
    ●
    dokumen mudah diproses dengan XML parser
    ●
    namespace XML lain dapat dimasukkan dalam dokumen
    – SVG, MathML, dan lainnya
    – h-p://www.w3.org/TR/XHTMLplusMathMLplusSVG/sample.xhtml
    ●
    forward-compability
    K
    et
    er
    ka
    it
    anB
    aha
    saWe
    b
    ●
    HTML → struktur isi dokumen
    ●
    CSS → desain tampilan dokumen
    ●
    JavaScript → 7ngkah laku dokumen
    ●
    bahasa pemrograman di sisi klien

    HTML

    CSS JavaScript
    S
    ema
    nt
    ic
    Mar
    ku
    p
    ●
    Pilihlah elemen HTML yang paling sesuai
    dengan ar7 dari isi dokumen
    ●
    Contoh:
    ●
    gunakan elemen heading (h1-h6) untuk markup
    hierarki judul bab dokumen
    ●
    gunakan elemen table untuk markup data tabular,
    jangan digunakan untuk layout dokumen
    B
    er
    ka
    sXH
    TML
    ●
    Simpan dengan ekstensi .xhtml
    ●
    Teks memakai encoding UTF-8
    ●
    gunakan teks editor yang mendukung UTF-8
    – Geany [h-p://www.geany.org/]
    – Notepad++ [h-p://notepad-plus-plus.org/]
    K
    er
    an
    gk
    aDa
    sa
    rXH
    TML
    5
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
    <title>Title of Page</title>
    <meta charset="utf-8" />
    </head>

    <body>

    <!-- Content -->

    </body>

    </html>
    D
    OCT
    YPE
    <!DOCTYPE html>
    ●
    Menunjukkan jenis dan versi dokumen
    ●
    Petunjuk bagi browser untuk me-render
    dokumen
    ●
    Ditempatkan pada bagian dokumen paling atas
    ●
    Mode render:
    ●
    standard mode
    ●
    quirks mode
    h
    tml
    <html xmlns="hp://www.w3.org/1999/xhtml"
    lang="id">
    ●
    Struktur paling atas: html
    ●
    xmlns: XML Namespace
    ●
    lang: bahasa yang dipakai dalam dokumen
    c
    ha
    rs
    et
    <meta charset="u'-8" />
    ●
    Menunjukkan set karakter yang dipakai dalam
    dokumen
    ●
    Untuk XML default-nya memakai UTF-8
    E
    l
    eme
    nXH
    TML
    5
    T
    ag
    ●
    Digunakan untuk menandakan awal dan akhir
    elemen pada markup XHTML
    ●
    Elemen normal harus memiliki tag awal dan tag
    akhir (berpasangan)
    ●
    <tag>content</tag>
    <strong>teks</strong>, <p>paragraf…</p>

    ●
    Elemen kosong hanya memiliki tag awal saja
    ●
    <tag />
    <br />, <hr />
    A
    tr
    ib
    ut
    ●
    Atribut dituliskan pada start tag
    ●
    Isi (value) atribut harus diapit tanda quote ( " )
    ●
    <tag a-ribute="value">content</tag>
    <p lang="fr">Paragraphe en français…</p>
    ●
    <tag a-ribute="value" />
    <meta name="author" description="Auriza" />

    ●
    Penyingkatan atribut 7dak boleh, harus ditulis lengkap
    ●
    <tag a-ribute="a-ribute" …
    <video src="movie.ogv" controls></video>
    <video src="movie.ogv" controls="controls"></video>
    T
    amp
    il
    an
    El
    em
    en
    ●
    Block
    ●
    elemen yang menempa7 satu blok (baris) tersendiri
    ●
    dapat berisi elemen block/inline lainnya
    ●
    contoh: <h1>, <h2>, <p>, <ul>, <ol>, <table>

    ●
    Inline
    ●
    elemen yang tetap berada sebaris dengan content di
    sekelilingnya
    ●
    hanya dapat berisi elemen inline lainnya
    ●
    contoh: <a>, <strong>, <em>, <img />
    I
    ns
    pe
    ks
    iT
    amp
    il
    an
    El
    em
    en
    ●
    Firefox: menu Web Developer > Inspect
    I
    ns
    pe
    ks
    iT
    amp
    il
    an
    (So
    ur
    ce
    )
    <h1>Contoh XHTML5</h1>

    <p>Contoh-contoh elemen dalam <strong>XHTML5</strong></p>

    <h2>Blockquote</h2>
    <blockquote>
    <p>Quotation from external source.</p>
    </blockquote>

    <h2>Unordered List</h2>
    <ul>
    <li>Hardisk</li>
    <li>Floppy Disk</li>
    <li>Monitor</li>
    </ul>

    <h2>Ordered List</h2>
    <ol>
    <li>Hardisk</li>
    <li>Floppy Disk</li>
    <li>Monitor</li>
    </ol>
    T
    yp
    og
    ra
    ph
    y
    H
    ead
    in
    g
    ●
    Elemen block yang terdiri atas 6 7ngkatan, dari
    h1 sampai h6
    ●
    Digunakan untuk mengelompokkan konten dan
    menyediakan hierarki
    ●
    Harus digunakan berurutan sesuai dengan isi
    dokumen, misalnya:
    ● h1 untuk judul
    ● h2 untuk judul bab
    ● h3 untuk judul sub-bab, dan seterusnya
    H
    ead
    in
    g(C
    on
    to
    h)
    <h1>Judul Utama</h1>
    <h2>Judul Bab</h2>
    <h3>Judul Subbab</h3>
    P
    ar
    ag
    ra
    f
    ●
    Heading biasanya diiku7 dengan paragraf
    pendukung.
    ●
    DideKnisikan dengan elemen level block p.
    ●
    Contoh:
    <p>Saat melakukan navigasi, perhatian orang
    yang melakukan navigasi akan lebih tertuju
    pada proses dan peralatan yang digunakan,
    bukan keadaan sekitar dirinya.</p>
    P
    en
    ek
    an
    an
    ●
    Untuk membuat penekanan pada pen7ngnya
    suatu teks, digunakan elemen level inline strong
    dan em
    ●
    strong importance → cetak tebal
    ●
    stressed emphasis → cetak miring
    ●
    Contoh:
    <p><strong>Perhatian.</strong> <em>Dilarang
    merokok di area pabrik!</em></p>
    b
    ol
    d,
    i
    tal
    i
    c
    ●
    Elemen b (bold) digunakan untuk menandakan
    kata kunci atau nama produk.
    ●
    Elemen i (italic) digunakan untuk menandakan
    is7lah asing atau nama spesies.
    ●
    Kedua elemen ini 7dak memiliki seman7k
    penekanan, hanya tampilan tulisan saja.
    ●
    Contoh:
    <p><b>Android</b> adalah sistem operasi untuk
    <i lang="en">smartphone</i> yang berbasis
    Linux.</p>
    H
    ype
    rl
    i
    nk
    ●
    Salah satu elemen terpen7ng, dibuat memakai anchor,
    yaitu elemen a dengan referensi hyperlink pada atribut
    href
    ●
    Contoh:
    <a href="http://ipb.ac.id">IPB</a>
    ●
    Referensi hyperlink dapat juga berada pada halaman yang
    sama, caranya dengan memakai atribut id.
    ●
    Contoh:
    <h2 id="toc">Daftar Isi</h2>
    ...
    <p>Lihat <a href="#toc">daftar isi</a>.</p>
    K
    ut
    ip
    an
    ●
    Ku7pan inline menggunakan elemen q
    ●
    Contoh:
    <p>Steve Jobs once said, <q>One home run is
    much better than two doubles.</q></p>

    ●
    Ku7pan block menggunakan elemen blockquote
    ●
    Contoh:
    <blockquote>
    <p>Any intelligent fool can make things
    bigger and more complex</p>
    </blockquote>
    S
    it
    as
    i
    ●
    Menggunakan elemen cite untuk menunjukkan
    sumber ku7pan (nama orang atau judul buku).
    ●
    Contoh:
    <blockquote>
    <p>Any intelligent fool can make things
    bigger and more complex</p>
    <footer>— <cite>Albert Einstein</cite></footer>
    </blockquote>
    L
    i
    st
    ●
    Ordered, dengan urutan, menggunakan elemen ol
    ●
    Unordered, tanpa urutan, menggunakan elemen ul
    ●
    Tiap item, menggunakan elemen li
    ●
    Contoh:
    <ol>
    <li>iPad</li>
    <li>iPhone</li>
    <li>MacBook Air</li>
    </ol>
    L
    ai
    n-
    l
    ai
    n
    ●
    Lihat h-p://dev.w3.org/html5/spec-
    preview/usage-summary.html
    M
    ul
    ti
    med
    ia
    G
    amb
    ar
    ●
    Menggunakan elemen img dengan atribut src
    untuk mendeKnisikan sumber gambar dan
    atribut alt untuk menyediakan keterangan
    ●
    Contoh:
    <img src="laptop.jpg" alt="Laptopku" />
    A
    udi
    o
    ●
    Menggunakan elemen audio dengan atribut src
    untuk mendeKnisikan sumber audio dan atribut
    controls untuk menyediakan kontrol play/pause
    ●
    Format audio free yang didukung: Ogg Vorbis,
    Ogg Opus, WebM, dan WAV.
    ●
    Contoh:
    <audio src="file.ogg" controls="controls">
    </audio>
    V
    id
    eo
    ●
    Menggunakan elemen video dengan atribut src
    untuk mendeKnisikan sumber video dan atribut
    controls untuk menyediakan kontrol play/pause
    ●
    Format video free yang didukung: Ogg Theora
    dan WebM.
    ●
    Contoh:
    <video src="file.webm" controls="controls">
    </video>

    Anda mungkin juga menyukai