BELAJAR HTML | Cara Membuat Halaman Web Dengan HTML - Awonapa

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.

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!!

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

dian oktavina4 Maret 2020 pukul 00.44
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
Balasan

Tambahkan komentar

Awonapa - Website dan Blogging

BELAJAR HTML | Cara Membuat Halaman Web Dengan HTML

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

Menu Halaman Statis