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 Struktur dasar HTML Formatting layout Formatting text Formatting link Formatting table 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>
<title> judul situs </title> 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 Setiap tag ditandai dengan kurung runcing (< >), contoh: <html> Ada tag pembuka, ada tag penutup contoh: <html> </html> Tag tidak case sensitive 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> <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 Memanfaatkan tag body (sebagai atribut) 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 <br> Contoh: Tulisan berada pada baris pertama<br> Tulisan berada pada baris kedua<br> Tulisan berada pada baris ketiga <br>
Paragraph Untuk menandai paragraf baru Untuk membuat kelompok paragraf dengan formatting style tertentu (secara default adalah rata kiri/left) Tanpa tag penutup Tag: <p>
Atribut pensejajaran (align) Dengan atibut formatting style, yaitu align Left (default) Center Right Justify <p align=center>
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>