Belajar
HTML Dasar
HTML (HyperText Markup Language) adalah bahasa
dengan tanda-tanda khusus yang digunakan di awal era web untuk menyajikan
informasi. HTML merupakan script yang digunakan untuk menyusun/membuat
dokumen web yang apabila kita melakukan desain terhadap html berarti kita telah
melakukan tindakan pemograman. Namun HTML bukanlah sebuah bahasa pemograman
karena hanya berisikan perintah-perintah tertentu agar dapat diakses atau
diterjemahkan oleh browser. Jika kita ingin membuat suatu website atau blog
maka pengetahuan tentang html ini sangat penting sebagai dasar utama. Secara
mendasar, dokumen html mempunyai susunan sebagai berikut:
<html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>
Kode HTML diawali dengan
<html> dan diakhiri dengan </html>. Beberapa hal penting dalam kode
html :
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>, <head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>, <head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>
Untuk melihat hasilnya, silakan
jalankan browser favorit Anda, dengan cara membuka file lat1.html yang sudah
Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini
saya menggunakan browser Mozila Firefox :
Keterangan:
- Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan. Pada contoh di atas judul dokument html yaitu "Belajar HTML"
- <BODY> adalah isi dokumen yang akan ditampilkan dibrowser Anda. Isi dokumen pada contoh di atas adalah " Ini adalah web pertama saya."
Terdapat dua pilihan dalam mendesain
html :
- Menuliskan secara manual tag-tag html ke dalam dokumen html. Bagi para pemula pilihan ini dirasa lebih tepat karena dengan menuliskan tag-tag html satu persatu maka akan menambah pemahaman mengenai cara kerja dan perintah-perintah dalam HTML, meskipun cara ini akan menguras banyak waktu tetapi segala sesuatu tidak ada yang instan oleh karenanya berusaha lebih keras akan lebih baik dan akan terasa hasilnya ketika kita sudah mampu mengusai html. Cara manual ini dapat dilakukan dengan menuliskan kode-kode html pada program editor seperti notepad.
- Menggunakan editor praktis yaitu sebuah program khusus yg didesain untuk membuat, melakukan editing bahkan mempublishnya ke internet. Adobe dreamweaver merupakan salah satu program yang banyak digunakan oleh para desainer web dalam mendesain html. Para pemula yang malas untuk belajar kebanyakan memilih pilihan yang kedua ini karena praktis dan tidak menguras waktu.
Struktur
Dasar HTML
Struktur dasar html secara umum
terbagi menjadi 2 bagian yaitu header dan body. Komponen penyusun dari html
meliputi tag, elemen, dan atribut.
- Tag
Tag adalah suatu teks khusus (markup) yang terdiri dari dua
karakter yaitu < dan >. HTML tidak membedakan penggunaan huruf besar
ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag
beserta teks yang ada dalam tag-tag tersebut.Tag biasanya merupakan suatu
pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk <nama
tag> 2. Tag akhir, dinyatakan dalam bentuk </nama tag>. Format :
<nama tag> teks yang ditampilkan </nama tag>. Contoh : untuk
menampilkan teks dalam format teks miring Teks ini terlihat miring di browser
anda dengan perintah HTML <i>Teks ini terlihat miring di browser
Anda</i>
Contoh ketiklah kode berikut lalu simpan dengan nama tag.html
Contoh ketiklah kode berikut lalu simpan dengan nama tag.html
<<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<i>tulisan ini terlihat miring</i>
<b>tulisan ini terlihat tebal</b>
<u>tulisan ini bergaris bawah</u>
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<i>tulisan ini terlihat miring</i>
<b>tulisan ini terlihat tebal</b>
<u>tulisan ini bergaris bawah</u>
Maka
setelah dokumen tag.html dibuka dengan menggunakan mozilla firefox maka
tampilannya akan seperti gambar di bawah ini.
- Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag
penutup. Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak
boleh saling tumpang tindih dengan pasangan tag-tag lainnya.Contoh untuk
menampilkan judul dokumen pada browser digunakan element title yaitu:
<title> merupakan tag pembuka,
Diisi dengan judul (isi)
</title> merupakan tag penutup
Berikut ini contoh beberapa macam element:
<title> merupakan tag pembuka,
Diisi dengan judul (isi)
</title> merupakan tag penutup
Berikut ini contoh beberapa macam element:
- Element HTML
Merupakan
kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di
antara tag <html> dan tag </html>.
Sintaks:
<html>
...........
</html>
...........
</html>
- Element title
Merupakan
judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag
<title> dan tag </title> terletak di antara tag <head> dan
tag </head>.
Sintaks:
Sintaks:
<title>
.........
</title>
.........
</title>
- Element head
Elemen
<head> merupakan elemen yang berisikan informasi mengenai halaman web
yang tengah dibuka, yang tidak akan ditampilkan secara visual di halaman
browser. Sintaks
<head>
.....
</head>
.....
</head>
Pada
halaman web modern, umumnya elemen mengandung:
- elemen title, yang menunjukkan judul dari halaman yang tengah dibuka dan muncul pada toolbar browser.
- elemen meta, yang menunjukan informasi meta data mengenai halaman web yang tengah diakses.
- elemen link, yang menunjukan hubungan antara halaman web yang dibuka dan file lain. Umumnya digunakan untuk “memasukkan” file CSS ke halaman web yang bersangkutan.
- elemen script, digunakan untuk memasukkan script yang bekerja pada sisi klien seperti JavaScript.
Selain
keempat elemen di atas, terdapat juga elemen style yang digunakan untuk
memasukkan perintah stylesheet dan base untuk menetapkan alamat dan target dari
semua link yang berada di dalam halaman web. Bagaimanapun, elemen base jarang
dijumpai penggunaannya dan elemen style jarang digunakan karena paradigma saat
ini untuk memisahkan stylesheet dengan halaman web agar mudah dalam
pengorganisasiannya.
- Element body
Element
ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.
Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w"
background="uri" link="x" alink="y"
vlink="z">
..............
</body>
..............
</body>
Pada
dasarnya, elemen yang diletakkan diantara tag <body> terdiri dari tiga
jenis:
- Markup struktural: menunjukan tujuan dari text. contoh, tag heading <h2></h2>
- Markup presentasional: menunjukan tampilan dari informasi, terlepas dari fungsinya. contoh: <strong></strong>
- Markup hypertext: markup yang membuat bagian dari dokumen menghubungkan ke dokumen yang lain. contoh: <a href=""></a>
- Atribut
Atribut
text memberikan warna pada teks, bgcolor memberikan warna pada latar belakang
dokumen HTML, background memberikan latar belakang dokumen HTML dalam bentuk
gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk
link yang sedang aktif, vlink memberikan warna untuk link yang telah
dikunjungi. Jika atribut bgcolor dan background keduanya dispesifikasikan maka
atribut background yang akan digunakan, akan tetapi jika nilai atribut
background (gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang
akan digunakan.
Atribut
mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan
nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</TAG>
Secara umum nilai atribut harus
berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna
teks menjadi kuning dan latar belakang halaman web menjadi hitam, penulisannya
adalah <body bgcolor="black" text="yellow">
0 komentar:
Posting Komentar