Struktur Dokumen HTML
Postingan ini merupakan lanjutan dari postinga sebelumnya "Belajar HTML"Tetapi sekarang ini lebih mendalam lage.....sebelumnya hanya kode -kode dasar saja ...
Nih langsung aja ke T.K.P :
Sebelumnya sudah saya katakan bahwa HTML yang baik memiliki tag
<head> dan <body>. <head> mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti <base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini: ---------------------------------------
<html> <head> <title>Your title</title> </head> <body bgcolor="#cccccc"> Hello <b>World!!</b> </body> </html> ------------------------------
hasilnya di dalam IE
----------------------------
-------------------------------------
Anda lihat teks yang berada diantara tag
<title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya. Susun file Anda
Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.
index.html
Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.
Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.
Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag
<body> Teks dan Paragraf
Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.
Heading merupakan container yang diawali dengan tag
<h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6. -------------------------------
<h1>My First HTML</h1> <h2>My First HTML</h2> <h3>My First HTML</h3> <h4>My First HTML</h4> <h5>My First HTML</h5> <h6>My First HTML</h6> ------------------------
hasilnya :
---------------------------------
-------------------------------------------
Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya.
<p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah.Sekarang coba kode berikut ini:
-------------------------------------------------------------------------
<p>Halo, nama saya <b>Budi</b> dan saya ingin belajar HTML.</p> <p>Ini merupakan <i>kode HTML pertama saya</i> dan saya belajar untuk <u>memformat</u> teks dalam HTML </p>
--------------------------------------------------------------------------
Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba .....he..he..he..
Beberapa tag mempunyai atribut ALIGN, termasuk
<p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut: ----------------------------------------------------------------------
<h1 align="center">Nama saya Jono</h1> <p>Halo nama saya Jono dan saya lagi belajar HTML</p> <p align="right">James, 2006</p> -----------------------------------------------------
hasilnya:
-----------------------------------------------------
----------------------------------------------------------------------
Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag
<font>, tag <font> memiliki atribut seperti face, size dan color. Contoh: ------------------------------------------------------------------------------
<p><font face="Arial" size="2" color="#FF0000">Nama saya</font> <b>Bambang</b><font face="Arial" size="2"> dan </font><font face="Tahoma">saya cinta rupiah</font></p>
------------------------------------------------------------
Silahkan anda coba sendiri untuk melihat seperti apa hasilnya
Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu
<br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah . Langsung saja coba kode berikut ini:------------------------------------------------------------------
<p>Baris 1<br>Baris 2<br>Baris 3<br>Baris <b>4</b></p>
------------------------------------------------------------------
Hasil:
------------
Baris 1
Baris 2
Baris 3
Baris 4
Baris 2
Baris 3
Baris 4
---------------
OK...Sekian dulu udah ngantuk berat kita lanjutkan di postinga berikutnya...
Judul: Struktur Dokumen HTML
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh edwin naiborhu
Terima Kasih Atas Kunjungan Anda...
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh edwin naiborhu
Terima Kasih Atas Kunjungan Anda...
0 komentar:
.::Pengunjung Yang Baik Selalu Meniggalkan Jejak::.