Cara membuat halaman di html

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

Nội dung chính Show

💻 Mulai Belajar Pemrograman
Definisi HTML
Menentukan Tema Web
Mempersiapkan Alat Yang Akan Digunakan
Contoh Coding Web Portofolio
Langkah-langkah membuat halaman web?
Bagaimana cara membuat tautan dalam HTML?
Apa itu struktur halaman dalam HTML?
Apa itu halaman HTML?

💻 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>

</utama>

</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. 900px;

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

Langkah-langkah membuat halaman web?

Ada 9 langkah mudah membuat website, yaitu. .

Tentukan jenis website dan tujuannya

Pilih layanan hosting web

Daftarkan nama domain pilihan

Pilih platform manajemen situs web

Instal platform (WordPress disarankan)

Ubah tema dan instal plugin

Terapkan strategi SEO terbaik

Promosikan situs web untuk mendapatkan lalu lintas

Cara membuat halaman di html

💻 Mulai Belajar Pemrograman

Definisi HTML

Menentukan Tema Web

Mempersiapkan Alat Yang Akan Digunakan

Contoh Coding Web Portofolio

Langkah-langkah membuat halaman web?

Bagaimana cara membuat tautan dalam HTML?

Apa itu struktur halaman dalam HTML?

Apa itu halaman HTML?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội