Archive for August 2015

Belajar HTML Dasar Part 13: Cara Membuat Komentar di HTML

August 31, 2015 Add Comment

Belajar HTML Dasar Part 13: Cara Membuat Komentar di HTML

Seperti pada bahasa pemograman lainnya, umumnya kita akan sering lupa tentang cara kerja kode yang kita buat sendiri setelah beberapa bulan berikutnya. Untuk mengatasinya, kita bisa akan menyisipkan penjelasan pada sebuah komentar di sekitar kode tersebut. HTML juga mempunyai tag khusus untuk komentar. Dalam tutorial belajar HTML: cara menambahkan komentar di HTML ini kita akan membahasnya lebih dalam.

Cara Membuat Komentar di HTML

Untuk membuat komentar di HTML, kita menggunakan awalan <!– dan penutup –>. Agar lebih mudah dipahami, langsung saja kita simak dalam bentuk contoh. Silahkan tulis kode HTML berikut dan save sebagai komentar.html
Contoh penggunaan tag komentar HTML:

<!DOCTYPE html >

<html>

<head>

   <title>Belajar Tag Komentar (comment)</title>

</head>

<body>

   <!-- <p>Ini berada di dalam tag komentar, 

           dan tidak akan tampil di browser</p> -->

   <p>Ini bukan komentar, dan akan tampil di browser</p>

</body>

</html>

Dari contoh dapat dilihat bahwa tag pembuka komentar adalah <!– dan tag penutup –>.
Tag komentar ini juga akan berlaku selama belum di temukan tag penutup. Contohnya dapat dilihat dari kode berikut:

<!DOCTYPE html>

<html>

<head>

   <title>Belajar Tag Komentar (comment)</title>

</head>

<body>

   <!-- <p>Ini berada di dalam tag komentar, 

           dan tidak akan tampil di browser</p>

   <p>Ini juga tidak tampil di browser</p>

    -->

   <p>Ini bukan komentar, dan akan tampil di browser</p>

   <!--<p>Ini juga tidak tampil di browser</p> -->

</body>

</html>

Selain sebagai pengingat atau catatan, tag komentar juga akan berguna untuk membuat sebagian isi web tidak tampil untuk sementara. hal ini sangat berguna jika kita ingin mencoba berbagai tampilan kode HTML yang akan dibuat, tetapi tidak ingin menghapus kode sebelumnya.

Perlu juga menjadi catatan bahwa walaupun komentar tidak ditampilkan pada web browser, tetapi seseorang masih bisa membaca komentar tersebut dengan cara melihat source halaman HTML. Oleh karena itu, sebaiknya kita tidak menambahkan komentar yang sensitif atau bersifat rahasia, seperti username atau password.

Dalam tutorial belajar HTML dasar selanjutnya, kita akan mempelajari sekelompok tag yang kelihatannya cukup rumit tetapi sangat penting bagi sebuah website. Untuk totorial berikutnya, kita akan membahas tentang Cara Membuat Form di HTML menggunakan tag <form>.

Belajar HTML Dasar Part 8: Cara Membuat Judul / Heading di HTML (tag h1)

August 31, 2015 Add Comment

Belajar HTML Dasar Part 8: Cara Membuat Judul / Heading di HTML (tag h1)

Cara Membuat Judul (heading) di HTML

HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul.
Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header <h1> memiliki ukuran huruf paling besar, sedangkan <h6> terkecil.
Berikut adalah contoh penggunaan tag heading di dalam HTML:

<!DOCTYPE html>

<html>

<head>

  <title>penggunaan tag heading</title>

</head>

<body>

  <h1>ini adalah judul dengan h1 </h1>

  <h2>ini adalah judul dengan h2 </h2>

  <h3>ini adalah judul dengan h3 </h3>

  <h4>ini adalah judul dengan h4 </h4>

  <h5>ini adalah judul dengan h5 </h5>

  <h6>ini adalah judul dengan h6 </h6>

</body>

