HTML

1
HTML

• Hyper Text Markup Language

Hyper Text Markup Language
Hyper Text Markup Language
BASIC
2
PENDAHULUAN

• Apa itu HTML ?
• HTML bukan bahasa pemrograman merupakan bahasa
  yang mendeskripsikan halaman web. Script HTML
  melekat pada browser.
• HTML kepanjangan dari Hyper Text Markup Language.
• HTML menggunakan tag tag untuk mendeskripsikan
  halaman web.
• HTML menggunakan tag pembuka dan tag penutup.
  Contoh
• lthtmlgt ... lt/htmlgt
• ltpgt ... lt/pgt

3
PENDAHULUAN

• Contoh script HTML sederhana
• lthtmlgtltbodygtlth1gtMy First Headinglt/h1gtltpgtMy
  first paragraph.lt/pgtlt/bodygt
• lt/htmlgt
• Setelah diketikkan pada text editor, disimpan
  dengan format ber-ekstensi .htm atau .html

4
HTML ELEMENTS

• HTML Element di mulai dengan start tags / tag
  pembuka
• HTML Element di akhiri dengan end tags / tag
  penutup.
• HTML Element juga mempunyai attribute.

HTML ELEMENTS

• Attribute menunjukkan informasi tambahan tentang
  element (sifat element).
• Attribute hanya di tuliskan pada tag pembuka.
• Cara menuliskan attribute ? nama_attribute
  nilai_attribute
• Contoh ltbody bgcolorredgt ... lt/bodygt

5
HTML HEADING

• HTML Heading di definisikan dengan lth1gt sampai
  lt/h6gt
• Contoh
• lth1gtThis is a headinglt/h1gtlth2gtThis is a
  headinglt/h2gtlth3gtThis is a headinglt/h3gt
• lth4gtThis is a headinglt/h4gtlth5gtThis is a
  headinglt/h5gtlth6gtThis is a headinglt/h6gt
• Tag lthrgt akan membentuk garis horisontal pada
  halaman web.
• Untuk menuliskan comment /komentar diletakkan
  pada tag
• lt!-- ........ --gt

6
HTML PARAGRAPHS

• Untuk membentuk paragraf didefinisikan dengan tag
  ltpgt ... lt/pgt
• Contoh
• ltpgtThis is a paragraph.lt/pgtltpgtThis is another
  paragraph.lt/pgt
• Untuk membuat baris baru digunakan tag ltbrgt

7
HTML TEXT FORMATTING

• Untuk memformat text tebal digunakan tag ltbgt ...
  lt/bgt atau dapat digunakan ltstronggt ... lt/stronggt
• Untuk memformat text miring digunakan tag ltigt ...
  lt/igt atau dapat digunakan ltemgt ... lt/emgt
• Untuk memformat text dengan garis bawah
  /underline digunakan tag ltugt ... lt/ugt

8
HTML LINKS (HYPERLINKS)

• Untuk menunjuk ke halaman lain atau ke alamat
  situs tertentu di gunakan hyperlinks atau links.
• Links untuk menunjuk halaman lain dibentuk dengan
  menggunakan tag
• lta hrefURLgt Links Textlt/agt
• Links untuk menunjuk pada satu halaman digunakan
  tag
• lta nametipsgt Tips Section lt/agt
• lta hreftipsgt Go to tips section lt/agt

9
HTML IMAGES

• Digunakan untuk menampilkan gambar pada halaman
  web. Untuk menyisipkan gambar pada HTML digunakan
  tag
• ltimg srcURL altsome_text gt
• Attribute alt digunakan menampilkan text
  apabila gambar gagal di muat/gambar tidak ada.
  Untuk mengatur lebar gambar digunakan attribute
  width, untuk mengatur tinggi gambar digunakan
  attribute height, nilai attribute nya dalam
  satuan pixel.
• Contoh
• ltimg srcgambar1.jpg altgambar satu
  width100 height100 gt

10
HTML TABLE

• Untuk membuat layout halaman web dapat digunakan
  tabel yang terdiri dari baris dan kolom.
• Tabel didefinisikan dengan tag lttablegt ...
  lt/tablegt
• Pada tabel dibagi menjadi beberapa baris baris
  yang di tuliskan pada tag lttrgt ... lt/trgt
• Dan dalam tiap baris dibagi menjadi beberapa
  content data yang dituliskan pada tag lttdgt ...
  lt/tdgt
• Header informasi pada tabel di definisikan dengan
  tag ltthgt ... lt/thgt
• Pada tabel attribute untuk menampilkan border
  tabel digunakan attribute border. Contoh
• lttable border"1"gt lttrgt lttdgtrow 1, cell
  1lt/tdgt lttdgtrow 1, cell 2lt/tdgt lt/trgt lttrgt lttd
  gtrow 2, cell 1lt/tdgt lttdgtrow 2, cell
  2lt/tdgt lt/trgtlt/tablegt

11
HTML LIST

• HTML List digunakan untuk membuat daftar berurut
  (Ordered List) dan daftar tak berurut (Unordered
  List).
