Cara menggunakan hasil html

Artikel ini disusun oleh tim editor dan peneliti terlatih yang memastikan keakuratan dan kelengkapannya

Table of Contents Show

💻 Mulai Belajar Pemrograman
Definisi HTML
Menentukan Tema Web
Mempersiapkan Alat Yang Akan Digunakan
Contoh Coding Web Portofolio
Bagaimana cara menggunakan HTML?
Kode HTML dijalankan menggunakan apa?
Bagaimana cara menulis tag HTML yang benar?
Bagaimana cara membuat tautan dalam HTML?

Tim Manajemen Konten wikiHow secara hati-hati memantau hasil penyuntingan staf kami untuk memastikan artikel berkualitas tinggi

Artikel ini telah dilihat 17. 255 kali

Visual Studio Code adalah editor kode sumber (source code) buatan Microsoft. Program ini tersedia untuk Windows, Linux, dan macOS. Dengan software ini, Anda dapat menulis dan mengedit kode dalam berbagai bahasa pengkodean, termasuk HTML. Namun, apa yang harus dilakukan jika Anda ingin menjalankan kode HTML untuk melihat tampilannya? . Anda juga dapat menjalankan file HTML menggunakan Terminal. Artikel wikiHow ini menjelaskan cara menjalankan berkas HTML menggunakan Visual Studio Code

Langkah

Buka Kode Visual Studio. Program ini memiliki ikon berbentuk pita berwarna biru. Jalankan Visual Studio Code dengan mengklik ikonnya. Anda dapat menemukan aplikasi ini di menu Start (Windows), di folder Applications (Mac), atau di menu Apps (Linux)
- Jika Anda belum memilikinya, Anda dapat mengunduh aplikasi ini secara gratis di https. // kode. Studio visual. com/. Klik tombol Unduh di situs web, lalu buka file instalasi dari browser web atau folder Unduhan di komputer. Ikuti petunjuk yang diberikan untuk menginstalnya
Buka atau buat file HTML baru. Jika Anda belum melakukannya, buka file HTML yang ada, atau buat file HTML baru, lalu simpan ke format HTML. Jika file HTML sudah terbuka, klik tab yang berisi file HTML di bagian atas layar untuk menampilkannya
Sampai jumpa lagi. Pada kesempatan kali ini, saya akan membagikan pengalaman saya tentang coding website. Biasanya pembuatan website membutuhkan waktu yang relatif lama, baik itu website e-commerce, company profile, atau service.

Jadi, bisakah kita membuat kode web hanya dalam 15 menit? . Website seperti apa yang akan kita buat? . Simak baik-baik dan praktekkan langsung ya teman-teman

💻 Mulai Belajar Pemrograman

Pelajari pemrograman di Dicoding Academy dan mulailah perjalanan Anda sebagai pengembang profesional

Daftar sekarang

Definisi HTML

Sebelum memasukkan contoh, alangkah baiknya mengenal HTML terlebih dahulu. Apakah Anda tahu apa itu HTML? . HTML memungkinkan pengguna untuk membuat dan mengatur judul, paragraf, tautan atau link, dan blockquote untuk halaman situs web. Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.

HTML sebenarnya bukan bahasa pemrograman, artinya HTML tidak memiliki kemampuan untuk membuat fungsionalitas dinamis. Contoh kode atau skrip buat paragraf.

Haskell

<p> Halo teman Dicoding apa bagaimana dengan? Mudah-semoga dalam kondisi sehat-sehat hanya ya. Amin </p>

Contoh struktur dasar HTML yang dapat Anda pelajari dan praktikkan adalah sebagai berikut

<html>

<judul>Dicoding Indonesia Situs web</judul>

</kepala>

<tubuh>

<utama>

<h1>Dicoding Indonesia</h1>

<h2>Gudang developer dapat diandalkan</h2>

<p>Mencetak banyak lulusan terbaik terutama para developer. </p>

