Belajar Pemrograman HTML (12)

Setelah mengetahui bagaimana cara penulisan link pada suatu dokumen HTML, selanjutnya kita akan membahas tentang jenis-jenis link.

Jenis-jenis link ada tiga, yakni:

1. Link Relatif. Link relatif adalah link dalam page ke page yang lain dalam satu komputer. Contoh:   <a href=”Jaring2.html”> Berikut </a>
2. Link absolut. Link absolut adalah link web page ke website lain di internet. Contoh: <a href=”http://www.facebook.com”> Facebook </a>
3. Link dalam satu dokumen. Link ini dibuat apabila dokumen html cukup panjangContoh: <a href=”#yang_baru”> Yang baru hari ini </a>

            <a name=”yang_baru”> </a>

            <b> <u> Yang Baru Hari Ini </u> </b>

Itulah ketiga jenis link. Untuk lebih memahami tentang penggunaan dari tiga link tersebut, kita lihat contoh script berikut ini.

Output:

Penjelasan:

Untuk link pertama, yakni link secara relatif, jika klik linknya, maka web browser akan mengarahkan ke dokumen html yang masih berada dalam satu komputer

Untuk link kedua, yakni link secara absolut, jika kita klik linknya, maka web browser akan mengarah kita ke situs facebook karena pada penulisan sumber di scriptnya, tertulis alamat facebook yang akan menghubungkan kita ke situs facebook akan mengklik link tersebut. 

Membuat link pada suatu email juga bisa dilakukan, penulisannya seperti ini:

<a href="mailto:alamat email"> Teks yang ditampilkan </a>

Jadi ketika kita klik linknya, maka secara otomatis kita bisa mengirimkan email ke alamat email yang telah kita tuliskan di scriptnya

Link  yang terakhir juga terdapat “kembali ke atas” di web browser. Jika kita klik link tersebut, maka secara otomatis, web browser akan mengarahkan kita ke bagian paling atas dari web browser. Namun sebelumnya, di penulisan script kita juga harus mendefinisikan bagian atas yang dimaksud di web browsernya nanti dengan menuliskan sintaks

<a name=”top”>

Jika kita tidak mendefinisikan bagian atas yang dimaksud pada teks editornya, maka link juga tidak akan berfungsi. Link jenis inilah yang kemudian disebut link ke bagian lain dalam dokumen 

Belajar Pemrograman HTML (11)

Hi sahabat bloggers sekalian, di postingan kali ini kita akan mempelajari tentang link pada dokumen HTML. Jadi, HTML menggunakan tag <a> tag Anchor untuk membuat link. Secara umum, sintaksnya dapat dituliskan seperti

<a href=”Source”> Teks Tampilan </a>

Dimana, source merupakan alamat link yang akan dituju dan Teks tampilan yang menunjukkan teks yang akan tampil di halaman web yang mewakili alamat link yang akan dituju

Perlu diperhatikan bahwa untuk membuat link pada dokumen HTML, sebaiknya buat satu folder terlebih dahulu. Tujuannya untuk menyatukan dokumen-dokumen HTML yang saling berkaitan di antara link-link tersebut. Sebenarnya, pembuatan folder untuk menyatukan dokumen-dokumen HTML bisa untuk tidak dilakukan. Tapi hal tersebut akan sangat sulit, kita harus menambahkan sintaks-sintaks tertentu di teks editornya (notepad++).  Jaadi akan lebih baik jika membuat satu folder khusus biar lebih gampang

Untuk lebih jelasnya, kita lihat contoh script berikut ini.

1.      Kita buat dokumen HTML untuk Link Pertama. Simpan dengan nama, latihan1.html

2.      Selanjutnya, kita buat lagi dokumen HTML untuk link kedua. Simpan dengan nama latihan2.html

3.      Terakhir, kita buat dokumen HTML untuk link ketiga. Simpan dengan nama latihan3.html

Setelah semua dokumen HTML untuk linknya dibuat, selanjutnya kita akan buat dokumen HTML dengan menu linknya.

