Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 1 Front End Web Programming Amcc 2023

    Diunggah oleh

    Julxnn
    5 tayangan23 halaman

    Judul Asli

    MODUL 1 FRONT END WEB PROGRAMMING AMCC 2023

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

    Modul 1 Front End Web Programming Amcc 2023

    Diunggah oleh

    Julxnn

    Hak Cipta:

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

    Pertemuan 1

    Web Programming
    FRONT END
    Outline
    Pengenalan HTML Pengenalan CSS

    1. Anatomi Halaman Web 1. Pengenalan CSS


    2. Pengenalan HTML 2. Anatomi CSS
    3. Anatomi dari HTML Element 3. Menghubungkan Berkas CSS dengan HTML
    4. Struktur Dasar dokumen HTML
    5. Heading
    6. Paragraf
    7. List
    8. Gambar
    9. Semantic HTML - Mengorganisasikan Halaman
    Konten
    10. Header dan Footer,nav,article
    Anatomi Halaman Web

    Main idea : dicoding.com


    Pengenalan HTML

    HTML
    (HyperText Markup Language)

    HTML merupakan kode markup yang digunakan untuk


    menyusun struktur dari website beserta konten di
    dalamnya.
    Anatomi dari HTML Element
    ● Elemen HTML ditandai dengan sebuah tag pembuka dan penutup :
    <h1>....</h1>
    ● Beberapa elemen tidak membutuhkan tag penutup :
    <link>,<img>,<br>
    Anatomi dari HTML Element
    ● HTML element juga dapat memiliki atribut :
    <img src="/picture/img_270819.jpg">
    <div id="card">...</div>
    Struktur Dasar dokumen HTML
    Heading
    ● Heading adalah sebuah judul yang biasanya diberikan pada halaman atau
    beberapa bagian dari artikel
    ● Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1>
    digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub
    heading atau level berikutnya.
    Paragraf
    ● Paragraf adalah elemen paling mendasar dari sebuah dokumen teks. Pada HTML,
    kita bisa menunjukkan sebuah paragraf dengan menggunakan elemen <p>.
    List
    Pada HTML terdapat tiga tipe list :
    ● Unordered lists : daftar yang ditampilkan tidak memiliki urutan.
    ● Ordered lists : daftar yang ditampilkan secara terurut.
    ● Description lists : daftar yang terbuat dari beberapa istilah diikuti dengan deskripsi.

    Unordered lists Ordered lists


    List ( Ordered List )
    ● Pada ordered list, tipe urutan angkanya dapat kita atur melalui sebuah atribut
    type.

    Nilai Deskripsi

    1 Menggunakan angka dalam urutan item (default)

    a Menggunakan huruf kecil dalam urutan item

    A Menggunakan huruf besar dalam urutan item

    i Menggunakan huruf romawi kecil dalam urutan item

    I Menggunakan huruf romawi besar dalam urutan item


    Gambar
    ● Pada HTML untuk menampilkan sebuah gambar kita bisa menggunakan tag <img>. Berbeda dengan elemen
    lain, elemen <img> tidak menuliskan konten diantara tag pembuka dan tag penutup sebagaimana tag lainnya.
    Namun untuk menetapkan gambar yang ditampilkan kita gunakan sebuah atribut src.
    Mengatur ukuran pada gambar
    ● Untuk mengatur ukuran gambar yang ditampilkan juga tentunya menggunakan sebuah atribut. Untuk menentukan lebar
    gambar kita gunakan atribut width, dan untuk menentukan tinggi tentu gunakan atribut height.
    ● Ketika menggunakan atribut ini disarankan hanya gunakan salah satunya. Terkecuali kita menentukan nilai lebar dan
    tingginya sesuai dengan rasio dari ukuran gambar aslinya.
    Anchor
    ● Anchor (jangkar) merupakan elemen yang digunakan untuk membuat sebuah hyperlink ke halaman atau
    website lain, file, alamat email, atau URL lainnya. Untuk menggunakan elemen ini kita gunakan tag <a>...</a>
    bersama dengan atribut href untuk menetapkan sebuah target yang akan dituju.
    PRACTICE
    Semantic HTML - Mengorganisasikan Halaman Konten

    sebuah website memiliki hierarki konten yang sama seperti dokumen sehari-hari yang kita baca, misalnya seperti
    majalah, dan koran. Sehingga, hierarki pada sebuah website merupakan hal yang penting.

    Manfaat Menuliskan elemen HTML secara semantik :

    ● Meningkatkan Developer Experience -> Developer dapat lebih mudah memahami struktur kode.

    ● Meningkatkan SEO -> Membantu search engine untuk memahami struktur dan meningkatkan peringkat

    pencarian dari konten website.

    ● Meningkatkan Accessibility -> Memudahkan alat bantu screen reader dalam membaca konten pada website. Ini

    sangat membantu bagi penyandang disabilitas


    Semantic HTML - Mengorganisasikan Halaman Konten
    ● Header digunakan sebagai pengantar atau pembuka
    konten dalam sebuah elemen <article> atau <section>.
    ● Main digunakan untuk menampung/mewadahi konten
    utama (dominan) dalam <body>.
    ● Footer digunakan sebagai catatan kaki pada sebuah
    elemen <article> atau <section>.
    ● navigation digunakan untuk menampung sebuah navigasi
    yang sifatnya penting (major), contohnya navigasi utama
    pada sebuah website.
    ● article bertindak sebagai container untuk independen
    konten pada sebuah halaman, artinya konten utuh yang
    tidak terkait dengan konten lain.
    PRACTICE
    Pengenalan CSS

    CSS
    (Cascading Style Sheets)

    CSS merupakan kode yang digunakan


    untuk memberikan style pada HTML
    element.

    Melalui CSS Anda bisa memberikan warna,


    mengatur layout, atau mengubah ukuran
    huruf sehingga website tampak lebih
    menarik.
    Menghubungkan Berkas CSS dengan HTML
    Untuk menghubungkan Berkas CSS terdapat 2 cara :
    ● Internal CSS : Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal
    CSS juga dikenal dengan sebutan Embeded CSS.
    ● External CSS : Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.
    Eksternal CSS ditulis di dalam file khusus yang berekstensi .css.

    Internal CSS External CSS


    Anatomi CSS
    ● Selector : Bagian yang menunjuk elemen yang akan diubah
    style-nya.
    ● Declaration : Kumpulan dari pasangan property dan
    nilainya.
    ● Property : Karakteristik elemen yang akan diubah.
    ● Value : Nilai dari karakteristik tersebut.
    PRACTICE
    Thank You

    Anda mungkin juga menyukai