Apa itu HTML? Bagaimana Cara dan Contoh Programnya? Mari baca-baca dan Lihat-lihat…
Assalamualaikum wr wb
Pada
kesempatan kali ini saya akan membahas sedikit mengenai apa itu html.
HTML adalah kepanjangan dari Hypertext Markup Language dan
merupakan salah satu bahasa yang paling banyak digunakan dalam mebuat halaman
web. Setiap kita menjelajah di internet, membuka website apapun, kita pasti
akan bertemu dengan HTML. Hal ini dikarenakan semua website yang ada
diinternet, dibuat dengan menggunakan bahasa markup HTML.
Kali ini kita membuat
html dengan aplikasi VISUAL STUDIO CODE. Sebelum itu yuk kita download VISUAL
STUDIO CODE secara gratis di https://code.visualstudio.com/download
kemudian instal visual code seperti gambar dibawah :
setelah di instal akan muncul tampilan dari
VISUAL STUDIO CODE seperti
gambar dibawah ini :
Bagaimana Cara Membuat HTML ?
Berikut
cara membuat html menggunkan visual studio :
1.
Buka
Microsoft visual studio
Jangan lupa sebelum membuat
program di mc Visual studio, kita harus membuat data baru dengan mengklik File
à klik New
,maka data baru sudah bisa kita akses . Seperti gambar dibawah
ini :
2. Akan muncul tampilan awal
pemrogaman dibawah ini :
3. sebelum membuat program
jangan lupa menyimpan data terlebih dahulu dengan klik menu File àSave >> Kemudian ubah type
formating data tersimpan dari "Plain text" menjadi HTML, agar data
pemrogaman yang kita buat sesuai dengan format pemrogaman yang kita inginkan.
Seperti gambar dibawah ini :
Kemudian jangan
lupa diberi tag seperti dibawah ini :
<!DOCTYPE HTML>
<html >
<head>
<title></title>
</head>
<body>
</body>
</html>
Keterangan
1. !DOCTYPE deklarasi
mendefinisikan jenis dokumen menjadi HTML
2. <html>..</html>,
merupakan elemen inti dalam pembuatah halaman web, seluruh elemen harus berada
dalam elemen html ini.
- <head>…</head>, merupakan elemen
yang menyimpan informasi meta dan tidak ditampilkan di browser.
- <title>…</title>, merupakan elemen
untuk memberikan judul terhadap dokumen html ditempatkan diantara elemen
<head>…</head>
- <body>..</body>, merupakan elemen tempat dimana elemen-elemen yang membentuk isi halaman web untuk ditampilkan di browser. Jadi, di dalam tag body inilah konten yang ingin ditampikan misalnya artikel, gambar, video, dll. tempatkan semuanya di sini.
Lalu mucul
seperti gambar dibawah ini :
Dan visual
studio siap digunakan ;))
Berikut saya
akan memberikan contoh program html dengan menggunakan visual studio code :
A. Membuat Biodata
Sebelum membuat program,
kita harus mengenal HTML tag, Tag adalah text khusus
(markup) yang biasanya terdiri dari pembuka dan penutup. Untuk penulisan tag
pembuka adalah <nama> sedangkan penutup dengan </nama>..
contoh nya seperti <tag> konten </tag> . Tagname selalu berpasangan
dimana tag pertama dalam pasangan adalah tag awal, lalu untuk </tag>
adalah tag akhir, apabila tidak ada tag akhir maka program tidak dapat berjalan.
Berikut :
<!DOCTYPE html>
<html>
<head>
<title>FAHMI MASHEROIT </title>
</head>
<body>
<h1><font color = heavy> <B>BIODATA DIRI</B> </font></h1>
<P><br><font color = red> Nama </font>:<font color = purple > <b> Fahmi Mashuri</b></br></font></P>
<br><font color = blue> Pendidikan </font> : <font color = pink > <b> Mahasiswa PENS </b></font>
<br> Kelas : <font color = yellow> 1 d3 elektronika A </font>
<br> alamat kosan : jl rodah
sekolahan no 8
</body>
Berikut contoh gambaran program saya di mc visual studio
code :
Penjelasan :
1.
<h1><font
color = heavy> <B>BIODATA DIRI</B> </font></h1> digunakan untuk memberikan pada heading/judul
, <b> </b> ukuran judul ,Tidak hanya judul dan ukuran pemberian
warna juga bisa digunakan untuk memberi warna paragraf/teks lain.
2.
<br></br>
digunakan untuk memberikan jarak antara paragraf (ENTER).
Saya menggunakan
software XAMPLTE , monggo
silahkan download softwarenya sendiri ok!!
Kemudian klik start dan program akan running , lalu buka
tempat lokasi penyimpanan program tadi, lalu buka dengan browser ( mozila, UC
browser, Chrome, dll) dengan localhost,
maka akan muncul seperti ini :
berikut contoh tampilan di web nya :
Itu merupakan hasil dari contoh program biodata yang saya
buat dan muncul di web , lalu bagai mana
cara menampilkan gambar ? berikut ini saya akan memberikan contoh menampilkan
gambar dengan menggunakan program di MC visual studio :
B. Menampilkan gambar
Sama
halnya dengan program dalam membuat biodata seperti diatas , akan tetapi ada
beberapa deklarasi untuk menampilkan gambar ,menempatkan ukuran gambar ,yaitu
<img src = "gambar" width = "200" />, berikut contoh
programnya :
<!DOCTYPE html>
<html>
<head>
<title> BELAJAR MENAMPILKAN
GAMBAR</title>
</head>
<BODY>
<h1> belajar tag gambar</h1>
<img src = "fahmi.PNG" width = "200" />
</BODY>
<html>
Contoh tampilan program pada MC visual studio :
Maka hasilnya
:
Itu merupakan hasil dari contoh program
gambar yang saya buat dan muncul di web
, lalu bagai mana cara membuat tabel ? berikut ini saya akan memberikan contoh
membuat tabel dengan menggunakan program di MC visual studio :
C. Program Membuat Tabel
Dalam membuat table pertama
tama ada beberapa deklarasi tag yang harus diketahui untuk dapat membuat table sederhana
,yaitu :
1. Tag
<table> : digunakan untuk memulai table.
2. Tag
<tr> : adalah singkatan dari table row , digunakan untuk membuat baris
dari table.
3. Tag
<td> : adalah singkatan dari table data, digunakan untuk menginpitkan
data ke table.
4. Colspan
adalah perintah untuk menggabungkan beberapa kolom menjadi satu.
5. rowspan
yang berfungsi untuk menggabungkan beberapa baris menjadi satu.
Contohnya seperti ini :
<!DOCTYPE html>
<html>
<head>
<title > tabel 2</title>
</head>
<body>
<h1> <font color ="yellow" face = "cooper black" size= "90"> Departement Dan Prodi
PENS</font> </h1>
<table border="3">
<TR>
<td colspan="3"> Departement Teknik
Elektro </td>
<td colspan="2"> Departement teknik
Informatika dan Komputer</td>
</TR><tr>
<td rowspan="3">teknik elektro industri</td>
<td rowspan="3">teknik elektronika</td>
<td rowspan="3">teknik telekomunikasi </td>
<td rowspan="3">teknik informatika</td>
<td rowspan="3">teknik komputer </td>
</tr>
</table>
</body>
Tampilan pada
pemrogaman :
Maka hasilnya
:
Bagaiman cukup mudah kan sobat? Hal penting yang harus
sobat perhatikan adalah dalam membuat tabel dengan penggunaan atribut colspan
dan rowspan sebaiknya sobat desain terlebih dahulu mengenai seberapa banyak
baris dan kolom yang akan dibuat, karena semakin komplek sebuah tabel maka akan
semakin rumit pemasangan atribut tersebut dalam kode HTML.
Sekian dulu dari saya "Singkat, Semoga Bermanfaat" Keep Coding ya sobat!
Sekian dulu dari saya "Singkat, Semoga Bermanfaat" Keep Coding ya sobat!
Untuk pengembangan nya silah kan kepoin di postingan
selanjutnya
Terima kasih
No comments:
Post a Comment