Author Topic: Berkenalan dengan HTML...  (Read 5394 times)

0 Members and 1 Guest are viewing this topic.

Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Berkenalan dengan HTML...
« on: 09 March 2009, 17:04:38 »
sekadar shre ajah buat yg blum tau...

HTML merupakan akronim dari HyperText Markup Language. Dokumen HTML adalah file teks murni yang berisi informasi dan dapat dibuat dengan editor sembarang, yang kemudian dikenal sebagai webpage karena ditampilkan dalam browser web surfer. Ada dua cara untuk melakukan editing sebuah dokumen HTML, yakni menggunakan HTML editor seperti Microsoft Frontpage ataupun Macromedia Dreamweaver.

Namun begitu, Notepad adalah HTML editor yang paling 'senior' di antara semua yang telah saya sebutkan di atas.

Dokumen HTML sendiri tersusun atas elemen-elemen atau komponen dasar pembentuknya. Karena banyaknya elemen atau komponen dasar ini, maka ditandai dengan sebuah tag. Berikut beberapa catatan soal petunjuk tag html ini :

1. Terdiri atas sebuah kurung sudut kiri/tanda lebih kecil (<), sebuah nama tag, dan sebuah kurung sudut kanan/tanda lebih besar (>)
2. Tag HTML secara normal selalu berpasangan seperti <b> diawal dan </b> di akhir.
3. Tag yang pertama berarti awal suatu elemen, dan yang kedua atau yang menjadi pasangan berarti akhir suatu elemen dan selalu diawali dengan garis miring (/).
4. Nama elemen ditunjukkan dengan nama tagnya. Misal b, yang berarti elemen tersebut memiliki karakter bold atau tebal. Tag awal dan akhir harus memiliki nama yang sama. Jika nama tag awal adalah b, maka nama pada tag akhirnya juga harus b dengan disertai garis miring.

Walaupun begitu, ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, di antaranya adalah :

    * ganti baris - line break dengan tag <br>, dan
    * garis datar - horizontal rule dengan tag <hr>

Kemudian, beberapa hal yang harus anda perhatikan disini adalah :

1. Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh saling bersilangan, tapi harus berurut. Misalnya:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.2. Tag html tidak "case sensitive". Sehingga <b> sama dengan <B>.
3. Walaupun tag html tidak "case sensitive", saya sarankan semua penulisan tag anda menggunakan huruf kecil saja; <b> dan bukan <B> contohnya.

Memang, kebanyakan web masih menggunakan tag HTML dengan huruf besar, tapi hal ini untuk mengantisipasi perkembangan standar HTML pada generasi selanjutnya. Karena mulai HTML versi 4.0 dan XHTML, W3C atau badan resmi yang membuat standarisasi web di dunia, merekomendasikan penggunaan tag dengan huruf kecil. Setidaknya hal ini akan sedikit memperkecil ukuran webpage anda.



Forum Informatika

Berkenalan dengan HTML...
« on: 09 March 2009, 17:04:38 »
Sponsored Links:


Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #1 on: 09 March 2009, 17:05:02 »
Tag dasar berarti elemen dasar. Pada dasarnya, dokumen HTML terdiri atas teks informasi yang ingin anda sampaikan pada pengunjung situs. Seperti yang kita ketahui pada tutorial sebelumnya, bahwa HTML terdiri atas elemen tag sebagai penyusunnya. Untuk dapat membangun sebuah dokumen HTML, maka diperlukan susunan tag minimum atau sekurang-kurangnya, dokumen HTML harus terdiri atas susunan tag :

1. HTML

Merupakan tag dasar yang mendefinisikan bahwa ini adalah dokumen HTML. Tag ini merupakan satu keharusan bagi pemrograman untuk menuliskannya sebagai tag pertama dalam dokumen HTML.

Cara penulisan :
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
2. HEAD

Merupakan bagian untuk menuliskan keterangan tentang dokumen yang akan ditampilkan. Salah satunya adalah judul/topik utama suatu dokumen.

Cara penulisan :
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
3. TITLE

Tag penjelas judul atau topik utama suatu dokumen yang akan ditunjukkan pada caption browser web. Dituliskan pada bagian/section HEAD.

Cara penulisan :
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
4. BODY

Merupakan bagian utama dalam dokumen web. Pada bagian ini semua isi dokumen yang akan ditampilkan di dalam browser, harus dituliskan disini.

