Wavy Tail

Sabtu, 02 Maret 2019

Bagaimana Mengoperasikan Visual Studio Code dengan format HTML?

Halo temen-temen!!!
Disini aku bakal jelasin gimana caranya mengoperasikan Visual Studio Code dengan format HTML. Kita akan belajar yang easy (mudah) terlebih dahulu.

1. Memastikan bahwa PC / Laptop kalian sudah menginstal Visual Studio Code



Kalau belum download, bisa install lewat link https://code.visualstudio.com/download 👈
 Lalu buka aplikasi tersebut

2. Memilih File > New File seperti dibawah ini


3. Lalu akan muncul halaman kosong. Memberi format dasar HTML seperti dibawah ini


<!DOCTYPE html>
<html>
    <head>
        <title>
          <body>

Penjelasan:

<html> diakhiri dengan </html> : format dasar dokumen HTML

<head> diakhiri dengan </head> : memberikan informasi tentang dokumen yang akan dijelaskan. biasanya tulisan ada di page web

<title> diakhiri dengan </title> : judul pada dokumen

<body> diakhiri dengan </body> : isi dari sebuah dokumen

Perhatikan struktur penjelasan diatas, menggambarkan seperti anggota tubuh kita. ada head (kepala), title (penghubung kepala dengan tubuh), dan body (seluruh tubuh kita)

Yuk tanpa basa-basi lagi kita praktek membuat biodata yang simple saja

Contoh Biodata:

Nama : Nurul Qomariyah
Kelas : 1 D3 Elektronika B
NRP : 1103181033
Kampus : Politeknik Elektronika Negeri Surabaya
TTL : Surabaya, 11 Agustus 2000
Alamat : Jalan Candi Lempung, Surabaya


Penulisan:

<!DOCTYPE html>
<html>
<head>
<title>
Biodata Diri (Simple)
</title>
</head>
<body>
<h1> BIODATA DIRI </h1>
<p> Nama : Nurul Qomariyah </p>
<p> Kelas : 1 D3 Elektronika B </p>
<p> NRP : 1103181033 </p>
<p> Kampus : Politeknik Elektronika Negeri Surabaya</p>
<p> TTL : Surabaya, 11 Agustus 2000</p>
<p> Alamat : Jalan Candi Lempung, Surabaya </p>
</body>
</html>

Setelah membuat biodata seperti diatas, simpan dokumen HTML tersebut dengan cara:
File > Save As > Pilih Folder > Pilih Format HTML (kotak yang ditandai warna merah) > Beri nama > Tekan Save


Buka folder penyimpanan dokumen tersebut, lalu akan muncul seperti ini:


oh iya, hampir ketinggalan. jika kalian ingin mencoba web page seperti diatas, kalian harus download xamplite terlebih dahulu ya.
ini link untuk mendownload: https://www.apachefriends.org/download.html

Dalam proses menginstal xampp (xamplite), kalian harus menyimpan data aplikasi tersebut di data C atau ROM pada windows.

lalu setelah penginstalan selesai, kalian harus membuat folder pada:
xampp>htdocs>(lalu buat new folder, sehingga bisa di search saat mengetik di URL web)

jika kalian ingin membuka web page, kalian harus mengaktifkan xampp, seperti dibawah ini:



Sekian dari aku, semoga bermanfaat yaaa💓💓

Tidak ada komentar:

Posting Komentar