HTML adalah sebuah bahasa yang dipergunakan untuk mendeskripsikan halaman web.
HTML adalah singkatan dari Hyper Text Markup Language
HTML is not a programming language, it is a markup language
Markup language adalah kumpulan dari tag tertentu
HTML menggunakan tag untuk menggambarkan web page
HTML Tags
HTML markup tags biasa disebut dengan tags
HTML tag adalah keyword yang diawali dan diakhiri dengan tanda kurung “<” dan “>”
HTML tag biasanya berpasangan
Tag pertama adalah start tag, tag kedua adalah end tag
Tag tersebut disebut juga opening tags dan closing tags
HTML Documents = Web Pages
HTML documents menggambarkan halaman web
HTML documents terdiri dari HTML tags dan plain text
HTML documents disebut juga web page
HTML document dibaca dengan menggunakan web browser, seperti like Internet Explorer atau Firefox, dan kemudian ditampilkan sebagai web page. Browser tersebut tidak menampilkan HTML tags, tapi tag tersebut diterjemahkan menjadi isi dari page.
Keterangan:
– Kerjakan semua latihan yang diperintahkan
– Gunakan aplikasi Notepad untuk mengerjakan
– Beri nama file sesuai ketentuan L1_nama_kelas (cth: L1_jimat_maulana_XI1dkv.html)
– Lihat hasilnya pada browser setiap kali selesai mengerjakan satu latihan
– Lapor pada asisten apabila telah selesai mengerjakan semua latihan
– Save file-file latihan untuk dipelajari di rumah
Format Dasar File Dokumen HTML
berikut adalah format dasar dari HTML
L1a<nama_kelas>.html
Heading
Pada dokumen HTML terdapat 6 ukuran heading mulai dari H1 sampai dengan H6 H1 adalah heading dengan ukuran terbesar dan H6 adalah heading dengan ukuran terkecil
L1b<nama_kelas>.html
HR, CENTER, B, I, U, SMALL dan BIG
Pada dokumen HTML untuk membuat suatu garis mendatar / horisontal dapat menggunakan tag HR Tag HR memiliki attribut seperti WIDTH untuk mengatur panjang garis, SIZE untuk mengatur ketebalan garis, ALIGN untuk mengatur alignment, dan NOSHADE untuk menghilangkan efek bayangan
L1c<nama_kelas>.html
SUB, SUP, TT, DEL, PRE, FONT
Pada dokumen HTML tag SUB digunakan untuk memberikan efek subscript pada suatu teks, dan tag SUP digunakan untuk memberikan efek superscript pada suatu teks sedangkan tag TT digunakan untuk memberikan efek mesin ketik pada suatu teks. Tag DEL digunakan untuk memberikan efek coretan pada suatu teks.
Tag PRE pada dokumen HTML digunakan untuk melakukan preformat terhadap dokumen HTML. Artinya teks yang akan ditampilkan akan sama keadaannya seperti yang tertulis pada kode HTML nya.
L1d<nama_kelas>.html
LIST
Pada dokumen HTML terdapat dua jenis list, yaitu unordered list dan ordered list. Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran. Untuk membuat suatu unordered list menggunakan tag UL sedangkan untuk membuat ordered list menggunakan tag OL. Dan untuk mengisikan item pada list menggunakan tag LI
L1e<NRP>.html
Definition List DL, DD, DT
Tag DL, DT, DD pada dokumen HTML digunakan untuk membuat suatu daftar definisi (definition list).
L1f<nama_kelas>.html
Image
Tag IMG pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.
Selain atribut SRC, tag IMG juga memiliki atribut lain seperti ALIGN, BORDER, ALT, HEIGHT, dan WIDTH. Atribut ALIGN digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut ALIGN adalah TOP, MIDDLE, dan BOTTOM. Atribut BORDER digunakan untuk menentukan ketebalan garis tepi dari suatu gambar. Atribut ALT digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke web browser. Atribut HEIGHT dan WIDTH digunakan untuk mengatur tinggi dan lebar gambar.
L1g<nama_kelas>.html
Link
L1h<NRP>.html
Tugas 1a – Membuat Curiculum Vitae
T1a<nama_kelas>.html
Tugas Kali ini akan membuat Curiculum vitae diri Anda. Contoh tugas dapat dilihat dibawah ini
Contoh tersebut merupakan gambaran minimal yang harus terdapat pada tugas Anda. Anda diajak untuk ekplorasi membuat tugas menjadi sekreatif dan semenarik mungkin dengan menggunakan Tag HTML yang telah diajarkan. Untuk Seminar/Workshop bisa diganti dengan Pengalaman, Pelatihan dengan Lomba, Bahasa Pemrograman dengan Software Skill.
Tugas 1b – Membuat Halaman Index
index<nama_kelas>.html
Letakkan semua latihan dan tugas pada modul 1 kali ini di dalam sebuah folder dengan nama tugas1. kemudian buatlah sebuah halaman index di dalam folder tersebut yang merupakan link untuk melihat latihan-latihan dan tugas Anda. Ketentuan pada halaman index adalah sebagai berikut :
Title pada halaman index bertuliskan “index tugas1 <nama_kelas>”
Tuliskan nama dan kelas pada bagian atas halaman menggunakan tag komentar
Link pertama sampai ke-delapan mengacu kepada file L1a<nama_kelas>.html sampai L1h<nama_kelas>.html
Link ke-sembilan mengacu kepada halaman T1a<nama_kelas>.html
Pada setiap halaman latihan dan tugas, berikan link yang mengacu kembali ke halaman index tugas1.
Contohnya seperti ini :
Jika Semua Latihan dan tugas telah dikerjakan.. Satukan file2 tersebut menjadi satu file ZIP dengan nama tugas1<nama_kelas>.zip kumpulkan lewat link ini.
