Scribd Logo
Upload

Welcome to Scribd!

  • Modul HTML

    Uploaded by

    AzhariChaniago
    8 views18 pages
    Modul HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Modul HTML

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views18 pages

    Modul HTML

    Uploaded by

    AzhariChaniago
    Modul HTML

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    qwertyuiopasdfghjklzxcvbnmqwerty uiopasdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdfghjklz Modul HTML xcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwert

    Jurusan Akuntansi FEB Unpad

    Praktikum Sistem Informasi

    yuiopasdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmqwertyuiopasdfghjkl
    Tim Asisten Sistem Informasi

    zxcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwert yuiopasdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnmqwert yuiopasdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmrtyuiopasdfghjklzxc

    HYPER TEXT MARKUP LANGUAGE

    HTML sendiri adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah website pada Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

    Bentuk pemakaian HTML dalam kehidupan sehari-hari

    Web Server

    HTML

    Web Browser

    User

    Tampilan Web

    Misalkan kita membuka www.facebook.com, web server akan memproses permintaan kita dan mengirimkan data yang telah diformat dalam bentuk HTML untuk dibaca oleh browser kita, kemudian browser kita akan menampilkan web sesuai dengan bentuk HTML yang diberikan oleh web server.

    Contoh tampilan yang kita dapatkan ketika membuka website

    Gambar diatas merupakan hasil olahan web browser dari HTML yang dikirimkan oleh webserver kepada web browser kita, berikut adalah bentuk sebenarnya dari gambar diatas:

    Untuk mengaksesnya kita dapat klik kanan pada halaman kemudian pilih lihat kode sumber halaman atau melalui Tools->Web Developer->Page Source(Pada Firefox).

    EDITOR & PRAKTEK HTML

    Untuk membentuk suatu dokumen html,css,php diperlukan editor text sederhana seperti notepad atau notepad++.
    Notepad:

    Notepad ++

    Perbedaan dari 2 editor diatas adalah notepad++ membantu kita dalam penulisan tags dengan memberikan warna kepada tag yang benar.

    Untuk menjadikan suatu dokumen yang kita simpan menjadi html, kita tinggal memberikan extensi .html untuk dokumen tersebut, misal: tes.html

    Apabila mau melihat hasil tampilan dari dokumen tersebut kita tinggal membuka dokumen tersebut di browser favorit kita.

    HTML TAGS

    Sebagai bahasa markup(ditanda), HTML berbasis tags yang biasanya membungkus tulisan-tulisan tersebut misalnya:

    <h1>Judul</h1> <p>Ini adalah paragraph</p>

    Bisa dilihat kata judul dibungkus oleh tags <h1></h1> dan kalimat ini adalah paragraph dibungkus oleh tags <p></p>. Hasil yang terjadi adalah:

    Bisa dilihat diatas, kata judul menjadi besar karena h1 merupakan tags untuk menandai tulisan yang merupakan bagian dari heading.

    Stuktur Dasar HTML

    Dalam pembuatan HTML ada suatu standar-standar yang harus diikuti. Salah satu yang jelas adalah menggunakan tag-tag tertentu untuk menandai suatu bagian pada dokumen html yang kedua adalah stuktur dari tag-tag itu sendiri.

    Stuktur tersebut adalah:

    <!doctype html> <html> <head> </head> <body> </body> </html>

    Doctype html mendeklerasi dokumen kita merupakan html. Tag html ( <html></html> menandai bahwa isi dari dokumen ini merupakan html. Tag Head (<head></head>)menkonfigurasi halaman html kita, misal judul dengan memakai tag title, style nya yang berhubungan dengan warna dan sebagainya.

    Tag Body(<body></body>) merupakan isi utama halaman kita, contoh sebelumnya (<h1>Judul</h1>) masuk kedalam tag body.

    Code source tes.html <!doctype html> <html> <head> <title> Tes </title> </head> <body> <h1>Judul</h1> <p>Ini Paragraf</p> </body> </html>

    Contoh Tag HTML

    Head: (berada dalam <head></head>)

    <title> Digunakan untuk membuat judul halaman, efek bisa dilihat pada tab browser. Contoh penggunaan: <title>Studio Komputer Akuntansi</title>

    <style> Digunakan untuk mendesain web, seperti pewarnaan, posisi, pengukuran, pembentukan, dll. Contoh penggunaan: <style type=text/css> #bagian_atas { height: 400px; background: royalblue; } </style>

    Body: (berada dalam <body></body>) General:

    <h1> Digunakan untuk membuat text judul dalam halaman. Tag h1 memiliki varian hingga h6, perbedaannya adalah dari segi ukuran, semakin besar angkanya misal h2, h3, ukurannya semakin besar. Dengan kata lain h1 memiliki ukuran paling besar. Contoh penggunaan: <h1>Ini judulku</h1>

    <p> Digunakan untuk membuat sebuah paragraph. Contoh penggunaan: <p>Budi pergi ke pasar</p>

    <br /> Digunakan untuk membuat garis baru. Contoh penggunaan: <p>Sehabis tulisan ini ada garis baru <br /> disini pasti garis kedua</p>

    <img /> Digunakan untuk menampilkan gambar. Contoh penggunaan:

    <img src=http://ska.web.id/assets/images/user/fddccffa8a4c8f962d6e1f40846eb3d2.png /> Src(source) diisi oleh link gambar yang akan ditampilkan, apabila gambar berada pada tempat yang sama dengan file html cukup memakai nama gambarnya misal src=ghany.jpg (case sensitive)

    <a> Digunakan sebagai link yang akan membawa kita ke suatu tempat Contoh penggunaan: <a href=http://www.google.com>Klik untuk membuka google</a>

    Form: Form adalah rangkaian tag yang digunakan kita untuk mengisi formulir disuatu website. Tag dasar form:<form></form>

    Form tentu harus ada isinya, oleh karena itu dalam form terdapat berbagai tag input, contoh beberapa tag input:

    <input type=text /> Digunakan sebagai input segala jenis text

    <input type=password /> Digunakan untuk password, otomatis diganti dengan * ketika diisi.

    <select> <option>Pilihan 1</option> </select> Digunakan untuk menampilkan suatu pilihan-pilihan.

    <input type=checkbox /> Digunakan untuk pilihan yang di centrang/tidak

    <input type="radio" name="kelas" value="ringan" />Ringan<br> <input type="radio" name="kelas" value="berat" />Berat Digunakan untuk membuat pilihan yang hanya bisa dipilih 1 dengan bentuk bulat.

    <input type=submit value=submit /> Digunakan untuk mengeksekusi form(sudah selesai diisi).

    <input type=reset value=reset /> Digunakan untuk menghapus nilai yang telah diisi pada form.

    Table: Tag table berisi serangkaian tag yang membentuk suatu table, tag dasar suatu table adalah : <table></table>

    Komponen table: <tr> : merupakan kepanjangan dari table row, digunakan untuk membuat baris baru

    pada suatu table. <td> : merupakan kepanjangan dari table data, <td> merupakan kolom table standar. <th> : merupakan kepanjangan dari table header, <th> merupakan kolom table yang merupakan judul, perbedaanya adalah huruf yang lebih tebal pada th. Contoh penggunaan:

    <table> <tr><th>No</th><th>Nama</th><th>Telepon</th></tr> <tr><th>1</th><th>Ghany</th><th>082112386102</th></tr> </table>

    List: List merupakan rangkaian tag yang digunakan selayaknya bullet&numbering pada Microsoft word.Tag dasar list ada 2 yaitu <ul> atau <ol>. <ul></ul> digunakan untuk memberikan bullet pada suatu text. <ol></ol> digunakan untuk memberikan numbering pada suatu text. Contoh Penggunaan:

    <ul> <li>Ghany</li> <li>Dimas</li> </ul>

    Contoh terintegrasi

    Source code: <!doctype html> <html> <head> <title>Formulir Pendaftaran</title> <body> <h1>Peraturan</h1> <p> Formulir berikut wajib diisi untuk melanjutkan kegiatan Anda, silahkan isi dengan ketentuan sebagai berikut </p> <ol> <li>Isi dengan lengkap semua bagian</li> <li>Klik submit</li> </ol> <br /> <h1>Formulir Pendaftaran</h1> <form> Nama : <input type="text"><br /> Telepon : <input type="text"><br /> Jenis kelamin : <br /> <input type="radio" name="jenkal" />Cewek<br /> <input type="radio" name="jenkal" />Cowok<br /> <input type="submit" value="submit" /> </form> <br /> <h1>Daftar Pendaftar</h1> <table> <tr><th>No Pendaftar</th><th>Nama</th><th>Telepon</th></tr> <tr><td>1</td><td>Ghany</td><td>015486</td></tr> <tr><td>2</td><td>Arif</td><td>651</td></tr> </table> </body> </html>

    CSS Sederhana
    What is CSS? CSS merupakan kepanjangan dari cascading style sheet merupakan suatu bahasa yang digunakan untuk menghias web kita. Contoh penggunannnya <p> Sebuah paragraph </p> Membuat isi paragraph berada di tengah. <p style=text-align:center;> Sebuah paragraph </p> Membuat isi paragraph berada di tengah dan text berwarna biru. <p style=text-align:center;color:blue> Sebuah paragraph </p> Membuat isi paragraph berada di tengah, text berwarna biru, dan background berwarna kuning. <p style=text-align:center;color:blue;background:yellow;> Sebuah paragraph </p> Hasil:

    Tugas

    You might also like