<p>Paragraf two dengan a <a href="https. // decoding. com">klik di sini</a></p>

</mainkan>

</tubuh>

</html>

Menentukan Tema Web

Bagi sobat yang masih bingung akan membuat web seperti apa, tentunya hal pertama yang kita lakukan adalah menentukan tema web yang akan dibuat. Oke langsung saja kita berikan contoh website sederhana dengan tema portfolio. Disini kita akan mencoba membuat web portofolio menggunakan HTML5 ditambah dengan sentuhan magic dari CSS3 sehingga tampilannya sedikit menarik dan responsive. Apakah itu mungkin?

Mempersiapkan Alat Yang Akan Digunakan

Di sini kita akan menggunakan alat berikut

Editor teks. Kode VS atau Editor Teks Lainnya
Kode program. HTML5 dan CSS3
Peramban web. Chrome

Contoh Coding Web Portofolio

Pertama buka editor teks Anda. Setelah dibuka kita akan membuat folder project terlebih dahulu. Anda dapat menyimpan folder di mana saja. Oke langsung saja. Kami akan membuat 2 file. Diantaranya indeks. html dan gaya. css

Kode lab. indeks. html

<. DOCTYPE html>

<judul>Web | Portofolio</judul>

</kepala>

<tubuh>

<nav>

<ul>

<li><a href="">Tentang</a></li>

<li><a href="">Portofolio</a></li>

<li><a href="">Kontak</a></li>

</ul>

</nav>

</div>

<h1>Profesi</h1><br></h2>Junior Konten Penulis di Dicoding</h2><br><br>

<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore assumenda velit repelendus recusandae magni consectetur mollitia wajah insiden penemu perspiciatis debit doloribus ullam minima culpa voluptatem. Repelendus, opsi. </p>

<a href="" kelas="action-btn"> Profil Saya</a >

</div>

</bagian>

</div>

<ul>

<li><img src="instagram. png" alt=""><p>Instagram</p></a></li>

<li><img src="facebook. png" alt=""><p>Facebook</p></a></li>

<li><img src="twitter. png" alt=""><p>Twitter</p></a></li>

<li><img src="telegram. png" alt=""><p>Telegram</p></a></li>

</ul>

</footer>

</div>

</tubuh>

</html>

Kode lab. gaya. css

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

* {

margin. 0;

pengisian. 0;

}

tubuh {

latar belakang-warna. #eff1f2;

font-keluarga. sans-serif;

}

. konten {

kisi-area. konten;

}

. bilah samping{

kisi-area. bilah samping;

latar belakang. linier-gradien(ke benar, rgba(200 ,107,142, 1), rgba( 218,105,250 ,1),

rgba(110,125,253,1)) ;

membenarkan-konten. tengah;

}

. footer {

kisi-area. footer;

latar belakang. putih;

}

. wadah {

font-ukuran. 1. 5em;

lebar. 100%;

tinggi. 100;

tinggi. 100vh;

tampilan. kisi;

kisi-templat-areas. "sidebar" "konten" "footer";

kisi-templat-columns. 1fr;

kisi-templat-rows. 130px 800px 250px;

}

. konten, . bilah samping, . footer{

pengisian. 1em;

}

nav ul {

margin. 0;

pengisian. 0;

tampilan. fleksibel;

membenarkan-konten. spasi-antara;

teks-sejajarkan. tengah;

}

nav li{

daftar-gaya. tidak ada;

pengisian. 1em 0;

}

nav li a {

warna. putih;

font-berat. 700;

opasitas. 0. 6;

teks-dekorasi. tidak ada;

transisi. 0. 3s;

}

nav li a. arahkan kursor {

opasitas. 1;

}

. pahlawan {

maks-lebar. 90 px;

margin. 0 otomatis;

teks-sejajarkan. tengah;

}

. pahlawan img {

lebar. 200px;

}

. pahlawan h1 {

font-ukuran. 2em;

font-berat. 300;

warna. #373046;

}

