English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google

Senin, 08 Oktober 2012

belajar html 1 .HTML DASAR ::

salam silaturahmi

contoh gambar html
  • HTML DASAR ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari
dokumen HTML.
MATERI:
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element
HEAD, Element TITLE, Element BODY.
STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperText Markup Languageadalah script untuk
menyusun dokumen-dokumen Web. Dokumen HTML disimpandalam format teks
reguler dan mengandung tag-tagyang memerintahkan web browser untuk mengeksekusi
perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:
mari kita coba,, buka notepad anda. simpan dengan format html.
contoh beri nama;
"html dasar.htm" dan simpan,

caranya klik dua kali file yang anda simpan td otomatis ke browser anda


<html> 
<head> 
<title>Disini Judul Dokumen HTML</title> 
</head> 
<body> 
Disini penulisan informasi Web
</body> 
</html>

 Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:



  • a. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body>
adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembukadan tag
penutup(ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini
adalah tag pembuka isi dokumen HTML, dan </body>ini adalah tag penutup isi
dokumen HTML.

  • b. Element

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai
contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element
title, dimana:
<title>ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTMLini adalah isi judul dokumen HTML
</title>ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling
tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar


<p> 
     <b> 
       ................
     </b> 
</p>
Contoh penulisan tag-tag yang salah
<p> 
   <b> 
     ................
    </p>
</b>


  • c. Attribute

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan
nilai. Penulisannya adalah sebagai berikut:
<TAG> 
nama-attr="nilai-attr" 
................. 
> 
................. 
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning danlatarbelakang halaman web
menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">


  • d. Element HTML

Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:


<html> 
.......... 
</html>


  • e. Element HEAD

Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara
tag <html> dan tag </html>.
Sintaks:
<head> 
........... 
</head>

  • f. 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: 
<title> 
......... 
</title>


  • g. 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 attribute-attribute yang menspesifikasikan khususnya warna
dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"> 
.............. 
</body>

Attributetext memberikan warna pada teks, bgcolor memberikan warna pada
latar belakang dokumen HTML, background memberikan latarbelakang dokumen
HTML dalam bentuk gambar,link memberikan nilai warna untuk link, alink
memberikan warna untuk link yang sedang aktif, v link memberikan warna untuk link
yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute
background yang akan digunakan, akan tetapi jika nilai attribute background (gambar)
tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

LATIHAN 
Gunakan teks editor misalkan "Notepad"untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul
ini dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_1.html

<html> 
<head> 
<title>Latihan1-1</title> 
</head> 
<body> 
Belajar bahasa pemrograman web ternyata mudah juga :) 
</body> 
</html> 

Latihan 2:

Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html

<html> 
<head> 
<title>Latihan1-2</title> 
</head> 
<body text="red"> 
Belajar bahasa pemrograman web ternyata mudah juga :) 
</body> 
</html> 


Latihan 3:

Merubah warna background menjadi hitam.
Nama file: latihan1_3.html

<html> 
<head> 
<title>Latihan1-3</title> 
</head> 
<body text="red" bgcolor="black"> 
Belajar bahasa pemrograman web ternyata mudah juga :) 
</body> 
</html> 


Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html

<html> 
<head> 
<title>Latihan1-4</title> 
</head> 
<body text="red" bgcolor="aqua" background="./images/image027.jpg"> 
Belajar bahasa pemrograman web ternyata mudah juga :) 
</body> 
</html> 

catatan:

./images/= nama direktori file gambar disimpan
image027.jpg= nama file gambar

Cobalah untuk file gambar: image050.jpg, image052.jpg, image058.jpg dan
image060.jpg.






 sekian belajar html

salam silaturahmi
dan bersambung di  2-HTML FORMAT TEKS :



Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)