Praktek Dasar HTML Ulla Delfana Rosiani, ST. Praktek Dasar HTML Anda akan mempelajari tentang: Membuat sebuah home page Memformat text Membuat links ke.

Presentasi berjudul: "Praktek Dasar HTML Ulla Delfana Rosiani, ST. Praktek Dasar HTML Anda akan mempelajari tentang: Membuat sebuah home page Memformat text Membuat links ke."— Transcript presentasi:

1 Praktek Dasar HTML Ulla Delfana Rosiani, ST

2 Praktek Dasar HTML Anda akan mempelajari tentang: Membuat sebuah home page Memformat text Membuat links ke halaman baru Membuat e-mail dan link-link external Memasukkan gambar-gambar Membuat sistem navigasi Merubah warna halaman dan link

3 Target Praktek Dasar HTML Lihat index.html dari Toko Rotiindex.html

4 1. Membuat Home Page Pemberian nama file pada Home page Ketika kamu membuat sebuah Web site, beri nama file pada home pagemu index.html. Penulisan index.html muncul secara otomatis ketika alamat dari Web site diketikkan ke browser. Sebagai contoh, kalau kamu ke www.visibooks.com, home page akan muncul secara otomatis. Hal ini karena nama filenya adalah index.html. Jika nama home page dari Visibooks adalah homepage.html, kamu harus mengetikkan www.visibooks.com/homepage.html untuk dapat memunculkannya.

5 Langkah-langkah membuat Home Page : Buka Notepad Ketik Simpan di My document/HTML/ Simpan sebagai index.html

6 Menampilkan di Web Browser : Buka Web Browser Internet Explorer Buka di menu Open Cari letak file index.html Tampil di Web Browser Setiap akan melihat tampilan setelah dilakukan perubahan pada script HTML:  Simpan (save) perubahan pada Notepad  Refresh pada web browser

7 2. Memformat Text Membuat Halaman Web Sederhana: Home Page tentang Kucing Web Site Kucing-kucing cantik

8 Latihan 1

9 Tag untuk Memformat Text.. Untuk kalimat judul Atribut: align= “center” ; ”right” ; ”left” ; ”justify”.. Untuk Paragraf Atribut: align= “center” ; ”right” ; ”left” ; ”justify” Break line Untuk ganti baris.. Berfungsi seperti tag paragraf  berguna untuk mengelompokkan sejumlah baris teks... Untuk menampilkan hasil seperti yang diformat dlm bahasa HTML. (Lihat hasil)hasil

10 Tag untuk Memformat Text.. Untuk menampilkan kutipan... Untuk singkatan, digunakan untuk menampilkan kepanjangannya ketika mouse menyentuh text tsb... Untuk mengatur jenis, ukuran dan warna tulisan. Atribut: face  jenis size  ukuran color  warna.. Untuk menentukan ukuran default tulisan seluruh halaman.

11 Daftar Tag untuk mengatur text Secara Fisik:..  tebal..  miring..  garis bawah..  lebih besar..  lbh kecil..  subskrip..  superskrip Secara Logis:..  kutipan..  kode program..  penekanan..  konstanta..  text penting..  variabel Font: monoskrip

12 Tag untuk Membuat Daftar Item.. unordered list untuk membuat daftar yang tidak diberi nomer. .. atau bisa dengan.. digunakan sebagai penanda tiap item yang dijadikan daftar(list) atribut: type=“disc”; “square”; “circle”... ordered list untuk membuat daftar dengan urut angka atau huruf. atribut: type=“A”; ”a”; “I”; “I”; “1”(default) start  Nilai awal atau huruf awal dapat ditentukan sendiri .. atau bisa dengan.. digunakan sebagai penanda tiap item yang dijadikan daftar(list) atribut : value  untuk menentukan nomer urut secara bebas.

13 Kode HTML untuk karakter khusus Spasi  &nbsp &  &amp “  &raquo <  &lt >  &gt dll

14 3. Membuat Link ke Halaman Baru Langkah pertama… Buka Notepad Buat file html baru yang merupakan link dari daftar. Simpan dalam folder yang sama dengan file index.html Misal: roticoklatkeju.html

15 Tips: Nama file untuk Web Kebanyakan web server adalah Unix atau berbasis Linux, yang tidak mengijinkan adanya spasi dalam nama file Sebagai contoh, jika nama file adalah halaman rosi.html, akan tampil di kotak URL dari browser sebagai halaman%20rosi.html Juga, Web Server pada unix/linux bersifat case sensitif, jadi penulisan file name dalam huruf kecil, akan mengurangi resiko kesalahan. Buat semua nama file di Web site-halaman, gambar dan folder- dalam bentuk huruf kecil, tanpa spasi. Sebagai Contoh:  Nama File yang benar: roticoklatkeju.html  Yang tidak direkomendasikan: Roti Coklat Keju.html

16 Tips: Memberikan Petunjuk Navigasi dengan Ukuran Text yang Berbeda Judul dari halaman Roti Coklat keju berukuran lebih kecil dibandingkan judul pada Home page. Hal ini karena halaman Roti Coklat Keju berada pada satu level dibawah dari homepage di hirarki situs ini. Home Page Toko Roti  size 1 heading  font-size:16pt Roti Coklat Keju  size 2 heading  font-size:14pt Membuat judul dari halaman Roti Coklat Keju lebih kecl dari judul di home page membantu menunjukkan ke orang dimana mereka berada dalam situs ini. Toko Roti Roti Coklat Keju

