Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bab 1. Pengenalan HTML Dan CSS PDF

    Diunggah oleh

    Galang Aji Prakarsa
    84 tayangan13 halaman
    Materi Dasar Pengenalan HTML dan CSS

    Judul Asli

    Bab 1. Pengenalan HTML Dan CSS.pdf

    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
    Materi Dasar Pengenalan HTML dan CSS

    Hak Cipta:

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

    Bab 1. Pengenalan HTML Dan CSS PDF

    Diunggah oleh

    Galang Aji Prakarsa
    Materi Dasar Pengenalan HTML dan CSS

    Hak Cipta:

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

    HTML 5

    1.

    Pendahuluan
    Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang
    digunakan untuk membuat sebuah halaman web, menampilkan berbagai
    informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks
    sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan
    tampilan wujud yang terintegerasi. HTML merupakan pondasi awal untuk
    membangun sebuah website. Ibarat dalam membangun sebuah rumah, HTML
    merupakan kerangka rumahnya.

    Gambar1. Logo HTML5


    HTML 5 merupakan versi perkembangan HTML pada generasi saat ini. Ada
    beberapa fitur yang bisa dilakukan pada versi ini, yaitu:
    Fitur canvas memungkinkan kita untuk menggambar sebuah objek.
    Fitur Video dan Audio sebagai media player untuk memutar video atau
    musik.
    Elemen-element baru seperti, artikel, header, footer, dan navigasi.
    Fitur Dukungan yang lebih baik guna penyimpanan secara offline local.
    Fitur Control dalam bentuk baru, meliputi ; kalender, waktu, email,
    search, URL

    2.

    Dasar Tag HTML 5


    Seperti halnya bahasa pemrograman yang lain, html mempunya dasar tag.
    Yang dimaksud dengan tag di sini adalah komponen dasar agar aplikasi bisa
    membaca kode yang dimaksudkan, biasanya berupa pembuka dan penutup.

    Gambar 2. Tag dasar dari HTML 5

    Penjelasan tag html 5:


    <!DOCTYPE html>, tag ini berfungsi untuk menandakan bahwa ini
    merupakan HTML 5.
    <html>..</html>, merupakan tag awal dan penutup html. Pada contoh
    tag dasar terdapat <html lang=en> yang berarti hml ini menggunakan
    bahasa standar inggris.
    <head>.</head>, merupakan tag head yang berfungsi untuk
    memberikan informasi pendukung, seperti judul halaman, icon halaman,
    dan encoding bahasa. Tag head juga berfungsi untuk menyisipkan file
    extention untuk mempercantik halaman website, seperti file css, atau
    javascript.
    Pada contoh di dalam tag head tedapat beberapa tag, yaitu:
    o <meta charshet=UTF-8>, tag meta merupakan sebuah tag untuk
    membantu mesin pencarian dalam meng-index halaman, atau
    memberikan keterangan tambahan tentang halaman tersebut. Tag
    meta sendiri memiliki beberapa macam, seperti author, name, content,
    charset, dll. Pada contoh di sini menggunakan charset sebagai tag
    awal html yang digunakan untuk menerjemahkan bit-bit di dalam
    halaman HTML menjadi karakter, UTF-8 merupakan
    kepanjangan dari Unicode Transformation Format-8 yang
    mendukung hampir seluruh karakter yang ada di dunia. HTML 5
    menggunakan UTF-8 sebagai charset standar.
    o <title> ..</title>, merupakan tag yang berfungsi untuk menampilkan
    judul halaman pada title bar browser.
    <body>..</body>, merupakan tag body yang berfungsi untuk
    menampilkan informasi ke pengguna. Pada tag inilah yang dituliskan
    untuk ditampilkan.
    Untuk tag html yang lainnya bisa dilihat di referensi sebagai berikut:
    -

    3.

    http://www.w3schools.com/tags/default.asp
    http://www.w3schools.com/html/html5_new_elements.asp

    Sesi Pembelajaran
    3.1. Menampilkan text pada file html pertama
    Pertama buat file html, kita berinama index.html di dalam folder
    pelatihan dan subfolder html.
    Lalu pada halaman tersebut diisikan tag dasar html.
    Kemudian di tag body di isikan Hai, nama saya Mahendra.
    Contoh penulisan seperti gambar di bawah ini:

    Gambar 3. Penyisipan text pada tag body


    Kemudian jalan file index tersebut di browser masing-masing.
    Karena browser membaca file index adalah halaman awal dari
    sebuah website, jadi cukup ketikkan saja di broser
    localhost/pelatihan.
    maka akan ditampilkan seperti berikut:

    Gambar 4. Hasil memasukkan text pada tag body


    3.2. Bermain dengan Heading
    Heading merupakan tag untuk memberikan judul pada suatu halaman. Tag
    heading tersedia menjadi 6 jenis, dimulai dari <h1> sampai <h6>.
    Pada file index tadi disisipkan tag <h1> pada sebelum text pada
    percobaan sebelumnya, kemudian sisipkan text Perkenalan,
    kemudian beri penutup tag </h1>. Penulisan seperti contoh berikut:

    Gambar 5. Penulisan tag heading

    Kemudian jalankan kembali file index tadi dengan merefresh halaman


    web, maka akan tampil seperti berikut:

    Gambar 6. Hasil penulisan heading


    Ubah h1 menjadi h2 sampai h6 lalu bandingkan perbedaannya.

    3.3. Membuat Tabel


    Untuk membuat tabel menggunakan tag <table>..</table>.
    Pada file index disisipkan tag tabel setelah text sebelumnya.
    Pada tag table disisipkan seperti berikut:

    Gambar 7. Penulisan tag tabel

    Pada tag table ada element border=1, untuk membuat garis


    pembatas table terlihat. Kemudian ada tag thead untuk membuat
    semua yang ada pada tag tersebut menjadi heading semua tabel. Lalu
    pada tag tbody untuk membuat semua yang ada pada tag tersebut
    menjadi isi dari tabel. Kemudian ada tag tr yang berarti table row,
    untuk membuat row atau baris pada masing-masing tabel. Didalam tag
    tr biasanya disisipkan tag lain seperti th (untuk bagian thead) untuk
    menampilkan text di heading tabel, dan td (untuk bagian tbody) untuk
    menampilkan text di body tabel.
    Hasilnya adalah sebagai berikut:

    Gambar 8. Hasil penulisan tag table


    3.4. Membuat Form
    Membuat form pada html hanya perlu menyisipkan tag <form></form>.
    Kemudian sisipkan tag <input> untuk membuat form yang diinginkan atau
    <button></button> untuk menyisipkan tombol.
    Buat file html baru, kita beri nama form.html
    Kemudian beri tag dasar html
    Lalu pada body isikan tag <form>..</form>, kemudian pada tag form
    sisipkan tag input, <input type=text>, dan <button>ok</button>
    Penulisan tag form seperti gambar berikut:

    Gambar 9. Penulisan tag form, input, dan button


    Kemudian pada browser ketikkan localhost/pelatihan/html/form.html
    Hasilnya akan seperti berikut:

    Gambar 10. Hasil penulisan form


    Pada tag input memiliki beberapa type, seperti:
    o Text
    o Number
    o Password
    o Reset
    o Radio
    o Checkbox
    o Button
    o Color
    o Date
    o Datetime
    o Datetime-local
    o Email
    o Month
    o Range
    o Search
    o Tel
    o Time
    o Url
    o Week
    Untuk penggunaan form bisa dilihat dan dipelajari di link berikut:
    http://www.w3schools.com/html/html_form_input_types.asp

    CSS 3
    1.

    Pendahuluan
    CSS merupakan singkatan dari Cascading Style Sheets, dan CSS 3 merupakan
    versi terbaru pada generasi saat ini. CSS berfungsi untuk menentukan
    bagaiman elemen HTML tersebut ditampilkan.

    Gambar 11. Logo CSS 3


    2.

    Dasar Tag CSS


    CSS memiliki tag dasar, yaitu sebagai berikut:

    Gambar 12. Tag dasar CSS


    3.

    Sesi Pemberlajaran
    3.1.Bermain Warna pada Element Html
    Untuk bisa mengubah warna pada suatu element html kita perlu
    menambahkan attribute style pada salah 1 element, sebagai contoh
    kita tambahkan attribute style pada tag heading h1 di file index.html
    Tambahkan seperti berikut style=color: blue;, bisa dilihat seperti
    gambar berikut:

    Gambar 13. Penyisipan attribute style pada suatu element html


    Hasilnya adalah sebagai berikut:

    Gambar 14. Hasil pembacaan attibut style pada element h1


    Namun cara ini kurang efektif untuk memberikan style ke masingmasing element. Kita harus menuliskan ulang style dari element
    tersebut. Oleh karena itu, agar style tersebut bisa digunakan oleh
    element yang lain bisa juga menambahkan tag style pada tag head.
    Sebagai contoh seperti gambar berikut:

    Gambar 15. Penulisan tag style pada tag html, head


    Kemudian jalankan kembali file indexnya, maka hasilnya akan sama,
    namun setiap kali menambahkan tag h1, semua textnya akan berwarna
    biru.
    Sebagai contoh buat 1 lagi tag h1 lalu beri judul Percobaan, seperti
    berikut:

    Gambar 16. Contoh penambahan tag h1 yang ke-2

    Gambar 17. Hasil percobaan tag ke-2


    Cara ini kurang efektif untuk digunakan pada element yang kita ingin
    berbeda style. Seperti contoh, pada tag h1 perkenalan kita ingin tulisan
    tersebut berwarna merah, lalu pada tag h1 percobaan kita ingin tulisan
    tersebut berwarna biru.
    Untuk itu telah disediakan attribute class dan id.
    Misalkan pada tag h1 pertama kita beri class=merah, lalu h1 kedua
    kita beri class=biru. Lalu beri penyesuaian pada tag style, kita
    tambahkan seperti berikut:

    Gambar 18. Penulisan attribute class pada tag html dan style

    Maka hasilnya akan seperti berikut:

    Gambar 19. Hasil dari pemberian style pada suatu class


    Catatan: untuk class menggunakan (.) dot didepan nama class pada
    style, seperti contoh .merah atau .biru, kemudian untuk id
    menggunakan (#) hashtag didepan nama id pada style, seperti contoh
    #merah atau #biru.

    3.2. File Extention CSS


    Penyisipan tag style kurang efektif jika kita ingin menggunakan class atau
    id di file html yang lain, karena kita harus mendeklarasikan stylenya ke
    file html yang lain. Bagaimana jika stylenya ada 20 sampai 100 baris?
    Oleh karena itu, untuk mengurangi jumlah baris yang sama antar file html,
    css bisa dibuat file ekstensinya sendiri.
    Pertama kita buat file bernama custom.css diletakkan di dalam folder
    pelatihan sub folder html.
    Kemudian buka file index.html, lalu lakukan perubahan seperti
    berikut:

    Gambar 20. Menambahkan file css pada file html

    Tag <link rel=stylesheet> digunakan untuk menambahkan file


    ekstensi berupa file css ke dalam file html. Lalu untuk atrribut href
    untuk menargetkan lokasi penyimpanan file ekstensinya.
    Lalu pada file custom.css diisikan sebagai berikut:

    Gambar 21. Isi file custom.css


    Kemudian jalankan file index tersebut di browser.
    Maka hasilnya akan sama seperti menggunakan style di dalam html,
    bedanya class pada style tersebut bisa digunakan oleh file html lain
    tanpa harus mendeklarasikan stylenya kembali.

    Sesi Latihan:
    Buatlah sebuah halaman yang berisikan Biodata anda, seperti Nama,
    alamat, tempat tanggal lahir, no telpon, foto, dan riwayat pendidikan.
    Dengan ketentuan

    Beri judul halaman Curriculum Vitae berwarna biru


    Foto ada di sebelah kiri
    Lalu di sebelah kanan foto terdapat Nama, Alamat, TTL, dan No
    telp
    Kemudian beri garis pembatas horizontal
    Lalu dibawahnya berisikan riwayat pendidikan disajikan dalam
    bentuk tabel

    Anda mungkin juga menyukai