Langsung ke konten utama

Elemen-elemen dasar HTML untuk memformat halaman web

Sumber gambar peterwebs.com


1.Elemen Head

Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut.

Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
  • Menyediakan judul dokumen
  • Menjabatani hubungan antar dokumen
  • Memberitahu browser untuk membuat form pencarian
  • Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :

1.Tag <title>,digunakan untuk memberi judul dokumen.Penggunaannya sebagai berikut :
<title> Judul </title>

2.Tag <base>,digunakan untuk menentukan basis URL sebuah dokumen.Penggunaannya adalah sebagai berikut :
<base href="url">
contoh :
<base href="//www.alamat.com/direktori">

3.Tag <link>,digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :

Atribut
Fungsi
href
Menunjuk pada URL dokumen lain
rel
Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut
rev
Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type
Menentukan tipe dan parameter dari relasi

Penggunaannya adalah sebagai berikut :

<link [{revirel}="teks'] href="url">
contoh :
<link rev="made"href="mailto:nama@alamat.com">
<link rel="toc"href="contents.htm">
<link rel="index"href="index.htm">
<link rel="copyright"href="copyright.htm">

4.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
Mendefinisikan properti dari elemen
name
Menyediakan deskripsi tambahan dari elemen
url
Mendefinisikan target dokumen dari sebuah property
content
Menyediakan nilai respon dari properti

Untuk lebih memperjelas penggunaan tag <meta> perhatikan contoh berikut ini <meta http-equiv="refresh" content="60" url="www.alamat.com">

Perintah diatas akan diterjemahkan oleh browser sebagai "tuggu 60 detik,kemudian panggil dokumen baru pada www.alamat.com. Jika atribut URL tidak disertakan,maka halaman itu sendiri yang akan dipanggil,jadi setara dengan mengklik tombol Refrsh/Reload pada browser.

Penggunaan elemen <meta> yang paling populer adalah penggunaan properti Keyword dan Description.Kedua properti ini sangat berguna untuk membantu kerja search engine.Biasanya search engine akan menggunakan teks yang disebutkan pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.

Contoh (Save dengan nama meta.html) :

<html>
<head>
<title> General officers of the US Army in the Civil war </title>
<meta name=”Keywords” content=”Yankee, Grand Army of the Repubic,War Between
The Satates”>
<meta name=”Description” content=”A Listing of the General officers of the US Army in the Civil War”>
</head>

Elemen BODY

BODY digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.

Atributnya :

ATRIBUT
FUNGSI
alink
Digunakan untuk mengatur warna active link dokumen dengan default merah.
background
Digunakan untuk mengatur latar belakang dengan gambar/image
bgcolor
Digunakan untuk mengatur warna latar belakang dokumen,dengan warna putih sebagai default-nya
bgproperties
Jika nilai atribut ini diisi “FIXED”,maka gambar latar belakang tidak ikut tergulung
leftmargin
Batas kiri dokumen
link
Untuk mengatur warna link dokumen dengan warna biru sebagai warna default
text
Digunakan untuk mengatur warna teks dokumen,dengan warna hitam sebagai warna default
topmargin
Menentukan batas atas
vlink
Untuk mengatur warna visited link dokumen dengan default ungu

Contoh (Save dengan nama background.html) :

<html>
<head>
     <title> penggunaan body </title>
</head>
<body bgcolor=”silver” text=”blue” alink=”#000000”
vlink=”#ff0000” link=”green”>
   ini adalah contoh penggunaan body
   ini adalah sebuah <a href=””> link </a>
</body>
</html>

Code Warna :

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red,green,blue).Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0,1,2,...,f).Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah,hijau dan biru.Misalnya untuk warna kuning,dibuat dengan pencampuran warna sebagai berikut :

Red
Green
Blue
FF
FF
00


Berarti untuk warna kuning dapat dibuat dengan kode #fff00.Disamping itu,pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris,misalnya kuning="yellow".
Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.

WARNA
NILA
WARNA
NILA
Black
#000000
Silver
#C0C0C0
Maroon
#800000
Red
#FF0000
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Purple
#800080
Fuchsia
#FF00FF
Teal
#008080
Aqua
#00FFFF
Gray
#808080
White
#FFFFFF

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda.Yang penting anda mengikuti aturan diatas.

Komentar

Komentar adalah bagian dari kode HTML yang diabaikan oleh browser.Kegunaan komentar dalam kode HTML adalah sebagai keterangan.Sebuah komentar diawali dengan <!-- dan diakhiri dengan -->

 Contoh (Save dengan nama coment.html) :
