assalamualaikum warahmatullahi wabarakatu... :))
jumpa lagi dengan saya, alhamdulillah kita semua diberi kesehatan oleh allah swt karena hingga sampai saat ini bila tanpa rahmat dan bantuan-nya kita tidak bisa apa. sholawat serta salam juga kita curahkan kepada Nabi besar kita Nabi Muhammad SAW.
pada kesempatan kali ini, saya ingin sedikit melanjutkan beberapa materi yang dari awal sudah pernah saya jelaskan yaitu????
iyaaaa benar..... HTML
materi yang ingin saya lanjutkan pada kali ini adalah tentang BAGAIMANA CARA MEMBUAT TAMPILAN DI WEB MENGGUNAKAN HTML MENJADI LEBIH MENARIK, menarik disini adalah tidak hanya sekedar tulisan saja yang dapat kita buat dan tampilkan tetapi juga beberapa fitur baru yang baru saja saya pelajari yaitu dengan membuat Tabel. yang nantinya tabel tersebut dapat kita variasikan dengan menambahkan data diri kita lewat tabel tersebut juga dengan menambahkan gambar.
baiklah agar tidak berlama lama karena saya juga menulis blog ini juga pas tengah malam wkwkwkwk curhatt.. :)))
mari lah kita mulai dengan doa
BISMILLAHIRROHMAN NIRROHIM :))
pertama tama sebelum kita melanjutkan ke materi yang lebih dalam , sebelumnya kita harus tau pada saat meng coding / memprogram menggunakan Visual Studio Code yaitu software editor untuk membuat HTML pastinya didalamnya terdapat bahasa bahasa yang tidak kita mengerti.
bahasa tersebut adalah "macam macam bahasa yang ada pada HTML" yang apabila kita gunakan, dapat menjalakan suatu fungsi tertentu yang masing masing bahasa memiliki fitur tersendiri semisal :
<font color = red>TEKS</font color = red> digunakan untuk memberikan warna pada huruf kita inputkan dan berada di antara kedua nya.
<p>TEKS</P> digunakan untuk memerikan paragraf pada kumpulan kalimat yang telah kita berikan di awal kalimat dan akhir kalimat.
<br></br> digunakan untuk memberikan jarak antara paragraf (ENTER)
dan masih banyak lagi dan dapat anda cari sendiri di internet.
# Bagaimana cara menambahkan gambar pada HTML ?
caranya cukup mudah.
1. buat programan sederhananya terlebih dahulu
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag image</title>
</head>
<body>
<h1>belajar tag gambar</h1>
<img src="kafabi.png"/>
</body>
</html>
yang saya contohkan diatas sudah terdapat file image yang akan kita gunakan, tetapi akan saya berikan sedikit penjelasan
#attribut src dalam tag image
adalah singkatan dari source, merupakan atribut yang berisikan alamat dari gambar yang nantinya ingin kita tampilkan pada HTML. sedangkan <img/> sendiri digunakan untuk menambahkan gambar dan souce adalah sumber dari manalah gambar tersebut yang akan kita tambahkan. nah membahas tentang sumber. pada saat kita ingin menambahkan gambar, kita harus menempatkan nama format dari gambar yang kita pilih. contohnya seperti gambar diatas
pada saat penulisan nama, semua harus jelas, apabila tidak sesuai maka gambar tidak akan muncul dan satu hal lagi, pada saat menambahkan gambar, data gambar yang kita miliki harus ditempatkan bersebelahan dengan data HTML yang kita buat, karena apabila sumber terlalu jauh maka gambar juga akan tetap tidak dapat ditampilkan. contohnya seperti gambar dibawah :
dan nantinya out yang akan dihasilkan adalah.....
BAGUSSS KAN....KEREN KANN.......TAMPAN KAN.... :)))
nah disini timbul pertanyaan baru...
x : kenapa kok gambarnya besaarrrr???
nahhh tidak usah bingung lagi :)) karena pencipta editor visual studio code tidak sebodoh itu fergusoo :v.....
caranya cukup mudah, yaitu kita tinggal menambahkan saja formatnya disebelah nama gambarnya sesuai dengan ukuran yang kita inginkan. contohnya sebagai berikut :
yang nantinya akan memberikan perubahan yang signifikan pada hasil gambar yang akan ditampilkan
MENARIK BUKANN???😎😎😎
oke, cukup sudah kita membahas mengenai bagaimana caranya menampilkan atau menambahkan gambar pada HTML, sekarang kita akan lanjut ke sesi berikutnya yaitu bagaimana cara membuat tabel pada HTML yang nantinya akan kita variasikan dengan biodata kita sendiri
pertama tama silahkan buat program sederhana yang saya berikan :
<!DOCTYPE html>
<html>
<head>
<title>TABLE</title>
</head>
<body>
<h1>TABEL DATA MAHASISWA</h1>
<br></br>
<table border="1" style= background-color:antiquewhite>
<td colspan="3"><center><font color = blue size = 14>Daftar Mahasiswa</font></center></td>
<tr>
<td>Nrp</td>
<td>1103181038</td>
<td rowspan="14"><img src="kafabi.png" width=200 high=200/></td>
</tr>
<tr>
<td>nama</td>
<td>Ahmad Kafabi</td>
</tr>
sebelum saya membahas program tersebut saya akan memberikan keterangan mengenai bahasa HTML yang mungkin baru saja anda ketahui dan belum mengerti apa fungsinya :
tabel terdiri dari 4 unsur utama yaitu :
- baris
- kolom
- sel
- garis
cara membuat tabel HTML dengan tag <table>, <tr> dan <td>
untuk membuat tabel di HTML kita setidaknya memerlukan 3 tag :
* Tag <table> : digunakan untuk memulai tabel
* Tag <tr> : adalah singkatan dari table row , digunakan untuk membuat baris dari tabel
* Tag <td> : adalah singkatan dari table data, digunakan untuk menginpitkan data ke table
setelah anda telah mencoba program yang saya berikan diatas maka hasil outputnya akan seperti gambar dibawah
gambar diatas adalah contoh sederhananya, tetapi anda juga bisa lebih kreatif lagi dengan menginputkan data tambahan dengan menggunakan program yang sederhana saja.
<!DOCTYPE html>
<html>
<head>
<title>TABLE</title>
</head>
<body>
<h1>TABEL DATA MAHASISWA</h1>
<br></br>
<table border="1" style= background-color:antiquewhite>
<td colspan="3"><center><font color = blue size = 14>Daftar Mahasiswa</font></center></td>
<tr>
<td>Nrp</td>
<td>1103181038</td>
<td rowspan="14"><img src="kafabi.png" width=200 high=200/></td>
</tr>
<tr>
<td>nama</td>
<td>Ahmad Kafabi</td>
</tr>
<tr>
<td>Program</td>
<td>D3</td>
</tr>
<tr>
<td>jurusan</td>
<td>Teknik Elektronika</td>
</tr>
<tr>
<td>pararel</td>
<td>B</td>
</tr>
<tr>
<td>Dosen Wali</td>
<td>Pak Madyono</td>
</tr>
<tr>
<td>Tgllahir</td>
<td>12-10-1999</td>
</tr>
<tr>
<td>tanggal masuk</td>
<td>15-05-2018</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>Warga</td>
<td>WNI</td>
</tr>
<tr>
<td>Agama</td>
<td>Islam</td>
</tr>
<tr>
<td>Golongan Darah</td>
<td>O</td>
</tr>
<tr>
<td>Alamat</td>
<td>jl.wonosari mulyo gang 3 no 16 RT:007 RW:007 Kec:Semampir kel:Wonokusumo</td>
</tr>
<tr>
<td>Kota tempat tinggal</td>
<td>Surabaya</td>
</tr>
<tr>
<td>NoTelp</td>
<td>0812-3596-5623</td>
</tr>
<tr>
<td>Jalur Penerimaan</td>
<td>Bidikmisi</td>
</tr>
</table>
</body>
</html>
yang nantinya akan menghasilkan output sebagai berikut
oke cukup sekian pada kesempatan kali ini, mungkin itu saja yang dapat saya sampaikan. kurang lebihnya saya mohon maaf sebesar besarnya bila ada kesalahan kata dll saya mohon maaf sebesar besarnya.
Wassalamualaikum warahmatulla hi wabarakatu😇😇😇
Wassalamualaikum warahmatulla hi wabarakatu😇😇😇
Tidak ada komentar:
Posting Komentar