Contoh Coding HTML Website Dalam 15 Menit
9 December 2020
Hallo, teman-teman!
Jumpa lagi nih. Pada kesempatan kali ini saya akan berbagi pengalaman seputar ngoding website. Biasanya pembuatan sebuah website memerlukan waktu yang relatif lam, baik itu web berjenis
e-commerce, profil perusahaan, maupun layanan service.
Lalu, apakah kita dapat ngoding web hanya dalam waktu 15 menit saja? Iya, tentu bisa. Seperti apakah website yang akan kita buat? Penasaran kan? Kamu mesti ikuti terus tips dan trik yang satu ini ya. Simak tuntas dan praktek langsung yuk teman-teman.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer
profesional.
Daftar Sekarang
Pengertian HTML
Sebelum masuk ke contoh, alangkah baiknya mengenal dulu HTML. Sudah tahu kan apa itu HTML? HTML adalah adalah
singkatan dari 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 bukanlah bahasa pemrograman, artinya HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Contoh kode atau script membuat paragraf.
|
| <p>HallosobatDicodingapakabarnya?Mudah-mudahandalamkeadaansehat-sehatsaja
ya.Ammin</p>
|
Adapun contoh struktur dasar dari HTML yang dapat kamu pelajari dan praktekkan di antaranya sebagai berikut ini.
|
| <html> <head> <title>Dicoding Indonesia Website</title> </head> <body> <main>
<h2>Dicoding Indonesia</h2> <h2>Gudangnya developer handal</h2> <p>Mencetak
banyak lulusan terbaik khususnya para developer.</p> <img src="logo_dicoding.png"alt="Image dicoding"> <p>Paragraph
two witha<ahref="https://dicoding.com">klik disini</a></p> </main> </body>
</html>
|
Menentukan Tema Web
Bagi teman-teman yang
masih bingung akan membuat web yang seperti apa, tentunya yang pertama kali kita lakukan adalah menentukan tema web yang akan dibuat. Oke, kita contohkan saja website sederhana dengan tema portofolio. Di sini kita akan mencoba membuat web portofolio menggunakan HTML5 ditambah sentuhan magic dari CSS3 agar tampilannya sedikit menarik dan responsif. Apa itu mungkin? Tidak akan tahu sebelum kita coba hehe.
Disini kita akan
menggunakan tools-tools sebagai berikut ini:
- Teks editor: VS Code atau Teks Editor Lain
- Kode program : HTML5 dan CSS3
- Web browser: Chrome
Contoh Ngoding Web Portofolio
Pertama buka teks editor kamu. Setelah dibuka kita akan membuat
folder proyek terlebih dahulu. Kamu dapat menyimpan folder di sembarang tempat. Ok langsung saja. Kita akan membuat 2 buah file. Diantaranya index.html dan style.css.
Kode Lab: index.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
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport"content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"href="style.css"> <title>Web
|Portofolio</title> </head> <body> <div class="container"> <div
class="sidebar"> <nav> <ul> <li><a
href="">About</a></li> <li><a
href="">Portofolio</a></li> <li><a
href="">Blog</a></li> <li><a
href="">Contact</a></li> </ul> </nav>
</div> <main class="content"> <section
class="hero"> <img src="online.png"alt=""> <div
class="hero-content"> <h2>Profesi</h2><br></h2>Junior Content
Writer at Dicoding</h2><br><br> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos,aperiam dolore assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis debitis doloribus ullam minima culpa
voluptatem.Repellendus,option.</p> <ahref=""class="action-btn">Profile Saya</a> </div>
</section> </div> <div class="footer"> <footer>
<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> </div>
</body> </html>
|
Kode Lab: style.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; padding:0; } body{ background-color:
#eff1f2; font-family:sans-serif; } .content{ grid-area:content; }
.sidebar{ grid-area:sidebar; background:linear-gradient(toright,
rgba(200,107,142,1),rgba(218,105,250,1),
rgba(110,125,253,1)); justify-content:center; } .footer{ grid-area:
footer; background:white; } .container{ font-size:1.5em; width:
100%; height:100; height:100vh; display:grid; grid-template-areas:
"sidebar""content""footer"; grid-template-columns:1fr; grid-template-rows:130px
800px250px; } .content,.sidebar,.footer{ padding:1em; } navul{ margin:
0; padding:0; display:flex; justify-content:space-between; text-align:
center; } navli{ list-style:none; padding:1em0; } nav
lia{ color:white; font-weight:700; opacity:0.6; text-decoration:
none; transition:0.3s; } nav lia:hover{ opacity:1; } .hero
{ max-width:90px; margin:0auto; text-align:center;
} .hero img{ width:200px; } .hero h2{ font-size:2em; font-weight:
300; color:#373046; } .herop{ font-weight:300; line-height:
1.3em; color:#98aBad; } .action-btn{ display:inline-block; text-decoration:
none; color:white; font-weight:700; background:#567bfb; padding:
0.5em2em; border-radius:60px; margin:1em0; transition:0.3s;
} footerul{ max-width:640px; margin:2emauto; padding:0; text-align:
center; display:flex; flex-direction:row; } footerulli{ list-style:
none; align-self:flex-end; } footerullia{ text-decoration:
none; color:#c1c6ce; } footerulliimg{ width:30%; } footer
p{ font-size:0.8em; } @media(min-width:1040px){ .container
{ grid-template-areas:"sidebar content""sidebar footer"; grid-template-rows:1fr
auto; grid-template-columns:300px1f; } navul{ display:
flex; justify-content:space-between; flex-direction:column; } .sidebar{
background:linear-gradient(rgba(200,107,142,1),
rgba(218,105,250,1), rgba(110,125,253,1)); padding-top:
10em; } .hero{ text-align:left; margin:7em
0; } .hero img{ width:200px; float:right;
} .hero h2{ font-size:3em; } .hero
p{ width:60%; } footerul{ max-width:
900px; margin:0auto; padding:1em0; } footer
ulliaimg{ width:20%; } }
|
Maka Outputnya:
Wah, mantap kan? Jika kalian bingung dalam mencari gambar seperti ikon sosial media ataupun avatar, maka kalian bisa menemukannya di website ini.
flaticon.com
Kamu juga bisa coba juga apakah website tersebut responsif atau tidak. Caranya lakukan zoom in dan zoom out atau perbesar dan perkecil tampilan web browser.
Maka outputnya:
Gimana mudah kan? Kalian bisa kembangkan lagi, misal dari segi desain atau tampilan, posisi layout, teks, foto, dll.
Baik, itu saja yang dapat contohkan selebihnya kamu bisa improvisasi sendiri. Biar lebih asik lagi belajar webnya mimin sarankan ikuti kelas
Belajar Dasar Pemorgraman Web di Dicoding . Dijamin seru dan tentunya akan mengantarkanmu menjadi web developer profesional.
Simak juga artikel menarik lainnya di blog Dicoding yang akan dapat menambah ilmu-ilmu baru yang super kece diantaranya sebagai berikut ini.
- Contoh dan Cara Membuat Form di HTML
- 5 IDE Powerful Untuk Ngoding Web
- Langkah Awal Untuk Memulai Belajar Pemrograman Web
- Programmer Web Bikin Aplikasi Mobile? Yuk Ngoding dengan PWA
“Program yang dikembangkan tidak akan luput dari error, sehebat apapun programmernya”. (Alan J. Perlis)
Bagikan pengalaman kamu saat ngoding melalui kolom komentar. Jika ada pertanyaan silahkan isi kolom komentar dibawah ini.
Contoh Coding HTML Website
Dalam 15 Menit– karya Rendi Juliarto, Intern Junior Content Writer di Dicoding
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..
HTML bisa buat apa aja?
Biasanya, penggunaan umum HTML adalah untuk menyusun bagian paragraf, heading, maupun link pada halaman web. Tapi, meskipun susunannya seperti coding, perlu diketahui bahwa HTML bukanlah bahasa pemrograman. HTML tidak dianggap sebagai bahasa pemrograman karena tidak bisa memberikan fungsi yang dinamis.
Dimana HTML dapat digunakan?
Dikutip dari Computerhope, HTML digunakan untuk membuat dokumen elektronik (disebut halaman) yang ditampilkan di World Wide Web (www). Setiap halaman berisi serangkaian koneksi ke halaman lain yang disebut hyperlink. Setiap halaman web yang Anda lihat di Internet ditulis menggunakan satu versi kode HTML atau yang lain.
Apa itu HTML dan bagaimana cara membuatnya?
HTML adalah adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website.
