Server Side Programming - Pertemuan 3

 

Rangkuman Materi Server Side Programming
Pertemuan 3

A.     Tag <img> dan Atribut di Dalamnya

Pada pembahasan sebelumnya kita mempelajari bahwa dalam struktur html terdapat tag pembuka, tag penutup, isi dan sebagainya. Namun, sebenarnya masih terdapat banyak hal dalam kode html. Salah satunya tag <img> yang merupakan kode dari image atau gambar. Kode ini tidak memerlukan tag penutup untuk dapat dijalankan sebagaimana kode <br>. Di dalam tag <img> terdapat tag-tag yang lain, yaitu tag atribut. Dalam satu tag, kita dapat memasukkan lebih dari satu atribut.

Atribut terdiri dari 3 bagian.

1.          Atribute name, yaitu nama dari atribut tersebut

2.          Samadengan (=). Tanda ini terletak setelah atribute name

3.          Isi. Untuk isi ditulis dengan diapit oleh tanda petik. Baik petik tunggal maupun ganda.

Jenis-jenis atribut yang dapat masuk pada tag <img> antara lain:

1.             src. Atribut ini berfungsi untuk menentukan sumber gambar yang ingin ditampilkan. Untuk menampilkan suatu gambar melalui tag src, kita harus menyimpan file tersebut dalam satu folder yang sama dengan file html yang ingin digunakan untuk menampilkan gambar. Kita cukup memasukkan nama file gambar yang dimaksud pada bagian isi atribut lengkap dengan ekstensinya. Contoh: <img src="Pusat Informasi Pendaftaran.jpg" =>

 

Jika tidak ingin menempatkan gambar dan file html dalam satu folder, kita harus lebih menguasai path atau teknik untuk menemukan file yang dituju. Misalnya, gambar yang ingin kita tampilkan berada dalam sebuah folder, maka cara menulis kodenya adalah:

<img src="Nama Folder/Pusat Informasi Pendaftaran.jpg" =>    

 

Perlu diperhatikan bahwa nama file dan folder bersifat case sensitive. Artinya, dalam penulisan kode, file dan folder harus ditulis sama persis baik dari besar kecil huruf dan semua unsurnya.

 

2.             alt. Atribut ini berfungsi sebagai alternate text (teks pengganti) yang akan menjelaskan citra dari gambar ketika browser gagal menampilkan gambar tersebut. Contoh:

<img alt="Gambar ini adalah brosur pendaftaran. " =>

Dalam html, terdapat juga atribut yang berfungsi untuk mengatur ukuran tanpa perlu mengedit cssnya. Ukuran tersebut berbasis piksel.

3.             width. Sesuai dengan namanya, atribut ini berfungsi untuk menentukan lebar gambar yang akan ditampilkan.

4.             height. Sesuai dengan namanya, atribut ini berfungsi untuk menentukan tinggi gambar.

Ketika salah satu dari kedua atribut tersebut (width dan height) dimasukkan, maka yang lain akan menyesuaikan. Namun jika keduanya dimasukkan, maka gambar akan ditampilkan mengikuti perintah yang dimasukkan dalam atribut.

 

B.      Comment (Komentar)

      Comment atau komentar adalah informasi yang ditulis bagi pelihat kode. Entah untuk mencegah lupa (bagi pemilik) atau untuk menyampaikan informasi perihal kode yang telah disusun (bagi orang lain). Informasi atau data yang ada di dalam comment tidak akan dieksekusi oleh browser dan juga tidak mengganggu kode yang lain. Dalam html, comment berbentuk <!--isi-->. 

 

 

C.      Hyperlink

Hyperlink adalah jalan pintas dari satu halaman ke halaman lain dengan menjadikan suatu kode sebagai link. Hyperlink ditulis menggunakan tag <a></a>, a di sini adalah singkatan dari anchor. Tag tersebut diikuti atribut href. Cara kerjanya kurang lebih sama dengan atribut src yang merupakan atribut dari tag <img>. Berbeda dengan tag <img> yang tidak memerlukan tag penutup, tag <a> memerlukan tag penutup. Contoh penulisan hyperlink: <a href=”halaman yang ingin dituju”> Kalimat yang ingin dijadikan hyperlink</a>.

 

  Praktikum 3

A.     Materi Tambahan

      Dalam sebuah halaman, ada beberapa elemen html yangs erig digunakan. Antara lain:

1.    <header></header>

Header digunakan untuk memunculkan suatu judul, tajuk utama atau kop suatu halaman. Biasanya ditampilkan di bagian utama suatu halaman.

Header berbeda dengan head. Header merupakan bagian dari body, sedangkan head adalah penjelasan dari suatu halaman.

2.    <main></main>

Berisi informasi urgen tentang halaman kita

3.    <footer></footer>

Sebagaimana namanya, tag ini dapat diisi dengan link-link penting, owner halaman, tanggal pembuatan halaman, copyright dan lain sebagainya.

4.    <aside></aside>

Bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. 

5.    <nav></nav>

Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita

 

  Praktikum 3

A.     Jenis-jens tag <meta></meta>

Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web kita, namun lebih kepada keterangan tambahan tentang halaman itu sendiri.

 

Meta tag biasanya di tempatkan pada bagian head dari HTML, dan biasanya terdiri dari beberapa meta tag dengan atribut yang berbeda-beda. Beberapa atribut yang biasanya di tampilkan adalah charset, name, http-equiv, dan content.

 

1.       Meta Charset

Berfungsi untuk menentukan metode bagaimana tulisan disimpan di dalam komputer. UTF-8 dipilih karena merupakan salah satu pengembang yang lebih baru daripada pendahulunya yang hanya bisa menampung jenis karakter secara terbatas. Karakter di UTF-8 memungkinkan untuk menampilkan dan menyimpan karakter-karakter lebih banyak. Misalnya suatu huruf Arab di UTF-8 disimpan sebagai ‘001011’. Kode tersebut disebut dengan charset, yang mana merupakan metode suatu data disimpan oleh komputer.

2.      Meta http-equiv=”X-UA-Compatible

Meta ini antara dipakai dan tidak sebab hanya mendukung browser internet explorer dan microsoft edge, sedangkan setiap browser mempunyai cara untuk mengimplementasikan aturan secara berbeda-beda.

3.      Meta name=”viewport”

Yaitu meta yang digunakan untuk memberitahu browser agar menampilkan konten sesuai dengan ukuran device yang digunakan dengan alasan, setiap individu mengakses halaman dengan perangkat yang berbeda-beda.

4.      Meta name=”keywords”

Meta ini sangat dianjurkan untuk dipakai. Meta keyword berisi kata kunci utama yang berhubungan dengan keseluruhan konten halaman dan bertujuan untuk menampilkan halaman ketika kata kunci yang berhubungan dicari.

5.      Meta name=”descriptiom”

Merupakan sebuah cuplikan ataupun rangkuman konten website yang muncul di halaman hasil pencarian

6.      Meta name=”author”

dimaksudkan untuk menambahkan nama pembuat kode kedalam HTML

7.      Meta name=”refresh”

Berfungsi untuk memerintahkan browser  agar merefresh halaman dengan jangka waktu tertentu