Scribd Logo
Unggah

Selamat datang di Scribd!

  • Workshop Desain Web 1

    Diunggah oleh

    Bama Rohman
    39 tayangan11 halaman

    Judul Asli

    Workshop desain web 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

    Hak Cipta:

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

    Workshop Desain Web 1

    Diunggah oleh

    Bama Rohman

    Hak Cipta:

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

    TUGAS DESAIN WEB

    Oleh :
    Nama : Bagas Maulana Rohman
    NRP : 3120510609
    Prodi : D3 PJJ Teknik Informatika
    Tahun : 2020/2021

    POLITEKNIK ELEKTRONIKA SURABAYA


    Jl. Raya ITS, Keputih, kec. Sukolilo Kota Surabaya
    Tahun Ajaran 2020/2021
    1. HTML Heading
    a. Course Code :
    <html>

    <body>
    <h1> this is heading 1 </h1>
    <h2> heading 2 is smaller </h2>
    <h3> heading 3 is smaller still </h3>
    </body>

    </html>
    b. Tampilan

    Heading ini digunakan diawalan atau sebagai text bold, biasa digunakan
    untuk judul, langkah – langkah, dll.
    2. HTML Link
    a. Course Code :
    <html>
    <body>

    <p> jika ingin mempelajari banyak tentang Desain Web, berikut


    <a href="http://www.w3school.com"> linknya.</a>
    </p>

    </body>
    </html>
    b. Tampilan :

    Html image ini digunakan untuk memberi jalan pintas menuju halaman
    atau website yg ingin dituju, biasa digunakan diakhir kata – kata untuk
    memberi akses kesuatu link.

    3. HTML Images
    a. Course Code :
    <html>
    <body>

    <img src="LogoPens.png" widht="150px" height="150px" />

    </body>
    </html>
    b. Tampilan :

    Html Image digunakan untuk menampilkan gambar atau foto pada web.
    4. HTML Headings
    a. Course Code :
    <html>
    <body>

    <vr />
    <hr />
    <h1> this is HEADING 1 </h1>
    <h2> this is HEADING 2 </h2>
    <h3> this is HEADING 3 </h3>
    <h4> this is HEADING 4 </h4>
    <h5> this is HEADING 5 </h5>
    <h6> this is HEADING 6 </h6>
    <hr />
    <vr />

    </body>
    </html>
    b. Tampilan :

    Macam macam jenis heading dalam berbagai ukuran. Biasa digunakan


    sebagai judul, daftar isi, sub bab, dll.
    5. HTML Rules (Lines)
    a. Course Code :
    <html>
    <body>

    <p> the hr tag defines a horinzontal rule:</p>


    <hr />
    <p> this is a paragraph </p>
    <hr />
    <p> this is a paragraph </p>
    <hr />
    <p> this is a paragraph </p>
    <hr />
    </body>
    </html>
    b. Tampilan :

    Memberikan tampilan garis horizontal pada html. Bisa di posisikan diatas


    atau bawah teks/gambar/lainnya.
    6. HTML Comments
    a. Course Code :
    <html>
    <body>

    <!--This comment will not be displayed-->


    <p> This is a paragraph </p>

    </body>
    </html>
    b. Tampilan :

    Html comment ini membuat teks yang dibawa lebih mudah untuk
    dipahami, namun pada browser, Code ini diabaikan dan tidak
    ditampilkan.
    7. HTML Line Breaks
    a. Course Code :
    <html>
    <body>

    <p>This is a <br />para-<br />graph <br />with line breaks.</p>

    </body>
    </html>
    b. Tampilan :

    Html Line Breaks ini digunakan untuk memindahkan posisi tulisan agar
    tidak terlalu panjang. Biasa untuk kata – kata yang terlalu mepet pada
    tampilan website.
    8. Text Formatting
    a. Course Code :
    <html>
    <body>

    <p><b>this text is bold</b></p>


    <p><strong>this text is strong</strong></p>
    <p><big>this text is big</big></p>
    <p><em>this text is emphasized</em></p>
    <p><i>this text is italic</i></p>
    <p><small>this text is small</small></p>
    <p>this is<sub> subscript</sub> and <sup>superscript</sup></p>

    </body>
    </html>
    b. Tampilan :

    Code ini digunakan untuk mengatur bentuk teks yang ingin digunakan,
    seperti yang paling sering digunakan yakni Bold,Italic, dll.
    9. Preformatted Text
    a. Course Code :
    <html>
    <body>

    <pre>
    this is
    preformatted text
    it preservers both spaces
    and like breaks and shows the text in a monoscape font.
    </pre>

    <p> the pre tag is good for displaying computer code: </p>
    <pre>
    for i = 1 to 10
    print i
    next i
    </pre>

    </body>
    </html>
    b. Tampilan :

    Preformattted Text ini digunakan untuk mempertahankan spasi dan jeda


    baris. Preformatted Text ini juga menampilkan text yang menggunakan
    jenis font Monoscope.
    10. HTML Styles
    a. Course Code :
    <html>
    <body style="background-color:Gray;">

    <h1>Look! Styles and colors</h1>

    <p style="font-family:verdana;color:red"> This text


    is in verdana and red color</p>
    <p style="font-family:times new roman;color:green">
    This text is times new roman and green colors</p>

    <p style="font-size:30px">This text is 30 pixels high</p>

    </body>
    </html>
    b. Tampilan :

    HTML Style ini digunakan saat ingin menambahkan background,


    mengganti font dan ukuran text, warna text.
    11. Common HTML styles (Background)
    a. Course Code :
    <html>
    <body style="background-color:blue">

    <h2> Look: Colored background!</h2>

    </body>
    </html>

    b. Tampilan :

    Ini tampilan pada html yang dapat mengganti background menggunakan


    warna sesuka hati.
    12. Common HTML styles (Font family, Color and size)
    a. Course Code :
    <html>
    <body>

    <h1 style="font-family:verdana"> A heading</h1>


    <p style="font-family:courier new; color:red; font-size:20px">
    A paragrahph</p>

    </body>
    </html>

    b. Tampilan :

    Code ini digunakan untuk mengatur jenis font, ukuran dan warna pada
    text didalam website.
    13. Common HTML styles (Text Alignment)
    a. Course Code :
    <html>
    <body>

    <h1 style="text-align:center"> this is Heading 1</p>

    <p>the heading above is aligned to the center of this page


    the heading above is aligned to the center of this page
    the heading above is aligned to the center of this page
    the heading above is aligned to the center of this page
    the heading above is aligned to the center of this page</p>

    </body>
    </html>
    b. Tampilan :

    HTML Text Alignment ini untuk mengatur posisi text/paragraf seperti


    posisi tengah (Center), Kiri (left), Kanan (Right) atau Rata Kanan-Kiri (
    Justify.

    Anda mungkin juga menyukai