Scribd Logo
Unggah

Selamat datang di Scribd!

  • 01 Pengenalan HTML

    Diunggah oleh

    Wall Hack
    11 tayangan21 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
    11 tayangan21 halaman

    01 Pengenalan HTML

    Diunggah oleh

    Wall Hack

    Hak Cipta:

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

    PERKEMBANGAN

    DUNIA INTERNET
    DAN HTML

    Rahmatika
    Pemrograman web dasar
    INTERNET DAN WORLD WIDE
    WEB CONSORTIUM (W3C)
     Internet adalah jaringan komputer yang
    menghubungkan antar jaringan secara global.
     World wide web (w3) yang dikenal dengan
    istilah web adalah suatu sistem yang
    berkaitan dengan dokumen digunakan
    sebagai media untuk menampilkan
    teks,gambar,multimedia dan lainnya pada
    jaringan komputer
     World wide web consortium (w3c) adalah
    organisasi dunia yang mengatur standar
    World wide web
    JENIS APLIKASI WEB
     Web Bisnis : aplikasi web yang didalamnya terdapat proses jual
    beli contoh : ebay.com, bhineka.com
     Web berita dan informasi : aplikasi web yang menyediakan
    konten informasi berbayar maupun gratis. Contoh : detik.com,
    kaskus co.id
     Web Profil : aplikasi web yang mendeskripsikan tentang profil
    suatu perusahaan ataupun personal. Contoh : blogspot.com
     Web Service : aplikasi web yang menyediakan layanan
    pengolahan data contoh : aws.amazon, maiga-webservice.com
     Web Social Networking : aplikasi web yang memberikan
    fasilitas pertemanan contoh : facebook.com, twitter.com
     Web banking : aplikasi web yang didalamnya terdapat proses
    transaksi keuangan contoh :klikbca.com, bankmandiri.co.id
     Web Search Engine Optimize : aplikasi web yang didalamnya
    terdapat proses pencarian pada internet contoh :
    google.com,yahoo.com
    PENGENALAN HTML
    (HYPERTEXT MARKUP LANGUAGE)
     Artinya adalah bahasa markup (penanda) berbasis text atau bisa
    juga disebut sebagai formatting language (bahasa untuk
    memformat), HTML bukanlah bahasa pemrograman, melainkan
    bahasa markup/formatting.
     Struktur dokumen html terdiri tag pembuka dan tag penutup.
     Struktur dokumen html :
     <html>

    <head>
    <title> </title>
    </head>
    <body> </body>
    </html>

    Struktur tersebut adalah satu kesatuan yang harus ada dalam


    setiap dokumen html
     <HTML> …. </HTML> menandai awal dan akhir
    dokumen HTML
     <HEAD> …. </HEAD> menandai awal dan akhir
    header dokumen
     <TITLE> Judul Dokumen </TITLE> memberi
    judul pada dokumen
     <BODY> Isi Dokumen </BODY> menandai awal
    dan akhir isi dokumen

    Dokumen html terdiri dari komponen yaitu tag,


    elemen, dan atribut.
    Tag adalah tanda awal < dan tanda akhir > yang
    digunakan sebagai pengapit suatu elemen. Tag
    pada elemen pembuka diawali dengan tanda <
    dan diakhiri dengan tanda >. Sedangkan untuk
    elemen penutup diawali dengan tanda < dan /
    kemudian diakhiri sebelum tanda >. Untuk
    penulisan tag elemen tunggal cukup menuliskan
    tanda < dan sebelum tanda > ditambahkan
    tanda /.
     Pokok-pokok tentang tag :

    1. Ada dua jenis tag HTML : tag berpasangan yaitu


    tag yang dimulai dengan tag awal dan diakhiri
    dengan tag akhir, contoh: <title> … </title> dan
    tag tunggal artinya tag yang berdiri sendiri tanpa
    pasangan, contoh: <br>, <img>.
    2. Tag HTML tidak case sensitif artinya penulisan tag
    tersebut menggunakan huruf besar atau kecil
    sama saja. Tag <html> sama dengan <HTML>.
    3. Beberapa tag mengandung atribut di dalamnya:
    Contoh : <P ALIGN = “CENTER”>
    dimana P : nam tag
    ALIGN : nama atribut
    CENTER : nilai atribut
    o Elemen : nama penanda yang diapit oleh tag yang
    memiliki fungsi dan tujuan tertentu pada dokumen html.
    Elemen dapat memiliki elemen anak dan juga nilai.
    Elemen anak adalah suatu elemen yang berada di dalam
    elemen pembuka dan elemen penutup induknya. Nilai
    yang dimaksud adalah suatu teks atau karakter yang
    berada diantara elemen pembuka dan elemen penutup.
    <head>
    <title>
    Judul dokumen
    </title>
    </head>

    o Atribut : properti elemen yg digunakan untuk


    mengkhususkan suatu elemen. Elemen dapat memiliki
    atribut yg berbeda pada tiap masing2nya.
    PENAMAAN
    DOKUMEN/PENYIMPANAN
     Ketik nama file yang kalian,kemudian
    tambahkan sebuah extensi (.htm atau .html)
    JENIS TAG
    HTML

    Rahmatika
    Pemrograman web 1
    HEADING
     Teks dalam dokumen umumnya mempunyai judul topik,pada
    dokumen HTML judul ini disebut heading.
     Sintaks elemen heading: <Hn> Teks yang menjadi Heading </Hn>

    Contoh :
    <html>
    <head>
    <title>contoh heading </title>
    </head>
    <body>
    <h1> SELAMAT DATANG </h1>
    <h2>PEMBELAJARAN PEMROGRAMAN WEB </h2>
    <h3> BELAJARNYA DENGAN GIAT</h3>
    <h4> ILMU ADALAH HARTA BERHARGA</h4>
    <h5> AMIERA </h5>
    <h6> ARKAN </h6>
    </body>
    </html>
    TAG HEADING DAN TAG HORIZONTAL LINE
     Tag heading mempunyai atribut yang digunakan untuk mengatur heading
    dalam baris.
    Sebuah garis dapat disisipkan dalam dokumen web,umumnya digunakan
    sebagai pemisah antar bagian atau paragraf.
    Tag <hr> disisipkan pada tempat garis akan disisipkan dalam dokumen
    Contoh :
    <html>
    <head>
    <title>coba2</title>
    </head>
    <body> <h1 align="center"> PEMROGRAMAN 2 </h1>
    <font color="00fff">
    <hr>
    <h2 align="right"> PEMROGRAMAN WEB 2 </h2>
    <hr>
    <h3 align="left"> PEMROGRAMAN 1 </h3>
    <hr>
    </body>
    </html>
    PARAGRAF
    Informasi yang disajikan dalam dokumen harus mengikuti
    kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama
    disimpan dalam satu paragraf.
    Suatu paragraf akan terlihat dibatasi oleh satu baris kosong
    sebelum dan sesudahnya.
    Contoh :
    <html>
    <head>
    <title>contoh paragraf</title>
    </head>
    <body>
    <p> HTML mudah dipelajari Selamat datang didunia html</p>
    <p> Homepage pertama saya </p>
    </body>
    </html>
    LINE BREAK
    Kita dapat memaksakan ganti baris pada dokumen
    web.ganti baris dimaksudkan hanya menyajikan
    informasi pada baris sendiri tetapi tidak berganti
    paragraf.
    Contoh :
    <html>
    <head>
    <title>contoh ganti baris</title>
    </head>
    <body>
    <p> pemrograman <br> web 1 <br> pemrograman <br>
    web 2 <br> </p>
    </body>
    </html>
    TAG ATRIBUT 1 DAN 2
     Tag Atribut 1 (Bold, Italic, Underline)
     <b>Kalimat yang dicetak tebal</b>
     <i>Kalimat yang dicetak miring</i>
     <u>Kalimat yang digarisbawahi</u>
     Untuk menandai bagian kalimat agar dicetak
    tebal, miring, dan/atau digarisbawahi.
     Tag Atribut 2 (Superscript, Subscript)
     <sup>bagian yang dicetak tinggi</sup>
     <sub>bagian yang dicetak rendah</sub>
     Untuk menandai bagian karakter agar dicetak
    tinggi atau rendah, biasanya untuk rumus
    matematika atau kimia.
    FONT
     Memformat suatu bagian kalimat dengan ukuran,
    jenis huruf, atau warna tertentu.
     Tag : font Parameter : size, face, color
     Contoh :
     <font face =“arial”>kalimat 1 </font>
     <font face =“arial” size =“10” color=“blue”>
    Kalimat 1</font>
    ENUMERASI (LIST, UNNUMBERED
    LIST, ORDERED LIST
     <li>item</li>
     Untuk menandai suatu item dari daftar
    (enumerasi), diawali dengan simbol • (bullet)
     Kelompok item harus diapit oleh tag <ul>
    </ul> dalam daftar bertingkat.
     Untuk menomori enumerasi dengan nomor
    urut (1,2,3), apitlah dengan tag <ol> </ol>
    ELEMEN TABEL
     <table>,,,,,</table> : mendefiniskan sebuah
    tabel html
     <caption>,,,,</caption>: mendefinisikan
    judul tabel
     <tr>,,,,</tr> : menspesifikasikan sebuah
    baris tabel
     <th>,,,,,</th> : mendefinisikan sel header
    tabel/ meletakkan judul tabel
     <td>,,,,</td> : mendefinisikan sebuah sel
    data tabel/kolom
    Tag <TABLE> mempunyai beberapa atribut yang
    dapat kita tambahkan :
     ƒBORDER, untuk menentukan tebal garis pada
    tabel.
     ƒALIGN, untuk menentukan letak tabel pada
    halaman
     ƒ WIDTH, untuk menentukan lebar tabel
     ƒCELLPADDING, untuk menentukan jarak antara
    objek dalam sel dengan batas sel
     ƒCELLSPACING, untuk menentukan jarak antar sel
     COLSPAN digunakan untuk mengabungkan
    beberapa kolom menjadi satu kolom.
     ROWSPAN digunakan untuk menggabungkan baris.
     <html>
     <head>
     <title> LATIHAN 5-4 </title>
     </head>
     <body>
     <H1> TABEL ROWSPAN DAN COLSPAN </H1>
     <TABLE WIDTH=”50%” CELLSPACING=”5” CELLPADDING=”5” BORDER=”1”>
     <TR>
     <TD WIDTH=40% ROWSPAN=2>baris1 kolom1
     <p> baris2 kolom1</TD>
     <TD WIDTH=60%>baris1 kolom2 </TD>
     </TR>
     <TR>
     <TD WIDTH=60%>baris1 kolom1 </TD>
     </TR>
     <TR>
     <TD WIDTH=100% COLSPAN=2>baris3 kolom1
     <p> baris3 kolom2</TD>
     </TR>
     </body>
     </html>
     <html>
     <head>
     <title>Contoh table dalam table</title>
     </head>
     <body>
     <table border="2" cellpadding="6" cellspacing="6" width="500">
     <caption align ="bottom"> Membuat tabel dalam tabel</caption>
     <tr><td> PEMROGRAMAN </td>
     <td align="center" width="50%" colspan ="2">Judul 1
     <td align="right" rowspan ="3">Judul 2</td>
     </tr>
     <tr>
     <td valign="top" rowspan="2">Daftar Isi</td>
     <td align="center" colspan="2" height="200" >Bagian isi </td>
     </tr>
     <tr><td align="center">footer</td>
     </tr>
     </table>
     </body>
     </html>

    Anda mungkin juga menyukai