. pahlawan p {

font-berat. 300;

garis-tinggi. 1. 3em;

warna. #98aBuruk;

}

. tindakan-btn {

tampilan. sebaris-blokir;

teks-dekorasi. tidak ada;

warna. putih;

font-berat. 700;

latar belakang. #567bfb;

pengisian. 0. 5em 2em;

batas-radius. 60px;

margin. 1em 0;

transisi. 0. 3s;

}

footer ul {

maks-lebar. 640px;

margin. 2em otomatis;

padding. 0;

teks-sejajarkan. tengah;

tampilan. fleksibel;

fleksibel-arah. baris;

}

footer ul li {

daftar-gaya. tidak ada;

sejajarkan-diri. fleksibel-akhir;

}

footer ul li a{

teks-dekorasi. tidak ada;

warna. #c1c6ce;

}

footer ul li img {

lebar. 30%;

}

footer p {

font-ukuran. 0. 8em;

}

@media (mnt-lebar. 1040 piksel){

. wadah {

kisi-templat-areas. "konten sidebar" "footer sidebar" ;

kisi-templat-rows. 1fr otomatis ;

kisi-templat-columns. 300px 1f;

}

nav ul{

tampilan. fleksibel;

membenarkan-konten. spasi-antara;

fleksibel-arah. kolom;

}

. bilah samping{

latar belakang. linier-gradien( rgba (200,107, 142,1), rgba(218,105 ,250,1) ,

rgba(110,125,253,1)) ;

pengisian-atas. 10em;

}

. pahlawan{

teks-sejajarkan. kiri;

margin. 7em 0;

}

. pahlawan img {

lebar. 200px;

mengambang. benar;

}

. pahlawan h1{

font-ukuran. 3em;

}

. pahlawan p{

lebar. 60%;

}

footer ul {

maks-lebar. 900 piksel;

margin. 0 otomatis;

pengisian. 1em 0;

}

footer ul li a img {

lebar. 20%;

}

Kemudian Keluaran

Wah, bagus kan? . .

flaticon. com

Anda juga dapat mencoba apakah situs web tersebut responsif atau tidak. Cara memperbesar dan memperkecil atau memperbesar dan memperkecil web browser.

Kemudian outputnya

Seberapa mudahnya?

Bagus, itu saja yang bisa di contoh, selebihnya bisa improvisasi sendiri. Agar belajar web semakin menyenangkan, saya sarankan untuk mengikuti kelas Belajar Dasar Pemrograman Web di Dicoding . Dijamin seru dan pastinya akan mengantarkan Anda menjadi web developer profesional.

Simak juga artikel menarik lainnya di blog Dicoding yang bisa menambah ilmu baru yang super keren diantaranya sebagai berikut

Contoh dan Cara Membuat Form di HTML
5 IDE Kuat untuk Pengodean Web
Langkah Awal Untuk Memulai Belajar Pemrograman Web
Pemrogram Web Membuat Aplikasi Seluler?

“Program yang dikembangkan tidak akan luput dari kesalahan, sebaik apapun programmernya”. (Alan J. perlis)

Bagikan pengalamanmu saat coding melalui kolom komentar. Jika ada pertanyaan, silahkan isi kolom komentar dibawah

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML .

Buka editor teks. .

Setel jenis dokumen ke HTML. .

Tambahkan tab judul ke halaman web Anda. .

Ketuk di bawah tanda "Kepala" tertutup. .

Selanjutnya buat judul halaman. .

Tambahkan judul tambahan jika Anda mau. .

Buatlah sebuah paragraf. .

Mengubah warna teks

Kode HTML dijalankan menggunakan apa?

html atau. htm, yang dapat dilihat menggunakan peramban web apa saja (seperti Google Chrome, Safari, atau Mozilla Firefox). Browser membaca file HTML dan merender konten sehingga pengguna internet dapat melihat dan membacanya.