DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat Web Sederhana Dengan Html

advertisement
Membuat halaman web sederhana dengan html

Pada artikel-artikel sebelumnya, kita telah belajar membuat elemen-elemen penting di html.
Pada tutorial kali ini, kita akan coba mengimplementasikan materi-materi yang sudah kita pelajari untuk membuat sebuah halaman web sederhana.
Yuk kita mulai tutorialnya,

Membuat Desain Struktur

Untuk membuat halaman web, kita perlu menentukan seperti apa struktur halaman web yang ingin kita tampilkan.
Jangan terburu-buru menulis kode htmlnya, karena nanti struktur htmlnya malah akan berantakan.
Pastiin dulu desain dan konsep halaman webmu matang, sebagai patokan ketika kamu mulai menulis kode htmlnya.
Contohnya seperti gambar berikut,
Membuat Halaman Web Dengan Html
Disini saya mencoba membuat desain web dengan konsep singel page.

Siapkan Aset Yang Di Perlukan

Ketika desain sudah selesai dibuat, sekarang tinggal kita siapkan aset-aset yang diperlukan untuk membuat web tersebut, seperti gambar, icon, font, video, audio dan lain sebagainya.
Membuat Halaman Web Dengan Html

Menulis Kode Html

Jika desain dan aset sudah kita siapkan, sekarang kita masuk ke tahap koding htmlnya,
Buat elemen-elemen htmlnya sesuai struktur desain yang sudah kita buat.
Membuat halaman web dengan html
Sehingga kodenya seperti ini,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	  <header></header>
          <nav></nav>
          <div></div>
          <div></div>
          <div></div>
          <footer></footer>
    </body>
</html>
Selainjutnya kita isi elemen strukturnya dengan elemen-elemen child
Contoh desain web html
Sehingga kode htmlnya menjadi seperti ini,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body align="center">
	  <header><h1>Deretcode.com</h1></header>
          <nav>Service | About Us | Contact Us</nav>
          <div>
             <strong>Our Service</strong>
             <p><ul>
	     <li>Jasa Pembuata website</li>
		 <li>Jasa Seo</li>
		 <li>Jasa Mencintaimu</li>
	     </ul></p>
          </div>
          <div>
             <strong>Contact Us</strong>
	     <p></p><font color="blue">021-xxx-xxx-xxx</font></p>
	  </div>
          <div>
	     <strong>About Us</strong>
	     <p><i>Aku ada karena kamu ada</i></p>
	  </div>
          <footer>Copyright © 2020</footer>
    </body>
</html>
Terakhir, kita buat link pada navigasi dan atribut id pada elemen konten,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body align="center">
      <header>
      <h1>Deretcode.com</h1>
      </header>
      <nav><a href="#service">Service</a> | <a href="#about">About Us</a> | <a href="#contact">Contact Us</a></nav>
      <hr/>
      <div id="service">
      <strong>Our Service</strong>
      <p>
      <ul>
         <li>Jasa Pembuata website</li>
         <li>Jasa Seo</li>
         <li>Jasa Mencintaimu</li>
      </ul>
      </p>
      </div id="contact">
      <div>
         <strong>Contact Us</strong>
         <p></p>
         <font color="blue">021-xxx-xxx-xxx</font></p>
      </div>
      <div id="about">
         <strong>About Us</strong>
         <p><i>Aku ada karena kamu ada</i></p>
      </div>
      <footer>
         <hr/>
         Copyright © 2020<br/>Template by deretcode.com<br/>
      </footer>
   </body>
</html>
Pada  element ul kita tambahkan atribut style untuk merapikan listnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
   </head>
   <body align="center">
      <header>
      <h1>Deretcode.com</h1>
      </header>
      <nav><a href="#service">Service</a> | <a href="#about">About Us</a> | <a href="#contact">Contact Us</a></nav>
      <hr/>
      <div id="service">
      <strong>Our Service</strong>
      <p>
      <ul style="margin:auto;width:10%;text-align:left">
         <li>Jasa Pembuata website</li>
         <li>Jasa Seo</li>
         <li>Jasa Mencintaimu</li>
      </ul>
      </p>
      </div>
      <div id="contact">
         <strong>Contact Us</strong>
         <p></p>
         <font color="blue">021-xxx-xxx-xxx</font></p>
      </div>
      <div id="about">
         <strong>About Us</strong>
         <p><i>Aku ada karena kamu ada</i></p>
      </div>
      <footer>
         <hr/>
         Copyright © 2020<br/>Template by deretcode.com<br/>
      </footer>
   </body>
</html>
Jika kita buka di browser, hasinya akan seperti berikut,
Membuat halaman web dengan html
Udah gitu aja?
Tampilannya ko kurang menarik banget.
Yapss, oleh karena itu kita perlu belajar css untuk mendesain halaman web html yang kita buat.

Sampai disini tutorial belajar html dasarnya. Jika kalian merasa artikel ini menarik, silahkan klik tombol share. Jika ada pertanyaan atau ada hal yang ingin di sampaikan silahkan tulis di kolom komentar.
Good Luck!👍


advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Web Sederhana Dengan Html"

Silahkan berkomentar dengan baik dan bijak!