Cara Menulis Kode HTML

Diposting oleh Unknown | | Posted On Kamis, 29 Desember 2016 at 08.00


Hay,,, Ketemu lagi dengan saya, si mimin cantiikk. Gimana masih penasaran ya kelanjutan belajar HTML nya ??? Oke,, Tenang .... masih banyak yang perlu kalian ikuti kelanjutan ceritanya. Yukk Kita simak penjelasan di bawah ini !!!

Cekidot !!
Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak diantara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”). Nama tag boleh ditulis dengan huruf kecil, huruf kapital, maupun kombinasi antara huruf kecil dan huruf kapital.

Sebuah dokumen atau file HTML agar dapat dibaca langsung oleh browser disimpan dalam ektensi .htm atau .html. Untuk menulis HTML tidak dibutuhkan perangkat lunak yang spesifik, cukup dengan text editor sederhana seperti Notepad (pada Microsoft Windows) atau beragam text editor yang ada diplatform Linux dan Apple Mac OS, seperti vi, nano, joe, gedit, leafpad dan lain-lain. Beberapa editor menyediakan fitur-fitur tambahan seperti syntax coloring (memberi warna pada kode-kode HTML) dan code completion (melengkapi secara otomatis kode yang akan dituliskan). Saat ini telah banyak perangkat lunak berbasis GUI (WYSIWYG – What You See Is What You Get) yang sangat membantu dalam pembuatan halaman-halaman HTML. Macromedia Dreamweaver dan Microsoft Frontpage merupakan dua nama yang cukup populer di platform Microsoft Windows. Sedangkan di Linux tersedia Quanta+, Bluefish dan Nvu.

Dokumen HTML diawali dengan element HTML
<html>.....</html>

Elemen ini menyatakan pada browser, bahwa dokumen yang digunakan adalah HTML
Struktur dokumen HTML terlihat seperti bawah ini :










A.  KOMPONEN UTAMA

Sebuah halaman HTML terdiri dari 2 bagian utama, yaitu HEAD dan BODY

           1.   HEAD

Bagian ini biasanya berisi berbagai macam keterangan tentang dokumen termasuk title (judul dokumen), posisinya dalam sekumpulan halaman web dan hubungannya dengan dokumen lain. Bagian ini ditandai dengan tag <head>....</head>. Tag ini tidak mempunyai atribut. Di dalam tag ini kita dapat meletakkan beberapa tag lain seperti tag title dan tag link.
Elemen head berisi definisi/keterangan dari sebuah halaman HTML, seperti judul halaman dan informasi berkaitan dengan halaman HTML. Pada elemen ini juga didefinisikan file eksternal yang mungkin akan digunakan pada halaman web, contoh file javascript dan CSS (Casecading Style Sheet). Elemen <head>....</head> terletak di dalam elemen <html>...</html>
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut:
·         Menyediakan judul dokumen
·         Menjembatani hubungan antar dokumen
·         Memberitahu browser untuk membuat form pencairan
·         Menyediakan metode untuk mengirim pesan ke tipe browse
Elemen yang mungkin terdapat pada bagian head:
·         Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai berikut:
<title>Judul Dokumen</title>
·   Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh penggunaannya adalah sebagai berikut :
<base href=”//www.alamat.com/direktori” />
·         Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini memiliki beberapa atribut :

Atribut
Fungsi
Href
Menunjukkan pada URL / dokumen lain
Rel
Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain yang berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut.
Type
Menentukan tipe dan parameter dari relasi

Cara penggunaannya adalah sebagai berikut :


·         Tag <style>, digunakan untuk mendefinisikan langsung style yang digunakan pada sebuah halaman web atau yang biasa disebut CSS. Kode style ditulis dengan aturan tertentu (akan dibahas pada bab berikutnya)
·         Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML. Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML.
Tag <meta> mempunyai atribut :
Atribut
Fungsi
http-equiv
Atribut ini menghubungkan elemen META ke respon protokol tertentu
Name
Merupakan informasi untuk suatu dokumen, bukan sebagai judul dokumen
Content
Isi dari nama suatu meta atau respon yang dibuat oleh HTTP-EQUIV

Cara potongan program :


             2. BODY

<body>......</body>

Element ini menampilkan isi dokumen html. Elemen <body>....</body> terletak di bawah elemen <head>.....</head>. Element body mempunyai attribute yang menspesifikasikan khususnya warna dan latar belakang dokmen yang akan ditampilkan di browser.
B. ATURAN UMUM PENULISAN HTML

HTML adalah bahasa yang disisipkan (embedded language) pada dokumen dengan memberi tanda tertentu yang disebut tag. Tag merupakan aturan penulisan kode yang ditulis dengan diawali tanda lebih kecil dan di akhiri dengan tanda lebih besar ( <tag> ). Browser akan menentukan tampilan teks atau dokumen berdasarkan tag yang digunakan.
Sintaks penulisan tag mengikuti aturan-aturan umum berikut ini:
  • Setiap tag mempunyai nama yang spesifik. Kadang-kadang diikuti opsi-opsi yang disebut atribut. Baik nama maupun opsi harus berada dalam tanda <..>
