MODUL 1
DASAR-DASAR HTML
- Ringkasan
Dalam praktikum kali ini, Anda akan mempelajari penggunaan dari beberapa tag dasar yang hampir akan selalu digunakan dalam setiap praktikum Anda nantinya. Perhatikan daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML.
- Tag HTML Dasar
- <html> = Mendefinisikan sebuah dokumen html.
- <body> = Mendefinisikan isi/badan suatu dokumen.
- <br> = Menyisipkan sebuah line break
- <h1-h6> = Mendefinisikan heading ke 1 s/d heading ke 6
Contoh: Ini h1
Ini h2
Ini h3
Ini h4
Ini h5
Ini h6
- <p> = Mendefinisikan sebuah paragraf
Contoh: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <hr> = Mendefinisikan sebuah garis horisontal
Contoh:
- <!--...-->> = Mendefinisikan komentar dalam kode sumber HTML
Setelah itu, Anda akan mempelajari penggunaan dari beberapa tag yang digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengan keinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.
- Tag untuk Pemformatan Teks Dasar
- <b> = Mendefinisikan teks tebal
Contoh: Ini tulisannya tebal
- <big> = Mendefinisikan teks yang lebih besar
Contoh: Ini tulisannya lebih besar
- <em> = Mendefinisikan teks yang dimiringkan
Contoh: Ini tulisannya miring
- <i> = Mendefinisikan teks yang dimiringkan
Contoh:Ini tulisannya juga miring
- <small> = Mendefinisikan teks yang lebih kecil
Contoh:Ini tulisannya lebih kecil
- <strong> = Mendefinisikan teks tebal
Contoh: Ini tulisannya tebal juga
- <sub> = Defines subscripted text
Contoh: Ini tulisannya lebih di bawah
- <sup> = Mendefinisikan teks yang posisinya lebih ke atas
Contoh: Ini tulisannya lebih di atas
- <ins> = Mendefinisikan teks yang bergaris bawah
Contoh: Ini tulisannya bergaris bawah
- <del> = Mendefinisikan teks yang hendak dihapus
Contoh: Ini tulisannya tercoret
- Tag untuk tampilan ‘hasil keluaran komputer’
- <code> = Mendefinisikan teks kode komputer
Contoh: T u li s an i ni sa ma de ngan ko de teks pa da kom pu ter
- <kbd> = Mendefinisikan teks dari keyboard
Contoh: Tu li san i n i da ri key word
- <samp> = Mendefinisikan teks contoh kode komputer
Contoh: Tulisan ini merupakan contoh kode komputer
- <tt> = Mendefinisikan teks model teletype
Contoh: Tul isa n in i me ru pakan mo del t el e type
- <var> = Mendefinisikan sebuah variabel
Contoh: Ini adalah variabel
- <pre> = Mendefinisikan teks preformatted
Contoh:
Tulisan ini merupahan teks preformat
- Tag untuk Citation, Quotation, dan Definisi
- <abbr> = Mendefinisikan suatu kependekan
Contoh: Misalnya ini sebuah Kependekan
- <acronym> = Mendefinisikan suatu singkatan
Contoh: Misalnya ini adalah singkatannya
- <address> = Mendefinisikan suatu elemen alamat
Contoh:
Jalan Jend. A. Yani No.3
- <bdo> = Mendefinisikan arah teks
Contoh: Tulisan ini adalah tulisan yang terbalik
- <blockquote> = Mendefinisikan quotation panjang
Contoh: Misalnya ini sebuah kutipan yang panjang. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- <q> = Mendefinisikan quotation pendek
Contoh: Misalnya ini adalah kutipan yang pendek
- <cite> = Mendefinisikan suatu kutipan
Contoh: Misalnya ini merupakan kutipan yang pendek
- <dfn> = Mendefinisikan suatu istilah
Contoh: Misalkan ini adalah sebuah istilah
- Contoh tag untuk Entitas karakter
- (spasi kosong) = atau  
- < (kurang dari) = < atau <
- > (lebih dari) = > atau >
- & (dan/ampersand) = & atau &
- " (tanda petik/kutip) = &qout; atau "
- ' (koma atas) = '
- ¢ (Cent) = ¢ atau £
- £ (Pound) = £ atau ¢
- ¥ (Yen) = ¥ atau ¥
- § (Section) = & atau §
- © (Copyright) = © atau ©
- ® (registered trademark) = ® atau ®
- × (MUltiplication) = × atau ×
- ÷ (Division) = ÷ atau ÷
Ketika Anda menulis suatu dokumen, mungkin terkadang Anda menuliskan kalimat dalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu halaman web, terkadang Anda juga ingin melakukan hal yang sama. Terdapat tag khusus untuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.
- Tag untuk List
- <ol> = Mendefinisikan sebuah list ordered
Contoh:
- Ini adalah list yang pertama
- Ini adalah list yang kedua
- Ini adalah list yang ketiga
- Ini adalah list yang keempat
- Ini adalah list yang kelima
- <ul> = Mendefinisikan sebuah list unordered
Contoh:
- Ini adalah list yang pertama
- Ini adalah list yang kedua
- Ini adalah list yang ketiga
- Ini adalah list yang keempat
- Ini adalah list yang kelima
- <dl> = Mendefinisikan sebuah list definisi
Contoh:
- Ini adalah istilah list definisi yang pertama
- Ini adalah keterangan untuk list definisi yang pertama
- Ini adalah istilah list definisi yang kedua
- Ini adalah keterangan untuk list definisi yang kedua
- Ini adalah istilah list definisi yang ketiga
- Ini adalah keterangan untuk list definisi yang ketiga
- Ini adalah istilah list definisi yang keempat
- Ini adalah keterangan untuk definisi list yang keempat
- <li> = Mendefinisikan sebuah item dalam list
- <dt> = Mendefinisikan sebuah istilah list definisi
- <dd> = Mendefinisikan sebuah keterangan list definisi
- Latihan
Dalam modul ini Anda akan berlatih untuk meggunakan berbagai tag dasar untuk pemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalam sebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudian jalankan di web browser yang telah terinstall. Ketikkan setiap kode sumber apa adanya terlebih dahulu(termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag HTML yang Anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi Anda sebelum menjalankan ulang di dalam browser.
Silahkan mencoba juga tag yang masuk dalam kategori "dihilangkan", untuk melihat seperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silahkan coba nomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitas karakter apa saja yang dapat digunakan dalam sebuah halaman web.
Bagian terakhir adalah list. List adalah salah satu komponen yang cukup sering digunakan dalam suatu halaman Web. Dalam bentuk aslinya, mungkin sudah tidak terlalu banyak digunakan lagi dan digantikan fungsinya dengan image(gambar), tertapi ada perlunya juga Anda mengetahui list saat tidak memiliki gambar yang akan dijadikan bullet.
- Paragraf dan line break
- Backround color dan heading
- Garis horisontal dan komentar tersembunyi
- Pemformatan teks
- Teks yang di-preformat
- Arah teks dan quotation
- List unordered dan ordered
- Jenis-jenis list ordered
- Jenis-jenis list unordered
- List bersarang dan list definisi
- Ringkasan
Dalam praktikum kali ini, Anda akan mempelajari penggunaan dari beberapa tag dasar yang hampir akan selalu digunakan dalam setiap praktikum Anda nantinya. Perhatikan daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML.
- Tag HTML Dasar
- <html> = Mendefinisikan sebuah dokumen html.
- <body> = Mendefinisikan isi/badan suatu dokumen.
- <br> = Menyisipkan sebuah line break
- <h1-h6> = Mendefinisikan heading ke 1 s/d heading ke 6 Contoh:
- <p> = Mendefinisikan sebuah paragraf Contoh:
- <hr> = Mendefinisikan sebuah garis horisontal Contoh:
- <!--...-->> = Mendefinisikan komentar dalam kode sumber HTML
- Tag untuk Pemformatan Teks Dasar
- <b> = Mendefinisikan teks tebal Contoh: Ini tulisannya tebal
- <big> = Mendefinisikan teks yang lebih besar Contoh: Ini tulisannya lebih besar
- <em> = Mendefinisikan teks yang dimiringkan Contoh: Ini tulisannya miring
- <i> = Mendefinisikan teks yang dimiringkan Contoh:Ini tulisannya juga miring
- <small> = Mendefinisikan teks yang lebih kecil Contoh:Ini tulisannya lebih kecil
- <strong> = Mendefinisikan teks tebal Contoh: Ini tulisannya tebal juga
- <sub> = Defines subscripted text Contoh: Ini tulisannya lebih di bawah
- <sup> = Mendefinisikan teks yang posisinya lebih ke atas Contoh: Ini tulisannya lebih di atas
- <ins> = Mendefinisikan teks yang bergaris bawah Contoh: Ini tulisannya bergaris bawah
- <del> = Mendefinisikan teks yang hendak dihapus Contoh:
- Tag untuk tampilan ‘hasil keluaran komputer’
- <code> = Mendefinisikan teks kode komputer Contoh:
- <kbd> = Mendefinisikan teks dari keyboard Contoh: Tu li san i n i da ri key word
- <samp> = Mendefinisikan teks contoh kode komputer Contoh: Tulisan ini merupakan contoh kode komputer
- <tt> = Mendefinisikan teks model teletype Contoh: Tul isa n in i me ru pakan mo del t el e type
- <var> = Mendefinisikan sebuah variabel Contoh: Ini adalah variabel
- <pre> = Mendefinisikan teks preformatted Contoh:
- Tag untuk Citation, Quotation, dan Definisi
- <abbr> = Mendefinisikan suatu kependekan Contoh: Misalnya ini sebuah Kependekan
- <acronym> = Mendefinisikan suatu singkatan Contoh: Misalnya ini adalah singkatannya
- <address> = Mendefinisikan suatu elemen alamat Contoh:
- <bdo> = Mendefinisikan arah teks Contoh: Tulisan ini adalah tulisan yang terbalik
- <blockquote> = Mendefinisikan quotation panjang Contoh:
- <q> = Mendefinisikan quotation pendek Contoh:
- <cite> = Mendefinisikan suatu kutipan Contoh: Misalnya ini merupakan kutipan yang pendek
- <dfn> = Mendefinisikan suatu istilah Contoh: Misalkan ini adalah sebuah istilah
- Contoh tag untuk Entitas karakter
- (spasi kosong) = atau  
- < (kurang dari) = < atau <
- > (lebih dari) = > atau >
- & (dan/ampersand) = & atau &
- " (tanda petik/kutip) = &qout; atau "
- ' (koma atas) = '
- ¢ (Cent) = ¢ atau £
- £ (Pound) = £ atau ¢
- ¥ (Yen) = ¥ atau ¥
- § (Section) = & atau §
- © (Copyright) = © atau ©
- ® (registered trademark) = ® atau ®
- × (MUltiplication) = × atau ×
- ÷ (Division) = ÷ atau ÷
- Tag untuk List
- <ol> = Mendefinisikan sebuah list ordered Contoh:
- Ini adalah list yang pertama
- Ini adalah list yang kedua
- Ini adalah list yang ketiga
- Ini adalah list yang keempat
- Ini adalah list yang kelima
- <ul> = Mendefinisikan sebuah list unordered Contoh:
- Ini adalah list yang pertama
- Ini adalah list yang kedua
- Ini adalah list yang ketiga
- Ini adalah list yang keempat
- Ini adalah list yang kelima
- <dl> = Mendefinisikan sebuah list definisi Contoh:
- Ini adalah istilah list definisi yang pertama
- Ini adalah keterangan untuk list definisi yang pertama
- Ini adalah istilah list definisi yang kedua
- Ini adalah keterangan untuk list definisi yang kedua
- Ini adalah istilah list definisi yang ketiga
- Ini adalah keterangan untuk list definisi yang ketiga
- Ini adalah istilah list definisi yang keempat
- Ini adalah keterangan untuk definisi list yang keempat
- <li> = Mendefinisikan sebuah item dalam list
- <dt> = Mendefinisikan sebuah istilah list definisi
- <dd> = Mendefinisikan sebuah keterangan list definisi
Ini h1
Ini h2
Ini h3
Ini h4
Ini h5
Ini h6
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Setelah itu, Anda akan mempelajari penggunaan dari beberapa tag yang digunakan dalam melakukan pemformatan tampilan halaman web supaya lebih sesuai dengan keinginan atau agar lebih rapi dan terstruktur. Perhatikan beberapa daftar tag di bawah ini, serta kegunaan utamanya dalam sebuah halaman HTML. Beberapa diantaranya telah dihilangkan dari daftar tag HTML standar, namun masih memungkinkan untuk ditampilkan pada beberapa browser tertentu atau browser lama.
T u li s an i ni sa ma de ngan ko de teks pa da kom pu ter
Tulisan ini merupahan teks preformat
Misalnya ini sebuah kutipan yang panjang. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Misalnya ini adalah kutipan yang pendek
Ketika Anda menulis suatu dokumen, mungkin terkadang Anda menuliskan kalimat dalam bentuk poin-poin yang menerangkan tentang suatu hal. Dalam suatu halaman web, terkadang Anda juga ingin melakukan hal yang sama. Terdapat tag khusus untuk penulisan dalam format poin-poin, perhatikan daftar di bawah ini.
- Latihan
Dalam modul ini Anda akan berlatih untuk meggunakan berbagai tag dasar untuk pemrograman web menggunakan HTML. Ketikkan setiap kelompok tag dalam sebuah file, simpan dalam folder Anda sendiri yang telah ditentukan, kemudian jalankan di web browser yang telah terinstall. Ketikkan setiap kode sumber apa adanya terlebih dahulu(termasuk spasi kosong). Perhatikan hasil tampilannya, kemudian belajar untuk memodifikasi setiap kelompok tag untuk mengetahui maksud dari setiap baris tag HTML yang Anda ketikkan. Jangan lupa untuk menyimpan setiap modifikasi Anda sebelum menjalankan ulang di dalam browser.
Silahkan mencoba juga tag yang masuk dalam kategori "dihilangkan", untuk melihat seperti apa tampilan yang dapat dimunculkan. Untuk entitas karakter, silahkan coba nomor entitas selain yang telah ada pada daftar di atas, untuk melihat entitas karakter apa saja yang dapat digunakan dalam sebuah halaman web.
Bagian terakhir adalah list. List adalah salah satu komponen yang cukup sering digunakan dalam suatu halaman Web. Dalam bentuk aslinya, mungkin sudah tidak terlalu banyak digunakan lagi dan digantikan fungsinya dengan image(gambar), tertapi ada perlunya juga Anda mengetahui list saat tidak memiliki gambar yang akan dijadikan bullet.
- Paragraf dan line break
- Backround color dan heading
- Garis horisontal dan komentar tersembunyi
- Pemformatan teks
- Teks yang di-preformat
- Arah teks dan quotation
- List unordered dan ordered
- Jenis-jenis list ordered
- Jenis-jenis list unordered
- List bersarang dan list definisi
Tidak ada komentar:
Posting Komentar