Jos Andrian

Noob Bloger-

MEMBUAT UNORDERED LIST

Pendahuluan

Dalam HTML terdapat tag untuk membuat list, baik berupa unordered list maupun ordered list.
Dalam halaman ini kita akan membuat unordered list yaitu list yang tidak terurut, biasanya berupa bulleted list(list dalam simbol tertentu

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Link</title>
</head>
<body>
<ul>
<li>Jeruk</li>
<li>Apel</li>
<li>Duku</li>
<li>Stroberi</li>
<li>Nanas</li>
</ul>
</body>
</html>
</xmp></td>
<td height=”400px” width=”720px”><h2>Hasil Jadi</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Link</title>
</head>
<body>
<ul>
<li>Jeruk</li>
<li>Apel</li>
<li>Duku</li>
<li>Stroberi</li>
<li>Nanas</li>
</ul>
</body>

 

Hasil Jadi

 

  • Jeruk
  • Apel
  • Duku
  • Stroberi
  • Nanas

 

Hasil Jadi

 

  • Jeruk
  • Apel
  • Duku
  • Stroberi
  • Nanas

 

Shortcut Link

Pendahuluan

Shortcut Link berfungsi untuk membanu pengguna website masih dapat membuka link
tanpa menggunakan mouse. Konsep ini mengadopsi shortcut menu pada aplikasi GUI.
Nilai shortcut pada atribut tersebut dapat diganti dengan huruf yang akan anda
gunakan sebai shortcut.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Membuat Anchor</title>
</head>
<body>
<h1>
<a name=”daftar”>Daftar Isi</a>
</h1>
<p>
<a href=”#hal1″accesskey=”v”>Halaman 1</a>(Alt+V,Ctr+V)<br />
<a href=”#hal2″accesskey=”w”>Halaman 2</a>(Alt+W,Ctr+W)<br />
<a href=”#hal3″accesskey=”x”>Halaman 3</a>(Alt+X,Ctr+X)<br />
</p>
<h1>
<a name=”hal1″>Halaman 1</a>
</h1>
<p>
Sebuah situs web tidak bisa berdiri sendiri. Setiap situs web harus
terintegrasi dengan suatu link. Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu obyek (dpat berupa teks maupun gambar, bisa juga
dalam bentuk komponen form).
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal2″>Halaman 2</a>
</h1>
<p>
Pada contoh ini, dimisalkan ada sebuah dafatar isi yang terdiri dari 3
buah item yaitu halaman 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tesebut diklik (mis. Halaman 1)
maka browser akan memunculkan konten halaman 1. Sedangkan halaman 1 terletak
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor,
langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah Nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal3″>Halaman 3</a>
</h1>
<p>
Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya

bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam sel tersebut. Untuk memulai membuat tabel dalam halaman web pertama
kali harus diberikan tag pembuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukkan tag untuk membaut baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris. Sedangkan untuk nama
kolom pada tabel gunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam baris tr dan tr.
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
</body>

Hasil Jadi

 

Daftar Isi

Halaman 1(Alt+V,Ctr+V)
Halaman 2(Alt+W,Ctr+W)
Halaman 3(Alt+X,Ctr+X)

Halaman 1

Sebuah situs web tidak bisa berdiri sendiri. Setiap situs web harus
terintegrasi dengan suatu link. Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu obyek (dpat berupa teks maupun gambar, bisa juga
dalam bentuk komponen form).

Kembali ke Daftar Isi

Halaman 2

Pada contoh ini, dimisalkan ada sebuah dafatar isi yang terdiri dari 3
buah item yaitu halaman 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tesebut diklik (mis. Halaman 1)
maka browser akan memunculkan konten halaman 1. Sedangkan halaman 1 terletak
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor,
langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah Nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja

Kembali ke Daftar Isi

Halaman 3

Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya

bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam sel tersebut. Untuk memulai membuat tabel dalam halaman web pertama
kali harus diberikan tag pembuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukkan tag untuk membaut baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris. Sedangkan untuk nama
kolom pada tabel gunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam baris tr dan tr.

Kembali ke Daftar Isi

Membuat Anchor

Pendahuluan

Anchor text adalah teks yang menghubungkan lokasi atau dokumen lain pada sebuah website
dinamakan anchor text seperti halnya suatu link. Anchor text memgang peranan penting pada
SEO khususnya link building juga bagi visitor atau pengunjung website.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Membuat Anchor</title>
</head>
<body>
<h1>
<a name=”daftar”>Daftar Isi</a>
</h1>
<p>
<a href=”#hal1″accesskey=”v”>Halaman 1</a>(Alt+V,Ctr+V)<br />
<a href=”#hal2″accesskey=”w”>Halaman 2</a>(Alt+W,Ctr+W)<br />
<a href=”#hal3″accesskey=”x”>Halaman 3</a>(Alt+X,Ctr+X)<br />
</p>
<h1>
<a name=”hal1″>Halaman 1</a>
</h1>
<p>
Sebuah situs web tidak bisa berdiri sendiri. Setiap situs web harus
terintegrasi dengan suatu link. Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu obyek (dpat berupa teks maupun gambar, bisa juga
dalam bentuk komponen form).
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal2″>Halaman 2</a>
</h1>
<p>
Pada contoh ini, dimisalkan ada sebuah dafatar isi yang terdiri dari 3
buah item yaitu halaman 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tesebut diklik (mis. Halaman 1)
maka browser akan memunculkan konten halaman 1. Sedangkan halaman 1 terletak
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor,
langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah Nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”hal3″>Halaman 3</a>
</h1>
<p>
Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya

bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam sel tersebut. Untuk memulai membuat tabel dalam halaman web pertama
kali harus diberikan tag pembuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukkan tag untuk membaut baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris. Sedangkan untuk nama
kolom pada tabel gunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam baris tr dan tr.
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
</body>

Hasil Jadi

Daftar Isi

Halaman 1(Alt+V,Ctr+V)
Halaman 2(Alt+W,Ctr+W)
Halaman 3(Alt+X,Ctr+X)

Halaman 1

Sebuah situs web tidak bisa berdiri sendiri. Setiap situs web harus
terintegrasi dengan suatu link. Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu obyek (dpat berupa teks maupun gambar, bisa juga
dalam bentuk komponen form).

Kembali ke Daftar Isi

Halaman 2

Pada contoh ini, dimisalkan ada sebuah dafatar isi yang terdiri dari 3
buah item yaitu halaman 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tesebut diklik (mis. Halaman 1)
maka browser akan memunculkan konten halaman 1. Sedangkan halaman 1 terletak
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor,
langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah Nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja

Kembali ke Daftar Isi

Halaman 3

Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya

bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam sel tersebut. Untuk memulai membuat tabel dalam halaman web pertama
kali harus diberikan tag pembuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukkan tag untuk membaut baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris. Sedangkan untuk nama
kolom pada tabel gunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam baris tr dan tr.

Kembali ke Daftar Isi

Membuat Favicon

Pendahuluan

Favicon merupakan singkatan dari favorites icon. Favicon adalah suatu image (icon) yang akan
tampil pada address bar, menu favorites dll pada browser. Untuk membuat favicon, terlebih dulu
kita harus memiliki image berupa icon berukuran 16×16 pixel, usahakan dalam bentuk .ico. Penempatan
perintah membuat favicon terletak didalam blok header.

untuk  membuat Favicon silakan gunakan dan amati script berikut

Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>M3118043_Error Page</title>
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
</head>
<body>
<h1>Error</h1>
<p>
This is an error page. This is an error page. This is an error page. This is an error page.
</p>
</body>
</html>

Hasil

 

Error

This is an error page. This is an error page. This is an error page. This is an error page.

 

 

 

Tutorial HTML

 

HTML adalah kepanjangan dari Hypertext Markup Language dan merupakan salah satu bahasa yang paling banyak digunakan dalam mebuat halaman web.

Hypertext mengacu pada cara di mana halaman web (dokumen HTML) dihubungkan. Jadi, link yang tersedia pada halaman web disebut Hypertext.

Seperti namanya, HTML adalah bahasa Markup yang berarti kamu menggunakan HTML hanya untuk “mark-up” dokumen teks dengan tag yang akan memberitahukan browser struktur untuk menampilkan sebuah desain layout web. Awalnya, HTML dikembangkan dengan maksud untuk mendefinisikan struktur dokumen seperti judul, paragraf, daftar, dan sebagainya untuk memudahkan berbagi informasi ilmiah antara peneliti.

Sekarang, HTML banyak digunakan untuk membuat format halaman web dengan bantuan tag yang berbeda dalam bahasa HTML.

File HTML tidak lebih dari file teks sederhana, yang membuat kita saat mulai menulis dalam HTML, hanya memerlukan teks editor sederhana saja.

Misalnya ada Notepad yang merupakan teks editor yang selalu kita temukan pada komputer berbasis Windows, kalau bingung cara menemukan notepad kamu bisa search distartup menu Windows, saya yakin kamu sudah pada tahu cara membuat notepad. Untuk komputer Mac OSX datang dengan bundel TextEdit. Ada banyak teks editor yang bisa kamu gunakan untuk menulis kode html, dari yang editor sederhana maupun yang lebih advance.

Dalam artikel ini kami telah mengatakan untuk menggunakan teks editor sederhana, seperti Notepad misalnya, tetapi kamu mungkin akan tergoda untuk menggunakan software khusus seperti Adobe Dreamweaver. Kamu harus sangat berhati-hati ketika menggunakan program ini, terutama jika kamu seorang pemula, karena program ini sering memberi kode yang tidak perlu atau non-standar untuk “membantu”-mu.

Jika kamu serius tentang belajar HTML, kamu harus membaca tutorial seperti ini dulu, sehingga kamu setidaknya memiliki pemahaman dasar tentang apa yang sedang terjadi. Software seperti ini tidak akan pernah memberikan kontrol yang sama atas halaman web seperti coding by hand. Jika kamu memutuskan untuk menggunakan  kode-editing khusus, kami merekomendasikan satu di mana kamu masih coding by hand. Mereka dapat, pada kenyataannya, sangat membantu, terutama lebih maju kamu, dalam hal sintaks kode menyoroti dan manajemen file.