Cara penulisan :
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Itulah tag/elemen dasar yang minimum harus ada dalam suatu dokumen HTML. Akan tetapi, pada beberapa browser, walaupun tidak menggunakan pola minimum seperti ini, browser tersebut masih bisa menampilkan dokumen html. Dan saya sangat tidak menganjurkan hal tersebut. Berikut contoh lengkap penulisan ketentuan minimum yang harus ada pada suatu dokumen web :

Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
INGAT!
Jika anda mengedit dalam sebuah editor seperti Ms. Frontpage/Macromedia Dreamweaver, maka formula tersebut harus dituliskan dalam ruang dan hasilnya dapat di lihat di


Pada tutorial selanjutnya, saya akan menjelaskan beberapa tag yang biasa dipergunakan dalam sebuah dokumen HTML.

« Last Edit: 09 March 2009, 17:08:02 by wyvern »

Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #2 on: 09 March 2009, 17:08:28 »
Supaya lebih jelas, sekarang kita akan mencoba menampilkan tag-tag dasar HTML sebagai halaman web. Copy-paste kode dibawah ini ke dalam Notepad contohnya.
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.



Perhatikan kedua bagian yang diberi tanda merah, kita akan lihat nanti posisi mereka saat telah tampil sebagai halaman web.

Sekarang simpan file Notepad Anda dengan ekstensi *.htm/*.html. Klik menu File > Save atau dengan shortcut Ctrl+S. Beri nama seperti "Contoh Website.html" namun jangan lupa untuk mengubah kolom Save as type: sebagai All files.



Jika sudah, sekarang buka file yang telah Anda simpan tersebut dari lokasi penyimpanan pada Windows Explorer Anda. Maka, pada browser akan tampil seperti berikut...



Anda lihat, pada bagian atas, disanalah letak isi dari apa yang kita tuliskan di dalam tag <title>...</title> sedangkan pada halaman browser, itu merupakan isi dari apa yang kita tuliskan di dalam tag <body>...</body>

Mudah bukan? ;)

Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #3 on: 09 March 2009, 17:08:56 »
Tutorial sebelumnya kita sudah bahas dan mengenal tag minimum yang harus ada pada sebuah dokumen HTML. Nah, untuk tutorial sekarang ini saya ingin memberitahukan juga beberapa tag dasar lainnya, terutama yang berhubungan dengan penulisan teks dokumen itu sendiri. Berikut beberapa tag tersebut:


1. Paragraf

Setiap paragraf harus dimulai dengan memberi tag <p> dan tidak harus selalu diakhiri dengan </p>. Tapi, saya lebih menyarankan agar anda menggunakannya untuk menandai bahwa itu adalah akhir dari suatu paragraf dan awal dari paragraf yang lain.

Contoh:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Hasil:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Untuk menentukan besar spasi antar paragraf, anda dapat menambahkan style="margin:0pt 0pt 6pt 0pt". Yang berarti jarak atas dari paragraf tersebut=0point, kanan=0point, bawah=6point, dan kiri=0point. Silahkan ganti angkanya sesuka anda. Contohnya:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.

2. Line Break

Kita dapat memaksakan ganti baris pada dokumen web. Ganti baris disini hanya dimaksudkan menampilkan suatu teks pada baris selanjutnya dalam suatu paragraf dan tidak berganti paragraf lain.

Contoh:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Hasil:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Jangan gunakan tag <p> untuk menyisipkan baris kosong, tapi gunakan <br>. Itu adalah suatu kebiasaan buruk!


3. Penggaris Mendatar

Sebuah garis dapat disisipkan dalam dokumen web yang biasanya digunakan sebagai pemisah antar bagian atau paragraf. Tag <hr> disisipkan pada tempat garis akan ditampilkan dalam dokumen.

Contoh:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Hasil:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.

4. Heading

Teks dalam dokumen umumnya mempunyai judul topik pada tiap dokumen HTML. Nah, judul ini disebut heading. Heading tulisan akan ditampilkan dalam huruf yang besar dan ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks yang akan dituliskan dengan memberikan tingkatan mulai dari tingkat 1-6, dimana tingkat 1 adalah heading yang terbesar dan berlaku surut untuk tingkatan selanjutnya.

Contoh:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Hasil:
Ini heading 1
Ini heading 2
Ini heading 3
Ini heading 4
Ini heading 5
Ini heading 6

Anda dapat mengatur letak heading pada sisi kiri, kanan ataupun tengah dengan menambahkan atribut tag align=?left/right/center?. Contohnya, <h2 align="left">...</h2>


5. Komentar

Dalam suatu teks dokumen, ada sebagian teks yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri. Akan tetapi, apa yang anda tuliskan dalam komentar ini tidak akan ditampilkan dalam browser dan hanya terlihat pada source code saja.

Di lain pihak, komentar ini bisa juga digunakan untuk menyembunyikan sebagian dokumen web karena alasan belum ada kepastian dari isi dokumen terutama dari aspek legal, perlu ada approval sebelum bisa dipublikasikan atau karena dokumen tersebut belum lengkap 100%. Tag komentar ditandai dengan <!-- di awal, dan --> di akhirnya.

Contoh:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.
Hasil pada browser:
Code:
Hanya pengunjung TERDAFTAR yang bisa melihat konten. Silakan melakukan Registrasi terlebih dahulu atau Login.

Ingat, karena ini adalah tag penulisan dokumen, tentu saja, semua harus dituliskan di antara tag <body>...</body>.

Selamat mencoba.. O0



Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #4 on: 09 March 2009, 17:09:30 »
Berikut sebagian diantara sekian banyak kode-kode tag HTML yang biasa digunakan dalam bahasa pemrograman web.

Untuk kode-kode lainnya/contoh penerapannya bisa tengok halaman http://www.web-source.net/html_codes_chart.htm atau http://www.w3schools.com/tags/default.asp















Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #5 on: 09 March 2009, 17:09:54 »
Beberapa karakter memiliki arti khusus dalam HTML. Seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Tidak seperti nama tag, b (bold) misalnya, karakter HTML ini memiliki sifat case sensitive yang berarti jika salah mengetik sedikit saja, maka browser tidak akan dapat membacanya. Sehingga, jika kita menginginkan browser untuk menampilkan karakter-karakter tersebut, harus menyisipkan entitas karakter ke dalam source HTML.

Entitas karakter mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas (#) dan nomor entitas, terakhir adalah sebuah tanda titik koma/semicolon (;).

Contoh:

Jika ingin menampilkan tanda lebih kecil (<) dalam sebuah HTML, maka di dalam source anda harus menuliskan: < atau <.

Kelebihan dengan menggunakan nama dibandingkan dengan nomor bahwa nama akan lebih mudah diingat. Sementara kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan untuk nomor-nomor entitas didukung oleh hampir semua browser.

Entitas Karakter yang Sering Digunakan



Daftar Entitas HTML selengkapnya bisa dilihat di Wikipedia.






heheheheheeee
lumayan tambah postingan....

Offline 1nf0rm4t1c5

  • Administrator
  • *
  • Posts: 1150
  • Reputasi: 15
  • Informatics Developer
    • Forum Informatika
  • Lokasi: Indonesia
  • Jenis Kelamin: Laki-laki
Re: Berkenalan dengan HTML...
« Reply #6 on: 09 March 2009, 22:25:34 »
wow... bandwidth killer  :baby:

Thanx n Keep posting!

Offline lumine

  • Developer IF
  • *
  • Posts: 519
  • Reputasi: 9
Re: Berkenalan dengan HTML...
« Reply #7 on: 10 March 2009, 08:29:14 »
nice

Offline wyvern

  • Developer IF
  • *
  • Posts: 450
  • Reputasi: 18
    • vern blog
Re: Berkenalan dengan HTML...
« Reply #8 on: 14 March 2009, 15:36:33 »
wow... bandwidth killer  :baby:

Thanx n Keep posting!

hehehehee...
dah lama gak posting...
dapet tulisan bagus, share ajah di sinih...
:D

Offline aria34

  • Newbie
  • *
  • Posts: 18
  • Reputasi: 0
    • jasa pembuatan website
  • Lokasi: jakarta
  • Jenis Kelamin: Laki-laki
Re: Berkenalan dengan HTML...
« Reply #9 on: 09 July 2018, 15:27:05 »
Ini berguna banget nih buat para newbie yang mau belajar basic dari html.
Nanti setelah fasih belajar html baru deh belajar CSS, Javascript dan PHP.
Ane dulu lama loh belajar web programming dan web design.
Tapi akhirnya bisa juga bikin website pribadi. Bahkan juga ada beberapa project website toko online dan company profile (bikinin buat teman).
Mungkin tahun depan bisa nih bikin jasa pembuatan website ... :D