Cara menggunakan visual studio code html

Setelah sekian lama kita membahas mengenai materi dan sejarah HTML, kali ini kita akan langsung praktek membuat HTML pertama. Bagi kalian yang belum tau mengenai sejarah dan materi tentang HTML, bisa dibaca-baca dulu pada link berikut:

Table of Contents Show

Membuat HTML Pertama
Cara Coding HTML di Visual Studio Code
1. Membuat, Membuka dan Menyimpan Berkas HTML
2. Cara coding HTML di Visual Studio Code dengan Menggunakan Terminal
Bagaimana cara menggunakan HTML?
Visual Studio code pakai bahasa apa?
Apa saja kode HTML?
Apa bedanya Microsoft Visual Studio dengan Visual Studio Code?

Tutorial HTML #1 Mengenal HTML
Tutorial HTML #2 Tag, Elemen, Dan Atribut

Oke, tanpa basa-basi langsung saja kita Sarapan Koding !

Persiapan

Sebelum membuat HTML, kalian harus mempersiapkan dua aplikasi berikut:

1. Code Editor

Aplikasi code editor ini digunakan untuk menulis kode HTML yang akan kita praktekkan setelah ini, Kalian dapat menggunakan code editor kesayangan kalian, bagi yang masih bingung mau pakai code editor apa, disini saya menyarankan memakai Visual Studio Code (VSCode) atau Sublime Text.

Di dalam tutorial ini saya menggunakan Visual Studio Code (VSCode). Jika anda juga memilih VSCode sebagai code editor, kalian dapat membaca artikel 5 Extension VSCode Untuk Pemrograman Web pada postingan saya sebelumnya.

2. Web Browser

Aplikasi kedua ini digunakan untuk melihat hasil dari pekerjaan kita. Kalian dapat menggunakan web browser Google Chrome atau Mozilla Firefox.

Membuat HTML Pertama

Agar praktek kita lebih teratur, kita buat folder bernama belajar_html di dalam disk D, Lokasi penyimpanannya sesuka hati kalian, boleh di desktop atau di dalam direktori yang lain. Setelah itu buka folder tersebut di dalam VSCode. Folder ini digunakan untuk menyimpan semua file HTML hasil praktek kita.

Setelah folder terbuka, selanjutnya kita buat file bernama index.html di dalam folder tersebut.

Selanjutnya kita buat struktur dasar HTML. Jika kita menggunakan VSCode cukup ketikkan ! kemudian enter, maka akan muncul struktur dasar HTML sebagai berikut.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

Selanjutnya kita ubah judulnya yang ada di dalam tag <title> menjadi Judul HTML Pertamaku, dan isikan paragraf di dalam tag <body>.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul HTML Pertamaku</title>
</head>

<body>
    <p>Ini adalah paragraf pertama saya. Paragraf ini dibuat dengan hati ikhlas dan rasa cinta.</p>
</body>

</html>

Simpan file tersebut, kemudian buka di dalam web browser kalian untuk melihat hasilnya. Caranya, buka browser kalian, tuliskan lokasi penyimpanan file D:/belajar_html/index.html Pengguna VSCode tinggal klik kanan, pilih Open In Default Browser atau Open In Other Browsers untuk memilih browser lainnya.

Selamat.. HTML pertama kalian sudah berhasil dibuat. Berikut penjelasan dari gambar di atas:

Pada nomor pertama ini merupakan judul halaman yang ada di dalam tag <title>
Nomor kedua merupakah URL atau istilah lainnya adalah alamat website
Pada nomor ketiga tersebut merupakan isi dari website kita, kebetulan yang kita buat hanya berupa paragraf saja.

Cukup mudah sekali untuk membuat halaman HTML ini, semoga dapat dipahami. Oke sekian dulu sarapan koding hari ini, selamat mencoba.

HTML merupakan dasar bagi bizzie yang sedang belajar bahasa pemrograman. HTML sendiri merupakan singkatan dari HyperText Markup Language. Dimana artinya adalah bahasa markup yang digunakan dalam membuat atau menuliskan kode program sehingga terbentuk dalam suatu halaman website. HTML disusun dengan menggunakan tanda (mark) atau disebut juga tag. Dimana tanda tag ini berfungsi untuk menandai tipe text tertentu pada halaman website.

Dalam menyusun sebuah website, HTML harus disimpan dalam bentuk file dengan ekstensi .html. Sedangkan Visual Studio Code merupakan salah satu text editor (penyunting) kode sumber (source code) yang dikembangkan oleh Microsoft. Dimana Visual Studio Code ini bisa diakses melalui OS Windows, Linux atau Mac. Dengan menggunakan perangkat lunak ini, bizzie akan mengetahui cara coding HTML di Visual Studio Code.

Melalui Visual Studio Code bizzie juga bisa menulis dan menyunting kode dalam berbagai bahasa pengkodean, salah satunya adalah HTML. Namun, bagaimana cara coding HTML di Visual Studio Code. Tenang, ada beberapa ekstension dari VSCode ini yang bisa bizzie gunakan untuk menjalankan kode HTML secara mudah. Selain itu, bizzie juga bisa menjalankan berkas HTML dengan menggunakan Terminal. Berikut ini ada penjelasan cara coding HTML di Visual Studio Code.

Trending

Apa Itu Link Building, Ketahui Pengertian Dan Jenis-Jenisnya

Daftar Isi

Cara Coding HTML di Visual Studio Code

1. Membuat, Membuka dan Menyimpan Berkas HTML

