Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML-BASICS

    Diunggah oleh

    Cahyo Laksono
    8 tayangan38 halaman
    Konsep Web

    Judul Asli

    02 Konsep Dasar Pemrograman Berbasis WEB

    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
    Konsep Web

    Hak Cipta:

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

    HTML-BASICS

    Diunggah oleh

    Cahyo Laksono
    Konsep Web

    Hak Cipta:

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

    Lindung Siswanto, S.Kom.,M.

    Eng
    TI - POLNEP
    Objectives
    Setelah menyelesaikan bab ini,
    anda diharapkan dapat:
     Memahami konstruksi dasar halaman web.
     Mengerti tentang WWW
     Mengerti tag-tag dasar HTML
     Membuat halaman web dengan HTML sederhana.

    2
    Konsep WEB
     World Wide Web ("WWW", atau singkatnya "Web")
    adalah suatu ruang informasi di mana sumber-sumber
    daya yang berguna diidentifikasi oleh pengenal global
    yang disebut Uniform Resource Locator (URL).

    3
    Kelebihan
     Dapat diakses kapan pun dan dari mana pun selama
    ada internet.
     Dapat diakses hanya dengan menggunakan web
    browser (umumnya sudah tersedia di PC, PDA, dan
    handphone terbaru), tidak perlu menginstall aplikasi
    client khusus.

    4
    Kekurangan
     Keterbatasan web browser.
     Terbatasnya kecepatan internet mungkin membuat
    respon aplikasi menjadi lambat.

    5
    Arsitektur Web

    6
    Sistem WEB

    - Berarsitektur client-server
    → software web browser di sisi client
    → software web server di sisi server
    - Komunikasi Client-Server → protocol HTTP.
    - Mempunyai fungsi untuk
    mengambil/menjalankan isi file dokumen web di
    server dan menampilkannya di sisi client.

    7
    Browser dan Editor
     Browser: Browser merupakan software yang di install di
    mesin client yang berfungsi untuk menterjemahkan tag-
    tag HTML menjadi halaman web. Browser yang sering di
    gunakan biasanya Internet Explorer, Netscape Navigator,
    Opera, Mozill, Chrome dll.
     Editor: Program yang di gunakan untuk membuat
    document HTML, ada banyak HTML editor yang bisa anda
    gunakan diantaranya: Notepad++, Microsoft FrontPage,
    Macromedia Dreamweaver, VSCode, Sublime.

    8
    Jenis Web
    Perbedaan:
     Interaksi antara pengunjung dengan pemilik web.
     Adanya script language yang digunakan.
     Penggunaan database.
     Content.

    9
    Need to Learn
    Di Sisi Client:
     Sintaks pembuatan dokumen web (HTML & CSS).
     Client side scripting (JavaScript).
    Di Sisi Server:
     Mekanisme pemanggilan program dan pengambilan
    output program oleh web server.
     Server side scripting (PHP, JSP, ASP)

    10
    Server Side & Client Side Programming

     Server Side Scripting: semua sintaks yang diberikan


    akan sepenuhnya dijalankan pada server.
    → menyediakan website yang interaktif.
     Client Side Scripting: sintaks dijalankan oleh web
    browser
     Teknologi Server Side ➔ ASP, PHP

    11
    WWW
     WWW bekerja merdasarkan pada tiga mekanisme
    berikut:
     Protocol standard aturan yang di gunakan untuk
    berkomunikasi pada computer networking, Hypertext
    Transfer Protocol (HTTP) adalah protocol untuk WWW.
     Address WWW memiliki aturan penamaan alamat web
    yaitu: URL(Uniform Resource Locator) yang di gunakan
    sebagai standard alamat internet.
     HTML digunakan untuk membuat document yang bisa
    di akses melalui web.
     Contoh :
     http://www.polnep.ac.id/index.html

    12
    HyperText Markup Language (HTML)
     HTML → standard bahasa yang digunakan untuk
    menampilkan document web.
     Mengontrol tampilan dari web page dan contentnya.
     Mempublikasikan document secara online sehingga bisa
    di akses.
     Membuat online form yang bisa di gunakan untuk
    menangani pendaftaran, transaksi secara online.
     Menambahkan object-object seperti image, audio, video
    dan juga java applet dalam document HTML.
     Versi terakhir saat ini adalah HTML5
     HTML5 diawali dengan <!DOCTYPE HTML>

    13
    File HTML
    Pemberian nama file pada Home page

    • File extention untuk file html : htm, html

    • File : index.html menjadi default dalam web site


    atau virtual directory dalam suatu website
    Tag-tag HTML
     Kalo pada bahasa pemrograman kita mengenal code,
    maka pada HTML kita mengenal yang namanya tag.
     Contoh tag html adalah <head>, <title>, <body>,
    <html>, <img>, dan lain-lain.
     Tag html tidak bersifat case sensitive → <body> sama
    dengan <BODY>

    15
    Tag-tag HTML - continued
     Bentuk umum penulisan tag html adalah:
    <ELEMENT ATTRIBUTE = value>
    Dimana:
     Element - nama tag
     Attribute - atribut dari tag
     Value - nilai dari atribut.
     Contoh:
    <BODY BGCOLOR=BLUE>

    16
    Struktur HTML document
     Document HTML bisa di bagi mejadi tiga bagian utama:
    html, head, dan body.

    <html>
    <head>

    </head>

    <body>

    </body>
    </html>
    17
    Susunan HTML
    <Head>
    Kepala <Title>
    Judul Homepage
    <head> </Title>
    </Head>

    Homepage
    <Body>
    Tubuh Isi…Teks
    Isi…Tabel.
    <body> Isi…Audio, Video, dll.
    </Body>

    18
    <html>
     Setiap document HTML harus di awali dan di tutup
    dengan tag HTML → <html> …… </html>
     Tag <html> memberi tahu browser bahwa yang di
    dalam kedua tag tersebut adalah document HTML.

    19
    <head>
     Bagian header dari document HTML di apit oleh tag <head></head>.
     Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan
    judul dari halaman web.

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

    20
    Latihan 01 : <body>
     Tag <body> di gunakan untuk menampilkan text, image
    link dan semua yang akan di tampilkan pada web page.

    <html>
    <head>
    <title>Halaman HTML Pertamaku </title>
    </head>
    <body bgcolor=“blue”>
    <p>Document HTML yang Pertama</p>
    </body>
    </html>

    21
    Latihan 02 : Elemen dasar – Block
    Level
     Block level element: terdapat 6
    tingkatan, yaitu H1 sampai H6.

    <body>
    <h1>Heading one</h1>
    <h2>Heading two</h2>
    <h3>Heading three</h3>
    <h4>Heading four</h4>
    <h5>Heading five</h5>
    <h6>Heading six</h6>
    </body>

    22
    Latihan 03 : Elemen dasar – Paragraph (p)
     Menampilkan teks dalam bentuk paragraf.

    <body>
    <h3>Salam Kenal</h3>
    <p>
    Saya mahasiswa POLNEP Pontianak
    Siapa yang mau kenalan dengan saya ?
    </p>
    <body>

    23
    Latihan 04 : Elemen dasar – list item (li)
     Unordered list <ul>: List item tidak berurutan (bullet)

    <body>
    <P>Nama-nama buah</P>
    <ul>
    <li>Durian</li>
    <li>Manggis</li>
    <li>Langsat</li>
    </ul>
    </body>
    Latihan 05 : list item (li) - continued
     Ordered list <ol>: List item berurutan.

    <body>
    <P>Daftar Prodi di Jurusan Teknik Elektro</P>
    <ol start="1" type=“1">
    <li>Teknik Informatika</li>
    <li>Teknik Elektronika</li>
    <li>Teknik Listrik</li>
    </ol>
    <body>

    25
    Latihan 06 : list item (li) - continued
     Tipe-tipe pada list item - ordered list <ol> :
     “A” : A, B, C, …
     ”a” : a, b, c, …
     ”I” : I, II, III, …
     ”i” : i, ii, iii, …
     ”1” : 1, 2, 3, …

    26
    Latihan 07 : Elemen dasar – Horizontal Rules <hr>
     Horizontal Rule tag digunakan untuk menggambar garis
    horizontal dalam dokumen html.
     Attribut dari <hr> adalah:
     Position: menetukan posisi dari <hr>, dengan nilai : center | right |
    left.
     Width: untuk menentukan panjang <hr>. Nilai default 100%.
     Size: untuk menentukan tebal dari <hr> dalam pixel.
     Noshad: Efek bayangan.
     Contoh:
    <hr position=“center” width=90% size=3
    noshad>

    27
    Latihan 08 : Pemformatan Page
     Break : memulai baris baru
    tag : <br />
     Font : menentukan format tampilan font
    <font color="#9966FF" size="5"> Belajar Web </font>

    ◼ Color : attribute dgn 3 kategori warna (RGB)


    #RRGGBB, misal #FF0000 adalah Red
    28
    Latihan 09 : Pemformatan Page – Cont. 1
     Alignment : untuk perataan objek (Left,Right,Center,Justify)
    <P align="center">Daftar Jurusan </P>
     Format Text :
    A. Physical Format B. Logical Format

    C. Preformatted Text : menampilkan text spt aslinya.


    <pre> HTML sungguh menyenangkan.
    Mudah bukan… </pre> 29
    Latihan 10 : Pemformatan Page – Cont. 2
     Contoh :
     <!DOCTYPE HTML>
    <html>
    <head>
    <title>Welcome to sif UPJ</title>
    </head>
    <body>
    <B><P align="center">Prodi di Jurusan Teknik Elektro</P></B>
    Polnep memiliki 15 prodi , 3 diantaranya adalah : <br>
    <font color="#9966FF" size="3" face="arial">
    1. Teknik Informatika</font> <br>
    2. Teknik Elektronika<br>
    3. Teknik Listrik<br>
    </body>
    </html>

    30
    Latihan 11: Marquee (Scrolling text)
    <marquee>This text will scroll from right to left</marquee>

    <marquee direction="up">This text will scroll from bottom


    to top</marquee>

    <marquee direction="down" width="250" height="200"


    behavior="alternate" style="border:solid">
    <marquee behavior="alternate">
    This text will bounce
    </marquee>
    </marquee>
    Latihan 12 : img ➔ Display picture
    <!DOCTYPE html>
    <html>
    <body>

    <img src="smiley.gif" alt="Smiley face" width="142"


    height="242">

    </body>
    </html>
    Latihan 13: Elemen dasar – hyperlink <a>
     Untuk membuat link ke dokumen lain.
    Contoh:
    <a href=dua.html>Ke halaman dua</a>
    <a href=“http://polnep.ac.id”> Halaman web
    POLNEP</a>
     Untuk membuat link ke bagian tertentu dlm dokumen.
    Contoh:

    33
    Latihan 14 : Pembuatan Tabel
     Untuk membuat tabel : <tabble>
    Cell-nya dengan tag <td>
    <html>
    <head>
    <title>Using Table</title>
    </head>
    <body>
    <table border="1">
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
    <td>cell 4</td>
    </table>
    </body>
    </html>
    34
    Latihan 15: Pembuatan Tabel –
    Cont. 1
     Untuk membuat baris cell : <tr>
     Untuk title tabel : <caption>
    <body>
    <table border="1">
    <caption>Creating Table</caption>
    <tr> <td>cell 1a</td>
    <td>cell 1b</td>
    </tr>
    <tr> <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table>
    </body>

    35
    Latihan 16 : Pemformatan Tabel
     Perataan tabel :
    1. align (center, justify, left, right).
    2. valign (baseline, top, middle, bottom)
     Lebar tabel : width=“25%”
     Warna cell : bgcolor=“red”
     Spasi tabel :
    cellspacing untuk memberi spasi antar sel
    cellpadding untuk spasi dari border ke text dalam cell

    36
    Latihan 17: Pemformatan Tabel –
    Cont. 1
     Contoh :
    <body>
    <table border=1 cellspacing=5
    cellpading=10>
    <tr align="left" valign="top">
    <td width="25%" bgcolor=red>cell
    1a</td>
    <td width="25%" bgcolor=yellow>cell
    1b</td>
    </tr>
    <tr align="center" valign="baseline">
    <td>cell 2a</td>
    <td>cell 2b</td>
    </tr>
    </table>
    </body>
    37
    Latihan 18 :Studi Kasus
     Cari dan terapkan 10 kode html
     Dokumentasikan hasil percobaan dalam bentuk video
     Upload di youtube dengan nama 01 Praktikum dasar-
    dasar html

    38

    Anda mungkin juga menyukai