Scribd Logo
Unggah

Selamat datang di Scribd!

  • Praktek 1-C030317107-M.YUSUF

    Diunggah oleh

    Maulidi Rahman
    1 tayangan21 halaman
    r3w3rw3rwrw3r

    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
    r3w3rw3rwrw3r

    Hak Cipta:

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

    Praktek 1-C030317107-M.YUSUF

    Diunggah oleh

    Maulidi Rahman
    r3w3rw3rwrw3r

    Hak Cipta:

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

    LAPORAN PRAKTIKUM DISAIN WEB

    PENGENALAN HTML

    Disusun Oleh :

    Nama : M. YUSUF

    NI M : C030317107

    Kelas / Semeter : TI-AXIOO / 4

    KEMENTRIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI


    POLITEKNIK NEGERI BANJARMASIN
    JURUSAN TEKNIK ELEKTRO
    PROGRAM STUDI TEKNIK INFORMATIKA 2019
    PRAKTIKUM 1

    1.1 JUDUL
    Pengenalan HTML

    1.2 TUJUAN
    Pada akhir perkuliahan ini mahasiswa akan dapat:
     Memahami dan mempraktekan tag-tag dasar Bahasa HTML
     Dapat membuat halaman web statis sederhana menggunakan perintah HTML

    1.3 DASAR TEORI


     HTML (HyperText Markup Language) adalah bahasa pemrograman standar
    yang digunakan untuk membuat sebuah halaman web, yang
    kemudian dapat diakses untuk menampilkan berbagai informasi di
    dalam sebuah penjelajah web Internet (Browser).
     Disebut HytperText karrena di dalamnya terdapat text yang memiliki fungsi lain,
    seperti menjadi link yang apabila di klik akan berpindah halaman.
     Disebut Markup Language karena menggunakan tanda(mark) contoh nya text
    yant terletak di antar tanda tertentu yang biasa di sebut tag.
    Kode-kode dasar HTML :
    a. <html>untuk memulai sebuah HTML
    b. </html>untuk menutup HTML yang harus di awali garis miring.
    c. <title>untuk judul pada Tab Browser.
    d. <head>untuk bagian header atau bagian atas.
    e. <body>untuk isi dalam HTML
    f. <h1>tag heading yang memiliki level 1-6.
    g. <b>untuk membuat huruf jadi tebal.
    h. <i>untuk membuat huruf jadi miring.
    i. <u>untuk membuat huruf jadi bergaris bawah,dll.

    1.4 LANGKAH PERCOBAAN


    1.4.1 Sintaks dasar dari bahasa html :
    Buat file dengan nama coba.html, untuk membuat file html harus memiliki
    ekstensi .html. Pada percobaan ini hanya menampilkan kata yang ditulis di dalam
    body, dan menampilkan nama Tab Browser sesuai yang tertulis di bagian tittle.
    1.4.2 Paragraf HTML

    Buat file dengan nama paragraf.html, pada percobaan ini menampilkan cara

    pembuatan paragraf secara sederhana yang menggunakan tag <p>.

    1.4.3 Line Break


    Buat file dengan nama Line_Break.html, pada percobaan ini akan
    menampilkan paragraf yang akan sercara otomatis menampilkan enter pada
    website apabila pada kalimat ditambahkan tag <br>
    1.4.4 Heading
    Buat file dengan nama Heading.html, pada percobaan ini membuat sebuah
    heading yang memiliki level karakter dengan tingkat ukuran yang berbeda-
    beda dari level 1-6 , yaitu menggunakan tag <h1>,<h2>,<h3>,<h4>,<h5>,<h6>.
    1.4.5 Horisontal Rules
    buat file dengan nama Horisontal_Rules.html, pada percobaan ini
    menggunakan tag <hr> yang berfungsi memberikan garis horisontal pada
    halaman web.

    1.4.6 Komentar dalam HTML


    Buat file dengan nama Comment.html, pada percobaan ini membuat kalimat yang ada
    pada coding tidak tampil pada website, dengan menambahkan tanda<!--bla bla -->
    1.4.7 Mewarnai Latar Belakang Halaman Web
    Buat file dengan nama Bground_color.html, pada percobban ini menggunakan tag
    bgcolor=”yellow ” pada bagian dalam tag body.

    1.4.8 Latar Belakang Halaman Web Berisi Gambar


    buat file dengan nama Bground_image.html, pada percobaan ini menggunakan
    gambar pada file pada folder, dengan menggunakan tag background=” file-gambar“
    1.4.9 Pemformatan Teks
    Buat file dengan nama Text_formating.html, pada percobaan ini bertujuan untuk
    mengubah jenis tulisan dengan format
    <strong>,<big>,<em>,<i>,<small>,<sub>,<sup>, engan hasil seperti pada gambar
    dibawah ini.
    1.4.10 Format teks yang ditampilkan apa adanya (Preformatted Text)

    Buat file dengan nama Preformatted_text.html, pada percobaan ini menggunakan


    tag <pre> untuk menampilkan spasi dan line break apa adanya.
    1.4.11 Tanda Kutip (quotation)
    Buat file dengan nama Quotation.html, pada percobaan ini menggunakan
    tag<blockquote> yang mnyisipkan line breaks dan margins.

    1.4.12 Unordered List (UL)

    Buat file dengan nama Unordered_list.html, pada perecobaan ini menggunkan tag
    <ul> untuk list yang diurut menggunakan symbol bulat/kotak, dan <li>list yang
    akan ditulis.
    1.4.13 Ordered List (OL)

    Buat file dengan nama Oredered_list.html, pada percobaan ini menggunakan tag
    <ol> untuk list yang menggunakan karakter huruf/angka .

    1.4.14 Ragam tag ordered list

    Salah satu contoh lain menggunakan tag <ol>


    1.4.15 Ragam tag unordered list

    Salah satu contoh lain menggunkan tag <ul>

    1.4.16 List Bertingkat (Nested List)

    Buat file dengan nama Nested_list.html, pada percobaan ini bertujuan untuk
    menggunkan list bertingkat.
    1.4.17 Definition List (DL)

    Buat file dengan nama Definition_list.html, pada percobaan ini menggunkan tag
    <dl> yang didalamnya menggunakan tag <dt>untuk kata yang ingin didefinisika, dan
    tag <dd> untuk definisi kata tersebut.

    1.4.18 Hyperlink lewat teks

    File : Hyperlink.html, pada percobaan ini menggunkan tag < a href=””> yang
    bertujuan untuk menghubungkan halaman html yang lain.
    1.4.19 Hyperlink lewat gambar

    File : Hyperlink_image.html, pada percobaan ini menggunakan hyperlink dengan


    gambar, jadi gambar yang di klik akan mengarahkan ke halaman html yang di tuju

    1.4.20 Hyperlink dengan membuka window baru

    File : Hyperlink_window.html, pada percobaan ini bertujuan apabila link yang di klik
    akan menuju halaman html yang di tuju, sekaligus membuka halaman tab baru.
    1.4.21 Hyperlink dengan melompat ke bagian lain dalam satu halaman web

    File : Hyperlink_self.html, contoh lain menggunkan hyperlink dengan kombinasi tag


    heading.

    1.4.22 Tabel

    File : tabel.html, pada percobaan ini


    membuat tabel dengan menggunakan tag
    <tr> untuk function tabel , dan <td> untuk
    list yang akan dibuat dalam tabel.
    1.4.23 Menggabung kolom tabel

    File : tabelcol.html, contoh lain menggunakan table dengan menggabungka kolom


    tabel

    1.4.24 Menggabung kolom dan baris pada tabel

    File : tabelrowcol.html, pada percobaan ini


    menggabungkan kolom dan baris pada table.
    1.4.25 FORM

    File : form.html, pada percobaan ini membuat form tampilan dengan menggunkan
    tag <form> dan <input type=””> untuk type form yang dibuat.
    1.5 DATA

    Pada praktikum kali ini didapat macam data yang dapat di analisa seperti:

     <tittle> judul dari tab pada website


     <body> isi dari bagian website
     <p>paragraph
     <br>line break
     <h1>-<h6> heading
     <hr> horizontal rules
     <!-- .. commment
     <body bgcolor=””>mewarnai background
     <body background=””>menambah gambar pada background
     <b>bold
     <strong>teks dipertajam
     <big>teks diperbesar>
     <em>teks ditekan
     <i> tekds dimiringkan
     <small>teks diperkecil
     <sub>subscript tekd kecil dibawah
     <sup>superscript teks kecil diatas
     <pre>preformatted(teks ditampilka apa adanya)
     <blockquote>cocok untuk quote Panjang
     <q>cocok untuk quote pendek
     <ul>unordered list
     <ol>ordered list
     <li>tag untuk isi list
     <dl>definition list
     <dt>judul dari list yang ingin dideskripsi
     <dd>deskripsi dari list
     <a href=””>membuat hyperlink
     <a href=””><img border=”0” src=” “>membuat hyperlink gambar
     <a href=””><img border=”0” src=””>membuat hyperlink membuka window baru
     <a href=”#asdf”><a name=”asdf”>hyperlink menuju target dalam satu halaman
     <table border=”1”>membuat table
     <th>kolom dari table
     <td>baris dari table
     <form>diunakan untuk membuat form
     <input type=”” name=””>type form(text,password,radio,mulitext,dll)
    1.6 ANALISA DATA

    (Ada pada bagian atas)


    1.7 KESIMPULAN

    Pada praktikum kali ini, kami mempelajari tentang dasar-dasar dari Bahasa
    HTML(HyperText Markup Language), salah satunya adalah tag-tag sederhana seperti
    <head>, <body>, <tittle> , dll . Yang digunakan untuk membuat sebuah web statis
    dengan perintah HTML.
    1.8 SOAL

    TUGAS 1
    Coding :

    Hasil :
    TUGAS 2
    Coding :
    Hasil:

    Anda mungkin juga menyukai