17 ..membuat link ke halaman baru Langkah kedua Buka index.html Tambahkan tag dengan atribut href pada isi daftar, misalnya: Roti Coklat Keju Simpan perubahan yang ada, di browser akan tampak Roti Coklat Keju telah menjadi link.

18 Tag untuk membuat Link.. Atribut: href=“URL” target=“_blank” atau “_new”  buka halaman baru Link dengan gambar Dengan menyebutkan tag diantara pasangan tag dan. Menggunakan bookmark Link ke area tertentu pada halaman itu sendiri, caranya: Bab I  link ke bagian lain di halaman yang sama …  link yang dimaksud. Bab I

19 Bagaimana tag anchor (A) bekerja? Tag A membuat link yang dapat di klik ke halaman lain. Sebagai contoh: Halaman dengan nama file ini … …di linkkan ke tulisan ini. New Page

20 URL Absolut dan URL Relatif URL ABSOLUT  http://www.ibm.com/http://www.ibm.com/ Menuliskan protokolnya. URL RELATIF  abc.html Langsung nama filenya.

21 Latihan 2 Lakukan cara yang sama untuk membuat link pada daftar yang kedua dan ketiga.

22 4a. Membuat link ke email Buka index.html Tambahkan tulisan: “Anda dapat mengirimkan email ke kami di r_ulla@yahoo.com”r_ulla@yahoo.com Sebelum alamat email, tambahkan tag r_ulla@yahoo.com Jika alamat email r_ulla@yahoo.com ditekan, akan membuka program mail client yang terseting di PC.r_ulla@yahoo.com

23 4b. Membuat Link Situs Eksternal Pada file index.html, buat tulisan dibawah link ke email: “Anda dapat mengunjungi website kami yang lainnya www.tokokuetradisional.com”www.tokokuetradisional.com Tambahkan link dengan meletakkan tag sebelum tulisan alamat situs tersebut.www.tokokuetradisional.com Penulisan link ke situs luar sangat disarankan menggunakan http://

24 5. Memasukkan Gambar 1. Mengumpulkan dan Menyimpan gambar: Mencari gambar (jpg, gif, atau png). Buat folder gambar atau image di dalam folder yang sama dengan letak file index.html berada. Simpan gambar dalam folder tersebut.

25 5. Memasukkan Gambar 2. Memasukkan gambar Buka file HTML, mis: roticoklatkeju.html Dibawah judul, tambahkan tag: folder nama file gambar Simpan file HTML Refresh web browser.

26 Info: Memanggil file di folder lain Jika akan memanggil nama file Gambar1. jpg dari file index.html, cara memanggilnya adalah sebagai berikut: file: gambar/Gambar1.jpg Jika akan memanggil dari file index2.html, cara memanggilnya adalah: file:../gambar/Gambar1.jpg../  naik folder

27 Tag Memasukkan Gambar Untuk memasukkan gambar. Atribut:  Src  mencari posisi gambar  Align =“top”; “middle”; “bottom”; “left”; “right”  Border  memberi bingkai pada gambar  Alt =“(keterangan gambar)”  untuk teks alternatif;  Height  tinggi gambar  Width  lebar gambar  Vspace  vertikal  Hspace  horisontal

28 6. Membuat Sistem Navigasi Tambahkan tulisan Home pada file roticoklatkeju.html Beri link ke file index.html Tambahkan tulisan daftar isi yang lainnya di samping Home, misal: Home|Roti Coklat Keju|Roti Pisang Coklat|Roti Nanas Beri link pada tiap item Untuk Item yang sesuai halamannya, tidak ada link dan beri huruf tebal.

29 Tips: Menunjukkan “you are here” Sistem navigasi site seharusnya menunjukkan ke orang dua hal: dimana mereka berada dan kemana mereka dapat pergi Untuk menunjukkan ke orang dimana mereka berada, buat link yang berhubungan dengan halaman yang sedang aktif dengan tulisan biasa. Hal ini membuat user tahu kalau mereka tidak bisa ke halaman ini, mereka harusnya melihat itu. Misalnya: Home | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier You are here Tulisan tebal memberi pesan “ kamu disini”.

30 6b. Membuat Gambar menjadi Link Sebagai latihan: Buka file index.html Masukkan gambar di bawah daftar item. Beri tag sebelum tag dan ditutup dengan

31 Latihan 3 Tambahkan navigasi untuk semua file daftar item. Beri Link pada semua gambar di file index.html

32 7. Merubah Warna Halaman dan Link Untuk merubah warna dapat dilakukan dari tag, dg atribut:  Bg color  warna background  Link  warna link

33 Info: Warna Hexadesimal Format ffffcc adalah warna kuning untuk warna hexadesimal. Warna-warna Hexadesimal memungkinkan anda untuk bisa lebih banyak kombinasi warna yang bisa terbentuk dibandingkan dengan kata-kata (misalnya: blue, yellow,dll) Komputer membentuk warna sebagai kombinasi Red Green Blue (RGB). Di dalam warna hexadesimal:  pasangan huruf atau angka yang pertama mendefinisikan warna merah (red).  pasangan huruf atau angka yang kedua mendefinisikan warna hijau (green)  pasangan huruf atau angka yang ketiga mendefinisikan warna biru (blue) Nilai warna terbentang dari nilai maximal warna (ff) hingga tidak ada warna sama sekali (00) :

34 Selamat mencoba

35