HTML (HyperText Markup Language)

Ukuran: px

Mulai penontonan dengan halaman:

Download "HTML (HyperText Markup Language)"

Inge Oesman
7 tahun lalu
Tontonan:

1 HTML (HyperText Markup Language) IMS

2 HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

3 Software yang diperlukan: Text editor sederhana. Contoh: Windows : Notepad Linux : gedit, mcedit, pico, dan vi. Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror.

4 Tag Istilah-Istilah dalam HTML Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: < dan >.

5 Contoh <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf. </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

6 Terdapat pengecualian beberapa tag yang tidak berpasangan, seperti <br> untuk break (pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan self closing tag atau void tag. Untuk penulisannya bisa ditulis dengan <br> atau <br/> HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>.

7 Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada) Pada contoh diatas, <p> Ini adalah sebuah paragraf</p> merupakan element p. Element tidak hanya berisi text, namun juga bisa tag lain.

8 Attribute adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name= value. Value diapit tanda kutip, boleh menggunakan tanda kutip satu ( ) atau dua ( ).

9 Contoh Pada kode HTML di atas, href= adalah atribut. href merupakan nama dari atribut, dan adalah value atau nilai dari atribut tersebut.

10 Tag Utama dalam struktur dokumen HTML <html> <! untuk menyatakan suatu dokumen HTML --> <head> <!-- memberikan informasi mengenai dokumen HTML > <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META > </head> <body> <!-- menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML > </body> </html>

11 Tag Paragraf <p> Tag <p> berfungsi untuk menuliskan sebuah paragraf.

12 Tag Break <br> Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain.

13 Mengatur Style Font

14 Mengatur Style Font (2)

15 Membuat Judul (heading) di HTML Tag Heading biasanya digunakan untuk judul dari paragraf atau bagian dari text yang merupakan judul. Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.

16 Tag Heading

17 Membuat Daftar/List di HTML Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list menggunakan tag <ol> Unordered list menggunakan tag <ul> untuk list sendiri menggunakan tag <li>.

18 Tag <OL>

19 Tag <UL>

20 Membuat Link di HTML tag <a> Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a> Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

21 Tag Link <a>

22 Tag link <a> dengan atribut target

23 Menambahkan Gambar di HTML (tag image) Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan tag <img>.

24 Atribut src dalam tag <img> Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Atribut width dan height dalam tag <img> Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.

25 Tag <img>

26 Membuat Komentar di HTML Tag pembuka komentar adalah <! dan tag penutup > Pernyataan yang ada dalam tag komentar tidak akan tercetak

27 Tag Komentar

28 Membuat Tabel di HTML Membuat tabel menggunakan tag <table>, <tr>, <td>, <th> dan <table border> Tag <table> digunakan untuk memulai tabel Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel. Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel. Tag <th> adalah singkatan dari table header, digunakan untuk membuat judul dari masingmasing item dalam tabel yang dibuat

29 Table Border Border adalah yang akan mengelilingi data dalam tabel yang akan dibuat. <TABLE BORDER> dapat diatur ketebalannya. BORDER = 0 digunakan apabila kita tidak menggunakan border BORDER = 1 digunakan apabila kita akan menggunakan nilai border standar BORDER = 2 digunakan apabila kita akan menggunakan border yang ukurannya tebal

30 CAPTION Caption dalam HTML digunakan untuk memberikan judul pada tabel. TAG <CAPTION> dan diakhiri dengan </CAPTION> Dalam keadaan normal atau default TAG <CAPTION> ditempatkan di bagian atas tabel. Jika ingin mengubah posisi/letak dari judul tabel, dapat ditambahkan dengan perintah lain, yaitu ALIGN. ALIGN=TOP (posisi judul di atas tabel) ALIGN=BOTTOM (posisi judul di bawah tabel)

31 CAPTION (2) Dapat pula mengatur penempatan ALIGN di sebelah kiri, kanan atau tengah. Akan tetapi harus ditambahkan satu komponen atau tag bernama DIV (division). TAG (DIV) dan diakhiri dengan </DIV>

32 TAG <CAPTION> & TAG <DIV>

33 TAG <CAPTION> & TAG <DIV> (2)

34 Tag Table

35 Menggunakan Warna Untuk mengatur warna dasar dalam suatu dokumen atau program HTML menggunakan kode BGCOLOR (Background Color).

36 Kode Warna HTML

37 Kode Warna HTML

38 Kode Warna HTML

39 Kode Warna HTML

40 Kode Warna HTML

41 Pengaturan Warna Huruf

42 Pengaturan Ukuran Huruf

43 Pengaturan Jenis Huruf

44 Menggunakan Background Gambar dan Warna

45 Menggunakan Background Gambar dan Warna

dokumen-dokumen yang mirip

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan