Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML Dan CSS Dasar

    Diunggah oleh

    Irpan Septiansyah
    8 tayangan5 halaman

    Judul Asli

    HTML dan CSS Dasar.docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, 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 DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    8 tayangan5 halaman

    HTML Dan CSS Dasar

    Diunggah oleh

    Irpan Septiansyah

    Hak Cipta:

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

    MAKALAH TENTANG SEPUTAR WEB

    MAKALAH INI DIBUAT UNTUK MEMENUHI TUGAS PELAJARAN WEB

    Dibuat oleh :

    AHMAD DEASTRI

    XII RPL 2
    HTML
    Sekarang kita akan langsung masuk dan mencoba membuat dokumen
    HTML sederhana, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi
    lebih jelas.
    Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat
    kembali perbedaan antara HTML

     HTML merupakan bahasa penanda yang digunakan untuk memberikan


    konten (teks) struktur dan makna semantik..

    Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan


    penanda lstinline{p} pada HTML. Memberikan penanda lstinline{p} pada konten
    dalam HTML berarti menandakan konten tersebut berada di dalam sebuah
    paragraf. Oke, setelah pikiran anda segar kembali dengan konsep HTML , mari
    kita lihat berbagai hal yang membuat dokumen HTML menjadi, emph{well},
    dokumen HTML.

    Elemen, &Tag,
    Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus
    diketahui ketika menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan
    atribut.

    Elemen
    Elemen HTML merupakan komponen yang menetapkan peran sebuah
    objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh
    dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-
    bagian sebelumnya. Elemen-elemen populer lain dalam HTML
    misalnya a, h1, div, span, em, ataupun strong.
    Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk
    membuat hyperlink ke halaman lain:

    <a>

    Tag
    Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka
    menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari
    sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit
    simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis
    miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk
    elemen a adalah </a>.
    Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:
    <a>Ini adalah sebuah link</a>

    Struktur Dokumen HTML


    ebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi.
    Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat pada
    kode di bawah:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>...</title>
    </head>
    <body>
    ...
    </body>
    </html>

    Apa arti dari struktur tersebut? Mari kita lihat satu per satu.
    Elemen DOCTYPE
    Digunakan untuk memberikan informasi kepada browser mengenai versi
    HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-
    html}, versi HTML yang digunakan adalah HTML5.
    Elemen HTML
    Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag
    pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag
    penutup adalah tanda akhir dokumen.
    Elemen head
    Elemen head pada dokumen digunakan untuk menguraikan berbagai meta
    data (informasi yang berkaitan dengan dokumen), judul dokumen, dan
    tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di
    dalam elemen head tidak akan nampak pada halaman web hasil tampilan
    browser.
    Elemen title
    Memberikan judul dokumen.
    Elemen body
    Elemen ini merupakan penampung dari isi konten dokumen yang akan
    ditampilkan kepada pengguna.
    Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-
    html.html yang berisi kode berikut:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Pengenalan HTML</title>
    </head>
    <body>
    <h1>Berita Utama</h1>
    <p>
    Elemen h1 digunakan untuk menandakan sebuah header dari teks
    (h1 == header 1). Konten teks ini sendiri berada di dalam
    sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
    Paragraf kedua.
    </p>
    </body>
    </html>

    Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali,
    ataupun melalui menu File -> Open... pada browser).
    Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan
    Gambar Pemetaan Kode pengenalan-html.html dengan Hasil
    Tampilan menunjukkan hasil tampilan dari kode pada pengenalan-html.html,
    beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan
    browser.
    Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil
    Tampilan dapat dilihat bahwa elemen title ditampilkan pada bagian atas browser,
    dan isi dari body ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa
    terdapat jarak spasi antara elemen p pertama dengan elemen p kedua, sebagai
    pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat
    dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak.
    Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar
    paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan.
    Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal
    ini dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki makna khusus,
    sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta
    memberi jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).

    Anda mungkin juga menyukai