Catatan: untuk penulisan sumber linknya kita harus menyesuaikan dengan nama file dari dokumen link HTML yang akan dituju karena hal tersebut akan sangat berpengaruh terhadap output yang akan dihasilkan.

Hasilnya akan seperti ini:

Dari output terlihat 3 link, yakni latihan 1, latihan 2, dan latihan 3. Jika kita klik latihan 1, output yang akan dihasilkan seperti ini.

Jika kita klik link latihan 2, akan tampil seperti berikut

Terakhir, jika kita klik link untuk latihan 3, akan tampil seperti berikut

Belajar Pemrograman HTML (10)

Hai sahabat bloggers sekalian, kita lanjut membahas tentang list dan link pada dokumen HTML. Karena pembahasannya cukup panjang, jadi pada postingan kali ini kita akan membahas tentang list terlebih dahulu.

List merupakan bentuk yang umum digunakan untuk mengurutkan daftar sesuatu. Pada dokumen HTML, jenis list terbagi dua, yakni : List dengan Nomor (OL: Ordered List) dan List tanpa nomor (UL: Unordered List).

Pertama, kita mulai dari list dengan nomor atau OL (Ordered List). Jadi, nomor item pada ordered list secara default adalah menggunakan angka 1,2,3..,dst sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan type yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut type pada tag  <ol>. Untuk lebih jelasnya, berikut akan disajikan contoh list dengan menggunakan tag <ol> .

Output:

Penjelasan:

Perlu diketahui bahwa sebenarnya penggunaan tag <ol> pada dokumen HTML dapat diibaratkan dengan penggunaan numbering pada microsoft office word, dimana penomorannya dapat berupa angka, huruf, maupun romawi. Untuk pemakaiannya, hal tersebut tergantung dari pembuat dokumen HTMLnya, dengan menambahkan atribut type setelah tag <ol>. Selain itu, terkadang kita juga biasanya masih memerlukan penomoran di dalam penomoran utama. Untuk masalah tersebut, kita bisa menggunakan tag <li> untuk membuat penomoran baru di dalam penomoran utama. Kita juga bisa menambahkan atribut style ataupun color setelah tag <li>. Perlu juga diingat bahwa setelah tag <ol> dibutuhkan tag penutup berupa tag </ol>. Sementara untuk tag <li>, bisa menggunakan tag penutup </li>, namun terkadang kebanyakan orang tidak menggunakan tag penutup untuk tag <li> karena hasilnya tidak akan berpengaruh terhadap output yang akan dihasilkan.

Setelah membahas list dengan nomor (OL: Ordered List) selanjutnya kita akan membahas list yang kedua, yakni list tanpa nomor (UL: Unordered List). Jadi, list tanpa nomor (UL) dapat diibarakan dengan bullet pada penomoran Microsoft Office Word. Jenis bullet yang digunakan bisa bermacam-macam, dengan hanya menambahkan atribut type setelah tag <ul>. Prinsip penggunaannya sama dengan list dengan nomor tadi (OL:  Ordered List). Penomoran dalam penomoran utama juga bisa ditampilkan dengan menggunakan tag <li>. Berikut ini merupakan tipe/jenis bullet dari penomoran UL

• Disc:  Bulatan Penuh
• Circle:  Bulatan Kosong
• Square: Segi empat penuh

Contoh:

Output:

Belajar Pemrograman HTML (9)

Hai sahabat bloggers sekalian, pada kesempatan kali ini kita akan membahas tentang indentasi .

Disamping mengatur perataan, kita juga bisa mengatur posisi baris-baris paragraf dari margin. Tag-tag indentasi paragraf dapat berupa: <dd>, <blockquote>, <dl>, <dt>. Untuk lebih mengetahui penggunaan dari tag-tag tersebut, berikut ini merupakan contoh script indentasi pada suatu dokumen HTML

Output

Penjelasan:

Berdasarkan contoh yang ada di atas, jadi dapat kita simpulkan bahwa penggunaan tag <dd> akan membuat baris pertama menjorok ke dalam. Selanjutnya, penggunaan dari tag <blockquote> akan membuat semua baris menjorok ke dalam. Sementara itu, penggunaan tag <DT> membuat suatu paragraf yang dijelaskan dengan paragraf lain yang menjorok ke dalam. 