• Ordered List
• Satu
• Dua
• Tiga
• Unordered List
• Satu
• Dua
• Tiga
• Untuk membuat Ordered List digunakan tag ltolgt
  ... lt/olgt masing masing daftar item digunakan
  tag ltligt ... lt/ligt
• Untuk membuat Unordered List digunakan tag ltulgt
  ... lt/ulgt masing masing daftar item digunakan
  tag ltligt ... lt/ligt
• Definitions List untuk membuat daftar dengan
  deskripsi pada masing masing item. Tag ltdlgt
  untuk mendefinisikan list. Untuk mendefinisikan
  item dalam list digunakan tag ltdtgt untuk
  mendeskripsikan item digunakan tag ltddgt

12
HTML LIST

• Contoh
• Ordered List
• ltolgtltligtCoffeelt/ligtltligtMilklt/ligt
• lt/olgt

• Contoh
• Unordered List
• ltulgtltligtCoffeelt/ligtltligtMilklt/ligt
• lt/ulgt

• Contoh
• Definition List
• ltdlgtltdtgtCoffeelt/dtgtltddgt- black hot
  drinklt/ddgtltdtgtMilklt/dtgtltddgt- white cold
  drinklt/ddgt
• lt/dlgt

13
HTML FORMS AND INPUT

• HTML Forms digunakan untuk melewatkan data ke
  server.
• Forms dapat terdiri dari element input seperti
  textfield, check-boxes, radio-button, button,
  submit, reset, dll.
• Form di gunakan tag ltformgt ... lt/formgt

14
HTML FORMS AND INPUT

• Element Input
• 1. TextField
• Membentuk inputan berupa text satu baris.
• Untuk membentuk TextField digunakan tag
• ltinput typetext namenama valueisi /gt
• 2. PasswordField
• Membentuk inputan berupa text satu baris dengan
  inputan di sembunyikan.
• Untuk membentuk PasswordField digunakan tag
• ltinput typepassword namenama valueisi /gt

Inputan

15
HTML FORMS AND INPUT

• 3. Radio Button
• Radio button merupakan inputan untuk melakukan
  pilihan hanya bisa memilih satu pilihan. Untuk
  mendefinisikan radio button digunakan tag
• ltinput typeradio namenama valueisi
  /gt
• 4. CheckBoxes
• Checkbox merupakan inputan untuk melakukan
  pilihan lebih dari 1 pilihan di antara beberapa
  pilihan yang ada. Untuk mendefinisikan CheckBox
  digunakan tag
• ltinput typecheckbox namenama
  valueisi /gt

16
HTML FORMS AND INPUT

• 5. Submit Button
• Submit button digunakan untuk mengirim form data
  ke server. Data dikirimkan ke halaman khusus
  attribute form action. Untuk mendefinisikan
  tombol submit digunakan tag
• ltinput typesubmit namenama
  valueketerangan /gt
• 6. Reset Button
• Reset button digunakan untuk mengosongkan semua
  isi element input yang ada pada Form. Untuk
  mendefinisikan tombol reset digunakan tag
• ltinput typereset namenama
  valueketerangan /gt

17
HTML FORM AND INPUT

• 7. Button
• Button digunakan sebagai tombol biasa yang akan
  bekerja dengan event dari javascript. Untuk
  membentuk element button digunakan tag
• ltinput typebutton namenama
  valueketerangan /gt
• 8. Combo Box
• Combo Box digunakan untuk menampilkan data
  berupa dropdown menu. Untuk membentuk combobox
  digunakan tag
• ltselect namenamagt
• ltoption valueisigt Text lt/optiongt
• ltoption valueisigt Text lt/optiongt
• .....
• lt/selectgt

18
HTML FORM AND INPUT

• 9. Input File
• Input file digunakan untuk mengambil DrivePath
  dari suatu file untuk di proses selanjutnya,
  misalkan Upload data. Untuk membentuk elemen
  input File digunakan tag
• ltinput typefile namenama valueisi /gt

19
HTML FRAMES

• Dengan frame dapat menampilkan lebih dari satu
  dokumen HTML dalam browser yang sama. Masing
  masing HTML dokumen di katakan sebuah frame dan
  masing masing frames berdiri sendiri satu sama
  lain. Struktur frames
• ltframeset cols.., .. rows.. , ..gt  
  ltframe src"frame_a.htm" /gt   ltframe
  src"frame_b.htm" /gt
• ..............................................
  lt/framesetgt
• Frameset Element terdiri satu atau lebih frame
  Element. Cols menyatakan banyak kolom, serta
  ukuran kolom dalam frameset. Rows menyatakan
  banyak baris dalam frameset.

20
HTML IFRAMES

• Iframe digunakan menampilkan halaman web ke dalam
  halaman web. Struktur iframe digunakan tag
• ltiframe srcURL" widthlebar"
  heighttinggi framebordertebal
  bordergtlt/iframegt
• Jika Iframe digunakan sebagai target dari link
• ltiframe srcURL" namenama_iframe"gtlt/iframegt
• ltpgtlta hrefURL" targetnama_iframe"gtIsi
  linklt/agtlt/pgt