HTML ( HyperText Markup Language)

Mata Kuliah : Pemrograman Berbasis Web

Pertemuan 2 Oleh : Nufan Balafif

htML (hypertext markup language) 





Adalah bahasa pemrograman Web (client) yang dikhususkan untuk pengolahan dokumen. HTML mendefinisikan sebuah elemen yang terdiri dari teks, paragraf, operasi teks, pengaturan huruf, tautan, media gambar, video, video flash atau sebuah aplikasi (form). Dalam penulisan HTML diawali dengan sebuah tag. Dalam HTML setiap element memiliki definisi masing-masing.

Hirarki html HTML HEAD







BODY TITLE

ELEMENT

META LINK/STYLE / SCRIPT

FORM

HTML = Untuk mengidentifikasi bahwa dokument yang digunakan ditulis menggunakan HTML HEAD = Mendeskripsikan tentang informasi dari sebuah halaman web BODY = Berisi tentang isi dokumen yang akan ditampilkan di web browser

CONTOH html

KONSEP ELEMENT HTML

Sumber : Learning Web Design Third Edition, O’Reilly Media

ELEMENT (MARKUP TEXT-BUILDING BLOCKS)

Type

Element

Headings

h1,h2,h3,h4,h5,h6

Paragraph

p

Block (long) quotes

blockquote

Preformatted text

pre

Horizontal rules (line)

hr

Unordered list

ul

Ordered list

ol

List item

li

Definition list

dl

Term

dt

Definition

dd