Belajar Pemrograman HTML (8)

Halo sahabat bloggers sekalian, jika dipostingan sebelumnya kita membahas tentang format-format teks pada suatu dokumen HTML, maka dipostingan kali ini kita akan mempelajari karakter-karakter khusus pada dokumen HTML. Untuk lebih jelasnya, langsung saja kita lihat script HTMLnya

Output:

Penjelasan:

Berdasarkan output yang dihasilkan dapat dilihat bahwa ada beberapa perintah-perintah yang digunakan untuk menghasilkan karakter khusus pada suatu dokumen HTML, seperti

• ·         &copy; (copyright) yang berfungsi atau yang menandakan hak cipta dari suatu website.
• ·         &reg; (registered) yang berfungsi untuk mengenali merk dagang yang sudah terdaftar
• ·         &trade; (trademark) yang berfungsi sebagai suatu simbol dari suatu merk dagang. Seperti tutorial.
• ·         &pound yang berfungsi untuk menampilkan simbol mata uang poundsterling
• ·         &euro yang berfungsi untuk menampilkan simbol mata uang euro

Sebenarnya, masih ada banyak perintah-perintah yang dapat digunakan untuk menampilkan karakter khusus, seperti Non breaking space, Ampersand, Anggle quotation mark (left),

Untuk lebih jelasnya, kalian bisa mencari informasi selengkapnya di buku-buku pemrograman HTML yang ada J

Semoga bermanfaat J

Belajar Pemrograman HTML (7)

Setelah mempelajari struktur dasar dan tag-tag html, di postingan kali ini kita akan membahas tentang formatting teks html

Jadi, dokumen HTML sebenarnya dapat diformat secara khusus untuk menunjukkan perbedaan dan penekanan terhadap maksud dan isi dari dokumen HTML. Ada beberapa tag yang dapat digunakan dalam format teks. Untuk lebih memahami fungsi dari tag-tag tersebut, berikut akan disajikan dokumen HTMLnya

Output

Dari output yang dihasilkan dapat disimpulkan bahwa:

• tag <b> berfungsi untuk menebalkan teks
• tag <u> berfungsi untuk menggarisbawahi teks
• tag <i> berfungsi untuk mencetak miring teks
• tag <strong> berfungsi untuk mendefinisikan teks yang ditebalkan. Fungsinya hampir sama dengan tag <b>, namun perbedaannya adalah  tag <b> murni untuk menebalkan taks tanpa adanya makna yang benar-benar penting pada kata/kalimat tersebut. Sementara tag <strong> penggunaannya jika terdapat makna yang benar-benar penting pada kata/kalimat tersebut atau yang mengandung makna sebagai sebuah peringatan.
• tag <em> berfungsi untuk mendefinisikan teks yang ditekankan. Jika kita melihat output yang dihasilkan, hasilnya sama dengan teks yang dicetak miring dengan menggunakan tag <i>. Perbedaan antara tag <i> dan tag <em> adalah pada tag <i> murni untuk menebalkan taks tanpa adanya makna yang benar-benar penting pada kata/kalimat tersebut. Sementara tag <em> penggunaannya jika terdapat makna yang benar-benar penting pada kata/kalimat tersebut atau yang mengandung makna sebagai sebuah peringatan.
• tag <cite> berfungsi untuk mendefinisikan teks yang ingin dimiringkan. Fungsinya sama dengan tag <i>
• tag <s> berfungsi untuk mendefinisikan teks yang ingin dicoret
• tag <sup> berfungsi untuk mendefinisikan teks yang ingin dijadikan superscript
• tag <sub> berfungsi untuk mendefinisikan teks yang ingin dijadikan subscript.

Itulah tadi beberapa tag-tag dasar untuk format teks pada suatu dokumen HTML. Semoga bermanfaat J

Belajar Pemrograman HTML (6)

Pada postingan kali ini, kita akan mempelajari tentang bagaimana membuat sebuah garis pada suatu halaman web.

Cara Membuat garis pada web sangat sederhana, yakni hanya dengan menambahkan tag <hr> yang disisipkan pada tempat garis yang akan ditampilkan

