Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 2 A

    Diunggah oleh

    Tombak Moskov
    41 tayangan48 halaman
    Konsep Dasar Web Internet Internet adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global TCP/IP sebagai protokol pertukaran paket untuk melayani miliaran pengguna di seluruh dunia. Web Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertext Transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser.

    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
    Konsep Dasar Web Internet Internet adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global TCP/IP sebagai protokol pertukaran paket untuk melayani miliaran pengguna di seluruh dunia. Web Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertext Transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser.

    Hak Cipta:

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

    Pertemuan 2 A

    Diunggah oleh

    Tombak Moskov
    Konsep Dasar Web Internet Internet adalah seluruh jaringan komputer yang saling terhubung menggunakan standar sistem global TCP/IP sebagai protokol pertukaran paket untuk melayani miliaran pengguna di seluruh dunia. Web Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertext Transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser.

    Hak Cipta:

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

    PERTEMUAN 2

    PENGENALAN HTML
    Hypertext Markup Language (HTML) adalah
    sebuah bahasa untuk menampilkan konten di web.
    HTML sendiri adalah bahasa pemrograman yang
    bebas, artinya tidak dimiliki oleh siapapun,
    pengembangannya dilakukan oleh banyak orang di
    banyak Negara dan bisa dikatakan sebagai sebuah
    bahasa yang dikembangkan bersama-sama secara
    global.
    dokumen HTML adalah dokumen teks yang
    dapat diedit oleh editor teks apapun. Dokumen
    HTML punya beberapa elemen yang dikelilingi oleh
    tag-teks yang dimulai dengan symbol < dan berakhir
    dengan sebuah symbol >.
    Struktur Dasar HTML
    1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
    2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan atau <BODY>. Tag
    kepala ini akan terlebih 2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum
    badan. Tag kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag
    ini berisi tag <META> dan <TITLE>. Tag
    <META> merupakan informasi atau header suatu dokumen HTML. Atribut yang
    dimiliki oleh tag ini antara lain:
    a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara
    otomatis dalam jangka waktu tertentu.
    b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan
    dipanggil.
    c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam
    suatu document HTML boleh ada maupun tidak.
    d. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki
    judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan
    muncul dalam titlebar dari browser.
    e. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.
    Contoh penggunaan script HTML
    Contoh01.php

    Kemudian simpan file di atas di dalam folder


    c:\XAMPP\htdocs\ buat folder baru untuk menyimpan file didalam
    folder htdocs. Simpan file dengan nama contoh01.php.
    Pembuatan nama file pada saat penyimpanan diakhiri dengan
    extention “.html atau “.php
    Untuk melihat hasil dari file di atas dapat menggunakan browser
    Mozilla, google chrome, internet explorer atau jenis browser
    lain. Ketikkan pada address bar
    “Localhost\Nama Folder Penyimpanan\”, kemudian pilih file
    contoh01.php
    Lihat gambar di bawah ini :
    Hasilnya :
    Contoh02.php
    Hasil :
    Contoh script pembuatan tabel
    Contoh03.php
    Jika dilihat di browser, maka terlihat sebagai berikut :
    Latihan :
    Buat script HTML untuk bentuk tampilan di bawah ini :
    Tag dan Elemen HTML
    Penanda perintah di dalam HTML biasanya disebut TAG.
    TAG digunakan untuk menentukan tampilan dari halaman HTML.

    Tag ada yang perpasangan :


    <BEGIN TAG> isi dokumen</END TAG>

    Tag ada yang tidak berpasangan


    <TAG> isi dokumen
    Umumnya elemen terdiri dari tag awal, dengan satu atau lebih atribut,
    beberapa konten dan tag akhir.

    Sumber : http://html.net
    Paragraf dan Peformatan Teks
    Penulisan paragraf bisa menggunakan tag <p>. Untuk
    memformat tulisan/teks bisa menggunakan berbagai macam tag
    sesuai keperluan diantaranya,
    Tag Deskripsi
    <b> Membuat teks tercetak tebal
    <i> Membuat teks miring
    <small> Membuat teks tercetak kecil
    <strong> Menyatakan teks tersebut penting
    <sub> Membuat teks tercetak sebagai subscript
    <sup> Membuat teks tercetak sebagai superscript (pangkat)
    <del> Menyatakan teks yang diapit tag <del> itu dihapus (dicoret)
    <mark> Menyatakan teks yang ditandai (highlighted). Efeknya seperti tulisan
    yang diberi stabilo
    Contoh peformatan teks Simpan dengan nama teks.html

    <HTML>
    <HEAD>
    <TITLE>Tipe-tipe Teks</TITLE>
    </HEAD>
    <BODY>
    Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen. <br>
    Ketiga tipe tersebut ialah tulisan <B>tebal</B>, tulisan <I>miring</I> dan tulisan <U>bergaris
    bawah</U>. <br>
    Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa
    tulisan<br>
    <B><I><U>tebal, miring dan bergaris bawah</B></I></U>.
    </BODY>
    </HTML>
    List
    Untuk menampilkan daftar (List) dalam halaman web,
    • Jika daftar tersebut tidak terurut (tampil
    menggunakan bullet), maka tag yang digunakan
    adalah <UL> yang berarti unordered list.
    • Namun jika daftar tersebut penting urutannya
    gunakan <OL> ordered list
    Contoh Script HTML, LIST
    Frame
    Di dalam HTML ada dua cara buah dasar untuk mendesain layout
    sebuah website yaitu frame dan tag div
    Frame digunakan untuk membagi jendela browser menjadi beberapa
    bagian terpisah

    Untuk membuat sebuah frame, tag yang digunakan adalah :


    • Tag <FRAMESET>
    • Tag <FRAME>

    Frameset adalah suatu frame induk yang dapat menampung beberapa


    frame di dalamnya dan dapat memiliki frameset sendiri.
    Sedangkan frame sendiri adalah dokumen yang terdapat di dalam
    frameset dengan border yang mengelilinginya.
    Tag FRAMESET
    Membagi jendela browser menjadi beberapa bagian terpisah
    <FRAMESET> memiliki beberapa atribut

    Atribut Keterangan
    ROWS Membuat frame secara horizontal sekaligus mendefinisikan lebar
    masing-masing
    COLS Membuat frame secara vertikal sekaligus mendefinisikan lebar
    masing-masing
    BORDERCOLOR Menentukan warna bingkai frame

    Ada dua cara umum mendefinisikan lebar frame pada attribut ROWS dan COLS yaitu
    nilai tetap (fix), nilai persentase,

    contohnya membuat empat buah frame :


    Dengan nilai tetap (berdasarkan resolusi)
    <FRAMESET ROWS=“50,140,400,50”>
    Dengan nilai persentase (berdasarkan lebar jendela browser)
    <FRAMESET ROWS=“20%,40%,20%,20%”>
    Tag Frame
    Tag <FRAME> mempunyai atribut

    Atribut Keterangan
    SRC Menentukan nama file HTML yang digunakan isi frame
    MARINHEIGHT Menentukan batas kiri dan kanan antara dokumen dengan bingkai
    dalam pixel
    NAME Mendefenisikan nama dari objek frame. Nama ini dapat digunakan
    sebagai tujuan sebuah link
    BORDER Menentukan ukuran bingkai frame
    Membagi halaman menjadi 2 Frame
    Simpan dengan nama framekiri.html

    Simpan dengan nama framekanan.html


    Simpan dengan nama frame.html

    Tampilan eksekusi frame.html


    Membagi halaman menjadi 4 frame
    Script homepage.html
    Menu.html

    Menu2.html
    Link
    Link merupakan gambar atau teks yang terkait dengan suatu alamat tertentu,
    ditandai dengan Anchor, yaitu tag <A>
    Tag <A> mempunyai dua atribut, yaitu HREF (anchor untuk sebuah link) dan NAME
    (anchor untuk tujuan).
    Gambar
    Untuk menambahkan gambar gunakan tag <IMG>
    Atribut keterangan
    SRC Menunjukkan URL tau direktori tempat file gambar berada
    WIDTH Lebar gambar (dalam pixel)
    HEIGHT Tinggi gambar (dalam pixel)
    ALIGN Posisi teks disekitar gambar (TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
    ALT Menampilkan teks pengganti gambar jika tidak tampil
    Form
    Form adalah sebuah daftar isian, untuk meminta informasi dari
    user untuk kemudian diolah. Pengolahan dilakukan pada server
    yang menggunakan skrip yang bersifat server side

    Tag yang diperlukan untuk membuat form :


    1. Tag <form>
    2. Tag <TEXTAREA>
    3. Tag <SELECT>
    4. Tag <INPUT>
    1. Tag Form
    Tag <FORM> yang digunakan untuk mendefenisikan sebuah form.
    Mempunyai dua atribut yaitu METHODE dan ACTION.

    Atribut Action
    METHODE Untuk menentukan metode pengolahan form. Pilihan method adalah GET atau
    POST
    ACTION Untuk menentukan URL atau lokasi dari file yang digunakan untuk mengolah
    form tersebut
    2. Tag Textarea
    Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multibaris.
    Beberapa atributnya :
    Atribut Action
    NAME Mendefenisikan nama textarea
    ROWS Menentukan jumlah baris teks area
    COLS Menentukan lebar dari textarea
    3. Tag Select
    Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan.

    Atribut Action
    NAME Mendefenisikan nama objek select
    DISABLED Menentukan apa dropdown list tidak diaktifkan
    SIZE Menentukan berapa pilihan yang akan ditampilkan
    3. Tag Input
    Tag <INPUT> digunakan untuk membuat elemen-elemen untuk meminta
    informasi dari user, misalnya kotak teks, kotak pilihan, tombol dll

    Atribut Action
    NAME Mendefenisikan nama dari elemen input, atribut dituliskan kecuali untuk tipe
    submit dan clear
    SIZE Menentukan lebar elemen input
    MAXLENGHT Menentukan maksimum karakter yang dapat dimasukkan kedalam elemen
    input
    VALUE Untuk kotak teks, menentukan teks yang tertulis
    Untuk check box atau radio, menentukan nilai item yang dipilih
    Untuk submit dan reset, menentukan teks yang tertulis pada tombol
    Tipe input
    TYPE Menentukan tipe input yang dibuat
    Tipe input :
    • Text, membuat kotak teks
    • Password, membuat kotak teks, ditampilkan dengan tanda *
    • Check box, membuat suatu pilihan, yang dapat dipilih lebih
    dari satu
    • Radio, membuat daftar pilihan, yang hanya dapat dipilih satu
    • Reset, membuat tombol yang fungsinya untuk menghapus
    semua isian form.
    • Submit, membuat tombol yang fungsinya mengirim data form
    untuk diolah.
    Contoh form input html
    Colspan dan Rowspan
    Colspan adalah menggabungkan beberapa kolom cell menjadi satu cell
    Rowspan adalah menggabungkan beberapa baris cell menjadi satu cell
    sumber
    Priyanto hidayatullah “pemograman web 2014”
    html.net
    php.net
    Wikipedia
    dll
    Layout Menggunakan Frame, Menu
    dan css
    Cols 1 Cols 1

    Rows
    1

    Rows
    2
    Catatatan :
    Pastikan service Apache pada XAMPP running
    Buat folder pada direktori c/xampp/htdocs
    Kumpul tanggal 15
    Simpan dengan nama Index.html

    Keterangan :
    • * (bintang) : Menandakan sisa ruang tersisa
    • name : Untuk memberi nama pada frame
    <BASE TARGET="nama frame yang dituju">

    Elemen HTML base hanya akan berguna untuk jika link atau bentuk pengiriman
    form ke lokasi yang sama.

    Anda mungkin juga menyukai