Kamis, 03 Agustus 2017

Frame Element - Border CSS



Judul : Frame Element - Border CSS.
Tujuan : Mempelajari cara mengatur Border pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Padding CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element sesi terakhir yaitu Border CSS. Sesi ini juga mengakhiri dari materi CSS yang dimulai dari sesi materi Apa Itu CSS sampai dengan Frame Element.

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   #biru{
     height: 300px;
     width: 300px;
     border:solid yellow 5px;
   }
   
   #merah{
     Height: 300px;
     width: 300px;
     border-right:solid black 2px;
   }
  </style>
 
  <title>border</title>
 </head>
 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
 </body>
</html>

Frame Element - Padding CSS



Judul : Frame Element - Padding CSS.
Tujuan : Mempelajari cara mengatur Padding pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Margin CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element - Padding pada CSS. Frame Element ini di bagi menjadi 3 bagian yaitu margin, padding, dan border. Materi akan di bawas per sesi pada setiap materi mulai dari Margin CSS dan akan dilanjutkan dengan pembahasan Padding CSS dan sesi terakhir pada Frame Element adalah Border CSS.

<!DOCTYPE html>
<html>
 <head> 
  <style type="text/css">

   #biru{
     Height: 300px;
     width: 300px;
     background: blue;
     padding:10px;
   }
   
   #merah{
     Height: 300px;
     widht: 300px;
     background: red;
     padding-left:20px;
     padding-top:50px;
   }
  </style>

  <title>Padding</title>
 </head>

 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>  
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
 </body>
</html>

Frame Element - Margin CSS



Judul : Frame Element - Margin CSS.
Tujuan : Mempelajari cara mengatur margin atau pembatas pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Background CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element pada CSS. Frame Element ini di bagi menjadi 3 bagian yaitu margin, padding, dan border. Materi akan di bahas per sesi pada setiap materi mulai dari Margin CSS dan akan dilanjutkan dengan pembahasan Padding CSS.

<!DOCTYPE html>

<html>
 <head>
  <style type="text/css">
   #biru {
     height: 300px;
     width: 300px;
     background: blue;
     margin:10px;
   }
   
   #merah {
     height: 300px;
     width: 300px;
     background: red;
   }
  </style>
  <title>Margin</title>
 </head>

 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 </body>

</html>

Belajar Background CSS



Judul : Belajar Background CSS.
Tujuan : Mempelajari cara mengatur Background CSS untuk tampilan pada html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Width CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Background CSS. Background ini digunakan untuk memasukkan gambar atau warna dalam halaman html. Kegunaan background ada beberapa jenis pertama itu penggunaan background untuk gambar dan penggunaan background untuk warna solid. Pembahasaan CSS setelah materi ini adalah materi Frame Element CSS.

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   #warna_solid{
       height: 300px;
       width: 300px;
       background:red;
   }

   #warna_solid_code_warna{
       height: 300px;
       width: 300px;
       background:#666;
   }

   #gambar {
      height: 300px;
      width: 300px;
      background:url(gambar/gambarPertama.jpg);
   }
  </style>

  <title>Background</title> 
 </head>

 <body>
  <div id="warna_solid">WARNA SOLID</div>
  <div id="warna_solid_code_warna">WARNA SOLID MENGGUNAKAN KODE WARNA</div>
  <div id="gambar">BACKGROUND MENGGUNAKAN GAMBAR</div>
 </body>
</html>

Belajar Width CSS



Judul : Belajar Width CSS.
Tujuan : Mempelajari cara menggunakan width pada CSS untuk mengatur lebar.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Height CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Width CSS. Hampir sama dengan Height yang digunakan untuk mengatur dan menentukan tinggi pada tampilan, sedangkan Width digunakan untuk mengatur dan menentukan lebar pada tampilan. Pembasahan selanjutnya tentang CSS adalah tentang Background pada CSS.

<!DOCTYPE html>
<html>
 <head> 
  <style type="text/css">

  #lebar_min{
     min-width: 400px;
     background: red;
  }

  #lebar_max{
     max-width: 400px;
     background: red;
  }
  
  #lebar{
    width:400px;
    background:red;
  }

  </style>
  <title>Width</title>
 </head>

 <body>
  <p id="lebar_min"><b>CONTOH MIN WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p id="lebar_max"><b>CONTOH MAX WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p id="lebar"><b>CONTOH WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </body>
</html>

Belajar Height CSS



