Praktek Dasar HTML

Download Report

Transcript Praktek Dasar HTML 

Praktek Dasar HTML
Ulla Delfana Rosiani, ST
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
Target Praktek Dasar HTML
Lihat index.html dari Toko Roti
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.
Langkah-langkah membuat Home
Page :
Buka Notepad
 Ketik <HTML>
 Simpan di My document/HTML/
 Simpan sebagai index.html

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
2. Memformat Text
Membuat Halaman Web Sederhana:
<HTML>
<HEAD>
<TITLE>Home Page tentang Kucing</TITLE>
<HEAD>
<BODY>
Web Site Kucing-kucing cantik
</BODY>
</HTML>
Latihan 1
Tag untuk Memformat Text





<H1>..</H1>
<H2>..</H2>
<H3>..</H3>
(Lihat hasil)
<H4>..</H4>
<H5>..</H5>
<H6>..</H6>
Untuk kalimat judul
Atribut: align= “center” ; ”right” ; ”left” ; ”justify”
<p>.. </p>
Untuk Paragraf
Atribut: align= “center” ; ”right” ; ”left” ; ”justify”
<br> Break line
Untuk ganti baris
<div>..</div>
Berfungsi seperti tag paragraf  berguna untuk mengelompokkan sejumlah baris teks.
<pre>..</pre>
Untuk menampilkan hasil seperti yang diformat dlm bahasa HTML.
Tag untuk Memformat Text




<blockquote>..<blockquote>
Untuk menampilkan kutipan.
<acronym>..<acronym>
Untuk singkatan, digunakan untuk menampilkan kepanjangannya
ketika mouse menyentuh text tsb.
<font>..</font>
Untuk mengatur jenis, ukuran dan warna tulisan.
Atribut: face jenis
size  ukuran
color  warna
<basefont>..</basefont>
Untuk menentukan ukuran default tulisan seluruh halaman.
Daftar Tag untuk mengatur text
Secara Fisik:
 <b>..</b>  tebal
 <i>..</i>  miring
 <u>..</u>  garis bawah
 <big>..</big>  lebih besar
 <small>..</small> lbh kecil
 <sub>..</sub>  subskrip
 <sup>..</sup> superskrip
Secara Logis:

<cite>..</cite>  kutipan
<code>..</code> kode program
<em>..</em> penekanan
<samp>..</samp> konstanta

<strong>..</strong> text penting



<var>.. </var> variabel
Font: monoskrip

Tag untuk Membuat Daftar Item

<ul>..</ul> unordered list
untuk membuat daftar yang tidak diberi nomer.

<li>..</li> atau bisa dengan <li>..<br>
digunakan sebagai penanda tiap item yang dijadikan daftar(list)
atribut: type=“disc”; “square”; “circle”.

<ol>..</ol> 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
<li>..</li> atau bisa dengan <li>..<br>
digunakan sebagai penanda tiap item yang dijadikan daftar(list)
atribut : value  untuk menentukan nomer urut secara bebas.
Kode HTML untuk karakter khusus
Spasi 
 &

 “

 <

 >

dll

&nbsp
&amp
&raquo
&lt
&gt
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
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 folderdalam bentuk huruf kecil, tanpa spasi.
Sebagai Contoh:


Nama File yang benar: roticoklatkeju.html
Yang tidak direkomendasikan: Roti Coklat Keju.html
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



Toko Roti
Roti Coklat Keju



size 1 heading
font-size:16pt
size 2 heading
font-size:14pt
Roti Coklat Keju
Membuat judul dari halaman Roti Coklat Keju lebih kecl dari judul di home
page membantu menunjukkan ke orang dimana mereka berada dalam situs
ini.
..membuat link ke halaman baru
Langkah kedua
 Buka index.html
 Tambahkan tag <a> dengan atribut href
pada isi daftar, misalnya:
<li><a href=”roticoklatkeju.html”>Roti Coklat Keju</a></li>

Simpan perubahan yang ada, di browser akan
tampak Roti Coklat Keju telah menjadi link.
Tag untuk membuat Link

<A>..</A>
Atribut: href=“URL”
target=“_blank” atau “_new”  buka halaman
baru

Link dengan gambar
Dengan menyebutkan tag <img> diantara pasangan tag <a> dan </a>.
Menggunakan bookmark
Link ke area tertentu pada halaman itu sendiri, caranya:
<a href=“#bab1”>Bab I</a>  link ke bagian lain di halaman yang sama
…
<a name=“#bab1”>  link yang dimaksud.
Bab I

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.
<a href=”filename.html”>New Page</a>
URL Absolut dan URL Relatif
URL ABSOLUT  http://www.ibm.com/
Menuliskan protokolnya.
 URL RELATIF  abc.html
Langsung nama filenya.

Latihan 2

Lakukan cara yang sama untuk membuat
link pada daftar yang kedua dan ketiga.
4a. Membuat link ke email



Buka index.html
Tambahkan tulisan: “Anda dapat mengirimkan
email ke kami di [email protected]”
Sebelum alamat email, tambahkan tag
<a href=“mailto:[email protected]”>[email protected]</a>

Jika alamat email [email protected] ditekan,
akan membuka program mail client yang
terseting di PC.
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”
Tambahkan link dengan meletakkan tag <a
href=“http://www.tokokuetradisional.com”>
sebelum tulisan alamat situs tersebut.
Penulisan link ke situs luar sangat disarankan
menggunakan http://
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.
5. Memasukkan Gambar
2. Memasukkan gambar
 Buka file HTML, mis: roticoklatkeju.html
 Dibawah judul, tambahkan tag:
<img src=“gambar/roticoklatkeju.jpg”>
folder nama file gambar
 Simpan file HTML
 Refresh web browser.
Info: Memanggil file di folder lain
www

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
/gambar
Gambar1.jpg
/folder 1
index2.html
/folder 2
Index.html
Tag Memasukkan Gambar

<img>
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
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.
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”.
6b. Membuat Gambar menjadi Link
Sebagai latihan:
 Buka file index.html
 Masukkan gambar di bawah daftar item.
 Beri tag <a href=..> sebelum tag <img
src=..> dan ditutup dengan </a>
Latihan 3
Tambahkan navigasi untuk semua file
daftar item.
 Beri Link pada semua gambar di file
index.html

7. Merubah Warna Halaman
dan Link
Untuk merubah warna dapat
dilakukan dari tag <body>, dg atribut:
color  warna background
Link  warna link
Bg
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) :
Selamat mencoba