LIST ELEMENT Di dalam sebuah paragraf biasa terdapat list (daftar) urutan.  Ada 3 tipe dalam list 1. Unordered Lists (

• )= Koleksi dari item-item yang tidak beraturan (tidak bernomor). 2. Ordered Lists (
  1. )= Koleksi dari item-item yang berurutan sesuai dengan nomor urutnya. 3. Definition Lists (

     )= Daftar item-item yang berisi penjelasan dari item. 
     
     ELEMENT (Presentational inline text) Eleme nt
     
     Description
     
     b
     
     Menebalkan huruf
     
     big
     
     Membuat teks berukuran lebih besar dari teks asalnya
     
     center
     
     Membuat teks rata tengah
     
     font
     
     Memberikan spesifikasi pada sebuah text
     
     i
     
     Membuat teks miring
     
     s
     
     Memberikan garis tengah pada sebuah teks
     
     small
     
     Membuat teks berukuran lebih kecil dari teks aslinya
     
     strike
     
     Memberikan garis tengah pada sebuah teks
     
     sub
     
     Membuat teks lebih kecil dan berada di bawah teks normal
     
     sup
     
     Membuat teks lebih kecil dan berada di atas teks normal
     
     u
     
     Membuat teks bergaris bawah
     
     tt
     
     Memberikan tipe pada teks (berupa tipe font)
     
     Generic Elements (div, CLASS dan span)
     
     
     
     
     
     Element div, class, dan span digunakan untuk menata sebuah halaman (tampilan) baik bentuk dokumen, list, objek (form). Penggunaan div, class, dan span biasanya terkair dengan penggunaan CSS (Cascading Style Sheet).
     
     KARAKTER SPESIAL Karakt er
     
     Nama
     
     Angka
     
     Deskripsi
     
      
     
       Membuat spasi
     
     &
     
     &
     
     &
     
     Apersen
     
     ‘
     
     '
     
     '
     
     Apostrof
     
     <
     
     <
     
     < Lebih kecil
     
     >
     
     >
     
     > Lebih besar
     
     ©
     
     ©
     
     © Lambang hak cipta
     
     ™
     
     ™ ͐ 2;
     
     Lambang Merek terdaftar
     
     Elements ( LINK/tautan ) 
     
     
     
     
     
     Jika kita membuat halaman sebuah web pasti tidak lepas dari tautan dengan halaman di dalam web itu sendiri atau tautan dengan URI halaman web yang lain, atau tautan ke email. Di dalam html element link (tautan) itu dituliskan dengan ..... Contoh :
     
     LINK/tautan di dalam folder 
     
     klik
     
     Web
     
     Index.html
     
     contoh
     
     nama.html
     
     LINK/tautan satu folder ke bawah 
     
     klik
     
     Web
     
     Index.html
     
     nama.html
     
     contoh
     
     sample
     
     alamat.html
     
     LINK/tautan satu folder ke atas 
     
     
     
     klik tautan dari nama.html untuk mengakses index.html
     
     klik tautan dari alamat.html
     
     untuk mengakses index.html
     
     Web
     
     Index.html
     
     nama.html
     
     contoh
     
     sample
     
     alamat.html
     
     LINK/tautan satu halaman pada identifikasi tertentu  
     
         
     
     Contoh : H Pada contoh di atas digunakan untuk mengakses id=textH pada satu halaman. Implementasinya :

     Poin H

     Bagian H

     Konsep H

     bla..bla...bla...bla

     
     
     ELEMENT (IMG / tautan gambar) 
     
     Contoh : Element dan Attribut
     
     Deskripsi
     
     Img
     
     Memasukkan gambar src=“url”
     
     Lokasi dari gambar
     
     width=“angka”
     
     Memodifikasi lebar gambar
     
     height=“angka”
     
     Memodifikasi tinggi gambar
     
     title=“text”
     
     Memberikan judul gambar
     
     ELEMENT (TABLE / TABEL)      
     
     Contoh :
     
     ELEMENT (TABLE / TABEL) Element dan Attribut
     
     Deskripsi
     
     table
     
     Membuat tabel
     
     cellpadding=“num”
     
     Memberikan jarak pada sel
     
     cellspacing=“num”
     
     Memberikan jarak antar sel
     
     tr
     
     Membuat baris baru
     
     th
     
     Membuat header pada sebuah tabel (opsional) colspan=“num”
     
     Jumlah kolom di dalam sel
     
     rowspan=“num”
     
     Jumlah baris di dalam sel
     
     td
     
     Membuat cel (kolom) colspan=“num”
     
     Jumlah kolom di dalam sel
     
     rowspan=“num”
     
     Jumlah baris di dalam sel
     
     ELEMENT FORM 
     
     
     
      
     
      
     
     Element Form seringkali digunakan bersamaan dengan Bahasa pemrograman server misalnya dengan PHP. Form biasanya digunakan untuk pengolahan sebuah data. Bentuk Element Form:

     <element>.......

     
     
     ELEMENT (FORM) Element dan Attribut
     
     Deskripsi
     
     Form
     
     Membuat Form
     
     action=“#”
     
     Tingkah laku (pekerjaan) dari sebuah form
     
     method=“post/get”
     
     Metode yang digunakan untuk pengambilan dalam di dalam form
     
     name=“#”
     
     Untuk mengidentifikasi form
     
     enctype=“”
     
     Tipe dari sebuah form
     
     Text
     
     Element dari sebuah text field
     
     Textarea
     
     Element dari sebuah text area
     
     Select
     
     Element dropdown list
     
     Button
     
     Element dari sebuah tombol
     
     Submit
     
     Element sebuah tombol aksi
     
     Radio
     
     Element dari sebuah pilihan
     
     Check
     
     Emelent sebuah penanda
     
     name=“”
     
     Nama dari sebuah elemen
     
     id=“”
     
     Identifikasi dari sebuah elemen
     
     Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin.
     
     Wassalamu’alaikum wr. Wb. Sumber: 1. Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M .Deitel, Prentice Hall. 2. Learning Web Design Third Edition, Jennifer Niederst Robbins, O’Reilly Media 3. 4.
     
     http://www.w3c.org http://www.w3schools.com
     
     Next >> CSS (cascading style sheet)