<html>
<head>
     <!- -ini adalah bagian head -->
</head>
<body bgcolor=#ff0000 >
     <!- - warna background adalah merah - ->
</body>
</html>


Memberi Identitas

Kadang-kadang orang yang merancang suatu halaman web ingin mencantumkan namanya pada dokumen web tersebut atau mungkin mencantumkan hak cipta terhadap dokumen tersebut.Untuk mencantumkan informasi-informasi tersebut digunakan tag <ADDRESS>.Umumnya informasi tersebut diletakkan pada bagian paling akhir suatu dokumen.

Contoh (Save dengan nama id.html) :

<html>
<head>
<title> Penggunaan Address </title>
</head>
<body>
     Selamat datang di web amatir
     <address>
     Dokumen ini di rancang oleh Yadull <br>
     Pada tanggal 02 Februari 2019
     </a ddress>
</body>
</html>

  



Label:

Komentar

Yaden Std mengatakan…
Iya sob makasih telah berkunjung ke blog ini,,,,pantengin terus tutorial lain nya,,semoga bermanfaat..
20 Mei 2020 pukul 15.08
Yaden Std mengatakan…
Sama-sama sob
14 Juli 2020 pukul 14.04
Posting Komentar

Postingan populer dari blog ini

Menggunakan Link di dalam HTML - HTML Tutorial

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu.Jika link diklik maka dokumen HTML akan menuju ke alamat tersebut.Ditandai dengan Anchor, yaitu tag <a>. Tag <a> mempunyai dua atribut,yaitu href dan name.Atribut href digunakan jika sebuah anchor akan digunakan sebagai link,sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan. 1.Link ke dokumen lain Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda,anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.Untuk mencoba kita akan membuat 3 file yang saling berhubungan.Sebelumnya supaya file-file yang dibuat terlihat rapi kita buat folder "tabel" terlebih dahulu jika nanti file link yang kita buat tersimpan di dalam folder "tabel". 1.link-utama.html  <html> <head> <title> Halaman Utama </title> </head...
Posting Komentar
Baca selengkapnya

Enam Kebiasaan yang tidak produktif

1.Tidak memiliki rencana dalam hidup Dalam bukunya yang terkenal William feather menyampaikan dua jenis perbuatan yang mendatangkan kegagalan. a.yang pertama orang yang bertindak tanpa rencana b.yang kedua orang yang berencana namun tak melakukan apapun. Sekali pikiran manusia telah di kembangkan dengan rencana baru maka tak akan pernah mendapatkan kembali dimensinya yang lama                                                                           Oliver Wendell Holmes 2.Kehilangan sikap dalam hidupnya Orang senantiasa akan mendapatkan apa yang paling di harapkan dalam hidupnya.Bila pengharapannya baik maka kebaikan akan mendatanginya,namun bila pengharapannya buruk,maka keburukannlah yang akan mendatanginya. Masa depan merupakan milik mereka yang percaya pada mimpi mimp...
Posting Komentar
Baca selengkapnya

Jalan Menuju Sukses

Kita tak akan pernah tahu sampai bila kita tak pernah memulai #Howard Zinn Bergeraklah cepat,jangan sampai kita menjadi penonton yang sukses.Mulailah dengan langkah nyata,gerakan langkahmu!!! Jika kita memiliki keinginan untuk menjadi seorang pengusaha yang berhasil,rasanya tidak cukup kita memiliki keinginan saja,tetapi kita tetap harus melangkahkan kaki,menggerakkan tubuh untuk mencapai keinginan tersebut.Dibenak kita harus ingat,untuk mencapai langkah keseribu kita membutuhkan langkah pertama.Tidak akan pernah ada langkah keseribu tanpa kita memulai langkah pertama.Itu pasti. Apapun jika kita ingin berangkat ke Jakarta,maka kita harus memutuskan apakah kita berangkat ke Jakarta tersebut menggunakan kendaraan umum atau berjalan kaki,apakah menggunakan kereta atau bis,apakah menggunakan motor atau mobil sendiri.Tujuan arahnya apakah melalui Cianjur atau Purwakarta.Saat ini sudah ada jalan tol Purbaleunyi,alangkah lebih cepatnya melewati jalan tol.Berbagai pilihan tersaji di depa...
Posting Komentar
Baca selengkapnya