Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 2

    Diunggah oleh

    dellya manafe
    5 tayangan20 halaman

    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
    5 tayangan20 halaman

    Modul 2

    Diunggah oleh

    dellya manafe

    Hak Cipta:

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

    Modul 2

    Dasar Pemrograman Web

    Pengenalan HTML

    Gloria Ch Manulangga
    Deskripsi Singkat
    Deskripsi Singkat mengenai Topik
    Materi ini berisi penjelasan mengenai pengenalan dasar HTML.

    Tujuan Pembelajaran
    1. Mahasiswa mengetahui stuktur dasar HTML
    2. Mahasiswa memahami penggunaan tag-tag HTML
    3. Mahasiswa mampu menjalankan baris perintah HTML

    Alat yang digunakan


    4. Browser (Chrome, Mozzilla, dll)
    5. Editor (Sublime Text, Notepad++, dll)

    Materi Yang akan disampaikan:


    6. Pengenalan HTML
    7. Struktur Dasar HTML
    8. Pengaturan warna dan teks
    9. Heading
    10.List
    Pengenalan HTML

    HTML (Hypertext Markup Language ) merupakan salah satu format yang di gunakan
    dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web.

    Untuk membuat dokumen HTML dibutuhkan sebuah aplikasi teks editor dan sebuah
    browser .
    Struktur Dasar HTML
    <html> Tag Pembuka
    <head>
    <title> Judul </title>
    </head>
    <body>
    “ Isi dari halaman Web”
    </body>
    </html> Tag Penutup

    Ket:
    <html>..</html> Dalam penulisan dokumen html harus di awali dengan tag pembuka
    dan diakhiri dengan tag penutup.

    <title>..</title> title atau judul halaman/form. Kalimat yang terletak pad tag ini akan
    muncul pada bagian browser (title bar)

    <body>..</body> tag ini digunakan untuk menampilkan isi dari halaman web.
    Tag dalam HTML

    <B> untuk huruf tebal


    <U> untuk garis bawah
    <I> untuk huruf miring
    <P> Untuk paragraf baru atau untuk pindah alinea.
    <br> untuk baris baru
    <font> untuk mengatur ukuran font, warna font dan jenis font.
    <hr> garis horizontal
    <background> untuk mengatur latar belakang dengan gambar
    <bgcolor> untuk mengatur warna latar belakang
    <align> untuk menempatkan posisi tulisan. (kanan, kiri, tengah)
    <html>

    Contoh
    <head>
    <title> Belajar Web </title>
    </head>
    <body>
    <b> Belajar Web </b>
    </body>
    </html>
    Latihan

    1. Gunakan tag html untuk menampilkan


    kalimat di bawah ini :
    Belajar Web

    2. Gunakan tag html untuk menampilkan


    kalimat di bawah ini :
    Belajar Web
    Pengaturan Halaman Web dan Teks

    <html>
    <head>
    <title> Belajar Web </title>
    </head>
    <body>
    <font size=5 color= blue face=arial> Saya senang belajar Web </font>
    </body>
    </html>
    <html>
    <head>
    <title> Belajar Web </title>
    </head>
    <body bgcolor=lightgreen>
    <font size=5 color= blue face=arial> <center> Saya senang belajar Web </
    center> </font>
    <hr width=275 size=4 align= center>
    </body>
    </html>
    Heading

    Digunakan untuk mengatur ukuran huruf


    pada header. Heading mempunyai nilai
    dari 1-6 atau antara <H1> sampai <H6>.
    Dengan<H1>ukuran terbesar dan <H6>
    ukuran terkecil.
    <html>
    <head>
    <title> Heading </title>
    </head>
    <body >
    <h1> Belajar Web </h1>
    <h2> Belajar Web </h2>
    <h3> Belajar Web </h3>
    <h4> Belajar Web </h4>
    <h5> Belajar Web </h5>
    <h6> Belajar Web </h6>
    </body>
    </html>
    Lists
    Lists merupakan kumpulan teks yang disusun
    sedemikian rupa sehingga ite-item yang ada memiliki
    nomor urut, tanda-tanda atau symbol.

    Terdapat tiga tipe List yaitu :


    1. Ordered List <OL> digunakan untuk membuat daftar
    item bernomor, bisa dalam angka arab atau romawi.
    didalam ordered list terdapat tag <li> list entries.
    Atribut pada ordered list adalah type.
    Untuk atribut type, dapat menggunakan :
    1- default number untuk 1,2,3 dstnya.
    A- Huruf besar A,B,C dstnya.
    a- Huruf kecil a,b,c dstnya.
    I- Romawi huruf besar I,II,III dstnya.
    i- Romawi huruf kecil i,ii,iii dstnya.
    <html>
    <head>
    <title> Heading </title>
    </head>
    <body >
    <font size=4 face=arial> <center> <b> Biodata Saya : </b> </center>
    <hr size=3 width=125>
    <ol type=1>
    <li> Nama : </li>
    <li> Tempat Tanggal Lahir : </li>
    <li> Hobby : </li>
    </ol>
    </body>
    </html>
    2.Unordered List <UL> digunakan untuk
    membuat daftar item dengan tanda
    bullet (tidak bernomor). Atribut type yang
    digunakan berupa circle, square dan disk.
    <html>
    <head>
    <title> Heading </title>
    </head>
    <body >
    <font size=4 face=arial> <center> <b> Hobby Saya : </b> </center>
    <hr size=3 width=125>
    <ul type=circle>
    <li> Jalan-jalan </li>
    </ul>

    <ul type=square>
    <li> Jalan-jalan </li>
    </ul>
    <ul type=disc>
    <li> Jalan-jalan </li>
    </ul>

    </body>
    </html>
    3. Definition Lists <DL> digunakan untuk
    menjelaskan istilah. Di dalam definition
    list terdapat tag <DT>definiton term dan
    tag <DD> definition data.
    definition Term untuk menjelaskan istilah
    sedangkan definition data un-
    tuk
    menjabarkan istilah.
    <html>
    <head>
    <title> Heading </title>
    </head>
    <body >
    <font size=4 face=arial> <center> <b> Istilah </b> </center>
    <hr size=3 width=125>
    <DL>
    <DT> HTML
    <DD> Hypertext Markup Language
    <DT> HTTP
    <DD> Hypertext Transfer Protocol
    </DL>

    </body>
    </html>
    Latihan 1
    Rumah Makan

    1. Menu Makanan
    • Nasi Goreng
    • Ayam Bakar
    • Sate
    2. Menu Minuman
    o Es Teh
    o Es Jeruk
    o Es Campur
    Latihan 2

    Tipe-tipe Tulisan Sandi :


    1. Sandi Koordinat
    2. Sandi Angka
    3. Sandi Morse
    sandi rumput
     sandi bangun
     sandi kimia
    4. Sandi Semaphore
    5. Sandi Jam

    Anda mungkin juga menyukai