Contoh Coding HTML Website Dalam 15 Menit - Dicoding Blog

Trang chủ » Html Dan Css Sederhana » Contoh Coding HTML Website Dalam 15 Menit - Dicoding Blog

Có thể bạn quan tâm

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

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.

Haskell
1 <p>HallosobatDicodingapakabarnya?Mudah-mudahandalamkeadaansehat-sehatsajaya.Aamiin.</p>

Adapun contoh struktur dasar dari HTML yang dapat kamu pelajari dan praktekkan di antaranya sebagai berikut ini.

123456789101112131415 <!DOCTYPE html><html><head><title>Dicoding Indonesia Website</title></head><body><main><h1>Dicoding Indonesia</h1><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

content 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.

Mempersiapkan Tools yang Akan Digunakan

tools web

Disini kita akan menggunakan tools-tools sebagai berikut ini:

  1. Teks editor: VS Code atau Teks Editor Lain
  2. Kode program : HTML5 dan CSS3
  3. Web browser: Chrome

Contoh Ngoding Web Portofolio

web

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

XHTML
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 <!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"><h1>Profesi</h1><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><a href=""class="action-btn">Profile Saya</a></div></section></main><div class="footer"><footer><ul><li><img src="instagram.png"alt="" /><a><p>Instagram</p></a></li><li><img src="facebook.png"alt="" /><a><p>Facebook</p></a></li><li><img src="twitter.png"alt="" /><a><p>Twitter</p></a></li><li><img src="telegram.png"alt="" /><a><p>Telegram</p></a></li></ul></footer></div></div></body></html>

 

Kode Lab: style.css

CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 * {  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:130px800px250px;} .content,.sidebar,.footer {  padding:1em;} nav ul {  margin:0;  padding:0;  display:flex;  justify-content:space-between;  text-align:center;} nav li {  list-style:none;  padding:1em0;} nav li a {  color:white;  font-weight:700;  opacity:0.6;  text-decoration:none;  transition:0.3s;} nav li a:hover {  opacity:1;} .hero {  max-width:90px;  margin:0auto;  text-align:center;} .hero img {  width:200px;} .hero h1 {  font-size:2em;  font-weight:300;  color:#373046;} .hero p {  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;} footer ul {  max-width:640px;  margin:2emauto;  padding:0;  text-align:center;  display:flex;  flex-direction:row;} footer ul li {  list-style:none;  align-self:flex-end;} footer ul li a {  text-decoration:none;  color:#c1c6ce;} footer ul li img {  width:30%;} footer p {  font-size:0.8em;} @media (min-width: 1040px) {  .container {    grid-template-areas:'sidebar content''sidebar footer';    grid-template-rows:1frauto;    grid-template-columns:300px1f;  }   nav ul {    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:7em0;  }   .hero img {    width:200px;    float:right;  }   .hero h1 {    font-size:3em;  }   .hero p {    width:60%;  }   footer ul {    max-width:900px;    margin:0auto;    padding:1em0;  }   footer ul li a img {    width:20%;  }}

 

Maka Outputnya:

web portofolio

Wah, mantap kan? Jika kalian bingung dalam mencari gambar seperti ikon sosial media ataupun avatar, maka kalian bisa menemukannya di website ini.

flaticon

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:

responsive gif

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.

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

 

Từ khóa » Html Dan Css Sederhana