Kategori: HTML

Diposkan pada HTML, Pemrograman

BELAJAR HTML YUK

Diposkan pada oleh Nindi

Apa sih HTML itu?

HTML ( Hypertext Markup Language ) merupakan bahasa markah atau kode untuk membuat sebuah halaman web, dimana dalam bahasa ini berisi instruksi/script.

Aplikasi apa yang dapat dipakai?

Kita dapat menggunakan aplikasi Visual Studio Code (link : https://code.visualstudio.com/Download) dan jangan lupa download XAMPP (bisa temukan di : XAMPP.net) dua aplikasi ini gratis loh..

 Bagaimana sih penulisan HTML?

Pertama kali dalam penulisan HTML yaitu dengan adalah mengetikkan kode script

<html>
<head>
<title> Judul Halaman </title>
</head>
<body> Isi </body>
</html>
Awal

Dalam html ini terdapat tag <> dimana tag ini digunakan untuk menuliskan sintak web. Sintak web terdiri dari dua yaitu sintak web tag yang ditulis secara berpasangan dan sintak web tag yang berdiri sendiri (single tag).

Ciri sintak web tag yang ditulis secara berpasangan yaitu terdapat tag pembuka setelah itu ketik text yang akan ditampilkan kemudian dilanjutkan oleh tag tutup. Contoh: <h1> text yang ditampilkan </h1>. Sedangkan ciri sintak web tag yang berdiri sendiri yaitu berisi satu tag saja. Contoh : <br>

Dalam sebuah tag, kita dapat mencantumkan atribut di dalam sebuah tag misalnya kita akan mengubah tulisan menjadi berwarna biru, maka penulisannya adalah

<font color=blue> Isi </font>
Screenshot (14)
hasil yang ditampilkan tulisan Isi akan berwarna biru
Screenshot (13)
Menyimpan file
Menyimpan file tersebut dilakukan dengan cara pada menu file klik save as
Save As
Cari folder xampplite – pilih htdocs
save
Ubah dari text document(*.txt) atau plain text menjadi HTML – klik save
html
Membuka dan menjalan file HTML di browser
Buka browser kalian (chrome, mozilla, safari, dll) pada kolom atas ketik sumber folder untuk file yang kita simpan misalnya : file:///C:/xampp/htdocs  kemudian klik enter. Dalam browser tersebut terdapat beberapa file, klik file yang akan kita tampikan.
mnemukan file
Screenshot (8)
Nah, itulah uraian singkat beserta cara menggunakan HTML. Setelah ini yuk kita latihan.
Latihan 1
Membuat tabel jurusan
Listing program
<html>

<head>

<title>

Departemen dan Prodi PENS

</title>

</head>

<body>

<h1>Departemen dan Prodi PENS</h1>

<tableborder = "1">

<tr>

<tdcolspan="3">Departemen Teknik Elektro</td>

<tdcolspan="2">Departemen Teknik<br>

Informatika dan Komputer</td>

</tr>

<tr>

<td>Teknik<br>Elektro<br>Industri</td>

<td>Teknik<br>Elektronika</td>

<td>Teknik<br>Telekomunikasi</td>

<td>Teknik<br>Informatika</td>

<td>Teknik<br>Komputer</td>

</tr>

</body>

</html>
dept
Hasil dari kode di atas :
Screenshot (7)
Penjelasan :
Judul dari kode di atas yaitu Departemen dan Prodi PENS karena terletak di antara <title></title>. Selanjutnya isi dari kode tersebut terletak di antara <body></body>, <h1></h1> ini untuk memperbesar tulisan, <tableborder= “1”> artinya border dari tabel tersebut yaitu 1 pt, <tdcolspan=”3″> Departemen Teknik Elektro</td> untuk tdcolspan sendiri berfungsi untuk menggabungkan kolom jadi artinya tulisan Departemen Teknik Elektro ini di dalam kolom yang nantinya akan digabung dengan kolom yang lainnya. Sedangkan <br> berfungsi untuk mengganti baris. <tr></tr> untuk satu baris dan <td></td> untuk satu kolom.
Latihan 2
Membuat tabel data MIS
Listing program
<html>

<head>

<title>MIS</title>

</head>

<body>

<h1><fontcolor=black><fontsize=5>

<tableborder = "1"style = background-color:lightskyblue>

<trstyle = "background-color:darkblue">

<tdcolspan = "3"><center><fontcolor = white>

<h2> Daftar Mahasiswa PENS</h2></td><br>

</tr>




<tr>

<td>NRP</td>

<td>: 1103181009</td>

<tdrowspan="17"><imgsrc = "download.JPEG"width = "100"/></width>

</tr>

<tr>

<td>NAMA</td>

<td>: ERICA RIANINDI YULFANTI</td>

</tr>

<tr>

<td>PROGRAM</td>

<td>: D3</td>

</tr>

<tr>

<td>JURUSAN</td>

<td>: TEKNIK ELEKTRONIKA</td>

</tr>

<tr>

<td>KELAS</td>

<td>: 1</td>

</tr>

<tr>

<td>PARALEL</td>

<td>: A</td>

</tr>

<tr>

<td>DOSEN WALI</td>

<td>: NI'AM TAMAMI</td>

</tr>

<tr>

<td>TGL LAHIR</td>

<td>: **-**-****</td>

</tr>

<tr>

<td>TGL MASUK</td>

<td>: 15-05-2018</td>

</tr>

<tr>

<td>JENIS KELAMIN</td>

<td>: PEREMPUAN</td>

</tr>

<tr>

<td>WARGA</td>

<td>: WNI</td>

</tr>

<tr>

<td>AGAMA</td>

<td>: ISLAM</td>

</tr>

<tr>

<td>GOLONGAN DARAH</td>

<td>: *</td>

</tr>

<tr>

<td>ALAMAT</td>

<td>: TEGAL SARI RT/RW ***/*** BRONDONG-LAMONGAN 62263 KEL : BRONDONG KEC.BRONDONG</td>

</tr>

<tr>

<td>KOTA TEMPAT TINGGAL</td>

<td>: KABUPATEN LAMONGAN</td>

</tr>

<tr>

<td>NO TELP</td>

<td>: 085645267***</td>

</tr>

<tr>

<td>JALUR PENERIMAAN</td>

<td>: BIDIK MISI</td>

</tr>

</body>

</html>
1
2
3
Hasil dari kode di atas :
Screenshot (12)
Penjelasan :
Kode yang digunakan pada latihan 2 ini hampir sama dengan kode yang digunakan pada latihan 1, hanya terdapat beberapa kode baru yaitu <fontcolor=black><fontsize=5> dimana fontcolor ini untuk mengubah warna tulisan, untuk fontsize ini untuk ukuran tulisannya, <trstyle = “background-color:darkblue”> berfungsi mengubah background sesuai warna yang diinginkan misalnya dalam kode trsebut adalah darkblue berarti nanti dalam kolom tersebut berwarna darkblue, <center> digunakan untuk menengahkan tulisan,<tdrowspan=”17″> untuk menggabungkan baris, <imgsrc = “download.JPEG”width = “100”/></width> untuk menginput gambar dari nama gambar jangan lupa cantumkan ekstensinya, width sendiri yaitu untuk ukuran gambarnya.
Sekian dulu nih pembahasan HTML pada postingan ini, tunggu postingan selanjutnya ya. Terimakasih telah mengunjungi situs saya. Semoga bermanfaat. Tinggalkan komentar, berdiskusi dan belajar bersama kuy.