Tujuan
Instruksional
Setelah
mengikuti pratikum ini, Mahasiswa diharapkan mampu untuk:
1.
Mahasiswa dapat menerangkan definisi HTML
2.
Mahasiswa dapat menerangkan Tag dasar HTML
3.
Mahasiswa dapat membuat contoh sederhana
menggunakan format teks dasar
4.
Mahasiswa dapat melakukan penyimpanan file
HTML ke dalam Web Server
TEORI PENDUKUNG
Internet merupakan jaringan global yang menghubungkan suatu network
dengan network lainya di seluruh dunia. TCP/IP menjadi protocol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari
internet yang paling cepat berkembang dan paling populer. WWW bekerja
merdasarkan pada tiga mekanisme berikut:
Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu: URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membut document yang bisa di akses melalui web.
Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu: URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membut document yang bisa di akses melalui web.
Browser: Browser
merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan
biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak
yang lainya.
Editor: Program
yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa
anda gunakan diantaranya: Notepad, Microsoft FrontPage, Macromedia Dreamweaver,
dan lain-lain.
Kalau pada bahasa pemrograman kita mengenal code,maka pada HTML kita mengenal yang namanya tag.
Kalau pada bahasa pemrograman kita mengenal code,maka pada HTML kita mengenal yang namanya tag.
Kalau pada bahasa pemrograman kita mengenal code,
maka pada HTML kita mengenal yang namanya tag.
Contoh tag html adalah <head>,
<title>, <body>, <html>, <img>, dan lain-lain.
Tag html tidak bersifat case
sensitive à <body> sama dengan <BODY>.
Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan
body.
Untuk mulai belajar HTML tingkat dasar pada tutorial HTML ini,
beberapa tag dasar harus kita ketahui. Anda tidak perlu cemas apabila
ada tag yang belum di mengerti dalam tutorial HTML ini. Silahkan
langsung coba saja beberapa contoh tag dasar HTML yang dijelaskan di
bawah ini.
Beberapa tag dasar yang digunakan dalam dokumen HTML adalah heading, paragraf, link, dan image.
Heading
Tag heading umumnya digunakan untuk membuat header / pada halaman website. Tag untuk heading terdiri dari tag
<h1> sampai dengan tag <h6>. Sebagai contoh heading pada HTML silahkan coba kode HTML berikut ini :01 | <html> |
02 | <head> |
03 | <title>Contoh Heading</title> |
04 | </head> |
05 | <body> |
06 | <h1>Ini heading 1</h1> |
07 | <h2>Ini heading 2</h2> |
08 | <h3>Ini heading 3</h3> |
09 | <h4>Ini heading 4</h4> |
10 | <h5>Ini heading 5</h5> |
11 | <h6>Ini heading 6</h6> |
12 | </body> |
13 | </html> |
Paragraf (Body)
Untuk membuat teks dalam sebuah paragraf pada dokumen HTML digunakan tag
<p> yang merupakan tag pembuka dan diakhiri dengan tag penutup </p>. Sebagai contoh membuat paragraf pada HTML, silahkan coba contoh kode HTML berikut ini :1 | <html> |
2 | <head> |
3 | <title>Contoh Paragraf</title> |
4 | </head> |
5 | <body> |
6 | <p>Ini merupakan sebuah contoh paragraf dalam HTML.</p> |
7 | <p>Dan ini merupakan contoh paragraf yang lainnya. Sebuah paragraf dapat terdiri dari satu atau beberapa kalimat.</p> |
8 | </body> |
| </html> |
Link
Hyperlink atau link (tautan) adalah sebuah teks atau gambar yang jika
di klik akan membuat browser membuka halaman HTML lain. Jika sebuah
link ditunjuk dengan mouse, biasanya kursor akan berubah menjadi bentuk
menyerupai tangan kecil. Untuk membuat link digunakan tag
<a>. Sebagai contoh link silahkan coba kode HTML berikut ini :1 | <html> |
2 | <head> |
3 | <title>Contoh Link</title> |
4 | </head> |
5 | <body> |
6 | <a href="http://kuliah.imadewira.com">Ini contoh link</a> |
7 | </body> |
8 | </html> |
Image
Seperti dijelaskan sebelum, dokumen HTML selain bisa menampilkan teks bisa juga untuk menampilkan gambar/foto/images. Untuk menampilkan image digunakan tag
<img>.
1 | <html> |
2 | <head> |
3 | <title>Contoh Image</title> |
4 | </head> |
5 | <body> |
6 | <img src="fotoku.jpg" /> |
7 | </body> |
8 | </html> |
Catatan : Untuk contoh kode HTML tentang image diatas, anda
harus menyediakan sebuah gambar bernama “fotoku.jpg” di folder yang sama
dimana anda menyimpan kode HTML tersebut.
DASAR-DASAR PERINTAH HTML
(Untuk digunakan dalam file <body>
<p>Teks Yang Anda Ketik</ p>
» Membuat paragraf (satu spasi antar baris dibuat)
<i>Teks Yang Anda Ketik</i>
» Perintah untuk membuat font menjadi miring
<b>Teks Yang Anda Ketik</b>
» Perintah untuk membuat font menjadi tebal
<blockquote>Teks Yang Anda Ketik</blockquote>
<blockquote>Teks Yang Anda Ketik</blockquote>
» Menempatkan teks yang Anda mengutip ke dalam dokumen web - teks akan indentasi
<pre>Teks Yang Anda Ketik</pre>
<pre>Teks Yang Anda Ketik</pre>
» Mempertahankan format/lekukan dari teks yang dimasukkan
<strong>Teks Yang Anda Ketik</strong>
<strong>Teks Yang Anda Ketik</strong>
» Juga membuat teks seperti bold
<center>Teks Yang Anda Ketik</center>
<center>Teks Yang Anda Ketik</center>
» Perintah untuk membuat teks menjadi rata tengah
<blink>Teks Yang Anda Ketik</ Blink>
<blink>Teks Yang Anda Ketik</ Blink>
» Perintah untuk membuat teks berkedip-kedip
<font size=7>Teks Yang Anda Ketik</ font>
<font size=7>Teks Yang Anda Ketik</ font>
» Perubahan ukuran teks -7 adalah font yang terbesar yang tersedia dan 1 adalah yang terkecil (satu spasi)
<h1>Teks Yang Anda Ketik</h1>
<h1>Teks Yang Anda Ketik</h1>
» Teks muncul dalam font terbesar yang tersedia (dua spasi)
<h6>Teks Yang Anda Ketik</h6>
<h6>Teks Yang Anda Ketik</h6>
» Teks muncul dalam font terkecil yang tersedia
Ada <h2> melalui tag <h5> tersedia untuk ukuran font antara <h1> dan <h6> - percobaan dengan ukuran yang paling cocok untuk Anda.
<body bgcolor="#FFFFFF">
Ada <h2> melalui tag <h5> tersedia untuk ukuran font antara <h1> dan <h6> - percobaan dengan ukuran yang paling cocok untuk Anda.
<body bgcolor="#FFFFFF">
» Untuk membuat pola latar belakang.
Ada web/blog di mana Anda dapat menemukan kode (misalnya, #FF0000=red) untuk latar belakang/text warna: Backgrounds
<body background="small.gif">
Sebagai URL sering diperbarui/berubah, cek alamat ini secara berkala untuk memastikan mereka masih ada!
Anda juga dapat menyalin gambar latar belakang yang Anda lihat digunakan pada halaman web/blog - tetapi hanya jika Anda menggunakan PC (Anda menekan ke bawah pada sisi kanan mouse dan menyimpan gambar latar belakang di tempat yang tepat)
<body text="#FF0000">
Ada web/blog di mana Anda dapat menemukan kode (misalnya, #FF0000=red) untuk latar belakang/text warna: Backgrounds
<body background="small.gif">
Sebagai URL sering diperbarui/berubah, cek alamat ini secara berkala untuk memastikan mereka masih ada!
Anda juga dapat menyalin gambar latar belakang yang Anda lihat digunakan pada halaman web/blog - tetapi hanya jika Anda menggunakan PC (Anda menekan ke bawah pada sisi kanan mouse dan menyimpan gambar latar belakang di tempat yang tepat)
<body text="#FF0000">
» Ini akan mengubah warna semua teks dalam dokumen menjadi merah
<font color="#FF00FF">
<font color="#FF00FF">
» Ini akan mengubah warna apa yang Anda ketik menjadi magenta
Tidak ada komentar:
Posting Komentar