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 sekarangDefinisi 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.
1
Halo teman Dicoding apa bagaimana dengan? Mudah-semoga dalam kondisi sehat-sehat hanya ya. Amin
Contoh struktur dasar HTML yang dapat Anda pelajari dan praktikkan adalah sebagai berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Dicoding Indonesia Situs web
Dicoding Indonesia
Gudang developer dapat diandalkan
Mencetak banyak lulusan terbaik terutama para developer.
Paragraf two dengan a klik di sini
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Web | Portofolio
Tentang
Portofolio
Blog
Kontak
ProfesiJunior Konten Penulis di Dicoding
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.
Profil Saya
Telegram
Kode lab. gaya. css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
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