Desain Web Dengan Tag HTML - Part 2

Desain Web dengan
Tag HTML
Tujuan
 Memahami perintah-perintah dasar dalam

membuat sebuah halaman situs
 Membuat situs dengan bahasa dasar
 Mendesain halaman situs
Materi-materi
1. Struktur dasar HTML

2. Formatting layout
3. Formatting text
4. Formatting link
5. Formatting table
6. Formatting frame
Struktur dasar HTML
 HTML?
“Hyper Text Markup Language”
Adalah bahasa program yang digunakan untuk
menulis format dokumen yang dapat
digunakan dalam web dan bisa dibuka oleh
browser (Internet Explorer, Mozilla dll)
Teks ASCII yang dipoles dengan kode-kode
tertentu yang disebut tag untuk menjadi
dokumen HTML (*.htm atau *.html)
<html>
<head>
<title>Disini Judul Situs</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>
Tag HTML
 Kode yang digunakan untuk me-mark-up

(Memoles) teks ASCII menjadi file HTML.
 Adalah teks khusus (markup) berupa dua
karakter "<" dan ">",
 sebagai contoh
<body>
Elemen
 Tiga bagian:
 Tag pembuka
 Isi
 Tag penutup
 Sebagai contoh untuk menampilkan judul
dokumen HTML pada web
browser digunakan element title
<title> judul situs </title>
Cara penulisan
1. Setiap tag ditandai dengan kurung runcing

(< >), contoh: <html>
2. Ada tag pembuka, ada tag penutup contoh:
<html> </html>
3. Tag tidak case sensitive
4. Tag penutup ditandai dengan garis miring
(slash)
Atribut Tag
 Mendefinisikan property dari suatu elemen
HTML
 Terdiri dari:
 Nama atribut
 Nilai atribut
<TAG nama=“nilai” nama=“nilai”...>

Isi dari yang di mark-up dengan atribut
</TAG>
Anatomi
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Elemen Title
 Untuk memberikan judul bagi halaman web

tersebut
 Judul akan di tampilkan pada title bar sebuah
browser
 Format tag:
<title>Situs Majalah  </title>

Formatting lay out
Lay Out
 Latar Belakang
 Baris
 Paragraf
 Pensejajaran
 Format bebas
Latar Belakang
 Background
 Warna
 Gambar
 Memanfaatkan tag body (sebagai atribut)
<Body>
</Body>
Latar Belakang Warna
 Warna bisa diisikan

 Teks nama warna dalam bahasa inggris yang
dikenal Windows contoh:
<body bgcolor=red>
 Dengan bilangan heksadesimal
<body bgcolor=#FF0000>
Latar Belakang Gambar
 Memberikan latar belakang sebuah situs

dengan gambar
<body background=Logo_1024x768.bmp>
Line Break
 Perintah untuk ganti baris tapi masih dalam

lingkup paragraf yang sama
 Tanpa penutup tag
 
 Contoh:
Tulisan berada pada baris pertama 
Tulisan berada pada baris kedua 
Tulisan berada pada baris ketiga 
Paragraph
 Untuk menandai paragraf baru

 Untuk membuat kelompok paragraf dengan
formatting style tertentu (secara default
adalah rata kiri/left)
 Tanpa tag penutup
 Tag:

Atribut pensejajaran (align)
 Dengan atibut formatting style, yaitu align

 Left (default)
 Center
 Right
 Justify

Format bebas
 Elemen PRE
 Menampilkan apa adanya
 Browser tidak mengenali:
 Spasi lebih dari sekali
 Tabulasi
 Pembuatan baris dan
 Enter
<PRE>
text yang di format
bebas sesuai dengan
keinginan pendesain
</PRE>
Blockquote
 Paragraf atau alinea ialah sekumpulan kalimat yang
mengandung satu pokok pikiran. Antara satu
paragraf dengan paragraf lainnya biasanya
dipisahkan oleh baris kosong. Namun biasa pula
paragraf itu ditandai dengan posisi baris
pertamanya yang agak masuk ke dalam.
 Kedua, membuat paragraf yang semua barisnya
agak masuk ke dalam. Untuk membuat paragraf
semacam ini kita menggunakan tag
<BLOCKQUOTE> yang mengapit paragraf-paragraf
yang hendak kita jadikan masuk ke dalam.
 <BLOCKQUOTE> . . . </BLOCKQUOTE>
Indentasi
 mengatur posisi baris-baris paragraf dari

margin (tepi halaman). Ada tiga macam
bentuk indentasi paragraf. Pertama, baris
pertamanya saja yang agak masuk ke dalam.
Untuk membuat paragraf semacam ini kita
menggunakan tag <DD>
Daftar definisi
 Menandai dimulai atau diakhirinya daftar

definisi <dl> . . . <dl>
 Menandai paragraf normal <dt>
 menandai paragraf yang agak masuk ke
dalam <dd>

Desain Web Dengan Tag HTML - Part 2

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Desain Web Dengan Tag HTML - Part 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Desain Web dengan

 Memahami perintah-perintah dasar dalam

1. Struktur dasar HTML

 Kode yang digunakan untuk me-mark-up

1. Setiap tag ditandai dengan kurung runcing

<TAG nama=“nilai” nama=“nilai”...>

 Untuk memberikan judul bagi halaman web

<title>Situs Majalah  </title>

 Warna bisa diisikan

 Memberikan latar belakang sebuah situs

 Perintah untuk ganti baris tapi masih dalam

 Untuk menandai paragraf baru

 Dengan atibut formatting style, yaitu align

 mengatur posisi baris-baris paragraf dari

 Menandai dimulai atau diakhirinya daftar

Anda mungkin juga menyukai