Scribd Logo
Unggah

Selamat datang di Scribd!

  • Laporan Praktikum Desain Pemrograman Web - Modul 1

    Diunggah oleh

    tolkhah arrasyi
    88 tayangan10 halaman
    Laporan praktikum ini membahas tentang pembuatan desain dan pemrograman web menggunakan HTML5 dan CSS. Mahasiswa mempelajari cara menginstalasi Visual Studio Code, struktur dasar HTML, dan mengimplementasikan berbagai komponen web seperti teks, tabel, gambar, dan form. Mahasiswa juga membuat beberapa halaman web sederhana untuk mempraktekkan pengetahuan yang diperoleh.

    Deskripsi Asli:

    Judul Asli

    Laporan Praktikum Desain Pemrograman Web_Modul 1

    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
    Laporan praktikum ini membahas tentang pembuatan desain dan pemrograman web menggunakan HTML5 dan CSS. Mahasiswa mempelajari cara menginstalasi Visual Studio Code, struktur dasar HTML, dan mengimplementasikan berbagai komponen web seperti teks, tabel, gambar, dan form. Mahasiswa juga membuat beberapa halaman web sederhana untuk mempraktekkan pengetahuan yang diperoleh.

    Hak Cipta:

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

    Laporan Praktikum Desain Pemrograman Web - Modul 1

    Diunggah oleh

    tolkhah arrasyi
    Laporan praktikum ini membahas tentang pembuatan desain dan pemrograman web menggunakan HTML5 dan CSS. Mahasiswa mempelajari cara menginstalasi Visual Studio Code, struktur dasar HTML, dan mengimplementasikan berbagai komponen web seperti teks, tabel, gambar, dan form. Mahasiswa juga membuat beberapa halaman web sederhana untuk mempraktekkan pengetahuan yang diperoleh.

    Hak Cipta:

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

    LAPORAN PRAKTIKUM

    DESAIN DAN PEMROGRAMAN WEB

    Disusun oleh:

    Tolkhah Muzaqqi Arrasyi (21103070)

    SISTEM INFORMASI
    FAKULTAS INFORMATIKA
    INSTITUT TEKNOLOGI TELKOM PURWOKERTO
    BANYUMAS, JAWA TENGAH
    2022
    A. Deskripsi
    Pada mata kuliah ini kami mempelajari bagaimana cara membuat sebuah desing web
    menggunakan HTML 5 dan juga css, dan di sini lah kami mempraktekanya,
    mengimplementasikan apa yang telah kami dapatkn di kelas materi kami
    mempraktekan kegunaan dari html5 dan css begitu juga mengetahui fungsi-fungsi dari
    html 5 dan css, dan pada kesempatan kelas praktikum adalah sebuah sarana mahasiswa
    untuk berkesempata untuk mengimplementasikan teori atau pembuktian ilmiah atau
    pembuktian yang telah di berikan pada saat materi tujuan dari adanya kelas materi ini
    untuk mencapai sebuah pencapaian pembelajaran yang telah di berikan.
    Adapaun yang di pelajari pada matakuliah ini adalah bagaimana cara menginstalasi
    Visual Studio Code atau VS Code kemudian Struktur HTML yang terdiri dari Block
    level <H> kemudian Paragraf <P> kemudian List Item <ul li> dan list Continued <ol
    li> kemudian horizontal rule yaitu <hr> kemudian link penempatan link untuk halaman
    berikutnya kemudian Table pengimplementasian table pada web kemudian Image,
    Audio, dan juga video kemudian Form text box, radio button, checkbox, combo box,
    text area, button

    Berikut adalah sebuah susunan dari komponen yang di butuhkan :


    1. Visual Studio Code
    Visual Studio Code merupakan salah satu perangkat lunak penyunting kode/
    text editor yang sering digunakan oleh pengembang aplikasi. Software yang
    dikembangkan oleh Microsoft ini dapat digunakan di berbagai sistem operasi
    seperti Windows, MacOs, dan Linux. Selain itu Visual Studio Code memiliki
    fitur yang lengkap dan memiliki tampilan yang sederhana.
    2. Struktur HTML
    Struktur HTML merupakan pondasi dari HTML. HTML kependekan dari Hyper
    Text Markup Language. Dokumen HTML adalah file teks murni yang dapat
    dibuat dengan berbagai macam text editor. Dokumen ini dikenal sebagai web
    page. File-file HTML ini berisi instruksi-instruksi yang kemudian
    diterjemahkan oleh browser yang ada di komputer client (user) sehingga isi
    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi
    formasinya dapat ditampilkan secara visual di komputer pengguna (user). Text
    editor yang digunakan di dalam praktikum ini ialah Visual Studio Code
    (VSCode).

    B. Langkah-Langkah Praktikum:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB</title>
    </head>
    <body>

    </body>
    </html>
    Codingan Langkah 1 latihan1.html

    Pembahasan : Membuat struktur file HTML dengan nama Latihan1.Html

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB</title>
    </head>
    <body>
    <h1>Bobi</h1>
    saya sengat senang dengan coding<br> karenan coding itu indah
    <p>
    Laptop ram 21 dengan harga 1 jt
    </p>
    <ul>
    <li>kucing</li>
    <li>ayam</li>
    </ul>
    <ol star="1" type="1">
    <li>Khuldi</li>
    <li>durian</li>
    </ol>
    <a href="halaman2.html">halaman2</a>

    </footer>
    </body>
    </html>
    Coding Langkah2 Membuat Halaman1.html

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi


    Pembahasana : Berikut adalah ss dari Langkah ke 2 disini membuat sebuah halaman1
    dari web kemudian pada halaman tersebut tercantum sebuah link untuk ke halaman ke
    2
    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>halaman2</title>

    <table border="2" width="50%">

    <tr>
    <td colspan="3" align="center" bgcolor="bluesky"> Nama Institut</td>
    </tr>
    <tr>
    <td rowspan="4">Nama Kota Institut</td>
    </tr>
    <tr>
    <td>Banyumas</td>
    <td>tegal</td>
    </tr>
    <tr>
    <td>Purwokerto</td>
    <td>Banyumas</td>
    </tr>
    <tr>
    <td colspan="3" align="center" bgcolor="yellow">Institut Teknologo Telkom
    Purwokerto</td>
    </tr>
    <img
    src="https://mediacdn.quipper.com/media/W1siZiIsIjIwMjAvMTIvMDIvMDYvMjk
    vMzUvZDRkNmU4NTMtMjA0ZC00NDgwLWI2MzItZTFhMzIwOGVhMTAzLyJd
    LFsicCIsInRodW1iIiwiNDE0eDE2MCIse31dLFsicCIsImNvbnZlcnQiLCItY29sb3Jz
    cGFjZSBzUkdCIC1zdHJpcCIseyJmb3JtYXQiOiJqcGcifV1d.jpg?sha=4882c288f2d4
    a135" height="200" widht="200">
    </table>
    </head>
    <body>
    <a href="halaman3.html">halaman3</a>

    </body>
    </html>
    Coding Langkah3 Membuat Halaman 2 table dan memasukan gambar
    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi
    Pembahasan : Berikut adalah ss dari scrip halaman2 pada web disini diisi dengan
    pembuatan table yang berisi data dan juga pencantuman link untuk gambar

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <from>
    <table align="cneter" border="a">
    <tr><th colspan="3" align="center" height="100"> Silahkan Input Nama
    </th></tr>
    <tr>
    <td>Nama</td>
    <td>:</td>
    <td><input type="text"></td>
    </tr>
    <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>
    <input type="radio" name="jenis"> cowo
    <input type="radio" name="jenis"> cewe
    </td>
    </tr>
    <tr>
    <td>Hobi</td>
    <td>:</td>
    <td>
    <input type="checkbox">Lari dari Kenyataan
    <input type="checkbox">Lari dari hidup
    </td>
    </tr>
    <tr>
    <td>Jurusan</td>
    <td>:</td>
    <td><select>
    <option>SI</option>
    <option>TI</option>
    <option>DKV</option>
    <option>SE</option>
    </select>
    </td>

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi


    </tr>
    <tr>
    <td>Alamat</td>
    <td>:</td>
    <td><input type="text"></td>
    </tr>
    <tr>
    <td colspan="3" align="center">
    <input type="submit" name="simpan" value="simpan">
    </td>
    </tr>

    </table>
    </from>
    </body>
    </html>
    Coding Langkah 4 Membuat laman pengisian form

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi


    Pembahasana : Berikut ada hasil ss dari halaman3 pada web yang dibuat pada halaman
    ini dibuatkan sebuah laman untuk pengisin form untuk user

    DPW-21103070-S1SI05C-Tolkhah Muzaqqi Arrasyi

    Anda mungkin juga menyukai