Scribd
Unggah
24 tayangan2 halaman

HTML Dasar

Dokumen ini menjelaskan struktur dasar HTML, termasuk tag, elemen, dan atribut yang digunakan untuk menyusun dokumen web. Pembaca diharapkan memahami cara penulisan tag HTML yang benar dan dapat melakukan latihan untuk menerapkan pengetahuan tersebut. Terdapat contoh latihan untuk mengubah warna teks dan latar belakang menggunakan HTML.

Diunggah oleh

maya.natarina47
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
24 tayangan2 halaman

HTML Dasar

Dokumen ini menjelaskan struktur dasar HTML, termasuk tag, elemen, dan atribut yang digunakan untuk menyusun dokumen web. Pembaca diharapkan memahami cara penulisan tag HTML yang benar dan dapat melakukan latihan untuk menerapkan pengetahuan tersebut. Terdapat contoh latihan untuk mengubah warna teks dan latar belakang menggunakan HTML.

Diunggah oleh

maya.natarina47
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 2

HTML DASAR <TAG>

nama-attr="nilai-attr"
OBJEKTIF: nama-attr="nilai-attr"
Setelah mempelajari materi ini diharapkan anda dapat .................
memahami struktur dasar dari dokumen HTML. .................
</TAG>
MATERI:
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element Secara umum nilai attribute harus berada dalam tanda petik satu
HTML, Element HEAD, Element TITLE, Element BODY. atau dua. Sebagai contoh, untuk membuat warna teks menjadi
kuning dan latarbelakang halaman web menjadi hitam,
STRUKTUR DASAR DOKUMEN HTML penulisannya adalah <body bgcolor="black" text="yellow">
HTML merupakan singkatan dari HyperText Markup Language
adalah script untuk menyusun dokumen-dokumen Web. d. Element HTML
Dokumen HTML disimpan dalam format teks reguler dan Menyatakan pada browser bahwa dokumen Web yang
mengandung tag-tag yang memerintahkan web browser untuk digunakan adalah HTML.
mengeksekusi perintah-perintah yang dispesifikasikan.
Sintaks:
Struktur dasar dokumen HTML adalah sebagai berikut: <html>
..........
<html> </html>
<head>
<title>Disini Judul Dokumen HTML</title> e. Element HEAD
</head> Merupakan kepala dari dokumen HTML. Tag <head> dan tag
<body> </head> terletak di antara tag <html> dan tag </html>.
Disini penulisan informasi Web
</body> Sintaks:
</html> <head>
...........
Dari struktur dasar HTML di atas dapat dijelaskan sebagai </head>
berikut:
f. Element TITLE
a. Tag Merupakan judul dari dokumen HTML yang ditampilkan pada
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", judul jendela browser. Tag <title> dan tag </title> terletak di
sebagai contoh <body> adalah tag dengan nama body. antara tag <head> dan tag </head>.
Secara umum tag ditulis secara berpasangan, yang terdiri atas
tag pembuka dan tag penutup (ditambahkan karakter "/" setelah Sintaks:
karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi <title>
dokumen HTML, dan </body> ini adalah tag penutup isi dokumen .........
HTML. </title>

b. Element g. Element BODY


Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag Element ini untuk menampilkan isi dokumen HTML. Tag <body>
penutup. Sebagai contoh untuk menampilkan judul dokumen dan tag </body> terletak di bawah tag <head> dan tag </head>.
HTML pada web browser digunakan element title, dimana: Element BODY mempunyai attribute-attribute yang
menspesifikasikan khususnya warna dan latarbelakang dokumen
<title> ini adalah tag pembuka judul dokumen HTML yang akan ditampilkan pada browser.
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y"
Tag-tag yang ditulis secara berpasangan pada suatu element vlink="z">
HTML, tidak boleh saling tumpang tindih dengan pasangan tag- ..............
tag lainnya. </body>
Contoh penulisan tag-tag yang benar
Attribute text memberikan warna pada teks, bgcolor memberikan
<p> warna pada latarbelakang dokumen HTML, background
<b> memberikan latarbelakang dokumen HTML dalam bentuk
................ gambar, link memberikan nilai warna untuk link, alink
</b> memberikan warna untuk link yang sedang aktif, vlink
</p> memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan
Contoh penulisan tag-tag yang salah maka attribute background yang akan digunakan, akan tetapi jika
nilai attribute background (gambar) tidak ditemukan pada
<p> dokumen HTML maka attribute bgcolor yang akan digunakan.
<b>
................ LATIHAN
</p> Gunakan teks editor misalkan "Notepad" untuk menyunting dan
</b> menyimpan script latihan di bawah ini. Untuk melihat hasilnya
bukalah file tersebut dengan menggunakan web browser atau
c. Attribute gunakan editor yang telah tersedia pada modul ini dengan
Attribute mendefinisikan property dari suatu element HTML, yang mengklik menu Editor.
terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_3.html
Nama file: latihan1_1.html
<html>
<html> <head>
<head> <title>Latihan1-3</title>
<title>Latihan1-1</title> </head>
</head> <body text="red" bgcolor="black">
<body> Belajar bahasa pemrograman web ternyata mudah juga :)
Belajar bahasa pemrograman web ternyata mudah juga :) </body>
</body> </html>
</html>
Tugas tambahan:
Tugas tambahan: Cobalah untuk warna: maroon, black, yellow, white, lime, green,
Gantilah teks tersebut dengan teks lainnya. blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.

Latihan 2: Latihan 4:
Merubah warna teks menjadi merah: Merubah background dengan suatu gambar.

Belajar bahasa pemrograman web ternyata mudah juga :) Nama file: latihan1_4.html

Nama file: latihan1_2.html <html>


<head>
<html> <title>Latihan1-4</title>
<head> </head>
<title>Latihan1-2</title> <body text="red" bgcolor="aqua"
</head> background="./images/image027.jpg">
<body text="red"> Belajar bahasa pemrograman web ternyata mudah juga :)
Belajar bahasa pemrograman web ternyata mudah juga :) </body>
</body> </html>
</html>
catatan:
Tugas tambahan: ./images/ = nama direktori file gambar disimpan
Cobalah untuk warna: maroon, black, yellow, white, lime, green, image027.jpg = nama file gambar
blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Tugas tambahan:
Latihan 3: Cobalah untuk file gambar: image050.jpg, image052.jpg,
Merubah warna background menjadi hitam. image058.jpg dan image060.jpg.

Anda mungkin juga menyukai