Scribd Logo
Unggah

Selamat datang di Scribd!

  • 1 HTML

    Diunggah oleh

    annisa fitriani
    8 tayangan26 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
    8 tayangan26 halaman

    1 HTML

    Diunggah oleh

    annisa fitriani

    Hak Cipta:

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

    HT

    ML

    Level : Very easy

    Let’s get into it !


    Mission

    Objective : Pelajar dapat memahami syntax dasar HTML

    Language / Database : HTML

    Required skill(s) : tekad dan kerja keras


    Introducing this to
    you !
    Materials : Image, Hyperlink, Paragraph, Heading, Baris
    baru, Div, List, Table & Form
    Contents

    1. Apa itu HTML


    2. Line break tag
    3. Tag division <div>
    4. Tag Heading <head> it’s ok, this will be easy bruh
    5. Membuat Hyperlink <link>

    6. Tag image <img>


    7. Tag Paragraph <p>
    8. Membuat list pada HTML <li>
    9. Tabel HTML <table>
    10. Membuat form
    11. Komentar
    Perkenalan

    Jika diibaratkan bangunan sebuah rumah, HTML dapat diibaratkan sebagai

    tiang dan tembok rumah.

    Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang

    digunakan untuk membuat sebuah halaman web, bisa dikatakan HTML adalah

    pondasi dasar dalam sebuah web.

    (Diingatkan kembali bahwa HTML bukan bahasa pemrograman, karena bahasa

    pemrograman terdapat permainan logika, kalkulasi, beserta dasar-dasar matematika)


    Let’s do this !
    HTML disebut bahasa markup.
    Apa itu HTML ?
    yeah what is that?

    <> disebut tag, yang bisa diisi dengan perintah-perintah. Beberapa tag memerlukan tag tutup
    seperti ini </>. Contohnya seperti <h1>thumb up👍</h1> atau <p>awkoakwko</p>.

    Secara kasarnya yang memerlukan tag tutup mempunyai konten di dalamnya. Sementara itu
    yang tidak punya tag tutup contohnya seperti <br>, tag br digunakan untuk membuat baris baru dalam
    HTML. Atau contoh lainnya <link> yang digunakan untuk memanggil file external.

    Ada juga yang disebut atribut, contohnya <img src=”hello.jpg” width=”200”>. src merupakan
    atribut yang berfungsi untuk mendapatkan sumber gambar dengan nama gambar dan width untuk
    mengatur lebar. Yaaa intinya begitu lah.

    Ya intinya ni materi
    gampang....
    Tag Dasar HTML
    <h1> Semantic Tags :
    <head> <h2> <nav>

    <title> <h3>
    <main>
    <h4>
    <container>
    <link> <h5>
    <footer>
    <h6>
    <body> <p> <div>

    <br>
    Contoh Code Html
    <!DOCTYPE html> <html> - </html> <head> - </head>
    <!DOCTYPE html>
    DOCTYPE adalah suatu Fungsi dari tag <html> ini Fungsi dari tag <head> ini
    <html>
    deklerasi yang digunakan adalah untuk memulai adalah menyimpan <link>,
    <head> untuk mengidentifikasi jenis dokumen html <title>, dan <meta>
    <title>Ini TITLE Website</title> dokumen HTML yang
    digunakan sehingga browser
    </head> dapat menentukan bagaimana
    memperlakukan kode
    tersebut. <h1></h1> dan
    <body>
    <p></p>
    <h1>Ini Judul memakai tag H1</h1>
    <p>Ini Paragraf memakai tag p</p>
    Fungsi dari tag <h1> ini
    </body> <title> - </title> <body> - </body> adalah untuk membuat suatu
    </html> headline pada web tag <h>
    Fungsi dari tag <title> ini Fungsi dari tag <body> ini juga bermacam macam
    adalah untuk membuat judul adalah untuk membuat seperti <h1><h2><h3>.
    pada web bagian body pada web Semakin besar angka di tag h
    maka semakin kecil ukuran
    huruf nya

    simplest example Fungsi dari tag <p> ini


    adalah untuk membuat suatu
    paragraf
    Hasil Dari Contoh Code HTML
    ini itu <title> gan

    Kalo ini itu <h1>

    Kalo ini <p>


    It’s just the

    Line Break Tag beginning, dont u


    ever give up!

    <br/>

    Tag Line Break berfungsi untuk membuat garis baru.

    Sedikit informasi mengenai <br>, <br> bisa ditulis dengan <br> ataupun <br/>

    Tag line break tidak berfungsi terhadap tag heading


    Tag Heading
    Tag Heading biasanya digunakan untuk membuat sebuah judul. tag heading mempunyai beberapa
    tingkatan yaitu h1-h6. Semakin tinggi tingkatannya ,maka semakin kecil tulisannya. Cara membuat
    tag heading :

    <body>

    <h1>HAI GAES 1</h1>


    <h2>HAI GAES 2</h2>
    <h3>HAI GAES 3</h3>
    <h4>HAI GAES 4</h4>
    Ekhem belajar gaes
    <h5>HAI GAES 5</h5> biar ambis !
    <h6>HAI GAES 6</h6>

    </body>
    Ngeluh? boleh…
    Sedih? boleh…
    Nyerah? jangan... Contoh Tag Heading

    Do your best!!! Semangat


    - Bu kuri belajarnya! luv

    "Allah akan meninggikan


    orang-orang yang beriman
    di antaramu dan orang-
    orang yang diberi ilmu
    Kamu capek? ya istirahat
    pengetahuan beberapa
    Kamu mau nangis? ya nangis aja
    derajat". Kalo semua itu buat kamu tenang,
    (Q.S Al-Mujadilah: 11) lakuin.
    Tapi jangan lupa, usaha yang selama ini
    kamu kerjakan ga akan sia-sia. Jadi ayo
    enak banget disini lega berjuang sedikit lagi!
    加油！ 您还有很长的路要
    走。 即使失败，也可以起床
    Membuat Hyperlink -cie bingung

    halo wilda ‘-’


    halo cantik sini sama abang
    Tujuan hyperlink ini untuk membuat Contoh:
    sebuah text yang ketika di-klik akan <body>
    pindah ke halaman lainnya. <a href=”hello.html”>Hello.</a>
    </body>
    Link ditulis dengan tag <a> yang
    merupakan singkatan dari anchor
    (jangkar). Setiap tag <a> setidaknya
    memiliki sebuah atribut href (hypertext
    reference) yang dimana berisi alamat
    yang dituju.
    Tag image

    <img/>

    Tag image digunakan untuk menampilkan gambar ke dalam halaman web.

    HTML img element, tidak memiliki tag penutup (end/closing tag), jadi hanya ditulis
    <img/> bukan <img></img>.

    Contoh:

    <img src =”sawah.jpg”/>. (sabi juga cuma diketik begini <img src =”sawah.jpg>) ga pakai
    ‘/’
    Tag Paragraph

    <p></p>

    Tag paragraph digunakan untuk menambahkan berbagai macam konten pada web.

    Pada tag paragraph untuk membuat line baru, kita bisa tidak menggunakan tag line break
    <br/>. Asal membuka tag paragraph baru

    <p> We give you various option from the top to bottom, </p>
    <p> so you can pick many choices as you want </p>

    ^contohnya
    Membuat List

    <ul> </ul> berarti unordered list

    unordered list bisa berupa icon atau gambar-gambar

    <li> </li> berarti list, tag <li> berada di dalam <ul> dan berguna untuk

    terdapat beberapa style untuk unordered list

    contohnya: square, circle, dan sebagainya

    Ruhe dich aus, wenn du müde bist, dann


    kämpfe erneut!
    -cie bingung lagi
    KOK DIKASIH TAU!?!?!?
    ಠ_ಠ
    Membuat List <ul>
    <li>List 1</li>
    <li>List 2</li>
    Unordered List (Tidak diurutkan) <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    </ul>
    <ul style="list-style-type: circle"> <ul style="list-style-type: square">
    Membuat List

    <ol> </ol> berarti ordered list

    unordered list bisa berupa abjad, angka, ataupun angka romawi

    <li> </li> berarti list, tag <li> berada di dalam <ol>

    terdapat beberapa style untuk ordered list

    contohnya: “A” dan “I”


    Membuat List <ol>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    Ordered List (Diurutkan) <li>List 4</li>
    <li>List 5</li>
    </ol>
    <ol type="A"> <ol type="I">
    Tabel HTML

    <table>

    Tag table terdiri dari <tr>, <th>, dan <td>

    Tag table row <tr> berguna untuk membuat baris pada tabel

    Tag table header <th> yaitu judul dari sebuah tabel, biasanya sudah bold dan berada di
    tengah

    Tag table data <td> untuk membuat kolom dan memberikan konten di dalamnya
    Cara membuat Tabel HTML

    <table border="1px">
    <tr>
    <tr>
    <td>annyeong</td>
    <th>Tabel Pertama</th>
    <td>ekhem</td>
    <th>Tabel Kedua</th>
    <td>Hai kamu </td>
    <th>Tabel Ketiga</th>
    </tr>
    </tr>
    <tr>
    <tr>
    <td>isi sendiri</td>
    <td>Haii'-'</td>
    <td>Semangat!!</td>
    <td>Hello</td>
    <td>SUSUNA KHA</td>
    <td>Sawadee kha</td>
    </tr>
    </tr>
    </table>
    こんにちは Contoh Tabel HTML Semangat ngab

    안녕하세요
    AFFEDERSİ
    NİZ
    肏你妈
    Hola

    สวัสดี
    cào nǐ mā

    Здравствуйте
    くそ

    ສະບາຍດີ Atribut “border” digunakan untuk


    BONJOUR
    ketebalan garis pada tabel

    Give up on your
    dream and die
    HTML Form
    Form sangat berguna untuk mengetahui
    informasi/data dari pengguna. Element Form
    Seperti mendaftarkan sebuah akun ataupun login

    Atribut Form Untuk method GET,


    nilai variable
    <form action="main.php" method="GET"> ditampilkan di url.
    Sehingga user dapat
    ‘action’ di atas berarti file
    dengan mudah
    yang akan dituju adalah file method dibagi menjadi dua memasukkan nilai
    main.php variable
    yaitu: Untuk baru
    method POST
    kebalikannya
    - GET .
    - POST.
    Komentar dalam HTML

    Setiap bahasa komputer memiliki syntax (kode) untuk membuat komentar, begitu juga dengan

    HTML yang memiliki syntax komentar sebagai berikut :

    <!-- ini adalah komentar -->

    Tag Komentar tidak akan ditampilkan di browser (atau pada output


    program). Ciri khas dari comment adalah “#”,“//”,”<!-- -->”, dll.
    AYOO dikit lagi
    kelarrrr
    Komentar dalam HTML

    Komentar biasanya digunakan untuk memberikan catatan tentang sebuah kode sehingga kita dapat

    mengerti apa yang dilakukan oleh kode tersebut. Sebagai contoh jika kita bekerja bersama dengan

    beberapa programmer dalam membuat sebuah program maka komentar akan sangat membantu dalam

    memahami apa yang dilakukan oleh programmer lain.

    Harap diingat bentuk komentar ini karena kita akan sering menggunakan tag komentar untuk

    memberikan penjelasan di bagian-bagian selanjutnya.


    Tips : kalau kalian memakai VSCode / Sublime
    text, kalian bisa membuat komentar dengan
    shortcut “ctrl + /” untuk bahasa apapun.
    Kita tidak akan tau seberapa berharga suatu
    hal sampai kita kehilangan hal tersebut.

    ~Anonymous~

    azeek
    SELES ok sip gitu aja

    AI

    baru 1 materi selesai, gas lah


    lanjut

    YEAYY!! Kamu udah nyelesaiin


    satu materi!! Let’s take a break
    (≧∇≦)/

    Anda mungkin juga menyukai