Contoh:

Output:

Penjelasan:

Jadi, untuk membuat sebuah garis pada halaman web, digunakan tag <hr>. Untuk menyesuaikan ukuran, bentuk, lebar, ataupun perataan, dibutuhkan atribut-atribut tambahan setelah tag hr.

Atribut-atribut tersebut, seperti:

Align: untuk perataan. Sama seperti perataan pada teks, jika kita ingin membuat garis di tengah, gunakan ‘align center’, ‘align right’ untuk rata kanan, dst.  Contohnya, kita ingin membuat garis dengan rata kiri. Maka penulisan di teks editornya adalah

<hr align=”left”>

Width: untuk menyesuaikan lebar garis. Menyesuaikan lebar garis dapat ditulis dalam bentuk persen ataupun px (piksel). Contoh penulisannya:

<hr width=”60%”> yang menunjukkan bahwa lebar garis yang akan ditampilkan adalah 60% dari halaman web.

Atau bisa juga dituliskan

<hr width=”500px”> yang menunjukkan bahwa lebar garis yang akan ditampilkan adalah 500piksel.

Size: untuk menyesuaikan besar garis. Contoh penulisannya:

<hr size=”20”> yang menunjukkan bahwa lebar garis yang akan ditampilkan pada halaman web adalah sebesar 20

Noshade: untuk membuat efek berupa bayangan pada garis. Penulisan atribut noshade dapat dituliskan hanya dengan menambahkan kata ‘noshade’ setelah ‘hr’

Jika ingin membuat garis biasa, maka cukup gunakan tag <hr> saja. Perlu juga diketahui bahwa tag <hr> tidak membutuhkan tag penutup.

Pada script juga terdapat penulisan seperti

<i> Copyright &copy, Yati </i>

Itu merupakan salah satu perintah-perintah khusus pada pemrograman HTML yang berarti copy right. Nanti kita akan membahas mengenai hal tersebut di postingan berikutnya.

Itulah artikel mengenai cara membuat garis pada halaman web, semoga bermanfaat J

Belajar Pemrograman HTML (5)

Hai sahabat bloggers sekalian, di postingan kali ini kita akan lanjut membahas tentang heading.

Heading ini biasanya digunakan untuk judul topik dan tag yang digunakan adalah <h1> .... <h6>

Untuk lebih jelasnya, kita bisa lihat contoh script programnya

Output:

Penjelasan:

Dari output diatas, dapat kita simpulkan bahwa makin kecil angka di belakang H, maka output teks yang akan ditampilkan makin besar. Begitupun sebaliknya.  Jangan lupa untuk memberikan tag penutup sesuai dengan jenis heading yang digunakan.

Semoga bermanfaat J

Belajar Pemrograman HTML (4)

Jika dipostingan sebelumnya, kita membahas tentang cara membuat paragraf baru di web. Maka di postingan kali ini kita akan membahas tentang penggunaan tag <br>. Jadi, tag <br> itu digunakan untuk pindah baris. Sebenarnya, penggunaan tag <p> dan tag <br> hampir sama.

Untuk lebih jelasnya, perhatikan contoh script dibawah ini.

Output yang akan dihasilkan:

Jika kita membandingkan output dari penggunaan tag <p> dan tag <br>, maka dapat ditemukan perbedaan antara kedua tag tersebut.

Tag <p> digunakan untuk membuat paragraf baru atau pindah alinea, tag <p> ini bisa diberikan tag penutup, bisa juga tidak. Sementara itu, tag <br> digunakan untuk pindah ke baris baru. Selain itu, penggunaan tag <p> akan memberikan ruang spasi setiap kali ganti paragraf, sedangkan tag <br> tidak memberikan ruang spasi setiap kali ganti baris. Jelas, kan? Sekian dulu postingan kita kali ini. semoga bermanfaat J

Belajar Pemrograman HTML (3)

Di artikel kali ini, kita akan mempelajari cara membuat paragraf di sebuah halaman web.

Tag yang digunakan adalah tag <p> .... dan ditutup dengan tag </p>.  Untuk lebih jelasnya, kita bisa lihat contohnya di bawah ini