Judul : Belajar Height CSS.
Tujuan : Mempelajari cara menggunakan height pada CSS untuk mengatur tinggi.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Penulisan CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Height pada CSS. Height pada CSS di bagi menjadi 3 bagian utuh yaitu max-height, min-height, dan height itu sendiri. Fungsinya terurut adalah untuk menentukan tinggi maksimal, tinggi minimal dan tinggi. Pada penggunaan height biasanya akan diikuti oleh width yang berguna untuk menentukan lebar pada tampilan. Untuk Width CSS akan dibahas pada sesi setelah ini.

<!DOCTYPE html>
<html>
 <head>

  <style type="text/css">
  #tinggi_min{
     min-height: 100px;
     width: 300px;
     background:red;
  }
  
  #tinggi_max {
      max-height: 100px;
      width: 300px;
      background:red;
  }

  #tinggi{
    height: 200px;
    width: 300px;
    background: red;
  }

  </style>
  <title>Height</title>

 </head>
 <body>
 
  <p id="tinggi_min"><b>CONTOH MIN HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <p id="tinggi_max"><b>CONTOH MAX HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <p id="tinggi"><b>CONTOH HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

 </body>

</html>

Belajar Penulisan CSS - External CSS



Judul : Belajar Penulisan CSS - External CSS.
Tujuan : Mempelajari cara penulisan CSS di luar file html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Belajar Membuat Selector CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai penulisan CSS. Penulisan pada CSS terbagi menjadi 3 bagian yaitu inline cssinternal css dan external css. Pada materi kali ini akan membahas tentang External CSS. External CSS yaitu penulisan CSS pada file lain dan diluar file html yang dibangun. Selanjutnya pembahasan pada materi  Height CSS.

<!DOCTYPE html>

<html>

 <head>

  <title>External CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

  <p> Tag p akan dibaca sebagai selector oleh CSS.</p>
  <p id="merah">Tag p memiliki id merah.</p>
  <p class="biru besar">Tag p memiliki class besar dan juga kelas biru.</p>

 </body>

</html>


p{
 color:yellow; }

#merah{
 color:red; }

.besar{
 font-size:20px; }

.biru{
 color:blue; }

Belajar Penulisan CSS - Internal CSS



Judul : Belajar Penulisan CSS - Internal CSS.
Tujuan : Mempelajari cara penulisan CSS di dalam file html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Belajar Membuat Selector CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai penulisan CSS. Penulisan pada CSS terbagi menjadi 3 bagian yaitu inline cssinternal css dan external css. Pada materi kali ini akan membahas tentang Internal CSS. Internal CSS yaitu penulisan CSS di dalam file html yang sedang dibangun. Selanjutnya pembahasan pada materi Penulisan CSS - External CSS.

<!DOCTYPE html>

<html>
 <head>
  <title>Pertama CSS</title>
  <style>
   p{
    font-weight:bold;
    color:red;
   }
  </style>
 </head>

 <body>
  <p>Tag p akan dibaca sebagai selector oleh CSS.</p>
 </body>
</html>

Belajar Penulisan CSS - Inline CSS



Judul : Belajar Penulisan CSS - Inline CSS.
Tujuan : Mempelajari cara penulisan CSS dengan secara langsung di dalam teks html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Belajar Membuat Selector CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai penulisan CSS. Penulisan pada CSS terbagi menjadi 3 bagian yaitu inline css, internal css dan external css. Pada materi kali ini akan membahas tentang Inline CSS. Inline CSS yaitu dengan penulisan langsung di dalam teks html. Selanjutnya pembahasan pada materi Penulisan CSS - Internal CSS.

<!DOCTYPE html>

<html>

 <head>
  <title>Inline CSS</title>
 </head>

 <body>
  <p style="color:blue; font-size:20px;">Tag p diberikan CSS dengan text warna biru dan ukuran font 20px.</p>
 </body>

</html>

Belajar Membuat Selector CSS



Judul : Belajar Membuat Selector CSS.
Tujuan : Mempelajari dan membuat selector CSS berupa selector id, class dan html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Apa itu CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Selector CSS. Selector CSS adalah pengenal antara html dan CSS sehingga CSS dapat memanipulasi tag HTML tersebut. Selector CSS dibagi menjadi 3 bagian yaitu selector id, selector class dan selector langsung / selector html. Selector id menggunakan tanda pagar, sedangakan selector id mengguanakan tanda titik dan selector html menggunakan tag html langsung. Untuk materi selanjutnya, akan di bahas mengenai Penulisan CSS.

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
  #hijau {color: green; }
  .merah {color: red; }
  h2 {color: blue; }
  </style>
  
  <title> Selector CSS</title>
  
 </head>
 
 <body>
  <p>Berikut ini adalah tag HTML yang tidak diberi id hijau</p>
  
  <p id="hijau">Berikut ini adalah tag HTML yang diberi id hijau</p>
  
  <p class="merah">Berikut ini adalah tag HTML yang diberi class merah</p>
  
  <h2>Berikut adalah tag HTML yang  dihubungkan dengan style CSS h2</h2>
 </body>
