BELAJAR HTML | Cara Membuat Halaman Web Dengan HTML

Halo Selamat Datang Kembali Teman Teman ku, Bagaimana kabar nya? hehe
Oiya Di kesempatan ini, kita akan mencoba untuk Membuat Halaman Web Dengan HTML. dan disini kita akan mencoba bagaimana cara untuk, cara membuat coding website, membuat web html, belajar membuat website dengan html.
Nah karena kemarin kita sudah mempelajari tuh beberapa materi di Blog Awonapa Jr ini, maka InsyaAllah kita tidak akan sulit hehe.

  1. BELAJAR HTML | MEMPELAJARI DASAR KERANGKA HTML
  2. BELAJAR HTML | HEADING DAN PARAGRAPH PADA HTML
  3. BELAJAR HTML | CARA MEMBUAT HYPERLINK PADA HTML
  4. 6 CARA TERMUDAH BELAJAR HTML
  5. BELAJAR HTML | MENAMPILKAN GAMBAR DAN MENGENAL IFRAME
  6. BELAJAR HTML | MENGENAL FORMAT TEXT PADA HTML
  7. BELAJAR HTML | MENGENAL BLOCK DAN INLINE SERTA MENAMBAH KOMENTAR PADA HTML
  8. FAKTA TENTANG HTML 5 YANG TIDAK ANDA KETAHUI
  9. BELAJAR HTML | CARA MEMBUAT HALAMAN LEBIH DARI SATU PADA HTML
  10. BELAJAR HTML | CARA MUDAH MEMBUAT TABLE & LIST DI HTML
  11. BELAJAR HTML | APA ITU META TAG CHARSET UTF-8 PADA HTML 5
  12. BELAJAR HTML | CARA MEMBUAT SYMBOL ATAU KARAKTER KHUSUS DI HTML
  13. BELAJAR HTML | CARA MEMBUAT FORM PALING MUDAH PADA HTML
  14. BELAJAR HTML | MENAMBAH ATTRIBUTE LABEL, ID, CHECKBOX DAN RADIO PADA HTML
Cara Membuat Halaman Web Dengan HTML

Oiya teman teman perlu diperhatikan , karena sesuai dengan judul, Maka kita akan membuat Halaman Web Dengan HTML, Dengan HTML saja yah, Untuk menggunakan CSS, akan kita lanjutkan di postingan berikutnya. Okey!

Membuat Halaman Web Dengan HTML
Nah sebelum memulai untuk membuat halaman web dengan HTML, maka lebih baik nya kita harus membuat atau mendesign halaman web dulu. Tapi teman teman , setelah membuat kerangka seperti yang kita inginkan, maka Hal itu pasti kita Membutuhkan CSS. Nah jadi kita sekarang membuat nya tanpa CSS dulu yah.

Source Code dibawah ini adalah hasil dari kerangka yang masih acak acakan, karena tidak di imbangi dengan CSS.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Membuat Halaman Web Dengan HTML</title>
 <link rel="stylesheet" href="">
</head>
<body>
  <h1>Awonapa JR</h1>
  <h4>Tutorial Blog, Web Design, FullStack Web Developer</h4>
  <div>
   <a href="">Home</a>
   <a href="">Tentang Blog</a>
   <a href="">Desain Web</a>
   <a href="">Blogging</a>
  </div>
  <div>
  <p>
   Selamat datang pada halaman web Awonapa JR, Kita akan membahas tentang HTML 5
  </p>
  <img src="html.png" width="300px" height="300px" alt="html5">
  </div>
  <div>
  <p>Silahkan untuk mengisi Form ini : </p>
   <form>
    <fieldset>
      <legend> Personal Information</legend>
      <p>
        <label for = "full-name"> Nama Lengkap </label>
        <input placeholder="Masukan Nama Lengkap" id="full-name" name="fullName" type="text">
      </p>
      <p>
        <label for="email"> Email Address </label>
        <input placeholder="Email" id="email" name="email" type="email">
      </p>
      <p>
       <label for="telpon"> No Telp </label>
       <input placeholder="No Telpon" id="telpon" name="telpon" type="tel" >
      </p>
      <p>
       <label for= "berkas"> Input Berkas </label>
      <input id="berkas" name="berkas" type="file">
     </p>
    </fieldset>
  
 <fieldset>
  <legend>Work Information</legend>
  <!-- isi dengan lainya -->
    <p>
      <label for="programing"> Your Preferred Programing Languages?</label>
        <input placeholder="Input Language" type="text" name="programing" list="programingLangs" />
        <datalist id="programingLangs">
          <select name="altprogramingLangs">
          <option value="javascript"> JavaScript </option>
          <option value="java"> Java </option>
          <option value="ruby"> Ruby </option>
          <option value="python"> Python </option>
        </select>
      </datalist>
    </p>
  </fieldset>
</form>  
 
<form>
  <label for="gender"> Gender:</label>
  <input id="male-radio" type="radio" name="gender" value="male">
  <label for="male-radio">Male</label>
  <input id="female-radio" type="radio" name="gender" value="female">
  <label for="female-radio">Female</label>
</form>
  
<form>
    <label for="skill">Skill:</label>
    <input id="writing-checkbox" type="checkbox" name="skill" value="writing">
    <label for="writing-checkbox">Writing</label>
    <input id="reading-checkbox" type="checkbox" name="skill" value="reading">
    <label for="reading-checkbox">Reading</label>
    <input type="submit" value="Submit">
    <br>
  </form>
</div>
<div>
  <p>
    Jumlah Artikel yang sudah ada di dalam blog Awonapa JR
    <table border="1">
        <caption>Jumlah Artikel</caption>
        <tr>
            <th>Kategori</th>
            <th>Jumlah</th>
        </tr>
        <tr>
            <td>HTML</td>
            <td>14</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>0</td>
        </tr>
</table>
  </p>
</div>
<footer>
<p align="center">Footer</p>  
</footer>
</body>
</html>
Nah Jika di lihat dari Source Code diatas, maka seperti ini hasilnya.

See the Pen
Membuat Web
by Wahyu Pambudi (@wahyup)
on CodePen.


Nah untuk pengaturan gambar ukuran dan lebar teman teman bisa atur sendiri hehe.
dan juga pada codepen saya menggunakan linking gambar di halaman blog ini.

Mungkin sementara ini hasil nya adalah seperti itu ya teman teman.
Silahkan kepada teman teman yang ingin memberi saran atau kritik, bisa langsung di email ataupun di komentar. Terimakasih sudah berkunjung.

Salam Semangat!!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

1 Komentar untuk "BELAJAR HTML | Cara Membuat Halaman Web Dengan HTML"

  1. Baru mau belajar Programming nih….
    Terima kasih banyak atas sharingnya ya,sangat membantu artikelnya ,apalagi untuk pemula sperti saya mudah sekali dipahami. semoga kakak selalu dilancarkan rezekinya, ditunggu artikel selanjutnya y kak, Terimakasih.
    https://www.atmaluhur.ac.id/

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel