Latihan Dasar-dasar HTML

I.            Tujuan :

Latihan ini bertujuan untuk memperkenalkan dasar-dasar html yang berupa kode-kode/tag-tag khusus yang digunakan untuk menampilkan suatu informasi di suatu halaman web di internet. Sehingga diharapkan nantinya para peserta sesudah mengikuti pelatihan ini dapat memahami konsep dasar penyusunan atau pembuatan sebuah halaman web site.

II.            Pengenalan HTML

HTML (hyper text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi akan memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna.

Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana tag HTML  seperti b, i, u, body, title, dan sebagainya.

III.            Apa yang dibutuhkan untuk latihan ini?

Untuk dapat menjalankan latihan HTML ini yang anda butuhkan adalah:

·         Text Editor (notepad, Vi, Emacs, Editpad Lite, dan sebagainya)

·         Web Browser (Internet explorer, Opera, Safari, Firefox, dan sebagainya)

Catatan: jika anda menggunakan notepad sebagai editor. Pastikan ketika menyimpan file pilihan format pada waktu save as type adalah all files. Hal ini untuk menghindari script yang sudah kita buat tersimpan sebagai text biasa.

Catatan:

Silahkan anda buat satu folder berjudul latihan (dengan subfolder di dalamnya beri nama image untuk menyimpan gambar), yang nantinya akan digunakan untuk menyimpan file latihan anda.

IV.            Struktur File HTML

Sebuah halaman website akan diapit oleh tag <html>......</html>. Tag ini  mengatakan bahwa seluruh isi dari dokumen adalah dibuat dalam format html. Di dalam dua tag tersebut, dokumen dipisahkan menjadi dua bagian:

·         Bagian <head>....</head>, yang berisi informasi tentang dokumen seperti, judul dari dokumen, penulis/pembuat dokumen dsb. Informasi dalam tag ini tidak akan muncul di luar.

·         Bagian <body>.....</body>, yang merupakan isi sesungguhnya yang dapat anda lihat di layar web browser.

            Contoh Struktur File HTML

I.            Menggunakan Tag pada HTML

Seperti telah dijelaskan sebelumnya bahwa HTML adalah tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Dan tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x adalah tag HTML seperti i, b, u, body, title, dan sebagainya. Namun ada beberapa tag HTML yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan tag lainnya.

File-file HTML selalu mempunyai ekstensi *.html atau *.htm. jadi ketika anda mengetik sebuah script dan menyimpannya dengan ekstensi *.html atau *.htm maka anda membuat file yang berformat HTML.

     Ilustrasi: kotak dialog penyimpanan file.

1.       Tag <title>

Bagian <title> merupakan anak dari Tag <head>.anda harus memberi judul dari setiap halaman web disini,. Bagian ini digunakan dalam beberapa hal:

·         Untuk tampilan pada bagian paling atas pada sebuah browser

                ilustrasi:tag head

Bahasa HTML adalah sebuah bahasa penandaan dan kita menggunakan banyak simbol atau tag untuk menandai teks. pada contoh stuktur file html anda sudah melihat <html>, <body> dan tag yang lain yang biasa disebut Tag HTML.

Setiap tag terdiri dari sebuah nama tag, kadang diikuti oleh sebuah tag atribut, yang semuanya ada di antara tanda kurung (< dan >).  Tag yang paling sederhana adalah yang terdiri dari sebuah nama tag yang diapit oleh tanda kurung, misalnya <head>, dan <i>. Dan untuk yang lebih kompleknya tag

dapat mempunyai satu atau lebih atribut yang merupakan deskripsi dari bagaimana tag tersebut akan menampilkan isi diantara web anda.

Menurut standar HTML, Tag dan atribut  adalah tidak Case-sensitive. Yang artinya tidak akan ada efek berbeda antara penulisan <head>, <Head>, <HEAD>, atau bahkan <HeaD>, semuanya sama. Kecuali bila anda menggunakan XHTML, maka semua standar tag dan atribut harus dalam huruf kecil.

Satu hal bagus dari HTML adalah bisa berjalan pada semua web browser dan bila anda salah mengetik skrip, web browser akan mengabaikan skrip-skrip yang salah, dan hanya akan mengambil skrip yang benar saja dan kemudian menampilkan hasilnya.

II.            HTML Basic Tag

Struktur dasar dari semua file HTML adalah sederhana dan minimal harus meliputi tag-tag dasar berikut:

·         <html>  - merupakan tempat untuk halaman html

·         <head>  - merupakan tempat untuk informasi page header( untuk tempat judul halaman html)

·         <title> - merupakan judul dari halaman html

·         <body> - merupakan bagian utama dari halaman html

 

2.       Tag <html>

Bagian <html> merupakan bagian yang berisi seluruh file html.

3.       Tag <head>

Bagian <head> hanya merupakan sebuah tempat dari semua bagian header. Dan merupakan bagian yang pertama muncul sesudah membuka tag <html>, dan harus berisi bagian <title> yang menandakan judul dari file html anda. Dan anda dapat menambahkan beberapa bagian yang lain, untuk beberapa keperluan, misal: <base>, <object>, <link>, dan <script>

Contoh:

·         Untuk nama default dari sebuah bookmark dalam browser seperti dalam IE, dan Netscape

·         Untuk digunakan oleh search engine yang menggunakan isinya untuk membantu halaman index.

contoh tag title

                                                    Ilustrasi: tag title

1.       Tag <Body>

Bagian <body> muncul sesudah <head> dan berisi bagian halaman web yang sesungguhnya yang akan terlihat dalam jendela browser anda.

Sebuah <body>  dapat berisi segala informasi dari sebuah paragraf biasa sampai tampilan yang lebih rumit  berisi form dan tabel.

Contoh body

                                                     Ilustrasi: tag Body

Elemen-elemen Dasar

 

1.       Membuat Paragraf

Bila anda ingin orang-orang untuk membaca apa yang sudah anda tulis di halaman web yang sudah anda buat, maka menyusun informasi yang anda tulis dalam struktur yang baik adalah penting.

Pada bagian ini kita akan membahas dasar-dasar text formatting elements, seperti bagian heading dan bagian paragraph.

Tag <p>....</p>

Tag ini digunakan untuk membuat sebuah paragraf. Secara defaultnya, paragraf akan rata kiri. Tapi, kita dapat membuat paragraf menjadi rata kanan, tengah, atau justify. Syntax-nya sebagai berikut:

                                                     Ilustrasi: tag pragraf

 

                                                       Ilustrasi: tampilan dibrowser dari penggunaan tag <p>

Tag <font>....</font>

Tag ini digunakan untuk memanipulasi jenis, ukuran dan warna huruf.

                                          

Hasilnya akan seperti berikut:

                                                         Ilustrasi: tampilan di browser dari penulisan tag font

Untuk menentukan pilihan warna huruf kita bisa menuliskan langsung nama warnanya yang tentunya menggunakan ejaan bahasa inggris, atau dengan mengetikkan kode warnanya, misal : #ffffff untuk warna putih, #000000 untk warna hitam, #ff0000 untuk warna merah, #0000ff untuk warna biru, dan lain-lain.

Membuat Heading  - Tag <hn>

Sebuah dokumen biasanya dimulai dengan sebuah heading atau biasa kita sebut judul. Dalam HTML anda juga bisa membuat 6 level ukuran heading, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Saat menampilkan sebuah heading web browser akan menambahkan satu baris sesudah dan sebelum heading tersebut.

Contoh:

 

 

                                                    Ilustrasi:tampilan di browser dari tag heading

Ganti Baris – Tag <br/>

Tag ini digunakan untuk memulai alinea atau paragraf baru. Tag ini adalah salah satu contoh tag

dalam html yang tidak memerlukan tag pembuka dan penutup.

Contoh:

                                                      Ilustrasi:tampilan di browser dari tag <br/>

Menggunakan Superscript <sup> dan Subscript <sub>

akan berubah menjadi setengah dari ukuran teks yang lain. Untuk super script teks akan berada 

Teks dari sebuah tag <sup> atau <sub> akan ditulis sesuai dengan huruf teks yang lain hanya saja

di posisi setengah diatas teks yang lain, sedangkan untuk subscript akan berada dibawah.

Contoh:

 

1.       Membuat Garis mendatar – tag <hr/>

Contoh:

Garis horizontal /datar digunakan untuk pemisah yang terlihat dari sebuah dokumen.

 

                                                     Ilustrasi: tampilan dari tag <hr>

2.       Membuat Tabel

Dalam membuat Halaman web yang rapi, peran sebuah tabel adalah sangat penting. Dan hampir

semua web designer menggunakannya.

Disini kita akan membuat tabel menggunakan tag <table>. Dalam tag <table> terdapat bagian kolom dan baris. Sebuah baris akan berada dalam sebuah tag <tr> yang mewakili baris tabel.dan setiap sel akn berada dalam baris menggunakan sebuah tag <td> yang mewakili data tabel.

Contoh:

 

                                                     Ilustrasi: tampilan dari tag table

1.       Format Tabel

Judul/heading  tabel – Tag <th>

Judul tabel dapat dinyatakan dengan menggunakan tag <th>. Tag ini akan menggantikan tag

<td> yang berfungsi menampilkan data sesungguhnya.

Contoh:

Hasilnya sebagai berikut:

                                                      Ilustrasi: tampilan dari tag table heading

Cellpadding dan cellspacing

Ini adalah dua atribut yang digunakan untuk mengatur jarak antara cell dalam tabel. Cellspacing

menentukan lebar border, sedangkan cellpadding menunjukan jarak antara sel border dan isi

didalamnya.

Contoh :

Colspan dan Rowspan

Atribut colspan digunakan untuk merge atau menggabungkan dua atau lebih kolom. Rowspan

digunakan untuk merge atau menggabungkan dua baris atau lebih.

Contoh:

Hasilnya sebagai berikut:

                                                                Ilustrasi:tampilan dari tag colspan dan rowspan

Tabel Background

Ada dua cara untuk men-setting background tabel anda:

Menggunakan atribut bgcolor – dapat digunakan untuk seluruh bagian tabel atau

Menggunakan atribut background – dengan atribut ini anda dapat menggunakan

a.       hanya satu sel saja.

b.      image / gambar untuk background seluruh bagian tabel, atau hanya satu sel saja.

Catatan: anda juga dapat setting garis border dengan menggunakan atribut bordercolor   

Contoh:

                                                       Ilustrasi: tampilan dari tag tabel background
 

Menentukan Panjang dan Lebar Tabel

Untuk membuat ukuran tabel anda dapat menggunakan atribut width (lebar) dan height

layar .  (panjang/tinggi). Untuk ukuran dapat dinyatakan dengan ukuran pixel atau persen dari luas

Contoh:

                               

                                               Ilustrasi: tampilan dari artikel panjang dan lebar tabel

Menambahkan judul /Tabel Caption

Table caption berfungsi sebgai judul atau keterangan dan terletak diatas tabel.

Contoh:

 

 

                                                  Ilustrasi: tampilan tag caption

Contoh Layout tabel

                                                                   Ilustrasi: tampilan layout table

Contoh Tabel Sebagai Bingkai dari Paragraf

Silahkan anda ketikan skrip berikut.

                                  
                                     

                                                     Ilustrasi:tampilan dari bingkai table

1.       Warna-warna HTML

Warna adalah hal yang sangat penting untuk memberikan penampilan dan rasa yang indah dari sebuah website yang anda kembangkan. Anda dapat menentukan jenis warna pada halaman  dengan menggunakan tag <body> atau anda dapat juga hanya memberi warna pada bagian-bagian tag tertentu saja.

<body> tag yang dapat diikuti oleh atribut –atribut untuk set warna antara lain:

·         Bgcolor : pengaturan untuk warna background dari halaman

·         Text : pengaturan warna untuk body teks

·         Alink : pengaturan warna untuk link yang aktif atau link yang terpilih

·         Link : pengaturan warna untuk teks yang mengandung link

·         Vlink : pengaturan warna untuk link yang sudah dikunjungi / sudah dklik.

Catatan: untuk menggunakan fungsi ini disarankan menggunakan CSS mode

Contoh pengaturan warna untuk teks :

2.       Enumerasi  menggunakan Tag <ol>...</ol>, <ul>....</ul>, dan <li>....</li>

Pada bahasan ini kita akan mempelajari bagaimana membuat listing / daftar item dalam dokumen  html. Tag <ol>...</ol>, <ul>....</ul>, dan <li>....</li> saling berhubungan dan saling membutuhkan untuk menghasilkan out put.

3.       Membuat Tag Gambar

Suatu web site yang bagus  pasti memiliki gambar. Dan untuk menampilkan gambar pada halaman web anda dapat menggunakan tag <img>. Format file yang dapat didukung oleh tag <img> adalah: BMP,JPG atau JPEG, GIF, TGA, PNG, dll.

Tag <img> mempunyai beberapa atribut sebagai berikut:

·         Src : letak file gambar yang akan ditampilkan

·         Border : tebal bingkai gambar

·         Height : menentukan tinggi gambar

·         Width : menentukan lebar gambar

Nilai dari atribut src jika letak gambar berada pada direktori yang sama dengan file html anda. Maka cukup tuliskan nama filenya saja.

Contoh:

src=”nama_file.jpg”.

tapi bila letak file berada dalam sub folder/direktori maka nilainya adalah :

src=”sub_folder/nama_file.jpg.

(untuk latihan tag <img>  silahkan anda buat satu file gambar dan simpan di dalam folder dimana file html anda tersimpan).

Praktek:
   
            
               
Ilustrasi: tampilan dari tag insert image

 

1.       Hyperlink / menghubungkan dokumen – Tag <a>

Sebuah halaman web site dapat berisi link yang dapat membawa anda langsung ke halaman lain dan bahkan bagian-bagian tertentu dari halaman. Link ini biasa disebut hyperlinks.

Hyperlink membawa pengunjung web site berpindah dari satu halaman ke halaman lain dengan meng-klik pada bagian kata-kata tertentu, gambar, atau kalimat tertentu yang ada di halaman web site.

Pada tema bahasan kali ini, kita akan belajar bagaimana membuat links antara halaman yang berbeda dalam web site anda, menghubungkan antara halaman, dan bagaimana untuk link ke web site lain.

Tag <a> atau disebut juga Anchor tag. Apapuan yang ada diantara tag <a>...</a> akan menjadi bagian dari link dan anda dapat meng-klik bagian ini untuk pergi ke dokumen yang terhubung.

Contoh :

 

Syntax name anchor