Top Banner
KONSEP DASAR HTML HTML ( HyperText Mark up Language ) hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah- naskah lainnya markup menunjukkan bahwa pada file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web Language menunjukkan bahwa HTML bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen
30

Konsep HTML

Sep 15, 2015

Download

Documents

Dian Tri Utami

nnn
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • KONSEP DASAR HTML

    HTML ( HyperText Mark up Language )

    hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya

    markup menunjukkan bahwa pada file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web

    Language menunjukkan bahwa HTML bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen

  • contoh

    FORMAT PENULISAN HTML

    Contoh HTML

    Belajar Desain Web

  • PENGATURAN BACKGROUND

    Background warna Background gambar

  • AquaBlackBlueFuchsia

    GrayGreenLimeMaroon

    NavyOlivePurpleRed

    SilverTealWhiteYellow

    PENGATURAN BACKGROUND WARNA

    Warna Dasar

    Belajar Desain Web

    Contoh:

  • PENGATURAN BACKGROUND WARNAKombinasi Warna

    #_ _ _ _ _ _

    R G B 0 1 2 3 4 5 6 7 8 9 A B C D E F

    terang

    gelap

    contoh #FFFFFF = putih#000000 = hitam

    Belajar Desain Web

    Contoh:

  • PENGATURAN GAMBAR

    Keterangan GIF JPEGDukungan Browser Sangat Bagus Bagus

    Jenis Warna 256 16,7 juta

    Interlace Image Ya Tidak

    Transparent Image Ya Tidak

    Animasi Ya Tidak

    Jenis Pemadatan Lossless Compression Lossy Compression

    Ukuran File Lebih Kecil Lebih Besar

    Pemadatan Gambar Logo/Icon Sangat Bagus Kurang

    Fotografi Jelek Sangat Bagus

    Waktu Menampilkan Lebih Cepat Lebih Lambat

    Syarat : - Ukuran file maksimal 100 Kb- Lebar : 500 pixel, Tinggi : 400 pixel

    Format Gambar : - GIF- JPG- Bitmap- Tiff- Targa

    - Windows Metafiles- Sun Raster- PostScript- PCD- PCX

  • MENAMPILKAN GAMBAR

    Format Penulisan:

    < IMG SRC = WIDTH = HEIGHT = ALT = BORDER = >

    menampilkan file gambar

    Mengatur lebar gambar

    Mengatur tinggi gambar

    menampilkan teks pada saat mouse didekatkan pada gambar

    menampilkan frame pada gambar

    Contoh:

  • PENGATURAN BARIS DAN PARAGRAPH

    Belajar Desain Web

    Belajar Desain Web

    Pengaturan barisPengaturan paragraph

  • PENGATURAN PARAGRAPH

    Belajar Desain Web Belajar Desain Web Belajar Desain Web

    Pengaturan Paragraph : . . . . .

    Left Right Center

  • PREFORMAT TEKS

    Preformat teks digunakan untuk menampilkan teks sesuai dengan yang ditulis pada editor teks

    Belajar

    DesainWeb

    Belajar Desain

    Web

    Contoh 1: Contoh 2:

  • PENGATURAN FONT

    .

    Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7)

    Digunakan untuk mengatur jenis huruf,misal: Arial, Times New Roman, Courier, dll

    Digunakan untuk mengatur warna font,misal: Red, Yellow, #00FF00, dll

    BELAJAR DESAIN WEB

    Contoh:

  • ..

    ..

    ..

    ..

    ..

    ..

    ..

    ..

    MODIFIKASI FONT

    Cetak tebal font

    Garis bawah

    Cetak miring font

    Garis tengah

    Subscript

    Superscript

    Font cetak kecil

    Font cetak besar

  • CONTOH MODIFIKASI FONT

    Teks Cetak TebalGaris Bawah TeksTeks Cetak MiringTeks Coret TengahH2O24smallbig

  • MEMBUAT JUDUL (HEADING)

    .. .. .. .. .. ..

    ..

    left right center

    Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

    Contoh:

  • NUMBERING (ORDERED LIST)

    ... ... ...

    Format Penulisan:

    Daftar Matakuliah:

    KalkulusDesain WebBahasa Inggris

    Contoh:

  • NUMBERING (ORDERED LIST)

    ... ... ...

    Format Penulisan:

    Daftar Matakuliah:

    KalkulusDesain WebBahasa Inggris

    Type: 1 : 1,2,3,a : a,b,c,d,A : A,B,C,D,.i : i,ii,iii,iv,I : I,II,III,IV,

    Contoh:

  • NUMBERING (ORDERED LIST)

    ... ... ...

    Format Penulisan:

    Daftar Matakuliah:

    KalkulusDesain WebBahasa Inggris

    Contoh:

  • ... ... ...

    Format Penulisan:

    Daftar Matakuliah:

    KalkulusDesain WebBahasa Inggris

    BULLETS (UN-ORDERED LIST)

    Contoh:

  • BULLETS (UN-ORDERED LIST)

    ... ... ...

    Format Penulisan:

    Daftar Matakuliah:

    KalkulusDesain WebBahasa Inggris

    Type: - Disc- Circle- Square

    Contoh:

  • HYPERLINKFormat Penulisan:

    .

    File yang akan dijadikan linkMenentukan obyek window yang akan dijadikan link ( _blank, _parent )

  • CONTOH HYPERLINK

    Klik disini

    Klik disini

  • Buatlah 5 halaman web desain (5 file .htm) yang berisi informasi atau tema dari sebuah tabloid on-line, dengan ketentuan sebagai berikut :

    Masing-masing bagian berisi background halaman yang berbeda-beda Masing-masing halaman dapat dibuat link ke halaman yang lain

    Matakuliah : Web Desain

  • TABEL

    Format Penulisan:

    . : untuk pindah baris baru . : untuk menampilkan data pada setiap kolom

  • PENGATURAN UKURAN TABELFormat Penulisan:

  • PENGATURAN BACKGROUND PADA TABELFormat Penulisan:

  • PENGATURAN DATA PADA TABEL

    Format Penulisan:

    RightCenterLeft

    TopMiddleBottom

    ALIGN VALIGN

  • MENGGABUNGKAN KOLOM PADA TABEL

    A

    B C D

    A

    B C D

    1 2 3

    A

    B C D

  • MENGGABUNGKAN BARIS PADA TABEL

    A

    B

    C

    D

    A

    B

    C

    D

    1

    2

    3

    A B

    C

    D

  • CONTOH APLIKASI PEMAKAIAN TABEL

    30%

    25%

    30%

    25%

  • TUGAS 1 Buatlah desain web minimal terdiri dari 5 halaman, dengan ketentuan masing-

    masing halaman mempunyai isi, background, desain, tabel yang berbeda-beda satu sama lain. Dan setiap halaman mempunyai tombol yang dapat dibuat link ke halaman yang lain.

    Contoh tampilan desain:

    MENU 1

    MENU 2

    MENU 3

    MENU 4

    MENU 5

    Selamat datang di web site tabloid on-line yang telah di launching pada tanggal .. ..