</html>

Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut adalah contoh struktur artikel HTML sederhana dengan menggunakan tag <p> dan beberapa tag heading:

<!DOCTYPE html>

<html>

<head>

  <title>Belajar HTML Dasar</title>

</head>

<body>

  <h1>Judul Artikel</h1>

  <p>.....pembahasan artikel.....</p>

    <h2>Sub Judul Artikel 1</h2>

    <p>.....pembahasan sub artikel 1.....</p>

    <h2>Sub Judul Artikel 2</h2>

    <p>.....pembahasan sub artikel 2.1.....</p>

      <h2>Sub Sub Judul Artikel 2.1</h2>

      <p>.....pembahasan sub sub artikel 2.1.....</p>

</body>

Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat struktur sederhana konten HTML.
Search Engine seperti Google akan memberikan nilai lebih untuk heading. Biasanya semakin tinggi tingkat heading, semakin tinggi pula penekanan search engine. Tag <h1> dianggap lebih bernilai dari pada <h2>. Tag <h1> umumnya digunakan untuk judul sebuah konten / artikel, sehingga dianggap dapat mewakili keseluruhan artikel.

Selain terdiri dari paragraf dan judul, sebuah struktur artikel juga perlu membuat daftar, atau dikenal sebagai list. Dalam tutorial selanjutnya kita akan membahas tentang Cara Membuat Daftar/List di HTML menggunakan tag <ol>, <ul> dan <li>.

Belajar HTML Dasar Part 7: Cara Membuat Paragraf di HTML (tag p)

August 31, 2015 Add Comment

Belajar HTML Dasar Part 7: Cara Membuat Paragraf di HTML (tag p)

Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:
Contoh penggunaan tag paragraf:

<!DOCTYPE html>

<html>

<head>

  <title>Title dari Websiteku</title>

</head>

<body>

  Ini adalah paragraf pertama

  Ini adalah paragraf kedua

</body>

</html>

Save sebagai paragraf.html, lalu jalankan di web browser.

Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTML, spasi akan diabaikan, termasuk jika kita merubahnya menjadi :
Contoh penggunaan tag paragraf 2:

<!DOCTYPE html>

<html>

<head>

  <title>Title dari Websiteku</title>

</head>

<body>

  Ini adalah paragraf pertama        Ini adalah paragraf kedua

</body>

</html>

Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.

Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.

Contoh penggunaan tag paragraf 3:

<!DOCTYPE html>

<html>

<head>

  <title>title dari websiteku</title>

</head>

<body>

  <p>ini adalah paragraf pertama</p>

  <p>ini adalah paragraf kedua</p>

</body>

</html>

Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.

Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).
Contoh penggunaan tag <br>:

<!DOCTYPE html>

<html>

<head>

  <title>title dari websiteku</title>

</head>

<body>

  ini adalah paragraf pertama

  <br />

  ini adalah paragraf kedua

</body>

</html>

Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan menggunakan tag <p>. Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kita butuhkan adalah struktur paragraf, maka gunakan tag <p>.

Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:

<!DOCTYPE html>

<html>

<head>

  <title>title dari websiteku</title>

</head>

<body>

  <p>ini adalah kalimat <em>pertama</em>, 

  sedangkan ini adalah kalimat <strong>kedua</strong></p>

</body>

</html>

Walaupun tanda spasi tidak akan dianggap dalam HTML, namun untuk membuat kode HTML, menjorokkan (indent) beberapa baris dalam suatu tag akan membuat kode mudah dibaca.

Kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag ini akan mempengaruhi tampilan dari HTML. Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang, dan tidak akan dipakai lagi, namun dalam spesifikasi HTML5, tag <i> dan <b> kembali dianggap relevan.

Pembahasan lebih jauh tentang cara penulisan dan cara men-format text dalam HTML, akan dibahas secara lebih detail pada tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Text dan Format Text HTML

Setelah memahami cara pembuatan paragraf di dalam HTML, pada tutorial selanjutnya, kita akan mempelajari Cara Membuat Judul di HTML menggunakan tag <h1>.

Struktur Dasar HTML