● Cara coding HTML di Visual Studio Code pertama adalah membuka Visual Studio Code yang berbentuk pita biru. Kemudian jalankan Visual Studio Code dengan mengklik ikonnya. Bizzie bisa menemukan ikon ini di dalam menu Start (Windows), folder Applications (Mac) atau menu Apps (Linux). Namun, apabila tidak punya maka bizzie bisa mengunduhnya secara gratis.

● Selanjutnya buka atau buat berkas baru dengan cara melakukan salah satu langkah berikut ini:

● Membuat berkas baru dengan mengklik File pada bilah menu di bagian sisi atas dan melanjutkan dengan klik New File. Nah, bizzie sudah bisa mulai mengetik kode HTML.

● Membuka berkas yang sudah ada dengan mengklik File pada bilah menu di bagian sisi atas dan melanjutkan dengan klik Open File. Kemudian cari berkas HTML yang bizzie inginkan dan pilih berkas tersebut dengan mengkliknya, setelah itu klik Open.

● Setelah itu bizzie sudah siap untuk menjalankan berkas HTML di Visual Studio Code. Simpan berkas tersebut dalam bentuk HTML. Jika berkas sudah tersimpan maka bizzie bisa menjalankannya sesuka bizzie.

2. Cara coding HTML di Visual Studio Code dengan Menggunakan Terminal

● Cara coding HTML di Visual Studio Code yang pertama adalah membuka Visual Studio Code dan menjalankannya dengan mengklik ikonnya. Bizzie bisa menemukan VS Code ini di dalam menu Start pada Windows, folder Applications pada Mac dan menu Apps pada Linux.

● Kemudian buka berkas HTML yang sudah ada, jika belum bizzie bisa membuat berkas HTML baru lalu simpan dalam format HTML. Apabila berkas HTML tersebut sudah terbuka, lalu klik tab yang berisikan berkas HTML di bagian sisi atas layar untuk menampilkannya.

● Cara coding HTML di Visual Studio Code selanjutnya adalah dengan membuka terminal baru. Lakukan cara ini dengan mengklik Terminal di bagian sisi atas layar dan mengklik New Terminal. Terminal ini sendiri merupakan satu-satunya cara untuk membuka berkas HTML di Visual Studio Code tanpa harus menggunakan ekstensi. Caranya juga terbilang paling rumit dibandingkan ekstensi. Sebagai alternatifnya bizzie bisa mengklik View di bagian sisi atas dan mengklik Terminal.

● Cara coding HTML di Visual Studio Code berikutnya bizzie akan diarahkan ke lokasi berkas HTML. Bizzie bisa menuliskan cd yang diikuti dengan path berkas HTML-nya lalu tekan enter. Contohnya apabila berkas HTML berada di folder Documents, maka klik cd\users\namapengguna\Documents dan tekan tombol enter.

● Apabila berkas HTML disimpan di drive lain (bukan drive yang sama dengan sistem operasi komputer) maka gantilah drive tersebut di terminal agar bizzie bisa membuka path ke berkas HTML.

● Jika bizzie lupa dengan lokasi penyimpanan berkas HTML, maka klik kanan tab untuk berkas HTML tersebut di sisi atas layar. Kemudian pilih Copy Path klik cd di terminal, lalu tempelkan path berkas HTML langsung di sebelahnya.

● Apabila nama folder di dalam path berkas HTML memiliki spasi, maka Terminal tidak akan bisa membuka folder tersebut. Oleh karena itu, gunakan File Explorer untuk membuka folder yang memiliki spasi tersebut. Kemudian gantilah nama foldernya dengan cara menghilangkan spasinya.

● Cara coding HTML di Visual Studio Code dengan menggunakan Terminal yang terakhir adalah mengetik Start yang diikuti dengan nama berkas HTML kemudian tekan enter. Contohnya, jika bizzie ingin membuka berkas HTML bernama index, maka ketik startindex.html dan tekan tombol enter. Maka berkas HTML tersebut akan dibuka di jendela yang baru sehingga bizzie dapat melihat pratinjaunya. Apabila bizzie ingin menutup pratinjau maka klik ikon X di sisi atas jendela.

Nah, itu dia tadi penjelasan singkat bagaimana cara coding HTML di Visual Studio Code dengan menggunakan beberapa metode. Semoga penjelasan yang kami jelaskan diatas dapat dengan mudah dimengerti. Terutama bagi bizzie yang menggunakan Visual Studio Code. Jangan lupa untuk terus mempelajari dunia coding atau bahasa pemrograman agar kemampuan bizzie semakin terasah, tentunya dengan bantuan text editor seperti Visual Studio Code.

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Visual Studio code pakai bahasa apa?

Visual Studio Code merupakan penyunting kode-sumber yang dapat digunakan untuk beragam bahasa pemrograman, termasuk Java, JavaScript, Go, Node.js, Python dan C++.

Apa saja kode HTML?

Berikut adalah 9 kode HTML untuk blog dan arti coding tersebut:.

Title Tag. Tag HTML yang pertama yaitu title tag. ... .

Meta Description. Berikutnya, ada meta description. ... .

3. Heading Tag. ... .

4. Anchor Text dan Link. ... .

Nofollow. ... .

6. Image Alt Text. ... .

7. Tag Kanonikal. ... .

9. Tag Huruf Tebal (Bold).

Apa bedanya Microsoft Visual Studio dengan Visual Studio Code?

Visual Studio Code adalah editor sementara Visual Studio adalah IDE. Jika Visual Studio adalah aplikasi pembuat aplikasi, apakah Microsoft juga menggunakan aplikasi lain untuk membuat Visual Studio? Visual Studio dibuat dengan Visual Studio.