We Can Share(build)

Sunday, September 7, 2014

Rekayasa WEB

HALLO!

I Feel Free..

Thursday, April 24, 2014

Membuat Daftar/List Menggunakan Ordered List dan Unordered List

Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.

Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Ke UBL ngampus</li>
<li>Makan Siang</li>
<li>Mengerjakan tugas kuliah</li>
</ol>

Sisipkan pada file HTML anda dan jalankan file HTML di browser, penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item. Dan hasilnya..

Note: "Gunakan Ordered list, ketika sebuah list/daftar memerlukan urutan yang benar, seperti cara menyalakan motor dan lain sebagainya".

Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :

<h2>Yang harus dilakukan hari ini</h2>
<ul>
<li>Ke UBL ngampus</li>
<li>Makan Siang</li>
<li>Mengerjakan tugas kuliah</li>
</ul>

Maka hasilnya akan seperti ini:

Secara default, item akan ditandai dengan lingkaran.

Nah, bagaimana?, dengan menggunakan Ordered List atau Unordered List kita bisa merapihkan dan mengurutkan langkah-langkah dalam tulisan yang kita buat di website.

Terima Kasih.

Heading/Penjudulan

Heading, digunakan untuk memberikan penjudulan pada suatu dokumen HTML. Bayangkanlah sebuah skripsi atau buku yang memiliki bab dan subbab-subbab di dalamnya. Untuk memformat penjudulan dalam HTML, kita gunakan tag <h1> untuk judul utama dan untuk judul subbabnya anda dapat menggunakan tag <h2> sampai dengan<h6>.

Setiap level judul memiliki ukuran huruf yang berbeda-beda.

Sebagai latihan, buatlah file HTML baru dengan nama latihan4.html lalu ketikkan kode HTML berikut:

<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>We Can Share</h1>
<h2>We Can Share</h2>
<h3>We Can Share</h3>
<h4>We Can Share</h4>
<h5>We Can Share</h5>
<h6>We Can Share</h6>
</body>
</html>

Lalu Jalankan dibrowser anda, dan hasilnya seperti ini:

Terlihat perbedaanya bukan?, adanya penjudulan dimaksudkan agar suatu dokumen HTML lebih terstruktur layaknya sebuah dokumen resmi seperti skripsi /paper yang mengharuskan adanya perbedaanantara Bab utama dan sub-babnya. Biasanya untuk pemberian judul artikel website digunakan tag <h2> dan untuk judul dari tiap-tiap bagian artikel digunakan tag <h3> s.d <h4>.

Membuat Link

Yang sering anda temui dalam sebuah website adalah link. Link ini akan membuat konten atau elemen HTML dapat di klik dan akan mengarahkan/membawa anda ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style).

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link. Buka notepad dan coba anda buat script berikut ini:

<html>
Klik <a>disini</a>
</html>

Lalu setelah itu save file HTML dan jalankan di browser anda. Anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut "href"(tanpa tanda petik) untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).

<html>
Klik <a href="gambar.html">disini</a>
</html>

Pada script diatas saya memasukan link latihan sebelumnya, yaitu (gambar.html) untuk mengaitkan link agar kita bisa melihat hasilnya. Lalu save dengan nama (link.html) dan jalankan pada browser anda, dan coba klik link yg anda buat.

Jika anda berhasil pindah ke file (gambar.html) berarti anda sudah berhasil membuat link, selanjutnya anda hanya tinggal berkreasi sesuai keinginan anda.

Terima Kasih

Memuat Gambar

Setelah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan mengajak anda untuk mempelajari cara memuat/menampilkan sebuah gambar pada HTML.

Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Lokasi gambar dan file gambar kita letakan didalam tag ini. Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag), jadi anda tidak perlu menggunakan "</img>" (tanpa tanda petik) seperti tag-tag lainnya.

Untuk lebih jelasnya silakan anda coba script berikut:

Loh?, apa itu "src"?, mungkin terlihat asing dimata anda."src" merupakan sebuah atribut pada HTML. Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut. Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. Untuk lebih memahami atribut pada HTML silakan anda baca "Atribut pada HTML".

Buat file HTML pada notepad anda
Misalnya lokasi gambar yang ingin anda muat masih satu folder dengan file HTML anda, pada contoh file gambar bernama (logoWCS.png).

Lalu anda cukup mengetikan pada notepad script berikut:

Selanjutnya anda save file HTML anda (gambar.html) atau terserah asalkan ekstensi filenya (.html), lalu jalankan file HTML pada browser anda, dan lihat hasilnya:

Nah, cukup mudah bukan membuatnya?

Sekian dan Terima Kasih.

Struktur file HTML

Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti berikut:

<!doctype html>

<html>

<head>

<title>Judul File HTML</title>

</head>

<body>

Website <strong><em>pertama</em></strong> saya

</body>

</html>

Bingung? Tenang, saya jelaskan tiap baris kode tersebut.

<!doctype html>

Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.

Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.

Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.

Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.

Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML.

Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di atas? Seperti penambahan tab/indentasi pada setiap tag?. Sebenarnya Anda bisa saja menuliskan kode HTML seperti ini : <!doctype html><html><head><title>Judul File HTML</title></head><body>Website <i>pertama</i> saya</body></html>

Dan yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan membaca dokumen HTML tersebut. Kalau saja dokumen HTML yang anda buat hanya 10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris? Nah loh?!

Untuk itu kita menambahkan indentasi, disetiap isi (konten)dari suatu tag. Misalnya :

<head> <title>Judul File HTML</title> </head>

Ini menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa mengontrol, apakah suatu tag sudah ditutup atau belum.

Pengenalan Tag HTML

Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya.

Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks. seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan (Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.

Misalnya, untuk mem-format suatu teks menjadimiring kita tambahkan tag <em>atau<i>. Edit file sebelumnya, menjadi seperti berikut :

Website <em>pertama</em> saya

Dan ketika dibuka kembali pada browser, anda dapat melihat kata pertama menjadi miring.

<em> .. </em> disebut dengan Tag HTML, yang digunakan untuk me-markup(memformat) dokumen HTML. Perhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya.

Artinya hanya teks yang berada di dalam tag tersebut yang akan diberi format miring. Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama tagnya. Berikut ini adalah anatomi dari tag HTML :

<namatag atribut=”nilai Atribut”> Isi atau Konten </namatag>

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki dari dokumen HTML.

Dalam setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

Sekarang bagaimana jika teks yang dimiringkan tersebut ingin kita tebalkan? Untuk menebalkan teks anda dapat menggunakan tag <strong>atau<b>, menjadi seperti berikut:

Website <strong><em>pertama</em></strong> saya

Nah, silakan anda lihat hasilnya..