Scribd Logo
Unggah

Selamat datang di Scribd!

  • Komputer Dan Pemrograman - Pertemuan 12 - HTML

    Diunggah oleh

    Hara Tiara Pakpahan
    15 tayangan35 halaman

    Judul Asli

    Komputer dan Pemrograman - Pertemuan 12 - HTML.pptx

    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

    Hak Cipta:

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

    Komputer Dan Pemrograman - Pertemuan 12 - HTML

    Diunggah oleh

    Hara Tiara Pakpahan

    Hak Cipta:

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

    Komputer dan Pemrograman

    (MKU-106)

    Pertemuan 12 – HTML
    HTML

    • HTML adalah singkatan dari Hypertext Markup Language.


    • Disebut hypertext karena di dalam HTML sebuah text biasa dapat
    berfungsi lain, kita dapat membuatnya menjadi link yang dapat
    berpindah dari satu halaman ke halaman lainnya hanya dengan meng-
    klik text tersebut.
    • Kemampuan text inilah yang dinamakan hypertext, walaupun pada
    implementasinya nanti tidak hanya text yang dapat dijadikan link.
    HTML

    • Disebut Markup Language karena bahasa HTML menggunakan tanda


    (mark), untuk menandai bagian-bagian dari text.
    • Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal,
    dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di
    kenal sebagai HTML tag.
    • HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena
    dalam membuat web, jika hanya menggunakan HTML tampilan web
    terasa hambar. Terdapat banyak bahasa pemrograman web yang
    ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP.
    Tag HTML

    • Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk


    memberi tahu web browser untuk apa fungsi sebuah text.
    • Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link?
    Dalam HTML, tanda ini dikenal dengan istilah tag.
    • Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag
    pembuka dan tag penutup, dimana objek yang dikenai perintah tag
    berada di antara tag pembuka dan tag penutup ini.
    • Objek disini dapat berupa text, gambar, maupun video. Penulisan tag
    berada di antara dua kurung siku: “<” dan “>”.
    Tag HTML

    • Berikut adalah format dasar penulisan tag HTML:


    • <tag_pembuka> objek yang dikenai perintah tag </tag_penutup>
    • Sebagai contoh, perhatikan kode HTML berikut :
    • <p> Ini adalah sebuah paragraf </p>
    • <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
    • </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka
    terletak dari tanda backslash(/)
    Tag HTML

    • <html> adalah tag pembuka dari keseluruhan halaman web. Semua kode
    HTML akan berada di dalam tag ini. Tag html dimulai dengan <html> dan
    diakhiri dengan </html>.
    • Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman,
    seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di
    browser.
    • Tag <title> dalam contoh kita digunakan untuk menampilkan title dari
    sebuah halaman web, dan biasanya ditampilkan pada bagian paling atas
    web browser.
    Tag HTML

    • Tag <body> akan berisi semua elemen yang akan tampil dalam halaman
    web, seperti paragraf, tabel, link, gambar, dll.
    • Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam
    merancang web adalah di dalam tag <body> ini.
    • Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk
    <html> yang merupakan tag paling awal dari sebuah halaman web.
    Menjalankan HTML

    • Buat sebuah folder pada drive D: atau selain drive C:, beri nama sesuai
    dengan nama anda.
    • Jalankan atau buka aplikasi notepad atau notepad++.
    • Ketik biodata anda.
    • Lalu save as dengan nama file biodata dengan memilih file type hyper
    text markup language file.
    • Kemudian klik kanan pada file tersebut, buka dengan salah satu web
    browser.
    Membuat File HTML

    Silahkan buka text editor (Notepad++/Sublimetext), lalu ketikkan kode berikut


    ini:
    <!DOCTYPE html>
      <html>
      <head>
        <title>Title dari Websiteku</title>
      </head>
    <body>
       <p>Selamat Pagi Dunia, Hello World!</p>
    </body>
    </html>
    Simpan dan jalankan dengan cara file pertama tadi.
    Membuat File HTML
    Membuat Paragraf dengan HTML

    <!DOCTYPE html>
    <html>
    <head>
      <title>Title dari Websiteku</title>
    </head>
    <body>
      Ini adalah paragraf pertama
      Ini adalah paragraf kedua
    </body>
    </html>
    Membuat Paragraf dengan HTML
    Membuat Paragraf dengan HTML

    • Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada
    satu baris yang sama. Dalam HTML, spasi akan diabaikan.
    • HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai
    berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.
    <!DOCTYPE html>
    <html>
    <head>
      <title>title dari websiteku</title>
    </head>
    <body>
      <p>ini adalah paragraf pertama</p>
      <p>ini adalah paragraf kedua</p>
    </body>
    </html>
    Membuat Paragraf dengan HTML
    Membuat Paragraf dengan HTML

    Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan


    tag <br> (br singkatan dari break).

    <!DOCTYPE html>
    <html>
    <head>
      <title>title dari websiteku</title>
    </head>
    <body>
      ini adalah paragraf pertama
      <br />
      ini adalah paragraf kedua
    </body>
    </html>
    Tag untuk Bold dan Italic

    • Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan


    pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan
    menebalkan kata, atau dengan garis miring.
    • Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan
    <strong> untuk strong emphasis.
    • Pada umumnya web browser akan menampilkan <em> sebagai garis
    miring, dan <strong> dengan penebalan huruf.
    Tag untuk Bold dan Italic

    <!DOCTYPE html>
    <html>
    <head>
      <title>title dari websiteku</title>
    </head>
    <body>
      <p>ini adalah kalimat <em> pertama </em>,
      sedangkan ini adalah kalimat <strong> kedua </strong></p>
    </body>
    </html>
    Tag untuk Bold dan Italic
    Latihan 1
    Latihan 2
    Latihan 3
    Membuat Judul

    • HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML
    lebih di kenal dengan istilah: heading. 
    • Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan
    untuk judul dari paragraf, atau bagian dari text yang merupakan judul.
    • Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>,
    <h3>, <h4>, <h5>, dan <h6>. 
    • Tag heading secara default akan ditampilkan oleh web browser dengan
    huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag
    header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.
    Membuat Judul
    Membuat Judul
    Membuat List

    • Langkah berikutnya adalah cara membuat daftar/list di HTML. Untuk


    menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag
    <ol>, <ul> dan <li>.
    • Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan
    unordered list (tidak berurutan). Ordered list akan ditampilkan dengan
    angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
    • Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag
    <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini
    akan lebih mudah jika menggunakan contoh.
    Membuat List
    Membuat List
    Membuat List

    • Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
    Membuat List
    Membuat Link

    • Link adalah tujuan kata Hypertext dari kepanjangan HTML.


    • Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang
    ketika di-klik akan pindah ke halaman lainnya. 
    • HTML menggunakan tag <a>untuk keperluan ini.
    • Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar).
    Setiap tag <a> setidaknya memiliki sebuah atribut href. 
    • Dimana href berisi alamat yang dituju (href adalah singkatan dari
    hypertext reference).
    Membuat Link
    Membuat Link
    Atribut tag <a>: target

    • Atribut penting lainnya dari tag <a> adalah target. 


    • Atribut ini digunakan untuk menentukan apakah link yang dituju terbuka
    di jendela browser saat ini, atau terbuka di jendela baru.
    • Secara default, setiap link yang kita tulis akan terbuka pada jendela yang
    sama (menimpa halaman web saat ini). 
    • Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan
    atribut target=”_blank”.
    Atribut tag <a>: target
    Terima Kasih

    Anda mungkin juga menyukai