Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML (Hypertext Markup Language) 1. SKEMA DASAR DOKUMEN HTML Judul dokumen Isi dokumen HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian.

Presentasi serupa


Presentasi berjudul: "HTML (Hypertext Markup Language) 1. SKEMA DASAR DOKUMEN HTML Judul dokumen Isi dokumen HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian."— Transcript presentasi:

1 HTML (Hypertext Markup Language) 1

2 SKEMA DASAR DOKUMEN HTML Judul dokumen Isi dokumen HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan) 2

3 Tag-tag HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.... Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya menghasilkan output yang sama. 3

4 Bentuk dari tag HTML sebagai berikut: Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut. Contoh: BODY merupakan element, BGCOLOR (Background) merupakan atribut yang memiliki nilai lavender. 4

5 Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note Pad atau editor lainya. Caranya: 1. Ketikkan tag-tag berikut di notepad. 5

6 2. Simpan dengan nama file one.htm atau one.html 3. Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini. 6

7 Struktur HTML Document HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML. HEAD Bagian header dari document HTML di apit oleh tag di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. 7

8 BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. Welcome to HTML Document HTML yang Pertama 8

9 DAFTAR TAG Dokumen Header Judul dokumen Isi dokumen … Judul paragraf Paragraf,,,, Atribut Ganti baris Font,, Enumerasi Garis mendatar Gambar Link (kaitan/rujukan) Tabel Komentar,, Frame (bingkai) Formulir isian,, Komponen isian pada formulir Link berdasar area pada gambar, Pengelompokan elemen dokumen 9

10 Tag Judul (Heading) Judul paragraf n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 10

11 Tag Paragraf (Paragraph) paragraf Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. 11

12 Tag Atribut 1 (Bold, Italic, Underline) Kalimat yang dicetak tebal Kalimat yang dicetak miring Kalimat yang digarisbawahi Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal 12

13 Tag Atribut 2 (Superscript, Subscript) bagian yang dicetak tinggi bagian yang dicetak rendah Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. (x 1 + x 2 ) 2 = x x x 1 x 2 2H 2 + O 2 = 2 H 2 O (x 1 + x 2 ) 2 = x x x 1 x 2 2H 2 + O 2 = 2 H 2 O (x 1 + x 2 ) 2 = x x x 1 x 2 2H 2 + O 2 = 2 H 2 O 13

14 Tag Ganti Baris (Break line) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : Perkenalkan, nama saya..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Ganti Baris Paragraf 14

15 Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Ukuran : kalimat n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran satu, dua, tiga, empat, lima, enam, tujuh Ukuran satu, dua, tiga, empat, lima, enam, tujuh Ukuran satu, dua, tiga, empat, lima, enam, tujuh 15

16 Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Jenis huruf : kalimat nama font = Times New Roman, Arial, Courier New, Verdana, dll. Homepage ini masih dalam tahap pengembangan 16

17 Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Warna : kalimat RR = 00.. FF (intensitas warna merah dalam heksadesimal) GG = 00.. FF (intensitas warna hijau dalam heksadesimal) BB = 00.. FF (intensitas warna biru dalam heksadesimal) Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua 17

18 List HTML 18 List merupakan bentuk yang biasa kita gunakan untuk menguraikan daftar sesuatu. Jenis-jenis list yang terdapat dalam HTML adalah 1. List dengan nomor (Ordered List) : 1. Donny 2, Beni 3. Soni 2. List tanpa nomor (Unordered List) : - Shinta - Shanti - Tuti 3. List definisi. Coffee Black Hot Drink Milk White Cold Drink

19 Tag Enumerasi (List, Unordered List, Ordered List) item Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol (bullet) kelompok item ini harus diapit oleh tag dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag Ada beberapa sektor potensial: Pariwisata Seni Budaya Sektor tersebut merupakan... Fasilitas penginapan di Indonesia: Losmen Losmen merupakan tempat penginapan yang berskala kecil Hotel Hotel melati Hotel berbintang Perkembangan dalam... Ada beberapa sektor potensial: Pariwisata Seni Budaya Sektor tersebut merupakan... Fasilitas penginapan di Indonesia: Losmen Losmen merupakan tempat penginapan yang berskala kecil Hotel Hotel melati Hotel berbintang Perkembangan dalam... Ada beberapa sektor potensial:  Pariwisata  Seni  Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel o Hotel melati o Hotel berbintang Perkembangan dalam... 19

20 Definition List 20 Definition List adalah jenis daftar yang menggunakan tag dan. Untuk pembuatan itemnya menggunakan dan. Jika item mempunyai sub item maka perlu membuatnya dengan menggunakan tag dan. Contoh : ada gula ada semut Dimana ada tempat yang bagu, Biasanya Banyak dikunjungi orang

21 Tag Garis Mendatar (Horizontal Line) membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. 21