Output

Penjelasan:

Jadi, tag <p> merupakan tag untuk baris baru. Sehingga ketika kita menulis program web teks editor (notepad) Anda, maka output yang akan dihasilkan berupa baris baru. Ada beberapa atribut pada tag <p> ada 4, diantaranya:

• <p align =”center”> : untuk menampilkan teks yang berupa rata tengah
• <p align =”right”> : untuk menampilkan teks yang berupa rata kanan
• <p align =”left”> : untuk menampilkan teks yang berupa rata kiri
• <p align =”justify”> : untuk menampilkan teks yang berupa rata kanan kiri.

Jangan lupa, setiap penulisan tag <p> selalu diakhiri dengan tag penutupnya, yakni tag </p>

Itulah pembahasan mengenai cara membuat paragraf di halaman web. Semoga bermanfaat J

Belajar Pemrograman HTML (2)

Belajar Pemrograman HTML Part 2

Setelah memahami artikel tentang contoh program web sederhana pada postingan sebelumnya, kali ini kita akan belajar menambahkan warna background dan pemformatan tampilan teks. Langsung saja, buka program teks editor (Notepad++)  anda

Scriptnya dapat dituliskan seperti pada gambar berikut

Output yang dihasilkan akan seperti ini

Penjelasan:

Sama seperti pada postingan sebelumnya, penulisan program html selalu diawali dengan tag <html>, kemudian diikuti dengan tag <head>, <title>, dll.

Namun bedanya, pada program web kali ini, kita menambahkan warna background dan warna teks pada sebuah halaman web. Misalnya, pada halaman web tersebut kita akan memberikan warrna hijau dengan teks yang berwarna merah. Maka pada tag <body>, tambahkan atribut ‘bgcolor’ disertai dengan jenis warnanya serta atribut ‘text’ yang juga disertai dengan jenis warnanya.

Sehingga dapat kita tuliskan

<body bgcolor =”#0000ff” text=”#ff0000”>

#0000ff merupakan warna hijau dan #ff0000 merupakan warna merah. Penulisan warna dapat diperoleh dari jenis-jenis warna pada software editing foto, seperti corel, photoshop, dll. Semua jenis warna lengkap, tergantung penggunanya ingin menggunakan warna apa.

Sekian artikel dari saya, semoga bermanfaat J

Belajar Pemrograman HTML (1)

Belajar Pemrograman HTML Part 1

Di artikel kali ini kita akan mempelajari tentang struktur HTML dan tag-tag dasar. Untuk lebih jelasnya, kalian bisa lihat contoh program sederhananya yang ditulis dengan menggunakan notepad++.

Scriptnya seperti gambar di bawah ini

Setelah itu, simpan file/save as dengan nama, misalnya praktikum1.html. Perlu diketahui bahwa untuk menyimpan sebuah file html, selalu diikuti dengan (.html) kemudian pada bagian/kolom save type, pilih All Files (*.*)

Buka web browser Anda kemudian ctrl+O (open) untuk membuka dokumen yang anda buat tadi. Klik browse, kemudian cari file praktikum1.html

Hasilnya akan seperti ini

Penjelasannya:

Script html selalu diawali dengan tag <html> kemudian diikuti dengan tag <head>. Di bagian tag <head>, terdapat tag <title> yang berfungsi untuk memberi judul yang akan tampil di tab browser web Anda. Pada contoh diatas, terdapat tag <title> CONTOH </title>  sehingga judul yang akan tampil di tab browser anda ialah CONTOH. Jangan lupa untuk menuliskan tag penutup untuk masing-masing tag title dan tag head dengan menambahkan tanda slash (/)

Kemudian pada bagian body atau isi dari sebuah web, digunakan tag <body>. Pada contoh script diatas, outputnya hanya akan berupa “SEDANG BELAJAR PEMROGRAMAN WEB”. Tuliskan kembali tag penutup body (</body>). Terakhir, tutup dengan tag </html>.

Nah, itu merupakan salah satu contoh program web yang paling sederhana. Semoga bermanfaat J