</html>

Pengenalan Apa Itu CSS



Judul : Pengenalan Apa Itu CSS
Tujuan : Mengenal dasar dari pemrograman CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Apa itu HTML pada sesi sebelumnya, sekarang kita akan mempelajari mengenai CSS. CSS merupakan bagian penting dalam web developer karena merupakan aturan untuk mengatur komponen-komponen html di dalam sebuah web. Biasanya CSS digunakan untuk mengatur warna font, ukuran font, jarak antar paragraf, membuat layout dan lain - lain. Materi selanjutnya pada pemrograman CSS adalah membahas tentang Selector pada CSS.

<!DOCTYPE html>
<html>
 <head>
  <title>Pertama CSS</title>
  <style>
   p{
    font-weight:bold;
    color:red;
  </style>
 </head>
 <body>
  <p>Tag p akan dibaca sebagai selector oleh CSS.</p>
 </body>
</html>

Selasa, 01 Agustus 2017

Belajar Membuat Form HTML



Judul : Belajar Membuat Form HTML
Tujuan : Mempelajari cara untuk membuat form menggunakan html untuk website.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah memahami materi sebelumnya yaitu cara untuk membuat Tabel HTML, sekarang lanjut pada pembahasan terakhir untuk materi Basic HTML yaitu Membuat Form HTML. Form pada html memiliki cukup banyak fungsi, diantanya difunakan untuk menu pendaftaran pada setiap website. Form registry atau pendaftaran ini lebih komplek lagi akan dibahas pada sesi materi pembuatan website. Untuk pembuatan website sendiri, materi akan mengambil tema Membuat Website Toko Online.

<!DOCTYPE html>
<html>
 <head>
 
  <title>Form HTML</title>
  
 </head>
 
 <body>
 
  <form action="file tujuan.php" method="GET">
   <input type="text" name="nama_variable_1" />
   
   <br/><hr/>
   <textarea name="nama_variable_2" /> </textarea>
   
   <br/><hr/>
   <select name="nama_variable_3">
    <option value="nilai_1">Label 1</option>
    <option value="nilai_2">Label 2</option>
    <option value="nilai_3">Label 3</option>
    
   </select>
   <input type="radio" name="nama_variable_4" value="1">1
   <input type="radio" name="nama_variable_4" value="2">2
   <input type="radio" name="nama_variable_4" value="3">3
  
   <br/><hr/>
   <input type="radio" name="jenis_kelamin" value="pria">pria
   <input type="radio" name="jenis_kelamin" value="wanita">wanita
   
   <br/><hr/>
   <input type="checkbox" name="name_variable_5" value="1">1
   <input type="checkbox" name="name_variable_5" value="2">2
   <input type="checkbox" name="name_variable_5" value="3">3
   <input type="checkbox" name="name_variable_5" value="4">4
   
   <br/><hr/>
   <input type="checkbox" name="media" value="majalah">majalah
   <input type="checkbox" name="media" value="google">google
   <input type="checkbox" name="media" value="koran">koran
  
   <br/><hr/>
   <input type="file" name="nama_variable_6" />
   
   <br/><hr/>
   <input type="submit" value="kirim" name="name_variable_7" />
  </form>
 </body>
</html>


Belajar Membuat Tabel HTML



Judul : Belajar Membuat Tabel HTML
Tujuan : Mempelajari cara untuk membuat tabel pada html.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah mempelajari Cara Membuat List Pada HTML, materi selanjutnya adalah Cara Membuat Tabel Pada HTML. Tabel digunakan untuk banyak hal pada saat membangun website. Salah satu diantaranya untuk membuat rencana anggaran terstruktur atau bahkan portofolio. Pada materi selanjutnya adalah membahas tentang Cara Membuat Form Pada HTML.


<!DOCTYPE html>
<html>
 <head>
  <title>Table | Table div</title>
 </head>
 <body>
  <table border="1px">
   <tr>
    <th>Baris Judul Kolom 1</th>
    <th>Baris Judul Kolom 2</th>
    <th>Baris Judul Kolom 3</th>
    <th>Baris Judul Kolom 4</th> 
   </tr>
   
   <tr>
    <td>Baris 2 Kolom 1</td>
    <td>Baris 2 Kolom 2</td>
    <td>Baris 2 Kolom 3</td>
    <td>Baris 2 Kolom 4</td>
   </tr>
   
   <tr>
    <td>Baris 3 Kolom 1</td>
    <td>Baris 3 Kolom 2</td>
    <td>Baris 3 Kolom 3</td>
    <td>Baris 3 Kolom 4</td>
   </tr>
   
   <tr>
    <td>Baris 4 Kolom 1</td>
    <td>Baris 4 Kolom 2</td>
    <td>Baris 4 Kolom 3</td>
    <td>Baris 4 Kolom 4</td>
   </tr>
   
  </table>
 </body>
</html>

Belajar Membuat List HTML



Judul : Belajar Membuat List HTML
Tujuan : Mempelajari cara untuk membuat list menggunakan HTML untuk membangun website.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah belajar menggunakan Tag Division HTML pada materi sebelumnya. Sekarang mari membahas materi untuk membuat list pada html. List pada html biasanya digunakan untuk mengelompokan bagian - bagian tertentu atau memberikan kategori satuan apa saja dalam satu informasi. Setelah materi ini selanjutnya adalah membahas tentang Cara Membuat Tabel Pada HTML.


<!DOCTYPE html>
<html>
 <head>
 
  
 <title>List | Tag list</title>
  
 </head>
 
 <body>
  <ul>
   <li>List 1</li>
   <li>List 2</li>
   <li>List seterusnya</li>
  </ul>
  
  <ul style="list-style-type:square">
   <li>List 1</li>
   <li>List 2</li>
   <li>List Seterusnya</li>
  </ul>
  
  <ul style="list-style-type:circle">
   <li>List 1</li>
   <li>List 2</li>
   <li>List Seterusnya</li>
  </ul>
  <hr/>
  
  <ol>
   <li>List 1</li>
   <li>List 2</li>
   <li>List seterusnya</li>
  </ol>
  
  <ol type="A">
   <li>List 1</li>
   <li>List 2</li>
   <li>List Seterusnya</li>   
  </ol>
  <ol type="I">
   <li>List 1</li>
   <li>List 2</li>
   <li>List Seterusnya</li>
  </ol>
 </body>
</html>

Belajar Tag Division HTML



Judul : Belajar Tag Division HTML
Tujuan : Mempelajari cara untuk menggunakan Tag Division untuk mengelompokan tag - tag HTML lain dalam membangun website.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah belajar Format Teks HTML pada materi sebelmunya, sekarang mari kita bahas materi Tag Division HTML. Tag division alias <div> di gunakan untuk mengelompokan tag - tag yang ada pada html. Biasanya tag div ini digunakan untuk membangun template dasar pada tampilan website yang akan di bangun. Untuk materi selanjutnya adalah membahas tentang Cara Membuat List HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Division | Tag div</title>
 </head>
 <body>
  <div>
   <h3>Judul Div 1</h3>
   <p>Ini Konten Div 1</p>
  </div>
  
  <div style="background:yellow;">
   <h3>Judul Div 2</h3>
   <p>ini konten div 2</p>
  </div>
 </body>
</html>

Belajar Format Teks HTML - Tag BR HTML



Judul : Belajar Format Teks HTML - Tag BR HTML
Tujuan : Mempelajari cara untuk mengatur Format Teks Baris ( br ) pada HTML.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah mempelajari Hyperlink HTML pada materi sebelumnya, sekarang materi dilanjutkan dengan membahas Format Teks HTML. Format Teks pada HTML akan dibahas menjadi 3 bagian yaitu  Pemformatan Teks menggunakan Tag Heading, Tag Paragraf dan Tag Br.

Format Teks Tag BR HTML digunakan untuk membuat paris baru pada tulisan html. Tujuan baris baru ini bukan hanya untuk memberikan kesan tampilan, tapi juga digunakan untuk menunjukkan suatu keterangan baru atau format penulisan yang digunakan. Setelah mempelajari semua format teks html, materi selanjutnya adalah membahas tentang Tag Division <div> Pada HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Break Line | Tag br</title>
 </head>
 <body>
  <p>ini konten di baris pertama <br/> ini akan menjadi konten di baris kedua karena ada tag br. </p>
 </body>
</html>

Belajar Format Teks HTML - Tag Paragraf HTML



Judul : Belajar Format Teks HTML - Tag Paragraf HTML
Tujuan : Mempelajari cara untuk mengatur Format Teks Paragraf ( p ) pada HTML.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah mempelajari Hyperlink HTML pada materi sebelumnya, sekarang materi dilanjutkan dengan membahas Format Teks HTML. Format Teks pada HTML akan dibahas menjadi 3 bagian yaitu  Pemformatan Teks menggunakan Tag Heading, Tag Paragraf dan Tag Br.

Format Teks Tag Paragraf HTML digunakan untuk membuat paragraf - paragraf pada tulisan html. Tujuan paragraf ini bukan hanya untuk memberikan kesan tampilan, tapi juga digunakan untuk menunjukkan satu kesatuan pada tulisan informasi yang di tulis. Setelah mempelajari semua format teks html, materi selanjutnya adalah membahas tentang Tag Division <div> Pada HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Paragraph | Tag p</title>
 </head>
 <body>
  <p>Paragraph 1 ....</p>
  <p>Paragraph 2 ....</p>
 </body>
</html>

Belajar Format Teks HTML - Tag Heading HTML



Judul : Belajar Format Teks HTML - Tag Heading HTML
Tujuan : Mempelajari cara untuk mengatur Format Teks Heading ( h1, h2, dst ) pada HTML.
Target : Dapat memahami struktur dari pemrograman HTML

Setelah mempelajari Hyperlink HTML pada materi sebelumnya, sekarang materi dilanjutkan dengan membahas Format Teks HTML. Format Teks pada HTML akan dibahas menjadi 3 bagian yaitu  Pemformatan Teks menggunakan Tag Heading, Tag Paragraf dan Tag Br.

Format Teks Tag Heading HTML digunakan untuk membuat heading - heading pada tulisan html. Tujuan heading ini bukan hanya untuk memberikan kesan tampilan, tapi juga digunakan untuk menunjukkan judul maupun sub judul. Setelah mempelajari semua format teks html, materi selanjutnya adalah membahas tentang Tag Division <div> Pada HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Heading | Tag h</title>
 </head>
 <body>
  <h1>Judul 1</h1>
  <h2>Judul 2</h2>
  <h3>Judul 3</h3>
  <h4>Judul 4</h4>
  <h5>Judul 5</h5>
  <h6>Judul 6</h6>
 </body>
</html>

Belajar Hyperlink Untuk Membuat Link di HTML



Judul : Belajar Hyperlink Untuk Membuat Link di HTML
Tujuan : Mempelajari cara untuk membuat link aktif di HTML baik dalam membuka link pada 1 tab jendela maupun membuka link di tab baru.
Target : Dapat memahami struktur dari pemrograman HTML.

Setelah mempelajari Tag Image HTML, materi selanjutnya adalah membahas tentang Hyperlink atau Membuat Link Pada HTML. Pada pembahasan hyperlink berisi cara membuat link aktif di HTML yang kita buat dan target dalam membuka link tersebut. Link dapat di buka pada jendela yang sama dan juga dapat di buka pada jendela yang berbeda/tab baru. Materi selanjutnya akan membahas tentang Format Teks pada HTML yang meliputi Tag Heading HTML, Tag Paragraf HTML dan Tag br HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Hyperlink | Tag a</title>
 </head>
 <body>
  <a href="http://wegodev.com">buka wegodev.com</a>
  <br/>
  <a href="pertama.html">pertama</a>
  </br>
  <a href="pertama.html" target="blank">pertama dibuka tab baru</a>
 </body>
</html>

Belajar Tag Image HTML Untuk Memasukan Gambar



Judul : Belajar Tag Image HTML Untuk Memasukan Gambar
Tujuan : Mempelajari cara untuk memasukkan image/gambar kedalam HTML dari Komputer Pribari atau dari Website Orang Lain.
Target : Dapat memahami struktur dari pemrograman HTML.

Untuk belajar Tag Image HTML kali ini, sebelumnya kalian harus mengenal dulu Apa Itu HTML materi yang sebelumnya telah diberikan. Setelah mempelajari Tag Image HTML, materi selanjutnya adalah membahas tentang Hyperlink atau Membuat Link Pada HTML.

<!DOCTYPE html>
<html>
 <head>
  <title>Image | tag img</title>
 </head>
 <body>
  <img src="gambar/gambarPertama.jpg" />
  <img src="http://wegodev.com/asset/images/tes.png" />
 </body>
</html>