22 Menampilkan Karakter Khusus (Simbol) Daftar Karakter yang sering di jumpai dalam Halaman Web : SIMBOLENTITAS KARAKTER KETERANGAN &&Ampersand <<Lebih Kecil >>Lebih Besar ®®Registerd Trademark ©©Copyright ±±Plus-Minus °°Derajat ™™Trademark ¼¼Seperempat ½½Setengah ¾¾Tiga perempat ÷÷Tanda Bagi 22

23 Teks Demo Menampilkan Karakter Khusus (Simbol) & : Ampersand < : Kurang Dari > : Lebih Dari ® : Registerd ©: Copyright &plumn;: Plus-Minus ™ : Trademark °: Derajat ¼: Seperempat ½:: Setengah ¾: Tiga Perempat 23

24 Tag Gambar (Image) NamaFileGambar = file gambar yang mempunyai ekstensi.GIF,.JPG,.PNG. Contoh : Jika file yang akan ditampikan berada di directory atau folder lain, maka perlu Menyebutkan lokasi dari file tersebut : Contoh : Latihan : Gambar Demo Menambahkan Gambar Pada Halaman WEB Menampilkan Gambar Pertama 24

25 TOP : Teks diletakan diatas Middle : Teks diletakan di tengah-tengah Bottom : Teks diletakan di bawah Latihan : Alignment Gambar ALIGN TOP ALIGN MIDDLE ALIGN Bottom 25 Mengatur Letak Teks Terhadap Gambar

26 Menggabungkan Gambar dan Teks 26

27 27

28 Memperbesar dan memperkecil Ukuran Gambar Gambar Demo Memperkecil Gambar Gambar ukuran asli (500X375 Pixel) :

29 29

30 30

31 31

32 Tag Tabel (Table) - data definisi tabel Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.  Tag untuk penanda baris : definisi baris  Tag untuk penanda kolom : data  Tag untuk membuat judul kolom dari suatu tabel : …..  Tag untuk menyertakan judul table : ….. aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff 32

33 Menentukan Bingkai (Border) Tabel Tabel Demo Membuat Bingkai Table Daftar Harga Komputer Laptop No. Merek Seri / Model Harga (±) 1 ACER Dual Core Rp,

34 Lanj ….. 2 Sony VAIO Core 2-Duo Rp Toshiba Core 2-Duo Rp

35 Mengatur Tinggi & Lebar Sel Tabel Tabel Demo Membuat Bingkai Table Daftar Harga Komputer Laptop No. Merek Seri / Model Harga (±) 35

36 Mengatur Warna Background Sel 2 Sony VAIO Core 2-Duo Rp Toshiba Core 2-Duo Rp

37 Menyertakan Gambar dalam Sel Tabel Demo Membuat Bingkai Table Daftar Harga Komputer Laptop No. Merek Seri / Model Harga (±) Gambar 37

38 Lanj ….. 2 Sony VAIO Core 2-Duo Rp Toshiba Core 2-Duo Rp

39 Menggunakan Atribut Rowspan Tabel Demo Membentang Baris Menggunakan ROWSPAN Merek Seri / Model TOSHIBA Dual Core Core 2-Duo Forth Core AMD 39

40 Menggunakan Atribut Colspan Tabel Demo Membentang Colom Menggunakan Colspan Merek Seri / Model TOSHIBA Dual Core Core 2-Duo Forth Core AMD 40

41 Tag Link (Anchor) Kata yang di-click Kata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Ada 3 Jenis Link : 1. Link Absolut : Link yang menujuk ke halaman dari situs web lain. This Test is Displayed 2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada didalam situs web yang sama. Home 3. Link dalam dokumen yang sama : Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Menuju Bab 2 41

42 Contoh Link Relatif File : Dokumen_1.html Link Demo Membuat Link Relatif Dokumen 1 Klik Link di bawah ini untuk melihat isi halaman web pada Dokumen_2.html a href=“link-dokumen 2.html”>Lihat Dokumen 2 42

43 Lanj ……. File : Dokumen_2.html Link Demo Membuat Link Dokumen 2 Ini adalah isi halaman yang terdapat pada dokumen 2, untuk kembali ke Halama 1, silahkan klik Link di bawah ini Kembali ke Halaman 1 43

44 Contoh Link Absolut Link Demo Membuat Link Absolut Pilih Situs Favorit Anda : Detik Kompas Yahoo 44

45 Lanj …….  Link Ke bagian Dokumen Tertentu Link ini dapat dibedakan lagi menjadi dua jenis 1> Link ke bagian tertentu dalam dokumen yang sama Teks atau Gambar 2> Link ke bagian tertentu dalam dokumen lain Teks atau Gambar  Menjadikan Gambar sebagai Link 45

46 Tugas 46 Buatkan Tag Link seperti pada gambar di bawah ini : Buatkan Tag layout isi dokumen seperti di bawah ini :


Download ppt "HTML (Hypertext Markup Language) 1. SKEMA DASAR DOKUMEN HTML Judul dokumen Isi dokumen HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian."

Presentasi serupa


Iklan oleh Google