Nama : Riyanto
Nim : 1270050
Kelas : 12.MI2F.21
Belajar
HTML dengan XAMPP Bagian 1
Pengenalan
HTML
Pertama apa itu
HTML??
Hypertext Markup
Language (HTML)
adalah
sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman
yang bebas, artinya tidak dimiliki oleh siapapun, pengembangannya dilakukan oleh
banyak orang di banyak Negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan
bersama-sama secara global.
Lalu Apa
itu “XAMPP“? Sedikit saya jelaskan, xampp adalah software atau aplikasi
yang mampu di jalankan di komputer yang tujuannya untuk menjalankan script HTML.
Dengan bantuan software ini kita bisa menjalankan script HTML secara offline
atau tanpa terkoneksi internet, jadi sebelum kita menyewa hosting dan domain, kita bisa membuat website offline di localhost dengan xampp.
Berikut cara Install Xampp
- Silakan anda download xampp disini.
- Jika sudah berhasil di download, langsung saja klik aplikasi xampp dua kali untuk menginstall-nya.
- Anda klik next saja untuk melanjutkan install
xampp.
- Jika sudah berhasil di install, tinggal anda jalankan saja dengan membuaka xampp control panel, dibagian Apache dan MySQL klik start.
 |
| Gambar XAMPP Aktif |
Install xampp sudah berhasil, Secara default maka
saat kita memanggil localhost akan diarahkan ke halaman pengaturan XAMPP. Jadi
jika mengetik localhost pada browser akan otomatis ke direct ke alamt
localhost/xampp. Hal ini karena ada file index.php pada folder htdocs yang
mengarahkan kita ke folder xampp. Kita bisa menghapus file “index” ini
jika mengganggu.Namun jika hanya sebagai latihan, maka kita cukup membuat
folder- folder didalam folder htdocs dan kemudian memanggilnya langsung,
seperti contohh diatas (localhost/latihan). Folder HTDOCS terletak didalam folder XAMPP. Kita bisa
menambahkan beberapa folder baru didalam folder HTDOCS. Biasanya folder-folder ini
merupakan pemisahan dari latihan atau project website yang sedang kita buat.
Cara memanggil folder ini pada browser, berbeda dengan cara memanggil folder
pada windows.
Misal kita membuat folder “latihan”
dalam folder HTDOCS maka kita harus membuka folder ini dengan mengetikkan
localhost/latihan atau 127.0.0.1/latihan.
Jika sudah maka buat Anda bisa menggunakan NOTEPAD untuk
menuliskan syntac HTM atau HTML, dan disimpan
dalam extensi .htmatau .html
Contoh tag HTM atau HTML :
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html>
<head>
<title>Titel
Website</title>
</head>
<body>
<!– Isi atau
konten website disini –>
</body>
</html>
|
Perintah didalam dokumen HTML terdiri dari berbagai
struktur penyusun seperti tag, elemen, atribut dan nilai.
Tag, terdiri dari lambang-lambang khusus seperti : < > dan /, untuk menuliskannya
di dalam dokumen HTMLdimulai dengan tag pembuka <…> dan diakhiri
dengan tag penutup </...> Kemudian di dalam tag tersebut
terdapat teks seperti contoh diatas : html, head, title, body dan yang
lainnya ini disebut dengan elemen.
Elemen HTML ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk
membuat warna latar belakang (background) : <body bgcolor=“0000ff”>…</body>, body merupakan elemen, bgcolor adalah atribut dan 0000ffmerupakan nilai
(value).
Elemen HTML mempunyai tiga hal penting yaitu : tag pembuka, isi,
dan tag penutup.
Sebagai contoh elemen tag pembuka <html> dan tag
penutup </html>.
HEAD, adalah informasi Header dari dokumen HTML. Informasi di dalam
header meliputi : title, meta, style, script, dll. Selain title,
informasi didalam header ini nantinya tidak akan di tampilkan di web browser.
TITLE, merupakan bagian dari Head, tag ini adalah sebagai Titel
dari dokumen HTML, titel ini akan tampil di titel dan tab browser.
BODY, merupakan isi dari suatu dokumen HTML yang akan
ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa
teks, grafik, link, animasi maupun audio-video (multimedia).
Format text pada HTML.
Untuk membuat text atau suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru
adalah <br>. Perlu diketahui
bahwa sebagian tag elemen HTML tidak memerlukan tag penutup,
sebagai contoh seperti : <br>dan <hr> (Garis
Horizontal).
Selanjutnya tag <h1> hingga <h6>, disebut juga sebagai
Heading, yang biasanya di gunakan untuk membuat judul, angka yang
tertera setelah huruf h adalah besarnya ukuran huruf. Angaka 1 (satu) untuk
ukuran huruf yang terbesar, sedangkan angka 6 (enam) adalah untuk
ukuran huruf yang terkecil.
Ada banyak jenis kode untuk format text pada html, yang mungkin tidak Saya
sebutkan satu-persatu, karena ini hanyalah sekilas mengenal dasar HTML.
Contoh Praktek
Text HTML :
Text HTML :
"<html>
<head>
<TITLE>Latihan Membuat WEB</TITLE>
</head>
<body>
<b>Pengumuman Lomba Cerdas Cermat</b>
<br><p><i>Mahasiswa Teladan</i></p>
<br><u>Mahasiswa Terbaik</u>
<br><i>Mahasiswa Terepat</i>
<b>Mahasiswa Terlengkap</b>
<br><s>Mahasiswa Terepat</s>
<marquee><br><hr><u>Selamat Datang BSI PURWOKERTO Jl HR Bunyamin 106 www.bsi.ac.id</u></marquee>
<h1>Judul Web</h1>
<h2>Judul Web</h2>
<h3>Judul Web</h3>
<h4>Judul Web</h4>
<h5>Judul Web</h5>
<h6>Judul Web</h6>
<ol>
<li>Jono</li>
<li>bahrudin</li>
</ol>
<ul>
<li>Jono</li>
<li>bahrudin</li>
</ul>
</body>
</html>"
 |
| Gambar code di notepad++ |
Hasilnya Menjadi sebagai berikut :
 |
| Gambar Hasil Praktek 1 |
Sampai disini pembahasan tentang Pengenalan dasar HTML bagian1,sampai ketemu di bagian 2, semoga dapat dipahami dan bermanfaat.[]
Baca Juga :
Belajar HTML dengan XAMPP Bagian 1
Belajar HTML dengan XAMPP Bagian 2
Belajar HTML dengan XAMPP Bagian 3
Belajar HTML dengan XAMPP Bagian 4