Contoh :

Pada contoh ini tagnya memiliki nama <a> sedangkan atribut utuk tag <a> adalah href dan title. Sehingga baik nama tag dan atributnya harus berada didalam tanda <...> seperti pada contoh.
  • Sebagian besar tag berpasangan. Penulisan untuk tag yang berpasangan adalah sebagai berikut : <namatag>...</namatag>
Contoh :





Pada tag yang berpasangan seperti pada contoh ini, <TITLE> adalah tag awal dan </TITLE> adalah tag akhir. Perhatikan tanda / pada tag akhir.
Namun ada juga tag yang tidka memiliki pasangan atau berdiri sendiri, misalnya: <BR> (break) untuk memindahkan cursor pada berikutnya, <HR> (horizontal) untuk membuat garis horizontal.
  •     Nama tag dan atributnya tidak bersifat case sensitive yang berarti penulisan kode baik huruf besar maupun huruf kecil, dianggap sama. Penulisan <strong>Cetak Tebal</strong> memberikan hasil yang sama dengan <STRONG>Cetak Tebal</STRONG>.

  •     Penulisan atribut suatu tag diletakkan setelah nama tag. Jika ada lebih dari satu atribut maka digunakan spasi untuk memisahkan. Urutan atribut tidak penting.
Contoh :




  •     Nilai dari atribut ditulis setelah tanda sama dengan (=). Pada contoh sebelumnya (lihat bagian d) terlihat bahwa atribut SIZE dari tag FONT memiliki nilai 5 sedangkan atribut FACE memiliki nilai “verdana”
Jika nilai dari atribut hanya tunggal, maka kita langsung menuliskan setelah tanda =. Jika lebih dari satu maka dapat digunakan tanda ‘....’ atau “....”.

C. ELEMEN HTML 5

Sebuah halaman web tersusun dari beberapa tag HTML yang saling melengkapi dan bersinergi untuk menampilkan informasi dalam sebuah halaman web. Berikut adalah beberapa tag HTML yang banyak/sering digunakan untuk membuat halaman web:

Sections
  • ·         Article
Tag ini mendefinisikan artikel, posting atau komentar dari pengguna, atau suatu konten yang independen. Artikel dituliskan dengan pasangan tag <article>...</article>
  • ·         Header, footer
Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya.
  • ·         Nav
Navigasi pada website anda dapat ditaruh didalam tag nav, yang dapat secara otomatis membuat daftar anda seperti sebuah navigasi.
  • Section
Tag ini dapat mendefinisikan section apapun dalam document anda.Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda.
  • h1-h6 (heading)
Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam sebuah dokumen HTML. HTML menyediakan enam tingkatan heading, dimana heading level 1 (<H1>) adalah yang terbesar dan heading level 6 (<H6>) adalah yang terkecil.

Grouping
  • Paragraf (Paragraph)
Tag ini digunakan untuk membuat paragraf. Tag ini akan membuat baris baru dengan menyisipkan satu baris kosong. Pengaturan posisi paragraf dapat dilakukan dengan memberikan atribut atribut ALIGN dengan pilihan value left untuk rata kiri, center untuk rata tengah (horizontal), right untuk rata kanan dan justify untuk rata kanan dan kiri. Pada HTML 5 atribut ini mash bisa berjalan, namun banyak yang sudah mengalihkan fungsinya menggunakan CSS.
  • Preformated Text
Tag ini digunakan untuk membuat text praformat, artinya keadaan yang dituliskan di dalam kode HTML akan ditampilkan seperti pula dalam browser. Tag ini dituliskan dengan <pre>....</pre>
  • Garis Horizontal (horizontal row)
Untuk mempercantik tampilan, serinkali pembuat web menambahkan garis horizontal dengan menggunakan tag <hr> (horizontal row). Tag ini juga merupakan tag yang tidak memiliki pasangan.
  • Kutipan (blockquote)
Tag ini digunakan untuk membuat kutipan. Kutipan ditampilkan sedikit lebih menjorok kedalam.
  • Divisi
Tag divisi (<div>) berfungsi seperti tag paragraf (<p>), bergunauntuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama, misalnya warna, jenis, dan ukuran huruf.

Wahh,,, tambah pusing gak kalian ??? pasti enggak lah ya, kan seruuu banget tuhh belajar kayak beginian. Oke mungkin pada pertemuan kali ini cukup sekian dulu. Kita akan bertemu pada pertemuan berikutnya dengan materi yang lebih HOT tentunya. Oke Matur ThankYou. See You
0 komentar

Comments:

There are 0 komentar for Cara Menulis Kode HTML

Posting Komentar

Langganan: Posting Komentar (Atom)