Sabtu, 24 Maret 2018

Belajar HTML dengan XAMPP Bagian 1

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
  1. Silakan anda download xampp disini.
  2. Jika sudah berhasil di download, langsung saja klik aplikasi xampp dua kali untuk menginstall-nya.
  3. Anda klik next saja untuk melanjutkan install xampp.
  4. 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 tagelemenatribut 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 elemenbgcolor adalah atribut dan 0000ffmerupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu : tag pembukaisi, 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.
TITLEmerupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser.
BODYmerupakan 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 :
"<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.[]


Tidak ada komentar:

Posting Komentar