Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML

    Diunggah oleh

    Channel AliTekno
    7 tayangan22 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, 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 DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan22 halaman

    HTML

    Diunggah oleh

    Channel AliTekno

    Hak Cipta:

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

    PENDAHULUAN PEMROGRAMMAN DASAR

    Team developer
    Dalam pengembangan sebuah aplikasi computer (termasuk web). Terdapat sebuah tim
    developer. Dalam team devepor terdapat beberapa jenis macam orang berdasarkan
    jobdisk(pekerjaan), antara lain :
    a. System analys
    Adalah orang yang bertugas untuk menterjemahkan solusi dari suatu permasalahan ke
    dalam sebuah simbol yang dapat diterjemahkan ke dalam program computer dan
    melakukan pengawasan terhadap pengembangan program tersebut.
    b. Programers
    Adalah orang yang menterjemahkan solusi yang ditemukan system analis menjadi
    sebuah aplikasi computer. Jenis programmer dalam tim ini ada 3 macam :
    1. Programmer tampilan (front-end)
    2. Programmer database
    3. Programmer fungsi (back-end)
    c. Tester
    Adalah orang yang bertugas untuk mencoba dan mencari kesalahan atau eror aplikasi
    d. Operator
    Adalah orang yang menjalankan aplikasi computer (biasanya orang yang melakukan
    update aplikasi pada aplikasi computer yang diorder)

    1
    Jenis-jenis programmer
    Dalam dunia pengembangan web (web programming), programmer dapat
    dibedakan menjadi 3 jenis :
    a. Programmer front-end : programmer yang berfokus pada tampilan antar muka
    yang bisa mempermudah penggunaan web pengguna (user).
    b. Programmer back-end : programmer yang berfokus pada fungsi dari suatu
    web, seperti menambahkan

    2
    HTML

    Singkatan Dari Hypertext Markup Lannguage, karena terdapat serangkaian markup


    (bias disebut tag) yang berfungsi member tahu browser tengtang bagaimana sebuah konten
    ditampilkan.
    Pertama kali diciptakan oleh tim berness lee(bapak web). Selain HTML beliau juga
    menciptakan HTTP, WWW, web browser, Web server, Web page. Beliau sekarang menjabat
    sebagai direktur W3C (world wide web consortium), sebuah organisasi yang membuat dan
    mengawasi teknologi web. W3C merupakan gabungan dari : MIT (USA), ERCIM (France),
    Keio University (Japan), dan Beihang University (China). Web resmi W3C : www.w3c.org.
    web u8ntuk melihat teknologi internet www.evolutionoftheweb.com. Web browser pertama
    kali didunia adalah MOSAIC (1993) diciptakan oleh Tim Bernes Lee. Kegiatan untuk
    membuat program (web) biasa disebut coding.
    Yang perlu disiapkan untuk melakukan coding html :
    1. Browser, berfungsi untuk menampilkan hasil. Seperti google chrome
    (rekomendasi), Mozilla firefox
    2. Text editor : berfungsi untuk menulis code (coding), contoh visual code,
    sublimetext, dll
    Tag
    Tag adalah simbol dalam html yang meminta broser untuk menampilkan suatu elemen.
    Berikut ini adalah struktur tag :
    1. Berpasangan, strukturnya seperti berikut ini :
    <nama tag atribut=”nilai”></nama tag>

    Contohnya : <p color=”blue”></p>


    2. Tanpa pasangan
    <nama tag atribut=”nilai”>

    Contoh <br>

    3
    STRUKTUR DASAR HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <bpdy>

    </body>
    </html>

    Tag-tag yang ada pada bagian head :


    1. <title></title> : digunakan untuk membuat judul halaman web
    2. <style></style> : menambahkan style (gaya)
    3. <script></script> : menambahkan javascript
    4. Dkk

    Tag-tag yang ada pada bagian body :


    1. Teks, seperti: <h1></h1>, <p></p>, …
    2. Pendukung teks, seperti : <br>,<hr>,<strong></strong>,<em></em>, …
    3. Gambar, seperti : <img>
    4. Hyperlink, seperti : <a>
    5. List, seperti : <ul></ul>,<ol></ol>, …
    6. Tabel, seperti <table></table>, …
    7. Form, seperti <form></form>, …
    8. Javascript, seperti <script></script>
    9. Grouping, seperti <div></div>, <span></span>
    10. Komentar, seperti <!- - ini adalah komentar- ->

    Atribut global atribut yang dimiliki oleh semua tag html, seperti :
    1. Accesskey
    2. Class
    3. Dir

    4
    4. Lang
    5. Style
    6. Tabindex
    7. Title

    Atribut lengkap bias diakses di :


    www.w3school.com/tags

    5
    PARAGRAPH DI HTML
    1. <p></p> : digunakan untuk membuat text
    2. <br> : digunakan untuk membuat baris baru
    3. <hr> : menambahkan garis html
    4. <i></i> , <em></em> : membuat huruf miring
    5. <b></b>,<strong></strong> : membuat huruf tebal
    6. <u></u> : membuat garis dibawah tulisan

    HEADING
    Heading digunakan untuk untuk membuat teks special seperti judul/bab, sub bab, dll. Contoh
    header:
    1. <h1></h1> : heading terbesar
    2. <h2></h2>
    3. <h3></h3>
    4. <h4></h4>
    5. <h5></h5>
    6. <h6></h6> : heading terkecil

    6
    LIST HTML
    1. Ol : list untuk objek-objek yang haeus urut
    Struktur dasar ol
    <ol>
    <li>item 1</li>
    <li>item 2</li>
    …
    </ol>
    Atau
    <ol type=”nilai”>
    <li>item 1</li>
    <li>item 2</li>
    …
    </ol>

    Nilai dapat diganti dengan : 1, A, a, I, i


    2. Ul : list untuk objek yang tidak harus urut
    Struktur dasar ul
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    …
    </ul>
    Atau
    <ul type=”nilai”>
    <li>item 1</li>
    <li>item 2</li>
    …
    </ul>

    Nilai dapat diganti dengan : disk, square, circle

    7
    3. Dl : untuk definisi
    Struktur :
    <dl>
    <dt>term 1</dt>
    <dd>description 1</dd>
    <dt>term 2</dt>
    <dd>description 2</dd>
    </dl>

    8
    HYPERLINK HTML
    Adalah Menghubungkan halaman web 1 dengan halaman web lain. Tag untuk hyperlink di
    HTML :
    <a href=“alamat web”></a>

    Ada beberapa jenis hyperlink :


    1. Ekternal link : menyambungkan halaman web ke halaman web yang ada di internet
    Contoh :
    https://www.google.com
    https://www.facebook.com/
    2. Internal/relative link : menyambungkan halaman web dengan halaman web yang
    masih 1 domain/folder.
    Contoh :
    Product.html
    ../admin/index.html
    3. Page anchor : menampilkan bagian tertentu dari halaman web
    #about
    Index.html#about

    MEMBUKA HALAMAN WEB LAIN:


    cara membuka halaman web lain dapat dilakukan dengan tag:
    <a type=”nilai”>
    …
    </a>
    Nilai dapat diganti dengan :
    1. _self : membuka halaman web lain di tab browser yang sama
    2. _blank : membuka halaman web lain di tab browser yang baru

    9
    MENAMBAHKAN OBJEK PADA HALAMAN WEB
    1. Gambar
    Kita dapat menambahkan gambar dengan tag :
    <img src = “namafile.ektensi”>
    Ada beberapa cara untuk menambahkan gambar :
    a. Internal resource, menambahkan gambar yang masih satu domain/file dengan file
    htmlnya.
    <img src = “namafile.ektensi”>
    Tulisan merah bisa diganti dengan contoh berikut ini :
     Logo.png
     Background.jpg
     dkk
    b. External resource, menambahkan gambar dari halaman web yang sudah ada di
    internet
    <img src = “namafile.ektensi”>
    Tanda merah dapat diganti dengan :
     https://www.google.com/image/srpr/logollw.png
     https:/www.gambar.co.id/contoh.jpg
    catatan : external resource tidak disarankan karena web kita tergantung dari web
    lain.
    Adapun atribut lain di img antara lain :
     src, untuk memuat gambar dan mencari dokumen gambar
     alt, menampilkan tulisan apabila gambar gagal ditampilkan
     tittle, menampilkan tulisan apabila gambar disorot kursor
     width, mengatur lebar gambar (satuan px atau %)
     height, mengatur tinggi gambar (satuan px atau %)

    10
    2. Suara/music
    Kita dapat menambahkan audio ke halaman web HTML dengan menambahkan tag
    <audio></audio>. berikut ini adalah contoh coding dari <audio>:

    Akan menghasilkan :

    11
    Format File Audio yang didukung

    Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran
    filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas
    tinggi dan ukuran filenya relatif lebih besar.
    Tag <audio> punya beberapa atribut yang sering digunakan:
    a. Controls, Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti
    tombol play, pause, stop, scroll, dan volume).
    b. Autoplay, Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai
    yang bisa diberikan pada atribut ini adalah true dan false.
    c. Loop,  berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat
    one. Nilai yang bisa diberikan adalah true dan false.
    d. Muted, Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa
    diberikan adalah true dan false.
    e. Hidden, berfungsin untuk menghilangkan controls

    12
    3. Video
    Kita dapat menambahkan video dengan menggunakan tag <video></video>. Adapun
    contoh dari penggunaan video dalam coding adalah sebagai berikut ini :

    Hasilnya:

    Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format
    video yang didukung: 

    Tag <video> punya beberapa atribut yang bisa diberikan:


    13
    14
    TABEL HTML
    Kita dapat menambahkan table ke dalam HTML dengan menggunakan tag
    <table></table>. Bentuk table dalam HTML ada 2, antara lain :
    a. Simple

    <table>
    <tr>
    <td>1,1</td>
    <td>1,2</td>
    <td>1,3</td>
    </tr>
    <tr>
    <td>2,1</td>
    <td>2,2</td>
    <td>2,3</td>
    </tr>
    </table>
    Hasil yang didapatkan :
    1,1 1,2 1,3
    2,1 2,2 2,3

    15
    b. Kompleks

    <table>
    <thead>

    <tr>
    <th></th>
    Header/judul
    <th>kolom 1</th>
    <th>kolom 2</th>
    </tr>
    </thead>
    <tbody>
    Header/judul
    <tr>
    <th>baris 1</th>
    <td>1,1</td>
    <td>1,2</td>
    </tr>
    </tbody>
    Header/judul
    <tr>
    <th>baris 2</th>
    <td>2,1</td>
    <td>2,2</td>
    </tr>
    </tbody>

    </table>
    Hasil yang didapat adalah sebagai berikut ini :
    Kolom 1 Kolom 2
    Baris 1 1,1 1,2
    Baris 2 2,1 2,2

    Keterangan :
    Tr : table row (baris)
    Td : table data (kolom)
    Th : table head (tanda header)

    Atribut yang ada pada tag <table></table> adalah sebagai berikut ini :

    16
    a. Border :menambahkan garis pada border
    b. Align :menambahkan
    c. Cellspacing : menambahkan jarak antar cell
    d. Cellpadding : menambahkan jarak antara tulisan (konten) dengan garis
    Table merging

    Adalah cara menggabungkan table di HTML. Ada 2 macam table merging di HTML :

    a. Colspan

    Digunakan untuk menggabungkan kolom menjadi 1. Adapun contoh tag-nya adalah


    sebagai berikut ini :

    <table bolder=”1” cellspacing=”0” cellpadding=”5” >


    <tr>
    <td>1,1</td>
    <td colspan=”2”>colspan = 2</td>
    </tr>
    <tr>
    <td>2,1</td>
    <td>2,2</td>
    <td>2,3</td>
    </tr>
    <tr>
    <td>3,1</td>
    <td>3,2</td>
    <td>3,3</td>
    </tr>
    </table>

    17
    Hasilnya seperti ini :

    b. Rowspan

    Adalah atribut yang digunakan untuk menghubungkan baris menjadi 1 baris. Adapun
    contoh tag-nya adalah sebagai berikut ini :

    <table bolder=”1” cellspacing=”0” cellpadding=”5” >


    <tr>
    <td rowspan=”3”>rowspan = 3</td>
    <td colspan=”2”>colspan = 2</td>
    </tr>
    <tr>
    <td>2,2</td>
    <td>2,3</td>
    </tr>
    <tr>
    <td>3,2</td>
    <td>3,3</td>
    </tr>
    </table>

    Hasilnya adalah sebagai berikut ini :

    18
    Form HTML

    Form adalah sebuah tampilan ayng digunakan untuk mengelola data yang di inputkan
    oleh user (pengguna). Dalam pembuatan form di HTML, kita membutuhkan tag :

    <form></form>

    Atau

    <form>

    <!—elemen form-->

    </form>

    Elemen elemen form adalah sebagai berikut ini :

    1. Input, adalah elemen form dimana user bisa memasukkan suatu data

    Elemen input ada 4 jenis, antara lain :

    a. Text

    Elemen input yang datanya berupa teks (tulisan). Berikut ini adalah contoh
    dari input dengan tipe text :

    Hasilnya adalah sebagai berikut ini :

    19
    b. Password

    Elemen input yang digunakan untuk memasukkan data berupa rahasia, semisal
    password. Berikut ini adalah contoh dari input dengan tipe password :

    Hasilnya adalah sebagai berikut ini :

    c. Radio

    Elemen input yang digunakan untuk memilih dari beberapa pilihan yang
    disediakan yang bentuknya berupa bulat, Berikut ini adalah contoh dari input
    dengan tipe radio :

    Hasilnya adalah sebagai berikut ini :

    20
    d. Checkbox

    Elemen input yang digunakan untuk memilih dari beberapa pilihan yang
    disediakan yang bentuknya berupa tanda centang, Berikut ini adalah contoh
    dari input dengan tipe radio :

    Hasilnya seperti ini :

    Berikut ini adalah tag untuk button :

    <button type = “ ”></button>

    2. Button, adalah elemen html yang digunakan untuk melakukan hal yang spesifik,
    seperti mengirimkan data, menghapus data, dll

    Button dapat diisi dengan :

    a. Submit, digunakan untuk button dengan tujuan untuk menyetujui data

    b. Reset, digunakan untuk button dengan tujuan untuk mereset data

    c. Button, digunakan untuk button dengan tujuan lain

    3. Textarea, adalah elemen form yang digunakan untuk memasukkan data yang besar
    semisal komentar atau alamat. Tag textarea dapat di ketik seperti dibawah ini :

    <textarea></textarea>

    21
    4. Select, elemen form yang digunakan untuk memasukkan data berupa pilihan, biasanya
    berupa combo box. Tag select dapat di ketik seperti dibawah ini :

    <select>
    <option>opsi 1</option>
    <option>opsi 2</option>
    <option>opsi 3</option>
    </select>

    5. Label, adalah elemen form yang digunakan untuk menandai elemen form yang
    lain. Tag label dapat di ketik seperti dibawah ini :

    <label>contoh label</label>

    22

    Anda mungkin juga menyukai