Belajar HTML (Tugas Penkom 7)

Pernahkah Anda berpikir bagaimana informasi dalam suatu halaman web dengan berbagai variasi tampilan di dalamnya dibangun? Bagi orang awam, mungkin banyak yang mengatakan bahwa itu mudah saja dilakukan dengan menggunakan template. Pertanyaan berikutnya, bagaimana template itu dibuat? Adakah semua itu muncul dengan sendirinya? Nyatanya, bagi seseorang yang paham tentang web developing, membangun halaman web dengan konten dan tampilannya ternyata butuh usaha serius. Dalam mengembangkan halaman web seorang web developer bertugas menyusun barisan-barisan kode yang salah satunya dikenal dalam bahasa HTML (Hypertext Markup Language). Barisan kode yang ditulis dalam bahasa HTML ini kemudian diupload ke server lengkap dengan file-file pendukungnya dan saat kita mengaksesnya, perangkat lunak peramban internet yang kita gunakan akan mengenalinya dan menampilkan tampilan visual sedemikian rupa.

Sebagai gambaran, berikut adalah tampilan visual saat kita mengakses laman 
portal detik.com

Dan berikut adalah potongan baris kode yang menyusunnya :

Terlihat begitu rumit? Nyatanya itulah yang dilakukan seorang web developer. Menulis kode, menyusun tampilan dan mengkombinasikan konten-konten sedemikian rupa hingga dapat menjadi laman web yang informatif dan enak dipandang.

Nah, tulisan ini akan mencoba untuk memperkenalkan konten-konten dan langkah-langkah yang sangat mendasar yang menyusun sebuah laman web sederhana dalam bahasa HTML (Hypertext Mark-up Language) menggunakan perangkat lunak Notepad++.

1. Bagian bagian penting pada HTML

• Tag adalah kata bawaan bahasa HTML untuk menandai bagian dari dokumen. Biasanya berpasangan dan mengapit teks yang ditandainya. Tag dimulai dengan <nama tag> dan diakhiri dengan </nama tag>. Memahami nama dan arti setiap tag menjadi kemampuan dasar bagi web developer

2. Membuat Tabel

Membuat kolom isian teks (Textfield) dan Submit

Pembangunan laman web sistem informasi biasanya melibatkan mekanisme penerimaan input dari pengguna dan proses submitting input tersebut untuk kemudian diolah sebelum pengguna mendapatkan informasi berikutnya. Mekanisme ini biasanya diaplikasikan pada proses login yang telah banyak kita kenal. Berikut cara pembuatan sederhananya :

Ini tampilan saat di-klik masuk, pengguna akan dialihkan ke dokumen Data.html

Pada ranah sistem informasi profesional, tentu terkait dengan pengolahan data dan penampilan informasi dalam jumlah dan struktur tertentu. Oleh karena itu dibutuhkan mekanisme tambahan seperti Manajemen basis data, Penggalian data dan sebagainya yang biasanya dengan platform PHP, SQL dan sebagainya

4. Membuat Teks Berjalan

Pernahkah Anda memperhatikan teks berjalan di sebuah website? Ternyata teks itu dapat dibuat dengan metode pengkodean sederhana di html yaitu menggunakan tag marquee

5. Tab Navigasi

Tab Navigasi berisi deretan link yang akan memunculkan informasi ketika ditautkan dengan dokumen sesuai keinginan. Berikut cara menyusunnya :

6. Section dan Artikel

Sesuai dengan namanya, berguna dalam penulisan artikel dan pemisahan section-section di dalamnya.

7. Menampilkan Foto dan Keterangannya

8. Menampilkan Pemutar Musik

Menampilkan Catatan Kaki

Sekian tulisan kali ini. Semoga bermanfaat dan menambah pengetahuan Anda sehingga dapat lebih menghargai kerja keras seorang web developer. Anda dapat mengunduh file yang digunakan pada posting kali ini dengan klik tautan berikut : Unduh File Sumber Terimakasih