August 31, 2015 Add Comment

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.
Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan kode berikut ini:
Contoh struktur dasar HTML:

<!DOCTYPE html>

  <html>

  <head>

    <title>Title dari Websiteku</title>

  </head>

<body>

   <p>Selamat Pagi Dunia, Hello World!</p>

</body>

</html>

Save sebagai halaman.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag yang ditulis tersebut pada toturial kali ini.

Pengertian DTD atau DOCTYPE

Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML.
DTD memiliki banyak versi tergantung kepada versi HTML yang kita gunakan. Pada contoh diatas, kita menggunakan DTD versi HTML 5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir mustahil dihafal. Contohnya, DTD untuk xHTML 1.0 adalah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jika kita tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web kita seperti tidak terjadi apa-apa. Namun browser sebenarnya menjalankan halaman HTML tersebut pada mode khusus yang disebut quirk mode. Pada quirk mode ini, web browser menerjemahkan halaman web dan terutama CSS sedikit berbeda dari seharusnya. Hal ini karena web browser menganggap jika tidak ada DTD, maka halaman tersebut kemungkinan adalah halaman web usang, dan menggunakan aturan-aturan yang berbeda agar dapat ditampilkan.
Cara untuk mengetahui apakah web browser berjalan pada quirk mode atau standard mode : Pada Firefox, klik kanan pada halaman web, lalu pilih Page Info. Pada bagian Render Mode akan terlihat apakah quirk mode, atau standard mode.

Perbedaan quirk mode dan standard mode HTML

Penjelasan lebih jauh tentang doctype atau DTD akan kita bahas dalam tutorial HTML5: Pengertian dan cara penulisan doctype pada HTML5.

Tag <html>

Setelah DTD, tag berikutnya adalah tag <html>.
Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML akan berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

Tag <head>

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.
Tag <title> dalam contoh kita digunakan untuk menampilkan title dari sebuah halaman web, dan biasanya ditampilkan pada bagian paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.

Tag <body>

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web adalah di dalam tag <body> ini.
Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.
Stuktur HTML yang kita bahas disini adalah struktur sangat sederhana. Sebuah halaman web bisa memiliki ratusan bahkan ribuan baris, dan menggunakan berbagai tag HTML. Tag pertama yang akan kita bahas dalam tutorial berikutnya adalah tag <p> yang digunakan untuk,.

Tutorial Belajar HTML Dasar Untuk Pemula

August 31, 2015 Add Comment

Tutorial Belajar HTML Dasar Untuk Pemula

HTML atau Hypertext Markup Language adalah dasar dari semua halaman web di internet. Jika anda ingin mempelajari cara membuat website, maka Tutorial Belajar HTML Dasar Untuk Pemula di duniailkom ini adalah langkah pertama anda.

Duniailkom telah mempersiapkan 15 tutorial HTML dasar yang ditujukan untuk pemula yang ingin mempelajari HTML dari awal. Dalam tutorial ini kita akan mempelajari tentang pengertian HTML, cara membuat file HTML, berkenalan dengan tag dan atribut HTML, hingga membahas tag-tag penting HTML, seperti tag <a>, tag <img>, <table>, dan tag <form> HTML.
Dalam mempelajari HTML, harap diingat bahwa HTML dirancang untuk membuat struktur dasar dari halaman web. Jika anda ingin merubah tampilan dari sebuah tag, misalnya ingin membuat background paragraf berwarna merah, atau ingin memberi efek bayangan pada gambar, sebaiknya menggunakan CSS, bukan langsung dari HTML.
Tutorial ini ditujukan sebagai tutorial singkat untuk membuat halaman web sederhana dengan cepat. Pembahasan mendalam untuk topik topik yang lebih lengkap akan dipisahkan ke dalam Tutorial HTML Lanjutan, seperti Cara membuat menggunakan tabel, cara menformat text, cara membuat form, serta pembahasan khusus mengenai perkembangan terbaru dari HTML, yakni HTML5.

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya dengan hanya meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.
Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan di antara tanda lainnya akan tampak besar. Tanda ini akan kita kenal di HTML sebagai tag.
Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini, dan pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome) dan akan tampil sebuah halaman baru yang merupakan kode HTML dari halaman ini. Jika anda merasa terintimidasi dengan kode-kode tersebut, anda tidak sendiri, saya juga mengalaminya. Namun, kita akan mempelajarinya
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML, tampilan web kita akan terasa hambar. Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Namun sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
HTML bukan bahasa pemograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.
Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language. xHTML merupakan versi tambahan dari HTML. Untuk tahap ini anda boleh menyebut bahwa xHTML itu juga HTML (Perbedaannya akan kita bahas tutorial Belajar HTML Lanjutan nanti)

