Scribd Logo
Unggah

Selamat datang di Scribd!

  • Reading Material HTML Concept

    Diunggah oleh

    Moeltazam
    26 tayangan29 halaman

    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
    26 tayangan29 halaman

    Reading Material HTML Concept

    Diunggah oleh

    Moeltazam

    Hak Cipta:

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

    HTML Concept

    Made Indra Wira Pramana


    Developer Telkom Indonesia
    HTML
    HyperText Markup Language

    1993 90,1%

    Rilis ke publik Web dibuat dengan HTML Versi terbaru


    Element
    Bagian dari dokumen HTML

    <p title="Ini paragraf saya"> Paragraf Saya </p>


    Opening Tag Attribute Content Closing Tag
    Self-Enclosing tag
    Element yang dibuat tanpa memerlukan closing tag

    <img src="gambar.jpg">
    Opening Tag Attribute
    Comment
    Bagian dokumen yang tidak ditampilkan

    <!-- Komentar Saya -->


    Opening Tag Comment Closing Tag
    Struktur Dasar

    Penanda dokumen ditulis dengan HTML5 <!DOCTYPE html>


    Menampung semua elemen html <html>

    Menampung informasi halaman <head>


    Judul halaman <title> </title>
    </head>

    Menampung konten halaman <body>

    </body>

    </html>
    Heading 1 <h1> Heading 1 </h1>

    Heading 2 <h2> Heading 2 </h2>

    Heading 3 <h3> Heading 3 </h3>

    Heading 4 <h4> Heading 4 </h4>

    Heading 5 <h5> Heading 5 </h5>

    Heading 6 <h6> Heading 6 </h6>


    Halo Dunia <div>
    Apa Kabar?
    <h2>Halo Dunia</h2>
    <p>Apa Kabar?</p>
    Hai Semua! </div>
    Kabar Baik!

    <div>
    <h2>Hai Semua!</h2>
    <p>Kabar Baik!</p>
    <div>
    <img src="bebek.jpg">

    <img src="kucing.jpg" width="200" height="300"> <img src="kucing.jpg" width="300">


    Klik Disini

    <a href=”https://www.google.com”> Klik Disini </a>


    CSS
    Cascading Style Sheet

    Memberi Kustomisasi Versi terbaru


    Elemen HTML
    CSS
    dengan atribut style

    <p style=”color:red; font-size:20px;”>Apa Kabar?</p>

    Apa Kabar?
    CSS
    dengan tag style
    (di dalam head)

    <style>
    Apa Kabar? p{

    Kabar Baik! color: red;


    font-size: 20px;
    }
    </style>

    <body>
    <p>Apa Kabar?</p>
    <p>Kabar Baik!</p>
    </body>
    CSS
    dari dokumen terpisah
    (letakkan tag di head)

    <link rel="stylesheet" href="style.css">


    CSS
    Element Selector

    p{
    Halo Dunia! color: red;

    Apa Kabar? font-size: 20px;


    }
    Kabar Baik!
    <p> Halo Dunia! </p>

    <p> Apa Kabar? </p>

    <p> Kabar Baik! </p>


    CSS
    Id Selector

    #utama {
    Halo Dunia! color: red;
    Apa Kabar? font-size: 20px;
    }
    Kabar Baik!

    <p id="utama"> Halo Dunia! </p>

    <p> Apa Kabar? </p>

    <p> Kabar Baik! </p>


    CSS
    Class Selector

    .keren {
    Halo Dunia!
    color: red;

    Apa Kabar? font-size: 20px;


    }
    Kabar Baik!
    <p> Halo Dunia! </p>

    <p class="keren"> Apa Kabar? </p>

    <p class="keren"> Kabar Baik! </p>


    Javascript

    Bahasa Pemrograman
    Untuk menambah Interaksi di HTML
    Javascript
    dengan tag script
    (di dalam body)

    This page says <script>


    Selamat Datang! alert("Selamat Datang");
    </script>
    OK
    Javascript
    dari dokumen terpisah
    (letakkan tag di body)

    <script src="script.js"></script>
    Semantic HTML
    Tag elemen memiliki makna
    sesuai tujuan pembuatannya

    Konvensional Semantic
    SEO
    Search Engine Optimization

    Optimasi agar masuk ke Optimasi agar halaman muncul


    data mesin pencarian di halaman pertama pencarian
    Title
    Membuat judul yang jelas & deskriptif

    <title>Halaman Saya</title>

    <title> Pembelajaran HTML untuk Membuat Web - Belajar Keren </title>


    Metadata
    Memberikan infomasi tentang halaman web

    <meta name="description" content="Pembelajaran dasar HTML">


    <meta name="keywords" content="html, css, web, situs, belajar">
    <meta name="author" content="Budi">
    Metadata
    Meminta mesin pencarian meng-index halaman web

    <meta name="robots" content="index, follow">


    Atribut ALT
    memberi konteks pada gambar & alternatif jika gambar tidak dapat dimuat

    <img src="kucing.jpg" alt="Kucing tersenyum">


    Alur
    Request dari Client & Response dari Server
    Mengakses Halaman Web
    melalui Internet

    .com

    Hosting Domain
    Thank You
    www. pijarmahir.id

    @pijarmahir Pijar Mahir @pijarmahir.id Pijar Mahir

    Anda mungkin juga menyukai