File HTML harus dijalankan dari aplikasi web browser. Dalam tutorial belajar HTML dasar selanjutnya, kita akan membahas tentang.

Semoga bermanfaat ya......gan....

Fungsi Tombol CTRL + A-Z

August 31, 2015 Add Comment

Fungsi Tombol CTRL + A-Z

Halo semua kali ini aku akan memberikan code atau fungsi dari Fungsi Tombol CTRL + A-Z
Pasti kalian taulah sedikit tentang tombol seperti CTRL + A atau yg mungkin kita pelukan tapi
mungkin tidak semua code kita tau seperti CTRL + Z atau CTRL + X lah kali ini saya akan
memberi tahu Fungsi Tombol CTRL + A-Z banyak bukan (piye perasaanmu) lah langsung saja
gak usah lama – lama…….

Fungsi Tombol CTRL + A-Z

CTRL + A : [ALL] Fungsi mem-Blok keseluruhan teks
CTRL + B : [BOLD] Fungsi Menebalkan teks
CTRL + C : [COPY] Fungsi meng- Copy teks
CTRL + D : Fungsi membuka menu/kotak dialog Font
CTRL + E : [EQUATOR] Fungsi rata tengah teks
CTRL + F : [FIND] Fungsi membuka menu/kotak dialog Find and Replace
CTRL + G : [GO TO] Fungsi membuka menu/kotak dialog Find and Replace
CTRL + H : Fungsi membuka menu/kotak dialog Find and Replace (tab Replace)
CTRL + I : [ITALIC] Fungsi membuat teks menjadi miring
CTRL + J : [JUSTIFY] Fungsi rata kanan & kiri pada teks
CTRL + K : Fungsi membuka menu/kotak dialog Insert Hyperlink
CTRL + L : [LEFT] Fungsi rata kiri pada teks
CTRL + M : Fungsi menggeser First Line Indent dan Left Tab pada mistar
CTRL + N : [NEW] Fungsi membuka dokumen baru
CTRL + O : [OPEN] Fungsi membuka menu/kotak dialog Open
CTRL + P : [PRINT] Fungsi membuka menu/kotak dialog Print
CTRL + Q : Fungsi menghilangkan nomor urut
CTRL + R : [RIGHT] Fungsi membuat teks menjadi rata kanan
CTRL + S : [SAVE] Fungsi menyimpan dokumen
CTRL + T : Fungsi menggeser Left Tab pada mistar dokumen
CTRL + U : [UNDERLINE] Fungsi menggarisbawahi teks
CTRL + V : [PASTE] Fungsi menampilkan hasil teks yang sudah di Copy
CTRL + W : Fungsi menyimpan dan langsung menutup program ms. Office
CTRL + X : [CUT] Fungsi menghapus teks (Teks terlebih dahulu di-Blok)
CTRL + Y : [REDO] Fungsi mengulang kembali aktivitas yang dibatalkan
CTRL + Z : [UNDO] Fungsi membatalkan aktivitas terakhir

Sekian dari Blog saya tapi tombol ini hanya berfungsi jika aplikasi yang kita buka mendukung
Contoh jika CTRL + B di Microsoft Word bisa tapi tidak di di Photo Shop…
Ok….kalian pasti megerti See you……Tolong Like Atau Coment

Media Belajar Pintar